From 5dd62f24e9c7615b1d2f02d8f5e901e84de35220 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 18 Jun 2022 16:53:10 +0200 Subject: [PATCH 01/21] removed function wrappers --- src/brushes/pencil_brush.class.js | 553 ++++++----- src/canvas.class.js | 3 - src/color.class.js | 1144 +++++++++++----------- src/control.class.js | 666 +++++++------ src/controls.actions.js | 8 +- src/controls.render.js | 186 ++-- src/filters/2d_backend.class.js | 110 +-- src/filters/blendcolor_filter.class.js | 471 +++++---- src/filters/blendimage_filter.class.js | 453 +++++---- src/filters/blur_filter.class.js | 388 ++++---- src/filters/brightness_filter.class.js | 192 ++-- src/filters/colormatrix_filter.class.js | 279 +++--- src/filters/composed_filter.class.js | 115 ++- src/filters/contrast_filter.class.js | 188 ++-- src/filters/convolute_filter.class.js | 8 +- src/filters/filter_boilerplate.js | 188 ++-- src/filters/filter_generator.js | 153 ++- src/filters/gamma_filter.class.js | 232 +++-- src/filters/grayscale_filter.class.js | 8 +- src/filters/hue_rotation.class.js | 8 +- src/filters/invert_filter.class.js | 9 +- src/filters/noise_filter.class.js | 8 +- src/filters/pixelate_filter.class.js | 8 +- src/filters/removecolor_filter.class.js | 8 +- src/filters/resize_filter.class.js | 8 +- src/filters/saturate_filter.class.js | 8 +- src/filters/vibrance_filter.class.js | 8 +- src/filters/webgl_backend.class.js | 5 - src/gradient.class.js | 3 - src/intersection.class.js | 8 +- src/mixins/canvas_events.mixin.js | 3 - src/mixins/canvas_gestures.mixin.js | 2 - src/mixins/canvas_grouping.mixin.js | 4 - src/mixins/default_controls.js | 3 - src/mixins/itext.svg_export.js | 2 - src/mixins/itext_behavior.mixin.js | 3 - src/mixins/object.svg_export.js | 2 - src/mixins/object_geometry.mixin.js | 3 - src/mixins/object_interactivity.mixin.js | 3 - src/mixins/object_origin.mixin.js | 4 - src/mixins/observable.mixin.js | 3 - src/mixins/stateful.mixin.js | 3 - src/mixins/text_style.mixin.js | 2 - src/parser.js | 8 +- src/pattern.class.js | 5 - src/point.class.js | 8 +- src/shadow.class.js | 13 +- src/shapes/active_selection.class.js | 12 +- src/shapes/circle.class.js | 13 +- src/shapes/ellipse.class.js | 8 +- src/shapes/group.class.js | 2 +- src/shapes/image.class.js | 12 +- src/shapes/itext.class.js | 2 - src/shapes/line.class.js | 12 +- src/shapes/object.class.js | 11 +- src/shapes/path.class.js | 8 +- src/shapes/polygon.class.js | 13 +- src/shapes/polyline.class.js | 13 +- src/shapes/rect.class.js | 13 +- src/shapes/text.class.js | 13 +- src/shapes/textbox.class.js | 7 +- src/shapes/triangle.class.js | 13 +- src/util/anim_ease.js | 4 - src/util/animate_color.js | 3 - src/util/dom_misc.js | 4 - src/util/dom_request.js | 3 - src/util/lang_array.js | 4 - src/util/lang_class.js | 21 - src/util/lang_object.js | 2 - src/util/lang_string.js | 3 - src/util/misc.js | 6 +- src/util/named_accessors.mixin.js | 4 - src/util/path.js | 2 - 73 files changed, 2652 insertions(+), 3053 deletions(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 83539c4c5c3..0dd6e39cc49 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -1,310 +1,309 @@ -(function() { +/** + * PencilBrush class + * @class fabric.PencilBrush + * @extends fabric.BaseBrush + */ +fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { + /** - * PencilBrush class - * @class fabric.PencilBrush - * @extends fabric.BaseBrush + * Discard points that are less than `decimate` pixel distant from each other + * @type Number + * @default 0.4 */ - fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { - - /** - * Discard points that are less than `decimate` pixel distant from each other - * @type Number - * @default 0.4 - */ - decimate: 0.4, + decimate: 0.4, - /** - * Draws a straight line between last recorded point to current pointer - * Used for `shift` functionality - * - * @type boolean - * @default false - */ - drawStraightLine: false, + /** + * Draws a straight line between last recorded point to current pointer + * Used for `shift` functionality + * + * @type boolean + * @default false + */ + drawStraightLine: false, - /** - * The event modifier key that makes the brush draw a straight line. - * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. - * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} - */ - straightLineKey: 'shiftKey', + /** + * The event modifier key that makes the brush draw a straight line. + * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. + * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} + */ + straightLineKey: 'shiftKey', - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.PencilBrush} Instance of a pencil brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this._points = []; - }, + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.PencilBrush} Instance of a pencil brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this._points = []; + }, - needsFullRender: function () { - return this.callSuper('needsFullRender') || this._hasStraightLine; - }, + needsFullRender: function () { + return this.callSuper('needsFullRender') || this._hasStraightLine; + }, - /** - * Invoked inside on mouse down and mouse move - * @param {Object} pointer - */ - _drawSegment: function (ctx, p1, p2) { - var midPoint = p1.midPointFrom(p2); - ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); - return midPoint; - }, + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + _drawSegment: function (ctx, p1, p2) { + var midPoint = p1.midPointFrom(p2); + ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); + return midPoint; + }, - /** - * Invoked on mouse down - * @param {Object} pointer - */ - onMouseDown: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this.drawStraightLine = options.e[this.straightLineKey]; - this._prepareForDrawing(pointer); - // capture coordinates immediately - // this allows to draw dots (when movement never occurs) - this._captureDrawingPath(pointer); - this._render(); - }, + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this.drawStraightLine = options.e[this.straightLineKey]; + this._prepareForDrawing(pointer); + // capture coordinates immediately + // this allows to draw dots (when movement never occurs) + this._captureDrawingPath(pointer); + this._render(); + }, - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this.drawStraightLine = options.e[this.straightLineKey]; - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this.drawStraightLine = options.e[this.straightLineKey]; + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this._captureDrawingPath(pointer) && this._points.length > 1) { + if (this.needsFullRender()) { + // redraw curve + // clear top canvas + this.canvas.clearContext(this.canvas.contextTop); + this._render(); } - if (this._captureDrawingPath(pointer) && this._points.length > 1) { - if (this.needsFullRender()) { - // redraw curve - // clear top canvas - this.canvas.clearContext(this.canvas.contextTop); - this._render(); - } - else { - var points = this._points, length = points.length, ctx = this.canvas.contextTop; - // draw the curve update - this._saveAndTransform(ctx); - if (this.oldEnd) { - ctx.beginPath(); - ctx.moveTo(this.oldEnd.x, this.oldEnd.y); - } - this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); - ctx.stroke(); - ctx.restore(); + else { + var points = this._points, length = points.length, ctx = this.canvas.contextTop; + // draw the curve update + this._saveAndTransform(ctx); + if (this.oldEnd) { + ctx.beginPath(); + ctx.moveTo(this.oldEnd.x, this.oldEnd.y); } + this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); + ctx.stroke(); + ctx.restore(); } - }, + } + }, - /** - * Invoked on mouse up - */ - onMouseUp: function(options) { - if (!this.canvas._isMainEvent(options.e)) { - return true; - } - this.drawStraightLine = false; - this.oldEnd = undefined; - this._finalizeAndAddPath(); - return false; - }, + /** + * Invoked on mouse up + */ + onMouseUp: function(options) { + if (!this.canvas._isMainEvent(options.e)) { + return true; + } + this.drawStraightLine = false; + this.oldEnd = undefined; + this._finalizeAndAddPath(); + return false; + }, - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _prepareForDrawing: function(pointer) { + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _prepareForDrawing: function(pointer) { - var p = new fabric.Point(pointer.x, pointer.y); + var p = new fabric.Point(pointer.x, pointer.y); - this._reset(); - this._addPoint(p); - this.canvas.contextTop.moveTo(p.x, p.y); - }, + this._reset(); + this._addPoint(p); + this.canvas.contextTop.moveTo(p.x, p.y); + }, - /** - * @private - * @param {fabric.Point} point Point to be added to points array - */ - _addPoint: function(point) { - if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { - return false; - } - if (this.drawStraightLine && this._points.length > 1) { - this._hasStraightLine = true; - this._points.pop(); - } - this._points.push(point); - return true; - }, + /** + * @private + * @param {fabric.Point} point Point to be added to points array + */ + _addPoint: function(point) { + if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { + return false; + } + if (this.drawStraightLine && this._points.length > 1) { + this._hasStraightLine = true; + this._points.pop(); + } + this._points.push(point); + return true; + }, - /** - * Clear points array and set contextTop canvas style. - * @private - */ - _reset: function() { - this._points = []; - this._setBrushStyles(this.canvas.contextTop); - this._setShadow(); - this._hasStraightLine = false; - }, + /** + * Clear points array and set contextTop canvas style. + * @private + */ + _reset: function() { + this._points = []; + this._setBrushStyles(this.canvas.contextTop); + this._setShadow(); + this._hasStraightLine = false; + }, - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _captureDrawingPath: function(pointer) { - var pointerPoint = new fabric.Point(pointer.x, pointer.y); - return this._addPoint(pointerPoint); - }, + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _captureDrawingPath: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y); + return this._addPoint(pointerPoint); + }, - /** - * Draw a smooth path on the topCanvas using quadraticCurveTo - * @private - * @param {CanvasRenderingContext2D} [ctx] - */ - _render: function(ctx) { - var i, len, - p1 = this._points[0], - p2 = this._points[1]; - ctx = ctx || this.canvas.contextTop; - this._saveAndTransform(ctx); - ctx.beginPath(); - //if we only have 2 points in the path and they are the same - //it means that the user only clicked the canvas without moving the mouse - //then we should be drawing a dot. A path isn't drawn between two identical dots - //that's why we set them apart a bit - if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { - var width = this.width / 1000; - p1 = new fabric.Point(p1.x, p1.y); - p2 = new fabric.Point(p2.x, p2.y); - p1.x -= width; - p2.x += width; - } - ctx.moveTo(p1.x, p1.y); + /** + * Draw a smooth path on the topCanvas using quadraticCurveTo + * @private + * @param {CanvasRenderingContext2D} [ctx] + */ + _render: function(ctx) { + var i, len, + p1 = this._points[0], + p2 = this._points[1]; + ctx = ctx || this.canvas.contextTop; + this._saveAndTransform(ctx); + ctx.beginPath(); + //if we only have 2 points in the path and they are the same + //it means that the user only clicked the canvas without moving the mouse + //then we should be drawing a dot. A path isn't drawn between two identical dots + //that's why we set them apart a bit + if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { + var width = this.width / 1000; + p1 = new fabric.Point(p1.x, p1.y); + p2 = new fabric.Point(p2.x, p2.y); + p1.x -= width; + p2.x += width; + } + ctx.moveTo(p1.x, p1.y); - for (i = 1, len = this._points.length; i < len; i++) { - // we pick the point between pi + 1 & pi + 2 as the - // end point and p1 as our control point. - this._drawSegment(ctx, p1, p2); - p1 = this._points[i]; - p2 = this._points[i + 1]; - } - // Draw last line as a straight line while - // we wait for the next point to be able to calculate - // the bezier control point - ctx.lineTo(p1.x, p1.y); - ctx.stroke(); - ctx.restore(); - }, + for (i = 1, len = this._points.length; i < len; i++) { + // we pick the point between pi + 1 & pi + 2 as the + // end point and p1 as our control point. + this._drawSegment(ctx, p1, p2); + p1 = this._points[i]; + p2 = this._points[i + 1]; + } + // Draw last line as a straight line while + // we wait for the next point to be able to calculate + // the bezier control point + ctx.lineTo(p1.x, p1.y); + ctx.stroke(); + ctx.restore(); + }, - /** - * Converts points to SVG path - * @param {Array} points Array of points - * @return {(string|number)[][]} SVG path commands - */ - convertPointsToSVGPath: function (points) { - var correction = this.width / 1000; - return fabric.util.getSmoothPathFromPoints(points, correction); - }, + /** + * Converts points to SVG path + * @param {Array} points Array of points + * @return {(string|number)[][]} SVG path commands + */ + convertPointsToSVGPath: function (points) { + var correction = this.width / 1000; + return fabric.util.getSmoothPathFromPoints(points, correction); + }, - /** - * @private - * @param {(string|number)[][]} pathData SVG path commands - * @returns {boolean} - */ - _isEmptySVGPath: function (pathData) { - var pathString = fabric.util.joinPath(pathData); - return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; - }, + /** + * @private + * @param {(string|number)[][]} pathData SVG path commands + * @returns {boolean} + */ + _isEmptySVGPath: function (pathData) { + var pathString = fabric.util.joinPath(pathData); + return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; + }, - /** - * Creates fabric.Path object to add on canvas - * @param {(string|number)[][]} pathData Path data - * @return {fabric.Path} Path to add on canvas - */ - createPath: function(pathData) { - var path = new fabric.Path(pathData, { - fill: null, - stroke: this.color, - strokeWidth: this.width, - strokeLineCap: this.strokeLineCap, - strokeMiterLimit: this.strokeMiterLimit, - strokeLineJoin: this.strokeLineJoin, - strokeDashArray: this.strokeDashArray, - }); - if (this.shadow) { - this.shadow.affectStroke = true; - path.shadow = new fabric.Shadow(this.shadow); - } + /** + * Creates fabric.Path object to add on canvas + * @param {(string|number)[][]} pathData Path data + * @return {fabric.Path} Path to add on canvas + */ + createPath: function(pathData) { + var path = new fabric.Path(pathData, { + fill: null, + stroke: this.color, + strokeWidth: this.width, + strokeLineCap: this.strokeLineCap, + strokeMiterLimit: this.strokeMiterLimit, + strokeLineJoin: this.strokeLineJoin, + strokeDashArray: this.strokeDashArray, + }); + if (this.shadow) { + this.shadow.affectStroke = true; + path.shadow = new fabric.Shadow(this.shadow); + } - return path; - }, + return path; + }, - /** - * Decimate points array with the decimate value - */ - decimatePoints: function(points, distance) { - if (points.length <= 2) { - return points; - } - var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), - i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], - cDistance; - for (i = 1; i < l - 1; i++) { - cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); - if (cDistance >= adjustedDistance) { - lastPoint = points[i]; - newPoints.push(lastPoint); - } + /** + * Decimate points array with the decimate value + */ + decimatePoints: function(points, distance) { + if (points.length <= 2) { + return points; + } + var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), + i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], + cDistance; + for (i = 1; i < l - 1; i++) { + cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); + if (cDistance >= adjustedDistance) { + lastPoint = points[i]; + newPoints.push(lastPoint); } - /** - * Add the last point from the original line to the end of the array. - * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. - */ - newPoints.push(points[l]); - return newPoints; - }, - + } /** - * On mouseup after drawing the path on contextTop canvas - * we use the points captured to create an new fabric path object - * and add it to the fabric canvas. + * Add the last point from the original line to the end of the array. + * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. */ - _finalizeAndAddPath: function() { - var ctx = this.canvas.contextTop; - ctx.closePath(); - if (this.decimate) { - this._points = this.decimatePoints(this._points, this.decimate); - } - var pathData = this.convertPointsToSVGPath(this._points); - if (this._isEmptySVGPath(pathData)) { - // do not create 0 width/height paths, as they are - // rendered inconsistently across browsers - // Firefox 4, for example, renders a dot, - // whereas Chrome 10 renders nothing - this.canvas.requestRenderAll(); - return; - } + newPoints.push(points[l]); + return newPoints; + }, - var path = this.createPath(pathData); - this.canvas.clearContext(this.canvas.contextTop); - this.canvas.fire('before:path:created', { path: path }); - this.canvas.add(path); + /** + * On mouseup after drawing the path on contextTop canvas + * we use the points captured to create an new fabric path object + * and add it to the fabric canvas. + */ + _finalizeAndAddPath: function() { + var ctx = this.canvas.contextTop; + ctx.closePath(); + if (this.decimate) { + this._points = this.decimatePoints(this._points, this.decimate); + } + var pathData = this.convertPointsToSVGPath(this._points); + if (this._isEmptySVGPath(pathData)) { + // do not create 0 width/height paths, as they are + // rendered inconsistently across browsers + // Firefox 4, for example, renders a dot, + // whereas Chrome 10 renders nothing this.canvas.requestRenderAll(); - path.setCoords(); - this._resetShadow(); + return; + } + var path = this.createPath(pathData); + this.canvas.clearContext(this.canvas.contextTop); + this.canvas.fire('before:path:created', { path: path }); + this.canvas.add(path); + this.canvas.requestRenderAll(); + path.setCoords(); + this._resetShadow(); + + + // fire event 'path' created + this.canvas.fire('path:created', { path: path }); + } +}); - // fire event 'path' created - this.canvas.fire('path:created', { path: path }); - } - }); -})(); diff --git a/src/canvas.class.js b/src/canvas.class.js index 39964f2cb51..487da2870a4 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -1,5 +1,3 @@ -(function() { - var getPointer = fabric.util.getPointer, degreesToRadians = fabric.util.degreesToRadians, isTouchEvent = fabric.util.isTouchEvent; @@ -1374,4 +1372,3 @@ fabric.Canvas[prop] = fabric.StaticCanvas[prop]; } } -})(); diff --git a/src/color.class.js b/src/color.class.js index c1346310ed5..c8858423175 100644 --- a/src/color.class.js +++ b/src/color.class.js @@ -1,636 +1,630 @@ -(function(global) { - - 'use strict'; +var fabric = exports.fabric || (exports.fabric = { }); + +if (fabric.Color) { + fabric.warn('fabric.Color is already defined.'); + return; +} + +/** + * Color class + * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; + * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. + * + * @class fabric.Color + * @param {String} color optional in hex or rgb(a) or hsl format or from known color list + * @return {fabric.Color} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} + */ +function Color(color) { + if (!color) { + this.setSource([0, 0, 0, 1]); + } + else { + this._tryParsingColor(color); + } +} - var fabric = global.fabric || (global.fabric = { }); +fabric.Color = Color; - if (fabric.Color) { - fabric.warn('fabric.Color is already defined.'); - return; - } +fabric.Color.prototype = /** @lends fabric.Color.prototype */ { /** - * Color class - * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; - * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. - * - * @class fabric.Color - * @param {String} color optional in hex or rgb(a) or hsl format or from known color list - * @return {fabric.Color} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} + * @private + * @param {String|Array} color Color value to parse */ - function Color(color) { - if (!color) { - this.setSource([0, 0, 0, 1]); - } - else { - this._tryParsingColor(color); + _tryParsingColor: function(color) { + var source; + + if (color in Color.colorNameMap) { + color = Color.colorNameMap[color]; } - } - fabric.Color = Color; + if (color === 'transparent') { + source = [255, 255, 255, 0]; + } - fabric.Color.prototype = /** @lends fabric.Color.prototype */ { + if (!source) { + source = Color.sourceFromHex(color); + } + if (!source) { + source = Color.sourceFromRgb(color); + } + if (!source) { + source = Color.sourceFromHsl(color); + } + if (!source) { + //if color is not recognize let's make black as canvas does + source = [0, 0, 0, 1]; + } + if (source) { + this.setSource(source); + } + }, - /** - * @private - * @param {String|Array} color Color value to parse - */ - _tryParsingColor: function(color) { - var source; + /** + * Adapted from https://github.com/mjijackson + * @private + * @param {Number} r Red color value + * @param {Number} g Green color value + * @param {Number} b Blue color value + * @return {Array} Hsl color + */ + _rgbToHsl: function(r, g, b) { + r /= 255; g /= 255; b /= 255; - if (color in Color.colorNameMap) { - color = Color.colorNameMap[color]; - } + var h, s, l, + max = fabric.util.array.max([r, g, b]), + min = fabric.util.array.min([r, g, b]); - if (color === 'transparent') { - source = [255, 255, 255, 0]; - } + l = (max + min) / 2; - if (!source) { - source = Color.sourceFromHex(color); - } - if (!source) { - source = Color.sourceFromRgb(color); - } - if (!source) { - source = Color.sourceFromHsl(color); - } - if (!source) { - //if color is not recognize let's make black as canvas does - source = [0, 0, 0, 1]; - } - if (source) { - this.setSource(source); - } - }, - - /** - * Adapted from https://github.com/mjijackson - * @private - * @param {Number} r Red color value - * @param {Number} g Green color value - * @param {Number} b Blue color value - * @return {Array} Hsl color - */ - _rgbToHsl: function(r, g, b) { - r /= 255; g /= 255; b /= 255; - - var h, s, l, - max = fabric.util.array.max([r, g, b]), - min = fabric.util.array.min([r, g, b]); - - l = (max + min) / 2; - - if (max === min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - } - h /= 6; + if (max === min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; } + h /= 6; + } - return [ - Math.round(h * 360), - Math.round(s * 100), - Math.round(l * 100) - ]; - }, - - /** - * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @return {Array} - */ - getSource: function() { - return this._source; - }, - - /** - * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @param {Array} source - */ - setSource: function(source) { - this._source = source; - }, - - /** - * Returns color representation in RGB format - * @return {String} ex: rgb(0-255,0-255,0-255) - */ - toRgb: function() { - var source = this.getSource(); - return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; - }, - - /** - * Returns color representation in RGBA format - * @return {String} ex: rgba(0-255,0-255,0-255,0-1) - */ - toRgba: function() { - var source = this.getSource(); - return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; - }, - - /** - * Returns color representation in HSL format - * @return {String} ex: hsl(0-360,0%-100%,0%-100%) - */ - toHsl: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); - - return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; - }, - - /** - * Returns color representation in HSLA format - * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) - */ - toHsla: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); - - return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; - }, - - /** - * Returns color representation in HEX format - * @return {String} ex: FF5555 - */ - toHex: function() { - var source = this.getSource(), r, g, b; - - r = source[0].toString(16); - r = (r.length === 1) ? ('0' + r) : r; - - g = source[1].toString(16); - g = (g.length === 1) ? ('0' + g) : g; - - b = source[2].toString(16); - b = (b.length === 1) ? ('0' + b) : b; - - return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); - }, - - /** - * Returns color representation in HEXA format - * @return {String} ex: FF5555CC - */ - toHexa: function() { - var source = this.getSource(), a; - - a = Math.round(source[3] * 255); - a = a.toString(16); - a = (a.length === 1) ? ('0' + a) : a; - - return this.toHex() + a.toUpperCase(); - }, - - /** - * Gets value of alpha channel for this color - * @return {Number} 0-1 - */ - getAlpha: function() { - return this.getSource()[3]; - }, - - /** - * Sets value of alpha channel for this color - * @param {Number} alpha Alpha value 0-1 - * @return {fabric.Color} thisArg - */ - setAlpha: function(alpha) { - var source = this.getSource(); - source[3] = alpha; - this.setSource(source); - return this; - }, - - /** - * Transforms color to its grayscale representation - * @return {fabric.Color} thisArg - */ - toGrayscale: function() { - var source = this.getSource(), - average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), - currentAlpha = source[3]; - this.setSource([average, average, average, currentAlpha]); - return this; - }, - - /** - * Transforms color to its black and white representation - * @param {Number} threshold - * @return {fabric.Color} thisArg - */ - toBlackWhite: function(threshold) { - var source = this.getSource(), - average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), - currentAlpha = source[3]; - - threshold = threshold || 127; - - average = (Number(average) < Number(threshold)) ? 0 : 255; - this.setSource([average, average, average, currentAlpha]); - return this; - }, - - /** - * Overlays color with another color - * @param {String|fabric.Color} otherColor - * @return {fabric.Color} thisArg - */ - overlayWith: function(otherColor) { - if (!(otherColor instanceof Color)) { - otherColor = new Color(otherColor); - } + return [ + Math.round(h * 360), + Math.round(s * 100), + Math.round(l * 100) + ]; + }, - var result = [], - alpha = this.getAlpha(), - otherAlpha = 0.5, - source = this.getSource(), - otherSource = otherColor.getSource(), i; + /** + * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @return {Array} + */ + getSource: function() { + return this._source; + }, - for (i = 0; i < 3; i++) { - result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); - } + /** + * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @param {Array} source + */ + setSource: function(source) { + this._source = source; + }, - result[3] = alpha; - this.setSource(result); - return this; - } - }; + /** + * Returns color representation in RGB format + * @return {String} ex: rgb(0-255,0-255,0-255) + */ + toRgb: function() { + var source = this.getSource(); + return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; + }, /** - * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) - * @static - * @field - * @memberOf fabric.Color + * Returns color representation in RGBA format + * @return {String} ex: rgba(0-255,0-255,0-255,0-1) */ - // eslint-disable-next-line max-len - fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; + toRgba: function() { + var source = this.getSource(); + return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; + }, /** - * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) - * @static - * @field - * @memberOf fabric.Color + * Returns color representation in HSL format + * @return {String} ex: hsl(0-360,0%-100%,0%-100%) */ - fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; + toHsl: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); + + return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; + }, /** - * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) - * @static - * @field - * @memberOf fabric.Color + * Returns color representation in HSLA format + * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) */ - fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; + toHsla: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); + + return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; + }, /** - * Map of the 148 color names with HEX code - * @static - * @field - * @memberOf fabric.Color - * @see: https://www.w3.org/TR/css3-color/#svg-color + * Returns color representation in HEX format + * @return {String} ex: FF5555 */ - fabric.Color.colorNameMap = { - aliceblue: '#F0F8FF', - antiquewhite: '#FAEBD7', - aqua: '#00FFFF', - aquamarine: '#7FFFD4', - azure: '#F0FFFF', - beige: '#F5F5DC', - bisque: '#FFE4C4', - black: '#000000', - blanchedalmond: '#FFEBCD', - blue: '#0000FF', - blueviolet: '#8A2BE2', - brown: '#A52A2A', - burlywood: '#DEB887', - cadetblue: '#5F9EA0', - chartreuse: '#7FFF00', - chocolate: '#D2691E', - coral: '#FF7F50', - cornflowerblue: '#6495ED', - cornsilk: '#FFF8DC', - crimson: '#DC143C', - cyan: '#00FFFF', - darkblue: '#00008B', - darkcyan: '#008B8B', - darkgoldenrod: '#B8860B', - darkgray: '#A9A9A9', - darkgrey: '#A9A9A9', - darkgreen: '#006400', - darkkhaki: '#BDB76B', - darkmagenta: '#8B008B', - darkolivegreen: '#556B2F', - darkorange: '#FF8C00', - darkorchid: '#9932CC', - darkred: '#8B0000', - darksalmon: '#E9967A', - darkseagreen: '#8FBC8F', - darkslateblue: '#483D8B', - darkslategray: '#2F4F4F', - darkslategrey: '#2F4F4F', - darkturquoise: '#00CED1', - darkviolet: '#9400D3', - deeppink: '#FF1493', - deepskyblue: '#00BFFF', - dimgray: '#696969', - dimgrey: '#696969', - dodgerblue: '#1E90FF', - firebrick: '#B22222', - floralwhite: '#FFFAF0', - forestgreen: '#228B22', - fuchsia: '#FF00FF', - gainsboro: '#DCDCDC', - ghostwhite: '#F8F8FF', - gold: '#FFD700', - goldenrod: '#DAA520', - gray: '#808080', - grey: '#808080', - green: '#008000', - greenyellow: '#ADFF2F', - honeydew: '#F0FFF0', - hotpink: '#FF69B4', - indianred: '#CD5C5C', - indigo: '#4B0082', - ivory: '#FFFFF0', - khaki: '#F0E68C', - lavender: '#E6E6FA', - lavenderblush: '#FFF0F5', - lawngreen: '#7CFC00', - lemonchiffon: '#FFFACD', - lightblue: '#ADD8E6', - lightcoral: '#F08080', - lightcyan: '#E0FFFF', - lightgoldenrodyellow: '#FAFAD2', - lightgray: '#D3D3D3', - lightgrey: '#D3D3D3', - lightgreen: '#90EE90', - lightpink: '#FFB6C1', - lightsalmon: '#FFA07A', - lightseagreen: '#20B2AA', - lightskyblue: '#87CEFA', - lightslategray: '#778899', - lightslategrey: '#778899', - lightsteelblue: '#B0C4DE', - lightyellow: '#FFFFE0', - lime: '#00FF00', - limegreen: '#32CD32', - linen: '#FAF0E6', - magenta: '#FF00FF', - maroon: '#800000', - mediumaquamarine: '#66CDAA', - mediumblue: '#0000CD', - mediumorchid: '#BA55D3', - mediumpurple: '#9370DB', - mediumseagreen: '#3CB371', - mediumslateblue: '#7B68EE', - mediumspringgreen: '#00FA9A', - mediumturquoise: '#48D1CC', - mediumvioletred: '#C71585', - midnightblue: '#191970', - mintcream: '#F5FFFA', - mistyrose: '#FFE4E1', - moccasin: '#FFE4B5', - navajowhite: '#FFDEAD', - navy: '#000080', - oldlace: '#FDF5E6', - olive: '#808000', - olivedrab: '#6B8E23', - orange: '#FFA500', - orangered: '#FF4500', - orchid: '#DA70D6', - palegoldenrod: '#EEE8AA', - palegreen: '#98FB98', - paleturquoise: '#AFEEEE', - palevioletred: '#DB7093', - papayawhip: '#FFEFD5', - peachpuff: '#FFDAB9', - peru: '#CD853F', - pink: '#FFC0CB', - plum: '#DDA0DD', - powderblue: '#B0E0E6', - purple: '#800080', - rebeccapurple: '#663399', - red: '#FF0000', - rosybrown: '#BC8F8F', - royalblue: '#4169E1', - saddlebrown: '#8B4513', - salmon: '#FA8072', - sandybrown: '#F4A460', - seagreen: '#2E8B57', - seashell: '#FFF5EE', - sienna: '#A0522D', - silver: '#C0C0C0', - skyblue: '#87CEEB', - slateblue: '#6A5ACD', - slategray: '#708090', - slategrey: '#708090', - snow: '#FFFAFA', - springgreen: '#00FF7F', - steelblue: '#4682B4', - tan: '#D2B48C', - teal: '#008080', - thistle: '#D8BFD8', - tomato: '#FF6347', - turquoise: '#40E0D0', - violet: '#EE82EE', - wheat: '#F5DEB3', - white: '#FFFFFF', - whitesmoke: '#F5F5F5', - yellow: '#FFFF00', - yellowgreen: '#9ACD32' - }; + toHex: function() { + var source = this.getSource(), r, g, b; + + r = source[0].toString(16); + r = (r.length === 1) ? ('0' + r) : r; + + g = source[1].toString(16); + g = (g.length === 1) ? ('0' + g) : g; + + b = source[2].toString(16); + b = (b.length === 1) ? ('0' + b) : b; + + return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); + }, /** - * @private - * @param {Number} p - * @param {Number} q - * @param {Number} t - * @return {Number} + * Returns color representation in HEXA format + * @return {String} ex: FF5555CC */ - function hue2rgb(p, q, t) { - if (t < 0) { - t += 1; - } - if (t > 1) { - t -= 1; - } - if (t < 1 / 6) { - return p + (q - p) * 6 * t; - } - if (t < 1 / 2) { - return q; - } - if (t < 2 / 3) { - return p + (q - p) * (2 / 3 - t) * 6; - } - return p; - } + toHexa: function() { + var source = this.getSource(), a; + + a = Math.round(source[3] * 255); + a = a.toString(16); + a = (a.length === 1) ? ('0' + a) : a; + + return this.toHex() + a.toUpperCase(); + }, /** - * Returns new color object, when given a color in RGB format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255) - * @return {fabric.Color} + * Gets value of alpha channel for this color + * @return {Number} 0-1 */ - fabric.Color.fromRgb = function(color) { - return Color.fromSource(Color.sourceFromRgb(color)); - }; + getAlpha: function() { + return this.getSource()[3]; + }, /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) - * @return {Array} source + * Sets value of alpha channel for this color + * @param {Number} alpha Alpha value 0-1 + * @return {fabric.Color} thisArg */ - fabric.Color.sourceFromRgb = function(color) { - var match = color.match(Color.reRGBa); - if (match) { - var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), - g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), - b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); - - return [ - parseInt(r, 10), - parseInt(g, 10), - parseInt(b, 10), - match[4] ? parseFloat(match[4]) : 1 - ]; - } - }; + setAlpha: function(alpha) { + var source = this.getSource(); + source[3] = alpha; + this.setSource(source); + return this; + }, /** - * Returns new color object, when given a color in RGBA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} + * Transforms color to its grayscale representation + * @return {fabric.Color} thisArg */ - fabric.Color.fromRgba = Color.fromRgb; + toGrayscale: function() { + var source = this.getSource(), + average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), + currentAlpha = source[3]; + this.setSource([average, average, average, currentAlpha]); + return this; + }, /** - * Returns new color object, when given a color in HSL format - * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) - * @memberOf fabric.Color - * @return {fabric.Color} + * Transforms color to its black and white representation + * @param {Number} threshold + * @return {fabric.Color} thisArg */ - fabric.Color.fromHsl = function(color) { - return Color.fromSource(Color.sourceFromHsl(color)); - }; + toBlackWhite: function(threshold) { + var source = this.getSource(), + average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), + currentAlpha = source[3]; + + threshold = threshold || 127; + + average = (Number(average) < Number(threshold)) ? 0 : 255; + this.setSource([average, average, average, currentAlpha]); + return this; + }, /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. - * Adapted from https://github.com/mjijackson - * @memberOf fabric.Color - * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) - * @return {Array} source - * @see http://http://www.w3.org/TR/css3-color/#hsl-color + * Overlays color with another color + * @param {String|fabric.Color} otherColor + * @return {fabric.Color} thisArg */ - fabric.Color.sourceFromHsl = function(color) { - var match = color.match(Color.reHSLa); - if (!match) { - return; + overlayWith: function(otherColor) { + if (!(otherColor instanceof Color)) { + otherColor = new Color(otherColor); } - var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, - s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), - l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), - r, g, b; + var result = [], + alpha = this.getAlpha(), + otherAlpha = 0.5, + source = this.getSource(), + otherSource = otherColor.getSource(), i; - if (s === 0) { - r = g = b = l; + for (i = 0; i < 3; i++) { + result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); } - else { - var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, - p = l * 2 - q; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); - } + result[3] = alpha; + this.setSource(result); + return this; + } +}; + +/** + * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) + * @static + * @field + * @memberOf fabric.Color + */ +// eslint-disable-next-line max-len +fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; + +/** + * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) + * @static + * @field + * @memberOf fabric.Color + */ +fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; + +/** + * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) + * @static + * @field + * @memberOf fabric.Color + */ +fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; + +/** + * Map of the 148 color names with HEX code + * @static + * @field + * @memberOf fabric.Color + * @see: https://www.w3.org/TR/css3-color/#svg-color + */ +fabric.Color.colorNameMap = { + aliceblue: '#F0F8FF', + antiquewhite: '#FAEBD7', + aqua: '#00FFFF', + aquamarine: '#7FFFD4', + azure: '#F0FFFF', + beige: '#F5F5DC', + bisque: '#FFE4C4', + black: '#000000', + blanchedalmond: '#FFEBCD', + blue: '#0000FF', + blueviolet: '#8A2BE2', + brown: '#A52A2A', + burlywood: '#DEB887', + cadetblue: '#5F9EA0', + chartreuse: '#7FFF00', + chocolate: '#D2691E', + coral: '#FF7F50', + cornflowerblue: '#6495ED', + cornsilk: '#FFF8DC', + crimson: '#DC143C', + cyan: '#00FFFF', + darkblue: '#00008B', + darkcyan: '#008B8B', + darkgoldenrod: '#B8860B', + darkgray: '#A9A9A9', + darkgrey: '#A9A9A9', + darkgreen: '#006400', + darkkhaki: '#BDB76B', + darkmagenta: '#8B008B', + darkolivegreen: '#556B2F', + darkorange: '#FF8C00', + darkorchid: '#9932CC', + darkred: '#8B0000', + darksalmon: '#E9967A', + darkseagreen: '#8FBC8F', + darkslateblue: '#483D8B', + darkslategray: '#2F4F4F', + darkslategrey: '#2F4F4F', + darkturquoise: '#00CED1', + darkviolet: '#9400D3', + deeppink: '#FF1493', + deepskyblue: '#00BFFF', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1E90FF', + firebrick: '#B22222', + floralwhite: '#FFFAF0', + forestgreen: '#228B22', + fuchsia: '#FF00FF', + gainsboro: '#DCDCDC', + ghostwhite: '#F8F8FF', + gold: '#FFD700', + goldenrod: '#DAA520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#ADFF2F', + honeydew: '#F0FFF0', + hotpink: '#FF69B4', + indianred: '#CD5C5C', + indigo: '#4B0082', + ivory: '#FFFFF0', + khaki: '#F0E68C', + lavender: '#E6E6FA', + lavenderblush: '#FFF0F5', + lawngreen: '#7CFC00', + lemonchiffon: '#FFFACD', + lightblue: '#ADD8E6', + lightcoral: '#F08080', + lightcyan: '#E0FFFF', + lightgoldenrodyellow: '#FAFAD2', + lightgray: '#D3D3D3', + lightgrey: '#D3D3D3', + lightgreen: '#90EE90', + lightpink: '#FFB6C1', + lightsalmon: '#FFA07A', + lightseagreen: '#20B2AA', + lightskyblue: '#87CEFA', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#B0C4DE', + lightyellow: '#FFFFE0', + lime: '#00FF00', + limegreen: '#32CD32', + linen: '#FAF0E6', + magenta: '#FF00FF', + maroon: '#800000', + mediumaquamarine: '#66CDAA', + mediumblue: '#0000CD', + mediumorchid: '#BA55D3', + mediumpurple: '#9370DB', + mediumseagreen: '#3CB371', + mediumslateblue: '#7B68EE', + mediumspringgreen: '#00FA9A', + mediumturquoise: '#48D1CC', + mediumvioletred: '#C71585', + midnightblue: '#191970', + mintcream: '#F5FFFA', + mistyrose: '#FFE4E1', + moccasin: '#FFE4B5', + navajowhite: '#FFDEAD', + navy: '#000080', + oldlace: '#FDF5E6', + olive: '#808000', + olivedrab: '#6B8E23', + orange: '#FFA500', + orangered: '#FF4500', + orchid: '#DA70D6', + palegoldenrod: '#EEE8AA', + palegreen: '#98FB98', + paleturquoise: '#AFEEEE', + palevioletred: '#DB7093', + papayawhip: '#FFEFD5', + peachpuff: '#FFDAB9', + peru: '#CD853F', + pink: '#FFC0CB', + plum: '#DDA0DD', + powderblue: '#B0E0E6', + purple: '#800080', + rebeccapurple: '#663399', + red: '#FF0000', + rosybrown: '#BC8F8F', + royalblue: '#4169E1', + saddlebrown: '#8B4513', + salmon: '#FA8072', + sandybrown: '#F4A460', + seagreen: '#2E8B57', + seashell: '#FFF5EE', + sienna: '#A0522D', + silver: '#C0C0C0', + skyblue: '#87CEEB', + slateblue: '#6A5ACD', + slategray: '#708090', + slategrey: '#708090', + snow: '#FFFAFA', + springgreen: '#00FF7F', + steelblue: '#4682B4', + tan: '#D2B48C', + teal: '#008080', + thistle: '#D8BFD8', + tomato: '#FF6347', + turquoise: '#40E0D0', + violet: '#EE82EE', + wheat: '#F5DEB3', + white: '#FFFFFF', + whitesmoke: '#F5F5F5', + yellow: '#FFFF00', + yellowgreen: '#9ACD32' +}; + +/** + * @private + * @param {Number} p + * @param {Number} q + * @param {Number} t + * @return {Number} + */ +function hue2rgb(p, q, t) { + if (t < 0) { + t += 1; + } + if (t > 1) { + t -= 1; + } + if (t < 1 / 6) { + return p + (q - p) * 6 * t; + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + return p; +} + +/** + * Returns new color object, when given a color in RGB format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255) + * @return {fabric.Color} + */ +fabric.Color.fromRgb = function(color) { + return Color.fromSource(Color.sourceFromRgb(color)); +}; + +/** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) + * @return {Array} source + */ +fabric.Color.sourceFromRgb = function(color) { + var match = color.match(Color.reRGBa); + if (match) { + var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), + g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), + b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); return [ - Math.round(r * 255), - Math.round(g * 255), - Math.round(b * 255), + parseInt(r, 10), + parseInt(g, 10), + parseInt(b, 10), match[4] ? parseFloat(match[4]) : 1 ]; - }; + } +}; + +/** + * Returns new color object, when given a color in RGBA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ +fabric.Color.fromRgba = Color.fromRgb; + +/** + * Returns new color object, when given a color in HSL format + * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) + * @memberOf fabric.Color + * @return {fabric.Color} + */ +fabric.Color.fromHsl = function(color) { + return Color.fromSource(Color.sourceFromHsl(color)); +}; + +/** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. + * Adapted from https://github.com/mjijackson + * @memberOf fabric.Color + * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) + * @return {Array} source + * @see http://http://www.w3.org/TR/css3-color/#hsl-color + */ +fabric.Color.sourceFromHsl = function(color) { + var match = color.match(Color.reHSLa); + if (!match) { + return; + } - /** - * Returns new color object, when given a color in HSLA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} - */ - fabric.Color.fromHsla = Color.fromHsl; + var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, + s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), + l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), + r, g, b; - /** - * Returns new color object, when given a color in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color Color value ex: FF5555 - * @return {fabric.Color} - */ - fabric.Color.fromHex = function(color) { - return Color.fromSource(Color.sourceFromHex(color)); - }; + if (s === 0) { + r = g = b = l; + } + else { + var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, + p = l * 2 - q; - /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color ex: FF5555 or FF5544CC (RGBa) - * @return {Array} source - */ - fabric.Color.sourceFromHex = function(color) { - if (color.match(Color.reHex)) { - var value = color.slice(color.indexOf('#') + 1), - isShortNotation = (value.length === 3 || value.length === 4), - isRGBa = (value.length === 8 || value.length === 4), - r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), - g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), - b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), - a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; - - return [ - parseInt(r, 16), - parseInt(g, 16), - parseInt(b, 16), - parseFloat((parseInt(a, 16) / 255).toFixed(2)) - ]; - } - }; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } - /** - * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) - * @static - * @memberOf fabric.Color - * @param {Array} source - * @return {fabric.Color} - */ - fabric.Color.fromSource = function(source) { - var oColor = new Color(); - oColor.setSource(source); - return oColor; - }; + return [ + Math.round(r * 255), + Math.round(g * 255), + Math.round(b * 255), + match[4] ? parseFloat(match[4]) : 1 + ]; +}; + +/** + * Returns new color object, when given a color in HSLA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ +fabric.Color.fromHsla = Color.fromHsl; + +/** + * Returns new color object, when given a color in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color Color value ex: FF5555 + * @return {fabric.Color} + */ +fabric.Color.fromHex = function(color) { + return Color.fromSource(Color.sourceFromHex(color)); +}; + +/** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color ex: FF5555 or FF5544CC (RGBa) + * @return {Array} source + */ +fabric.Color.sourceFromHex = function(color) { + if (color.match(Color.reHex)) { + var value = color.slice(color.indexOf('#') + 1), + isShortNotation = (value.length === 3 || value.length === 4), + isRGBa = (value.length === 8 || value.length === 4), + r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), + g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), + b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), + a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; -})(typeof exports !== 'undefined' ? exports : this); + return [ + parseInt(r, 16), + parseInt(g, 16), + parseInt(b, 16), + parseFloat((parseInt(a, 16) / 255).toFixed(2)) + ]; + } +}; + +/** + * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) + * @static + * @memberOf fabric.Color + * @param {Array} source + * @return {fabric.Color} + */ +fabric.Color.fromSource = function(source) { + var oColor = new Color(); + oColor.setSource(source); + return oColor; +}; diff --git a/src/control.class.js b/src/control.class.js index 7e2ea099989..08b05338ca9 100644 --- a/src/control.class.js +++ b/src/control.class.js @@ -1,339 +1,333 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }); - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }); - - function Control(options) { - for (var i in options) { - this[i] = options[i]; - } +function Control(options) { + for (var i in options) { + this[i] = options[i]; } +} + +fabric.Control = Control; + +fabric.Control.prototype = /** @lends fabric.Control.prototype */ { + + /** + * keep track of control visibility. + * mainly for backward compatibility. + * if you do not want to see a control, you can remove it + * from the controlset. + * @type {Boolean} + * @default true + */ + visible: true, + + /** + * Name of the action that the control will likely execute. + * This is optional. FabricJS uses to identify what the user is doing for some + * extra optimizations. If you are writing a custom control and you want to know + * somewhere else in the code what is going on, you can use this string here. + * you can also provide a custom getActionName if your control run multiple actions + * depending on some external state. + * default to scale since is the most common, used on 4 corners by default + * @type {String} + * @default 'scale' + */ + actionName: 'scale', + + /** + * Drawing angle of the control. + * NOT used for now, but name marked as needed for internal logic + * example: to reuse the same drawing function for different rotated controls + * @type {Number} + * @default 0 + */ + angle: 0, + + /** + * Relative position of the control. X + * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + x: 0, + + /** + * Relative position of the control. Y + * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + y: 0, + + /** + * Horizontal offset of the control from the defined position. In pixels + * Positive offset moves the control to the right, negative to the left. + * It used when you want to have position of control that does not scale with + * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on + * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will + * stay 30 pixels no matter how the object is big. Another example is having 2 + * controls in the corner, that stay in the same position when the object scale. + * of the bounding box. + * @type {Number} + * @default 0 + */ + offsetX: 0, + + /** + * Vertical offset of the control from the defined position. In pixels + * Positive offset moves the control to the bottom, negative to the top. + * @type {Number} + * @default 0 + */ + offsetY: 0, + + /** + * Sets the length of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeX: null, + + /** + * Sets the height of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeY: null, + + /** + * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeX: null, + + /** + * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeY: null, + + /** + * Css cursor style to display when the control is hovered. + * if the method `cursorStyleHandler` is provided, this property is ignored. + * @type {String} + * @default 'crosshair' + */ + cursorStyle: 'crosshair', + + /** + * If controls has an offsetY or offsetX, draw a line that connects + * the control to the bounding box + * @type {Boolean} + * @default false + */ + withConnection: false, + + /** + * The control actionHandler, provide one to handle action ( control being moved ) + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + actionHandler: function(/* eventData, transformData, x, y */) { }, + + /** + * The control handler for mouse down, provide one to handle mouse down on control + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseDownHandler: function(/* eventData, transformData, x, y */) { }, + + /** + * The control mouseUpHandler, provide one to handle an effect on mouse up. + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseUpHandler: function(/* eventData, transformData, x, y */) { }, + + /** + * Returns control actionHandler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getActionHandler: function(/* eventData, fabricObject, control */) { + return this.actionHandler; + }, + + /** + * Returns control mouseDown handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseDownHandler: function(/* eventData, fabricObject, control */) { + return this.mouseDownHandler; + }, + + /** + * Returns control mouseUp handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseUpHandler: function(/* eventData, fabricObject, control */) { + return this.mouseUpHandler; + }, + + /** + * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate + * function you can pass one in the constructor + * the cursorStyle property + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + cursorStyleHandler: function(eventData, control /* fabricObject */) { + return control.cursorStyle; + }, + + /** + * Returns the action name. The basic implementation just return the actionName property. + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + getActionName: function(eventData, control /* fabricObject */) { + return control.actionName; + }, + + /** + * Returns controls visibility + * @param {fabric.Object} object on which the control is displayed + * @param {String} controlKey key where the control is memorized on the + * @return {Boolean} + */ + getVisibility: function(fabricObject, controlKey) { + var objectVisibility = fabricObject._controlsVisibility; + if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { + return objectVisibility[controlKey]; + } + return this.visible; + }, + + /** + * Sets controls visibility + * @param {Boolean} visibility for the object + * @return {Void} + */ + setVisibility: function(visibility /* name, fabricObject */) { + this.visible = visibility; + }, + + + positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { + var point = fabric.util.transformPoint({ + x: this.x * dim.x + this.offsetX, + y: this.y * dim.y + this.offsetY }, finalMatrix); + return point; + }, + + /** + * Returns the coords for this control based on object values. + * @param {Number} objectAngle angle from the fabric object holding the control + * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if + * isTouch is true) + * @param {Number} centerX x coordinate where the control center should be + * @param {Number} centerY y coordinate where the control center should be + * @param {boolean} isTouch true if touch corner, false if normal corner + */ + calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { + var cosHalfOffset, + sinHalfOffset, + cosHalfOffsetComp, + sinHalfOffsetComp, + xSize = (isTouch) ? this.touchSizeX : this.sizeX, + ySize = (isTouch) ? this.touchSizeY : this.sizeY; + if (xSize && ySize && xSize !== ySize) { + // handle rectangular corners + var controlTriangleAngle = Math.atan2(ySize, xSize); + var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; + var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); + // use complementary angle for two corners + cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); + sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); + } + else { + // handle square corners + // use default object corner size unless size is defined + var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; + /* 0.7071067812 stands for sqrt(2)/2 */ + cornerHypotenuse = cornerSize * 0.7071067812; + // complementary angles are equal since they're both 45 degrees + var newTheta = fabric.util.degreesToRadians(45 - objectAngle); + cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); + } - fabric.Control = Control; - - fabric.Control.prototype = /** @lends fabric.Control.prototype */ { - - /** - * keep track of control visibility. - * mainly for backward compatibility. - * if you do not want to see a control, you can remove it - * from the controlset. - * @type {Boolean} - * @default true - */ - visible: true, - - /** - * Name of the action that the control will likely execute. - * This is optional. FabricJS uses to identify what the user is doing for some - * extra optimizations. If you are writing a custom control and you want to know - * somewhere else in the code what is going on, you can use this string here. - * you can also provide a custom getActionName if your control run multiple actions - * depending on some external state. - * default to scale since is the most common, used on 4 corners by default - * @type {String} - * @default 'scale' - */ - actionName: 'scale', - - /** - * Drawing angle of the control. - * NOT used for now, but name marked as needed for internal logic - * example: to reuse the same drawing function for different rotated controls - * @type {Number} - * @default 0 - */ - angle: 0, - - /** - * Relative position of the control. X - * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 - */ - x: 0, - - /** - * Relative position of the control. Y - * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 - */ - y: 0, - - /** - * Horizontal offset of the control from the defined position. In pixels - * Positive offset moves the control to the right, negative to the left. - * It used when you want to have position of control that does not scale with - * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on - * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will - * stay 30 pixels no matter how the object is big. Another example is having 2 - * controls in the corner, that stay in the same position when the object scale. - * of the bounding box. - * @type {Number} - * @default 0 - */ - offsetX: 0, - - /** - * Vertical offset of the control from the defined position. In pixels - * Positive offset moves the control to the bottom, negative to the top. - * @type {Number} - * @default 0 - */ - offsetY: 0, - - /** - * Sets the length of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeX: null, - - /** - * Sets the height of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeY: null, - - /** - * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeX: null, - - /** - * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeY: null, - - /** - * Css cursor style to display when the control is hovered. - * if the method `cursorStyleHandler` is provided, this property is ignored. - * @type {String} - * @default 'crosshair' - */ - cursorStyle: 'crosshair', - - /** - * If controls has an offsetY or offsetX, draw a line that connects - * the control to the bounding box - * @type {Boolean} - * @default false - */ - withConnection: false, - - /** - * The control actionHandler, provide one to handle action ( control being moved ) - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - actionHandler: function(/* eventData, transformData, x, y */) { }, - - /** - * The control handler for mouse down, provide one to handle mouse down on control - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - mouseDownHandler: function(/* eventData, transformData, x, y */) { }, - - /** - * The control mouseUpHandler, provide one to handle an effect on mouse up. - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - mouseUpHandler: function(/* eventData, transformData, x, y */) { }, - - /** - * Returns control actionHandler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getActionHandler: function(/* eventData, fabricObject, control */) { - return this.actionHandler; - }, - - /** - * Returns control mouseDown handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getMouseDownHandler: function(/* eventData, fabricObject, control */) { - return this.mouseDownHandler; - }, - - /** - * Returns control mouseUp handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getMouseUpHandler: function(/* eventData, fabricObject, control */) { - return this.mouseUpHandler; - }, - - /** - * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate - * function you can pass one in the constructor - * the cursorStyle property - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} - */ - cursorStyleHandler: function(eventData, control /* fabricObject */) { - return control.cursorStyle; - }, - - /** - * Returns the action name. The basic implementation just return the actionName property. - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} - */ - getActionName: function(eventData, control /* fabricObject */) { - return control.actionName; - }, - - /** - * Returns controls visibility - * @param {fabric.Object} object on which the control is displayed - * @param {String} controlKey key where the control is memorized on the - * @return {Boolean} - */ - getVisibility: function(fabricObject, controlKey) { - var objectVisibility = fabricObject._controlsVisibility; - if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { - return objectVisibility[controlKey]; - } - return this.visible; - }, - - /** - * Sets controls visibility - * @param {Boolean} visibility for the object - * @return {Void} - */ - setVisibility: function(visibility /* name, fabricObject */) { - this.visible = visibility; - }, - - - positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { - var point = fabric.util.transformPoint({ - x: this.x * dim.x + this.offsetX, - y: this.y * dim.y + this.offsetY }, finalMatrix); - return point; - }, - - /** - * Returns the coords for this control based on object values. - * @param {Number} objectAngle angle from the fabric object holding the control - * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if - * isTouch is true) - * @param {Number} centerX x coordinate where the control center should be - * @param {Number} centerY y coordinate where the control center should be - * @param {boolean} isTouch true if touch corner, false if normal corner - */ - calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { - var cosHalfOffset, - sinHalfOffset, - cosHalfOffsetComp, - sinHalfOffsetComp, - xSize = (isTouch) ? this.touchSizeX : this.sizeX, - ySize = (isTouch) ? this.touchSizeY : this.sizeY; - if (xSize && ySize && xSize !== ySize) { - // handle rectangular corners - var controlTriangleAngle = Math.atan2(ySize, xSize); - var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; - var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); - // use complementary angle for two corners - cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); - sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); - } - else { - // handle square corners - // use default object corner size unless size is defined - var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; - /* 0.7071067812 stands for sqrt(2)/2 */ - cornerHypotenuse = cornerSize * 0.7071067812; - // complementary angles are equal since they're both 45 degrees - var newTheta = fabric.util.degreesToRadians(45 - objectAngle); - cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); - } - - return { - tl: { - x: centerX - sinHalfOffsetComp, - y: centerY - cosHalfOffsetComp, - }, - tr: { - x: centerX + cosHalfOffset, - y: centerY - sinHalfOffset, - }, - bl: { - x: centerX - cosHalfOffset, - y: centerY + sinHalfOffset, - }, - br: { - x: centerX + sinHalfOffsetComp, - y: centerY + cosHalfOffsetComp, - }, - }; - }, - - /** - * Render function for the control. - * When this function runs the context is unscaled. unrotate. Just retina scaled. - * all the functions will have to translate to the point left,top before starting Drawing - * if they want to draw a control where the position is detected. - * left and top are the result of the positionHandler function - * @param {RenderingContext2D} ctx the context where the control will be drawn - * @param {Number} left position of the canvas where we are about to render the control. - * @param {Number} top position of the canvas where we are about to render the control. - * @param {Object} styleOverride - * @param {fabric.Object} fabricObject the object where the control is about to be rendered - */ - render: function(ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { - case 'circle': - fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); - break; - default: - fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); - } - }, - }; - -})(typeof exports !== 'undefined' ? exports : this); + return { + tl: { + x: centerX - sinHalfOffsetComp, + y: centerY - cosHalfOffsetComp, + }, + tr: { + x: centerX + cosHalfOffset, + y: centerY - sinHalfOffset, + }, + bl: { + x: centerX - cosHalfOffset, + y: centerY + sinHalfOffset, + }, + br: { + x: centerX + sinHalfOffsetComp, + y: centerY + cosHalfOffsetComp, + }, + }; + }, + + /** + * Render function for the control. + * When this function runs the context is unscaled. unrotate. Just retina scaled. + * all the functions will have to translate to the point left,top before starting Drawing + * if they want to draw a control where the position is detected. + * left and top are the result of the positionHandler function + * @param {RenderingContext2D} ctx the context where the control will be drawn + * @param {Number} left position of the canvas where we are about to render the control. + * @param {Number} top position of the canvas where we are about to render the control. + * @param {Object} styleOverride + * @param {fabric.Object} fabricObject the object where the control is about to be rendered + */ + render: function(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { + case 'circle': + fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); + break; + default: + fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); + } + }, +}; diff --git a/src/controls.actions.js b/src/controls.actions.js index a28b04f5bc0..65a368e871c 100644 --- a/src/controls.actions.js +++ b/src/controls.actions.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], skewMap = ['ns', 'nesw', 'ew', 'nwse'], controls = {}, @@ -744,5 +740,3 @@ controls.wrapWithFireEvent = wrapWithFireEvent; controls.getLocalPoint = getLocalPoint; fabric.controlsUtils = controls; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/controls.render.js b/src/controls.render.js index 4c1ca95f57b..a8cd2cd5127 100644 --- a/src/controls.render.js +++ b/src/controls.render.js @@ -1,101 +1,95 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians, + controls = fabric.controlsUtils; - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians, - controls = fabric.controlsUtils; - - /** - * Render a round control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - */ - function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), - myLeft = left, - myTop = top, size; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // as soon as fabric react v5, remove ie11, use proper ellipse code. - if (xSize > ySize) { - size = xSize; - ctx.scale(1.0, ySize / xSize); - myTop = top * xSize / ySize; - } - else if (ySize > xSize) { - size = ySize; - ctx.scale(xSize / ySize, 1.0); - myLeft = left * ySize / xSize; - } - else { - size = xSize; - } - // this is still wrong - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); - ctx[methodName](); - if (stroke) { - ctx.stroke(); - } - ctx.restore(); +/** + * Render a round control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ +function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), + myLeft = left, + myTop = top, size; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // as soon as fabric react v5, remove ie11, use proper ellipse code. + if (xSize > ySize) { + size = xSize; + ctx.scale(1.0, ySize / xSize); + myTop = top * xSize / ySize; } - - /** - * Render a square control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - */ - function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && ( - styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor - ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // this is still wrong - ctx.lineWidth = 1; - ctx.translate(left, top); - // angle is relative to canvas plane - var angle = fabricObject.getTotalAngle(); - ctx.rotate(degreesToRadians(angle)); - // this does not work, and fixed with ( && ) does not make sense. - // to have real transparent corners we need the controls on upperCanvas - // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); - ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); - if (stroke) { - ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); - } - ctx.restore(); + else if (ySize > xSize) { + size = ySize; + ctx.scale(xSize / ySize, 1.0); + myLeft = left * ySize / xSize; } + else { + size = xSize; + } + // this is still wrong + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); + ctx[methodName](); + if (stroke) { + ctx.stroke(); + } + ctx.restore(); +} - controls.renderCircleControl = renderCircleControl; - controls.renderSquareControl = renderSquareControl; +/** + * Render a square control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ +function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && ( + styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor + ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // this is still wrong + ctx.lineWidth = 1; + ctx.translate(left, top); + // angle is relative to canvas plane + var angle = fabricObject.getTotalAngle(); + ctx.rotate(degreesToRadians(angle)); + // this does not work, and fixed with ( && ) does not make sense. + // to have real transparent corners we need the controls on upperCanvas + // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); + if (stroke) { + ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + } + ctx.restore(); +} -})(typeof exports !== 'undefined' ? exports : this); +controls.renderCircleControl = renderCircleControl; +controls.renderSquareControl = renderSquareControl; diff --git a/src/filters/2d_backend.class.js b/src/filters/2d_backend.class.js index a286df3df2e..14888f98e40 100644 --- a/src/filters/2d_backend.class.js +++ b/src/filters/2d_backend.class.js @@ -1,65 +1,59 @@ -(function() { +var noop = function() {}; - 'use strict'; +fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; - var noop = function() {}; +/** + * Canvas 2D filter backend. + */ +function Canvas2dFilterBackend() {}; - fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; +Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { + evictCachesForKey: noop, + dispose: noop, + clearWebGLCaches: noop, /** - * Canvas 2D filter backend. - */ - function Canvas2dFilterBackend() {}; - - Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { - evictCachesForKey: noop, - dispose: noop, - clearWebGLCaches: noop, - - /** - * Experimental. This object is a sort of repository of help layers used to avoid - * of recreating them during frequent filtering. If you are previewing a filter with - * a slider you probably do not want to create help layers every filter step. - * in this object there will be appended some canvases, created once, resized sometimes - * cleared never. Clearing is left to the developer. - **/ - resources: { + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { - }, + }, - /** - * Apply a set of filters against a source image and draw the filtered output - * to the provided destination canvas. - * - * @param {EnhancedFilter} filters The filter to apply. - * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. - * @param {Number} sourceWidth The width of the source input. - * @param {Number} sourceHeight The height of the source input. - * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. - */ - applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { - var ctx = targetCanvas.getContext('2d'); - ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); - var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var pipelineState = { - sourceWidth: sourceWidth, - sourceHeight: sourceHeight, - imageData: imageData, - originalEl: sourceElement, - originalImageData: originalImageData, - canvasEl: targetCanvas, - ctx: ctx, - filterBackend: this, - }; - filters.forEach(function(filter) { filter.applyTo(pipelineState); }); - if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { - targetCanvas.width = pipelineState.imageData.width; - targetCanvas.height = pipelineState.imageData.height; - } - ctx.putImageData(pipelineState.imageData, 0, 0); - return pipelineState; - }, - - }; -})(); + /** + * Apply a set of filters against a source image and draw the filtered output + * to the provided destination canvas. + * + * @param {EnhancedFilter} filters The filter to apply. + * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. + * @param {Number} sourceWidth The width of the source input. + * @param {Number} sourceHeight The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + */ + applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { + var ctx = targetCanvas.getContext('2d'); + ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); + var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var pipelineState = { + sourceWidth: sourceWidth, + sourceHeight: sourceHeight, + imageData: imageData, + originalEl: sourceElement, + originalImageData: originalImageData, + canvasEl: targetCanvas, + ctx: ctx, + filterBackend: this, + }; + filters.forEach(function(filter) { filter.applyTo(pipelineState); }); + if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { + targetCanvas.width = pipelineState.imageData.width; + targetCanvas.height = pipelineState.imageData.height; + } + ctx.putImageData(pipelineState.imageData, 0, 0); + return pipelineState; + }, +}; diff --git a/src/filters/blendcolor_filter.class.js b/src/filters/blendcolor_filter.class.js index 7379b665f19..df2fca45dd5 100644 --- a/src/filters/blendcolor_filter.class.js +++ b/src/filters/blendcolor_filter.class.js @@ -1,250 +1,245 @@ -(function(global) { - 'use strict'; +var fabric = exports.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + +/** + * Color Blend filter class + * @class fabric.Image.filter.BlendColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + +filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { + type: 'BlendColor', - var fabric = global.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + * @type String + * @default + **/ + color: '#F95C63', /** - * Color Blend filter class - * @class fabric.Image.filter.BlendColor - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); - * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); + * Blend mode for the filter: one of multiply, add, diff, screen, subtract, + * darken, lighten, overlay, exclusion, tint. + * @type String + * @default + **/ + mode: 'multiply', + + /** + * alpha value. represent the strength of the blend color operation. + * @type Number + * @default + **/ + alpha: 1, + + /** + * Fragment source for the Multiply program */ + fragmentSource: { + multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', + screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', + add: 'gl_FragColor.rgb += uColor.rgb;\n', + diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', + subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', + lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', + darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', + exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', + overlay: 'if (uColor.r < 0.5) {\n' + + 'gl_FragColor.r *= 2.0 * uColor.r;\n' + + '} else {\n' + + 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + + '}\n' + + 'if (uColor.g < 0.5) {\n' + + 'gl_FragColor.g *= 2.0 * uColor.g;\n' + + '} else {\n' + + 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + + '}\n' + + 'if (uColor.b < 0.5) {\n' + + 'gl_FragColor.b *= 2.0 * uColor.b;\n' + + '} else {\n' + + 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + + '}\n', + tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + + 'gl_FragColor.rgb += uColor.rgb;\n', + }, - filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { - type: 'BlendColor', - - /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - * @type String - * @default - **/ - color: '#F95C63', - - /** - * Blend mode for the filter: one of multiply, add, diff, screen, subtract, - * darken, lighten, overlay, exclusion, tint. - * @type String - * @default - **/ - mode: 'multiply', - - /** - * alpha value. represent the strength of the blend color operation. - * @type Number - * @default - **/ - alpha: 1, - - /** - * Fragment source for the Multiply program - */ - fragmentSource: { - multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', - screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', - add: 'gl_FragColor.rgb += uColor.rgb;\n', - diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', - subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', - lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', - darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', - exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', - overlay: 'if (uColor.r < 0.5) {\n' + - 'gl_FragColor.r *= 2.0 * uColor.r;\n' + - '} else {\n' + - 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + - '}\n' + - 'if (uColor.g < 0.5) {\n' + - 'gl_FragColor.g *= 2.0 * uColor.g;\n' + - '} else {\n' + - 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + + /** + * build the fragment source for the filters, joining the common part with + * the specific one. + * @param {String} mode the mode of the filter, a key of this.fragmentSource + * @return {String} the source to be compiled + * @private + */ + buildSource: function(mode) { + return 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'gl_FragColor = color;\n' + + 'if (color.a > 0.0) {\n' + + this.fragmentSource[mode] + '}\n' + - 'if (uColor.b < 0.5) {\n' + - 'gl_FragColor.b *= 2.0 * uColor.b;\n' + - '} else {\n' + - 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + - '}\n', - tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + - 'gl_FragColor.rgb += uColor.rgb;\n', - }, - - /** - * build the fragment source for the filters, joining the common part with - * the specific one. - * @param {String} mode the mode of the filter, a key of this.fragmentSource - * @return {String} the source to be compiled - * @private - */ - buildSource: function(mode) { - return 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'gl_FragColor = color;\n' + - 'if (color.a > 0.0) {\n' + - this.fragmentSource[mode] + - '}\n' + - '}'; - }, - - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode, shaderSource; - if (!options.programCache.hasOwnProperty(cacheKey)) { - shaderSource = this.buildSource(this.mode); - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, - - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, iLen = data.length, - tr, tg, tb, - r, g, b, - source, alpha1 = 1 - this.alpha; - - source = new fabric.Color(this.color).getSource(); - tr = source[0] * this.alpha; - tg = source[1] * this.alpha; - tb = source[2] * this.alpha; - - for (var i = 0; i < iLen; i += 4) { - - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - break; - case 'screen': - data[i] = 255 - (255 - r) * (255 - tr) / 255; - data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; - data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; - break; - case 'add': - data[i] = r + tr; - data[i + 1] = g + tg; - data[i + 2] = b + tb; - break; - case 'diff': - case 'difference': - data[i] = Math.abs(r - tr); - data[i + 1] = Math.abs(g - tg); - data[i + 2] = Math.abs(b - tb); - break; - case 'subtract': - data[i] = r - tr; - data[i + 1] = g - tg; - data[i + 2] = b - tb; - break; - case 'darken': - data[i] = Math.min(r, tr); - data[i + 1] = Math.min(g, tg); - data[i + 2] = Math.min(b, tb); - break; - case 'lighten': - data[i] = Math.max(r, tr); - data[i + 1] = Math.max(g, tg); - data[i + 2] = Math.max(b, tb); - break; - case 'overlay': - data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); - data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); - data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); - break; - case 'exclusion': - data[i] = tr + r - ((2 * tr * r) / 255); - data[i + 1] = tg + g - ((2 * tg * g) / 255); - data[i + 2] = tb + b - ((2 * tb * b) / 255); - break; - case 'tint': - data[i] = tr + r * alpha1; - data[i + 1] = tg + g * alpha1; - data[i + 2] = tb + b * alpha1; - } + '}'; + }, + + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode, shaderSource; + if (!options.programCache.hasOwnProperty(cacheKey)) { + shaderSource = this.buildSource(this.mode); + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, + + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, iLen = data.length, + tr, tg, tb, + r, g, b, + source, alpha1 = 1 - this.alpha; + + source = new fabric.Color(this.color).getSource(); + tr = source[0] * this.alpha; + tg = source[1] * this.alpha; + tb = source[2] * this.alpha; + + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + break; + case 'screen': + data[i] = 255 - (255 - r) * (255 - tr) / 255; + data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; + data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; + break; + case 'add': + data[i] = r + tr; + data[i + 1] = g + tg; + data[i + 2] = b + tb; + break; + case 'diff': + case 'difference': + data[i] = Math.abs(r - tr); + data[i + 1] = Math.abs(g - tg); + data[i + 2] = Math.abs(b - tb); + break; + case 'subtract': + data[i] = r - tr; + data[i + 1] = g - tg; + data[i + 2] = b - tb; + break; + case 'darken': + data[i] = Math.min(r, tr); + data[i + 1] = Math.min(g, tg); + data[i + 2] = Math.min(b, tb); + break; + case 'lighten': + data[i] = Math.max(r, tr); + data[i + 1] = Math.max(g, tg); + data[i + 2] = Math.max(b, tb); + break; + case 'overlay': + data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); + data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); + data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); + break; + case 'exclusion': + data[i] = tr + r - ((2 * tr * r) / 255); + data[i + 1] = tg + g - ((2 * tg * g) / 255); + data[i + 2] = tb + b - ((2 * tb * b) / 255); + break; + case 'tint': + data[i] = tr + r * alpha1; + data[i + 1] = tg + g * alpha1; + data[i + 2] = tb + b * alpha1; } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uColor: gl.getUniformLocation(program, 'uColor'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(); - source[0] = this.alpha * source[0] / 255; - source[1] = this.alpha * source[1] / 255; - source[2] = this.alpha * source[2] / 255; - source[3] = this.alpha; - gl.uniform4fv(uniformLocations.uColor, source); - }, - - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - color: this.color, - mode: this.mode, - alpha: this.alpha - }; } - }); + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColor: gl.getUniformLocation(program, 'uColor'), + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(); + source[0] = this.alpha * source[0] / 255; + source[1] = this.alpha * source[1] / 255; + source[2] = this.alpha * source[2] / 255; + source[3] = this.alpha; + gl.uniform4fv(uniformLocations.uColor, source); + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + color: this.color, + mode: this.mode, + alpha: this.alpha + }; + } +}); + +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/blendimage_filter.class.js b/src/filters/blendimage_filter.class.js index 8567c2deb02..af2df137be4 100644 --- a/src/filters/blendimage_filter.class.js +++ b/src/filters/blendimage_filter.class.js @@ -1,244 +1,239 @@ -(function(global) { - 'use strict'; +var fabric = exports.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + +/** + * Image Blend filter class + * @class fabric.Image.filter.BlendImage + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + +filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { + type: 'BlendImage', - var fabric = global.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + **/ + image: null, /** - * Image Blend filter class - * @class fabric.Image.filter.BlendImage - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); - * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ + * Blend mode for the filter (one of "multiply", "mask") + * @type String + * @default + **/ + mode: 'multiply', + + /** + * alpha value. represent the strength of the blend image operation. + * not implemented. + **/ + alpha: 1, + + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'uniform mat3 uTransformMatrix;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', - filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { - type: 'BlendImage', - - /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - **/ - image: null, - - /** - * Blend mode for the filter (one of "multiply", "mask") - * @type String - * @default - **/ - mode: 'multiply', - - /** - * alpha value. represent the strength of the blend image operation. - * not implemented. - **/ - alpha: 1, - - vertexSource: 'attribute vec2 aPosition;\n' + + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + 'varying vec2 vTexCoord;\n' + 'varying vec2 vTexCoord2;\n' + - 'uniform mat3 uTransformMatrix;\n' + 'void main() {\n' + - 'vTexCoord = aPosition;\n' + - 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + - 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.rgba *= color2.rgba;\n' + + 'gl_FragColor = color;\n' + '}', + mask: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.a = color2.a;\n' + + 'gl_FragColor = color;\n' + + '}', + }, - /** - * Fragment source for the Multiply program - */ - fragmentSource: { - multiply: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.rgba *= color2.rgba;\n' + - 'gl_FragColor = color;\n' + - '}', - mask: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.a = color2.a;\n' + - 'gl_FragColor = color;\n' + - '}', - }, - - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - var shaderSource = this.fragmentSource[this.mode]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, - - applyToWebGL: function(options) { - // load texture to blend. - var gl = options.context, - texture = this.createTexture(options.filterBackend, this.image); - this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); - this.callSuper('applyToWebGL', options); - this.unbindAdditionalTexture(gl, gl.TEXTURE1); - }, - - createTexture: function(backend, image) { - return backend.getCachedTexture(image.cacheKey, image._element); - }, - - /** - * Calculate a transformMatrix to adapt the image to blend over - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - calculateMatrix: function() { - var image = this.image, - width = image._element.width, - height = image._element.height; - return [ - 1 / image.scaleX, 0, 0, - 0, 1 / image.scaleY, 0, - -image.left / width, -image.top / height, 1 - ]; - }, - - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - resources = options.filterBackend.resources, - data = imageData.data, iLen = data.length, - width = imageData.width, - height = imageData.height, - tr, tg, tb, ta, - r, g, b, a, - canvas1, context, image = this.image, blendData; - - if (!resources.blendImage) { - resources.blendImage = fabric.util.createCanvasElement(); - } - canvas1 = resources.blendImage; - context = canvas1.getContext('2d'); - if (canvas1.width !== width || canvas1.height !== height) { - canvas1.width = width; - canvas1.height = height; - } - else { - context.clearRect(0, 0, width, height); - } - context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); - context.drawImage(image._element, 0, 0, width, height); - blendData = context.getImageData(0, 0, width, height).data; - for (var i = 0; i < iLen; i += 4) { - - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - a = data[i + 3]; - - tr = blendData[i]; - tg = blendData[i + 1]; - tb = blendData[i + 2]; - ta = blendData[i + 3]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - data[i + 3] = a * ta / 255; - break; - case 'mask': - data[i + 3] = ta; - break; - } + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + var shaderSource = this.fragmentSource[this.mode]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, + + applyToWebGL: function(options) { + // load texture to blend. + var gl = options.context, + texture = this.createTexture(options.filterBackend, this.image); + this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); + this.callSuper('applyToWebGL', options); + this.unbindAdditionalTexture(gl, gl.TEXTURE1); + }, + + createTexture: function(backend, image) { + return backend.getCachedTexture(image.cacheKey, image._element); + }, + + /** + * Calculate a transformMatrix to adapt the image to blend over + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + calculateMatrix: function() { + var image = this.image, + width = image._element.width, + height = image._element.height; + return [ + 1 / image.scaleX, 0, 0, + 0, 1 / image.scaleY, 0, + -image.left / width, -image.top / height, 1 + ]; + }, + + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + resources = options.filterBackend.resources, + data = imageData.data, iLen = data.length, + width = imageData.width, + height = imageData.height, + tr, tg, tb, ta, + r, g, b, a, + canvas1, context, image = this.image, blendData; + + if (!resources.blendImage) { + resources.blendImage = fabric.util.createCanvasElement(); + } + canvas1 = resources.blendImage; + context = canvas1.getContext('2d'); + if (canvas1.width !== width || canvas1.height !== height) { + canvas1.width = width; + canvas1.height = height; + } + else { + context.clearRect(0, 0, width, height); + } + context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); + context.drawImage(image._element, 0, 0, width, height); + blendData = context.getImageData(0, 0, width, height).data; + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + a = data[i + 3]; + + tr = blendData[i]; + tg = blendData[i + 1]; + tb = blendData[i + 2]; + ta = blendData[i + 3]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + data[i + 3] = a * ta / 255; + break; + case 'mask': + data[i + 3] = ta; + break; } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), - uImage: gl.getUniformLocation(program, 'uImage'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var matrix = this.calculateMatrix(); - gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. - gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); - }, - - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - image: this.image && this.image.toObject(), - mode: this.mode, - alpha: this.alpha - }; } - }); + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - fabric.Image.filters.BlendImage.fromObject = function(object) { - return fabric.Image.fromObject(object.image).then(function(image) { - return new fabric.Image.filters.BlendImage(Object.assign({}, object, { image: image })); - }); - }; + getUniformLocations: function(gl, program) { + return { + uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), + uImage: gl.getUniformLocation(program, 'uImage'), + }; + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var matrix = this.calculateMatrix(); + gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. + gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); + }, + + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + image: this.image && this.image.toObject(), + mode: this.mode, + alpha: this.alpha + }; + } +}); + +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +fabric.Image.filters.BlendImage.fromObject = function(object) { + return fabric.Image.fromObject(object.image).then(function(image) { + return new fabric.Image.filters.BlendImage(Object.assign({}, object, { image: image })); + }); +}; diff --git a/src/filters/blur_filter.class.js b/src/filters/blur_filter.class.js index d99e3f275cd..593d489a016 100644 --- a/src/filters/blur_filter.class.js +++ b/src/filters/blur_filter.class.js @@ -1,31 +1,27 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - - /** - * Blur filter class - * @class fabric.Image.filters.Blur - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Blur({ - * blur: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { - - type: 'Blur', - - /* +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + +/** + * Blur filter class + * @class fabric.Image.filters.Blur + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Blur({ + * blur: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ +filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { + + type: 'Blur', + + /* 'gl_FragColor = vec4(0.0);', 'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;', 'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;', @@ -44,177 +40,175 @@ 'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;', */ - /* eslint-disable max-len */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec2 uDelta;\n' + - 'varying vec2 vTexCoord;\n' + - 'const float nSamples = 15.0;\n' + - 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + - 'float random(vec3 scale) {\n' + - /* use the fragment position for a different seed per-pixel */ - 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + + /* eslint-disable max-len */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n' + + 'const float nSamples = 15.0;\n' + + 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + + 'float random(vec3 scale) {\n' + + /* use the fragment position for a different seed per-pixel */ + 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + + '}\n' + + 'void main() {\n' + + 'vec4 color = vec4(0.0);\n' + + 'float total = 0.0;\n' + + 'float offset = random(v3offset);\n' + + 'for (float t = -nSamples; t <= nSamples; t++) {\n' + + 'float percent = (t + offset - 0.5) / nSamples;\n' + + 'float weight = 1.0 - abs(percent);\n' + + 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + + 'total += weight;\n' + '}\n' + - 'void main() {\n' + - 'vec4 color = vec4(0.0);\n' + - 'float total = 0.0;\n' + - 'float offset = random(v3offset);\n' + - 'for (float t = -nSamples; t <= nSamples; t++) {\n' + - 'float percent = (t + offset - 0.5) / nSamples;\n' + - 'float weight = 1.0 - abs(percent);\n' + - 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + - 'total += weight;\n' + - '}\n' + - 'gl_FragColor = color / total;\n' + - '}', - /* eslint-enable max-len */ - - /** - * blur value, in percentage of image dimensions. - * specific to keep the image blur constant at different resolutions - * range between 0 and 1. - * @type Number - * @default - */ - blur: 0, - - mainParameter: 'blur', - - applyTo: function(options) { - if (options.webgl) { - // this aspectRatio is used to give the same blur to vertical and horizontal - this.aspectRatio = options.sourceWidth / options.sourceHeight; - options.passes++; - this._setupFrameBuffer(options); - this.horizontal = true; - this.applyToWebGL(options); - this._swapTextures(options); - this._setupFrameBuffer(options); - this.horizontal = false; - this.applyToWebGL(options); - this._swapTextures(options); - } - else { - this.applyTo2d(options); - } - }, - - applyTo2d: function(options) { - // paint canvasEl with current image data. - //options.ctx.putImageData(options.imageData, 0, 0); - options.imageData = this.simpleBlur(options); - }, - - simpleBlur: function(options) { - var resources = options.filterBackend.resources, canvas1, canvas2, - width = options.imageData.width, - height = options.imageData.height; - - if (!resources.blurLayer1) { - resources.blurLayer1 = fabric.util.createCanvasElement(); - resources.blurLayer2 = fabric.util.createCanvasElement(); - } - canvas1 = resources.blurLayer1; - canvas2 = resources.blurLayer2; - if (canvas1.width !== width || canvas1.height !== height) { - canvas2.width = canvas1.width = width; - canvas2.height = canvas1.height = height; - } - var ctx1 = canvas1.getContext('2d'), - ctx2 = canvas2.getContext('2d'), - nSamples = 15, - random, percent, j, i, - blur = this.blur * 0.06 * 0.5; - - // load first canvas - ctx1.putImageData(options.imageData, 0, 0); - ctx2.clearRect(0, 0, width, height); - - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * width + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, j, random); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * height + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, random, j); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - options.ctx.drawImage(canvas1, 0, 0); - var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); - ctx1.globalAlpha = 1; - ctx1.clearRect(0, 0, canvas1.width, canvas1.height); - return newImageData; - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - delta: gl.getUniformLocation(program, 'uDelta'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var delta = this.chooseRightDelta(); - gl.uniform2fv(uniformLocations.delta, delta); - }, - - /** - * choose right value of image percentage to blur with - * @returns {Array} a numeric array with delta values - */ - chooseRightDelta: function() { - var blurScale = 1, delta = [0, 0], blur; - if (this.horizontal) { - if (this.aspectRatio > 1) { - // image is wide, i want to shrink radius horizontal - blurScale = 1 / this.aspectRatio; - } - } - else { - if (this.aspectRatio < 1) { - // image is tall, i want to shrink radius vertical - blurScale = this.aspectRatio; - } - } - blur = blurScale * this.blur * 0.12; - if (this.horizontal) { - delta[0] = blur; - } - else { - delta[1] = blur; - } - return delta; - }, - }); + 'gl_FragColor = color / total;\n' + + '}', + /* eslint-enable max-len */ /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * blur value, in percentage of image dimensions. + * specific to keep the image blur constant at different resolutions + * range between 0 and 1. + * @type Number + * @default */ - filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; + blur: 0, + + mainParameter: 'blur', + + applyTo: function(options) { + if (options.webgl) { + // this aspectRatio is used to give the same blur to vertical and horizontal + this.aspectRatio = options.sourceWidth / options.sourceHeight; + options.passes++; + this._setupFrameBuffer(options); + this.horizontal = true; + this.applyToWebGL(options); + this._swapTextures(options); + this._setupFrameBuffer(options); + this.horizontal = false; + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, + + applyTo2d: function(options) { + // paint canvasEl with current image data. + //options.ctx.putImageData(options.imageData, 0, 0); + options.imageData = this.simpleBlur(options); + }, + + simpleBlur: function(options) { + var resources = options.filterBackend.resources, canvas1, canvas2, + width = options.imageData.width, + height = options.imageData.height; + + if (!resources.blurLayer1) { + resources.blurLayer1 = fabric.util.createCanvasElement(); + resources.blurLayer2 = fabric.util.createCanvasElement(); + } + canvas1 = resources.blurLayer1; + canvas2 = resources.blurLayer2; + if (canvas1.width !== width || canvas1.height !== height) { + canvas2.width = canvas1.width = width; + canvas2.height = canvas1.height = height; + } + var ctx1 = canvas1.getContext('2d'), + ctx2 = canvas2.getContext('2d'), + nSamples = 15, + random, percent, j, i, + blur = this.blur * 0.06 * 0.5; + + // load first canvas + ctx1.putImageData(options.imageData, 0, 0); + ctx2.clearRect(0, 0, width, height); + + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * width + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, j, random); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * height + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, random, j); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + options.ctx.drawImage(canvas1, 0, 0); + var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); + ctx1.globalAlpha = 1; + ctx1.clearRect(0, 0, canvas1.width, canvas1.height); + return newImageData; + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + delta: gl.getUniformLocation(program, 'uDelta'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var delta = this.chooseRightDelta(); + gl.uniform2fv(uniformLocations.delta, delta); + }, + + /** + * choose right value of image percentage to blur with + * @returns {Array} a numeric array with delta values + */ + chooseRightDelta: function() { + var blurScale = 1, delta = [0, 0], blur; + if (this.horizontal) { + if (this.aspectRatio > 1) { + // image is wide, i want to shrink radius horizontal + blurScale = 1 / this.aspectRatio; + } + } + else { + if (this.aspectRatio < 1) { + // image is tall, i want to shrink radius vertical + blurScale = this.aspectRatio; + } + } + blur = blurScale * this.blur * 0.12; + if (this.horizontal) { + delta[0] = blur; + } + else { + delta[1] = blur; + } + return delta; + }, +}); + +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/brightness_filter.class.js b/src/filters/brightness_filter.class.js index 4749cb93d0e..8a8931d1c2a 100644 --- a/src/filters/brightness_filter.class.js +++ b/src/filters/brightness_filter.class.js @@ -1,112 +1,106 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +/** + * Brightness filter class + * @class fabric.Image.filters.Brightness + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Brightness({ + * brightness: 0.05 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ +filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { /** - * Brightness filter class - * @class fabric.Image.filters.Brightness - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Brightness({ - * brightness: 0.05 - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Filter type + * @param {String} type + * @default */ - filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Brightness', - - /** - * Fragment source for the brightness program - */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uBrightness;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color.rgb += uBrightness;\n' + - 'gl_FragColor = color;\n' + - '}', + type: 'Brightness', - /** - * Brightness value, from -1 to 1. - * translated to -255 to 255 for 2d - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Number} brightness - * @default - */ - brightness: 0, + /** + * Fragment source for the brightness program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uBrightness;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color.rgb += uBrightness;\n' + + 'gl_FragColor = color;\n' + + '}', - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'brightness', + /** + * Brightness value, from -1 to 1. + * translated to -255 to 255 for 2d + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Number} brightness + * @default + */ + brightness: 0, - /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.brightness === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - brightness = Math.round(this.brightness * 255); - for (i = 0; i < len; i += 4) { - data[i] = data[i] + brightness; - data[i + 1] = data[i + 1] + brightness; - data[i + 2] = data[i + 2] + brightness; - } - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'brightness', - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uBrightness: gl.getUniformLocation(program, 'uBrightness'), - }; - }, + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.brightness === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + brightness = Math.round(this.brightness * 255); + for (i = 0; i < len; i += 4) { + data[i] = data[i] + brightness; + data[i + 1] = data[i + 1] + brightness; + data[i + 2] = data[i + 2] + brightness; + } + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBrightness, this.brightness); - }, - }); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uBrightness: gl.getUniformLocation(program, 'uBrightness'), + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBrightness, this.brightness); + }, +}); -})(typeof exports !== 'undefined' ? exports : this); +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/colormatrix_filter.class.js b/src/filters/colormatrix_filter.class.js index 045cab5ef76..ee61200a126 100644 --- a/src/filters/colormatrix_filter.class.js +++ b/src/filters/colormatrix_filter.class.js @@ -1,158 +1,153 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +/** + * Color Matrix filter class + * @class fabric.Image.filters.ColorMatrix + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} + * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} + * @example Kodachrome filter + * var filter = new fabric.Image.filters.ColorMatrix({ + * matrix: [ + 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, + -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, + -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, + 0, 0, 0, 1, 0 + ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ +filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { /** - * Color Matrix filter class - * @class fabric.Image.filters.ColorMatrix - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} - * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} - * @example Kodachrome filter - * var filter = new fabric.Image.filters.ColorMatrix({ - * matrix: [ - 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, - -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, - -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, - 0, 0, 0, 1, 0 - ] - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Filter type + * @param {String} type + * @default */ - filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'ColorMatrix', + type: 'ColorMatrix', - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'varying vec2 vTexCoord;\n' + - 'uniform mat4 uColorMatrix;\n' + - 'uniform vec4 uConstants;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color *= uColorMatrix;\n' + - 'color += uConstants;\n' + - 'gl_FragColor = color;\n' + - '}', + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform mat4 uColorMatrix;\n' + + 'uniform vec4 uConstants;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color *= uColorMatrix;\n' + + 'color += uConstants;\n' + + 'gl_FragColor = color;\n' + + '}', - /** - * Colormatrix for pixels. - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Array} matrix array of 20 numbers. - * @default - */ - matrix: [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ], + /** + * Colormatrix for pixels. + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ], - mainParameter: 'matrix', + mainParameter: 'matrix', - /** - * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario - * to save some calculation - * @type Boolean - * @default true - */ - colorsOnly: true, + /** + * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario + * to save some calculation + * @type Boolean + * @default true + */ + colorsOnly: true, - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.matrix = this.matrix.slice(0); - }, + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.matrix = this.matrix.slice(0); + }, - /** - * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = data.length, - m = this.matrix, - r, g, b, a, i, colorsOnly = this.colorsOnly; + /** + * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = data.length, + m = this.matrix, + r, g, b, a, i, colorsOnly = this.colorsOnly; - for (i = 0; i < iLen; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - if (colorsOnly) { - data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; - } - else { - a = data[i + 3]; - data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; - data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; - } + for (i = 0; i < iLen; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + if (colorsOnly) { + data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), - uConstants: gl.getUniformLocation(program, 'uConstants'), - }; - }, + else { + a = data[i + 3]; + data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; + data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; + } + } + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var m = this.matrix, - matrix = [ - m[0], m[1], m[2], m[3], - m[5], m[6], m[7], m[8], - m[10], m[11], m[12], m[13], - m[15], m[16], m[17], m[18] - ], - constants = [m[4], m[9], m[14], m[19]]; - gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); - gl.uniform4fv(uniformLocations.uConstants, constants); - }, - }); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), + uConstants: gl.getUniformLocation(program, 'uConstants'), + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; -})(typeof exports !== 'undefined' ? exports : this); + sendUniformData: function(gl, uniformLocations) { + var m = this.matrix, + matrix = [ + m[0], m[1], m[2], m[3], + m[5], m[6], m[7], m[8], + m[10], m[11], m[12], m[13], + m[15], m[16], m[17], m[18] + ], + constants = [m[4], m[9], m[14], m[19]]; + gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); + gl.uniform4fv(uniformLocations.uConstants, constants); + }, +}); + +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/composed_filter.class.js b/src/filters/composed_filter.class.js index dc42aa71f04..ac506260ea2 100644 --- a/src/filters/composed_filter.class.js +++ b/src/filters/composed_filter.class.js @@ -1,71 +1,66 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - 'use strict'; +/** + * A container class that knows how to apply a sequence of filters to an input image. + */ +filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + type: 'Composed', /** - * A container class that knows how to apply a sequence of filters to an input image. + * A non sparse array of filters to apply */ - filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { + subFilters: [], - type: 'Composed', - - /** - * A non sparse array of filters to apply - */ - subFilters: [], - - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.subFilters = this.subFilters.slice(0); - }, - - /** - * Apply this container's filters to the input image provided. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be applied. - */ - applyTo: function(options) { - options.passes += this.subFilters.length - 1; - this.subFilters.forEach(function(filter) { - filter.applyTo(options); - }); - }, - - /** - * Serialize this filter into JSON. - * - * @returns {Object} A JSON representation of this filter. - */ - toObject: function() { - return fabric.util.object.extend(this.callSuper('toObject'), { - subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), - }); - }, + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.subFilters = this.subFilters.slice(0); + }, - isNeutralState: function() { - return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); - } - }); + /** + * Apply this container's filters to the input image provided. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be applied. + */ + applyTo: function(options) { + options.passes += this.subFilters.length - 1; + this.subFilters.forEach(function(filter) { + filter.applyTo(options); + }); + }, /** - * Deserialize a JSON definition of a ComposedFilter into a concrete instance. + * Serialize this filter into JSON. + * + * @returns {Object} A JSON representation of this filter. */ - fabric.Image.filters.Composed.fromObject = function(object) { - var filters = object.subFilters || []; - return Promise.all(filters.map(function(filter) { - return fabric.Image.filters[filter.type].fromObject(filter); - })).then(function(enlivedFilters) { - return new fabric.Image.filters.Composed({ subFilters: enlivedFilters }); + toObject: function() { + return fabric.util.object.extend(this.callSuper('toObject'), { + subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), }); - }; -})(typeof exports !== 'undefined' ? exports : this); + }, + + isNeutralState: function() { + return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); + } +}); + +/** + * Deserialize a JSON definition of a ComposedFilter into a concrete instance. + */ +fabric.Image.filters.Composed.fromObject = function(object) { + var filters = object.subFilters || []; + return Promise.all(filters.map(function(filter) { + return fabric.Image.filters[filter.type].fromObject(filter); + })).then(function(enlivedFilters) { + return new fabric.Image.filters.Composed({ subFilters: enlivedFilters }); + }); +}; diff --git a/src/filters/contrast_filter.class.js b/src/filters/contrast_filter.class.js index fd5d1833592..72ea912d980 100644 --- a/src/filters/contrast_filter.class.js +++ b/src/filters/contrast_filter.class.js @@ -1,112 +1,106 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +/** + * Contrast filter class + * @class fabric.Image.filters.Contrast + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Contrast({ + * contrast: 0.25 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ +filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { /** - * Contrast filter class - * @class fabric.Image.filters.Contrast - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Contrast({ - * contrast: 0.25 - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Filter type + * @param {String} type + * @default */ - filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Contrast', - - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uContrast;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + - 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + - 'gl_FragColor = color;\n' + - '}', + type: 'Contrast', - /** - * contrast value, range from -1 to 1. - * @param {Number} contrast - * @default 0 - */ - contrast: 0, + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uContrast;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + + 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + + 'gl_FragColor = color;\n' + + '}', - mainParameter: 'contrast', + /** + * contrast value, range from -1 to 1. + * @param {Number} contrast + * @default 0 + */ + contrast: 0, - /** - * Constructor - * @memberOf fabric.Image.filters.Contrast.prototype - * @param {Object} [options] Options object - * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) - */ + mainParameter: 'contrast', - /** - * Apply the Contrast operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - if (this.contrast === 0) { - return; - } - var imageData = options.imageData, i, len, - data = imageData.data, len = data.length, - contrast = Math.floor(this.contrast * 255), - contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); + /** + * Constructor + * @memberOf fabric.Image.filters.Contrast.prototype + * @param {Object} [options] Options object + * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) + */ - for (i = 0; i < len; i += 4) { - data[i] = contrastF * (data[i] - 128) + 128; - data[i + 1] = contrastF * (data[i + 1] - 128) + 128; - data[i + 2] = contrastF * (data[i + 2] - 128) + 128; - } - }, + /** + * Apply the Contrast operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + if (this.contrast === 0) { + return; + } + var imageData = options.imageData, i, len, + data = imageData.data, len = data.length, + contrast = Math.floor(this.contrast * 255), + contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uContrast: gl.getUniformLocation(program, 'uContrast'), - }; - }, + for (i = 0; i < len; i += 4) { + data[i] = contrastF * (data[i] - 128) + 128; + data[i + 1] = contrastF * (data[i + 1] - 128) + 128; + data[i + 2] = contrastF * (data[i + 2] - 128) + 128; + } + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uContrast, this.contrast); - }, - }); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uContrast: gl.getUniformLocation(program, 'uContrast'), + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uContrast, this.contrast); + }, +}); -})(typeof exports !== 'undefined' ? exports : this); +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/convolute_filter.class.js b/src/filters/convolute_filter.class.js index 2941208206e..ba6f7ec9463 100644 --- a/src/filters/convolute_filter.class.js +++ b/src/filters/convolute_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), extend = fabric.util.object.extend, filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -347,5 +343,3 @@ * @returns {Promise} */ fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/filter_boilerplate.js b/src/filters/filter_boilerplate.js index c1de87cc2e7..83874b72e56 100644 --- a/src/filters/filter_boilerplate.js +++ b/src/filters/filter_boilerplate.js @@ -1,110 +1,104 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +/** + * MyFilter filter class + * @class fabric.Image.filters.MyFilter + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.MyFilter#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.MyFilter({ + * add here an example of how to use your filter + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ +filters.MyFilter = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.MyFilter.prototype */ { /** - * MyFilter filter class - * @class fabric.Image.filters.MyFilter - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.MyFilter#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.MyFilter({ - * add here an example of how to use your filter - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Filter type + * @param {String} type + * @default */ - filters.MyFilter = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.MyFilter.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'MyFilter', - - /** - * Fragment source for the myParameter program - */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMyParameter;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - // add your gl code here - 'gl_FragColor = color;\n' + - '}', + type: 'MyFilter', - /** - * MyFilter value, from -1 to 1. - * translated to -255 to 255 for 2d - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Number} myParameter - * @default - */ - myParameter: 0, + /** + * Fragment source for the myParameter program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMyParameter;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + // add your gl code here + 'gl_FragColor = color;\n' + + '}', - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'myParameter', + /** + * MyFilter value, from -1 to 1. + * translated to -255 to 255 for 2d + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Number} myParameter + * @default + */ + myParameter: 0, - /** - * Apply the MyFilter operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.myParameter === 0) { - // early return if the parameter value has a neutral value - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length; - for (i = 0; i < len; i += 4) { - // insert here your code to modify data[i] - } - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'myParameter', - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uMyParameter: gl.getUniformLocation(program, 'uMyParameter'), - }; - }, + /** + * Apply the MyFilter operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.myParameter === 0) { + // early return if the parameter value has a neutral value + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length; + for (i = 0; i < len; i += 4) { + // insert here your code to modify data[i] + } + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uMyParameter, this.myParameter); - }, - }); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uMyParameter: gl.getUniformLocation(program, 'uMyParameter'), + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - fabric.Image.filters.MyFilter.fromObject = fabric.Image.filters.BaseFilter.fromObject; + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uMyParameter, this.myParameter); + }, +}); -})(typeof exports !== 'undefined' ? exports : this); +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +fabric.Image.filters.MyFilter.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/filter_generator.js b/src/filters/filter_generator.js index 1932d53c42a..578a5e838ab 100644 --- a/src/filters/filter_generator.js +++ b/src/filters/filter_generator.js @@ -1,85 +1,80 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - 'use strict'; +var matrices = { + Brownie: [ + 0.59970,0.34553,-0.27082,0,0.186, + -0.03770,0.86095,0.15059,0,-0.1449, + 0.24113,-0.07441,0.44972,0,-0.02965, + 0,0,0,1,0 + ], + Vintage: [ + 0.62793,0.32021,-0.03965,0,0.03784, + 0.02578,0.64411,0.03259,0,0.02926, + 0.04660,-0.08512,0.52416,0,0.02023, + 0,0,0,1,0 + ], + Kodachrome: [ + 1.12855,-0.39673,-0.03992,0,0.24991, + -0.16404,1.08352,-0.05498,0,0.09698, + -0.16786,-0.56034,1.60148,0,0.13972, + 0,0,0,1,0 + ], + Technicolor: [ + 1.91252,-0.85453,-0.09155,0,0.04624, + -0.30878,1.76589,-0.10601,0,-0.27589, + -0.23110,-0.75018,1.84759,0,0.12137, + 0,0,0,1,0 + ], + Polaroid: [ + 1.438,-0.062,-0.062,0,0, + -0.122,1.378,-0.122,0,0, + -0.016,-0.016,1.483,0,0, + 0,0,0,1,0 + ], + Sepia: [ + 0.393, 0.769, 0.189, 0, 0, + 0.349, 0.686, 0.168, 0, 0, + 0.272, 0.534, 0.131, 0, 0, + 0, 0, 0, 1, 0 + ], + BlackWhite: [ + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 0, 0, 0, 1, 0, + ] +}; - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +for (var key in matrices) { + filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { - var matrices = { - Brownie: [ - 0.59970,0.34553,-0.27082,0,0.186, - -0.03770,0.86095,0.15059,0,-0.1449, - 0.24113,-0.07441,0.44972,0,-0.02965, - 0,0,0,1,0 - ], - Vintage: [ - 0.62793,0.32021,-0.03965,0,0.03784, - 0.02578,0.64411,0.03259,0,0.02926, - 0.04660,-0.08512,0.52416,0,0.02023, - 0,0,0,1,0 - ], - Kodachrome: [ - 1.12855,-0.39673,-0.03992,0,0.24991, - -0.16404,1.08352,-0.05498,0,0.09698, - -0.16786,-0.56034,1.60148,0,0.13972, - 0,0,0,1,0 - ], - Technicolor: [ - 1.91252,-0.85453,-0.09155,0,0.04624, - -0.30878,1.76589,-0.10601,0,-0.27589, - -0.23110,-0.75018,1.84759,0,0.12137, - 0,0,0,1,0 - ], - Polaroid: [ - 1.438,-0.062,-0.062,0,0, - -0.122,1.378,-0.122,0,0, - -0.016,-0.016,1.483,0,0, - 0,0,0,1,0 - ], - Sepia: [ - 0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0 - ], - BlackWhite: [ - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 0, 0, 0, 1, 0, - ] - }; + /** + * Filter type + * @param {String} type + * @default + */ + type: key, - for (var key in matrices) { - filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { + /** + * Colormatrix for the effect + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: matrices[key], - /** - * Filter type - * @param {String} type - * @default - */ - type: key, + /** + * Lock the matrix export for this kind of static, parameter less filters. + */ + mainParameter: false, + /** + * Lock the colormatrix on the color part, skipping alpha + */ + colorsOnly: true, - /** - * Colormatrix for the effect - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * @param {Array} matrix array of 20 numbers. - * @default - */ - matrix: matrices[key], - - /** - * Lock the matrix export for this kind of static, parameter less filters. - */ - mainParameter: false, - /** - * Lock the colormatrix on the color part, skipping alpha - */ - colorsOnly: true, - - }); - fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; - } -})(typeof exports !== 'undefined' ? exports : this); + }); + fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; +} diff --git a/src/filters/gamma_filter.class.js b/src/filters/gamma_filter.class.js index 5bd67be32fd..3cc266111cb 100644 --- a/src/filters/gamma_filter.class.js +++ b/src/filters/gamma_filter.class.js @@ -1,135 +1,129 @@ -(function(global) { +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +/** + * Gamma filter class + * @class fabric.Image.filters.Gamma + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Gamma({ + * gamma: [1, 0.5, 2.1] + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ +filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { /** - * Gamma filter class - * @class fabric.Image.filters.Gamma - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Gamma({ - * gamma: [1, 0.5, 2.1] - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Filter type + * @param {String} type + * @default */ - filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Gamma', + type: 'Gamma', - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec3 uGamma;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec3 correction = (1.0 / uGamma);\n' + - 'color.r = pow(color.r, correction.r);\n' + - 'color.g = pow(color.g, correction.g);\n' + - 'color.b = pow(color.b, correction.b);\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.rgb *= color.a;\n' + - '}', + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec3 uGamma;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec3 correction = (1.0 / uGamma);\n' + + 'color.r = pow(color.r, correction.r);\n' + + 'color.g = pow(color.g, correction.g);\n' + + 'color.b = pow(color.b, correction.b);\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.rgb *= color.a;\n' + + '}', - /** - * Gamma array value, from 0.01 to 2.2. - * @param {Array} gamma - * @default - */ - gamma: [1, 1, 1], - - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'gamma', + /** + * Gamma array value, from 0.01 to 2.2. + * @param {Array} gamma + * @default + */ + gamma: [1, 1, 1], - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.gamma = [1, 1, 1]; - filters.BaseFilter.prototype.initialize.call(this, options); - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'gamma', - /** - * Apply the Gamma operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, data = imageData.data, - gamma = this.gamma, len = data.length, - rInv = 1 / gamma[0], gInv = 1 / gamma[1], - bInv = 1 / gamma[2], i; + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.gamma = [1, 1, 1]; + filters.BaseFilter.prototype.initialize.call(this, options); + }, - if (!this.rVals) { - // eslint-disable-next-line - this.rVals = new Uint8Array(256); - // eslint-disable-next-line - this.gVals = new Uint8Array(256); - // eslint-disable-next-line - this.bVals = new Uint8Array(256); - } + /** + * Apply the Gamma operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, data = imageData.data, + gamma = this.gamma, len = data.length, + rInv = 1 / gamma[0], gInv = 1 / gamma[1], + bInv = 1 / gamma[2], i; - // This is an optimization - pre-compute a look-up table for each color channel - // instead of performing these pow calls for each pixel in the image. - for (i = 0, len = 256; i < len; i++) { - this.rVals[i] = Math.pow(i / 255, rInv) * 255; - this.gVals[i] = Math.pow(i / 255, gInv) * 255; - this.bVals[i] = Math.pow(i / 255, bInv) * 255; - } - for (i = 0, len = data.length; i < len; i += 4) { - data[i] = this.rVals[data[i]]; - data[i + 1] = this.gVals[data[i + 1]]; - data[i + 2] = this.bVals[data[i + 2]]; - } - }, + if (!this.rVals) { + // eslint-disable-next-line + this.rVals = new Uint8Array(256); + // eslint-disable-next-line + this.gVals = new Uint8Array(256); + // eslint-disable-next-line + this.bVals = new Uint8Array(256); + } - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uGamma: gl.getUniformLocation(program, 'uGamma'), - }; - }, + // This is an optimization - pre-compute a look-up table for each color channel + // instead of performing these pow calls for each pixel in the image. + for (i = 0, len = 256; i < len; i++) { + this.rVals[i] = Math.pow(i / 255, rInv) * 255; + this.gVals[i] = Math.pow(i / 255, gInv) * 255; + this.bVals[i] = Math.pow(i / 255, bInv) * 255; + } + for (i = 0, len = data.length; i < len; i += 4) { + data[i] = this.rVals[data[i]]; + data[i + 1] = this.gVals[data[i + 1]]; + data[i + 2] = this.bVals[data[i + 2]]; + } + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform3fv(uniformLocations.uGamma, this.gamma); - }, - }); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uGamma: gl.getUniformLocation(program, 'uGamma'), + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; + sendUniformData: function(gl, uniformLocations) { + gl.uniform3fv(uniformLocations.uGamma, this.gamma); + }, +}); -})(typeof exports !== 'undefined' ? exports : this); +/** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ +fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/grayscale_filter.class.js b/src/filters/grayscale_filter.class.js index 992b02ed27f..3a7cd143ef3 100644 --- a/src/filters/grayscale_filter.class.js +++ b/src/filters/grayscale_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -149,5 +145,3 @@ * @returns {Promise} */ fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/hue_rotation.class.js b/src/filters/hue_rotation.class.js index 7339a28c092..6239f2e3025 100644 --- a/src/filters/hue_rotation.class.js +++ b/src/filters/hue_rotation.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -102,5 +98,3 @@ * @returns {Promise} */ fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/invert_filter.class.js b/src/filters/invert_filter.class.js index 6c19940ea9f..60456755f4c 100644 --- a/src/filters/invert_filter.class.js +++ b/src/filters/invert_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -123,6 +119,3 @@ * @returns {Promise} */ fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; - - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/noise_filter.class.js b/src/filters/noise_filter.class.js index 9cb2a0faf6f..a90e4f29b42 100644 --- a/src/filters/noise_filter.class.js +++ b/src/filters/noise_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), extend = fabric.util.object.extend, filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -129,5 +125,3 @@ * @returns {Promise} */ fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/pixelate_filter.class.js b/src/filters/pixelate_filter.class.js index 5e3eef21d9a..47baffc3a98 100644 --- a/src/filters/pixelate_filter.class.js +++ b/src/filters/pixelate_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -132,5 +128,3 @@ * @returns {Promise} */ fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/removecolor_filter.class.js b/src/filters/removecolor_filter.class.js index c36feabbc9f..ac77976fcd3 100644 --- a/src/filters/removecolor_filter.class.js +++ b/src/filters/removecolor_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), extend = fabric.util.object.extend, filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -168,5 +164,3 @@ * @returns {Promise} */ fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/resize_filter.class.js b/src/filters/resize_filter.class.js index f5abcf35ba0..77347dc66d1 100644 --- a/src/filters/resize_filter.class.js +++ b/src/filters/resize_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor, + var fabric = exports.fabric || (exports.fabric = { }), pow = Math.pow, floor = Math.floor, sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, ceil = Math.ceil, filters = fabric.Image.filters, @@ -485,5 +481,3 @@ * @returns {Promise} */ fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/saturate_filter.class.js b/src/filters/saturate_filter.class.js index b85b108679f..25b0b4f09be 100644 --- a/src/filters/saturate_filter.class.js +++ b/src/filters/saturate_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -114,5 +110,3 @@ * @returns {Promise} */ fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/vibrance_filter.class.js b/src/filters/vibrance_filter.class.js index 235c6c26f7d..a40ad4059b3 100644 --- a/src/filters/vibrance_filter.class.js +++ b/src/filters/vibrance_filter.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), filters = fabric.Image.filters, createClass = fabric.util.createClass; @@ -117,5 +113,3 @@ * @returns {Promise} */ fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/filters/webgl_backend.class.js b/src/filters/webgl_backend.class.js index b144b3e1e9e..de265a4b9dc 100644 --- a/src/filters/webgl_backend.class.js +++ b/src/filters/webgl_backend.class.js @@ -1,7 +1,3 @@ -(function() { - - 'use strict'; - /** * Tests if webgl supports certain precision * @param {WebGL} Canvas WebGL context to test on @@ -335,7 +331,6 @@ return gpuInfo; }, }; -})(); function resizeCanvasIfNeeded(pipelineState) { var targetCanvas = pipelineState.targetCanvas, diff --git a/src/gradient.class.js b/src/gradient.class.js index b8080209a50..58e7e0f18c0 100644 --- a/src/gradient.class.js +++ b/src/gradient.class.js @@ -1,5 +1,3 @@ -(function() { - /* _FROM_SVG_START_ */ function getColorStop(el, multiplier) { var style = el.getAttribute('style'), @@ -485,4 +483,3 @@ options[prop] = finalValue; }); } -})(); diff --git a/src/intersection.class.js b/src/intersection.class.js index bc513993166..26e2cc0753d 100644 --- a/src/intersection.class.js +++ b/src/intersection.class.js @@ -1,9 +1,5 @@ -(function(global) { - - 'use strict'; - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - var fabric = global.fabric || (global.fabric = { }); + var fabric = exports.fabric || (exports.fabric = { }); if (fabric.Intersection) { fabric.warn('fabric.Intersection is already defined'); @@ -168,5 +164,3 @@ } return result; }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index f56ed9fef16..eaced46b7ba 100644 --- a/src/mixins/canvas_events.mixin.js +++ b/src/mixins/canvas_events.mixin.js @@ -1,5 +1,3 @@ -(function() { - var addListener = fabric.util.addListener, removeListener = fabric.util.removeListener, RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, @@ -991,4 +989,3 @@ return control.cursorStyleHandler(e, control, target); } }); -})(); diff --git a/src/mixins/canvas_gestures.mixin.js b/src/mixins/canvas_gestures.mixin.js index 043eecc934a..ed41f1bc02e 100644 --- a/src/mixins/canvas_gestures.mixin.js +++ b/src/mixins/canvas_gestures.mixin.js @@ -7,7 +7,6 @@ * - touch:shake * - touch:longpress */ -(function() { var degreesToRadians = fabric.util.degreesToRadians, radiansToDegrees = fabric.util.radiansToDegrees; @@ -146,4 +145,3 @@ }); } }); -})(); diff --git a/src/mixins/canvas_grouping.mixin.js b/src/mixins/canvas_grouping.mixin.js index 70ef167038e..3989a133cce 100644 --- a/src/mixins/canvas_grouping.mixin.js +++ b/src/mixins/canvas_grouping.mixin.js @@ -1,5 +1,3 @@ -(function() { - var min = Math.min, max = Math.max; @@ -186,5 +184,3 @@ this._groupSelector = null; } }); - -})(); diff --git a/src/mixins/default_controls.js b/src/mixins/default_controls.js index 32d3a2f444c..ba82573756f 100644 --- a/src/mixins/default_controls.js +++ b/src/mixins/default_controls.js @@ -1,5 +1,3 @@ -(function() { - var controlsUtils = fabric.controlsUtils, scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, @@ -111,4 +109,3 @@ actionName: 'resizing', }); } -})(); diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js index 326b03c7a53..71c2e5722bc 100644 --- a/src/mixins/itext.svg_export.js +++ b/src/mixins/itext.svg_export.js @@ -1,5 +1,4 @@ /* _TO_SVG_START_ */ -(function() { var toFixed = fabric.util.toFixed, multipleSpacesRegex = / +/g; @@ -246,5 +245,4 @@ return svgStyle + ' white-space: pre;'; }, }); -})(); /* _TO_SVG_END_ */ diff --git a/src/mixins/itext_behavior.mixin.js b/src/mixins/itext_behavior.mixin.js index 275ca744503..6d26e9d0953 100644 --- a/src/mixins/itext_behavior.mixin.js +++ b/src/mixins/itext_behavior.mixin.js @@ -1,5 +1,3 @@ -(function() { - fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { /** @@ -941,4 +939,3 @@ } } }); -})(); diff --git a/src/mixins/object.svg_export.js b/src/mixins/object.svg_export.js index 05e83243abe..d1b4e9608e4 100644 --- a/src/mixins/object.svg_export.js +++ b/src/mixins/object.svg_export.js @@ -1,5 +1,4 @@ /* _TO_SVG_START_ */ -(function() { function getSvgColorString(prop, value) { if (!value) { return prop + ': none; '; @@ -254,5 +253,4 @@ return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; } }); -})(); /* _TO_SVG_END_ */ diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js index 69a8391da8d..b0d64f57d1c 100644 --- a/src/mixins/object_geometry.mixin.js +++ b/src/mixins/object_geometry.mixin.js @@ -1,5 +1,3 @@ -(function() { - function arrayFromCoords(coords) { return [ new fabric.Point(coords.tl.x, coords.tl.y), @@ -772,4 +770,3 @@ return p.scalarAdd(2 * this.padding); }, }); -})(); diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index f752fb8b18f..bf6b960cdc8 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -1,5 +1,3 @@ -(function() { - var degreesToRadians = fabric.util.degreesToRadians; fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { @@ -301,4 +299,3 @@ // implemented by sub-classes, as needed. } }); -})(); diff --git a/src/mixins/object_origin.mixin.js b/src/mixins/object_origin.mixin.js index 34c205a9883..189298cd7a0 100644 --- a/src/mixins/object_origin.mixin.js +++ b/src/mixins/object_origin.mixin.js @@ -1,5 +1,3 @@ -(function() { - var degreesToRadians = fabric.util.degreesToRadians, originXOffset = { left: -0.5, @@ -280,5 +278,3 @@ return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top'); }, }); - -})(); diff --git a/src/mixins/observable.mixin.js b/src/mixins/observable.mixin.js index 41ef28403bc..bc30843ac4e 100644 --- a/src/mixins/observable.mixin.js +++ b/src/mixins/observable.mixin.js @@ -1,5 +1,3 @@ -(function() { - /** * @private * @param {String} eventName @@ -142,4 +140,3 @@ once: once, off: off, }; -})(); diff --git a/src/mixins/stateful.mixin.js b/src/mixins/stateful.mixin.js index 29673617670..3738d4d9ef7 100644 --- a/src/mixins/stateful.mixin.js +++ b/src/mixins/stateful.mixin.js @@ -1,5 +1,3 @@ -(function() { - var extend = fabric.util.object.extend, originalSet = 'stateProperties'; @@ -104,4 +102,3 @@ return this; } }); -})(); diff --git a/src/mixins/text_style.mixin.js b/src/mixins/text_style.mixin.js index 1b369c730c9..6ef320ec9df 100644 --- a/src/mixins/text_style.mixin.js +++ b/src/mixins/text_style.mixin.js @@ -1,4 +1,3 @@ -(function() { fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { /** * Returns true if object has no styling or no styling in a line @@ -321,4 +320,3 @@ delete this.styles[lineIndex]; } }); -})(); diff --git a/src/parser.js b/src/parser.js index ebb9bdba90a..f725d58fc80 100644 --- a/src/parser.js +++ b/src/parser.js @@ -1,13 +1,9 @@ -(function(global) { - - 'use strict'; - /** * @name fabric * @namespace */ - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), toFixed = fabric.util.toFixed, parseUnit = fabric.util.parseUnit, multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, @@ -1084,5 +1080,3 @@ }, reviver, options); } }); - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/pattern.class.js b/src/pattern.class.js index 4a6f6aa94e4..e879e0b39e2 100644 --- a/src/pattern.class.js +++ b/src/pattern.class.js @@ -1,7 +1,3 @@ -(function() { - - 'use strict'; - var toFixed = fabric.util.toFixed; /** @@ -183,4 +179,3 @@ return new fabric.Pattern(patternOptions); }); }; -})(); diff --git a/src/point.class.js b/src/point.class.js index 9f55ba3bfdc..7f691b8d9df 100644 --- a/src/point.class.js +++ b/src/point.class.js @@ -1,10 +1,6 @@ -(function(global) { - - 'use strict'; - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - var fabric = global.fabric || (global.fabric = { }); + var fabric = exports.fabric || (exports.fabric = { }); if (fabric.Point) { fabric.warn('fabric.Point is already defined'); @@ -347,5 +343,3 @@ return new Point(this.x, this.y); } }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shadow.class.js b/src/shadow.class.js index 55406c69868..f3cbe6ecdd1 100644 --- a/src/shadow.class.js +++ b/src/shadow.class.js @@ -1,15 +1,6 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), toFixed = fabric.util.toFixed; - if (fabric.Shadow) { - fabric.warn('fabric.Shadow is already defined.'); - return; - } - /** * Shadow class * @class fabric.Shadow @@ -191,5 +182,3 @@ */ // eslint-disable-next-line max-len fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/active_selection.class.js b/src/shapes/active_selection.class.js index 6bfb937e2e9..87d444b7130 100644 --- a/src/shapes/active_selection.class.js +++ b/src/shapes/active_selection.class.js @@ -1,12 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }); - - if (fabric.ActiveSelection) { - return; - } + var fabric = exports.fabric || (exports.fabric = { }); /** * Group class @@ -191,5 +183,3 @@ return new fabric.ActiveSelection(enlivenedObjects, options, true); }); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/circle.class.js b/src/shapes/circle.class.js index 12c5449b1d3..7562f9a8304 100644 --- a/src/shapes/circle.class.js +++ b/src/shapes/circle.class.js @@ -1,15 +1,6 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), degreesToRadians = fabric.util.degreesToRadians; - if (fabric.Circle) { - fabric.warn('fabric.Circle is already defined.'); - return; - } - /** * Circle class * @class fabric.Circle @@ -205,5 +196,3 @@ fabric.Circle.fromObject = function(object) { return fabric.Object._fromObject(fabric.Circle, object); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/ellipse.class.js b/src/shapes/ellipse.class.js index 138f52e3547..1cec9a4a65d 100644 --- a/src/shapes/ellipse.class.js +++ b/src/shapes/ellipse.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), piBy2 = Math.PI * 2; if (fabric.Ellipse) { @@ -176,5 +172,3 @@ fabric.Ellipse.fromObject = function(object) { return fabric.Object._fromObject(fabric.Ellipse, object); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index 3f6fbb5a7f9..04deb8fe2b5 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -2,7 +2,7 @@ 'use strict'; - var fabric = global.fabric || (global.fabric = {}), + var fabric = exports.fabric || (exports.fabric = {}), multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, invertTransform = fabric.util.invertTransform, transformPoint = fabric.util.transformPoint, diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js index 0a246de11ab..18fb2bc7bff 100644 --- a/src/shapes/image.class.js +++ b/src/shapes/image.class.js @@ -1,14 +1,10 @@ -(function(global) { - - 'use strict'; - var extend = fabric.util.object.extend; - if (!global.fabric) { - global.fabric = { }; + if (!exports.fabric) { + exports.fabric = { }; } - if (global.fabric.Image) { + if (exports.fabric.Image) { fabric.warn('fabric.Image is already defined.'); return; } @@ -743,5 +739,3 @@ }); }; /* _FROM_SVG_END_ */ - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index 8040e65f15b..ecd22bc931d 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -1,4 +1,3 @@ -(function() { /** * IText class (introduced in v1.4) Events are also fired with "text:" * prefix when observing canvas. @@ -533,4 +532,3 @@ fabric.IText.fromObject = function(object) { return fabric.Object._fromObject(fabric.IText, object, 'text'); }; -})(); diff --git a/src/shapes/line.class.js b/src/shapes/line.class.js index c64beef282e..b9f1d00960c 100644 --- a/src/shapes/line.class.js +++ b/src/shapes/line.class.js @@ -1,17 +1,8 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), extend = fabric.util.object.extend, clone = fabric.util.object.clone, coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; - if (fabric.Line) { - fabric.warn('fabric.Line is already defined'); - return; - } - /** * Line class * @class fabric.Line @@ -320,4 +311,3 @@ } -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 158465fb504..1f8b6c87865 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), extend = fabric.util.object.extend, clone = fabric.util.object.clone, toFixed = fabric.util.toFixed, @@ -11,10 +7,6 @@ objectCaching = !fabric.isLikelyNode, ALIASING_LIMIT = 2; - if (fabric.Object) { - return; - } - /** * Root object class from which all 2d shape classes inherit from * @class fabric.Object @@ -1954,4 +1946,3 @@ * @type Number */ fabric.Object.__uid = 0; -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js index bb7b7382f3b..ab301942109 100644 --- a/src/shapes/path.class.js +++ b/src/shapes/path.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), min = fabric.util.array.min, max = fabric.util.array.max, extend = fabric.util.object.extend, @@ -362,5 +358,3 @@ callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); }; /* _FROM_SVG_END_ */ - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/polygon.class.js b/src/shapes/polygon.class.js index dc127b3aa06..b47c0433ea7 100644 --- a/src/shapes/polygon.class.js +++ b/src/shapes/polygon.class.js @@ -1,15 +1,6 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = {}), + var fabric = exports.fabric || (exports.fabric = {}), projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; - if (fabric.Polygon) { - fabric.warn('fabric.Polygon is already defined'); - return; - } - /** * Polygon class * @class fabric.Polygon @@ -76,5 +67,3 @@ fabric.Polygon.fromObject = function(object) { return fabric.Object._fromObject(fabric.Polygon, object, 'points'); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/polyline.class.js b/src/shapes/polyline.class.js index fbf9301cd5b..34c629f39b7 100644 --- a/src/shapes/polyline.class.js +++ b/src/shapes/polyline.class.js @@ -1,19 +1,10 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), extend = fabric.util.object.extend, min = fabric.util.array.min, max = fabric.util.array.max, toFixed = fabric.util.toFixed, projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; - if (fabric.Polyline) { - fabric.warn('fabric.Polyline is already defined'); - return; - } - /** * Polyline class * @class fabric.Polyline @@ -265,5 +256,3 @@ fabric.Polyline.fromObject = function(object) { return fabric.Object._fromObject(fabric.Polyline, object, 'points'); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/rect.class.js b/src/shapes/rect.class.js index 567a982ca1d..acce1227719 100644 --- a/src/shapes/rect.class.js +++ b/src/shapes/rect.class.js @@ -1,13 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }); - - if (fabric.Rect) { - fabric.warn('fabric.Rect is already defined'); - return; - } + var fabric = exports.fabric || (exports.fabric = { }); /** * Rectangle class @@ -182,5 +173,3 @@ fabric.Rect.fromObject = function(object) { return fabric.Object._fromObject(fabric.Rect, object); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 2ea9cbbe867..d0a2a711345 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -1,15 +1,6 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), + var fabric = exports.fabric || (exports.fabric = { }), clone = fabric.util.object.clone; - if (fabric.Text) { - fabric.warn('fabric.Text is already defined'); - return; - } - var additionalProps = ('fontFamily fontWeight fontSize text underline overline linethrough' + ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + @@ -1736,5 +1727,3 @@ fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js index 3faff27b7b0..768c4c74707 100644 --- a/src/shapes/textbox.class.js +++ b/src/shapes/textbox.class.js @@ -1,8 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = {}); + var fabric = exports.fabric || (exports.fabric = {}); /** * Textbox class, based on IText, allows the user to resize the text rectangle @@ -474,4 +470,3 @@ fabric.Textbox.fromObject = function(object) { return fabric.Object._fromObject(fabric.Textbox, object, 'text'); }; -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/triangle.class.js b/src/shapes/triangle.class.js index db5ebc56a81..ad44d38c40b 100644 --- a/src/shapes/triangle.class.js +++ b/src/shapes/triangle.class.js @@ -1,13 +1,4 @@ -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }); - - if (fabric.Triangle) { - fabric.warn('fabric.Triangle is already defined'); - return; - } + var fabric = exports.fabric || (exports.fabric = { }); /** * Triangle class @@ -89,5 +80,3 @@ fabric.Triangle.fromObject = function(object) { return fabric.Object._fromObject(fabric.Triangle, object); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/util/anim_ease.js b/src/util/anim_ease.js index 7da9f69afd2..723a8f767f1 100644 --- a/src/util/anim_ease.js +++ b/src/util/anim_ease.js @@ -1,5 +1,3 @@ -(function() { - function normalize(a, c, p, s) { if (a < Math.abs(c)) { a = c; @@ -394,5 +392,3 @@ easeOutBounce: easeOutBounce, easeInOutBounce: easeInOutBounce }; - -})(); diff --git a/src/util/animate_color.js b/src/util/animate_color.js index 8183ca8f618..fd5b0d55104 100644 --- a/src/util/animate_color.js +++ b/src/util/animate_color.js @@ -1,4 +1,3 @@ -(function() { // Calculate an in-between color. Returns a "rgba()" string. // Credit: Edwin Martin // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js @@ -70,5 +69,3 @@ } fabric.util.animateColor = animateColor; - -})(); diff --git a/src/util/dom_misc.js b/src/util/dom_misc.js index 6a8a2f7a925..fbd0223ccbb 100644 --- a/src/util/dom_misc.js +++ b/src/util/dom_misc.js @@ -1,5 +1,3 @@ -(function() { - var _slice = Array.prototype.slice; /** @@ -296,5 +294,3 @@ fabric.util.getElementOffset = getElementOffset; fabric.util.getNodeCanvas = getNodeCanvas; fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; - -})(); diff --git a/src/util/dom_request.js b/src/util/dom_request.js index 03a82ab7d42..7685dd26854 100644 --- a/src/util/dom_request.js +++ b/src/util/dom_request.js @@ -1,5 +1,3 @@ -(function() { - function addParamToUrl(url, param) { return url + (/\?/.test(url) ? '&' : '?') + param; } @@ -52,4 +50,3 @@ } fabric.util.request = request; -})(); diff --git a/src/util/lang_array.js b/src/util/lang_array.js index 500c2fe0732..4bac1a6c5fd 100644 --- a/src/util/lang_array.js +++ b/src/util/lang_array.js @@ -1,5 +1,3 @@ -(function() { - var slice = Array.prototype.slice; /** @@ -90,5 +88,3 @@ min: min, max: max }; - -})(); diff --git a/src/util/lang_class.js b/src/util/lang_class.js index 63fd1ce220c..4984272d972 100644 --- a/src/util/lang_class.js +++ b/src/util/lang_class.js @@ -1,16 +1,5 @@ -(function() { - var slice = Array.prototype.slice, emptyFunction = function() { }, - IS_DONTENUM_BUGGY = (function() { - for (var p in { toString: 1 }) { - if (p === 'toString') { - return false; - } - } - return true; - })(), - /** @ignore */ addMethods = function(klass, source, parent) { for (var property in source) { @@ -36,15 +25,6 @@ else { klass.prototype[property] = source[property]; } - - if (IS_DONTENUM_BUGGY) { - if (source.toString !== Object.prototype.toString) { - klass.prototype.toString = source.toString; - } - if (source.valueOf !== Object.prototype.valueOf) { - klass.prototype.valueOf = source.valueOf; - } - } } }; @@ -112,4 +92,3 @@ } fabric.util.createClass = createClass; -})(); diff --git a/src/util/lang_object.js b/src/util/lang_object.js index 5b2820fd1ba..33b461d229b 100644 --- a/src/util/lang_object.js +++ b/src/util/lang_object.js @@ -1,4 +1,3 @@ -(function() { /** * Copies all enumerable properties of one js object to another * this does not and cannot compete with generic utils. @@ -72,4 +71,3 @@ clone: clone }; fabric.util.object.extend(fabric.util, fabric.Observable); -})(); diff --git a/src/util/lang_string.js b/src/util/lang_string.js index e2f4646f02e..36b353d032d 100644 --- a/src/util/lang_string.js +++ b/src/util/lang_string.js @@ -1,5 +1,3 @@ -(function() { - /** * Camelizes a string * @memberOf fabric.util.string @@ -107,4 +105,3 @@ escapeXml: escapeXml, graphemeSplit: graphemeSplit }; -})(); diff --git a/src/util/misc.js b/src/util/misc.js index 3bcf6f79ca0..9abac021764 100644 --- a/src/util/misc.js +++ b/src/util/misc.js @@ -1,6 +1,5 @@ -(function(global) { - - var sqrt = Math.sqrt, + var fabric = exports.fabric || (exports.fabric = { }), + sqrt = Math.sqrt, atan2 = Math.atan2, pow = Math.pow, PiBy180 = Math.PI / 180, @@ -1199,4 +1198,3 @@ return new fabric.Group([a], { clipPath: b, inverted: inverted }); }, }; -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/util/named_accessors.mixin.js b/src/util/named_accessors.mixin.js index 3df223213a6..092de5d118d 100644 --- a/src/util/named_accessors.mixin.js +++ b/src/util/named_accessors.mixin.js @@ -1,5 +1,3 @@ -(function() { - /** * Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array * @static @@ -424,5 +422,3 @@ * @return {fabric.Object} thisArg * @chainable */ - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/util/path.js b/src/util/path.js index 2bd9680aaa0..cddd0ff85ef 100644 --- a/src/util/path.js +++ b/src/util/path.js @@ -1,4 +1,3 @@ -(function() { var _join = Array.prototype.join, commandLengths = { m: 2, @@ -851,4 +850,3 @@ fabric.util.getPointOnPath = getPointOnPath; fabric.util.transformPath = transformPath; fabric.util.getRegularPolygonPath = getRegularPolygonPath; -})(); From 83575024ab8b1cdc258d2938f46f969b0b96e1fc Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 18 Jun 2022 16:54:48 +0200 Subject: [PATCH 02/21] removed extra console warn --- src/color.class.js | 5 ----- src/intersection.class.js | 5 ----- src/point.class.js | 5 ----- src/shapes/ellipse.class.js | 5 ----- src/shapes/group.class.js | 11 ----------- src/shapes/image.class.js | 5 ----- src/shapes/path.class.js | 5 ----- src/static_canvas.class.js | 5 ----- 8 files changed, 46 deletions(-) diff --git a/src/color.class.js b/src/color.class.js index c8858423175..a26c9769bfb 100644 --- a/src/color.class.js +++ b/src/color.class.js @@ -1,10 +1,5 @@ var fabric = exports.fabric || (exports.fabric = { }); -if (fabric.Color) { - fabric.warn('fabric.Color is already defined.'); - return; -} - /** * Color class * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; diff --git a/src/intersection.class.js b/src/intersection.class.js index 26e2cc0753d..7db97dddf74 100644 --- a/src/intersection.class.js +++ b/src/intersection.class.js @@ -1,11 +1,6 @@ /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ var fabric = exports.fabric || (exports.fabric = { }); - if (fabric.Intersection) { - fabric.warn('fabric.Intersection is already defined'); - return; - } - /** * Intersection class * @class fabric.Intersection diff --git a/src/point.class.js b/src/point.class.js index 7f691b8d9df..f9cad4ee6a3 100644 --- a/src/point.class.js +++ b/src/point.class.js @@ -2,11 +2,6 @@ var fabric = exports.fabric || (exports.fabric = { }); - if (fabric.Point) { - fabric.warn('fabric.Point is already defined'); - return; - } - fabric.Point = Point; /** diff --git a/src/shapes/ellipse.class.js b/src/shapes/ellipse.class.js index 1cec9a4a65d..6c905097eef 100644 --- a/src/shapes/ellipse.class.js +++ b/src/shapes/ellipse.class.js @@ -1,11 +1,6 @@ var fabric = exports.fabric || (exports.fabric = { }), piBy2 = Math.PI * 2; - if (fabric.Ellipse) { - fabric.warn('fabric.Ellipse is already defined.'); - return; - } - /** * Ellipse class * @class fabric.Ellipse diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index 04deb8fe2b5..267da49b8ac 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -1,7 +1,3 @@ -(function (global) { - - 'use strict'; - var fabric = exports.fabric || (exports.fabric = {}), multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, invertTransform = fabric.util.invertTransform, @@ -10,11 +6,6 @@ degreesToRadians = fabric.util.degreesToRadians, clone = fabric.util.object.clone; - if (fabric.Group) { - fabric.warn('fabric.Group is already defined'); - return; - } - /** * Group class * @class fabric.Group @@ -960,5 +951,3 @@ return new fabric.Group(enlivened[0], Object.assign(options, enlivened[1]), true); }); }; - -})(typeof exports !== 'undefined' ? exports : this); diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js index 18fb2bc7bff..ff4374a6419 100644 --- a/src/shapes/image.class.js +++ b/src/shapes/image.class.js @@ -4,11 +4,6 @@ exports.fabric = { }; } - if (exports.fabric.Image) { - fabric.warn('fabric.Image is already defined.'); - return; - } - /** * Image class * @class fabric.Image diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js index ab301942109..aaa76cec68c 100644 --- a/src/shapes/path.class.js +++ b/src/shapes/path.class.js @@ -5,11 +5,6 @@ clone = fabric.util.object.clone, toFixed = fabric.util.toFixed; - if (fabric.Path) { - fabric.warn('fabric.Path is already defined'); - return; - } - /** * Path class * @class fabric.Path diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index 82154c11730..94c297b9630 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -2,11 +2,6 @@ 'use strict'; - if (fabric.StaticCanvas) { - fabric.warn('fabric.StaticCanvas is already defined.'); - return; - } - // aliases for faster resolution var extend = fabric.util.object.extend, getElementOffset = fabric.util.getElementOffset, From 70f9f5d518d682060e43bed2c9f5f2a4e692003c Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 18 Jun 2022 16:56:34 +0200 Subject: [PATCH 03/21] fixed whitespace with lint --- package.json | 1 + src/canvas.class.js | 1518 +++++++-------- src/controls.actions.js | 996 +++++----- src/filters/convolute_filter.class.js | 214 +-- src/filters/grayscale_filter.class.js | 126 +- src/filters/hue_rotation.class.js | 86 +- src/filters/invert_filter.class.js | 90 +- src/filters/noise_filter.class.js | 100 +- src/filters/pixelate_filter.class.js | 112 +- src/filters/removecolor_filter.class.js | 156 +- src/filters/resize_filter.class.js | 656 +++---- src/filters/saturate_filter.class.js | 80 +- src/filters/vibrance_filter.class.js | 84 +- src/filters/webgl_backend.class.js | 468 ++--- src/gradient.class.js | 630 +++---- src/intersection.class.js | 196 +- src/mixins/canvas_events.mixin.js | 1410 +++++++------- src/mixins/canvas_gestures.mixin.js | 172 +- src/mixins/canvas_grouping.mixin.js | 260 +-- src/mixins/default_controls.js | 196 +- src/mixins/itext.svg_export.js | 400 ++-- src/mixins/itext_behavior.mixin.js | 1404 +++++++------- src/mixins/object.svg_export.js | 392 ++-- src/mixins/object_ancestry.mixin.js | 6 +- src/mixins/object_geometry.mixin.js | 988 +++++----- src/mixins/object_interactivity.mixin.js | 360 ++-- src/mixins/object_origin.mixin.js | 332 ++-- src/mixins/observable.mixin.js | 178 +- src/mixins/stateful.mixin.js | 144 +- src/mixins/text_style.mixin.js | 396 ++-- src/parser.js | 1586 ++++++++-------- src/pattern.class.js | 210 +-- src/point.class.js | 334 ++-- src/shadow.class.js | 188 +- src/shapes/active_selection.class.js | 210 +-- src/shapes/circle.class.js | 220 +-- src/shapes/ellipse.class.js | 178 +- src/shapes/group.class.js | 1292 ++++++------- src/shapes/image.class.js | 926 +++++----- src/shapes/itext.class.js | 578 +++--- src/shapes/line.class.js | 386 ++-- src/shapes/object.class.js | 2058 ++++++++++----------- src/shapes/path.class.js | 512 +++--- src/shapes/polygon.class.js | 58 +- src/shapes/polyline.class.js | 294 +-- src/shapes/rect.class.js | 194 +- src/shapes/text.class.js | 2148 +++++++++++----------- src/shapes/textbox.class.js | 564 +++--- src/shapes/triangle.class.js | 84 +- src/util/anim_ease.js | 500 ++--- src/util/animate.js | 6 +- src/util/animate_color.js | 94 +- src/util/dom_misc.js | 392 ++-- src/util/dom_request.js | 66 +- src/util/lang_array.js | 104 +- src/util/lang_class.js | 136 +- src/util/lang_object.js | 86 +- src/util/lang_string.js | 132 +- src/util/misc.js | 1314 ++++++------- src/util/named_accessors.mixin.js | 148 +- src/util/path.js | 1410 +++++++------- 61 files changed, 14280 insertions(+), 14279 deletions(-) diff --git a/package.json b/package.json index 587e01acdbe..21f508cbf13 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual", "coverage:report": "nyc report --reporter=lcov --reporter=text", "lint": "eslint --config .eslintrc.json src", + "lint-fix": "eslint --fix --config .eslintrc.json src", "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests", "all": "npm run build && npm run test -- --all && npm run lint && npm run lint_tests && npm run export", "testem": "testem .", diff --git a/src/canvas.class.js b/src/canvas.class.js index 487da2870a4..40f3b86e556 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -1,8 +1,8 @@ - var getPointer = fabric.util.getPointer, - degreesToRadians = fabric.util.degreesToRadians, - isTouchEvent = fabric.util.isTouchEvent; +var getPointer = fabric.util.getPointer, + degreesToRadians = fabric.util.degreesToRadians, + isTouchEvent = fabric.util.isTouchEvent; - /** +/** * Canvas class * @class fabric.Canvas * @extends fabric.StaticCanvas @@ -63,33 +63,33 @@ * }); * */ - fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { +fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { - /** + /** * Constructor * @param {HTMLElement | String} el <canvas> element to initialize instance on * @param {Object} [options] Options object * @return {Object} thisArg */ - initialize: function(el, options) { - options || (options = { }); - this.renderAndResetBound = this.renderAndReset.bind(this); - this.requestRenderAllBound = this.requestRenderAll.bind(this); - this._initStatic(el, options); - this._initInteractive(); - this._createCacheCanvas(); - }, + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + this._initInteractive(); + this._createCacheCanvas(); + }, - /** + /** * When true, objects can be transformed by one side (unproportionally) * when dragged on the corners that normally would not do that. * @type Boolean * @default * @since fabric 4.0 // changed name and default value */ - uniformScaling: true, + uniformScaling: true, - /** + /** * Indicates which key switches uniform scaling. * values: 'altKey', 'shiftKey', 'ctrlKey'. * If `null` or 'none' or any other string that is not a modifier key @@ -101,27 +101,27 @@ * @type String * @default */ - uniScaleKey: 'shiftKey', + uniScaleKey: 'shiftKey', - /** + /** * When true, objects use center point as the origin of scale transformation. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). * @since 1.3.4 * @type Boolean * @default */ - centeredScaling: false, + centeredScaling: false, - /** + /** * When true, objects use center point as the origin of rotate transformation. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). * @since 1.3.4 * @type Boolean * @default */ - centeredRotation: false, + centeredRotation: false, - /** + /** * Indicates which key enable centered Transform * values: 'altKey', 'shiftKey', 'ctrlKey'. * If `null` or 'none' or any other string that is not a modifier key @@ -130,9 +130,9 @@ * @type String * @default */ - centeredKey: 'altKey', + centeredKey: 'altKey', - /** + /** * Indicates which key enable alternate action on corner * values: 'altKey', 'shiftKey', 'ctrlKey'. * If `null` or 'none' or any other string that is not a modifier key @@ -141,23 +141,23 @@ * @type String * @default */ - altActionKey: 'shiftKey', + altActionKey: 'shiftKey', - /** + /** * Indicates that canvas is interactive. This property should not be changed. * @type Boolean * @default */ - interactive: true, + interactive: true, - /** + /** * Indicates whether group selection should be enabled * @type Boolean * @default */ - selection: true, + selection: true, - /** + /** * Indicates which key or keys enable multiple click selection * Pass value as a string or array of strings * values: 'altKey', 'shiftKey', 'ctrlKey'. @@ -167,9 +167,9 @@ * @type String|Array * @default */ - selectionKey: 'shiftKey', + selectionKey: 'shiftKey', - /** + /** * Indicates which key enable alternative selection * in case of target overlapping with active object * values: 'altKey', 'shiftKey', 'ctrlKey'. @@ -181,101 +181,101 @@ * @type null|String * @default */ - altSelectionKey: null, + altSelectionKey: null, - /** + /** * Color of selection * @type String * @default */ - selectionColor: 'rgba(100, 100, 255, 0.3)', // blue + selectionColor: 'rgba(100, 100, 255, 0.3)', // blue - /** + /** * Default dash array pattern * If not empty the selection border is dashed * @type Array */ - selectionDashArray: [], + selectionDashArray: [], - /** + /** * Color of the border of selection (usually slightly darker than color of selection itself) * @type String * @default */ - selectionBorderColor: 'rgba(255, 255, 255, 0.3)', + selectionBorderColor: 'rgba(255, 255, 255, 0.3)', - /** + /** * Width of a line used in object/group selection * @type Number * @default */ - selectionLineWidth: 1, + selectionLineWidth: 1, - /** + /** * Select only shapes that are fully contained in the dragged selection rectangle. * @type Boolean * @default */ - selectionFullyContained: false, + selectionFullyContained: false, - /** + /** * Default cursor value used when hovering over an object on canvas * @type String * @default */ - hoverCursor: 'move', + hoverCursor: 'move', - /** + /** * Default cursor value used when moving an object on canvas * @type String * @default */ - moveCursor: 'move', + moveCursor: 'move', - /** + /** * Default cursor value used for the entire canvas * @type String * @default */ - defaultCursor: 'default', + defaultCursor: 'default', - /** + /** * Cursor value used during free drawing * @type String * @default */ - freeDrawingCursor: 'crosshair', + freeDrawingCursor: 'crosshair', - /** + /** * Cursor value used for disabled elements ( corners with disabled action ) * @type String * @since 2.0.0 * @default */ - notAllowedCursor: 'not-allowed', + notAllowedCursor: 'not-allowed', - /** + /** * Default element class that's given to wrapper (div) element of canvas * @type String * @default */ - containerClass: 'canvas-container', + containerClass: 'canvas-container', - /** + /** * When true, object detection happens on per-pixel basis rather than on per-bounding-box * @type Boolean * @default */ - perPixelTargetFind: false, + perPixelTargetFind: false, - /** + /** * Number of pixels around target pixel to tolerate (consider active) during object detection * @type Number * @default */ - targetFindTolerance: 0, + targetFindTolerance: 0, - /** + /** * When true, target detection is skipped. Target detection will return always undefined. * click selection won't work anymore, events will fire with no targets. * if something is selected before setting it to true, it will be deselected at the first click. @@ -284,9 +284,9 @@ * @type Boolean * @default */ - skipTargetFind: false, + skipTargetFind: false, - /** + /** * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. * After mousedown, mousemove creates a shape, * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. @@ -294,306 +294,306 @@ * @type Boolean * @default */ - isDrawingMode: false, + isDrawingMode: false, - /** + /** * Indicates whether objects should remain in current stack position when selected. * When false objects are brought to top and rendered as part of the selection group * @type Boolean * @default */ - preserveObjectStacking: false, + preserveObjectStacking: false, - /** + /** * Indicates the angle that an object will lock to while rotating. * @type Number * @since 1.6.7 * @default */ - snapAngle: 0, + snapAngle: 0, - /** + /** * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. * When `null`, the snapThreshold will default to the snapAngle. * @type null|Number * @since 1.6.7 * @default */ - snapThreshold: null, + snapThreshold: null, - /** + /** * Indicates if the right click on canvas can output the context menu or not * @type Boolean * @since 1.6.5 * @default */ - stopContextMenu: false, + stopContextMenu: false, - /** + /** * Indicates if the canvas can fire right click events * @type Boolean * @since 1.6.5 * @default */ - fireRightClick: false, + fireRightClick: false, - /** + /** * Indicates if the canvas can fire middle click events * @type Boolean * @since 1.7.8 * @default */ - fireMiddleClick: false, + fireMiddleClick: false, - /** + /** * Keep track of the subTargets for Mouse Events * @type fabric.Object[] */ - targets: [], + targets: [], - /** + /** * When the option is enabled, PointerEvent is used instead of MouseEvent. * @type Boolean * @default */ - enablePointerEvents: false, + enablePointerEvents: false, - /** + /** * Keep track of the hovered target * @type fabric.Object * @private */ - _hoveredTarget: null, + _hoveredTarget: null, - /** + /** * hold the list of nested targets hovered * @type fabric.Object[] * @private */ - _hoveredTargets: [], + _hoveredTargets: [], - /** + /** * hold the list of objects to render * @type fabric.Object[] * @private */ - _objectsToRender: undefined, + _objectsToRender: undefined, - /** + /** * @private */ - _initInteractive: function() { - this._currentTransform = null; - this._groupSelector = null; - this._initWrapperElement(); - this._createUpperCanvas(); - this._initEventListeners(); + _initInteractive: function() { + this._currentTransform = null; + this._groupSelector = null; + this._initWrapperElement(); + this._createUpperCanvas(); + this._initEventListeners(); - this._initRetinaScaling(); + this._initRetinaScaling(); - this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); + this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); - this.calcOffset(); - }, + this.calcOffset(); + }, - /** + /** * @private * @param {fabric.Object} obj Object that was added */ - _onObjectAdded: function (obj) { - this._objectsToRender = undefined; - this.callSuper('_onObjectAdded', obj); - }, + _onObjectAdded: function (obj) { + this._objectsToRender = undefined; + this.callSuper('_onObjectAdded', obj); + }, - /** + /** * @private * @param {fabric.Object} obj Object that was removed */ - _onObjectRemoved: function (obj) { - this._objectsToRender = undefined; - // removing active object should fire "selection:cleared" events - if (obj === this._activeObject) { - this.fire('before:selection:cleared', { target: obj }); - this._discardActiveObject(); - this.fire('selection:cleared', { target: obj }); - obj.fire('deselected'); - } - if (obj === this._hoveredTarget) { - this._hoveredTarget = null; - this._hoveredTargets = []; - } - this.callSuper('_onObjectRemoved', obj); - }, + _onObjectRemoved: function (obj) { + this._objectsToRender = undefined; + // removing active object should fire "selection:cleared" events + if (obj === this._activeObject) { + this.fire('before:selection:cleared', { target: obj }); + this._discardActiveObject(); + this.fire('selection:cleared', { target: obj }); + obj.fire('deselected'); + } + if (obj === this._hoveredTarget) { + this._hoveredTarget = null; + this._hoveredTargets = []; + } + this.callSuper('_onObjectRemoved', obj); + }, - /** + /** * Divides objects in two groups, one to render immediately * and one to render as activeGroup. * @return {Array} objects to render immediately and pushes the other in the activeGroup. */ - _chooseObjectsToRender: function() { - var activeObjects = this.getActiveObjects(), - object, objsToRender, activeGroupObjects; - - if (!this.preserveObjectStacking && activeObjects.length > 1) { - objsToRender = []; - activeGroupObjects = []; - for (var i = 0, length = this._objects.length; i < length; i++) { - object = this._objects[i]; - if (activeObjects.indexOf(object) === -1 ) { - objsToRender.push(object); - } - else { - activeGroupObjects.push(object); - } + _chooseObjectsToRender: function() { + var activeObjects = this.getActiveObjects(), + object, objsToRender, activeGroupObjects; + + if (!this.preserveObjectStacking && activeObjects.length > 1) { + objsToRender = []; + activeGroupObjects = []; + for (var i = 0, length = this._objects.length; i < length; i++) { + object = this._objects[i]; + if (activeObjects.indexOf(object) === -1 ) { + objsToRender.push(object); } - if (activeObjects.length > 1) { - this._activeObject._objects = activeGroupObjects; + else { + activeGroupObjects.push(object); } - objsToRender.push.apply(objsToRender, activeGroupObjects); } - // in case a single object is selected render it's entire parent above the other objects - else if (!this.preserveObjectStacking && activeObjects.length === 1) { - var target = activeObjects[0], ancestors = target.getAncestors(true); - var topAncestor = ancestors.length === 0 ? target : ancestors.pop(); - objsToRender = this._objects.slice(); - var index = objsToRender.indexOf(topAncestor); - index > -1 && objsToRender.splice(objsToRender.indexOf(topAncestor), 1); - objsToRender.push(topAncestor); - } - else { - objsToRender = this._objects; + if (activeObjects.length > 1) { + this._activeObject._objects = activeGroupObjects; } - return objsToRender; - }, + objsToRender.push.apply(objsToRender, activeGroupObjects); + } + // in case a single object is selected render it's entire parent above the other objects + else if (!this.preserveObjectStacking && activeObjects.length === 1) { + var target = activeObjects[0], ancestors = target.getAncestors(true); + var topAncestor = ancestors.length === 0 ? target : ancestors.pop(); + objsToRender = this._objects.slice(); + var index = objsToRender.indexOf(topAncestor); + index > -1 && objsToRender.splice(objsToRender.indexOf(topAncestor), 1); + objsToRender.push(topAncestor); + } + else { + objsToRender = this._objects; + } + return objsToRender; + }, - /** + /** * Renders both the top canvas and the secondary container canvas. * @return {fabric.Canvas} instance * @chainable */ - renderAll: function () { - if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { - this.clearContext(this.contextTop); - this.contextTopDirty = false; - } - if (this.hasLostContext) { - this.renderTopLayer(this.contextTop); - this.hasLostContext = false; - } - var canvasToDrawOn = this.contextContainer; - !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender()); - this.renderCanvas(canvasToDrawOn, this._objectsToRender); - return this; - }, - - renderTopLayer: function(ctx) { - ctx.save(); - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this.freeDrawingBrush && this.freeDrawingBrush._render(); - this.contextTopDirty = true; - } - // we render the top context - last object - if (this.selection && this._groupSelector) { - this._drawSelection(ctx); - this.contextTopDirty = true; - } - ctx.restore(); - }, + renderAll: function () { + if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { + this.clearContext(this.contextTop); + this.contextTopDirty = false; + } + if (this.hasLostContext) { + this.renderTopLayer(this.contextTop); + this.hasLostContext = false; + } + var canvasToDrawOn = this.contextContainer; + !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender()); + this.renderCanvas(canvasToDrawOn, this._objectsToRender); + return this; + }, + + renderTopLayer: function(ctx) { + ctx.save(); + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._render(); + this.contextTopDirty = true; + } + // we render the top context - last object + if (this.selection && this._groupSelector) { + this._drawSelection(ctx); + this.contextTopDirty = true; + } + ctx.restore(); + }, - /** + /** * Method to render only the top canvas. * Also used to render the group selection box. * @return {fabric.Canvas} thisArg * @chainable */ - renderTop: function () { - var ctx = this.contextTop; - this.clearContext(ctx); - this.renderTopLayer(ctx); - this.fire('after:render'); - return this; - }, + renderTop: function () { + var ctx = this.contextTop; + this.clearContext(ctx); + this.renderTopLayer(ctx); + this.fire('after:render'); + return this; + }, - /** + /** * @private */ - _normalizePointer: function (object, pointer) { - var m = object.calcTransformMatrix(), - invertedM = fabric.util.invertTransform(m), - vptPointer = this.restorePointerVpt(pointer); - return fabric.util.transformPoint(vptPointer, invertedM); - }, + _normalizePointer: function (object, pointer) { + var m = object.calcTransformMatrix(), + invertedM = fabric.util.invertTransform(m), + vptPointer = this.restorePointerVpt(pointer); + return fabric.util.transformPoint(vptPointer, invertedM); + }, - /** + /** * Returns true if object is transparent at a certain location * @param {fabric.Object} target Object to check * @param {Number} x Left coordinate * @param {Number} y Top coordinate * @return {Boolean} */ - isTargetTransparent: function (target, x, y) { - // in case the target is the activeObject, we cannot execute this optimization - // because we need to draw controls too. - if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { - var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), - targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), - targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); + isTargetTransparent: function (target, x, y) { + // in case the target is the activeObject, we cannot execute this optimization + // because we need to draw controls too. + if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { + var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), + targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), + targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); - var isTransparent = fabric.util.isTransparent( - target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); + var isTransparent = fabric.util.isTransparent( + target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); - return isTransparent; - } + return isTransparent; + } - var ctx = this.contextCache, - originalColor = target.selectionBackgroundColor, v = this.viewportTransform; + var ctx = this.contextCache, + originalColor = target.selectionBackgroundColor, v = this.viewportTransform; - target.selectionBackgroundColor = ''; + target.selectionBackgroundColor = ''; - this.clearContext(ctx); + this.clearContext(ctx); - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - target.render(ctx); - ctx.restore(); + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + target.render(ctx); + ctx.restore(); - target.selectionBackgroundColor = originalColor; + target.selectionBackgroundColor = originalColor; - var isTransparent = fabric.util.isTransparent( - ctx, x, y, this.targetFindTolerance); + var isTransparent = fabric.util.isTransparent( + ctx, x, y, this.targetFindTolerance); - return isTransparent; - }, + return isTransparent; + }, - /** + /** * takes an event and determines if selection key has been pressed * @private * @param {Event} e Event object */ - _isSelectionKeyPressed: function(e) { - var selectionKeyPressed = false; + _isSelectionKeyPressed: function(e) { + var selectionKeyPressed = false; - if (Array.isArray(this.selectionKey)) { - selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); - } - else { - selectionKeyPressed = e[this.selectionKey]; - } + if (Array.isArray(this.selectionKey)) { + selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); + } + else { + selectionKeyPressed = e[this.selectionKey]; + } - return selectionKeyPressed; - }, + return selectionKeyPressed; + }, - /** + /** * @private * @param {Event} e Event object * @param {fabric.Object} target */ - _shouldClearSelection: function (e, target) { - var activeObjects = this.getActiveObjects(), - activeObject = this._activeObject; + _shouldClearSelection: function (e, target) { + var activeObjects = this.getActiveObjects(), + activeObject = this._activeObject; - return ( - !target + return ( + !target || (target && activeObject && @@ -608,10 +608,10 @@ !target.selectable && activeObject && activeObject !== target) - ); - }, + ); + }, - /** + /** * centeredScaling from object can't override centeredScaling from canvas. * this should be fixed, since object setting should take precedence over canvas. * also this should be something that will be migrated in the control properties. @@ -621,169 +621,169 @@ * @param {String} action * @param {Boolean} altKey */ - _shouldCenterTransform: function (target, action, altKey) { - if (!target) { - return; - } + _shouldCenterTransform: function (target, action, altKey) { + if (!target) { + return; + } - var centerTransform; + var centerTransform; - if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { - centerTransform = this.centeredScaling || target.centeredScaling; - } - else if (action === 'rotate') { - centerTransform = this.centeredRotation || target.centeredRotation; - } + if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { + centerTransform = this.centeredScaling || target.centeredScaling; + } + else if (action === 'rotate') { + centerTransform = this.centeredRotation || target.centeredRotation; + } - return centerTransform ? !altKey : altKey; - }, + return centerTransform ? !altKey : altKey; + }, - /** + /** * should disappear before release 4.0 * @private */ - _getOriginFromCorner: function(target, corner) { - var origin = { - x: target.originX, - y: target.originY - }; + _getOriginFromCorner: function(target, corner) { + var origin = { + x: target.originX, + y: target.originY + }; - if (corner === 'ml' || corner === 'tl' || corner === 'bl') { - origin.x = 'right'; - } - else if (corner === 'mr' || corner === 'tr' || corner === 'br') { - origin.x = 'left'; - } + if (corner === 'ml' || corner === 'tl' || corner === 'bl') { + origin.x = 'right'; + } + else if (corner === 'mr' || corner === 'tr' || corner === 'br') { + origin.x = 'left'; + } - if (corner === 'tl' || corner === 'mt' || corner === 'tr') { - origin.y = 'bottom'; - } - else if (corner === 'bl' || corner === 'mb' || corner === 'br') { - origin.y = 'top'; - } - return origin; - }, + if (corner === 'tl' || corner === 'mt' || corner === 'tr') { + origin.y = 'bottom'; + } + else if (corner === 'bl' || corner === 'mb' || corner === 'br') { + origin.y = 'top'; + } + return origin; + }, - /** + /** * @private * @param {Boolean} alreadySelected true if target is already selected * @param {String} corner a string representing the corner ml, mr, tl ... * @param {Event} e Event object * @param {fabric.Object} [target] inserted back to help overriding. Unused */ - _getActionFromCorner: function(alreadySelected, corner, e, target) { - if (!corner || !alreadySelected) { - return 'drag'; - } - var control = target.controls[corner]; - return control.getActionName(e, control, target); - }, + _getActionFromCorner: function(alreadySelected, corner, e, target) { + if (!corner || !alreadySelected) { + return 'drag'; + } + var control = target.controls[corner]; + return control.getActionName(e, control, target); + }, - /** + /** * @private * @param {Event} e Event object * @param {fabric.Object} target */ - _setupCurrentTransform: function (e, target, alreadySelected) { - if (!target) { - return; - } - var pointer = this.getPointer(e); - if (target.group) { - // transform pointer to target's containing coordinate plane - pointer = fabric.util.transformPoint(pointer, fabric.util.invertTransform(target.group.calcTransformMatrix())); - } - var corner = target.__corner, - control = target.controls[corner], - actionHandler = (alreadySelected && corner) ? - control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, - action = this._getActionFromCorner(alreadySelected, corner, e, target), - origin = this._getOriginFromCorner(target, corner), - altKey = e[this.centeredKey], - /** + _setupCurrentTransform: function (e, target, alreadySelected) { + if (!target) { + return; + } + var pointer = this.getPointer(e); + if (target.group) { + // transform pointer to target's containing coordinate plane + pointer = fabric.util.transformPoint(pointer, fabric.util.invertTransform(target.group.calcTransformMatrix())); + } + var corner = target.__corner, + control = target.controls[corner], + actionHandler = (alreadySelected && corner) ? + control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, + action = this._getActionFromCorner(alreadySelected, corner, e, target), + origin = this._getOriginFromCorner(target, corner), + altKey = e[this.centeredKey], + /** * relative to target's containing coordinate plane * both agree on every point **/ - transform = { - target: target, - action: action, - actionHandler: actionHandler, - corner: corner, - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - offsetX: pointer.x - target.left, - offsetY: pointer.y - target.top, - originX: origin.x, - originY: origin.y, - ex: pointer.x, - ey: pointer.y, - lastX: pointer.x, - lastY: pointer.y, - theta: degreesToRadians(target.angle), - width: target.width * target.scaleX, - shiftKey: e.shiftKey, - altKey: altKey, - original: fabric.util.saveObjectTransform(target), - }; - - if (this._shouldCenterTransform(target, action, altKey)) { - transform.originX = 'center'; - transform.originY = 'center'; - } - transform.original.originX = origin.x; - transform.original.originY = origin.y; - this._currentTransform = transform; - this._beforeTransform(e); - }, + transform = { + target: target, + action: action, + actionHandler: actionHandler, + corner: corner, + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + offsetX: pointer.x - target.left, + offsetY: pointer.y - target.top, + originX: origin.x, + originY: origin.y, + ex: pointer.x, + ey: pointer.y, + lastX: pointer.x, + lastY: pointer.y, + theta: degreesToRadians(target.angle), + width: target.width * target.scaleX, + shiftKey: e.shiftKey, + altKey: altKey, + original: fabric.util.saveObjectTransform(target), + }; - /** + if (this._shouldCenterTransform(target, action, altKey)) { + transform.originX = 'center'; + transform.originY = 'center'; + } + transform.original.originX = origin.x; + transform.original.originY = origin.y; + this._currentTransform = transform; + this._beforeTransform(e); + }, + + /** * Set the cursor type of the canvas element * @param {String} value Cursor type of the canvas element. * @see http://www.w3.org/TR/css3-ui/#cursor */ - setCursor: function (value) { - this.upperCanvasEl.style.cursor = value; - }, + setCursor: function (value) { + this.upperCanvasEl.style.cursor = value; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx to draw the selection on */ - _drawSelection: function (ctx) { - var selector = this._groupSelector, - viewportStart = new fabric.Point(selector.ex, selector.ey), - start = fabric.util.transformPoint(viewportStart, this.viewportTransform), - viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), - extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), - minX = Math.min(start.x, extent.x), - minY = Math.min(start.y, extent.y), - maxX = Math.max(start.x, extent.x), - maxY = Math.max(start.y, extent.y), - strokeOffset = this.selectionLineWidth / 2; - - if (this.selectionColor) { - ctx.fillStyle = this.selectionColor; - ctx.fillRect(minX, minY, maxX - minX, maxY - minY); - } + _drawSelection: function (ctx) { + var selector = this._groupSelector, + viewportStart = new fabric.Point(selector.ex, selector.ey), + start = fabric.util.transformPoint(viewportStart, this.viewportTransform), + viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), + extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), + minX = Math.min(start.x, extent.x), + minY = Math.min(start.y, extent.y), + maxX = Math.max(start.x, extent.x), + maxY = Math.max(start.y, extent.y), + strokeOffset = this.selectionLineWidth / 2; + + if (this.selectionColor) { + ctx.fillStyle = this.selectionColor; + ctx.fillRect(minX, minY, maxX - minX, maxY - minY); + } - if (!this.selectionLineWidth || !this.selectionBorderColor) { - return; - } - ctx.lineWidth = this.selectionLineWidth; - ctx.strokeStyle = this.selectionBorderColor; - - minX += strokeOffset; - minY += strokeOffset; - maxX -= strokeOffset; - maxY -= strokeOffset; - // selection border - fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); - ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); - }, - - /** + if (!this.selectionLineWidth || !this.selectionBorderColor) { + return; + } + ctx.lineWidth = this.selectionLineWidth; + ctx.strokeStyle = this.selectionBorderColor; + + minX += strokeOffset; + minY += strokeOffset; + maxX -= strokeOffset; + maxY -= strokeOffset; + // selection border + fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); + ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); + }, + + /** * Method that determines what object we are clicking on * the skipGroup parameter is for internal use, is needed for shift+click action * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target @@ -792,52 +792,52 @@ * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through * @return {fabric.Object} the target found */ - findTarget: function (e, skipGroup) { - if (this.skipTargetFind) { - return; - } + findTarget: function (e, skipGroup) { + if (this.skipTargetFind) { + return; + } - var ignoreZoom = true, - pointer = this.getPointer(e, ignoreZoom), - activeObject = this._activeObject, - aObjects = this.getActiveObjects(), - activeTarget, activeTargetSubs, - isTouch = isTouchEvent(e), - shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; - - // first check current group (if one exists) - // active group does not check sub targets like normal groups. - // if active group just exits. - this.targets = []; - - // if we hit the corner of an activeObject, let's return that. - if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { - return activeObject; - } - if (aObjects.length > 1 && activeObject.type === 'activeSelection' + var ignoreZoom = true, + pointer = this.getPointer(e, ignoreZoom), + activeObject = this._activeObject, + aObjects = this.getActiveObjects(), + activeTarget, activeTargetSubs, + isTouch = isTouchEvent(e), + shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; + + // first check current group (if one exists) + // active group does not check sub targets like normal groups. + // if active group just exits. + this.targets = []; + + // if we hit the corner of an activeObject, let's return that. + if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { + return activeObject; + } + if (aObjects.length > 1 && activeObject.type === 'activeSelection' && !skipGroup && this.searchPossibleTargets([activeObject], pointer)) { - return activeObject; - } - if (aObjects.length === 1 && + return activeObject; + } + if (aObjects.length === 1 && activeObject === this.searchPossibleTargets([activeObject], pointer)) { - if (!this.preserveObjectStacking) { - return activeObject; - } - else { - activeTarget = activeObject; - activeTargetSubs = this.targets; - this.targets = []; - } + if (!this.preserveObjectStacking) { + return activeObject; } - var target = this.searchPossibleTargets(this._objects, pointer); - if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { - target = activeTarget; - this.targets = activeTargetSubs; + else { + activeTarget = activeObject; + activeTargetSubs = this.targets; + this.targets = []; } - return target; - }, + } + var target = this.searchPossibleTargets(this._objects, pointer); + if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { + target = activeTarget; + this.targets = activeTargetSubs; + } + return target; + }, - /** + /** * Checks point is inside the object. * @param {Object} [pointer] x,y object of point coordinates we want to check. * @param {fabric.Object} obj Object to test against @@ -845,79 +845,79 @@ * @return {Boolean} true if point is contained within an area of given object * @private */ - _checkTarget: function(pointer, obj, globalPointer) { - if (obj && + _checkTarget: function(pointer, obj, globalPointer) { + if (obj && obj.visible && obj.evented && // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html obj.containsPoint(pointer) - ) { - if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { - var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); - if (!isTransparent) { - return true; - } - } - else { + ) { + if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { + var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); + if (!isTransparent) { return true; } } - }, + else { + return true; + } + } + }, - /** + /** * Internal Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted * @param {Array} [objects] objects array to look into * @param {Object} [pointer] x,y object of point coordinates we want to check. * @return {fabric.Object} **top most object from given `objects`** that contains pointer * @private */ - _searchPossibleTargets: function(objects, pointer) { - // Cache all targets where their bounding box contains point. - var target, i = objects.length, subTarget; - // Do not check for currently grouped objects, since we check the parent group itself. - // until we call this function specifically to search inside the activeGroup - while (i--) { - var objToCheck = objects[i]; - var pointerToUse = objToCheck.group ? - this._normalizePointer(objToCheck.group, pointer) : pointer; - if (this._checkTarget(pointerToUse, objToCheck, pointer)) { - target = objects[i]; - if (target.subTargetCheck && Array.isArray(target._objects)) { - subTarget = this._searchPossibleTargets(target._objects, pointer); - subTarget && this.targets.push(subTarget); - } - break; + _searchPossibleTargets: function(objects, pointer) { + // Cache all targets where their bounding box contains point. + var target, i = objects.length, subTarget; + // Do not check for currently grouped objects, since we check the parent group itself. + // until we call this function specifically to search inside the activeGroup + while (i--) { + var objToCheck = objects[i]; + var pointerToUse = objToCheck.group ? + this._normalizePointer(objToCheck.group, pointer) : pointer; + if (this._checkTarget(pointerToUse, objToCheck, pointer)) { + target = objects[i]; + if (target.subTargetCheck && Array.isArray(target._objects)) { + subTarget = this._searchPossibleTargets(target._objects, pointer); + subTarget && this.targets.push(subTarget); } + break; } - return target; - }, + } + return target; + }, - /** + /** * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted * @see {@link fabric.Canvas#_searchPossibleTargets} * @param {Array} [objects] objects array to look into * @param {Object} [pointer] x,y object of point coordinates we want to check. * @return {fabric.Object} **top most object on screen** that contains pointer */ - searchPossibleTargets: function (objects, pointer) { - var target = this._searchPossibleTargets(objects, pointer); - return target && target.interactive && this.targets[0] ? this.targets[0] : target; - }, + searchPossibleTargets: function (objects, pointer) { + var target = this._searchPossibleTargets(objects, pointer); + return target && target.interactive && this.targets[0] ? this.targets[0] : target; + }, - /** + /** * Returns pointer coordinates without the effect of the viewport * @param {Object} pointer with "x" and "y" number values * @return {Object} object with "x" and "y" number values */ - restorePointerVpt: function(pointer) { - return fabric.util.transformPoint( - pointer, - fabric.util.invertTransform(this.viewportTransform) - ); - }, + restorePointerVpt: function(pointer) { + return fabric.util.transformPoint( + pointer, + fabric.util.invertTransform(this.viewportTransform) + ); + }, - /** + /** * Returns pointer coordinates relative to canvas. * Can return coordinates with or without viewportTransform. * ignoreVpt false gives back coordinates that represent @@ -935,265 +935,265 @@ * @param {Boolean} ignoreVpt * @return {Object} object with "x" and "y" number values */ - getPointer: function (e, ignoreVpt) { - // return cached values if we are in the event processing chain - if (this._absolutePointer && !ignoreVpt) { - return this._absolutePointer; - } - if (this._pointer && ignoreVpt) { - return this._pointer; - } + getPointer: function (e, ignoreVpt) { + // return cached values if we are in the event processing chain + if (this._absolutePointer && !ignoreVpt) { + return this._absolutePointer; + } + if (this._pointer && ignoreVpt) { + return this._pointer; + } - var pointer = getPointer(e), - upperCanvasEl = this.upperCanvasEl, - bounds = upperCanvasEl.getBoundingClientRect(), - boundsWidth = bounds.width || 0, - boundsHeight = bounds.height || 0, - cssScale; + var pointer = getPointer(e), + upperCanvasEl = this.upperCanvasEl, + bounds = upperCanvasEl.getBoundingClientRect(), + boundsWidth = bounds.width || 0, + boundsHeight = bounds.height || 0, + cssScale; - if (!boundsWidth || !boundsHeight ) { - if ('top' in bounds && 'bottom' in bounds) { - boundsHeight = Math.abs( bounds.top - bounds.bottom ); - } - if ('right' in bounds && 'left' in bounds) { - boundsWidth = Math.abs( bounds.right - bounds.left ); - } + if (!boundsWidth || !boundsHeight ) { + if ('top' in bounds && 'bottom' in bounds) { + boundsHeight = Math.abs( bounds.top - bounds.bottom ); } - - this.calcOffset(); - pointer.x = pointer.x - this._offset.left; - pointer.y = pointer.y - this._offset.top; - if (!ignoreVpt) { - pointer = this.restorePointerVpt(pointer); + if ('right' in bounds && 'left' in bounds) { + boundsWidth = Math.abs( bounds.right - bounds.left ); } + } - var retinaScaling = this.getRetinaScaling(); - if (retinaScaling !== 1) { - pointer.x /= retinaScaling; - pointer.y /= retinaScaling; - } + this.calcOffset(); + pointer.x = pointer.x - this._offset.left; + pointer.y = pointer.y - this._offset.top; + if (!ignoreVpt) { + pointer = this.restorePointerVpt(pointer); + } - if (boundsWidth === 0 || boundsHeight === 0) { - // If bounds are not available (i.e. not visible), do not apply scale. - cssScale = { width: 1, height: 1 }; - } - else { - cssScale = { - width: upperCanvasEl.width / boundsWidth, - height: upperCanvasEl.height / boundsHeight - }; - } + var retinaScaling = this.getRetinaScaling(); + if (retinaScaling !== 1) { + pointer.x /= retinaScaling; + pointer.y /= retinaScaling; + } - return { - x: pointer.x * cssScale.width, - y: pointer.y * cssScale.height + if (boundsWidth === 0 || boundsHeight === 0) { + // If bounds are not available (i.e. not visible), do not apply scale. + cssScale = { width: 1, height: 1 }; + } + else { + cssScale = { + width: upperCanvasEl.width / boundsWidth, + height: upperCanvasEl.height / boundsHeight }; - }, + } - /** + return { + x: pointer.x * cssScale.width, + y: pointer.y * cssScale.height + }; + }, + + /** * @private * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized */ - _createUpperCanvas: function () { - var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), - lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; + _createUpperCanvas: function () { + var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), + lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; - // there is no need to create a new upperCanvas element if we have already one. - if (upperCanvasEl) { - upperCanvasEl.className = ''; - } - else { - upperCanvasEl = this._createCanvasElement(); - this.upperCanvasEl = upperCanvasEl; - } - fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); - this.upperCanvasEl.setAttribute('data-fabric', 'top'); - this.wrapperEl.appendChild(upperCanvasEl); + // there is no need to create a new upperCanvas element if we have already one. + if (upperCanvasEl) { + upperCanvasEl.className = ''; + } + else { + upperCanvasEl = this._createCanvasElement(); + this.upperCanvasEl = upperCanvasEl; + } + fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); + this.upperCanvasEl.setAttribute('data-fabric', 'top'); + this.wrapperEl.appendChild(upperCanvasEl); - this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); - this._applyCanvasStyle(upperCanvasEl); - this.contextTop = upperCanvasEl.getContext('2d'); - }, + this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); + this._applyCanvasStyle(upperCanvasEl); + this.contextTop = upperCanvasEl.getContext('2d'); + }, - /** + /** * @private */ - _createCacheCanvas: function () { - this.cacheCanvasEl = this._createCanvasElement(); - this.cacheCanvasEl.setAttribute('width', this.width); - this.cacheCanvasEl.setAttribute('height', this.height); - this.contextCache = this.cacheCanvasEl.getContext('2d'); - }, + _createCacheCanvas: function () { + this.cacheCanvasEl = this._createCanvasElement(); + this.cacheCanvasEl.setAttribute('width', this.width); + this.cacheCanvasEl.setAttribute('height', this.height); + this.contextCache = this.cacheCanvasEl.getContext('2d'); + }, - /** + /** * @private */ - _initWrapperElement: function () { - if (this.wrapperEl) { - return; - } - this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { - 'class': this.containerClass - }); - this.wrapperEl.setAttribute('data-fabric', 'wrapper'); - fabric.util.setStyle(this.wrapperEl, { - width: this.width + 'px', - height: this.height + 'px', - position: 'relative' - }); - fabric.util.makeElementUnselectable(this.wrapperEl); - }, + _initWrapperElement: function () { + if (this.wrapperEl) { + return; + } + this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { + 'class': this.containerClass + }); + this.wrapperEl.setAttribute('data-fabric', 'wrapper'); + fabric.util.setStyle(this.wrapperEl, { + width: this.width + 'px', + height: this.height + 'px', + position: 'relative' + }); + fabric.util.makeElementUnselectable(this.wrapperEl); + }, - /** + /** * @private * @param {HTMLElement} element canvas element to apply styles on */ - _applyCanvasStyle: function (element) { - var width = this.width || element.width, - height = this.height || element.height; - - fabric.util.setStyle(element, { - position: 'absolute', - width: width + 'px', - height: height + 'px', - left: 0, - top: 0, - 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', - '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' - }); - element.width = width; - element.height = height; - fabric.util.makeElementUnselectable(element); - }, + _applyCanvasStyle: function (element) { + var width = this.width || element.width, + height = this.height || element.height; + + fabric.util.setStyle(element, { + position: 'absolute', + width: width + 'px', + height: height + 'px', + left: 0, + top: 0, + 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', + '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' + }); + element.width = width; + element.height = height; + fabric.util.makeElementUnselectable(element); + }, - /** + /** * Copy the entire inline style from one element (fromEl) to another (toEl) * @private * @param {Element} fromEl Element style is copied from * @param {Element} toEl Element copied style is applied to */ - _copyCanvasStyle: function (fromEl, toEl) { - toEl.style.cssText = fromEl.style.cssText; - }, + _copyCanvasStyle: function (fromEl, toEl) { + toEl.style.cssText = fromEl.style.cssText; + }, - /** + /** * Returns context of top canvas where interactions are drawn * @returns {CanvasRenderingContext2D} */ - getTopContext: function () { - return this.contextTop; - }, + getTopContext: function () { + return this.contextTop; + }, - /** + /** * Returns context of canvas where object selection is drawn * @alias * @return {CanvasRenderingContext2D} */ - getSelectionContext: function() { - return this.contextTop; - }, + getSelectionContext: function() { + return this.contextTop; + }, - /** + /** * Returns <canvas> element on which object selection is drawn * @return {HTMLCanvasElement} */ - getSelectionElement: function () { - return this.upperCanvasEl; - }, + getSelectionElement: function () { + return this.upperCanvasEl; + }, - /** + /** * Returns currently active object * @return {fabric.Object} active object */ - getActiveObject: function () { - return this._activeObject; - }, + getActiveObject: function () { + return this._activeObject; + }, - /** + /** * Returns an array with the current selected objects * @return {fabric.Object} active object */ - getActiveObjects: function () { - var active = this._activeObject; - if (active) { - if (active.type === 'activeSelection' && active._objects) { - return active._objects.slice(0); - } - else { - return [active]; - } + getActiveObjects: function () { + var active = this._activeObject; + if (active) { + if (active.type === 'activeSelection' && active._objects) { + return active._objects.slice(0); + } + else { + return [active]; } - return []; - }, + } + return []; + }, - /** + /** * @private * Compares the old activeObject with the current one and fires correct events * @param {fabric.Object} obj old activeObject */ - _fireSelectionEvents: function(oldObjects, e) { - var somethingChanged = false, objects = this.getActiveObjects(), - added = [], removed = [], invalidate = false; - oldObjects.forEach(function(oldObject) { - if (objects.indexOf(oldObject) === -1) { - somethingChanged = true; - oldObject.fire('deselected', { - e: e, - target: oldObject - }); - removed.push(oldObject); - } - }); - objects.forEach(function(object) { - if (oldObjects.indexOf(object) === -1) { - somethingChanged = true; - object.fire('selected', { - e: e, - target: object - }); - added.push(object); - } - }); - if (oldObjects.length > 0 && objects.length > 0) { - invalidate = true; - somethingChanged && this.fire('selection:updated', { + _fireSelectionEvents: function(oldObjects, e) { + var somethingChanged = false, objects = this.getActiveObjects(), + added = [], removed = [], invalidate = false; + oldObjects.forEach(function(oldObject) { + if (objects.indexOf(oldObject) === -1) { + somethingChanged = true; + oldObject.fire('deselected', { e: e, - selected: added, - deselected: removed, + target: oldObject }); + removed.push(oldObject); } - else if (objects.length > 0) { - invalidate = true; - this.fire('selection:created', { + }); + objects.forEach(function(object) { + if (oldObjects.indexOf(object) === -1) { + somethingChanged = true; + object.fire('selected', { e: e, - selected: added, + target: object }); + added.push(object); } - else if (oldObjects.length > 0) { - invalidate = true; - this.fire('selection:cleared', { - e: e, - deselected: removed, - }); - } - invalidate && (this._objectsToRender = undefined); - }, + }); + if (oldObjects.length > 0 && objects.length > 0) { + invalidate = true; + somethingChanged && this.fire('selection:updated', { + e: e, + selected: added, + deselected: removed, + }); + } + else if (objects.length > 0) { + invalidate = true; + this.fire('selection:created', { + e: e, + selected: added, + }); + } + else if (oldObjects.length > 0) { + invalidate = true; + this.fire('selection:cleared', { + e: e, + deselected: removed, + }); + } + invalidate && (this._objectsToRender = undefined); + }, - /** + /** * Sets given object as the only active object on canvas * @param {fabric.Object} object Object to set as an active one * @param {Event} [e] Event (passed along when firing "object:selected") * @return {fabric.Canvas} thisArg * @chainable */ - setActiveObject: function (object, e) { - var currentActives = this.getActiveObjects(); - this._setActiveObject(object, e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + setActiveObject: function (object, e) { + var currentActives = this.getActiveObjects(); + this._setActiveObject(object, e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** + /** * This is a private method for now. * This is supposed to be equivalent to setActiveObject but without firing * any event. There is commitment to have this stay this way. @@ -1203,21 +1203,21 @@ * @param {Event} [e] Event (passed along when firing "object:selected") * @return {Boolean} true if the selection happened */ - _setActiveObject: function(object, e) { - if (this._activeObject === object) { - return false; - } - if (!this._discardActiveObject(e, object)) { - return false; - } - if (object.onSelect({ e: e })) { - return false; - } - this._activeObject = object; - return true; - }, + _setActiveObject: function(object, e) { + if (this._activeObject === object) { + return false; + } + if (!this._discardActiveObject(e, object)) { + return false; + } + if (object.onSelect({ e: e })) { + return false; + } + this._activeObject = object; + return true; + }, - /** + /** * This is a private method for now. * This is supposed to be equivalent to discardActiveObject but without firing * any events. There is commitment to have this stay this way. @@ -1227,19 +1227,19 @@ * @return {Boolean} true if the selection happened * @private */ - _discardActiveObject: function(e, object) { - var obj = this._activeObject; - if (obj) { - // onDeselect return TRUE to cancel selection; - if (obj.onDeselect({ e: e, object: object })) { - return false; - } - this._activeObject = null; + _discardActiveObject: function(e, object) { + var obj = this._activeObject; + if (obj) { + // onDeselect return TRUE to cancel selection; + if (obj.onDeselect({ e: e, object: object })) { + return false; } - return true; - }, + this._activeObject = null; + } + return true; + }, - /** + /** * Discards currently active object and fire events. If the function is called by fabric * as a consequence of a mouse event, the event is passed as a parameter and * sent to the fire function for the custom events. When used as a method the @@ -1248,127 +1248,127 @@ * @return {fabric.Canvas} thisArg * @chainable */ - discardActiveObject: function (e) { - var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); - if (currentActives.length) { - this.fire('before:selection:cleared', { target: activeObject, e: e }); - } - this._discardActiveObject(e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + discardActiveObject: function (e) { + var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); + if (currentActives.length) { + this.fire('before:selection:cleared', { target: activeObject, e: e }); + } + this._discardActiveObject(e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** + /** * Clears a canvas element and removes all event listeners * @return {fabric.Canvas} thisArg * @chainable */ - dispose: function () { - var wrapperEl = this.wrapperEl, - lowerCanvasEl = this.lowerCanvasEl, - upperCanvasEl = this.upperCanvasEl, - cacheCanvasEl = this.cacheCanvasEl; - this.removeListeners(); - this.callSuper('dispose'); - wrapperEl.removeChild(upperCanvasEl); - wrapperEl.removeChild(lowerCanvasEl); - this.contextCache = null; - this.contextTop = null; - fabric.util.cleanUpJsdomNode(upperCanvasEl); - this.upperCanvasEl = undefined; - fabric.util.cleanUpJsdomNode(cacheCanvasEl); - this.cacheCanvasEl = undefined; - if (wrapperEl.parentNode) { - wrapperEl.parentNode.replaceChild(lowerCanvasEl, wrapperEl); - } - delete this.wrapperEl; - return this; - }, + dispose: function () { + var wrapperEl = this.wrapperEl, + lowerCanvasEl = this.lowerCanvasEl, + upperCanvasEl = this.upperCanvasEl, + cacheCanvasEl = this.cacheCanvasEl; + this.removeListeners(); + this.callSuper('dispose'); + wrapperEl.removeChild(upperCanvasEl); + wrapperEl.removeChild(lowerCanvasEl); + this.contextCache = null; + this.contextTop = null; + fabric.util.cleanUpJsdomNode(upperCanvasEl); + this.upperCanvasEl = undefined; + fabric.util.cleanUpJsdomNode(cacheCanvasEl); + this.cacheCanvasEl = undefined; + if (wrapperEl.parentNode) { + wrapperEl.parentNode.replaceChild(lowerCanvasEl, wrapperEl); + } + delete this.wrapperEl; + return this; + }, - /** + /** * Clears all contexts (background, main, top) of an instance * @return {fabric.Canvas} thisArg * @chainable */ - clear: function () { - // this.discardActiveGroup(); - this.discardActiveObject(); - this.clearContext(this.contextTop); - return this.callSuper('clear'); - }, + clear: function () { + // this.discardActiveGroup(); + this.discardActiveObject(); + this.clearContext(this.contextTop); + return this.callSuper('clear'); + }, - /** + /** * Draws objects' controls (borders/controls) * @param {CanvasRenderingContext2D} ctx Context to render controls on */ - drawControls: function(ctx) { - var activeObject = this._activeObject; + drawControls: function(ctx) { + var activeObject = this._activeObject; - if (activeObject) { - activeObject._renderControls(ctx); - } - }, + if (activeObject) { + activeObject._renderControls(ctx); + } + }, - /** + /** * @private */ - _toObject: function(instance, methodName, propertiesToInclude) { - //If the object is part of the current selection group, it should - //be transformed appropriately - //i.e. it should be serialised as it would appear if the selection group - //were to be destroyed. - var originalProperties = this._realizeGroupTransformOnObject(instance), - object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); - //Undo the damage we did by changing all of its properties - originalProperties && instance.set(originalProperties); - return object; - }, - - /** + _toObject: function(instance, methodName, propertiesToInclude) { + //If the object is part of the current selection group, it should + //be transformed appropriately + //i.e. it should be serialised as it would appear if the selection group + //were to be destroyed. + var originalProperties = this._realizeGroupTransformOnObject(instance), + object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); + //Undo the damage we did by changing all of its properties + originalProperties && instance.set(originalProperties); + return object; + }, + + /** * Realises an object's group transformation on it * @private * @param {fabric.Object} [instance] the object to transform (gets mutated) * @returns the original values of instance which were changed */ - _realizeGroupTransformOnObject: function(instance) { - if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { - var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; - //Copy all the positionally relevant properties across now - var originalValues = {}; - layoutProps.forEach(function(prop) { - originalValues[prop] = instance[prop]; - }); - fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); - return originalValues; - } - else { - return null; - } - }, + _realizeGroupTransformOnObject: function(instance) { + if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { + var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; + //Copy all the positionally relevant properties across now + var originalValues = {}; + layoutProps.forEach(function(prop) { + originalValues[prop] = instance[prop]; + }); + fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); + return originalValues; + } + else { + return null; + } + }, - /** + /** * @private */ - _setSVGObject: function(markup, instance, reviver) { - //If the object is in a selection group, simulate what would happen to that - //object when the group is deselected - var originalProperties = this._realizeGroupTransformOnObject(instance); - this.callSuper('_setSVGObject', markup, instance, reviver); - originalProperties && instance.set(originalProperties); - }, - - setViewportTransform: function (vpt) { - if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { - this._activeObject.clearContextTop(); - } - fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); + _setSVGObject: function(markup, instance, reviver) { + //If the object is in a selection group, simulate what would happen to that + //object when the group is deselected + var originalProperties = this._realizeGroupTransformOnObject(instance); + this.callSuper('_setSVGObject', markup, instance, reviver); + originalProperties && instance.set(originalProperties); + }, + + setViewportTransform: function (vpt) { + if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { + this._activeObject.clearContextTop(); } - }); + fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); + } +}); - // copying static properties manually to work around Opera's bug, - // where "prototype" property is enumerable and overrides existing prototype - for (var prop in fabric.StaticCanvas) { - if (prop !== 'prototype') { - fabric.Canvas[prop] = fabric.StaticCanvas[prop]; - } +// copying static properties manually to work around Opera's bug, +// where "prototype" property is enumerable and overrides existing prototype +for (var prop in fabric.StaticCanvas) { + if (prop !== 'prototype') { + fabric.Canvas[prop] = fabric.StaticCanvas[prop]; } +} diff --git a/src/controls.actions.js b/src/controls.actions.js index 65a368e871c..11bd289b1e8 100644 --- a/src/controls.actions.js +++ b/src/controls.actions.js @@ -1,161 +1,161 @@ - var fabric = exports.fabric || (exports.fabric = { }), - scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], - skewMap = ['ns', 'nesw', 'ew', 'nwse'], - controls = {}, - LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', - opposite = { - top: BOTTOM, - bottom: TOP, - left: RIGHT, - right: LEFT, - center: CENTER, - }, radiansToDegrees = fabric.util.radiansToDegrees, - sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); - - /** +var fabric = exports.fabric || (exports.fabric = { }), + scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], + skewMap = ['ns', 'nesw', 'ew', 'nwse'], + controls = {}, + LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', + opposite = { + top: BOTTOM, + bottom: TOP, + left: RIGHT, + right: LEFT, + center: CENTER, + }, radiansToDegrees = fabric.util.radiansToDegrees, + sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); + +/** * Combine control position and object angle to find the control direction compared * to the object center. * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls * @param {fabric.Control} control the control class * @return {Number} 0 - 7 a quadrant number */ - function findCornerQuadrant(fabricObject, control) { - // angle is relative to canvas plane - var angle = fabricObject.getTotalAngle(); - var cornerAngle = angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; - return Math.round((cornerAngle % 360) / 45); - } - - function fireEvent(eventName, options) { - var target = options.transform.target, - canvas = target.canvas; - canvas && canvas.fire('object:' + eventName, Object.assign({}, options, { target: target })); - target.fire(eventName, options); - } - - /** +function findCornerQuadrant(fabricObject, control) { + // angle is relative to canvas plane + var angle = fabricObject.getTotalAngle(); + var cornerAngle = angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; + return Math.round((cornerAngle % 360) / 45); +} + +function fireEvent(eventName, options) { + var target = options.transform.target, + canvas = target.canvas; + canvas && canvas.fire('object:' + eventName, Object.assign({}, options, { target: target })); + target.fire(eventName, options); +} + +/** * Inspect event and fabricObject properties to understand if the scaling action * @param {Event} eventData from the user action * @param {fabric.Object} fabricObject the fabric object about to scale * @return {Boolean} true if scale is proportional */ - function scaleIsProportional(eventData, fabricObject) { - var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, - uniformIsToggled = eventData[uniScaleKey]; - return (canvas.uniformScaling && !uniformIsToggled) || +function scaleIsProportional(eventData, fabricObject) { + var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, + uniformIsToggled = eventData[uniScaleKey]; + return (canvas.uniformScaling && !uniformIsToggled) || (!canvas.uniformScaling && uniformIsToggled); - } +} - /** +/** * Checks if transform is centered * @param {Object} transform transform data * @return {Boolean} true if transform is centered */ - function isTransformCentered(transform) { - return transform.originX === CENTER && transform.originY === CENTER; - } +function isTransformCentered(transform) { + return transform.originX === CENTER && transform.originY === CENTER; +} - /** +/** * Inspect fabricObject to understand if the current scaling action is allowed * @param {fabric.Object} fabricObject the fabric object about to scale * @param {String} by 'x' or 'y' or '' * @param {Boolean} scaleProportionally true if we are trying to scale proportionally * @return {Boolean} true if scaling is not allowed at current conditions */ - function scalingIsForbidden(fabricObject, by, scaleProportionally) { - var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; - if (lockX && lockY) { - return true; - } - if (!by && (lockX || lockY) && scaleProportionally) { - return true; - } - if (lockX && by === 'x') { - return true; - } - if (lockY && by === 'y') { - return true; - } - return false; +function scalingIsForbidden(fabricObject, by, scaleProportionally) { + var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; + if (lockX && lockY) { + return true; + } + if (!by && (lockX || lockY) && scaleProportionally) { + return true; + } + if (lockX && by === 'x') { + return true; + } + if (lockY && by === 'y') { + return true; } + return false; +} - /** +/** * return the correct cursor style for the scale action * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ - function scaleCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed', - scaleProportionally = scaleIsProportional(eventData, fabricObject), - by = ''; - if (control.x !== 0 && control.y === 0) { - by = 'x'; - } - else if (control.x === 0 && control.y !== 0) { - by = 'y'; - } - if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { - return notAllowed; - } - var n = findCornerQuadrant(fabricObject, control); - return scaleMap[n] + '-resize'; +function scaleCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed', + scaleProportionally = scaleIsProportional(eventData, fabricObject), + by = ''; + if (control.x !== 0 && control.y === 0) { + by = 'x'; + } + else if (control.x === 0 && control.y !== 0) { + by = 'y'; } + if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control); + return scaleMap[n] + '-resize'; +} - /** +/** * return the correct cursor style for the skew action * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ - function skewCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed'; - if (control.x !== 0 && fabricObject.lockSkewingY) { - return notAllowed; - } - if (control.y !== 0 && fabricObject.lockSkewingX) { - return notAllowed; - } - var n = findCornerQuadrant(fabricObject, control) % 4; - return skewMap[n] + '-resize'; +function skewCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed'; + if (control.x !== 0 && fabricObject.lockSkewingY) { + return notAllowed; } + if (control.y !== 0 && fabricObject.lockSkewingX) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control) % 4; + return skewMap[n] + '-resize'; +} - /** +/** * Combine skew and scale style handlers to cover fabric standard use case * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ - function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { - if (eventData[fabricObject.canvas.altActionKey]) { - return controls.skewCursorStyleHandler(eventData, control, fabricObject); - } - return controls.scaleCursorStyleHandler(eventData, control, fabricObject); +function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { + if (eventData[fabricObject.canvas.altActionKey]) { + return controls.skewCursorStyleHandler(eventData, control, fabricObject); } + return controls.scaleCursorStyleHandler(eventData, control, fabricObject); +} - /** +/** * Inspect event, control and fabricObject to return the correct action name * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} an action name */ - function scaleOrSkewActionName(eventData, control, fabricObject) { - var isAlternative = eventData[fabricObject.canvas.altActionKey]; - if (control.x === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewX' : 'scaleY'; - } - if (control.y === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewY' : 'scaleX'; - } +function scaleOrSkewActionName(eventData, control, fabricObject) { + var isAlternative = eventData[fabricObject.canvas.altActionKey]; + if (control.x === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewX' : 'scaleY'; + } + if (control.y === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewY' : 'scaleX'; } +} - /** +/** * Find the correct style for the control that is used for rotation. * this function is very simple and it just take care of not-allowed or standard cursor * @param {Event} eventData the javascript event that is causing the scale @@ -163,56 +163,56 @@ * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ - function rotationStyleHandler(eventData, control, fabricObject) { - if (fabricObject.lockRotation) { - return 'not-allowed'; - } - return control.cursorStyle; +function rotationStyleHandler(eventData, control, fabricObject) { + if (fabricObject.lockRotation) { + return 'not-allowed'; } + return control.cursorStyle; +} - function commonEventInfo(eventData, transform, x, y) { - return { - e: eventData, - transform: transform, - pointer: { - x: x, - y: y, - } - }; - } +function commonEventInfo(eventData, transform, x, y) { + return { + e: eventData, + transform: transform, + pointer: { + x: x, + y: y, + } + }; +} - /** +/** * Wrap an action handler with saving/restoring object position on the transform. * this is the code that permits to objects to keep their position while transforming. * @param {Function} actionHandler the function to wrap * @return {Function} a function with an action handler signature */ - function wrapWithFixedAnchor(actionHandler) { - return function(eventData, transform, x, y) { - var target = transform.target, centerPoint = target.getRelativeCenterPoint(), - constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), - actionPerformed = actionHandler(eventData, transform, x, y); - target.setPositionByOrigin(constraint, transform.originX, transform.originY); - return actionPerformed; - }; - } - - /** +function wrapWithFixedAnchor(actionHandler) { + return function(eventData, transform, x, y) { + var target = transform.target, centerPoint = target.getRelativeCenterPoint(), + constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), + actionPerformed = actionHandler(eventData, transform, x, y); + target.setPositionByOrigin(constraint, transform.originX, transform.originY); + return actionPerformed; + }; +} + +/** * Wrap an action handler with firing an event if the action is performed * @param {Function} actionHandler the function to wrap * @return {Function} a function with an action handler signature */ - function wrapWithFireEvent(eventName, actionHandler) { - return function(eventData, transform, x, y) { - var actionPerformed = actionHandler(eventData, transform, x, y); - if (actionPerformed) { - fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); - } - return actionPerformed; - }; - } +function wrapWithFireEvent(eventName, actionHandler) { + return function(eventData, transform, x, y) { + var actionPerformed = actionHandler(eventData, transform, x, y); + if (actionPerformed) { + fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); + } + return actionPerformed; + }; +} - /** +/** * Transforms a point described by x and y in a distance from the top left corner of the object * bounding box. * @param {Object} transform @@ -222,137 +222,137 @@ * @param {number} y * @return {Fabric.Point} the normalized point */ - function getLocalPoint(transform, originX, originY, x, y) { - var target = transform.target, - control = target.controls[transform.corner], - zoom = target.canvas.getZoom(), - padding = target.padding / zoom, - localPoint = target.normalizePoint(new fabric.Point(x, y), originX, originY); - if (localPoint.x >= padding) { - localPoint.x -= padding; - } - if (localPoint.x <= -padding) { - localPoint.x += padding; - } - if (localPoint.y >= padding) { - localPoint.y -= padding; - } - if (localPoint.y <= padding) { - localPoint.y += padding; - } - localPoint.x -= control.offsetX; - localPoint.y -= control.offsetY; - return localPoint; +function getLocalPoint(transform, originX, originY, x, y) { + var target = transform.target, + control = target.controls[transform.corner], + zoom = target.canvas.getZoom(), + padding = target.padding / zoom, + localPoint = target.normalizePoint(new fabric.Point(x, y), originX, originY); + if (localPoint.x >= padding) { + localPoint.x -= padding; + } + if (localPoint.x <= -padding) { + localPoint.x += padding; + } + if (localPoint.y >= padding) { + localPoint.y -= padding; } + if (localPoint.y <= padding) { + localPoint.y += padding; + } + localPoint.x -= control.offsetX; + localPoint.y -= control.offsetY; + return localPoint; +} - /** +/** * Detect if the fabric object is flipped on one side. * @param {fabric.Object} target * @return {Boolean} true if one flip, but not two. */ - function targetHasOneFlip(target) { - return target.flipX !== target.flipY; - } +function targetHasOneFlip(target) { + return target.flipX !== target.flipY; +} - /** +/** * Utility function to compensate the scale factor when skew is applied on both axes * @private */ - function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { - if (target[oppositeSkew] !== 0) { - var newDim = target._getTransformedDimensions()[axis]; - var newValue = reference / newDim * target[scaleToCompensate]; - target.set(scaleToCompensate, newValue); - } +function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { + if (target[oppositeSkew] !== 0) { + var newDim = target._getTransformedDimensions()[axis]; + var newValue = reference / newDim * target[scaleToCompensate]; + target.set(scaleToCompensate, newValue); } +} - /** +/** * Action handler for skewing on the X axis * @private */ - function skewObjectX(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions({ skewX: 0, skewY: target.skewY }), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, - currentSkew = target.skewX, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; +function skewObjectX(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions({ skewX: 0, skewY: target.skewY }), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, + currentSkew = target.skewX, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; + } + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; } - else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; - } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; - } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; - } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().y; - target.set('skewX', newSkew); - compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); + if (targetHasOneFlip(target)) { + newSkew = -newSkew; } - return hasSkewed; } + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().y; + target.set('skewX', newSkew); + compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); + } + return hasSkewed; +} - /** +/** * Action handler for skewing on the Y axis * @private */ - function skewObjectY(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions({ skewX: target.skewX, skewY: 0 }), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, - currentSkew = target.skewY, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; +function skewObjectY(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions({ skewX: target.skewX, skewY: 0 }), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, + currentSkew = target.skewY, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; + } + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; } - else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; - } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; - } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; - } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().x; - target.set('skewY', newSkew); - compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); + if (targetHasOneFlip(target)) { + newSkew = -newSkew; } - return hasSkewed; } + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().x; + target.set('skewY', newSkew); + compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); + } + return hasSkewed; +} - /** +/** * Wrapped Action handler for skewing on the Y axis, takes care of the * skew direction and determine the correct transform origin for the anchor point * @param {Event} eventData javascript event that is doing the transform @@ -361,48 +361,48 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function skewHandlerX(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewX > 0 and originY bottom we anchor on right - // if skewX > 0 and originY top we anchor on left - // if skewX < 0 and originY bottom we anchor on left - // if skewX < 0 and originY top we anchor on right - // if skewX is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; - if (target.lockSkewingX) { - return false; - } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.x > 0) { - // we are pulling right, anchor left; - originX = LEFT; - } - else { - // we are pulling right, anchor right - originX = RIGHT; - } +function skewHandlerX(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewX > 0 and originY bottom we anchor on right + // if skewX > 0 and originY top we anchor on left + // if skewX < 0 and originY bottom we anchor on left + // if skewX < 0 and originY top we anchor on right + // if skewX is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; + if (target.lockSkewingX) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.x > 0) { + // we are pulling right, anchor left; + originX = LEFT; } else { - if (currentSkew > 0) { - originX = originY === TOP ? LEFT : RIGHT; - } - if (currentSkew < 0) { - originX = originY === TOP ? RIGHT : LEFT; - } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originX = originX === LEFT ? RIGHT : LEFT; - } + // we are pulling right, anchor right + originX = RIGHT; + } + } + else { + if (currentSkew > 0) { + originX = originY === TOP ? LEFT : RIGHT; + } + if (currentSkew < 0) { + originX = originY === TOP ? RIGHT : LEFT; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originX = originX === LEFT ? RIGHT : LEFT; } - - // once we have the origin, we find the anchor point - transform.originX = originX; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); - return finalHandler(eventData, transform, x, y); } - /** + // once we have the origin, we find the anchor point + transform.originX = originX; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); + return finalHandler(eventData, transform, x, y); +} + +/** * Wrapped Action handler for skewing on the Y axis, takes care of the * skew direction and determine the correct transform origin for the anchor point * @param {Event} eventData javascript event that is doing the transform @@ -411,48 +411,48 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function skewHandlerY(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewY > 0 and originX left we anchor on top - // if skewY > 0 and originX right we anchor on bottom - // if skewY < 0 and originX left we anchor on bottom - // if skewY < 0 and originX right we anchor on top - // if skewY is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; - if (target.lockSkewingY) { - return false; - } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.y > 0) { - // we are pulling down, anchor up; - originY = TOP; - } - else { - // we are pulling up, anchor down - originY = BOTTOM; - } +function skewHandlerY(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewY > 0 and originX left we anchor on top + // if skewY > 0 and originX right we anchor on bottom + // if skewY < 0 and originX left we anchor on bottom + // if skewY < 0 and originX right we anchor on top + // if skewY is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; + if (target.lockSkewingY) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.y > 0) { + // we are pulling down, anchor up; + originY = TOP; } else { - if (currentSkew > 0) { - originY = originX === LEFT ? TOP : BOTTOM; - } - if (currentSkew < 0) { - originY = originX === LEFT ? BOTTOM : TOP; - } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originY = originY === TOP ? BOTTOM : TOP; - } + // we are pulling up, anchor down + originY = BOTTOM; + } + } + else { + if (currentSkew > 0) { + originY = originX === LEFT ? TOP : BOTTOM; + } + if (currentSkew < 0) { + originY = originX === LEFT ? BOTTOM : TOP; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originY = originY === TOP ? BOTTOM : TOP; } - - // once we have the origin, we find the anchor point - transform.originY = originY; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); - return finalHandler(eventData, transform, x, y); } - /** + // once we have the origin, we find the anchor point + transform.originY = originY; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); + return finalHandler(eventData, transform, x, y); +} + +/** * Action handler for rotation and snapping, without anchor point. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -462,46 +462,46 @@ * @return {Boolean} true if some change happened * @private */ - function rotationWithSnapping(eventData, transform, x, y) { - var t = transform, - target = t.target, - pivotPoint = target.translateToOriginPoint(target.getRelativeCenterPoint(), t.originX, t.originY); +function rotationWithSnapping(eventData, transform, x, y) { + var t = transform, + target = t.target, + pivotPoint = target.translateToOriginPoint(target.getRelativeCenterPoint(), t.originX, t.originY); - if (target.lockRotation) { - return false; - } + if (target.lockRotation) { + return false; + } - var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), - curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), - angle = radiansToDegrees(curAngle - lastAngle + t.theta), - hasRotated = true; - - if (target.snapAngle > 0) { - var snapAngle = target.snapAngle, - snapThreshold = target.snapThreshold || snapAngle, - rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, - leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; - - if (Math.abs(angle - leftAngleLocked) < snapThreshold) { - angle = leftAngleLocked; - } - else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { - angle = rightAngleLocked; - } - } + var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), + curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), + angle = radiansToDegrees(curAngle - lastAngle + t.theta), + hasRotated = true; - // normalize angle to positive value - if (angle < 0) { - angle = 360 + angle; + if (target.snapAngle > 0) { + var snapAngle = target.snapAngle, + snapThreshold = target.snapThreshold || snapAngle, + rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, + leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; + + if (Math.abs(angle - leftAngleLocked) < snapThreshold) { + angle = leftAngleLocked; + } + else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { + angle = rightAngleLocked; } - angle %= 360; + } - hasRotated = target.angle !== angle; - target.angle = angle; - return hasRotated; + // normalize angle to positive value + if (angle < 0) { + angle = 360 + angle; } + angle %= 360; - /** + hasRotated = target.angle !== angle; + target.angle = angle; + return hasRotated; +} + +/** * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -513,91 +513,91 @@ * @return {Boolean} true if some change happened * @private */ - function scaleObject(eventData, transform, x, y, options) { - options = options || {}; - var target = transform.target, - lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, - by = options.by, newPoint, scaleX, scaleY, dim, - scaleProportionally = scaleIsProportional(eventData, target), - forbidScaling = scalingIsForbidden(target, by, scaleProportionally), - signX, signY, gestureScale = transform.gestureScale; - - if (forbidScaling) { +function scaleObject(eventData, transform, x, y, options) { + options = options || {}; + var target = transform.target, + lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, + by = options.by, newPoint, scaleX, scaleY, dim, + scaleProportionally = scaleIsProportional(eventData, target), + forbidScaling = scalingIsForbidden(target, by, scaleProportionally), + signX, signY, gestureScale = transform.gestureScale; + + if (forbidScaling) { + return false; + } + if (gestureScale) { + scaleX = transform.scaleX * gestureScale; + scaleY = transform.scaleY * gestureScale; + } + else { + newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // use of sign: We use sign to detect change of direction of an action. sign usually change when + // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling + // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily + // cross many time the origin point and flip the object. so we need a way to filter out the noise. + // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. + signX = by !== 'y' ? sign(newPoint.x) : 1; + signY = by !== 'x' ? sign(newPoint.y) : 1; + if (!transform.signX) { + transform.signX = signX; + } + if (!transform.signY) { + transform.signY = signY; + } + + if (target.lockScalingFlip && + (transform.signX !== signX || transform.signY !== signY) + ) { return false; } - if (gestureScale) { - scaleX = transform.scaleX * gestureScale; - scaleY = transform.scaleY * gestureScale; + + dim = target._getTransformedDimensions(); + // missing detection of flip and logic to switch the origin + if (scaleProportionally && !by) { + // uniform scaling + var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), + original = transform.original, + originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + + Math.abs(dim.y * original.scaleY / target.scaleY), + scale = distance / originalDistance; + scaleX = original.scaleX * scale; + scaleY = original.scaleY * scale; } else { - newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); - // use of sign: We use sign to detect change of direction of an action. sign usually change when - // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling - // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily - // cross many time the origin point and flip the object. so we need a way to filter out the noise. - // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. - signX = by !== 'y' ? sign(newPoint.x) : 1; - signY = by !== 'x' ? sign(newPoint.y) : 1; - if (!transform.signX) { - transform.signX = signX; - } - if (!transform.signY) { - transform.signY = signY; - } - - if (target.lockScalingFlip && - (transform.signX !== signX || transform.signY !== signY) - ) { - return false; - } - - dim = target._getTransformedDimensions(); - // missing detection of flip and logic to switch the origin - if (scaleProportionally && !by) { - // uniform scaling - var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), - original = transform.original, - originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + - Math.abs(dim.y * original.scaleY / target.scaleY), - scale = distance / originalDistance; - scaleX = original.scaleX * scale; - scaleY = original.scaleY * scale; - } - else { - scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); - scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); - } - // if we are scaling by center, we need to double the scale - if (isTransformCentered(transform)) { - scaleX *= 2; - scaleY *= 2; - } - if (transform.signX !== signX && by !== 'y') { - transform.originX = opposite[transform.originX]; - scaleX *= -1; - transform.signX = signX; - } - if (transform.signY !== signY && by !== 'x') { - transform.originY = opposite[transform.originY]; - scaleY *= -1; - transform.signY = signY; - } + scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); + scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); } - // minScale is taken are in the setter. - var oldScaleX = target.scaleX, oldScaleY = target.scaleY; - if (!by) { - !lockScalingX && target.set('scaleX', scaleX); - !lockScalingY && target.set('scaleY', scaleY); + // if we are scaling by center, we need to double the scale + if (isTransformCentered(transform)) { + scaleX *= 2; + scaleY *= 2; } - else { - // forbidden cases already handled on top here. - by === 'x' && target.set('scaleX', scaleX); - by === 'y' && target.set('scaleY', scaleY); + if (transform.signX !== signX && by !== 'y') { + transform.originX = opposite[transform.originX]; + scaleX *= -1; + transform.signX = signX; + } + if (transform.signY !== signY && by !== 'x') { + transform.originY = opposite[transform.originY]; + scaleY *= -1; + transform.signY = signY; } - return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; } + // minScale is taken are in the setter. + var oldScaleX = target.scaleX, oldScaleY = target.scaleY; + if (!by) { + !lockScalingX && target.set('scaleX', scaleX); + !lockScalingY && target.set('scaleY', scaleY); + } + else { + // forbidden cases already handled on top here. + by === 'x' && target.set('scaleX', scaleX); + by === 'y' && target.set('scaleY', scaleY); + } + return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; +} - /** +/** * Generic scaling logic, to scale from corners either equally or freely. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -606,11 +606,11 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function scaleObjectFromCorner(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y); - } +function scaleObjectFromCorner(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y); +} - /** +/** * Scaling logic for the X axis. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -619,11 +619,11 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function scaleObjectX(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'x' }); - } +function scaleObjectX(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'x' }); +} - /** +/** * Scaling logic for the Y axis. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -632,11 +632,11 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function scaleObjectY(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'y' }); - } +function scaleObjectY(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'y' }); +} - /** +/** * Composed action handler to either scale Y or skew X * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -645,15 +645,15 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function scalingYOrSkewingX(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerX(eventData, transform, x, y); - } - return controls.scalingY(eventData, transform, x, y); +function scalingYOrSkewingX(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerX(eventData, transform, x, y); } + return controls.scalingY(eventData, transform, x, y); +} - /** +/** * Composed action handler to either scale X or skew Y * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -662,15 +662,15 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function scalingXOrSkewingY(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerY(eventData, transform, x, y); - } - return controls.scalingX(eventData, transform, x, y); +function scalingXOrSkewingY(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerY(eventData, transform, x, y); } + return controls.scalingX(eventData, transform, x, y); +} - /** +/** * Action handler to change textbox width * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -679,25 +679,25 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ - function changeWidth(eventData, transform, x, y) { - var localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); - // make sure the control changes width ONLY from it's side of target - if (transform.originX === 'center' || +function changeWidth(eventData, transform, x, y) { + var localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // make sure the control changes width ONLY from it's side of target + if (transform.originX === 'center' || (transform.originX === 'right' && localPoint.x < 0) || (transform.originX === 'left' && localPoint.x > 0)) { - var target = transform.target, - strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), - multiplier = isTransformCentered(transform) ? 2 : 1, - oldWidth = target.width, - newWidth = Math.ceil(Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding); - target.set('width', Math.max(newWidth, 0)); - // check against actual target width in case `newWidth` was rejected - return oldWidth !== target.width; - } - return false; + var target = transform.target, + strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), + multiplier = isTransformCentered(transform) ? 2 : 1, + oldWidth = target.width, + newWidth = Math.ceil(Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding); + target.set('width', Math.max(newWidth, 0)); + // check against actual target width in case `newWidth` was rejected + return oldWidth !== target.width; } + return false; +} - /** +/** * Action handler * @private * @param {Event} eventData javascript event that is doing the transform @@ -706,37 +706,37 @@ * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if the translation occurred */ - function dragHandler(eventData, transform, x, y) { - var target = transform.target, - newLeft = x - transform.offsetX, - newTop = y - transform.offsetY, - moveX = !target.get('lockMovementX') && target.left !== newLeft, - moveY = !target.get('lockMovementY') && target.top !== newTop; - moveX && target.set('left', newLeft); - moveY && target.set('top', newTop); - if (moveX || moveY) { - fireEvent('moving', commonEventInfo(eventData, transform, x, y)); - } - return moveX || moveY; - } - - controls.scaleCursorStyleHandler = scaleCursorStyleHandler; - controls.skewCursorStyleHandler = skewCursorStyleHandler; - controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; - controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); - controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); - controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); - controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); - controls.scalingYOrSkewingX = scalingYOrSkewingX; - controls.scalingXOrSkewingY = scalingXOrSkewingY; - controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); - controls.skewHandlerX = skewHandlerX; - controls.skewHandlerY = skewHandlerY; - controls.dragHandler = dragHandler; - controls.scaleOrSkewActionName = scaleOrSkewActionName; - controls.rotationStyleHandler = rotationStyleHandler; - controls.fireEvent = fireEvent; - controls.wrapWithFixedAnchor = wrapWithFixedAnchor; - controls.wrapWithFireEvent = wrapWithFireEvent; - controls.getLocalPoint = getLocalPoint; - fabric.controlsUtils = controls; +function dragHandler(eventData, transform, x, y) { + var target = transform.target, + newLeft = x - transform.offsetX, + newTop = y - transform.offsetY, + moveX = !target.get('lockMovementX') && target.left !== newLeft, + moveY = !target.get('lockMovementY') && target.top !== newTop; + moveX && target.set('left', newLeft); + moveY && target.set('top', newTop); + if (moveX || moveY) { + fireEvent('moving', commonEventInfo(eventData, transform, x, y)); + } + return moveX || moveY; +} + +controls.scaleCursorStyleHandler = scaleCursorStyleHandler; +controls.skewCursorStyleHandler = skewCursorStyleHandler; +controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; +controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); +controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); +controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); +controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); +controls.scalingYOrSkewingX = scalingYOrSkewingX; +controls.scalingXOrSkewingY = scalingXOrSkewingY; +controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); +controls.skewHandlerX = skewHandlerX; +controls.skewHandlerY = skewHandlerY; +controls.dragHandler = dragHandler; +controls.scaleOrSkewActionName = scaleOrSkewActionName; +controls.rotationStyleHandler = rotationStyleHandler; +controls.fireEvent = fireEvent; +controls.wrapWithFixedAnchor = wrapWithFixedAnchor; +controls.wrapWithFireEvent = wrapWithFireEvent; +controls.getLocalPoint = getLocalPoint; +fabric.controlsUtils = controls; diff --git a/src/filters/convolute_filter.class.js b/src/filters/convolute_filter.class.js index ba6f7ec9463..16e5f142dbf 100644 --- a/src/filters/convolute_filter.class.js +++ b/src/filters/convolute_filter.class.js @@ -1,9 +1,9 @@ - var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Adapted from html5rocks article * @class fabric.Image.filters.Convolute * @memberOf fabric.Image.filters @@ -48,30 +48,30 @@ * object.applyFilters(); * canvas.renderAll(); */ - filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { +filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Convolute', + type: 'Convolute', - /* + /* * Opaque value (true/false) */ - opaque: false, + opaque: false, - /* + /* * matrix for the filter, max 9x9 */ - matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], + matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], - /** + /** * Fragment source for the brightness program */ - fragmentSource: { - Convolute_3_1: 'precision highp float;\n' + + fragmentSource: { + Convolute_3_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[9];\n' + 'uniform float uStepW;\n' + @@ -87,7 +87,7 @@ '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_3_0: 'precision highp float;\n' + + Convolute_3_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[9];\n' + 'uniform float uStepW;\n' + @@ -105,7 +105,7 @@ 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - Convolute_5_1: 'precision highp float;\n' + + Convolute_5_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[25];\n' + 'uniform float uStepW;\n' + @@ -121,7 +121,7 @@ '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_5_0: 'precision highp float;\n' + + Convolute_5_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[25];\n' + 'uniform float uStepW;\n' + @@ -139,7 +139,7 @@ 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - Convolute_7_1: 'precision highp float;\n' + + Convolute_7_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[49];\n' + 'uniform float uStepW;\n' + @@ -155,7 +155,7 @@ '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_7_0: 'precision highp float;\n' + + Convolute_7_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[49];\n' + 'uniform float uStepW;\n' + @@ -173,7 +173,7 @@ 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - Convolute_9_1: 'precision highp float;\n' + + Convolute_9_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[81];\n' + 'uniform float uStepW;\n' + @@ -189,7 +189,7 @@ '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_9_0: 'precision highp float;\n' + + Convolute_9_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[81];\n' + 'uniform float uStepW;\n' + @@ -207,9 +207,9 @@ 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - }, + }, - /** + /** * Constructor * @memberOf fabric.Image.filters.Convolute.prototype * @param {Object} [options] Options object @@ -218,128 +218,128 @@ */ - /** + /** * Retrieves the cached shader. * @param {Object} options * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - retrieveShader: function(options) { - var size = Math.sqrt(this.matrix.length); - var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); - var shaderSource = this.fragmentSource[cacheKey]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + retrieveShader: function(options) { + var size = Math.sqrt(this.matrix.length); + var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); + var shaderSource = this.fragmentSource[cacheKey]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - /** + /** * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - weights = this.matrix, - side = Math.round(Math.sqrt(weights.length)), - halfSide = Math.floor(side / 2), - sw = imageData.width, - sh = imageData.height, - output = options.ctx.createImageData(sw, sh), - dst = output.data, - // go through the destination image pixels - alphaFac = this.opaque ? 1 : 0, - r, g, b, a, dstOff, - scx, scy, srcOff, wt, - x, y, cx, cy; + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + weights = this.matrix, + side = Math.round(Math.sqrt(weights.length)), + halfSide = Math.floor(side / 2), + sw = imageData.width, + sh = imageData.height, + output = options.ctx.createImageData(sw, sh), + dst = output.data, + // go through the destination image pixels + alphaFac = this.opaque ? 1 : 0, + r, g, b, a, dstOff, + scx, scy, srcOff, wt, + x, y, cx, cy; - for (y = 0; y < sh; y++) { - for (x = 0; x < sw; x++) { - dstOff = (y * sw + x) * 4; - // calculate the weighed sum of the source image pixels that - // fall under the convolution matrix - r = 0; g = 0; b = 0; a = 0; + for (y = 0; y < sh; y++) { + for (x = 0; x < sw; x++) { + dstOff = (y * sw + x) * 4; + // calculate the weighed sum of the source image pixels that + // fall under the convolution matrix + r = 0; g = 0; b = 0; a = 0; - for (cy = 0; cy < side; cy++) { - for (cx = 0; cx < side; cx++) { - scy = y + cy - halfSide; - scx = x + cx - halfSide; + for (cy = 0; cy < side; cy++) { + for (cx = 0; cx < side; cx++) { + scy = y + cy - halfSide; + scx = x + cx - halfSide; - // eslint-disable-next-line max-depth - if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { - continue; - } + // eslint-disable-next-line max-depth + if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { + continue; + } - srcOff = (scy * sw + scx) * 4; - wt = weights[cy * side + cx]; + srcOff = (scy * sw + scx) * 4; + wt = weights[cy * side + cx]; - r += data[srcOff] * wt; - g += data[srcOff + 1] * wt; - b += data[srcOff + 2] * wt; - // eslint-disable-next-line max-depth - if (!alphaFac) { - a += data[srcOff + 3] * wt; - } + r += data[srcOff] * wt; + g += data[srcOff + 1] * wt; + b += data[srcOff + 2] * wt; + // eslint-disable-next-line max-depth + if (!alphaFac) { + a += data[srcOff + 3] * wt; } } - dst[dstOff] = r; - dst[dstOff + 1] = g; - dst[dstOff + 2] = b; - if (!alphaFac) { - dst[dstOff + 3] = a; - } - else { - dst[dstOff + 3] = data[dstOff + 3]; - } + } + dst[dstOff] = r; + dst[dstOff + 1] = g; + dst[dstOff + 2] = b; + if (!alphaFac) { + dst[dstOff + 3] = a; + } + else { + dst[dstOff + 3] = data[dstOff + 3]; } } - options.imageData = output; - }, + } + options.imageData = output; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uMatrix: gl.getUniformLocation(program, 'uMatrix'), - uOpaque: gl.getUniformLocation(program, 'uOpaque'), - uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), - uSize: gl.getUniformLocation(program, 'uSize'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uMatrix: gl.getUniformLocation(program, 'uMatrix'), + uOpaque: gl.getUniformLocation(program, 'uOpaque'), + uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), + uSize: gl.getUniformLocation(program, 'uSize'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1fv(uniformLocations.uMatrix, this.matrix); - }, + sendUniformData: function(gl, uniformLocations) { + gl.uniform1fv(uniformLocations.uMatrix, this.matrix); + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return extend(this.callSuper('toObject'), { - opaque: this.opaque, - matrix: this.matrix - }); - } - }); + toObject: function() { + return extend(this.callSuper('toObject'), { + opaque: this.opaque, + matrix: this.matrix + }); + } +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/grayscale_filter.class.js b/src/filters/grayscale_filter.class.js index 3a7cd143ef3..bc501204170 100644 --- a/src/filters/grayscale_filter.class.js +++ b/src/filters/grayscale_filter.class.js @@ -1,8 +1,8 @@ - var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Grayscale image filter class * @class fabric.Image.filters.Grayscale * @memberOf fabric.Image.filters @@ -13,17 +13,17 @@ * object.filters.push(filter); * object.applyFilters(); */ - filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { +filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Grayscale', + type: 'Grayscale', - fragmentSource: { - average: 'precision highp float;\n' + + fragmentSource: { + average: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'varying vec2 vTexCoord;\n' + 'void main() {\n' + @@ -31,7 +31,7 @@ 'float average = (color.r + color.b + color.g) / 3.0;\n' + 'gl_FragColor = vec4(average, average, average, color.a);\n' + '}', - lightness: 'precision highp float;\n' + + lightness: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform int uMode;\n' + 'varying vec2 vTexCoord;\n' + @@ -40,7 +40,7 @@ 'float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\n' + 'gl_FragColor = vec4(average, average, average, col.a);\n' + '}', - luminosity: 'precision highp float;\n' + + luminosity: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform int uMode;\n' + 'varying vec2 vTexCoord;\n' + @@ -49,99 +49,99 @@ 'float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\n' + 'gl_FragColor = vec4(average, average, average, col.a);\n' + '}', - }, + }, - /** + /** * Grayscale mode, between 'average', 'lightness', 'luminosity' * @param {String} type * @default */ - mode: 'average', + mode: 'average', - mainParameter: 'mode', + mainParameter: 'mode', - /** + /** * Apply the Grayscale operation to a Uint8Array representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8Array to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length, value, - mode = this.mode; - for (i = 0; i < len; i += 4) { - if (mode === 'average') { - value = (data[i] + data[i + 1] + data[i + 2]) / 3; - } - else if (mode === 'lightness') { - value = (Math.min(data[i], data[i + 1], data[i + 2]) + + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length, value, + mode = this.mode; + for (i = 0; i < len; i += 4) { + if (mode === 'average') { + value = (data[i] + data[i + 1] + data[i + 2]) / 3; + } + else if (mode === 'lightness') { + value = (Math.min(data[i], data[i + 1], data[i + 2]) + Math.max(data[i], data[i + 1], data[i + 2])) / 2; - } - else if (mode === 'luminosity') { - value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; - } - data[i] = value; - data[i + 1] = value; - data[i + 2] = value; } - }, + else if (mode === 'luminosity') { + value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; + } + data[i] = value; + data[i + 1] = value; + data[i + 2] = value; + } + }, - /** + /** * Retrieves the cached shader. * @param {Object} options * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var shaderSource = this.fragmentSource[this.mode]; - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var shaderSource = this.fragmentSource[this.mode]; + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uMode: gl.getUniformLocation(program, 'uMode'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uMode: gl.getUniformLocation(program, 'uMode'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - // default average mode. - var mode = 1; - gl.uniform1i(uniformLocations.uMode, mode); - }, + sendUniformData: function(gl, uniformLocations) { + // default average mode. + var mode = 1; + gl.uniform1i(uniformLocations.uMode, mode); + }, - /** + /** * Grayscale filter isNeutralState implementation * The filter is never neutral * on the image **/ - isNeutralState: function() { - return false; - }, - }); + isNeutralState: function() { + return false; + }, +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/hue_rotation.class.js b/src/filters/hue_rotation.class.js index 6239f2e3025..142988bca57 100644 --- a/src/filters/hue_rotation.class.js +++ b/src/filters/hue_rotation.class.js @@ -1,8 +1,8 @@ - var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * HueRotation filter class * @class fabric.Image.filters.HueRotation * @memberOf fabric.Image.filters @@ -16,62 +16,62 @@ * object.filters.push(filter); * object.applyFilters(); */ - filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { +filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'HueRotation', + type: 'HueRotation', - /** + /** * HueRotation value, from -1 to 1. * the unit is radians * @param {Number} myParameter * @default */ - rotation: 0, + rotation: 0, - /** + /** * Describe the property that is the filter parameter * @param {String} m * @default */ - mainParameter: 'rotation', + mainParameter: 'rotation', - calculateMatrix: function() { - var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), - aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; - this.matrix = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ]; - this.matrix[0] = cos + OneMinusCos / 3; - this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[6] = cos + aThird * OneMinusCos; - this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[12] = cos + aThird * OneMinusCos; - }, + calculateMatrix: function() { + var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), + aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; + this.matrix = [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ]; + this.matrix[0] = cos + OneMinusCos / 3; + this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[6] = cos + aThird * OneMinusCos; + this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[12] = cos + aThird * OneMinusCos; + }, - /** + /** * HueRotation isNeutralState implementation * Used only in image applyFilters to discard filters that will not have an effect * on the image * @param {Object} options **/ - isNeutralState: function(options) { - this.calculateMatrix(); - return filters.BaseFilter.prototype.isNeutralState.call(this, options); - }, + isNeutralState: function(options) { + this.calculateMatrix(); + return filters.BaseFilter.prototype.isNeutralState.call(this, options); + }, - /** + /** * Apply this filter to the input image data provided. * * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. @@ -84,17 +84,17 @@ * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - applyTo: function(options) { - this.calculateMatrix(); - filters.BaseFilter.prototype.applyTo.call(this, options); - }, + applyTo: function(options) { + this.calculateMatrix(); + filters.BaseFilter.prototype.applyTo.call(this, options); + }, - }); +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/invert_filter.class.js b/src/filters/invert_filter.class.js index 60456755f4c..0d47dfe45ee 100644 --- a/src/filters/invert_filter.class.js +++ b/src/filters/invert_filter.class.js @@ -1,8 +1,8 @@ - var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Invert filter class * @class fabric.Image.filters.Invert * @memberOf fabric.Image.filters @@ -13,23 +13,23 @@ * object.filters.push(filter); * object.applyFilters(canvas.renderAll.bind(canvas)); */ - filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { +filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Invert', + type: 'Invert', - /** + /** * Invert also alpha. * @param {Boolean} alpha * @default **/ - alpha: false, + alpha: false, - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform int uInvert;\n' + 'uniform int uAlpha;\n' + @@ -47,75 +47,75 @@ '}\n' + '}', - /** + /** * Filter invert. if false, does nothing * @param {Boolean} invert * @default */ - invert: true, + invert: true, - mainParameter: 'invert', + mainParameter: 'invert', - /** + /** * Apply the Invert operation to a Uint8Array representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8Array to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length; - for (i = 0; i < len; i += 4) { - data[i] = 255 - data[i]; - data[i + 1] = 255 - data[i + 1]; - data[i + 2] = 255 - data[i + 2]; + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length; + for (i = 0; i < len; i += 4) { + data[i] = 255 - data[i]; + data[i + 1] = 255 - data[i + 1]; + data[i + 2] = 255 - data[i + 2]; - if (this.alpha) { - data[i + 3] = 255 - data[i + 3]; - } + if (this.alpha) { + data[i + 3] = 255 - data[i + 3]; } - }, + } + }, - /** + /** * Invert filter isNeutralState implementation * Used only in image applyFilters to discard filters that will not have an effect * on the image * @param {Object} options **/ - isNeutralState: function() { - return !this.invert; - }, + isNeutralState: function() { + return !this.invert; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uInvert: gl.getUniformLocation(program, 'uInvert'), - uAlpha: gl.getUniformLocation(program, 'uAlpha'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uInvert: gl.getUniformLocation(program, 'uInvert'), + uAlpha: gl.getUniformLocation(program, 'uAlpha'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1i(uniformLocations.uInvert, this.invert); - gl.uniform1i(uniformLocations.uAlpha, this.alpha); - }, - }); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1i(uniformLocations.uInvert, this.invert); + gl.uniform1i(uniformLocations.uAlpha, this.alpha); + }, +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/noise_filter.class.js b/src/filters/noise_filter.class.js index a90e4f29b42..830035105e5 100644 --- a/src/filters/noise_filter.class.js +++ b/src/filters/noise_filter.class.js @@ -1,9 +1,9 @@ - var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Noise filter class * @class fabric.Image.filters.Noise * @memberOf fabric.Image.filters @@ -18,19 +18,19 @@ * object.applyFilters(); * canvas.renderAll(); */ - filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { +filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Noise', + type: 'Noise', - /** + /** * Fragment source for the noise program */ - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uStepH;\n' + 'uniform float uNoise;\n' + @@ -45,83 +45,83 @@ 'gl_FragColor = color;\n' + '}', - /** + /** * Describe the property that is the filter parameter * @param {String} m * @default */ - mainParameter: 'noise', + mainParameter: 'noise', - /** + /** * Noise value, from * @param {Number} noise * @default */ - noise: 0, + noise: 0, - /** + /** * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - if (this.noise === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - noise = this.noise, rand; + applyTo2d: function(options) { + if (this.noise === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + noise = this.noise, rand; - for (i = 0, len = data.length; i < len; i += 4) { + for (i = 0, len = data.length; i < len; i += 4) { - rand = (0.5 - Math.random()) * noise; + rand = (0.5 - Math.random()) * noise; - data[i] += rand; - data[i + 1] += rand; - data[i + 2] += rand; - } - }, + data[i] += rand; + data[i + 1] += rand; + data[i + 2] += rand; + } + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uNoise: gl.getUniformLocation(program, 'uNoise'), - uSeed: gl.getUniformLocation(program, 'uSeed'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uNoise: gl.getUniformLocation(program, 'uNoise'), + uSeed: gl.getUniformLocation(program, 'uSeed'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uNoise, this.noise / 255); - gl.uniform1f(uniformLocations.uSeed, Math.random()); - }, + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uNoise, this.noise / 255); + gl.uniform1f(uniformLocations.uSeed, Math.random()); + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return extend(this.callSuper('toObject'), { - noise: this.noise - }); - } - }); + toObject: function() { + return extend(this.callSuper('toObject'), { + noise: this.noise + }); + } +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/pixelate_filter.class.js b/src/filters/pixelate_filter.class.js index 47baffc3a98..c957df64d63 100644 --- a/src/filters/pixelate_filter.class.js +++ b/src/filters/pixelate_filter.class.js @@ -1,8 +1,8 @@ - var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Pixelate filter class * @class fabric.Image.filters.Pixelate * @memberOf fabric.Image.filters @@ -16,23 +16,23 @@ * object.filters.push(filter); * object.applyFilters(); */ - filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { +filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Pixelate', + type: 'Pixelate', - blocksize: 4, + blocksize: 4, - mainParameter: 'blocksize', + mainParameter: 'blocksize', - /** + /** * Fragment source for the Pixelate program */ - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uBlocksize;\n' + 'uniform float uStepW;\n' + @@ -50,81 +50,81 @@ 'gl_FragColor = color;\n' + '}', - /** + /** * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = imageData.height, - jLen = imageData.width, - index, i, j, r, g, b, a, - _i, _j, _iLen, _jLen; + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = imageData.height, + jLen = imageData.width, + index, i, j, r, g, b, a, + _i, _j, _iLen, _jLen; - for (i = 0; i < iLen; i += this.blocksize) { - for (j = 0; j < jLen; j += this.blocksize) { + for (i = 0; i < iLen; i += this.blocksize) { + for (j = 0; j < jLen; j += this.blocksize) { - index = (i * 4) * jLen + (j * 4); + index = (i * 4) * jLen + (j * 4); - r = data[index]; - g = data[index + 1]; - b = data[index + 2]; - a = data[index + 3]; + r = data[index]; + g = data[index + 1]; + b = data[index + 2]; + a = data[index + 3]; - _iLen = Math.min(i + this.blocksize, iLen); - _jLen = Math.min(j + this.blocksize, jLen); - for (_i = i; _i < _iLen; _i++) { - for (_j = j; _j < _jLen; _j++) { - index = (_i * 4) * jLen + (_j * 4); - data[index] = r; - data[index + 1] = g; - data[index + 2] = b; - data[index + 3] = a; - } + _iLen = Math.min(i + this.blocksize, iLen); + _jLen = Math.min(j + this.blocksize, jLen); + for (_i = i; _i < _iLen; _i++) { + for (_j = j; _j < _jLen; _j++) { + index = (_i * 4) * jLen + (_j * 4); + data[index] = r; + data[index + 1] = g; + data[index + 2] = b; + data[index + 3] = a; } } } - }, + } + }, - /** + /** * Indicate when the filter is not gonna apply changes to the image **/ - isNeutralState: function() { - return this.blocksize === 1; - }, + isNeutralState: function() { + return this.blocksize === 1; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), - uStepW: gl.getUniformLocation(program, 'uStepW'), - uStepH: gl.getUniformLocation(program, 'uStepH'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), + uStepW: gl.getUniformLocation(program, 'uStepW'), + uStepH: gl.getUniformLocation(program, 'uStepH'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); - }, - }); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); + }, +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/removecolor_filter.class.js b/src/filters/removecolor_filter.class.js index ac77976fcd3..4aa06fd9a79 100644 --- a/src/filters/removecolor_filter.class.js +++ b/src/filters/removecolor_filter.class.js @@ -1,9 +1,9 @@ - var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Remove white filter class * @class fabric.Image.filters.RemoveColor * @memberOf fabric.Image.filters @@ -18,26 +18,26 @@ * object.applyFilters(); * canvas.renderAll(); */ - filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { +filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'RemoveColor', + type: 'RemoveColor', - /** + /** * Color to remove, in any format understood by fabric.Color. * @param {String} type * @default */ - color: '#FFFFFF', + color: '#FFFFFF', - /** + /** * Fragment source for the brightness program */ - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform vec4 uLow;\n' + 'uniform vec4 uHigh;\n' + @@ -49,19 +49,19 @@ '}\n' + '}', - /** + /** * distance to actual color, as value up or down from each r,g,b * between 0 and 1 **/ - distance: 0.02, + distance: 0.02, - /** + /** * For color to remove inside distance, use alpha channel for a smoother deletion * NOT IMPLEMENTED YET **/ - useAlpha: false, + useAlpha: false, - /** + /** * Constructor * @memberOf fabric.Image.filters.RemoveWhite.prototype * @param {Object} [options] Options object @@ -69,98 +69,98 @@ * @param {Number} [options.distance=10] Distance value */ - /** + /** * Applies filter to canvas element * @param {Object} canvasEl Canvas element to apply filter to */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - distance = this.distance * 255, - r, g, b, - source = new fabric.Color(this.color).getSource(), - lowC = [ - source[0] - distance, - source[1] - distance, - source[2] - distance, - ], - highC = [ - source[0] + distance, - source[1] + distance, - source[2] + distance, - ]; + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + distance = this.distance * 255, + r, g, b, + source = new fabric.Color(this.color).getSource(), + lowC = [ + source[0] - distance, + source[1] - distance, + source[2] - distance, + ], + highC = [ + source[0] + distance, + source[1] + distance, + source[2] + distance, + ]; - for (i = 0; i < data.length; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; + for (i = 0; i < data.length; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; - if (r > lowC[0] && + if (r > lowC[0] && g > lowC[1] && b > lowC[2] && r < highC[0] && g < highC[1] && b < highC[2]) { - data[i + 3] = 0; - } + data[i + 3] = 0; } - }, + } + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uLow: gl.getUniformLocation(program, 'uLow'), - uHigh: gl.getUniformLocation(program, 'uHigh'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uLow: gl.getUniformLocation(program, 'uLow'), + uHigh: gl.getUniformLocation(program, 'uHigh'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(), - distance = parseFloat(this.distance), - lowC = [ - 0 + source[0] / 255 - distance, - 0 + source[1] / 255 - distance, - 0 + source[2] / 255 - distance, - 1 - ], - highC = [ - source[0] / 255 + distance, - source[1] / 255 + distance, - source[2] / 255 + distance, - 1 - ]; - gl.uniform4fv(uniformLocations.uLow, lowC); - gl.uniform4fv(uniformLocations.uHigh, highC); - }, + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(), + distance = parseFloat(this.distance), + lowC = [ + 0 + source[0] / 255 - distance, + 0 + source[1] / 255 - distance, + 0 + source[2] / 255 - distance, + 1 + ], + highC = [ + source[0] / 255 + distance, + source[1] / 255 + distance, + source[2] / 255 + distance, + 1 + ]; + gl.uniform4fv(uniformLocations.uLow, lowC); + gl.uniform4fv(uniformLocations.uHigh, highC); + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return extend(this.callSuper('toObject'), { - color: this.color, - distance: this.distance - }); - } - }); + toObject: function() { + return extend(this.callSuper('toObject'), { + color: this.color, + distance: this.distance + }); + } +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/resize_filter.class.js b/src/filters/resize_filter.class.js index 77347dc66d1..f9d6c1b5f53 100644 --- a/src/filters/resize_filter.class.js +++ b/src/filters/resize_filter.class.js @@ -1,10 +1,10 @@ - var fabric = exports.fabric || (exports.fabric = { }), pow = Math.pow, floor = Math.floor, - sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, - ceil = Math.ceil, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), pow = Math.pow, floor = Math.floor, + sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, + ceil = Math.ceil, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Resize image filter class * @class fabric.Image.filters.Resize * @memberOf fabric.Image.filters @@ -15,132 +15,132 @@ * object.filters.push(filter); * object.applyFilters(canvas.renderAll.bind(canvas)); */ - filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { +filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Resize', + type: 'Resize', - /** + /** * Resize type * for webgl resizeType is just lanczos, for canvas2d can be: * bilinear, hermite, sliceHack, lanczos. * @param {String} resizeType * @default */ - resizeType: 'hermite', + resizeType: 'hermite', - /** + /** * Scale factor for resizing, x axis * @param {Number} scaleX * @default */ - scaleX: 1, + scaleX: 1, - /** + /** * Scale factor for resizing, y axis * @param {Number} scaleY * @default */ - scaleY: 1, + scaleY: 1, - /** + /** * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos * @param {Number} lanczosLobes * @default */ - lanczosLobes: 3, + lanczosLobes: 3, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uDelta: gl.getUniformLocation(program, 'uDelta'), - uTaps: gl.getUniformLocation(program, 'uTaps'), - }; - }, - - /** + getUniformLocations: function(gl, program) { + return { + uDelta: gl.getUniformLocation(program, 'uDelta'), + uTaps: gl.getUniformLocation(program, 'uTaps'), + }; + }, + + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); - gl.uniform1fv(uniformLocations.uTaps, this.taps); - }, + sendUniformData: function(gl, uniformLocations) { + gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); + gl.uniform1fv(uniformLocations.uTaps, this.taps); + }, - /** + /** * Retrieves the cached shader. * @param {Object} options * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - retrieveShader: function(options) { - var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var fragmentShader = this.generateShader(filterWindow); - options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); - } - return options.programCache[cacheKey]; - }, - - getFilterWindow: function() { - var scale = this.tempScale; - return Math.ceil(this.lanczosLobes / scale); - }, - - getTaps: function() { - var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, - filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); - for (var i = 1; i <= filterWindow; i++) { - taps[i - 1] = lobeFunction(i * scale); - } - return taps; - }, + retrieveShader: function(options) { + var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var fragmentShader = this.generateShader(filterWindow); + options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); + } + return options.programCache[cacheKey]; + }, + + getFilterWindow: function() { + var scale = this.tempScale; + return Math.ceil(this.lanczosLobes / scale); + }, + + getTaps: function() { + var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, + filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); + for (var i = 1; i <= filterWindow; i++) { + taps[i - 1] = lobeFunction(i * scale); + } + return taps; + }, - /** + /** * Generate vertex and shader sources from the necessary steps numbers * @param {Number} filterWindow */ - generateShader: function(filterWindow) { - var offsets = new Array(filterWindow), - fragmentShader = this.fragmentSourceTOP, filterWindow; + generateShader: function(filterWindow) { + var offsets = new Array(filterWindow), + fragmentShader = this.fragmentSourceTOP, filterWindow; - for (var i = 1; i <= filterWindow; i++) { - offsets[i - 1] = i + '.0 * uDelta'; - } + for (var i = 1; i <= filterWindow; i++) { + offsets[i - 1] = i + '.0 * uDelta'; + } - fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; - fragmentShader += 'void main() {\n'; - fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; - fragmentShader += ' float sum = 1.0;\n'; - - offsets.forEach(function(offset, i) { - fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; - }); - fragmentShader += ' gl_FragColor = color / sum;\n'; - fragmentShader += '}'; - return fragmentShader; - }, - - fragmentSourceTOP: 'precision highp float;\n' + + fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; + fragmentShader += 'void main() {\n'; + fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; + fragmentShader += ' float sum = 1.0;\n'; + + offsets.forEach(function(offset, i) { + fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; + }); + fragmentShader += ' gl_FragColor = color / sum;\n'; + fragmentShader += '}'; + return fragmentShader; + }, + + fragmentSourceTOP: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform vec2 uDelta;\n' + 'varying vec2 vTexCoord;\n', - /** + /** * Apply the resize filter to the image * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. * @@ -152,90 +152,90 @@ * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - applyTo: function(options) { - if (options.webgl) { - options.passes++; - this.width = options.sourceWidth; - this.horizontal = true; - this.dW = Math.round(this.width * this.scaleX); - this.dH = options.sourceHeight; - this.tempScale = this.dW / this.width; - this.taps = this.getTaps(); - options.destinationWidth = this.dW; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceWidth = options.destinationWidth; - - this.height = options.sourceHeight; - this.horizontal = false; - this.dH = Math.round(this.height * this.scaleY); - this.tempScale = this.dH / this.height; - this.taps = this.getTaps(); - options.destinationHeight = this.dH; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceHeight = options.destinationHeight; - } - else { - this.applyTo2d(options); - } - }, + applyTo: function(options) { + if (options.webgl) { + options.passes++; + this.width = options.sourceWidth; + this.horizontal = true; + this.dW = Math.round(this.width * this.scaleX); + this.dH = options.sourceHeight; + this.tempScale = this.dW / this.width; + this.taps = this.getTaps(); + options.destinationWidth = this.dW; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceWidth = options.destinationWidth; + + this.height = options.sourceHeight; + this.horizontal = false; + this.dH = Math.round(this.height * this.scaleY); + this.tempScale = this.dH / this.height; + this.taps = this.getTaps(); + options.destinationHeight = this.dH; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceHeight = options.destinationHeight; + } + else { + this.applyTo2d(options); + } + }, - isNeutralState: function() { - return this.scaleX === 1 && this.scaleY === 1; - }, + isNeutralState: function() { + return this.scaleX === 1 && this.scaleY === 1; + }, - lanczosCreate: function(lobes) { - return function(x) { - if (x >= lobes || x <= -lobes) { - return 0.0; - } - if (x < 1.19209290E-07 && x > -1.19209290E-07) { - return 1.0; - } - x *= Math.PI; - var xx = x / lobes; - return (sin(x) / x) * sin(xx) / xx; - }; - }, + lanczosCreate: function(lobes) { + return function(x) { + if (x >= lobes || x <= -lobes) { + return 0.0; + } + if (x < 1.19209290E-07 && x > -1.19209290E-07) { + return 1.0; + } + x *= Math.PI; + var xx = x / lobes; + return (sin(x) / x) * sin(xx) / xx; + }; + }, - /** + /** * Applies filter to canvas element * @memberOf fabric.Image.filters.Resize.prototype * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} scaleX * @param {Number} scaleY */ - applyTo2d: function(options) { - var imageData = options.imageData, - scaleX = this.scaleX, - scaleY = this.scaleY; + applyTo2d: function(options) { + var imageData = options.imageData, + scaleX = this.scaleX, + scaleY = this.scaleY; - this.rcpScaleX = 1 / scaleX; - this.rcpScaleY = 1 / scaleY; + this.rcpScaleX = 1 / scaleX; + this.rcpScaleY = 1 / scaleY; - var oW = imageData.width, oH = imageData.height, - dW = round(oW * scaleX), dH = round(oH * scaleY), - newData; + var oW = imageData.width, oH = imageData.height, + dW = round(oW * scaleX), dH = round(oH * scaleY), + newData; - if (this.resizeType === 'sliceHack') { - newData = this.sliceByTwo(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'hermite') { - newData = this.hermiteFastResize(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'bilinear') { - newData = this.bilinearFiltering(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'lanczos') { - newData = this.lanczosResize(options, oW, oH, dW, dH); - } - options.imageData = newData; - }, + if (this.resizeType === 'sliceHack') { + newData = this.sliceByTwo(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'hermite') { + newData = this.hermiteFastResize(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'bilinear') { + newData = this.bilinearFiltering(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'lanczos') { + newData = this.lanczosResize(options, oW, oH, dW, dH); + } + options.imageData = newData; + }, - /** + /** * Filter sliceByTwo * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -244,52 +244,52 @@ * @param {Number} dH Destination Height * @returns {ImageData} */ - sliceByTwo: function(options, oW, oH, dW, dH) { - var imageData = options.imageData, - mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, - stepH = oH * mult, resources = fabric.filterBackend.resources, - tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; - if (!resources.sliceByTwo) { - resources.sliceByTwo = document.createElement('canvas'); + sliceByTwo: function(options, oW, oH, dW, dH) { + var imageData = options.imageData, + mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, + stepH = oH * mult, resources = fabric.filterBackend.resources, + tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; + if (!resources.sliceByTwo) { + resources.sliceByTwo = document.createElement('canvas'); + } + tmpCanvas = resources.sliceByTwo; + if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { + tmpCanvas.width = oW * 1.5; + tmpCanvas.height = oH; + } + ctx = tmpCanvas.getContext('2d'); + ctx.clearRect(0, 0, oW * 1.5, oH); + ctx.putImageData(imageData, 0, 0); + + dW = floor(dW); + dH = floor(dH); + + while (!doneW || !doneH) { + oW = stepW; + oH = stepH; + if (dW < floor(stepW * mult)) { + stepW = floor(stepW * mult); } - tmpCanvas = resources.sliceByTwo; - if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { - tmpCanvas.width = oW * 1.5; - tmpCanvas.height = oH; + else { + stepW = dW; + doneW = true; } - ctx = tmpCanvas.getContext('2d'); - ctx.clearRect(0, 0, oW * 1.5, oH); - ctx.putImageData(imageData, 0, 0); - - dW = floor(dW); - dH = floor(dH); - - while (!doneW || !doneH) { - oW = stepW; - oH = stepH; - if (dW < floor(stepW * mult)) { - stepW = floor(stepW * mult); - } - else { - stepW = dW; - doneW = true; - } - if (dH < floor(stepH * mult)) { - stepH = floor(stepH * mult); - } - else { - stepH = dH; - doneH = true; - } - ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); - sX = dX; - sY = dY; - dY += stepH; + if (dH < floor(stepH * mult)) { + stepH = floor(stepH * mult); + } + else { + stepH = dH; + doneH = true; } - return ctx.getImageData(sX, sY, dW, dH); - }, + ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); + sX = dX; + sY = dY; + dY += stepH; + } + return ctx.getImageData(sX, sY, dW, dH); + }, - /** + /** * Filter lanczosResize * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -298,73 +298,73 @@ * @param {Number} dH Destination Height * @returns {ImageData} */ - lanczosResize: function(options, oW, oH, dW, dH) { - - function process(u) { - var v, i, weight, idx, a, red, green, - blue, alpha, fX, fY; - center.x = (u + 0.5) * ratioX; - icenter.x = floor(center.x); - for (v = 0; v < dH; v++) { - center.y = (v + 0.5) * ratioY; - icenter.y = floor(center.y); - a = 0; red = 0; green = 0; blue = 0; alpha = 0; - for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { - if (i < 0 || i >= oW) { + lanczosResize: function(options, oW, oH, dW, dH) { + + function process(u) { + var v, i, weight, idx, a, red, green, + blue, alpha, fX, fY; + center.x = (u + 0.5) * ratioX; + icenter.x = floor(center.x); + for (v = 0; v < dH; v++) { + center.y = (v + 0.5) * ratioY; + icenter.y = floor(center.y); + a = 0; red = 0; green = 0; blue = 0; alpha = 0; + for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { + if (i < 0 || i >= oW) { + continue; + } + fX = floor(1000 * abs(i - center.x)); + if (!cacheLanc[fX]) { + cacheLanc[fX] = { }; + } + for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { + if (j < 0 || j >= oH) { continue; } - fX = floor(1000 * abs(i - center.x)); - if (!cacheLanc[fX]) { - cacheLanc[fX] = { }; + fY = floor(1000 * abs(j - center.y)); + if (!cacheLanc[fX][fY]) { + cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); } - for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { - if (j < 0 || j >= oH) { - continue; - } - fY = floor(1000 * abs(j - center.y)); - if (!cacheLanc[fX][fY]) { - cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); - } - weight = cacheLanc[fX][fY]; - if (weight > 0) { - idx = (j * oW + i) * 4; - a += weight; - red += weight * srcData[idx]; - green += weight * srcData[idx + 1]; - blue += weight * srcData[idx + 2]; - alpha += weight * srcData[idx + 3]; - } + weight = cacheLanc[fX][fY]; + if (weight > 0) { + idx = (j * oW + i) * 4; + a += weight; + red += weight * srcData[idx]; + green += weight * srcData[idx + 1]; + blue += weight * srcData[idx + 2]; + alpha += weight * srcData[idx + 3]; } } - idx = (v * dW + u) * 4; - destData[idx] = red / a; - destData[idx + 1] = green / a; - destData[idx + 2] = blue / a; - destData[idx + 3] = alpha / a; } + idx = (v * dW + u) * 4; + destData[idx] = red / a; + destData[idx + 1] = green / a; + destData[idx + 2] = blue / a; + destData[idx + 3] = alpha / a; + } - if (++u < dW) { - return process(u); - } - else { - return destImg; - } + if (++u < dW) { + return process(u); } + else { + return destImg; + } + } - var srcData = options.imageData.data, - destImg = options.ctx.createImageData(dW, dH), - destData = destImg.data, - lanczos = this.lanczosCreate(this.lanczosLobes), - ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, - rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, - range2X = ceil(ratioX * this.lanczosLobes / 2), - range2Y = ceil(ratioY * this.lanczosLobes / 2), - cacheLanc = { }, center = { }, icenter = { }; + var srcData = options.imageData.data, + destImg = options.ctx.createImageData(dW, dH), + destData = destImg.data, + lanczos = this.lanczosCreate(this.lanczosLobes), + ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, + rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, + range2X = ceil(ratioX * this.lanczosLobes / 2), + range2Y = ceil(ratioY * this.lanczosLobes / 2), + cacheLanc = { }, center = { }, icenter = { }; - return process(0); - }, + return process(0); + }, - /** + /** * bilinearFiltering * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -373,36 +373,36 @@ * @param {Number} dH Destination Height * @returns {ImageData} */ - bilinearFiltering: function(options, oW, oH, dW, dH) { - var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, - color, offset = 0, origPix, ratioX = this.rcpScaleX, - ratioY = this.rcpScaleY, - w4 = 4 * (oW - 1), img = options.imageData, - pixels = img.data, destImage = options.ctx.createImageData(dW, dH), - destPixels = destImage.data; - for (i = 0; i < dH; i++) { - for (j = 0; j < dW; j++) { - x = floor(ratioX * j); - y = floor(ratioY * i); - xDiff = ratioX * j - x; - yDiff = ratioY * i - y; - origPix = 4 * (y * oW + x); - - for (chnl = 0; chnl < 4; chnl++) { - a = pixels[origPix + chnl]; - b = pixels[origPix + 4 + chnl]; - c = pixels[origPix + w4 + chnl]; - d = pixels[origPix + w4 + 4 + chnl]; - color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + + bilinearFiltering: function(options, oW, oH, dW, dH) { + var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, + color, offset = 0, origPix, ratioX = this.rcpScaleX, + ratioY = this.rcpScaleY, + w4 = 4 * (oW - 1), img = options.imageData, + pixels = img.data, destImage = options.ctx.createImageData(dW, dH), + destPixels = destImage.data; + for (i = 0; i < dH; i++) { + for (j = 0; j < dW; j++) { + x = floor(ratioX * j); + y = floor(ratioY * i); + xDiff = ratioX * j - x; + yDiff = ratioY * i - y; + origPix = 4 * (y * oW + x); + + for (chnl = 0; chnl < 4; chnl++) { + a = pixels[origPix + chnl]; + b = pixels[origPix + 4 + chnl]; + c = pixels[origPix + w4 + chnl]; + d = pixels[origPix + w4 + 4 + chnl]; + color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + c * yDiff * (1 - xDiff) + d * xDiff * yDiff; - destPixels[offset++] = color; - } + destPixels[offset++] = color; } } - return destImage; - }, + } + return destImage; + }, - /** + /** * hermiteFastResize * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -411,73 +411,73 @@ * @param {Number} dH Destination Height * @returns {ImageData} */ - hermiteFastResize: function(options, oW, oH, dW, dH) { - var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, - ratioWHalf = ceil(ratioW / 2), - ratioHHalf = ceil(ratioH / 2), - img = options.imageData, data = img.data, - img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; - for (var j = 0; j < dH; j++) { - for (var i = 0; i < dW; i++) { - var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, - gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; - for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { - var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, - centerX = (i + 0.5) * ratioW, w0 = dy * dy; - for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { - var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, - w = sqrt(w0 + dx * dx); - /* eslint-disable max-depth */ - if (w > 1 && w < -1) { - continue; - } - //hermite filter - weight = 2 * w * w * w - 3 * w * w + 1; - if (weight > 0) { - dx = 4 * (xx + yy * oW); - //alpha - gxA += weight * data[dx + 3]; - weightsAlpha += weight; - //colors - if (data[dx + 3] < 255) { - weight = weight * data[dx + 3] / 250; - } - gxR += weight * data[dx]; - gxG += weight * data[dx + 1]; - gxB += weight * data[dx + 2]; - weights += weight; + hermiteFastResize: function(options, oW, oH, dW, dH) { + var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, + ratioWHalf = ceil(ratioW / 2), + ratioHHalf = ceil(ratioH / 2), + img = options.imageData, data = img.data, + img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; + for (var j = 0; j < dH; j++) { + for (var i = 0; i < dW; i++) { + var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, + gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; + for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { + var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, + centerX = (i + 0.5) * ratioW, w0 = dy * dy; + for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { + var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, + w = sqrt(w0 + dx * dx); + /* eslint-disable max-depth */ + if (w > 1 && w < -1) { + continue; + } + //hermite filter + weight = 2 * w * w * w - 3 * w * w + 1; + if (weight > 0) { + dx = 4 * (xx + yy * oW); + //alpha + gxA += weight * data[dx + 3]; + weightsAlpha += weight; + //colors + if (data[dx + 3] < 255) { + weight = weight * data[dx + 3] / 250; } - /* eslint-enable max-depth */ + gxR += weight * data[dx]; + gxG += weight * data[dx + 1]; + gxB += weight * data[dx + 2]; + weights += weight; } + /* eslint-enable max-depth */ } - data2[x2] = gxR / weights; - data2[x2 + 1] = gxG / weights; - data2[x2 + 2] = gxB / weights; - data2[x2 + 3] = gxA / weightsAlpha; } + data2[x2] = gxR / weights; + data2[x2 + 1] = gxG / weights; + data2[x2 + 2] = gxB / weights; + data2[x2 + 3] = gxA / weightsAlpha; } - return img2; - }, + } + return img2; + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return { - type: this.type, - scaleX: this.scaleX, - scaleY: this.scaleY, - resizeType: this.resizeType, - lanczosLobes: this.lanczosLobes - }; - } - }); - - /** + toObject: function() { + return { + type: this.type, + scaleX: this.scaleX, + scaleY: this.scaleY, + resizeType: this.resizeType, + lanczosLobes: this.lanczosLobes + }; + } +}); + +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/saturate_filter.class.js b/src/filters/saturate_filter.class.js index 25b0b4f09be..3cae389c285 100644 --- a/src/filters/saturate_filter.class.js +++ b/src/filters/saturate_filter.class.js @@ -1,8 +1,8 @@ - var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Saturate filter class * @class fabric.Image.filters.Saturation * @memberOf fabric.Image.filters @@ -16,16 +16,16 @@ * object.filters.push(filter); * object.applyFilters(); */ - filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { +filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Saturation', + type: 'Saturation', - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uSaturation;\n' + 'varying vec2 vTexCoord;\n' + @@ -39,7 +39,7 @@ 'gl_FragColor = color;\n' + '}', - /** + /** * Saturation value, from -1 to 1. * Increases/decreases the color saturation. * A value of 0 has no effect. @@ -47,66 +47,66 @@ * @param {Number} saturation * @default */ - saturation: 0, + saturation: 0, - mainParameter: 'saturation', + mainParameter: 'saturation', - /** + /** * Constructor * @memberOf fabric.Image.filters.Saturate.prototype * @param {Object} [options] Options object * @param {Number} [options.saturate=0] Value to saturate the image (-1...1) */ - /** + /** * Apply the Saturation operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - if (this.saturation === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.saturation, i, max; + applyTo2d: function(options) { + if (this.saturation === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.saturation, i, max; - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; - } - }, + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; + } + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uSaturation: gl.getUniformLocation(program, 'uSaturation'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uSaturation: gl.getUniformLocation(program, 'uSaturation'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uSaturation, -this.saturation); - }, - }); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uSaturation, -this.saturation); + }, +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/vibrance_filter.class.js b/src/filters/vibrance_filter.class.js index a40ad4059b3..e3f9dd2b8ed 100644 --- a/src/filters/vibrance_filter.class.js +++ b/src/filters/vibrance_filter.class.js @@ -1,8 +1,8 @@ - var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +var fabric = exports.fabric || (exports.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** +/** * Vibrance filter class * @class fabric.Image.filters.Vibrance * @memberOf fabric.Image.filters @@ -16,16 +16,16 @@ * object.filters.push(filter); * object.applyFilters(); */ - filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { +filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Vibrance', + type: 'Vibrance', - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uVibrance;\n' + 'varying vec2 vTexCoord;\n' + @@ -40,7 +40,7 @@ 'gl_FragColor = color;\n' + '}', - /** + /** * Vibrance value, from -1 to 1. * Increases/decreases the saturation of more muted colors with less effect on saturated colors. * A value of 0 has no effect. @@ -48,68 +48,68 @@ * @param {Number} vibrance * @default */ - vibrance: 0, + vibrance: 0, - mainParameter: 'vibrance', + mainParameter: 'vibrance', - /** + /** * Constructor * @memberOf fabric.Image.filters.Vibrance.prototype * @param {Object} [options] Options object * @param {Number} [options.vibrance=0] Vibrance value for the image (between -1 and 1) */ - /** + /** * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - if (this.vibrance === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.vibrance, i, max, avg, amt; + applyTo2d: function(options) { + if (this.vibrance === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.vibrance, i, max, avg, amt; - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - avg = (data[i] + data[i + 1] + data[i + 2]) / 3; - amt = ((Math.abs(max - avg) * 2 / 255) * adjust); - data[i] += max !== data[i] ? (max - data[i]) * amt : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; - } - }, + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + amt = ((Math.abs(max - avg) * 2 / 255) * adjust); + data[i] += max !== data[i] ? (max - data[i]) * amt : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; + } + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uVibrance: gl.getUniformLocation(program, 'uVibrance'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uVibrance: gl.getUniformLocation(program, 'uVibrance'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); - }, - }); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); + }, +}); - /** +/** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; +fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; diff --git a/src/filters/webgl_backend.class.js b/src/filters/webgl_backend.class.js index de265a4b9dc..655644cc132 100644 --- a/src/filters/webgl_backend.class.js +++ b/src/filters/webgl_backend.class.js @@ -1,174 +1,174 @@ - /** +/** * Tests if webgl supports certain precision * @param {WebGL} Canvas WebGL context to test on * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp' * @returns {Boolean} Whether the user's browser WebGL supports given precision. */ - function testPrecision(gl, precision){ - var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; - var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(fragmentShader, fragmentSource); - gl.compileShader(fragmentShader); - if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { - return false; - } - return true; +function testPrecision(gl, precision){ + var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + return false; } + return true; +} - /** +/** * Indicate whether this filtering backend is supported by the user's browser. * @param {Number} tileSize check if the tileSize is supported * @returns {Boolean} Whether the user's browser supports WebGL. */ - fabric.isWebglSupported = function(tileSize) { - if (fabric.isLikelyNode) { - return false; - } - tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; - var canvas = document.createElement('canvas'); - var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); - var isSupported = false; - // eslint-disable-next-line +fabric.isWebglSupported = function(tileSize) { + if (fabric.isLikelyNode) { + return false; + } + tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; + var canvas = document.createElement('canvas'); + var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); + var isSupported = false; + // eslint-disable-next-line if (gl) { - fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); - isSupported = fabric.maxTextureSize >= tileSize; - var precisions = ['highp', 'mediump', 'lowp']; - for (var i = 0; i < 3; i++){ - if (testPrecision(gl, precisions[i])){ - fabric.webGlPrecision = precisions[i]; - break; - }; - } + fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); + isSupported = fabric.maxTextureSize >= tileSize; + var precisions = ['highp', 'mediump', 'lowp']; + for (var i = 0; i < 3; i++){ + if (testPrecision(gl, precisions[i])){ + fabric.webGlPrecision = precisions[i]; + break; + }; } - this.isSupported = isSupported; - return isSupported; - }; + } + this.isSupported = isSupported; + return isSupported; +}; - fabric.WebglFilterBackend = WebglFilterBackend; +fabric.WebglFilterBackend = WebglFilterBackend; - /** +/** * WebGL filter backend. */ - function WebglFilterBackend(options) { - if (options && options.tileSize) { - this.tileSize = options.tileSize; - } - this.setupGLContext(this.tileSize, this.tileSize); - this.captureGPUInfo(); - }; +function WebglFilterBackend(options) { + if (options && options.tileSize) { + this.tileSize = options.tileSize; + } + this.setupGLContext(this.tileSize, this.tileSize); + this.captureGPUInfo(); +}; - WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { +WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { - tileSize: 2048, + tileSize: 2048, - /** + /** * Experimental. This object is a sort of repository of help layers used to avoid * of recreating them during frequent filtering. If you are previewing a filter with * a slider you probably do not want to create help layers every filter step. * in this object there will be appended some canvases, created once, resized sometimes * cleared never. Clearing is left to the developer. **/ - resources: { + resources: { - }, + }, - /** + /** * Setup a WebGL context suitable for filtering, and bind any needed event handlers. */ - setupGLContext: function(width, height) { - this.dispose(); - this.createWebGLCanvas(width, height); - // eslint-disable-next-line + setupGLContext: function(width, height) { + this.dispose(); + this.createWebGLCanvas(width, height); + // eslint-disable-next-line this.aPosition = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]); - this.chooseFastestCopyGLTo2DMethod(width, height); - }, + this.chooseFastestCopyGLTo2DMethod(width, height); + }, - /** + /** * Pick a method to copy data from GL context to 2d canvas. In some browsers using * putImageData is faster than drawImage for that specific operation. */ - chooseFastestCopyGLTo2DMethod: function(width, height) { - var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; - try { - new ImageData(1, 1); - canUseImageData = true; - } - catch (e) { - canUseImageData = false; - } - // eslint-disable-next-line no-undef - var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; - // eslint-disable-next-line no-undef - var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; + chooseFastestCopyGLTo2DMethod: function(width, height) { + var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; + try { + new ImageData(1, 1); + canUseImageData = true; + } + catch (e) { + canUseImageData = false; + } + // eslint-disable-next-line no-undef + var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; + // eslint-disable-next-line no-undef + var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; - if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { - return; - } + if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { + return; + } - var targetCanvas = fabric.util.createCanvasElement(); - // eslint-disable-next-line no-undef - var imageBuffer = new ArrayBuffer(width * height * 4); - if (fabric.forceGLPutImageData) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - return; - } - var testContext = { - imageBuffer: imageBuffer, - destinationWidth: width, - destinationHeight: height, - targetCanvas: targetCanvas - }; - var startTime, drawImageTime, putImageDataTime; - targetCanvas.width = width; - targetCanvas.height = height; + var targetCanvas = fabric.util.createCanvasElement(); + // eslint-disable-next-line no-undef + var imageBuffer = new ArrayBuffer(width * height * 4); + if (fabric.forceGLPutImageData) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + return; + } + var testContext = { + imageBuffer: imageBuffer, + destinationWidth: width, + destinationHeight: height, + targetCanvas: targetCanvas + }; + var startTime, drawImageTime, putImageDataTime; + targetCanvas.width = width; + targetCanvas.height = height; - startTime = window.performance.now(); - copyGLTo2DDrawImage.call(testContext, this.gl, testContext); - drawImageTime = window.performance.now() - startTime; + startTime = window.performance.now(); + copyGLTo2DDrawImage.call(testContext, this.gl, testContext); + drawImageTime = window.performance.now() - startTime; - startTime = window.performance.now(); - copyGLTo2DPutImageData.call(testContext, this.gl, testContext); - putImageDataTime = window.performance.now() - startTime; + startTime = window.performance.now(); + copyGLTo2DPutImageData.call(testContext, this.gl, testContext); + putImageDataTime = window.performance.now() - startTime; - if (drawImageTime > putImageDataTime) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - } - else { - this.copyGLTo2D = copyGLTo2DDrawImage; - } - }, + if (drawImageTime > putImageDataTime) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + } + else { + this.copyGLTo2D = copyGLTo2DDrawImage; + } + }, - /** + /** * Create a canvas element and associated WebGL context and attaches them as * class properties to the GLFilterBackend class. */ - createWebGLCanvas: function(width, height) { - var canvas = fabric.util.createCanvasElement(); - canvas.width = width; - canvas.height = height; - var glOptions = { - alpha: true, - premultipliedAlpha: false, - depth: false, - stencil: false, - antialias: false - }, - gl = canvas.getContext('webgl', glOptions); - if (!gl) { - gl = canvas.getContext('experimental-webgl', glOptions); - } - if (!gl) { - return; - } - gl.clearColor(0, 0, 0, 0); - // this canvas can fire webglcontextlost and webglcontextrestored - this.canvas = canvas; - this.gl = gl; - }, + createWebGLCanvas: function(width, height) { + var canvas = fabric.util.createCanvasElement(); + canvas.width = width; + canvas.height = height; + var glOptions = { + alpha: true, + premultipliedAlpha: false, + depth: false, + stencil: false, + antialias: false + }, + gl = canvas.getContext('webgl', glOptions); + if (!gl) { + gl = canvas.getContext('experimental-webgl', glOptions); + } + if (!gl) { + return; + } + gl.clearColor(0, 0, 0, 0); + // this canvas can fire webglcontextlost and webglcontextrestored + this.canvas = canvas; + this.gl = gl; + }, - /** + /** * Attempts to apply the requested filters to the source provided, drawing the filtered output * to the provided target canvas. * @@ -180,65 +180,65 @@ * @param {String|undefined} cacheKey A key used to cache resources related to the source. If * omitted, caching will be skipped. */ - applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { - var gl = this.gl; - var cachedTexture; - if (cacheKey) { - cachedTexture = this.getCachedTexture(cacheKey, source); - } - var pipelineState = { - originalWidth: source.width || source.originalWidth, - originalHeight: source.height || source.originalHeight, - sourceWidth: width, - sourceHeight: height, - destinationWidth: width, - destinationHeight: height, - context: gl, - sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), - targetTexture: this.createTexture(gl, width, height), - originalTexture: cachedTexture || + applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { + var gl = this.gl; + var cachedTexture; + if (cacheKey) { + cachedTexture = this.getCachedTexture(cacheKey, source); + } + var pipelineState = { + originalWidth: source.width || source.originalWidth, + originalHeight: source.height || source.originalHeight, + sourceWidth: width, + sourceHeight: height, + destinationWidth: width, + destinationHeight: height, + context: gl, + sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), + targetTexture: this.createTexture(gl, width, height), + originalTexture: cachedTexture || this.createTexture(gl, width, height, !cachedTexture && source), - passes: filters.length, - webgl: true, - aPosition: this.aPosition, - programCache: this.programCache, - pass: 0, - filterBackend: this, - targetCanvas: targetCanvas - }; - var tempFbo = gl.createFramebuffer(); - gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); - filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); - resizeCanvasIfNeeded(pipelineState); - this.copyGLTo2D(gl, pipelineState); - gl.bindTexture(gl.TEXTURE_2D, null); - gl.deleteTexture(pipelineState.sourceTexture); - gl.deleteTexture(pipelineState.targetTexture); - gl.deleteFramebuffer(tempFbo); - targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); - return pipelineState; - }, + passes: filters.length, + webgl: true, + aPosition: this.aPosition, + programCache: this.programCache, + pass: 0, + filterBackend: this, + targetCanvas: targetCanvas + }; + var tempFbo = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); + filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); + resizeCanvasIfNeeded(pipelineState); + this.copyGLTo2D(gl, pipelineState); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.deleteTexture(pipelineState.sourceTexture); + gl.deleteTexture(pipelineState.targetTexture); + gl.deleteFramebuffer(tempFbo); + targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); + return pipelineState; + }, - /** + /** * Detach event listeners, remove references, and clean up caches. */ - dispose: function() { - if (this.canvas) { - this.canvas = null; - this.gl = null; - } - this.clearWebGLCaches(); - }, + dispose: function() { + if (this.canvas) { + this.canvas = null; + this.gl = null; + } + this.clearWebGLCaches(); + }, - /** + /** * Wipe out WebGL-related caches. */ - clearWebGLCaches: function() { - this.programCache = {}; - this.textureCache = {}; - }, + clearWebGLCaches: function() { + this.programCache = {}; + this.textureCache = {}; + }, - /** + /** * Create a WebGL texture object. * * Accepts specific dimensions to initialize the texture to or a source image. @@ -249,23 +249,23 @@ * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data. * @returns {WebGLTexture} */ - createTexture: function(gl, width, height, textureImageSource) { - var texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - if (textureImageSource) { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); - } - else { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - } - return texture; - }, + createTexture: function(gl, width, height, textureImageSource) { + var texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + if (textureImageSource) { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); + } + else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + } + return texture; + }, - /** + /** * Can be optionally used to get a texture from the cache array * * If an existing texture is not found, a new texture is created and cached. @@ -274,63 +274,63 @@ * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the * texture cache entry if one does not already exist. */ - getCachedTexture: function(uniqueId, textureImageSource) { - if (this.textureCache[uniqueId]) { - return this.textureCache[uniqueId]; - } - else { - var texture = this.createTexture( - this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); - this.textureCache[uniqueId] = texture; - return texture; - } - }, + getCachedTexture: function(uniqueId, textureImageSource) { + if (this.textureCache[uniqueId]) { + return this.textureCache[uniqueId]; + } + else { + var texture = this.createTexture( + this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); + this.textureCache[uniqueId] = texture; + return texture; + } + }, - /** + /** * Clear out cached resources related to a source image that has been * filtered previously. * * @param {String} cacheKey The cache key provided when the source image was filtered. */ - evictCachesForKey: function(cacheKey) { - if (this.textureCache[cacheKey]) { - this.gl.deleteTexture(this.textureCache[cacheKey]); - delete this.textureCache[cacheKey]; - } - }, + evictCachesForKey: function(cacheKey) { + if (this.textureCache[cacheKey]) { + this.gl.deleteTexture(this.textureCache[cacheKey]); + delete this.textureCache[cacheKey]; + } + }, - copyGLTo2D: copyGLTo2DDrawImage, + copyGLTo2D: copyGLTo2DDrawImage, - /** + /** * Attempt to extract GPU information strings from a WebGL context. * * Useful information when debugging or blacklisting specific GPUs. * * @returns {Object} A GPU info object with renderer and vendor strings. */ - captureGPUInfo: function() { - if (this.gpuInfo) { - return this.gpuInfo; - } - var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; - if (!gl) { - return gpuInfo; + captureGPUInfo: function() { + if (this.gpuInfo) { + return this.gpuInfo; + } + var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; + if (!gl) { + return gpuInfo; + } + var ext = gl.getExtension('WEBGL_debug_renderer_info'); + if (ext) { + var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); + var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); + if (renderer) { + gpuInfo.renderer = renderer.toLowerCase(); } - var ext = gl.getExtension('WEBGL_debug_renderer_info'); - if (ext) { - var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); - var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); - if (renderer) { - gpuInfo.renderer = renderer.toLowerCase(); - } - if (vendor) { - gpuInfo.vendor = vendor.toLowerCase(); - } + if (vendor) { + gpuInfo.vendor = vendor.toLowerCase(); } - this.gpuInfo = gpuInfo; - return gpuInfo; - }, - }; + } + this.gpuInfo = gpuInfo; + return gpuInfo; + }, +}; function resizeCanvasIfNeeded(pipelineState) { var targetCanvas = pipelineState.targetCanvas, diff --git a/src/gradient.class.js b/src/gradient.class.js index 58e7e0f18c0..a5651ddcd48 100644 --- a/src/gradient.class.js +++ b/src/gradient.class.js @@ -1,97 +1,97 @@ - /* _FROM_SVG_START_ */ - function getColorStop(el, multiplier) { - var style = el.getAttribute('style'), - offset = el.getAttribute('offset') || 0, - color, colorAlpha, opacity, i; - - // convert percents to absolute values - offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); - offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; - if (style) { - var keyValuePairs = style.split(/\s*;\s*/); - - if (keyValuePairs[keyValuePairs.length - 1] === '') { - keyValuePairs.pop(); - } +/* _FROM_SVG_START_ */ +function getColorStop(el, multiplier) { + var style = el.getAttribute('style'), + offset = el.getAttribute('offset') || 0, + color, colorAlpha, opacity, i; + + // convert percents to absolute values + offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); + offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; + if (style) { + var keyValuePairs = style.split(/\s*;\s*/); + + if (keyValuePairs[keyValuePairs.length - 1] === '') { + keyValuePairs.pop(); + } - for (i = keyValuePairs.length; i--; ) { + for (i = keyValuePairs.length; i--; ) { - var split = keyValuePairs[i].split(/\s*:\s*/), - key = split[0].trim(), - value = split[1].trim(); + var split = keyValuePairs[i].split(/\s*:\s*/), + key = split[0].trim(), + value = split[1].trim(); - if (key === 'stop-color') { - color = value; - } - else if (key === 'stop-opacity') { - opacity = value; - } + if (key === 'stop-color') { + color = value; + } + else if (key === 'stop-opacity') { + opacity = value; } } - - if (!color) { - color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; - } - if (!opacity) { - opacity = el.getAttribute('stop-opacity'); - } - - color = new fabric.Color(color); - colorAlpha = color.getAlpha(); - opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); - opacity *= colorAlpha * multiplier; - - return { - offset: offset, - color: color.toRgb(), - opacity: opacity - }; } - function getLinearCoords(el) { - return { - x1: el.getAttribute('x1') || 0, - y1: el.getAttribute('y1') || 0, - x2: el.getAttribute('x2') || '100%', - y2: el.getAttribute('y2') || 0 - }; + if (!color) { + color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; } - - function getRadialCoords(el) { - return { - x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', - y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', - r1: 0, - x2: el.getAttribute('cx') || '50%', - y2: el.getAttribute('cy') || '50%', - r2: el.getAttribute('r') || '50%' - }; + if (!opacity) { + opacity = el.getAttribute('stop-opacity'); } - /* _FROM_SVG_END_ */ - /** + color = new fabric.Color(color); + colorAlpha = color.getAlpha(); + opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); + opacity *= colorAlpha * multiplier; + + return { + offset: offset, + color: color.toRgb(), + opacity: opacity + }; +} + +function getLinearCoords(el) { + return { + x1: el.getAttribute('x1') || 0, + y1: el.getAttribute('y1') || 0, + x2: el.getAttribute('x2') || '100%', + y2: el.getAttribute('y2') || 0 + }; +} + +function getRadialCoords(el) { + return { + x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', + y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', + r1: 0, + x2: el.getAttribute('cx') || '50%', + y2: el.getAttribute('cy') || '50%', + r2: el.getAttribute('r') || '50%' + }; +} +/* _FROM_SVG_END_ */ + +/** * Gradient class * @class fabric.Gradient * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients} * @see {@link fabric.Gradient#initialize} for constructor definition */ - fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { +fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { - /** + /** * Horizontal offset for aligning gradients coming from SVG when outside pathgroups * @type Number * @default 0 */ - offsetX: 0, + offsetX: 0, - /** + /** * Vertical offset for aligning gradients coming from SVG when outside pathgroups * @type Number * @default 0 */ - offsetY: 0, + offsetY: 0, - /** + /** * A transform matrix to apply to the gradient before painting. * Imported from svg gradients, is not applied with the current transform in the center. * Before this transform is applied, the origin point is at the top left corner of the object @@ -99,9 +99,9 @@ * @type Number[] * @default null */ - gradientTransform: null, + gradientTransform: null, - /** + /** * coordinates units for coords. * If `pixels`, the number of coords are in the same unit of width / height. * If set as `percentage` the coords are still a number, but 1 means 100% of width @@ -110,16 +110,16 @@ * @type String * @default 'pixels' */ - gradientUnits: 'pixels', + gradientUnits: 'pixels', - /** + /** * Gradient type linear or radial * @type String * @default 'pixels' */ - type: 'linear', + type: 'linear', - /** + /** * Constructor * @param {Object} options Options object with type, coords, gradientUnits and colorStops * @param {Object} [options.type] gradient type linear or radial @@ -136,220 +136,220 @@ * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle * @return {fabric.Gradient} thisArg */ - initialize: function(options) { - options || (options = { }); - options.coords || (options.coords = { }); + initialize: function(options) { + options || (options = { }); + options.coords || (options.coords = { }); - var coords, _this = this; + var coords, _this = this; - // sets everything, then coords and colorstops get sets again - Object.keys(options).forEach(function(option) { - _this[option] = options[option]; - }); + // sets everything, then coords and colorstops get sets again + Object.keys(options).forEach(function(option) { + _this[option] = options[option]; + }); - if (this.id) { - this.id += '_' + fabric.Object.__uid++; - } - else { - this.id = fabric.Object.__uid++; - } + if (this.id) { + this.id += '_' + fabric.Object.__uid++; + } + else { + this.id = fabric.Object.__uid++; + } - coords = { - x1: options.coords.x1 || 0, - y1: options.coords.y1 || 0, - x2: options.coords.x2 || 0, - y2: options.coords.y2 || 0 - }; + coords = { + x1: options.coords.x1 || 0, + y1: options.coords.y1 || 0, + x2: options.coords.x2 || 0, + y2: options.coords.y2 || 0 + }; - if (this.type === 'radial') { - coords.r1 = options.coords.r1 || 0; - coords.r2 = options.coords.r2 || 0; - } + if (this.type === 'radial') { + coords.r1 = options.coords.r1 || 0; + coords.r2 = options.coords.r2 || 0; + } - this.coords = coords; - this.colorStops = options.colorStops.slice(); - }, + this.coords = coords; + this.colorStops = options.colorStops.slice(); + }, - /** + /** * Adds another colorStop * @param {Object} colorStop Object with offset and color * @return {fabric.Gradient} thisArg */ - addColorStop: function(colorStops) { - for (var position in colorStops) { - var color = new fabric.Color(colorStops[position]); - this.colorStops.push({ - offset: parseFloat(position), - color: color.toRgb(), - opacity: color.getAlpha() - }); - } - return this; - }, + addColorStop: function(colorStops) { + for (var position in colorStops) { + var color = new fabric.Color(colorStops[position]); + this.colorStops.push({ + offset: parseFloat(position), + color: color.toRgb(), + opacity: color.getAlpha() + }); + } + return this; + }, - /** + /** * Returns object representation of a gradient * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} */ - toObject: function(propertiesToInclude) { - var object = { - type: this.type, - coords: this.coords, - colorStops: this.colorStops, - offsetX: this.offsetX, - offsetY: this.offsetY, - gradientUnits: this.gradientUnits, - gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); - - return object; - }, - - /* _TO_SVG_START_ */ - /** + toObject: function(propertiesToInclude) { + var object = { + type: this.type, + coords: this.coords, + colorStops: this.colorStops, + offsetX: this.offsetX, + offsetY: this.offsetY, + gradientUnits: this.gradientUnits, + gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); + + return object; + }, + + /* _TO_SVG_START_ */ + /** * Returns SVG representation of an gradient * @param {Object} object Object to create a gradient for * @return {String} SVG representation of an gradient (linear/radial) */ - toSVG: function(object, options) { - var coords = this.coords, i, len, options = options || {}, - markup, commonAttributes, colorStops = this.colorStops, - needsSwap = coords.r1 > coords.r2, - transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), - offsetX = -this.offsetX, offsetY = -this.offsetY, - withViewport = !!options.additionalTransform, - gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; - // colorStops must be sorted ascending - colorStops.sort(function(a, b) { - return a.offset - b.offset; - }); + toSVG: function(object, options) { + var coords = this.coords, i, len, options = options || {}, + markup, commonAttributes, colorStops = this.colorStops, + needsSwap = coords.r1 > coords.r2, + transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), + offsetX = -this.offsetX, offsetY = -this.offsetY, + withViewport = !!options.additionalTransform, + gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; + // colorStops must be sorted ascending + colorStops.sort(function(a, b) { + return a.offset - b.offset; + }); - if (gradientUnits === 'objectBoundingBox') { - offsetX /= object.width; - offsetY /= object.height; - } - else { - offsetX += object.width / 2; - offsetY += object.height / 2; - } - if (object.type === 'path' && this.gradientUnits !== 'percentage') { - offsetX -= object.pathOffset.x; - offsetY -= object.pathOffset.y; - } + if (gradientUnits === 'objectBoundingBox') { + offsetX /= object.width; + offsetY /= object.height; + } + else { + offsetX += object.width / 2; + offsetY += object.height / 2; + } + if (object.type === 'path' && this.gradientUnits !== 'percentage') { + offsetX -= object.pathOffset.x; + offsetY -= object.pathOffset.y; + } - transform[4] -= offsetX; - transform[5] -= offsetY; + transform[4] -= offsetX; + transform[5] -= offsetY; - commonAttributes = 'id="SVGID_' + this.id + + commonAttributes = 'id="SVGID_' + this.id + '" gradientUnits="' + gradientUnits + '"'; - commonAttributes += ' gradientTransform="' + (withViewport ? - options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; - - if (this.type === 'linear') { - markup = [ - '\n' - ]; - } - else if (this.type === 'radial') { - // svg radial gradient has just 1 radius. the biggest. - markup = [ - '\n' - ]; - } + commonAttributes += ' gradientTransform="' + (withViewport ? + options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; + + if (this.type === 'linear') { + markup = [ + '\n' + ]; + } + else if (this.type === 'radial') { + // svg radial gradient has just 1 radius. the biggest. + markup = [ + '\n' + ]; + } - if (this.type === 'radial') { - if (needsSwap) { - // svg goes from internal to external radius. if radius are inverted, swap color stops. - colorStops = colorStops.concat(); - colorStops.reverse(); - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset = 1 - colorStops[i].offset; - } + if (this.type === 'radial') { + if (needsSwap) { + // svg goes from internal to external radius. if radius are inverted, swap color stops. + colorStops = colorStops.concat(); + colorStops.reverse(); + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset = 1 - colorStops[i].offset; } - var minRadius = Math.min(coords.r1, coords.r2); - if (minRadius > 0) { - // i have to shift all colorStops and add new one in 0. - var maxRadius = Math.max(coords.r1, coords.r2), - percentageShift = minRadius / maxRadius; - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); - } + } + var minRadius = Math.min(coords.r1, coords.r2); + if (minRadius > 0) { + // i have to shift all colorStops and add new one in 0. + var maxRadius = Math.max(coords.r1, coords.r2), + percentageShift = minRadius / maxRadius; + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); } } + } - for (i = 0, len = colorStops.length; i < len; i++) { - var colorStop = colorStops[i]; - markup.push( - '\n' - ); - } + for (i = 0, len = colorStops.length; i < len; i++) { + var colorStop = colorStops[i]; + markup.push( + '\n' + ); + } - markup.push((this.type === 'linear' ? '\n' : '\n')); + markup.push((this.type === 'linear' ? '\n' : '\n')); - return markup.join(''); - }, - /* _TO_SVG_END_ */ + return markup.join(''); + }, + /* _TO_SVG_END_ */ - /** + /** * Returns an instance of CanvasGradient * @param {CanvasRenderingContext2D} ctx Context to render on * @return {CanvasGradient} */ - toLive: function(ctx) { - var gradient, coords = this.coords, i, len; + toLive: function(ctx) { + var gradient, coords = this.coords, i, len; - if (!this.type) { - return; - } + if (!this.type) { + return; + } - if (this.type === 'linear') { - gradient = ctx.createLinearGradient( - coords.x1, coords.y1, coords.x2, coords.y2); - } - else if (this.type === 'radial') { - gradient = ctx.createRadialGradient( - coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); - } + if (this.type === 'linear') { + gradient = ctx.createLinearGradient( + coords.x1, coords.y1, coords.x2, coords.y2); + } + else if (this.type === 'radial') { + gradient = ctx.createRadialGradient( + coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); + } - for (i = 0, len = this.colorStops.length; i < len; i++) { - var color = this.colorStops[i].color, - opacity = this.colorStops[i].opacity, - offset = this.colorStops[i].offset; + for (i = 0, len = this.colorStops.length; i < len; i++) { + var color = this.colorStops[i].color, + opacity = this.colorStops[i].opacity, + offset = this.colorStops[i].offset; - if (typeof opacity !== 'undefined') { - color = new fabric.Color(color).setAlpha(opacity).toRgba(); - } - gradient.addColorStop(offset, color); + if (typeof opacity !== 'undefined') { + color = new fabric.Color(color).setAlpha(opacity).toRgba(); } - - return gradient; + gradient.addColorStop(offset, color); } - }); - fabric.util.object.extend(fabric.Gradient, { + return gradient; + } +}); - /* _FROM_SVG_START_ */ - /** +fabric.util.object.extend(fabric.Gradient, { + + /* _FROM_SVG_START_ */ + /** * Returns {@link fabric.Gradient} instance from an SVG element * @static * @memberOf fabric.Gradient @@ -366,8 +366,8 @@ * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement */ - fromElement: function(el, instance, opacityAttr, svgOptions) { - /** + fromElement: function(el, instance, opacityAttr, svgOptions) { + /** * @example: * * @@ -400,86 +400,86 @@ * */ - var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); - multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; - if (isNaN(multiplier)) { - multiplier = 1; - } + var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); + multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; + if (isNaN(multiplier)) { + multiplier = 1; + } - var colorStopEls = el.getElementsByTagName('stop'), - type, - gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? - 'pixels' : 'percentage', - gradientTransform = el.getAttribute('gradientTransform') || '', - colorStops = [], - coords, i, offsetX = 0, offsetY = 0, - transformMatrix; - if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { - type = 'linear'; - coords = getLinearCoords(el); - } - else { - type = 'radial'; - coords = getRadialCoords(el); - } + var colorStopEls = el.getElementsByTagName('stop'), + type, + gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? + 'pixels' : 'percentage', + gradientTransform = el.getAttribute('gradientTransform') || '', + colorStops = [], + coords, i, offsetX = 0, offsetY = 0, + transformMatrix; + if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { + type = 'linear'; + coords = getLinearCoords(el); + } + else { + type = 'radial'; + coords = getRadialCoords(el); + } - for (i = colorStopEls.length; i--; ) { - colorStops.push(getColorStop(colorStopEls[i], multiplier)); - } + for (i = colorStopEls.length; i--; ) { + colorStops.push(getColorStop(colorStopEls[i], multiplier)); + } - transformMatrix = fabric.parseTransformAttribute(gradientTransform); + transformMatrix = fabric.parseTransformAttribute(gradientTransform); - __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); + __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); - if (gradientUnits === 'pixels') { - offsetX = -instance.left; - offsetY = -instance.top; - } + if (gradientUnits === 'pixels') { + offsetX = -instance.left; + offsetY = -instance.top; + } - var gradient = new fabric.Gradient({ - id: el.getAttribute('id'), - type: type, - coords: coords, - colorStops: colorStops, - gradientUnits: gradientUnits, - gradientTransform: transformMatrix, - offsetX: offsetX, - offsetY: offsetY, - }); + var gradient = new fabric.Gradient({ + id: el.getAttribute('id'), + type: type, + coords: coords, + colorStops: colorStops, + gradientUnits: gradientUnits, + gradientTransform: transformMatrix, + offsetX: offsetX, + offsetY: offsetY, + }); - return gradient; - } - /* _FROM_SVG_END_ */ - }); + return gradient; + } + /* _FROM_SVG_END_ */ +}); - /** +/** * @private */ - function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { - var propValue, finalValue; - Object.keys(options).forEach(function(prop) { - propValue = options[prop]; - if (propValue === 'Infinity') { - finalValue = 1; - } - else if (propValue === '-Infinity') { - finalValue = 0; - } - else { - finalValue = parseFloat(options[prop], 10); - if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { - finalValue *= 0.01; - if (gradientUnits === 'pixels') { - // then we need to fix those percentages here in svg parsing - if (prop === 'x1' || prop === 'x2' || prop === 'r2') { - finalValue *= svgOptions.viewBoxWidth || svgOptions.width; - } - if (prop === 'y1' || prop === 'y2') { - finalValue *= svgOptions.viewBoxHeight || svgOptions.height; - } +function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { + var propValue, finalValue; + Object.keys(options).forEach(function(prop) { + propValue = options[prop]; + if (propValue === 'Infinity') { + finalValue = 1; + } + else if (propValue === '-Infinity') { + finalValue = 0; + } + else { + finalValue = parseFloat(options[prop], 10); + if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { + finalValue *= 0.01; + if (gradientUnits === 'pixels') { + // then we need to fix those percentages here in svg parsing + if (prop === 'x1' || prop === 'x2' || prop === 'r2') { + finalValue *= svgOptions.viewBoxWidth || svgOptions.width; + } + if (prop === 'y1' || prop === 'y2') { + finalValue *= svgOptions.viewBoxHeight || svgOptions.height; } } } - options[prop] = finalValue; - }); - } + } + options[prop] = finalValue; + }); +} diff --git a/src/intersection.class.js b/src/intersection.class.js index 7db97dddf74..0c396ae51ea 100644 --- a/src/intersection.class.js +++ b/src/intersection.class.js @@ -1,47 +1,47 @@ - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - var fabric = exports.fabric || (exports.fabric = { }); +/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ +var fabric = exports.fabric || (exports.fabric = { }); - /** +/** * Intersection class * @class fabric.Intersection * @memberOf fabric * @constructor */ - function Intersection(status) { - this.status = status; - this.points = []; - } +function Intersection(status) { + this.status = status; + this.points = []; +} - fabric.Intersection = Intersection; +fabric.Intersection = Intersection; - fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { +fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { - constructor: Intersection, + constructor: Intersection, - /** + /** * Appends a point to intersection * @param {fabric.Point} point * @return {fabric.Intersection} thisArg * @chainable */ - appendPoint: function (point) { - this.points.push(point); - return this; - }, + appendPoint: function (point) { + this.points.push(point); + return this; + }, - /** + /** * Appends points to intersection * @param {Array} points * @return {fabric.Intersection} thisArg * @chainable */ - appendPoints: function (points) { - this.points = this.points.concat(points); - return this; - } - }; + appendPoints: function (points) { + this.points = this.points.concat(points); + return this; + } +}; - /** +/** * Checks if one line intersects another * TODO: rename in intersectSegmentSegment * @static @@ -51,34 +51,34 @@ * @param {fabric.Point} b2 * @return {fabric.Intersection} */ - fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { - var result, - uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), - ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), - uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); - if (uB !== 0) { - var ua = uaT / uB, - ub = ubT / uB; - if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { - result = new Intersection('Intersection'); - result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); - } - else { - result = new Intersection(); - } +fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { + var result, + uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), + ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), + uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); + if (uB !== 0) { + var ua = uaT / uB, + ub = ubT / uB; + if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { + result = new Intersection('Intersection'); + result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); } else { - if (uaT === 0 || ubT === 0) { - result = new Intersection('Coincident'); - } - else { - result = new Intersection('Parallel'); - } + result = new Intersection(); } - return result; - }; + } + else { + if (uaT === 0 || ubT === 0) { + result = new Intersection('Coincident'); + } + else { + result = new Intersection('Parallel'); + } + } + return result; +}; - /** +/** * Checks if line intersects polygon * TODO: rename in intersectSegmentPolygon * fix detection of coincident @@ -88,49 +88,49 @@ * @param {Array} points * @return {fabric.Intersection} */ - fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { - var result = new Intersection(), - length = points.length, - b1, b2, inter, i; +fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { + var result = new Intersection(), + length = points.length, + b1, b2, inter, i; - for (i = 0; i < length; i++) { - b1 = points[i]; - b2 = points[(i + 1) % length]; - inter = Intersection.intersectLineLine(a1, a2, b1, b2); + for (i = 0; i < length; i++) { + b1 = points[i]; + b2 = points[(i + 1) % length]; + inter = Intersection.intersectLineLine(a1, a2, b1, b2); - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; - }; + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; +}; - /** +/** * Checks if polygon intersects another polygon * @static * @param {Array} points1 * @param {Array} points2 * @return {fabric.Intersection} */ - fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { - var result = new Intersection(), - length = points1.length, i; +fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { + var result = new Intersection(), + length = points1.length, i; - for (i = 0; i < length; i++) { - var a1 = points1[i], - a2 = points1[(i + 1) % length], - inter = Intersection.intersectLinePolygon(a1, a2, points2); + for (i = 0; i < length; i++) { + var a1 = points1[i], + a2 = points1[(i + 1) % length], + inter = Intersection.intersectLinePolygon(a1, a2, points2); - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; - }; + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; +}; - /** +/** * Checks if polygon intersects rectangle * @static * @param {Array} points @@ -138,24 +138,24 @@ * @param {fabric.Point} r2 * @return {fabric.Intersection} */ - fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { - var min = r1.min(r2), - max = r1.max(r2), - topRight = new fabric.Point(max.x, min.y), - bottomLeft = new fabric.Point(min.x, max.y), - inter1 = Intersection.intersectLinePolygon(min, topRight, points), - inter2 = Intersection.intersectLinePolygon(topRight, max, points), - inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), - inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), - result = new Intersection(); - - result.appendPoints(inter1.points); - result.appendPoints(inter2.points); - result.appendPoints(inter3.points); - result.appendPoints(inter4.points); - - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; - }; +fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { + var min = r1.min(r2), + max = r1.max(r2), + topRight = new fabric.Point(max.x, min.y), + bottomLeft = new fabric.Point(min.x, max.y), + inter1 = Intersection.intersectLinePolygon(min, topRight, points), + inter2 = Intersection.intersectLinePolygon(topRight, max, points), + inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), + inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), + result = new Intersection(); + + result.appendPoints(inter1.points); + result.appendPoints(inter2.points); + result.appendPoints(inter3.points); + result.appendPoints(inter4.points); + + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; +}; diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index eaced46b7ba..4f49326bcc0 100644 --- a/src/mixins/canvas_events.mixin.js +++ b/src/mixins/canvas_events.mixin.js @@ -1,536 +1,536 @@ - var addListener = fabric.util.addListener, - removeListener = fabric.util.removeListener, - RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, - addEventOptions = { passive: false }; +var addListener = fabric.util.addListener, + removeListener = fabric.util.removeListener, + RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, + addEventOptions = { passive: false }; - function checkClick(e, value) { - return e.button && (e.button === value - 1); - } +function checkClick(e, value) { + return e.button && (e.button === value - 1); +} - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { +fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** + /** * Contains the id of the touch event that owns the fabric transform * @type Number * @private */ - mainTouchId: null, + mainTouchId: null, - /** + /** * Adds mouse listeners to canvas * @private */ - _initEventListeners: function () { - // in case we initialized the class twice. This should not happen normally - // but in some kind of applications where the canvas element may be changed - // this is a workaround to having double listeners. - this.removeListeners(); - this._bindEvents(); - this.addOrRemove(addListener, 'add'); - }, + _initEventListeners: function () { + // in case we initialized the class twice. This should not happen normally + // but in some kind of applications where the canvas element may be changed + // this is a workaround to having double listeners. + this.removeListeners(); + this._bindEvents(); + this.addOrRemove(addListener, 'add'); + }, - /** + /** * return an event prefix pointer or mouse. * @private */ - _getEventPrefix: function () { - return this.enablePointerEvents ? 'pointer' : 'mouse'; - }, - - addOrRemove: function(functor, eventjsFunctor) { - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - functor(fabric.window, 'resize', this._onResize); - functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); - functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); - functor(canvasElement, 'wheel', this._onMouseWheel); - functor(canvasElement, 'contextmenu', this._onContextMenu); - functor(canvasElement, 'dblclick', this._onDoubleClick); - functor(canvasElement, 'dragover', this._onDragOver); - functor(canvasElement, 'dragenter', this._onDragEnter); - functor(canvasElement, 'dragleave', this._onDragLeave); - functor(canvasElement, 'drop', this._onDrop); - if (!this.enablePointerEvents) { - functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); - } - if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { - eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); - eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); - eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); - eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); - eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); - } - }, + _getEventPrefix: function () { + return this.enablePointerEvents ? 'pointer' : 'mouse'; + }, + + addOrRemove: function(functor, eventjsFunctor) { + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + functor(fabric.window, 'resize', this._onResize); + functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); + functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); + functor(canvasElement, 'wheel', this._onMouseWheel); + functor(canvasElement, 'contextmenu', this._onContextMenu); + functor(canvasElement, 'dblclick', this._onDoubleClick); + functor(canvasElement, 'dragover', this._onDragOver); + functor(canvasElement, 'dragenter', this._onDragEnter); + functor(canvasElement, 'dragleave', this._onDragLeave); + functor(canvasElement, 'drop', this._onDrop); + if (!this.enablePointerEvents) { + functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); + } + if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { + eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); + eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); + eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); + eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); + eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); + } + }, - /** + /** * Removes all event listeners */ - removeListeners: function() { - this.addOrRemove(removeListener, 'remove'); - // if you dispose on a mouseDown, before mouse up, you need to clean document to... - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - }, + removeListeners: function() { + this.addOrRemove(removeListener, 'remove'); + // if you dispose on a mouseDown, before mouse up, you need to clean document to... + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + }, - /** + /** * @private */ - _bindEvents: function() { - if (this.eventsBound) { - // for any reason we pass here twice we do not want to bind events twice. - return; - } - this._onMouseDown = this._onMouseDown.bind(this); - this._onTouchStart = this._onTouchStart.bind(this); - this._onMouseMove = this._onMouseMove.bind(this); - this._onMouseUp = this._onMouseUp.bind(this); - this._onTouchEnd = this._onTouchEnd.bind(this); - this._onResize = this._onResize.bind(this); - this._onGesture = this._onGesture.bind(this); - this._onDrag = this._onDrag.bind(this); - this._onShake = this._onShake.bind(this); - this._onLongPress = this._onLongPress.bind(this); - this._onOrientationChange = this._onOrientationChange.bind(this); - this._onMouseWheel = this._onMouseWheel.bind(this); - this._onMouseOut = this._onMouseOut.bind(this); - this._onMouseEnter = this._onMouseEnter.bind(this); - this._onContextMenu = this._onContextMenu.bind(this); - this._onDoubleClick = this._onDoubleClick.bind(this); - this._onDragOver = this._onDragOver.bind(this); - this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); - this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); - this._onDrop = this._onDrop.bind(this); - this.eventsBound = true; - }, - - /** + _bindEvents: function() { + if (this.eventsBound) { + // for any reason we pass here twice we do not want to bind events twice. + return; + } + this._onMouseDown = this._onMouseDown.bind(this); + this._onTouchStart = this._onTouchStart.bind(this); + this._onMouseMove = this._onMouseMove.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); + this._onTouchEnd = this._onTouchEnd.bind(this); + this._onResize = this._onResize.bind(this); + this._onGesture = this._onGesture.bind(this); + this._onDrag = this._onDrag.bind(this); + this._onShake = this._onShake.bind(this); + this._onLongPress = this._onLongPress.bind(this); + this._onOrientationChange = this._onOrientationChange.bind(this); + this._onMouseWheel = this._onMouseWheel.bind(this); + this._onMouseOut = this._onMouseOut.bind(this); + this._onMouseEnter = this._onMouseEnter.bind(this); + this._onContextMenu = this._onContextMenu.bind(this); + this._onDoubleClick = this._onDoubleClick.bind(this); + this._onDragOver = this._onDragOver.bind(this); + this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); + this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); + this._onDrop = this._onDrop.bind(this); + this.eventsBound = true; + }, + + /** * @private * @param {Event} [e] Event object fired on Event.js gesture * @param {Event} [self] Inner Event object */ - _onGesture: function(e, self) { - this.__onTransformGesture && this.__onTransformGesture(e, self); - }, + _onGesture: function(e, self) { + this.__onTransformGesture && this.__onTransformGesture(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js drag * @param {Event} [self] Inner Event object */ - _onDrag: function(e, self) { - this.__onDrag && this.__onDrag(e, self); - }, + _onDrag: function(e, self) { + this.__onDrag && this.__onDrag(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on wheel event */ - _onMouseWheel: function(e) { - this.__onMouseWheel(e); - }, + _onMouseWheel: function(e) { + this.__onMouseWheel(e); + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onMouseOut: function(e) { - var target = this._hoveredTarget; - this.fire('mouse:out', { target: target, e: e }); - this._hoveredTarget = null; - target && target.fire('mouseout', { e: e }); - - var _this = this; - this._hoveredTargets.forEach(function(_target){ - _this.fire('mouse:out', { target: target, e: e }); - _target && target.fire('mouseout', { e: e }); + _onMouseOut: function(e) { + var target = this._hoveredTarget; + this.fire('mouse:out', { target: target, e: e }); + this._hoveredTarget = null; + target && target.fire('mouseout', { e: e }); + + var _this = this; + this._hoveredTargets.forEach(function(_target){ + _this.fire('mouse:out', { target: target, e: e }); + _target && target.fire('mouseout', { e: e }); + }); + this._hoveredTargets = []; + + if (this._iTextInstances) { + this._iTextInstances.forEach(function(obj) { + if (obj.isEditing) { + obj.hiddenTextarea.focus(); + } }); - this._hoveredTargets = []; - - if (this._iTextInstances) { - this._iTextInstances.forEach(function(obj) { - if (obj.isEditing) { - obj.hiddenTextarea.focus(); - } - }); - } - }, + } + }, - /** + /** * @private * @param {Event} e Event object fired on mouseenter */ - _onMouseEnter: function(e) { - // This find target and consequent 'mouse:over' is used to - // clear old instances on hovered target. - // calling findTarget has the side effect of killing target.__corner. - // as a short term fix we are not firing this if we are currently transforming. - // as a long term fix we need to separate the action of finding a target with the - // side effects we added to it. - if (!this._currentTransform && !this.findTarget(e)) { - this.fire('mouse:over', { target: null, e: e }); - this._hoveredTarget = null; - this._hoveredTargets = []; - } - }, + _onMouseEnter: function(e) { + // This find target and consequent 'mouse:over' is used to + // clear old instances on hovered target. + // calling findTarget has the side effect of killing target.__corner. + // as a short term fix we are not firing this if we are currently transforming. + // as a long term fix we need to separate the action of finding a target with the + // side effects we added to it. + if (!this._currentTransform && !this.findTarget(e)) { + this.fire('mouse:over', { target: null, e: e }); + this._hoveredTarget = null; + this._hoveredTargets = []; + } + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js orientation change * @param {Event} [self] Inner Event object */ - _onOrientationChange: function(e, self) { - this.__onOrientationChange && this.__onOrientationChange(e, self); - }, + _onOrientationChange: function(e, self) { + this.__onOrientationChange && this.__onOrientationChange(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js shake * @param {Event} [self] Inner Event object */ - _onShake: function(e, self) { - this.__onShake && this.__onShake(e, self); - }, + _onShake: function(e, self) { + this.__onShake && this.__onShake(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js shake * @param {Event} [self] Inner Event object */ - _onLongPress: function(e, self) { - this.__onLongPress && this.__onLongPress(e, self); - }, + _onLongPress: function(e, self) { + this.__onLongPress && this.__onLongPress(e, self); + }, - /** + /** * prevent default to allow drop event to be fired * @private * @param {Event} [e] Event object fired on Event.js shake */ - _onDragOver: function(e) { - e.preventDefault(); - var target = this._simpleEventHandler('dragover', e); - this._fireEnterLeaveEvents(target, e); - }, + _onDragOver: function(e) { + e.preventDefault(); + var target = this._simpleEventHandler('dragover', e); + this._fireEnterLeaveEvents(target, e); + }, - /** + /** * `drop:before` is a an event that allow you to schedule logic * before the `drop` event. Prefer `drop` event always, but if you need * to run some drop-disabling logic on an event, since there is no way * to handle event handlers ordering, use `drop:before` * @param {Event} e */ - _onDrop: function (e) { - this._simpleEventHandler('drop:before', e); - return this._simpleEventHandler('drop', e); - }, + _onDrop: function (e) { + this._simpleEventHandler('drop:before', e); + return this._simpleEventHandler('drop', e); + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onContextMenu: function (e) { - this._simpleEventHandler('contextmenu:before', e); - if (this.stopContextMenu) { - e.stopPropagation(); - e.preventDefault(); - } - this._simpleEventHandler('contextmenu', e); - return false; - }, + _onContextMenu: function (e) { + this._simpleEventHandler('contextmenu:before', e); + if (this.stopContextMenu) { + e.stopPropagation(); + e.preventDefault(); + } + this._simpleEventHandler('contextmenu', e); + return false; + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onDoubleClick: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'dblclick'); - this._resetTransformEventData(e); - }, + _onDoubleClick: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'dblclick'); + this._resetTransformEventData(e); + }, - /** + /** * Return a the id of an event. * returns either the pointerId or the identifier or 0 for the mouse event * @private * @param {Event} evt Event object */ - getPointerId: function(evt) { - var changedTouches = evt.changedTouches; + getPointerId: function(evt) { + var changedTouches = evt.changedTouches; - if (changedTouches) { - return changedTouches[0] && changedTouches[0].identifier; - } + if (changedTouches) { + return changedTouches[0] && changedTouches[0].identifier; + } - if (this.enablePointerEvents) { - return evt.pointerId; - } + if (this.enablePointerEvents) { + return evt.pointerId; + } - return -1; - }, + return -1; + }, - /** + /** * Determines if an event has the id of the event that is considered main * @private * @param {evt} event Event object */ - _isMainEvent: function(evt) { - if (evt.isPrimary === true) { - return true; - } - if (evt.isPrimary === false) { - return false; - } - if (evt.type === 'touchend' && evt.touches.length === 0) { - return true; - } - if (evt.changedTouches) { - return evt.changedTouches[0].identifier === this.mainTouchId; - } + _isMainEvent: function(evt) { + if (evt.isPrimary === true) { + return true; + } + if (evt.isPrimary === false) { + return false; + } + if (evt.type === 'touchend' && evt.touches.length === 0) { return true; - }, + } + if (evt.changedTouches) { + return evt.changedTouches[0].identifier === this.mainTouchId; + } + return true; + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onTouchStart: function(e) { - e.preventDefault(); - if (this.mainTouchId === null) { - this.mainTouchId = this.getPointerId(e); - } - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - // Unbind mousedown to prevent double triggers from touch devices - removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - }, - - /** + _onTouchStart: function(e) { + e.preventDefault(); + if (this.mainTouchId === null) { + this.mainTouchId = this.getPointerId(e); + } + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + // Unbind mousedown to prevent double triggers from touch devices + removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + }, + + /** * @private * @param {Event} e Event object fired on mousedown */ - _onMouseDown: function (e) { - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - }, + _onMouseDown: function (e) { + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onTouchEnd: function(e) { - if (e.touches.length > 0) { - // if there are still touches stop here - return; - } - this.__onMouseUp(e); - this._resetTransformEventData(); - this.mainTouchId = null; - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - var _this = this; - if (this._willAddMouseDown) { - clearTimeout(this._willAddMouseDown); - } - this._willAddMouseDown = setTimeout(function() { - // Wait 400ms before rebinding mousedown to prevent double triggers - // from touch devices - addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); - _this._willAddMouseDown = 0; - }, 400); - }, + _onTouchEnd: function(e) { + if (e.touches.length > 0) { + // if there are still touches stop here + return; + } + this.__onMouseUp(e); + this._resetTransformEventData(); + this.mainTouchId = null; + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + var _this = this; + if (this._willAddMouseDown) { + clearTimeout(this._willAddMouseDown); + } + this._willAddMouseDown = setTimeout(function() { + // Wait 400ms before rebinding mousedown to prevent double triggers + // from touch devices + addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); + _this._willAddMouseDown = 0; + }, 400); + }, - /** + /** * @private * @param {Event} e Event object fired on mouseup */ - _onMouseUp: function (e) { - this.__onMouseUp(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - if (this._isMainEvent(e)) { - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - } - }, + _onMouseUp: function (e) { + this.__onMouseUp(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + if (this._isMainEvent(e)) { + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + } + }, - /** + /** * @private * @param {Event} e Event object fired on mousemove */ - _onMouseMove: function (e) { - !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); - this.__onMouseMove(e); - }, + _onMouseMove: function (e) { + !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); + this.__onMouseMove(e); + }, - /** + /** * @private */ - _onResize: function () { - this.calcOffset(); - }, + _onResize: function () { + this.calcOffset(); + }, - /** + /** * Decides whether the canvas should be redrawn in mouseup and mousedown events. * @private * @param {Object} target */ - _shouldRender: function(target) { - var activeObject = this._activeObject; + _shouldRender: function(target) { + var activeObject = this._activeObject; - if ( - !!activeObject !== !!target || + if ( + !!activeObject !== !!target || (activeObject && target && (activeObject !== target)) - ) { - // this covers: switch of target, from target to no target, selection of target - // multiSelection with key and mouse - return true; - } - else if (activeObject && activeObject.isEditing) { - // if we mouse up/down over a editing textbox a cursor change, - // there is no need to re render - return false; - } + ) { + // this covers: switch of target, from target to no target, selection of target + // multiSelection with key and mouse + return true; + } + else if (activeObject && activeObject.isEditing) { + // if we mouse up/down over a editing textbox a cursor change, + // there is no need to re render return false; - }, + } + return false; + }, - /** + /** * Method that defines the actions when mouse is released on canvas. * The method resets the currentTransform parameters, store the image corner * position in the image object and render the canvas on top. * @private * @param {Event} e Event object fired on mouseup */ - __onMouseUp: function (e) { - var target, transform = this._currentTransform, - groupSelector = this._groupSelector, shouldRender = false, - isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); - this._cacheTransformEventData(e); - target = this._target; - this._handleEvent(e, 'up:before'); - // if right/middle click just fire events and return - // target undefined will make the _handleEvent search the target - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'up', RIGHT_CLICK, isClick); - } - return; - } + __onMouseUp: function (e) { + var target, transform = this._currentTransform, + groupSelector = this._groupSelector, shouldRender = false, + isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); + this._cacheTransformEventData(e); + target = this._target; + this._handleEvent(e, 'up:before'); + // if right/middle click just fire events and return + // target undefined will make the _handleEvent search the target + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'up', RIGHT_CLICK, isClick); + } + return; + } - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); - } - this._resetTransformEventData(); - return; + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); } + this._resetTransformEventData(); + return; + } - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this._onMouseUpInDrawingMode(e); - return; - } + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this._onMouseUpInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } - if (transform) { - this._finalizeCurrentTransform(e); - shouldRender = transform.actionPerformed; - } - if (!isClick) { - var targetWasActive = target === this._activeObject; - this._maybeGroupObjects(e); - if (!shouldRender) { - shouldRender = ( - this._shouldRender(target) || + if (!this._isMainEvent(e)) { + return; + } + if (transform) { + this._finalizeCurrentTransform(e); + shouldRender = transform.actionPerformed; + } + if (!isClick) { + var targetWasActive = target === this._activeObject; + this._maybeGroupObjects(e); + if (!shouldRender) { + shouldRender = ( + this._shouldRender(target) || (!targetWasActive && target === this._activeObject) - ); - } - } - var corner, pointer; - if (target) { - corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) ); - if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { - this.setActiveObject(target, e); - shouldRender = true; - } - else { - var control = target.controls[corner], - mouseUpHandler = control && control.getMouseUpHandler(e, target, control); - if (mouseUpHandler) { - pointer = this.getPointer(e); - mouseUpHandler(e, transform, pointer.x, pointer.y); - } - } - target.isMoving = false; - } - // if we are ending up a transform on a different control or a new object - // fire the original mouse up from the corner that started the transform - if (transform && (transform.target !== target || transform.corner !== corner)) { - var originalControl = transform.target && transform.target.controls[transform.corner], - originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); - pointer = pointer || this.getPointer(e); - originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); } - this._setCursorFromEvent(e, target); - this._handleEvent(e, 'up', LEFT_CLICK, isClick); - this._groupSelector = null; - this._currentTransform = null; - // reset the target information about which corner is selected - target && (target.__corner = 0); - if (shouldRender) { - this.requestRenderAll(); + } + var corner, pointer; + if (target) { + corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { + this.setActiveObject(target, e); + shouldRender = true; } - else if (!isClick) { - this.renderTop(); + else { + var control = target.controls[corner], + mouseUpHandler = control && control.getMouseUpHandler(e, target, control); + if (mouseUpHandler) { + pointer = this.getPointer(e); + mouseUpHandler(e, transform, pointer.x, pointer.y); + } } - }, + target.isMoving = false; + } + // if we are ending up a transform on a different control or a new object + // fire the original mouse up from the corner that started the transform + if (transform && (transform.target !== target || transform.corner !== corner)) { + var originalControl = transform.target && transform.target.controls[transform.corner], + originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); + pointer = pointer || this.getPointer(e); + originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); + } + this._setCursorFromEvent(e, target); + this._handleEvent(e, 'up', LEFT_CLICK, isClick); + this._groupSelector = null; + this._currentTransform = null; + // reset the target information about which corner is selected + target && (target.__corner = 0); + if (shouldRender) { + this.requestRenderAll(); + } + else if (!isClick) { + this.renderTop(); + } + }, - /** + /** * @private * Handle event firing for target and subtargets * @param {Event} e event from mouse * @param {String} eventType event to fire (up, down or move) * @return {Fabric.Object} target return the the target found, for internal reasons. */ - _simpleEventHandler: function(eventType, e) { - var target = this.findTarget(e), - targets = this.targets, - options = { - e: e, - target: target, - subTargets: targets, - }; - this.fire(eventType, options); - target && target.fire(eventType, options); - if (!targets) { - return target; - } - for (var i = 0; i < targets.length; i++) { - targets[i].fire(eventType, options); - } + _simpleEventHandler: function(eventType, e) { + var target = this.findTarget(e), + targets = this.targets, + options = { + e: e, + target: target, + subTargets: targets, + }; + this.fire(eventType, options); + target && target.fire(eventType, options); + if (!targets) { return target; - }, + } + for (var i = 0; i < targets.length; i++) { + targets[i].fire(eventType, options); + } + return target; + }, - /** + /** * @private * Handle event firing for target and subtargets * @param {Event} e event from mouse @@ -539,94 +539,94 @@ * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. */ - _handleEvent: function(e, eventType, button, isClick) { - var target = this._target, - targets = this.targets || [], - options = { - e: e, - target: target, - subTargets: targets, - button: button || LEFT_CLICK, - isClick: isClick || false, - pointer: this._pointer, - absolutePointer: this._absolutePointer, - transform: this._currentTransform - }; - if (eventType === 'up') { - options.currentTarget = this.findTarget(e); - options.currentSubTargets = this.targets; - } - this.fire('mouse:' + eventType, options); - target && target.fire('mouse' + eventType, options); - for (var i = 0; i < targets.length; i++) { - targets[i].fire('mouse' + eventType, options); - } - }, + _handleEvent: function(e, eventType, button, isClick) { + var target = this._target, + targets = this.targets || [], + options = { + e: e, + target: target, + subTargets: targets, + button: button || LEFT_CLICK, + isClick: isClick || false, + pointer: this._pointer, + absolutePointer: this._absolutePointer, + transform: this._currentTransform + }; + if (eventType === 'up') { + options.currentTarget = this.findTarget(e); + options.currentSubTargets = this.targets; + } + this.fire('mouse:' + eventType, options); + target && target.fire('mouse' + eventType, options); + for (var i = 0; i < targets.length; i++) { + targets[i].fire('mouse' + eventType, options); + } + }, - /** + /** * @private * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event */ - _finalizeCurrentTransform: function(e) { + _finalizeCurrentTransform: function(e) { - var transform = this._currentTransform, - target = transform.target, - options = { - e: e, - target: target, - transform: transform, - action: transform.action, - }; + var transform = this._currentTransform, + target = transform.target, + options = { + e: e, + target: target, + transform: transform, + action: transform.action, + }; - if (target._scaling) { - target._scaling = false; - } + if (target._scaling) { + target._scaling = false; + } - target.setCoords(); + target.setCoords(); - if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { - this._fire('modified', options); - } - }, + if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { + this._fire('modified', options); + } + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onMouseDownInDrawingMode: function(e) { - this._isCurrentlyDrawing = true; - if (this.getActiveObject()) { - this.discardActiveObject(e).requestRenderAll(); - } - var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); - this._handleEvent(e, 'down'); - }, + _onMouseDownInDrawingMode: function(e) { + this._isCurrentlyDrawing = true; + if (this.getActiveObject()) { + this.discardActiveObject(e).requestRenderAll(); + } + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); + this._handleEvent(e, 'down'); + }, - /** + /** * @private * @param {Event} e Event object fired on mousemove */ - _onMouseMoveInDrawingMode: function(e) { - if (this._isCurrentlyDrawing) { - var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); - } - this.setCursor(this.freeDrawingCursor); - this._handleEvent(e, 'move'); - }, + _onMouseMoveInDrawingMode: function(e) { + if (this._isCurrentlyDrawing) { + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); + } + this.setCursor(this.freeDrawingCursor); + this._handleEvent(e, 'move'); + }, - /** + /** * @private * @param {Event} e Event object fired on mouseup */ - _onMouseUpInDrawingMode: function(e) { - var pointer = this.getPointer(e); - this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); - this._handleEvent(e, 'up'); - }, + _onMouseUpInDrawingMode: function(e) { + var pointer = this.getPointer(e); + this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); + this._handleEvent(e, 'up'); + }, - /** + /** * Method that defines the actions when mouse is clicked on canvas. * The method inits the currentTransform parameters and renders all the * canvas so the current image can be placed on the top canvas and the rest @@ -634,127 +634,127 @@ * @private * @param {Event} e Event object fired on mousedown */ - __onMouseDown: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'down:before'); - var target = this._target; - // if right click just fire events - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'down', RIGHT_CLICK); - } - return; + __onMouseDown: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'down:before'); + var target = this._target; + // if right click just fire events + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'down', RIGHT_CLICK); } + return; + } - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'down', MIDDLE_CLICK); - } - return; + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'down', MIDDLE_CLICK); } + return; + } - if (this.isDrawingMode) { - this._onMouseDownInDrawingMode(e); - return; - } + if (this.isDrawingMode) { + this._onMouseDownInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } + if (!this._isMainEvent(e)) { + return; + } - // ignore if some object is being transformed at this moment - if (this._currentTransform) { - return; - } + // ignore if some object is being transformed at this moment + if (this._currentTransform) { + return; + } - var pointer = this._pointer; - // save pointer for check in __onMouseUp event - this._previousPointer = pointer; - var shouldRender = this._shouldRender(target), - shouldGroup = this._shouldGroup(e, target); - if (this._shouldClearSelection(e, target)) { - this.discardActiveObject(e); - } - else if (shouldGroup) { - this._handleGrouping(e, target); - target = this._activeObject; - } + var pointer = this._pointer; + // save pointer for check in __onMouseUp event + this._previousPointer = pointer; + var shouldRender = this._shouldRender(target), + shouldGroup = this._shouldGroup(e, target); + if (this._shouldClearSelection(e, target)) { + this.discardActiveObject(e); + } + else if (shouldGroup) { + this._handleGrouping(e, target); + target = this._activeObject; + } - if (this.selection && (!target || + if (this.selection && (!target || (!target.selectable && !target.isEditing && target !== this._activeObject))) { - this._groupSelector = { - ex: this._absolutePointer.x, - ey: this._absolutePointer.y, - top: 0, - left: 0 - }; - } + this._groupSelector = { + ex: this._absolutePointer.x, + ey: this._absolutePointer.y, + top: 0, + left: 0 + }; + } - if (target) { - var alreadySelected = target === this._activeObject; - if (target.selectable && target.activeOn === 'down') { - this.setActiveObject(target, e); - } - var corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) - ); - target.__corner = corner; - if (target === this._activeObject && (corner || !shouldGroup)) { - this._setupCurrentTransform(e, target, alreadySelected); - var control = target.controls[corner], - pointer = this.getPointer(e), - mouseDownHandler = control && control.getMouseDownHandler(e, target, control); - if (mouseDownHandler) { - mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); - } + if (target) { + var alreadySelected = target === this._activeObject; + if (target.selectable && target.activeOn === 'down') { + this.setActiveObject(target, e); + } + var corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + target.__corner = corner; + if (target === this._activeObject && (corner || !shouldGroup)) { + this._setupCurrentTransform(e, target, alreadySelected); + var control = target.controls[corner], + pointer = this.getPointer(e), + mouseDownHandler = control && control.getMouseDownHandler(e, target, control); + if (mouseDownHandler) { + mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); } } - var invalidate = shouldRender || shouldGroup; - // we clear `_objectsToRender` in case of a change in order to repopulate it at rendering - // run before firing the `down` event to give the dev a chance to populate it themselves - invalidate && (this._objectsToRender = undefined); - this._handleEvent(e, 'down'); - // we must renderAll so that we update the visuals - invalidate && this.requestRenderAll(); - }, - - /** + } + var invalidate = shouldRender || shouldGroup; + // we clear `_objectsToRender` in case of a change in order to repopulate it at rendering + // run before firing the `down` event to give the dev a chance to populate it themselves + invalidate && (this._objectsToRender = undefined); + this._handleEvent(e, 'down'); + // we must renderAll so that we update the visuals + invalidate && this.requestRenderAll(); + }, + + /** * reset cache form common information needed during event processing * @private */ - _resetTransformEventData: function() { - this._target = null; - this._pointer = null; - this._absolutePointer = null; - }, + _resetTransformEventData: function() { + this._target = null; + this._pointer = null; + this._absolutePointer = null; + }, - /** + /** * Cache common information needed during event processing * @private * @param {Event} e Event object fired on event */ - _cacheTransformEventData: function(e) { - // reset in order to avoid stale caching - this._resetTransformEventData(); - this._pointer = this.getPointer(e, true); - this._absolutePointer = this.restorePointerVpt(this._pointer); - this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; - }, + _cacheTransformEventData: function(e) { + // reset in order to avoid stale caching + this._resetTransformEventData(); + this._pointer = this.getPointer(e, true); + this._absolutePointer = this.restorePointerVpt(this._pointer); + this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; + }, - /** + /** * @private */ - _beforeTransform: function(e) { - var t = this._currentTransform; - this.stateful && t.target.saveState(); - this.fire('before:transform', { - e: e, - transform: t, - }); - }, + _beforeTransform: function(e) { + var t = this._currentTransform; + this.stateful && t.target.saveState(); + this.fire('before:transform', { + e: e, + transform: t, + }); + }, - /** + /** * Method that defines the actions when mouse is hovering the canvas. * The currentTransform parameter will define whether the user is rotating/scaling/translating * an image or neither of them (only hovering). A group selection is also possible and would cancel @@ -763,99 +763,99 @@ * @private * @param {Event} e Event object fired on mousemove */ - __onMouseMove: function (e) { - this._handleEvent(e, 'move:before'); - this._cacheTransformEventData(e); - var target, pointer; + __onMouseMove: function (e) { + this._handleEvent(e, 'move:before'); + this._cacheTransformEventData(e); + var target, pointer; - if (this.isDrawingMode) { - this._onMouseMoveInDrawingMode(e); - return; - } + if (this.isDrawingMode) { + this._onMouseMoveInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } + if (!this._isMainEvent(e)) { + return; + } - var groupSelector = this._groupSelector; + var groupSelector = this._groupSelector; - // We initially clicked in an empty area, so we draw a box for multiple selection - if (groupSelector) { - pointer = this._absolutePointer; + // We initially clicked in an empty area, so we draw a box for multiple selection + if (groupSelector) { + pointer = this._absolutePointer; - groupSelector.left = pointer.x - groupSelector.ex; - groupSelector.top = pointer.y - groupSelector.ey; + groupSelector.left = pointer.x - groupSelector.ex; + groupSelector.top = pointer.y - groupSelector.ey; - this.renderTop(); - } - else if (!this._currentTransform) { - target = this.findTarget(e) || null; - this._setCursorFromEvent(e, target); - this._fireOverOutEvents(target, e); - } - else { - this._transformObject(e); - } - this._handleEvent(e, 'move'); - this._resetTransformEventData(); - }, + this.renderTop(); + } + else if (!this._currentTransform) { + target = this.findTarget(e) || null; + this._setCursorFromEvent(e, target); + this._fireOverOutEvents(target, e); + } + else { + this._transformObject(e); + } + this._handleEvent(e, 'move'); + this._resetTransformEventData(); + }, - /** + /** * Manage the mouseout, mouseover events for the fabric object on the canvas * @param {Fabric.Object} target the target where the target from the mousemove event * @param {Event} e Event object fired on mousemove * @private */ - _fireOverOutEvents: function(target, e) { - var _hoveredTarget = this._hoveredTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); - - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _hoveredTarget, + _fireOverOutEvents: function(target, e) { + var _hoveredTarget = this._hoveredTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); + + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _hoveredTarget, + evtOut: 'mouseout', + canvasEvtOut: 'mouse:out', + evtIn: 'mouseover', + canvasEvtIn: 'mouse:over', + }); + for (var i = 0; i < length; i++){ + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], evtOut: 'mouseout', - canvasEvtOut: 'mouse:out', evtIn: 'mouseover', - canvasEvtIn: 'mouse:over', }); - for (var i = 0; i < length; i++){ - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], - evtOut: 'mouseout', - evtIn: 'mouseover', - }); - } - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - }, + } + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + }, - /** + /** * Manage the dragEnter, dragLeave events for the fabric objects on the canvas * @param {Fabric.Object} target the target where the target from the onDrag event * @param {Event} e Event object fired on ondrag * @private */ - _fireEnterLeaveEvents: function(target, e) { - var _draggedoverTarget = this._draggedoverTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); + _fireEnterLeaveEvents: function(target, e) { + var _draggedoverTarget = this._draggedoverTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _draggedoverTarget, + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _draggedoverTarget, + evtOut: 'dragleave', + evtIn: 'dragenter', + }); + for (var i = 0; i < length; i++) { + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], evtOut: 'dragleave', evtIn: 'dragenter', }); - for (var i = 0; i < length; i++) { - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], - evtOut: 'dragleave', - evtIn: 'dragenter', - }); - } - this._draggedoverTarget = target; - }, + } + this._draggedoverTarget = target; + }, - /** + /** * Manage the synthetic in/out events for the fabric objects on the canvas * @param {Fabric.Object} target the target where the target from the supported events * @param {Event} e Event object fired @@ -867,125 +867,125 @@ * @param {String} config.evtIn name of the event to fire for in * @private */ - fireSyntheticInOutEvents: function(target, e, config) { - var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, - targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; - if (targetChanged) { - inOpt = { e: e, target: target, previousTarget: oldTarget }; - outOpt = { e: e, target: oldTarget, nextTarget: target }; - } - inFires = target && targetChanged; - outFires = oldTarget && targetChanged; - if (outFires) { - canvasEvtOut && this.fire(canvasEvtOut, outOpt); - oldTarget.fire(config.evtOut, outOpt); - } - if (inFires) { - canvasEvtIn && this.fire(canvasEvtIn, inOpt); - target.fire(config.evtIn, inOpt); - } - }, + fireSyntheticInOutEvents: function(target, e, config) { + var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, + targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; + if (targetChanged) { + inOpt = { e: e, target: target, previousTarget: oldTarget }; + outOpt = { e: e, target: oldTarget, nextTarget: target }; + } + inFires = target && targetChanged; + outFires = oldTarget && targetChanged; + if (outFires) { + canvasEvtOut && this.fire(canvasEvtOut, outOpt); + oldTarget.fire(config.evtOut, outOpt); + } + if (inFires) { + canvasEvtIn && this.fire(canvasEvtIn, inOpt); + target.fire(config.evtIn, inOpt); + } + }, - /** + /** * Method that defines actions when an Event Mouse Wheel * @param {Event} e Event object fired on mouseup */ - __onMouseWheel: function(e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'wheel'); - this._resetTransformEventData(); - }, + __onMouseWheel: function(e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'wheel'); + this._resetTransformEventData(); + }, - /** + /** * @private * @param {Event} e Event fired on mousemove */ - _transformObject: function(e) { - var pointer = this.getPointer(e), - transform = this._currentTransform, - target = transform.target, - // transform pointer to target's containing coordinate plane - // both pointer and object should agree on every point - localPointer = target.group ? - fabric.util.sendPointToPlane(pointer, null, target.group.calcTransformMatrix()) : - pointer; + _transformObject: function(e) { + var pointer = this.getPointer(e), + transform = this._currentTransform, + target = transform.target, + // transform pointer to target's containing coordinate plane + // both pointer and object should agree on every point + localPointer = target.group ? + fabric.util.sendPointToPlane(pointer, null, target.group.calcTransformMatrix()) : + pointer; - transform.reset = false; - transform.shiftKey = e.shiftKey; - transform.altKey = e[this.centeredKey]; + transform.reset = false; + transform.shiftKey = e.shiftKey; + transform.altKey = e[this.centeredKey]; - this._performTransformAction(e, transform, localPointer); - transform.actionPerformed && this.requestRenderAll(); - }, + this._performTransformAction(e, transform, localPointer); + transform.actionPerformed && this.requestRenderAll(); + }, - /** + /** * @private */ - _performTransformAction: function(e, transform, pointer) { - var x = pointer.x, - y = pointer.y, - action = transform.action, - actionPerformed = false, - actionHandler = transform.actionHandler; - // this object could be created from the function in the control handlers + _performTransformAction: function(e, transform, pointer) { + var x = pointer.x, + y = pointer.y, + action = transform.action, + actionPerformed = false, + actionHandler = transform.actionHandler; + // this object could be created from the function in the control handlers - if (actionHandler) { - actionPerformed = actionHandler(e, transform, x, y); - } - if (action === 'drag' && actionPerformed) { - transform.target.isMoving = true; - this.setCursor(transform.target.moveCursor || this.moveCursor); - } - transform.actionPerformed = transform.actionPerformed || actionPerformed; - }, + if (actionHandler) { + actionPerformed = actionHandler(e, transform, x, y); + } + if (action === 'drag' && actionPerformed) { + transform.target.isMoving = true; + this.setCursor(transform.target.moveCursor || this.moveCursor); + } + transform.actionPerformed = transform.actionPerformed || actionPerformed; + }, - /** + /** * @private */ - _fire: fabric.controlsUtils.fireEvent, + _fire: fabric.controlsUtils.fireEvent, - /** + /** * Sets the cursor depending on where the canvas is being hovered. * Note: very buggy in Opera * @param {Event} e Event object * @param {Object} target Object that the mouse is hovering, if so. */ - _setCursorFromEvent: function (e, target) { - if (!target) { - this.setCursor(this.defaultCursor); - return false; - } - var hoverCursor = target.hoverCursor || this.hoverCursor, - activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? - this._activeObject : null, - // only show proper corner when group selection is not active - corner = (!activeSelection || !activeSelection.contains(target)) + _setCursorFromEvent: function (e, target) { + if (!target) { + this.setCursor(this.defaultCursor); + return false; + } + var hoverCursor = target.hoverCursor || this.hoverCursor, + activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? + this._activeObject : null, + // only show proper corner when group selection is not active + corner = (!activeSelection || !activeSelection.contains(target)) // here we call findTargetCorner always with undefined for the touch parameter. // we assume that if you are using a cursor you do not need to interact with // the bigger touch area. && target._findTargetCorner(this.getPointer(e, true)); - if (!corner) { - if (target.subTargetCheck){ - // hoverCursor should come from top-most subTarget, - // so we walk the array backwards - this.targets.concat().reverse().map(function(_target){ - hoverCursor = _target.hoverCursor || hoverCursor; - }); - } - this.setCursor(hoverCursor); - } - else { - this.setCursor(this.getCornerCursor(corner, target, e)); + if (!corner) { + if (target.subTargetCheck){ + // hoverCursor should come from top-most subTarget, + // so we walk the array backwards + this.targets.concat().reverse().map(function(_target){ + hoverCursor = _target.hoverCursor || hoverCursor; + }); } - }, + this.setCursor(hoverCursor); + } + else { + this.setCursor(this.getCornerCursor(corner, target, e)); + } + }, - /** + /** * @private */ - getCornerCursor: function(corner, target, e) { - var control = target.controls[corner]; - return control.cursorStyleHandler(e, control, target); - } - }); + getCornerCursor: function(corner, target, e) { + var control = target.controls[corner]; + return control.cursorStyleHandler(e, control, target); + } +}); diff --git a/src/mixins/canvas_gestures.mixin.js b/src/mixins/canvas_gestures.mixin.js index ed41f1bc02e..cfcac8e462a 100644 --- a/src/mixins/canvas_gestures.mixin.js +++ b/src/mixins/canvas_gestures.mixin.js @@ -8,140 +8,140 @@ * - touch:longpress */ - var degreesToRadians = fabric.util.degreesToRadians, - radiansToDegrees = fabric.util.radiansToDegrees; +var degreesToRadians = fabric.util.degreesToRadians, + radiansToDegrees = fabric.util.radiansToDegrees; - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** +fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + /** * Method that defines actions when an Event.js gesture is detected on an object. Currently only supports * 2 finger gestures. * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onTransformGesture: function(e, self) { + __onTransformGesture: function(e, self) { - if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) { - return; - } + if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) { + return; + } - var target = this.findTarget(e); - if ('undefined' !== typeof target) { - this.__gesturesParams = { - e: e, - self: self, - target: target - }; + var target = this.findTarget(e); + if ('undefined' !== typeof target) { + this.__gesturesParams = { + e: e, + self: self, + target: target + }; - this.__gesturesRenderer(); - } + this.__gesturesRenderer(); + } - this.fire('touch:gesture', { - target: target, e: e, self: self - }); - }, - __gesturesParams: null, - __gesturesRenderer: function() { + this.fire('touch:gesture', { + target: target, e: e, self: self + }); + }, + __gesturesParams: null, + __gesturesRenderer: function() { - if (this.__gesturesParams === null || this._currentTransform === null) { - return; - } + if (this.__gesturesParams === null || this._currentTransform === null) { + return; + } - var self = this.__gesturesParams.self, - t = this._currentTransform, - e = this.__gesturesParams.e; + var self = this.__gesturesParams.self, + t = this._currentTransform, + e = this.__gesturesParams.e; - t.action = 'scale'; - t.originX = t.originY = 'center'; + t.action = 'scale'; + t.originX = t.originY = 'center'; - this._scaleObjectBy(self.scale, e); + this._scaleObjectBy(self.scale, e); - if (self.rotation !== 0) { - t.action = 'rotate'; - this._rotateObjectByAngle(self.rotation, e); - } + if (self.rotation !== 0) { + t.action = 'rotate'; + this._rotateObjectByAngle(self.rotation, e); + } - this.requestRenderAll(); + this.requestRenderAll(); - t.action = 'drag'; - }, + t.action = 'drag'; + }, - /** + /** * Method that defines actions when an Event.js drag is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onDrag: function(e, self) { - this.fire('touch:drag', { - e: e, self: self - }); - }, + __onDrag: function(e, self) { + this.fire('touch:drag', { + e: e, self: self + }); + }, - /** + /** * Method that defines actions when an Event.js orientation event is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onOrientationChange: function(e, self) { - this.fire('touch:orientation', { - e: e, self: self - }); - }, + __onOrientationChange: function(e, self) { + this.fire('touch:orientation', { + e: e, self: self + }); + }, - /** + /** * Method that defines actions when an Event.js shake event is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onShake: function(e, self) { - this.fire('touch:shake', { - e: e, self: self - }); - }, + __onShake: function(e, self) { + this.fire('touch:shake', { + e: e, self: self + }); + }, - /** + /** * Method that defines actions when an Event.js longpress event is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onLongPress: function(e, self) { - this.fire('touch:longpress', { - e: e, self: self - }); - }, + __onLongPress: function(e, self) { + this.fire('touch:longpress', { + e: e, self: self + }); + }, - /** + /** * Scales an object by a factor * @param {Number} s The scale factor to apply to the current scale level * @param {Event} e Event object by Event.js */ - _scaleObjectBy: function(s, e) { - var t = this._currentTransform, - target = t.target; - t.gestureScale = s; - target._scaling = true; - return fabric.controlsUtils.scalingEqually(e, t, 0, 0); - }, - - /** + _scaleObjectBy: function(s, e) { + var t = this._currentTransform, + target = t.target; + t.gestureScale = s; + target._scaling = true; + return fabric.controlsUtils.scalingEqually(e, t, 0, 0); + }, + + /** * Rotates object by an angle * @param {Number} curAngle The angle of rotation in degrees * @param {Event} e Event object by Event.js */ - _rotateObjectByAngle: function(curAngle, e) { - var t = this._currentTransform; - - if (t.target.get('lockRotation')) { - return; - } - t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta)); - this._fire('rotating', { - target: t.target, - e: e, - transform: t, - }); + _rotateObjectByAngle: function(curAngle, e) { + var t = this._currentTransform; + + if (t.target.get('lockRotation')) { + return; } - }); + t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta)); + this._fire('rotating', { + target: t.target, + e: e, + transform: t, + }); + } +}); diff --git a/src/mixins/canvas_grouping.mixin.js b/src/mixins/canvas_grouping.mixin.js index 3989a133cce..63c73331aa0 100644 --- a/src/mixins/canvas_grouping.mixin.js +++ b/src/mixins/canvas_grouping.mixin.js @@ -1,18 +1,18 @@ - var min = Math.min, - max = Math.max; +var min = Math.min, + max = Math.max; - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { +fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** + /** * @private * @param {Event} e Event object * @param {fabric.Object} target * @return {Boolean} */ - _shouldGroup: function(e, target) { - var activeObject = this._activeObject; - // check if an active object exists on canvas and if the user is pressing the `selectionKey` while canvas supports multi selection. - return !!activeObject && this._isSelectionKeyPressed(e) && this.selection + _shouldGroup: function(e, target) { + var activeObject = this._activeObject; + // check if an active object exists on canvas and if the user is pressing the `selectionKey` while canvas supports multi selection. + return !!activeObject && this._isSelectionKeyPressed(e) && this.selection // on top of that the user also has to hit a target that is selectable. && !!target && target.selectable // if all pre-requisite pass, the target is either something different from the current @@ -24,163 +24,163 @@ && !target.isDescendantOf(activeObject) && !activeObject.isDescendantOf(target) // target accepts selection && !target.onSelect({ e: e }); - }, + }, - /** + /** * @private * @param {Event} e Event object * @param {fabric.Object} target */ - _handleGrouping: function (e, target) { - var activeObject = this._activeObject; - // avoid multi select when shift click on a corner - if (activeObject.__corner) { + _handleGrouping: function (e, target) { + var activeObject = this._activeObject; + // avoid multi select when shift click on a corner + if (activeObject.__corner) { + return; + } + if (target === activeObject) { + // if it's a group, find target again, using activeGroup objects + target = this.findTarget(e, true); + // if even object is not found or we are on activeObjectCorner, bail out + if (!target || !target.selectable) { return; } - if (target === activeObject) { - // if it's a group, find target again, using activeGroup objects - target = this.findTarget(e, true); - // if even object is not found or we are on activeObjectCorner, bail out - if (!target || !target.selectable) { - return; - } - } - if (activeObject && activeObject.type === 'activeSelection') { - this._updateActiveSelection(target, e); - } - else { - this._createActiveSelection(target, e); - } - }, + } + if (activeObject && activeObject.type === 'activeSelection') { + this._updateActiveSelection(target, e); + } + else { + this._createActiveSelection(target, e); + } + }, - /** + /** * @private */ - _updateActiveSelection: function(target, e) { - var activeSelection = this._activeObject, - currentActiveObjects = activeSelection._objects.slice(0); - if (target.group === activeSelection) { - activeSelection.remove(target); - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - if (activeSelection.size() === 1) { - // activate last remaining object - this._setActiveObject(activeSelection.item(0), e); - } + _updateActiveSelection: function(target, e) { + var activeSelection = this._activeObject, + currentActiveObjects = activeSelection._objects.slice(0); + if (target.group === activeSelection) { + activeSelection.remove(target); + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + if (activeSelection.size() === 1) { + // activate last remaining object + this._setActiveObject(activeSelection.item(0), e); } - else { - activeSelection.add(target); - this._hoveredTarget = activeSelection; - this._hoveredTargets = this.targets.concat(); - } - this._fireSelectionEvents(currentActiveObjects, e); - }, + } + else { + activeSelection.add(target); + this._hoveredTarget = activeSelection; + this._hoveredTargets = this.targets.concat(); + } + this._fireSelectionEvents(currentActiveObjects, e); + }, - /** + /** * @private */ - _createActiveSelection: function(target, e) { - var currentActives = this.getActiveObjects(), group = this._createGroup(target); - this._hoveredTarget = group; - // ISSUE 4115: should we consider subTargets here? - // this._hoveredTargets = []; - // this._hoveredTargets = this.targets.concat(); - this._setActiveObject(group, e); - this._fireSelectionEvents(currentActives, e); - }, - - - /** + _createActiveSelection: function(target, e) { + var currentActives = this.getActiveObjects(), group = this._createGroup(target); + this._hoveredTarget = group; + // ISSUE 4115: should we consider subTargets here? + // this._hoveredTargets = []; + // this._hoveredTargets = this.targets.concat(); + this._setActiveObject(group, e); + this._fireSelectionEvents(currentActives, e); + }, + + + /** * @private * @param {Object} target * @returns {fabric.ActiveSelection} */ - _createGroup: function(target) { - var activeObject = this._activeObject; - var groupObjects = target.isInFrontOf(activeObject) ? - [activeObject, target] : - [target, activeObject]; - activeObject.isEditing && activeObject.exitEditing(); - // handle case: target is nested - return new fabric.ActiveSelection(groupObjects, { - canvas: this - }); - }, - - /** + _createGroup: function(target) { + var activeObject = this._activeObject; + var groupObjects = target.isInFrontOf(activeObject) ? + [activeObject, target] : + [target, activeObject]; + activeObject.isEditing && activeObject.exitEditing(); + // handle case: target is nested + return new fabric.ActiveSelection(groupObjects, { + canvas: this + }); + }, + + /** * @private * @param {Event} e mouse event */ - _groupSelectedObjects: function (e) { + _groupSelectedObjects: function (e) { - var group = this._collectObjects(e), - aGroup; + var group = this._collectObjects(e), + aGroup; - // do not create group for 1 element only - if (group.length === 1) { - this.setActiveObject(group[0], e); - } - else if (group.length > 1) { - aGroup = new fabric.ActiveSelection(group.reverse(), { - canvas: this - }); - this.setActiveObject(aGroup, e); - } - }, + // do not create group for 1 element only + if (group.length === 1) { + this.setActiveObject(group[0], e); + } + else if (group.length > 1) { + aGroup = new fabric.ActiveSelection(group.reverse(), { + canvas: this + }); + this.setActiveObject(aGroup, e); + } + }, - /** + /** * @private */ - _collectObjects: function(e) { - var group = [], - currentObject, - x1 = this._groupSelector.ex, - y1 = this._groupSelector.ey, - x2 = x1 + this._groupSelector.left, - y2 = y1 + this._groupSelector.top, - selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), - selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), - allowIntersect = !this.selectionFullyContained, - isClick = x1 === x2 && y1 === y2; - // we iterate reverse order to collect top first in case of click. - for (var i = this._objects.length; i--; ) { - currentObject = this._objects[i]; - - if (!currentObject || !currentObject.selectable || !currentObject.visible) { - continue; - } + _collectObjects: function(e) { + var group = [], + currentObject, + x1 = this._groupSelector.ex, + y1 = this._groupSelector.ey, + x2 = x1 + this._groupSelector.left, + y2 = y1 + this._groupSelector.top, + selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), + selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), + allowIntersect = !this.selectionFullyContained, + isClick = x1 === x2 && y1 === y2; + // we iterate reverse order to collect top first in case of click. + for (var i = this._objects.length; i--; ) { + currentObject = this._objects[i]; + + if (!currentObject || !currentObject.selectable || !currentObject.visible) { + continue; + } - if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || + if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) || (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) || (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true)) - ) { - group.push(currentObject); - // only add one object if it's a click - if (isClick) { - break; - } + ) { + group.push(currentObject); + // only add one object if it's a click + if (isClick) { + break; } } + } - if (group.length > 1) { - group = group.filter(function(object) { - return !object.onSelect({ e: e }); - }); - } + if (group.length > 1) { + group = group.filter(function(object) { + return !object.onSelect({ e: e }); + }); + } - return group; - }, + return group; + }, - /** + /** * @private */ - _maybeGroupObjects: function(e) { - if (this.selection && this._groupSelector) { - this._groupSelectedObjects(e); - } - this.setCursor(this.defaultCursor); - // clear selection and current transformation - this._groupSelector = null; + _maybeGroupObjects: function(e) { + if (this.selection && this._groupSelector) { + this._groupSelectedObjects(e); } - }); + this.setCursor(this.defaultCursor); + // clear selection and current transformation + this._groupSelector = null; + } +}); diff --git a/src/mixins/default_controls.js b/src/mixins/default_controls.js index ba82573756f..1b47c567521 100644 --- a/src/mixins/default_controls.js +++ b/src/mixins/default_controls.js @@ -1,111 +1,111 @@ - var controlsUtils = fabric.controlsUtils, - scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, - scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, - scalingEqually = controlsUtils.scalingEqually, - scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, - scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, - scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, - objectControls = fabric.Object.prototype.controls; +var controlsUtils = fabric.controlsUtils, + scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, + scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, + scalingEqually = controlsUtils.scalingEqually, + scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, + scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, + scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, + objectControls = fabric.Object.prototype.controls; - objectControls.ml = new fabric.Control({ - x: -0.5, - y: 0, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, - }); +objectControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, +}); - objectControls.mr = new fabric.Control({ - x: 0.5, - y: 0, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, - }); +objectControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, +}); - objectControls.mb = new fabric.Control({ - x: 0, - y: 0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, - }); +objectControls.mb = new fabric.Control({ + x: 0, + y: 0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, +}); - objectControls.mt = new fabric.Control({ - x: 0, - y: -0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, - }); +objectControls.mt = new fabric.Control({ + x: 0, + y: -0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, +}); - objectControls.tl = new fabric.Control({ - x: -0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); +objectControls.tl = new fabric.Control({ + x: -0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually +}); - objectControls.tr = new fabric.Control({ - x: 0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); +objectControls.tr = new fabric.Control({ + x: 0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually +}); - objectControls.bl = new fabric.Control({ - x: -0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); +objectControls.bl = new fabric.Control({ + x: -0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually +}); - objectControls.br = new fabric.Control({ - x: 0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); +objectControls.br = new fabric.Control({ + x: 0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually +}); - objectControls.mtr = new fabric.Control({ - x: 0, - y: -0.5, - actionHandler: controlsUtils.rotationWithSnapping, - cursorStyleHandler: controlsUtils.rotationStyleHandler, - offsetY: -40, - withConnection: true, - actionName: 'rotate', - }); +objectControls.mtr = new fabric.Control({ + x: 0, + y: -0.5, + actionHandler: controlsUtils.rotationWithSnapping, + cursorStyleHandler: controlsUtils.rotationStyleHandler, + offsetY: -40, + withConnection: true, + actionName: 'rotate', +}); - if (fabric.Textbox) { - // this is breaking the prototype inheritance, no time / ideas to fix it. - // is important to document that if you want to have all objects to have a - // specific custom control, you have to add it to Object prototype and to Textbox - // prototype. The controls are shared as references. So changes to control `tr` - // can still apply to all objects if needed. - var textBoxControls = fabric.Textbox.prototype.controls = { }; +if (fabric.Textbox) { + // this is breaking the prototype inheritance, no time / ideas to fix it. + // is important to document that if you want to have all objects to have a + // specific custom control, you have to add it to Object prototype and to Textbox + // prototype. The controls are shared as references. So changes to control `tr` + // can still apply to all objects if needed. + var textBoxControls = fabric.Textbox.prototype.controls = { }; - textBoxControls.mtr = objectControls.mtr; - textBoxControls.tr = objectControls.tr; - textBoxControls.br = objectControls.br; - textBoxControls.tl = objectControls.tl; - textBoxControls.bl = objectControls.bl; - textBoxControls.mt = objectControls.mt; - textBoxControls.mb = objectControls.mb; + textBoxControls.mtr = objectControls.mtr; + textBoxControls.tr = objectControls.tr; + textBoxControls.br = objectControls.br; + textBoxControls.tl = objectControls.tl; + textBoxControls.bl = objectControls.bl; + textBoxControls.mt = objectControls.mt; + textBoxControls.mb = objectControls.mb; - textBoxControls.mr = new fabric.Control({ - x: 0.5, - y: 0, - actionHandler: controlsUtils.changeWidth, - cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', - }); + textBoxControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); - textBoxControls.ml = new fabric.Control({ - x: -0.5, - y: 0, - actionHandler: controlsUtils.changeWidth, - cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', - }); - } + textBoxControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); +} diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js index 71c2e5722bc..03a6be2b6fb 100644 --- a/src/mixins/itext.svg_export.js +++ b/src/mixins/itext.svg_export.js @@ -1,210 +1,210 @@ /* _TO_SVG_START_ */ - var toFixed = fabric.util.toFixed, - multipleSpacesRegex = / +/g; +var toFixed = fabric.util.toFixed, + multipleSpacesRegex = / +/g; - fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { +fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** + /** * Returns SVG representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - _toSVG: function() { - var offsets = this._getSVGLeftTopOffsets(), - textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); - return this._wrapSVGTextAndBg(textAndBg); - }, + _toSVG: function() { + var offsets = this._getSVGLeftTopOffsets(), + textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); + return this._wrapSVGTextAndBg(textAndBg); + }, - /** + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup( - this._toSVG(), - { reviver: reviver, noStyle: true, withShadow: true } - ); - }, - - /** + toSVG: function(reviver) { + return this._createBaseSVGMarkup( + this._toSVG(), + { reviver: reviver, noStyle: true, withShadow: true } + ); + }, + + /** * @private */ - _getSVGLeftTopOffsets: function() { - return { - textLeft: -this.width / 2, - textTop: -this.height / 2, - lineTop: this.getHeightOfLine(0) - }; - }, - - /** + _getSVGLeftTopOffsets: function() { + return { + textLeft: -this.width / 2, + textTop: -this.height / 2, + lineTop: this.getHeightOfLine(0) + }; + }, + + /** * @private */ - _wrapSVGTextAndBg: function(textAndBg) { - var noShadow = true, - textDecoration = this.getSvgTextDecoration(this); - return [ - textAndBg.textBgRects.join(''), - '\t\t', - textAndBg.textSpans.join(''), - '\n' - ]; - }, - - /** + _wrapSVGTextAndBg: function(textAndBg) { + var noShadow = true, + textDecoration = this.getSvgTextDecoration(this); + return [ + textAndBg.textBgRects.join(''), + '\t\t', + textAndBg.textSpans.join(''), + '\n' + ]; + }, + + /** * @private * @param {Number} textTopOffset Text top offset * @param {Number} textLeftOffset Text left offset * @return {Object} */ - _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { - var textSpans = [], - textBgRects = [], - height = textTopOffset, lineOffset; - // bounding-box background - this._setSVGBg(textBgRects); - - // text and text-background - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineOffset = this._getLineLeftOffset(i); - if (this.direction === 'rtl') { - lineOffset += this.width; - } - if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { - this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); - } - this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); - height += this.getHeightOfLine(i); + _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { + var textSpans = [], + textBgRects = [], + height = textTopOffset, lineOffset; + // bounding-box background + this._setSVGBg(textBgRects); + + // text and text-background + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineOffset = this._getLineLeftOffset(i); + if (this.direction === 'rtl') { + lineOffset += this.width; } + if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { + this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); + } + this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); + height += this.getHeightOfLine(i); + } - return { - textSpans: textSpans, - textBgRects: textBgRects - }; - }, + return { + textSpans: textSpans, + textBgRects: textBgRects + }; + }, - /** + /** * @private */ - _createTextCharSpan: function(_char, styleDecl, left, top) { - var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), - styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), - fillStyles = styleProps ? 'style="' + styleProps + '"' : '', - dy = styleDecl.deltaY, dySpan = '', - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - if (dy) { - dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; + _createTextCharSpan: function(_char, styleDecl, left, top) { + var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), + styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), + fillStyles = styleProps ? 'style="' + styleProps + '"' : '', + dy = styleDecl.deltaY, dySpan = '', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + if (dy) { + dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; + } + return [ + '', + fabric.util.string.escapeXml(_char), + '' + ].join(''); + }, + + _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, style, + boxWidth = 0, + line = this._textLines[lineIndex], + timeToRender; + + textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + textLeftOffset += charBox.kernedWidth - charBox.width; + boxWidth += charBox.width; } - return [ - '', - fabric.util.string.escapeXml(_char), - '' - ].join(''); - }, - - _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, style, - boxWidth = 0, - line = this._textLines[lineIndex], - timeToRender; - - textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - textLeftOffset += charBox.kernedWidth - charBox.width; - boxWidth += charBox.width; - } - else { - boxWidth += charBox.kernedWidth; - } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; - } - } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); - } - if (timeToRender) { - style = this._getStyleDeclaration(lineIndex, i) || { }; - textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); - charsToRender = ''; - actualStyle = nextStyle; - if (this.direction === 'rtl') { - textLeftOffset -= boxWidth; - } - else { - textLeftOffset += boxWidth; - } - boxWidth = 0; + else { + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; } } - }, - - _pushTextBgRect: function(textBgRects, color, left, top, width, height) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - }, - - _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { - var line = this._textLines[i], - heightOfLine = this.getHeightOfLine(i) / this.lineHeight, - boxWidth = 0, - boxStart = 0, - charBox, currentColor, - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (currentColor !== lastColor) { - lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); + } + if (timeToRender) { + style = this._getStyleDeclaration(lineIndex, i) || { }; + textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); + charsToRender = ''; + actualStyle = nextStyle; + if (this.direction === 'rtl') { + textLeftOffset -= boxWidth; } else { - boxWidth += charBox.kernedWidth; + textLeftOffset += boxWidth; } + boxWidth = 0; + } + } + }, + + _pushTextBgRect: function(textBgRects, color, left, top, width, height) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + }, + + _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { + var line = this._textLines[i], + heightOfLine = this.getHeightOfLine(i) / this.lineHeight, + boxWidth = 0, + boxStart = 0, + charBox, currentColor, + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (currentColor !== lastColor) { + lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; } - currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - }, + else { + boxWidth += charBox.kernedWidth; + } + } + currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + }, - /** + /** * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1 * @@ -212,37 +212,37 @@ * @param {*} value * @return {String} */ - _getFillAttributes: function(value) { - var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; - if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { - return 'fill="' + value + '"'; - } - return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; - }, - - /** + _getFillAttributes: function(value) { + var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; + if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { + return 'fill="' + value + '"'; + } + return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; + }, + + /** * @private */ - _getSVGLineTopOffset: function(lineIndex) { - var lineTopOffset = 0, lastHeight = 0; - for (var j = 0; j < lineIndex; j++) { - lineTopOffset += this.getHeightOfLine(j); - } - lastHeight = this.getHeightOfLine(j); - return { - lineTop: lineTopOffset, - offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) - }; - }, - - /** + _getSVGLineTopOffset: function(lineIndex) { + var lineTopOffset = 0, lastHeight = 0; + for (var j = 0; j < lineIndex; j++) { + lineTopOffset += this.getHeightOfLine(j); + } + lastHeight = this.getHeightOfLine(j); + return { + lineTop: lineTopOffset, + offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) + }; + }, + + /** * Returns styles-string for svg-export * @param {Boolean} skipShadow a boolean to skip shadow filter output * @return {String} */ - getSvgStyles: function(skipShadow) { - var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); - return svgStyle + ' white-space: pre;'; - }, - }); + getSvgStyles: function(skipShadow) { + var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); + return svgStyle + ' white-space: pre;'; + }, +}); /* _TO_SVG_END_ */ diff --git a/src/mixins/itext_behavior.mixin.js b/src/mixins/itext_behavior.mixin.js index 6d26e9d0953..35c09fd27f1 100644 --- a/src/mixins/itext_behavior.mixin.js +++ b/src/mixins/itext_behavior.mixin.js @@ -1,735 +1,735 @@ - fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { +fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** + /** * Initializes all the interactive behavior of IText */ - initBehavior: function() { - this.initAddedHandler(); - this.initRemovedHandler(); - this.initCursorSelectionHandlers(); - this.initDoubleClickSimulation(); - this.mouseMoveHandler = this.mouseMoveHandler.bind(this); - }, + initBehavior: function() { + this.initAddedHandler(); + this.initRemovedHandler(); + this.initCursorSelectionHandlers(); + this.initDoubleClickSimulation(); + this.mouseMoveHandler = this.mouseMoveHandler.bind(this); + }, - onDeselect: function() { - this.isEditing && this.exitEditing(); - this.selected = false; - }, + onDeselect: function() { + this.isEditing && this.exitEditing(); + this.selected = false; + }, - /** + /** * Initializes "added" event handler */ - initAddedHandler: function() { - var _this = this; - this.on('added', function (opt) { - // make sure we listen to the canvas added event - var canvas = opt.target; - if (canvas) { - if (!canvas._hasITextHandlers) { - canvas._hasITextHandlers = true; - _this._initCanvasHandlers(canvas); - } - canvas._iTextInstances = canvas._iTextInstances || []; - canvas._iTextInstances.push(_this); + initAddedHandler: function() { + var _this = this; + this.on('added', function (opt) { + // make sure we listen to the canvas added event + var canvas = opt.target; + if (canvas) { + if (!canvas._hasITextHandlers) { + canvas._hasITextHandlers = true; + _this._initCanvasHandlers(canvas); } - }); - }, - - initRemovedHandler: function() { - var _this = this; - this.on('removed', function (opt) { - // make sure we listen to the canvas removed event - var canvas = opt.target; - if (canvas) { - canvas._iTextInstances = canvas._iTextInstances || []; - fabric.util.removeFromArray(canvas._iTextInstances, _this); - if (canvas._iTextInstances.length === 0) { - canvas._hasITextHandlers = false; - _this._removeCanvasHandlers(canvas); - } + canvas._iTextInstances = canvas._iTextInstances || []; + canvas._iTextInstances.push(_this); + } + }); + }, + + initRemovedHandler: function() { + var _this = this; + this.on('removed', function (opt) { + // make sure we listen to the canvas removed event + var canvas = opt.target; + if (canvas) { + canvas._iTextInstances = canvas._iTextInstances || []; + fabric.util.removeFromArray(canvas._iTextInstances, _this); + if (canvas._iTextInstances.length === 0) { + canvas._hasITextHandlers = false; + _this._removeCanvasHandlers(canvas); } - }); - }, + } + }); + }, - /** + /** * register canvas event to manage exiting on other instances * @private */ - _initCanvasHandlers: function(canvas) { - canvas._mouseUpITextHandler = function() { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.__isMousedown = false; - }); - } - }; - canvas.on('mouse:up', canvas._mouseUpITextHandler); - }, + _initCanvasHandlers: function(canvas) { + canvas._mouseUpITextHandler = function() { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.__isMousedown = false; + }); + } + }; + canvas.on('mouse:up', canvas._mouseUpITextHandler); + }, - /** + /** * remove canvas event to manage exiting on other instances * @private */ - _removeCanvasHandlers: function(canvas) { - canvas.off('mouse:up', canvas._mouseUpITextHandler); - }, + _removeCanvasHandlers: function(canvas) { + canvas.off('mouse:up', canvas._mouseUpITextHandler); + }, - /** + /** * @private */ - _tick: function() { - this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); - }, + _tick: function() { + this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); + }, - /** + /** * @private */ - _animateCursor: function(obj, targetOpacity, duration, completeMethod) { + _animateCursor: function(obj, targetOpacity, duration, completeMethod) { - var tickState; + var tickState; - tickState = { - isAborted: false, - abort: function() { - this.isAborted = true; - }, - }; + tickState = { + isAborted: false, + abort: function() { + this.isAborted = true; + }, + }; - obj.animate('_currentCursorOpacity', targetOpacity, { - duration: duration, - onComplete: function() { - if (!tickState.isAborted) { - obj[completeMethod](); - } - }, - onChange: function() { - // we do not want to animate a selection, only cursor - if (obj.canvas && obj.selectionStart === obj.selectionEnd) { - obj.renderCursorOrSelection(); - } - }, - abort: function() { - return tickState.isAborted; + obj.animate('_currentCursorOpacity', targetOpacity, { + duration: duration, + onComplete: function() { + if (!tickState.isAborted) { + obj[completeMethod](); } - }); - return tickState; - }, + }, + onChange: function() { + // we do not want to animate a selection, only cursor + if (obj.canvas && obj.selectionStart === obj.selectionEnd) { + obj.renderCursorOrSelection(); + } + }, + abort: function() { + return tickState.isAborted; + } + }); + return tickState; + }, - /** + /** * @private */ - _onTickComplete: function() { + _onTickComplete: function() { - var _this = this; + var _this = this; - if (this._cursorTimeout1) { - clearTimeout(this._cursorTimeout1); - } - this._cursorTimeout1 = setTimeout(function() { - _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); - }, 100); - }, + if (this._cursorTimeout1) { + clearTimeout(this._cursorTimeout1); + } + this._cursorTimeout1 = setTimeout(function() { + _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); + }, 100); + }, - /** + /** * Initializes delayed cursor */ - initDelayedCursor: function(restart) { - var _this = this, - delay = restart ? 0 : this.cursorDelay; + initDelayedCursor: function(restart) { + var _this = this, + delay = restart ? 0 : this.cursorDelay; - this.abortCursorAnimation(); - this._currentCursorOpacity = 1; - if (delay) { - this._cursorTimeout2 = setTimeout(function () { - _this._tick(); - }, delay); - } - else { - this._tick(); - } - }, + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + if (delay) { + this._cursorTimeout2 = setTimeout(function () { + _this._tick(); + }, delay); + } + else { + this._tick(); + } + }, - /** + /** * Aborts cursor animation and clears all timeouts */ - abortCursorAnimation: function() { - var shouldClear = this._currentTickState || this._currentTickCompleteState, - canvas = this.canvas; - this._currentTickState && this._currentTickState.abort(); - this._currentTickCompleteState && this._currentTickCompleteState.abort(); + abortCursorAnimation: function() { + var shouldClear = this._currentTickState || this._currentTickCompleteState, + canvas = this.canvas; + this._currentTickState && this._currentTickState.abort(); + this._currentTickCompleteState && this._currentTickCompleteState.abort(); - clearTimeout(this._cursorTimeout1); - clearTimeout(this._cursorTimeout2); + clearTimeout(this._cursorTimeout1); + clearTimeout(this._cursorTimeout2); - this._currentCursorOpacity = 0; - // to clear just itext area we need to transform the context - // it may not be worth it - if (shouldClear && canvas) { - canvas.clearContext(canvas.contextTop || canvas.contextContainer); - } + this._currentCursorOpacity = 0; + // to clear just itext area we need to transform the context + // it may not be worth it + if (shouldClear && canvas) { + canvas.clearContext(canvas.contextTop || canvas.contextContainer); + } - }, + }, - /** + /** * Selects entire text * @return {fabric.IText} thisArg * @chainable */ - selectAll: function() { - this.selectionStart = 0; - this.selectionEnd = this._text.length; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + selectAll: function() { + this.selectionStart = 0; + this.selectionEnd = this._text.length; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** + /** * Returns selected text * @return {String} */ - getSelectedText: function() { - return this._text.slice(this.selectionStart, this.selectionEnd).join(''); - }, + getSelectedText: function() { + return this._text.slice(this.selectionStart, this.selectionEnd).join(''); + }, - /** + /** * Find new selection index representing start of current word according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findWordBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; + findWordBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; - // remove space before cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { - offset++; - index--; - } - } - while (/\S/.test(this._text[index]) && index > -1) { + // remove space before cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { offset++; index--; } + } + while (/\S/.test(this._text[index]) && index > -1) { + offset++; + index--; + } - return startFrom - offset; - }, + return startFrom - offset; + }, - /** + /** * Find new selection index representing end of current word according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findWordBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; + findWordBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; - // remove space after cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { - offset++; - index++; - } - } - while (/\S/.test(this._text[index]) && index < this._text.length) { + // remove space after cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { offset++; index++; } + } + while (/\S/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } - return startFrom + offset; - }, + return startFrom + offset; + }, - /** + /** * Find new selection index representing start of current line according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findLineBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; + findLineBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; - while (!/\n/.test(this._text[index]) && index > -1) { - offset++; - index--; - } + while (!/\n/.test(this._text[index]) && index > -1) { + offset++; + index--; + } - return startFrom - offset; - }, + return startFrom - offset; + }, - /** + /** * Find new selection index representing end of current line according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findLineBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; + findLineBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; - while (!/\n/.test(this._text[index]) && index < this._text.length) { - offset++; - index++; - } + while (!/\n/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } - return startFrom + offset; - }, + return startFrom + offset; + }, - /** + /** * Finds index corresponding to beginning or end of a word * @param {Number} selectionStart Index of a character * @param {Number} direction 1 or -1 * @return {Number} Index of the beginning or end of a word */ - searchWordBoundary: function(selectionStart, direction) { - var text = this._text, - index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, - _char = text[index], - // wrong - reNonWord = fabric.reNonWord; + searchWordBoundary: function(selectionStart, direction) { + var text = this._text, + index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, + _char = text[index], + // wrong + reNonWord = fabric.reNonWord; - while (!reNonWord.test(_char) && index > 0 && index < text.length) { - index += direction; - _char = text[index]; - } - if (reNonWord.test(_char)) { - index += direction === 1 ? 0 : 1; - } - return index; - }, + while (!reNonWord.test(_char) && index > 0 && index < text.length) { + index += direction; + _char = text[index]; + } + if (reNonWord.test(_char)) { + index += direction === 1 ? 0 : 1; + } + return index; + }, - /** + /** * Selects a word based on the index * @param {Number} selectionStart Index of a character */ - selectWord: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ - newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ + selectWord: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ + newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - }, + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + }, - /** + /** * Selects a line based on the index * @param {Number} selectionStart Index of a character * @return {fabric.IText} thisArg * @chainable */ - selectLine: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.findLineBoundaryLeft(selectionStart), - newSelectionEnd = this.findLineBoundaryRight(selectionStart); + selectLine: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.findLineBoundaryLeft(selectionStart), + newSelectionEnd = this.findLineBoundaryRight(selectionStart); - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** + /** * Enters editing state * @return {fabric.IText} thisArg * @chainable */ - enterEditing: function(e) { - if (this.isEditing || !this.editable) { - return; - } + enterEditing: function(e) { + if (this.isEditing || !this.editable) { + return; + } - if (this.canvas) { - this.canvas.calcOffset(); - this.exitEditingOnOthers(this.canvas); - } + if (this.canvas) { + this.canvas.calcOffset(); + this.exitEditingOnOthers(this.canvas); + } - this.isEditing = true; + this.isEditing = true; - this.initHiddenTextarea(e); - this.hiddenTextarea.focus(); - this.hiddenTextarea.value = this.text; - this._updateTextarea(); - this._saveEditingProps(); - this._setEditingProps(); - this._textBeforeEdit = this.text; + this.initHiddenTextarea(e); + this.hiddenTextarea.focus(); + this.hiddenTextarea.value = this.text; + this._updateTextarea(); + this._saveEditingProps(); + this._setEditingProps(); + this._textBeforeEdit = this.text; - this._tick(); - this.fire('editing:entered'); - this._fireSelectionChanged(); - if (!this.canvas) { - return this; - } - this.canvas.fire('text:editing:entered', { target: this }); - this.initMouseMoveHandler(); - this.canvas.requestRenderAll(); + this._tick(); + this.fire('editing:entered'); + this._fireSelectionChanged(); + if (!this.canvas) { return this; - }, - - exitEditingOnOthers: function(canvas) { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.selected = false; - if (obj.isEditing) { - obj.exitEditing(); - } - }); - } - }, + } + this.canvas.fire('text:editing:entered', { target: this }); + this.initMouseMoveHandler(); + this.canvas.requestRenderAll(); + return this; + }, + + exitEditingOnOthers: function(canvas) { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.selected = false; + if (obj.isEditing) { + obj.exitEditing(); + } + }); + } + }, - /** + /** * Initializes "mousemove" event handler */ - initMouseMoveHandler: function() { - this.canvas.on('mouse:move', this.mouseMoveHandler); - }, + initMouseMoveHandler: function() { + this.canvas.on('mouse:move', this.mouseMoveHandler); + }, - /** + /** * @private */ - mouseMoveHandler: function(options) { - if (!this.__isMousedown || !this.isEditing) { - return; - } + mouseMoveHandler: function(options) { + if (!this.__isMousedown || !this.isEditing) { + return; + } - var newSelectionStart = this.getSelectionStartFromPointer(options.e), - currentStart = this.selectionStart, - currentEnd = this.selectionEnd; - if ( - (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) + var newSelectionStart = this.getSelectionStartFromPointer(options.e), + currentStart = this.selectionStart, + currentEnd = this.selectionEnd; + if ( + (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) && (currentStart === newSelectionStart || currentEnd === newSelectionStart) - ) { - return; - } - if (newSelectionStart > this.__selectionStartOnMouseDown) { - this.selectionStart = this.__selectionStartOnMouseDown; - this.selectionEnd = newSelectionStart; - } - else { - this.selectionStart = newSelectionStart; - this.selectionEnd = this.__selectionStartOnMouseDown; - } - if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { - this.restartCursorIfNeeded(); - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - } - }, + ) { + return; + } + if (newSelectionStart > this.__selectionStartOnMouseDown) { + this.selectionStart = this.__selectionStartOnMouseDown; + this.selectionEnd = newSelectionStart; + } + else { + this.selectionStart = newSelectionStart; + this.selectionEnd = this.__selectionStartOnMouseDown; + } + if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { + this.restartCursorIfNeeded(); + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + } + }, - /** + /** * @private */ - _setEditingProps: function() { - this.hoverCursor = 'text'; + _setEditingProps: function() { + this.hoverCursor = 'text'; - if (this.canvas) { - this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; - } + if (this.canvas) { + this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; + } - this.borderColor = this.editingBorderColor; - this.hasControls = this.selectable = false; - this.lockMovementX = this.lockMovementY = true; - }, + this.borderColor = this.editingBorderColor; + this.hasControls = this.selectable = false; + this.lockMovementX = this.lockMovementY = true; + }, - /** + /** * convert from textarea to grapheme indexes */ - fromStringToGraphemeSelection: function(start, end, text) { - var smallerTextStart = text.slice(0, start), - graphemeStart = this.graphemeSplit(smallerTextStart).length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = text.slice(start, end), - graphemeEnd = this.graphemeSplit(smallerTextEnd).length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + fromStringToGraphemeSelection: function(start, end, text) { + var smallerTextStart = text.slice(0, start), + graphemeStart = this.graphemeSplit(smallerTextStart).length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = text.slice(start, end), + graphemeEnd = this.graphemeSplit(smallerTextEnd).length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - /** + /** * convert from fabric to textarea values */ - fromGraphemeToStringSelection: function(start, end, _text) { - var smallerTextStart = _text.slice(0, start), - graphemeStart = smallerTextStart.join('').length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = _text.slice(start, end), - graphemeEnd = smallerTextEnd.join('').length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + fromGraphemeToStringSelection: function(start, end, _text) { + var smallerTextStart = _text.slice(0, start), + graphemeStart = smallerTextStart.join('').length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = _text.slice(start, end), + graphemeEnd = smallerTextEnd.join('').length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - /** + /** * @private */ - _updateTextarea: function() { - this.cursorOffsetCache = { }; - if (!this.hiddenTextarea) { - return; - } - if (!this.inCompositionMode) { - var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); - this.hiddenTextarea.selectionStart = newSelection.selectionStart; - this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; - } - this.updateTextareaPosition(); - }, + _updateTextarea: function() { + this.cursorOffsetCache = { }; + if (!this.hiddenTextarea) { + return; + } + if (!this.inCompositionMode) { + var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); + this.hiddenTextarea.selectionStart = newSelection.selectionStart; + this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; + } + this.updateTextareaPosition(); + }, - /** + /** * @private */ - updateFromTextArea: function() { - if (!this.hiddenTextarea) { - return; - } - this.cursorOffsetCache = { }; - this.text = this.hiddenTextarea.value; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - var newSelection = this.fromStringToGraphemeSelection( - this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); - this.selectionEnd = this.selectionStart = newSelection.selectionEnd; - if (!this.inCompositionMode) { - this.selectionStart = newSelection.selectionStart; - } - this.updateTextareaPosition(); - }, + updateFromTextArea: function() { + if (!this.hiddenTextarea) { + return; + } + this.cursorOffsetCache = { }; + this.text = this.hiddenTextarea.value; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + var newSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); + this.selectionEnd = this.selectionStart = newSelection.selectionEnd; + if (!this.inCompositionMode) { + this.selectionStart = newSelection.selectionStart; + } + this.updateTextareaPosition(); + }, - /** + /** * @private */ - updateTextareaPosition: function() { - if (this.selectionStart === this.selectionEnd) { - var style = this._calcTextareaPosition(); - this.hiddenTextarea.style.left = style.left; - this.hiddenTextarea.style.top = style.top; - } - }, + updateTextareaPosition: function() { + if (this.selectionStart === this.selectionEnd) { + var style = this._calcTextareaPosition(); + this.hiddenTextarea.style.left = style.left; + this.hiddenTextarea.style.top = style.top; + } + }, - /** + /** * @private * @return {Object} style contains style for hiddenTextarea */ - _calcTextareaPosition: function() { - if (!this.canvas) { - return { x: 1, y: 1 }; - } - var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, - boundaries = this._getCursorBoundaries(desiredPosition), - cursorLocation = this.get2DCursorLocation(desiredPosition), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, - leftOffset = boundaries.leftOffset, - m = this.calcTransformMatrix(), - p = { - x: boundaries.left + leftOffset, - y: boundaries.top + boundaries.topOffset + charHeight - }, - retinaScaling = this.canvas.getRetinaScaling(), - upperCanvas = this.canvas.upperCanvasEl, - upperCanvasWidth = upperCanvas.width / retinaScaling, - upperCanvasHeight = upperCanvas.height / retinaScaling, - maxWidth = upperCanvasWidth - charHeight, - maxHeight = upperCanvasHeight - charHeight, - scaleX = upperCanvas.clientWidth / upperCanvasWidth, - scaleY = upperCanvas.clientHeight / upperCanvasHeight; - - p = fabric.util.transformPoint(p, m); - p = fabric.util.transformPoint(p, this.canvas.viewportTransform); - p.x *= scaleX; - p.y *= scaleY; - if (p.x < 0) { - p.x = 0; - } - if (p.x > maxWidth) { - p.x = maxWidth; - } - if (p.y < 0) { - p.y = 0; - } - if (p.y > maxHeight) { - p.y = maxHeight; - } + _calcTextareaPosition: function() { + if (!this.canvas) { + return { x: 1, y: 1 }; + } + var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, + boundaries = this._getCursorBoundaries(desiredPosition), + cursorLocation = this.get2DCursorLocation(desiredPosition), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, + leftOffset = boundaries.leftOffset, + m = this.calcTransformMatrix(), + p = { + x: boundaries.left + leftOffset, + y: boundaries.top + boundaries.topOffset + charHeight + }, + retinaScaling = this.canvas.getRetinaScaling(), + upperCanvas = this.canvas.upperCanvasEl, + upperCanvasWidth = upperCanvas.width / retinaScaling, + upperCanvasHeight = upperCanvas.height / retinaScaling, + maxWidth = upperCanvasWidth - charHeight, + maxHeight = upperCanvasHeight - charHeight, + scaleX = upperCanvas.clientWidth / upperCanvasWidth, + scaleY = upperCanvas.clientHeight / upperCanvasHeight; + + p = fabric.util.transformPoint(p, m); + p = fabric.util.transformPoint(p, this.canvas.viewportTransform); + p.x *= scaleX; + p.y *= scaleY; + if (p.x < 0) { + p.x = 0; + } + if (p.x > maxWidth) { + p.x = maxWidth; + } + if (p.y < 0) { + p.y = 0; + } + if (p.y > maxHeight) { + p.y = maxHeight; + } - // add canvas offset on document - p.x += this.canvas._offset.left; - p.y += this.canvas._offset.top; + // add canvas offset on document + p.x += this.canvas._offset.left; + p.y += this.canvas._offset.top; - return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; - }, + return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; + }, - /** + /** * @private */ - _saveEditingProps: function() { - this._savedProps = { - hasControls: this.hasControls, - borderColor: this.borderColor, - lockMovementX: this.lockMovementX, - lockMovementY: this.lockMovementY, - hoverCursor: this.hoverCursor, - selectable: this.selectable, - defaultCursor: this.canvas && this.canvas.defaultCursor, - moveCursor: this.canvas && this.canvas.moveCursor - }; - }, - - /** + _saveEditingProps: function() { + this._savedProps = { + hasControls: this.hasControls, + borderColor: this.borderColor, + lockMovementX: this.lockMovementX, + lockMovementY: this.lockMovementY, + hoverCursor: this.hoverCursor, + selectable: this.selectable, + defaultCursor: this.canvas && this.canvas.defaultCursor, + moveCursor: this.canvas && this.canvas.moveCursor + }; + }, + + /** * @private */ - _restoreEditingProps: function() { - if (!this._savedProps) { - return; - } + _restoreEditingProps: function() { + if (!this._savedProps) { + return; + } - this.hoverCursor = this._savedProps.hoverCursor; - this.hasControls = this._savedProps.hasControls; - this.borderColor = this._savedProps.borderColor; - this.selectable = this._savedProps.selectable; - this.lockMovementX = this._savedProps.lockMovementX; - this.lockMovementY = this._savedProps.lockMovementY; + this.hoverCursor = this._savedProps.hoverCursor; + this.hasControls = this._savedProps.hasControls; + this.borderColor = this._savedProps.borderColor; + this.selectable = this._savedProps.selectable; + this.lockMovementX = this._savedProps.lockMovementX; + this.lockMovementY = this._savedProps.lockMovementY; - if (this.canvas) { - this.canvas.defaultCursor = this._savedProps.defaultCursor; - this.canvas.moveCursor = this._savedProps.moveCursor; - } + if (this.canvas) { + this.canvas.defaultCursor = this._savedProps.defaultCursor; + this.canvas.moveCursor = this._savedProps.moveCursor; + } - delete this._savedProps; - }, + delete this._savedProps; + }, - /** + /** * Exits from editing state * @return {fabric.IText} thisArg * @chainable */ - exitEditing: function() { - var isTextChanged = (this._textBeforeEdit !== this.text); - var hiddenTextarea = this.hiddenTextarea; - this.selected = false; - this.isEditing = false; + exitEditing: function() { + var isTextChanged = (this._textBeforeEdit !== this.text); + var hiddenTextarea = this.hiddenTextarea; + this.selected = false; + this.isEditing = false; - this.selectionEnd = this.selectionStart; + this.selectionEnd = this.selectionStart; - if (hiddenTextarea) { - hiddenTextarea.blur && hiddenTextarea.blur(); - hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); - } - this.hiddenTextarea = null; - this.abortCursorAnimation(); - this._restoreEditingProps(); - this._currentCursorOpacity = 0; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this.fire('editing:exited'); - isTextChanged && this.fire('modified'); - if (this.canvas) { - this.canvas.off('mouse:move', this.mouseMoveHandler); - this.canvas.fire('text:editing:exited', { target: this }); - isTextChanged && this.canvas.fire('object:modified', { target: this }); - } - return this; - }, + if (hiddenTextarea) { + hiddenTextarea.blur && hiddenTextarea.blur(); + hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); + } + this.hiddenTextarea = null; + this.abortCursorAnimation(); + this._restoreEditingProps(); + this._currentCursorOpacity = 0; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this.fire('editing:exited'); + isTextChanged && this.fire('modified'); + if (this.canvas) { + this.canvas.off('mouse:move', this.mouseMoveHandler); + this.canvas.fire('text:editing:exited', { target: this }); + isTextChanged && this.canvas.fire('object:modified', { target: this }); + } + return this; + }, - /** + /** * @private */ - _removeExtraneousStyles: function() { - for (var prop in this.styles) { - if (!this._textLines[prop]) { - delete this.styles[prop]; - } + _removeExtraneousStyles: function() { + for (var prop in this.styles) { + if (!this._textLines[prop]) { + delete this.styles[prop]; } - }, + } + }, - /** + /** * remove and reflow a style block from start to end. * @param {Number} start linear start position for removal (included in removal) * @param {Number} end linear end position for removal ( excluded from removal ) */ - removeStyleFromTo: function(start, end) { - var cursorStart = this.get2DCursorLocation(start, true), - cursorEnd = this.get2DCursorLocation(end, true), - lineStart = cursorStart.lineIndex, - charStart = cursorStart.charIndex, - lineEnd = cursorEnd.lineIndex, - charEnd = cursorEnd.charIndex, - i, styleObj; - if (lineStart !== lineEnd) { - // step1 remove the trailing of lineStart - if (this.styles[lineStart]) { - for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { - delete this.styles[lineStart][i]; - } + removeStyleFromTo: function(start, end) { + var cursorStart = this.get2DCursorLocation(start, true), + cursorEnd = this.get2DCursorLocation(end, true), + lineStart = cursorStart.lineIndex, + charStart = cursorStart.charIndex, + lineEnd = cursorEnd.lineIndex, + charEnd = cursorEnd.charIndex, + i, styleObj; + if (lineStart !== lineEnd) { + // step1 remove the trailing of lineStart + if (this.styles[lineStart]) { + for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { + delete this.styles[lineStart][i]; } - // step2 move the trailing of lineEnd to lineStart if needed - if (this.styles[lineEnd]) { - for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { - styleObj = this.styles[lineEnd][i]; - if (styleObj) { - this.styles[lineStart] || (this.styles[lineStart] = { }); - this.styles[lineStart][charStart + i - charEnd] = styleObj; - } + } + // step2 move the trailing of lineEnd to lineStart if needed + if (this.styles[lineEnd]) { + for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { + styleObj = this.styles[lineEnd][i]; + if (styleObj) { + this.styles[lineStart] || (this.styles[lineStart] = { }); + this.styles[lineStart][charStart + i - charEnd] = styleObj; } } - // step3 detects lines will be completely removed. - for (i = lineStart + 1; i <= lineEnd; i++) { - delete this.styles[i]; - } - // step4 shift remaining lines. - this.shiftLineStyles(lineEnd, lineStart - lineEnd); } - else { - // remove and shift left on the same line - if (this.styles[lineStart]) { - styleObj = this.styles[lineStart]; - var diff = charEnd - charStart, numericChar, _char; - for (i = charStart; i < charEnd; i++) { - delete styleObj[i]; - } - for (_char in this.styles[lineStart]) { - numericChar = parseInt(_char, 10); - if (numericChar >= charEnd) { - styleObj[numericChar - diff] = styleObj[_char]; - delete styleObj[_char]; - } + // step3 detects lines will be completely removed. + for (i = lineStart + 1; i <= lineEnd; i++) { + delete this.styles[i]; + } + // step4 shift remaining lines. + this.shiftLineStyles(lineEnd, lineStart - lineEnd); + } + else { + // remove and shift left on the same line + if (this.styles[lineStart]) { + styleObj = this.styles[lineStart]; + var diff = charEnd - charStart, numericChar, _char; + for (i = charStart; i < charEnd; i++) { + delete styleObj[i]; + } + for (_char in this.styles[lineStart]) { + numericChar = parseInt(_char, 10); + if (numericChar >= charEnd) { + styleObj[numericChar - diff] = styleObj[_char]; + delete styleObj[_char]; } } } - }, + } + }, - /** + /** * Shifts line styles up or down * @param {Number} lineIndex Index of a line * @param {Number} offset Can any number? */ - shiftLineStyles: function(lineIndex, offset) { - // shift all line styles by offset upward or downward - // do not clone deep. we need new array, not new style objects - var clonedStyles = Object.assign({}, this.styles); - for (var line in this.styles) { - var numericLine = parseInt(line, 10); - if (numericLine > lineIndex) { - this.styles[numericLine + offset] = clonedStyles[numericLine]; - if (!clonedStyles[numericLine - offset]) { - delete this.styles[numericLine]; - } + shiftLineStyles: function(lineIndex, offset) { + // shift all line styles by offset upward or downward + // do not clone deep. we need new array, not new style objects + var clonedStyles = Object.assign({}, this.styles); + for (var line in this.styles) { + var numericLine = parseInt(line, 10); + if (numericLine > lineIndex) { + this.styles[numericLine + offset] = clonedStyles[numericLine]; + if (!clonedStyles[numericLine - offset]) { + delete this.styles[numericLine]; } } - }, + } + }, - restartCursorIfNeeded: function() { - if (!this._currentTickState || this._currentTickState.isAborted + restartCursorIfNeeded: function() { + if (!this._currentTickState || this._currentTickState.isAborted || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted - ) { - this.initDelayedCursor(); - } - }, + ) { + this.initDelayedCursor(); + } + }, - /** + /** * Handle insertion of more consecutive style lines for when one or more * newlines gets added to the text. Since current style needs to be shifted * first we shift the current style of the number lines needed, then we add @@ -739,203 +739,203 @@ * @param {Number} qty number of lines to add * @param {Array} copiedStyle Array of objects styles */ - insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { - var currentCharStyle, - newLineStyles = {}, - somethingAdded = false, - isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; + insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { + var currentCharStyle, + newLineStyles = {}, + somethingAdded = false, + isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; - qty || (qty = 1); - this.shiftLineStyles(lineIndex, qty); - if (this.styles[lineIndex]) { - currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; - } - // we clone styles of all chars - // after cursor onto the current line - for (var index in this.styles[lineIndex]) { - var numIndex = parseInt(index, 10); - if (numIndex >= charIndex) { - somethingAdded = true; - newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; - // remove lines from the previous line since they're on a new line now - if (!(isEndOfLine && charIndex === 0)) { - delete this.styles[lineIndex][index]; - } + qty || (qty = 1); + this.shiftLineStyles(lineIndex, qty); + if (this.styles[lineIndex]) { + currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; + } + // we clone styles of all chars + // after cursor onto the current line + for (var index in this.styles[lineIndex]) { + var numIndex = parseInt(index, 10); + if (numIndex >= charIndex) { + somethingAdded = true; + newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; + // remove lines from the previous line since they're on a new line now + if (!(isEndOfLine && charIndex === 0)) { + delete this.styles[lineIndex][index]; } } - var styleCarriedOver = false; - if (somethingAdded && !isEndOfLine) { - // if is end of line, the extra style we copied - // is probably not something we want - this.styles[lineIndex + qty] = newLineStyles; - styleCarriedOver = true; + } + var styleCarriedOver = false; + if (somethingAdded && !isEndOfLine) { + // if is end of line, the extra style we copied + // is probably not something we want + this.styles[lineIndex + qty] = newLineStyles; + styleCarriedOver = true; + } + if (styleCarriedOver) { + // skip the last line of since we already prepared it. + qty--; + } + // for the all the lines or all the other lines + // we clone current char style onto the next (otherwise empty) line + while (qty > 0) { + if (copiedStyle && copiedStyle[qty - 1]) { + this.styles[lineIndex + qty] = { 0: Object.assign({}, copiedStyle[qty - 1]) }; } - if (styleCarriedOver) { - // skip the last line of since we already prepared it. - qty--; + else if (currentCharStyle) { + this.styles[lineIndex + qty] = { 0: Object.assign({}, currentCharStyle) }; } - // for the all the lines or all the other lines - // we clone current char style onto the next (otherwise empty) line - while (qty > 0) { - if (copiedStyle && copiedStyle[qty - 1]) { - this.styles[lineIndex + qty] = { 0: Object.assign({}, copiedStyle[qty - 1]) }; - } - else if (currentCharStyle) { - this.styles[lineIndex + qty] = { 0: Object.assign({}, currentCharStyle) }; - } - else { - delete this.styles[lineIndex + qty]; - } - qty--; + else { + delete this.styles[lineIndex + qty]; } - this._forceClearCache = true; - }, + qty--; + } + this._forceClearCache = true; + }, - /** + /** * Inserts style object for a given line/char index * @param {Number} lineIndex Index of a line * @param {Number} charIndex Index of a char * @param {Number} quantity number Style object to insert, if given * @param {Array} copiedStyle array of style objects */ - insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { - if (!this.styles) { - this.styles = {}; - } - var currentLineStyles = this.styles[lineIndex], - currentLineStylesCloned = currentLineStyles ? Object.assign({}, currentLineStyles) : {}; - - quantity || (quantity = 1); - // shift all char styles by quantity forward - // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 - for (var index in currentLineStylesCloned) { - var numericIndex = parseInt(index, 10); - if (numericIndex >= charIndex) { - currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; - // only delete the style if there was nothing moved there - if (!currentLineStylesCloned[numericIndex - quantity]) { - delete currentLineStyles[numericIndex]; - } + insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { + if (!this.styles) { + this.styles = {}; + } + var currentLineStyles = this.styles[lineIndex], + currentLineStylesCloned = currentLineStyles ? Object.assign({}, currentLineStyles) : {}; + + quantity || (quantity = 1); + // shift all char styles by quantity forward + // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 + for (var index in currentLineStylesCloned) { + var numericIndex = parseInt(index, 10); + if (numericIndex >= charIndex) { + currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; + // only delete the style if there was nothing moved there + if (!currentLineStylesCloned[numericIndex - quantity]) { + delete currentLineStyles[numericIndex]; } } - this._forceClearCache = true; - if (copiedStyle) { - while (quantity--) { - if (!Object.keys(copiedStyle[quantity]).length) { - continue; - } - if (!this.styles[lineIndex]) { - this.styles[lineIndex] = {}; - } - this.styles[lineIndex][charIndex + quantity] = Object.assign({}, copiedStyle[quantity]); + } + this._forceClearCache = true; + if (copiedStyle) { + while (quantity--) { + if (!Object.keys(copiedStyle[quantity]).length) { + continue; } - return; - } - if (!currentLineStyles) { - return; - } - var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; - while (newStyle && quantity--) { - this.styles[lineIndex][charIndex + quantity] = Object.assign({}, newStyle); + if (!this.styles[lineIndex]) { + this.styles[lineIndex] = {}; + } + this.styles[lineIndex][charIndex + quantity] = Object.assign({}, copiedStyle[quantity]); } - }, + return; + } + if (!currentLineStyles) { + return; + } + var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; + while (newStyle && quantity--) { + this.styles[lineIndex][charIndex + quantity] = Object.assign({}, newStyle); + } + }, - /** + /** * Inserts style object(s) * @param {Array} insertedText Characters at the location where style is inserted * @param {Number} start cursor index for inserting style * @param {Array} [copiedStyle] array of style objects to insert. */ - insertNewStyleBlock: function(insertedText, start, copiedStyle) { - var cursorLoc = this.get2DCursorLocation(start, true), - addedLines = [0], linesLength = 0; - // get an array of how many char per lines are being added. - for (var i = 0; i < insertedText.length; i++) { - if (insertedText[i] === '\n') { - linesLength++; - addedLines[linesLength] = 0; - } - else { - addedLines[linesLength]++; - } + insertNewStyleBlock: function(insertedText, start, copiedStyle) { + var cursorLoc = this.get2DCursorLocation(start, true), + addedLines = [0], linesLength = 0; + // get an array of how many char per lines are being added. + for (var i = 0; i < insertedText.length; i++) { + if (insertedText[i] === '\n') { + linesLength++; + addedLines[linesLength] = 0; } - // for the first line copy the style from the current char position. - if (addedLines[0] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); - } - linesLength && this.insertNewlineStyleObject( - cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); - for (var i = 1; i < linesLength; i++) { - if (addedLines[i] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); - } - else if (copiedStyle) { - // this test is required in order to close #6841 - // when a pasted buffer begins with a newline then - // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] - // may be undefined for some reason - if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { - this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; - } - } - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); + else { + addedLines[linesLength]++; } - // we use i outside the loop to get it like linesLength + } + // for the first line copy the style from the current char position. + if (addedLines[0] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); + } + linesLength && this.insertNewlineStyleObject( + cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); + for (var i = 1; i < linesLength; i++) { if (addedLines[i] > 0) { this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); } - }, + else if (copiedStyle) { + // this test is required in order to close #6841 + // when a pasted buffer begins with a newline then + // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] + // may be undefined for some reason + if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { + this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; + } + } + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); + } + // we use i outside the loop to get it like linesLength + if (addedLines[i] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); + } + }, - /** + /** * Set the selectionStart and selectionEnd according to the new position of cursor * mimic the key - mouse navigation when shift is pressed. */ - setSelectionStartEndWithShift: function(start, end, newSelection) { - if (newSelection <= start) { - if (end === start) { - this._selectionDirection = 'left'; - } - else if (this._selectionDirection === 'right') { - this._selectionDirection = 'left'; - this.selectionEnd = start; - } - this.selectionStart = newSelection; + setSelectionStartEndWithShift: function(start, end, newSelection) { + if (newSelection <= start) { + if (end === start) { + this._selectionDirection = 'left'; } - else if (newSelection > start && newSelection < end) { - if (this._selectionDirection === 'right') { - this.selectionEnd = newSelection; - } - else { - this.selectionStart = newSelection; - } + else if (this._selectionDirection === 'right') { + this._selectionDirection = 'left'; + this.selectionEnd = start; } - else { - // newSelection is > selection start and end - if (end === start) { - this._selectionDirection = 'right'; - } - else if (this._selectionDirection === 'left') { - this._selectionDirection = 'right'; - this.selectionStart = end; - } + this.selectionStart = newSelection; + } + else if (newSelection > start && newSelection < end) { + if (this._selectionDirection === 'right') { this.selectionEnd = newSelection; } - }, - - setSelectionInBoundaries: function() { - var length = this.text.length; - if (this.selectionStart > length) { - this.selectionStart = length; - } - else if (this.selectionStart < 0) { - this.selectionStart = 0; + else { + this.selectionStart = newSelection; } - if (this.selectionEnd > length) { - this.selectionEnd = length; + } + else { + // newSelection is > selection start and end + if (end === start) { + this._selectionDirection = 'right'; } - else if (this.selectionEnd < 0) { - this.selectionEnd = 0; + else if (this._selectionDirection === 'left') { + this._selectionDirection = 'right'; + this.selectionStart = end; } + this.selectionEnd = newSelection; + } + }, + + setSelectionInBoundaries: function() { + var length = this.text.length; + if (this.selectionStart > length) { + this.selectionStart = length; + } + else if (this.selectionStart < 0) { + this.selectionStart = 0; + } + if (this.selectionEnd > length) { + this.selectionEnd = length; + } + else if (this.selectionEnd < 0) { + this.selectionEnd = 0; } - }); + } +}); diff --git a/src/mixins/object.svg_export.js b/src/mixins/object.svg_export.js index d1b4e9608e4..f0159d39f88 100644 --- a/src/mixins/object.svg_export.js +++ b/src/mixins/object.svg_export.js @@ -1,256 +1,256 @@ /* _TO_SVG_START_ */ - function getSvgColorString(prop, value) { - if (!value) { - return prop + ': none; '; - } - else if (value.toLive) { - return prop + ': url(#SVGID_' + value.id + '); '; - } - else { - var color = new fabric.Color(value), - str = prop + ': ' + color.toRgb() + '; ', - opacity = color.getAlpha(); - if (opacity !== 1) { - //change the color in rgb + opacity - str += prop + '-opacity: ' + opacity.toString() + '; '; - } - return str; +function getSvgColorString(prop, value) { + if (!value) { + return prop + ': none; '; + } + else if (value.toLive) { + return prop + ': url(#SVGID_' + value.id + '); '; + } + else { + var color = new fabric.Color(value), + str = prop + ': ' + color.toRgb() + '; ', + opacity = color.getAlpha(); + if (opacity !== 1) { + //change the color in rgb + opacity + str += prop + '-opacity: ' + opacity.toString() + '; '; } + return str; } +} - var toFixed = fabric.util.toFixed; +var toFixed = fabric.util.toFixed; - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** * Returns styles-string for svg-export * @param {Boolean} skipShadow a boolean to skip shadow filter output * @return {String} */ - getSvgStyles: function(skipShadow) { + getSvgStyles: function(skipShadow) { - var fillRule = this.fillRule ? this.fillRule : 'nonzero', - strokeWidth = this.strokeWidth ? this.strokeWidth : '0', - strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', - strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', - strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', - strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', - strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', - opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', - visibility = this.visible ? '' : ' visibility: hidden;', - filter = skipShadow ? '' : this.getSvgFilter(), - fill = getSvgColorString('fill', this.fill), - stroke = getSvgColorString('stroke', this.stroke); + var fillRule = this.fillRule ? this.fillRule : 'nonzero', + strokeWidth = this.strokeWidth ? this.strokeWidth : '0', + strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', + strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', + strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', + strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', + strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', + opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', + visibility = this.visible ? '' : ' visibility: hidden;', + filter = skipShadow ? '' : this.getSvgFilter(), + fill = getSvgColorString('fill', this.fill), + stroke = getSvgColorString('stroke', this.stroke); - return [ - stroke, - 'stroke-width: ', strokeWidth, '; ', - 'stroke-dasharray: ', strokeDashArray, '; ', - 'stroke-linecap: ', strokeLineCap, '; ', - 'stroke-dashoffset: ', strokeDashOffset, '; ', - 'stroke-linejoin: ', strokeLineJoin, '; ', - 'stroke-miterlimit: ', strokeMiterLimit, '; ', - fill, - 'fill-rule: ', fillRule, '; ', - 'opacity: ', opacity, ';', - filter, - visibility - ].join(''); - }, + return [ + stroke, + 'stroke-width: ', strokeWidth, '; ', + 'stroke-dasharray: ', strokeDashArray, '; ', + 'stroke-linecap: ', strokeLineCap, '; ', + 'stroke-dashoffset: ', strokeDashOffset, '; ', + 'stroke-linejoin: ', strokeLineJoin, '; ', + 'stroke-miterlimit: ', strokeMiterLimit, '; ', + fill, + 'fill-rule: ', fillRule, '; ', + 'opacity: ', opacity, ';', + filter, + visibility + ].join(''); + }, - /** + /** * Returns styles-string for svg-export * @param {Object} style the object from which to retrieve style properties * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. * @return {String} */ - getSvgSpanStyles: function(style, useWhiteSpace) { - var term = '; '; - var fontFamily = style.fontFamily ? - 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? - '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; - var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', - fontFamily = fontFamily, - fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', - fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', - fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', - fill = style.fill ? getSvgColorString('fill', style.fill) : '', - stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', - textDecoration = this.getSvgTextDecoration(style), - deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; - if (textDecoration) { - textDecoration = 'text-decoration: ' + textDecoration + term; - } + getSvgSpanStyles: function(style, useWhiteSpace) { + var term = '; '; + var fontFamily = style.fontFamily ? + 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? + '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; + var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', + fontFamily = fontFamily, + fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', + fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', + fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', + fill = style.fill ? getSvgColorString('fill', style.fill) : '', + stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', + textDecoration = this.getSvgTextDecoration(style), + deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; + if (textDecoration) { + textDecoration = 'text-decoration: ' + textDecoration + term; + } - return [ - stroke, - strokeWidth, - fontFamily, - fontSize, - fontStyle, - fontWeight, - textDecoration, - fill, - deltaY, - useWhiteSpace ? 'white-space: pre; ' : '' - ].join(''); - }, + return [ + stroke, + strokeWidth, + fontFamily, + fontSize, + fontStyle, + fontWeight, + textDecoration, + fill, + deltaY, + useWhiteSpace ? 'white-space: pre; ' : '' + ].join(''); + }, - /** + /** * Returns text-decoration property for svg-export * @param {Object} style the object from which to retrieve style properties * @return {String} */ - getSvgTextDecoration: function(style) { - return ['overline', 'underline', 'line-through'].filter(function(decoration) { - return style[decoration.replace('-', '')]; - }).join(' '); - }, + getSvgTextDecoration: function(style) { + return ['overline', 'underline', 'line-through'].filter(function(decoration) { + return style[decoration.replace('-', '')]; + }).join(' '); + }, - /** + /** * Returns filter for svg shadow * @return {String} */ - getSvgFilter: function() { - return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; - }, + getSvgFilter: function() { + return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; + }, - /** + /** * Returns id attribute for svg output * @return {String} */ - getSvgCommons: function() { - return [ - this.id ? 'id="' + this.id + '" ' : '', - this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', - ].join(''); - }, + getSvgCommons: function() { + return [ + this.id ? 'id="' + this.id + '" ' : '', + this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', + ].join(''); + }, - /** + /** * Returns transform-string for svg-export * @param {Boolean} use the full transform or the single object one. * @return {String} */ - getSvgTransform: function(full, additionalTransform) { - var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), - svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); - return svgTransform + + getSvgTransform: function(full, additionalTransform) { + var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), + svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); + return svgTransform + (additionalTransform || '') + '" '; - }, + }, - _setSVGBg: function(textBgRects) { - if (this.backgroundColor) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - } - }, + _setSVGBg: function(textBgRects) { + if (this.backgroundColor) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + } + }, - /** + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + toSVG: function(reviver) { + return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - /** + /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toClipPathSVG: function(reviver) { - return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + toClipPathSVG: function(reviver) { + return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - /** + /** * @private */ - _createBaseClipPathSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var reviver = options.reviver, - additionalTransform = options.additionalTransform || '', - commonPieces = [ - this.getSvgTransform(true, additionalTransform), - this.getSvgCommons(), - ].join(''), - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'); - objectMarkup[index] = commonPieces; - return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); - }, + _createBaseClipPathSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var reviver = options.reviver, + additionalTransform = options.additionalTransform || '', + commonPieces = [ + this.getSvgTransform(true, additionalTransform), + this.getSvgCommons(), + ].join(''), + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'); + objectMarkup[index] = commonPieces; + return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); + }, - /** + /** * @private */ - _createBaseSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var noStyle = options.noStyle, - reviver = options.reviver, - styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', - shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', - clipPath = this.clipPath, - vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', - absoluteClipPath = clipPath && clipPath.absolutePositioned, - stroke = this.stroke, fill = this.fill, shadow = this.shadow, - commonPieces, markup = [], clipPathMarkup, - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'), - additionalTransform = options.additionalTransform; - if (clipPath) { - clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; - clipPathMarkup = '\n' + + _createBaseSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var noStyle = options.noStyle, + reviver = options.reviver, + styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', + shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', + clipPath = this.clipPath, + vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', + absoluteClipPath = clipPath && clipPath.absolutePositioned, + stroke = this.stroke, fill = this.fill, shadow = this.shadow, + commonPieces, markup = [], clipPathMarkup, + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'), + additionalTransform = options.additionalTransform; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + clipPathMarkup = '\n' + clipPath.toClipPathSVG(reviver) + '\n'; - } - if (absoluteClipPath) { - markup.push( - '\n' - ); - } + } + if (absoluteClipPath) { markup.push( - '\n' + '\n' ); - commonPieces = [ - styleInfo, - vectorEffect, - noStyle ? '' : this.addPaintOrder(), ' ', - additionalTransform ? 'transform="' + additionalTransform + '" ' : '', - ].join(''); - objectMarkup[index] = commonPieces; - if (fill && fill.toLive) { - markup.push(fill.toSVG(this)); - } - if (stroke && stroke.toLive) { - markup.push(stroke.toSVG(this)); - } - if (shadow) { - markup.push(shadow.toSVG(this)); - } - if (clipPath) { - markup.push(clipPathMarkup); - } - markup.push(objectMarkup.join('')); - markup.push('\n'); - absoluteClipPath && markup.push('\n'); - return reviver ? reviver(markup.join('')) : markup.join(''); - }, - - addPaintOrder: function() { - return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; } - }); + markup.push( + '\n' + ); + commonPieces = [ + styleInfo, + vectorEffect, + noStyle ? '' : this.addPaintOrder(), ' ', + additionalTransform ? 'transform="' + additionalTransform + '" ' : '', + ].join(''); + objectMarkup[index] = commonPieces; + if (fill && fill.toLive) { + markup.push(fill.toSVG(this)); + } + if (stroke && stroke.toLive) { + markup.push(stroke.toSVG(this)); + } + if (shadow) { + markup.push(shadow.toSVG(this)); + } + if (clipPath) { + markup.push(clipPathMarkup); + } + markup.push(objectMarkup.join('')); + markup.push('\n'); + absoluteClipPath && markup.push('\n'); + return reviver ? reviver(markup.join('')) : markup.join(''); + }, + + addPaintOrder: function() { + return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; + } +}); /* _TO_SVG_END_ */ diff --git a/src/mixins/object_ancestry.mixin.js b/src/mixins/object_ancestry.mixin.js index 8c74ea48d2b..f066433fd07 100644 --- a/src/mixins/object_ancestry.mixin.js +++ b/src/mixins/object_ancestry.mixin.js @@ -40,16 +40,16 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot /** * Returns an object that represent the ancestry situation. - * + * * @typedef {object} AncestryComparison * @property {Ancestors} common ancestors of `this` and `other` (may include `this` | `other`) * @property {Ancestors} fork ancestors that are of `this` only * @property {Ancestors} otherFork ancestors that are of `other` only - * + * * @param {fabric.Object} other * @param {boolean} [strict] finds only ancestors that are objects (without canvas) * @returns {AncestryComparison | undefined} - * + * */ findCommonAncestors: function (other, strict) { if (this === other) { diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js index b0d64f57d1c..161ef7dcd2d 100644 --- a/src/mixins/object_geometry.mixin.js +++ b/src/mixins/object_geometry.mixin.js @@ -1,20 +1,20 @@ - function arrayFromCoords(coords) { - return [ - new fabric.Point(coords.tl.x, coords.tl.y), - new fabric.Point(coords.tr.x, coords.tr.y), - new fabric.Point(coords.br.x, coords.br.y), - new fabric.Point(coords.bl.x, coords.bl.y) - ]; - } - - var util = fabric.util, - degreesToRadians = util.degreesToRadians, - multiplyMatrices = util.multiplyTransformMatrices, - transformPoint = util.transformPoint; - - util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - - /** +function arrayFromCoords(coords) { + return [ + new fabric.Point(coords.tl.x, coords.tl.y), + new fabric.Point(coords.tr.x, coords.tr.y), + new fabric.Point(coords.br.x, coords.br.y), + new fabric.Point(coords.bl.x, coords.bl.y) + ]; +} + +var util = fabric.util, + degreesToRadians = util.degreesToRadians, + multiplyMatrices = util.multiplyTransformMatrices, + transformPoint = util.transformPoint; + +util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + + /** * Describe object's corner position in canvas element coordinates. * properties are depending on control keys and padding the main controls. * each property is an object with x, y and corner. @@ -24,9 +24,9 @@ * to draw and locate controls * @memberOf fabric.Object.prototype */ - oCoords: null, + oCoords: null, - /** + /** * Describe object's corner position in canvas object absolute coordinates * properties are tl,tr,bl,br and describe the four main corner. * each property is an object with x, y, instance of Fabric.Point. @@ -38,103 +38,103 @@ * You can calculate them without updating with @method calcACoords(); * @memberOf fabric.Object.prototype */ - aCoords: null, + aCoords: null, - /** + /** * Describe object's corner position in canvas element coordinates. * includes padding. Used of object detection. * set and refreshed with setCoords. * @memberOf fabric.Object.prototype */ - lineCoords: null, + lineCoords: null, - /** + /** * storage for object transform matrix */ - ownMatrixCache: null, + ownMatrixCache: null, - /** + /** * storage for object full transform matrix */ - matrixCache: null, + matrixCache: null, - /** + /** * custom controls interface * controls are added by default_controls.js */ - controls: { }, + controls: { }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane */ - getX: function () { - return this.getXY().x; - }, + getX: function () { + return this.getXY().x; + }, - /** + /** * @param {number} value x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane */ - setX: function (value) { - this.setXY(this.getXY().setX(value)); - }, + setX: function (value) { + this.setXY(this.getXY().setX(value)); + }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ * if parent is canvas then this property is identical to {@link fabric.Object#getX} */ - getRelativeX: function () { - return this.left; - }, + getRelativeX: function () { + return this.left; + }, - /** + /** * @param {number} value x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ * if parent is canvas then this method is identical to {@link fabric.Object#setX} */ - setRelativeX: function (value) { - this.left = value; - }, + setRelativeX: function (value) { + this.left = value; + }, - /** + /** * @returns {number} y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane */ - getY: function () { - return this.getXY().y; - }, + getY: function () { + return this.getXY().y; + }, - /** + /** * @param {number} value y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane */ - setY: function (value) { - this.setXY(this.getXY().setY(value)); - }, + setY: function (value) { + this.setXY(this.getXY().setY(value)); + }, - /** + /** * @returns {number} y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ * if parent is canvas then this property is identical to {@link fabric.Object#getY} */ - getRelativeY: function () { - return this.top; - }, + getRelativeY: function () { + return this.top; + }, - /** + /** * @param {number} value y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ * if parent is canvas then this property is identical to {@link fabric.Object#setY} */ - setRelativeY: function (value) { - this.top = value; - }, + setRelativeY: function (value) { + this.top = value; + }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in canvas coordinate plane */ - getXY: function () { - var relativePosition = this.getRelativeXY(); - return this.group ? - fabric.util.transformPoint(relativePosition, this.group.calcTransformMatrix()) : - relativePosition; - }, + getXY: function () { + var relativePosition = this.getRelativeXY(); + return this.group ? + fabric.util.transformPoint(relativePosition, this.group.calcTransformMatrix()) : + relativePosition; + }, - /** + /** * Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. * You can specify {@link fabric.Object#originX} and {@link fabric.Object#originY} values, * that otherwise are the object's current values. @@ -144,67 +144,67 @@ * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' */ - setXY: function (point, originX, originY) { - if (this.group) { - point = fabric.util.transformPoint( - point, - fabric.util.invertTransform(this.group.calcTransformMatrix()) - ); - } - this.setRelativeXY(point, originX, originY); - }, + setXY: function (point, originX, originY) { + if (this.group) { + point = fabric.util.transformPoint( + point, + fabric.util.invertTransform(this.group.calcTransformMatrix()) + ); + } + this.setRelativeXY(point, originX, originY); + }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane */ - getRelativeXY: function () { - return new fabric.Point(this.left, this.top); - }, + getRelativeXY: function () { + return new fabric.Point(this.left, this.top); + }, - /** + /** * As {@link fabric.Object#setXY}, but in current parent's coordinate plane ( the current group if any or the canvas) * @param {fabric.Point} point position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' */ - setRelativeXY: function (point, originX, originY) { - this.setPositionByOrigin(point, originX || this.originX, originY || this.originY); - }, + setRelativeXY: function (point, originX, originY) { + this.setPositionByOrigin(point, originX || this.originX, originY || this.originY); + }, - /** + /** * return correct set of coordinates for intersection * this will return either aCoords or lineCoords. * @param {Boolean} absolute will return aCoords if true or lineCoords * @return {Object} {tl, tr, br, bl} points */ - _getCoords: function(absolute, calculate) { - if (calculate) { - return (absolute ? this.calcACoords() : this.calcLineCoords()); - } - if (!this.aCoords || !this.lineCoords) { - this.setCoords(true); - } - return (absolute ? this.aCoords : this.lineCoords); - }, - - /** + _getCoords: function(absolute, calculate) { + if (calculate) { + return (absolute ? this.calcACoords() : this.calcLineCoords()); + } + if (!this.aCoords || !this.lineCoords) { + this.setCoords(true); + } + return (absolute ? this.aCoords : this.lineCoords); + }, + + /** * return correct set of coordinates for intersection * this will return either aCoords or lineCoords. * The coords are returned in an array. * @return {Array} [tl, tr, br, bl] of points */ - getCoords: function (absolute, calculate) { - var coords = arrayFromCoords(this._getCoords(absolute, calculate)); - if (this.group) { - var t = this.group.calcTransformMatrix(); - return coords.map(function (p) { - return util.transformPoint(p, t); - }); - } - return coords; - }, + getCoords: function (absolute, calculate) { + var coords = arrayFromCoords(this._getCoords(absolute, calculate)); + if (this.group) { + var t = this.group.calcTransformMatrix(); + return coords.map(function (p) { + return util.transformPoint(p, t); + }); + } + return coords; + }, - /** + /** * Checks if object intersects with an area formed by 2 points * @param {Object} pointTL top-left point of area * @param {Object} pointBR bottom-right point of area @@ -212,54 +212,54 @@ * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object intersects with an area formed by 2 points */ - intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { - var coords = this.getCoords(absolute, calculate), - intersection = fabric.Intersection.intersectPolygonRectangle( - coords, - pointTL, - pointBR - ); - return intersection.status === 'Intersection'; - }, - - /** + intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { + var coords = this.getCoords(absolute, calculate), + intersection = fabric.Intersection.intersectPolygonRectangle( + coords, + pointTL, + pointBR + ); + return intersection.status === 'Intersection'; + }, + + /** * Checks if object intersects with another object * @param {Object} other Object to test * @param {Boolean} [absolute] use coordinates without viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object intersects with another object */ - intersectsWithObject: function(other, absolute, calculate) { - var intersection = fabric.Intersection.intersectPolygonPolygon( - this.getCoords(absolute, calculate), - other.getCoords(absolute, calculate) - ); + intersectsWithObject: function(other, absolute, calculate) { + var intersection = fabric.Intersection.intersectPolygonPolygon( + this.getCoords(absolute, calculate), + other.getCoords(absolute, calculate) + ); - return intersection.status === 'Intersection' + return intersection.status === 'Intersection' || other.isContainedWithinObject(this, absolute, calculate) || this.isContainedWithinObject(other, absolute, calculate); - }, + }, - /** + /** * Checks if object is fully contained within area of another object * @param {Object} other Object to test * @param {Boolean} [absolute] use coordinates without viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object is fully contained within area of another object */ - isContainedWithinObject: function(other, absolute, calculate) { - var points = this.getCoords(absolute, calculate), - otherCoords = absolute ? other.aCoords : other.lineCoords, - i = 0, lines = other._getImageLines(otherCoords); - for (; i < 4; i++) { - if (!other.containsPoint(points[i], lines)) { - return false; - } + isContainedWithinObject: function(other, absolute, calculate) { + var points = this.getCoords(absolute, calculate), + otherCoords = absolute ? other.aCoords : other.lineCoords, + i = 0, lines = other._getImageLines(otherCoords); + for (; i < 4; i++) { + if (!other.containsPoint(points[i], lines)) { + return false; } - return true; - }, + } + return true; + }, - /** + /** * Checks if object is fully contained within area formed by 2 points * @param {Object} pointTL top-left point of area * @param {Object} pointBR bottom-right point of area @@ -267,18 +267,18 @@ * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object is fully contained within area formed by 2 points */ - isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { - var boundingRect = this.getBoundingRect(absolute, calculate); + isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { + var boundingRect = this.getBoundingRect(absolute, calculate); - return ( - boundingRect.left >= pointTL.x && + return ( + boundingRect.left >= pointTL.x && boundingRect.left + boundingRect.width <= pointBR.x && boundingRect.top >= pointTL.y && boundingRect.top + boundingRect.height <= pointBR.y - ); - }, + ); + }, - /** + /** * Checks if point is inside the object * @param {fabric.Point} point Point to check against * @param {Object} [lines] object returned from @method _getImageLines @@ -286,41 +286,41 @@ * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if point is inside the object */ - containsPoint: function(point, lines, absolute, calculate) { - var coords = this._getCoords(absolute, calculate), - lines = lines || this._getImageLines(coords), - xPoints = this._findCrossPoints(point, lines); - // if xPoints is odd then point is inside the object - return (xPoints !== 0 && xPoints % 2 === 1); - }, + containsPoint: function(point, lines, absolute, calculate) { + var coords = this._getCoords(absolute, calculate), + lines = lines || this._getImageLines(coords), + xPoints = this._findCrossPoints(point, lines); + // if xPoints is odd then point is inside the object + return (xPoints !== 0 && xPoints % 2 === 1); + }, - /** + /** * Checks if object is contained within the canvas with current viewportTransform * the check is done stopping at first point that appears on screen * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords * @return {Boolean} true if object is fully or partially contained within canvas */ - isOnScreen: function(calculate) { - if (!this.canvas) { - return false; - } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - var points = this.getCoords(true, calculate); - // if some point is on screen, the object is on screen. - if (points.some(function(point) { - return point.x <= pointBR.x && point.x >= pointTL.x && + isOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + var points = this.getCoords(true, calculate); + // if some point is on screen, the object is on screen. + if (points.some(function(point) { + return point.x <= pointBR.x && point.x >= pointTL.x && point.y <= pointBR.y && point.y >= pointTL.y; - })) { - return true; - } - // no points on screen, check intersection with absolute coordinates - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { - return true; - } - return this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, + })) { + return true; + } + // no points on screen, check intersection with absolute coordinates + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + return this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - /** + /** * Checks if the object contains the midpoint between canvas extremities * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen * @private @@ -329,263 +329,263 @@ * @param {Boolean} calculate use coordinates of current position instead of .oCoords * @return {Boolean} true if the object contains the point */ - _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { - // worst case scenario the object is so big that contains the screen - var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; - if (this.containsPoint(centerPoint, null, true, calculate)) { - return true; - } - return false; - }, + _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { + // worst case scenario the object is so big that contains the screen + var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; + if (this.containsPoint(centerPoint, null, true, calculate)) { + return true; + } + return false; + }, - /** + /** * Checks if object is partially contained within the canvas with current viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object is partially contained within canvas */ - isPartiallyOnScreen: function(calculate) { - if (!this.canvas) { - return false; - } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { - return true; - } - var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { - return (point.x >= pointBR.x || point.x <= pointTL.x) && + isPartiallyOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { + return (point.x >= pointBR.x || point.x <= pointTL.x) && (point.y >= pointBR.y || point.y <= pointTL.y); - }); - return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, + }); + return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - /** + /** * Method that returns an object with the object edges in it, given the coordinates of the corners * @private * @param {Object} oCoords Coordinates of the object corners */ - _getImageLines: function(oCoords) { - - var lines = { - topline: { - o: oCoords.tl, - d: oCoords.tr - }, - rightline: { - o: oCoords.tr, - d: oCoords.br - }, - bottomline: { - o: oCoords.br, - d: oCoords.bl - }, - leftline: { - o: oCoords.bl, - d: oCoords.tl - } - }; - - // // debugging - // if (this.canvas.contextTop) { - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); - // } - - return lines; - }, - - /** + _getImageLines: function(oCoords) { + + var lines = { + topline: { + o: oCoords.tl, + d: oCoords.tr + }, + rightline: { + o: oCoords.tr, + d: oCoords.br + }, + bottomline: { + o: oCoords.br, + d: oCoords.bl + }, + leftline: { + o: oCoords.bl, + d: oCoords.tl + } + }; + + // // debugging + // if (this.canvas.contextTop) { + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + // } + + return lines; + }, + + /** * Helper method to determine how many cross points are between the 4 object edges * and the horizontal line determined by a point on canvas * @private * @param {fabric.Point} point Point to check * @param {Object} lines Coordinates of the object being evaluated */ - // remove yi, not used but left code here just in case. - _findCrossPoints: function(point, lines) { - var b1, b2, a1, a2, xi, // yi, - xcount = 0, - iLine; - - for (var lineKey in lines) { - iLine = lines[lineKey]; - // optimisation 1: line below point. no cross - if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { - continue; - } - // optimisation 2: line above point. no cross - if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { - continue; - } - // optimisation 3: vertical line case - if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { - xi = iLine.o.x; - // yi = point.y; - } - // calculate the intersection point - else { - b1 = 0; - b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); - a1 = point.y - b1 * point.x; - a2 = iLine.o.y - b2 * iLine.o.x; - - xi = -(a1 - a2) / (b1 - b2); - // yi = a1 + b1 * xi; - } - // dont count xi < point.x cases - if (xi >= point.x) { - xcount += 1; - } - // optimisation 4: specific for square images - if (xcount === 2) { - break; - } + // remove yi, not used but left code here just in case. + _findCrossPoints: function(point, lines) { + var b1, b2, a1, a2, xi, // yi, + xcount = 0, + iLine; + + for (var lineKey in lines) { + iLine = lines[lineKey]; + // optimisation 1: line below point. no cross + if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { + continue; + } + // optimisation 2: line above point. no cross + if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { + continue; + } + // optimisation 3: vertical line case + if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { + xi = iLine.o.x; + // yi = point.y; + } + // calculate the intersection point + else { + b1 = 0; + b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); + a1 = point.y - b1 * point.x; + a2 = iLine.o.y - b2 * iLine.o.x; + + xi = -(a1 - a2) / (b1 - b2); + // yi = a1 + b1 * xi; + } + // dont count xi < point.x cases + if (xi >= point.x) { + xcount += 1; + } + // optimisation 4: specific for square images + if (xcount === 2) { + break; } - return xcount; - }, + } + return xcount; + }, - /** + /** * Returns coordinates of object's bounding rectangle (left, top, width, height) * the box is intended as aligned to axis of canvas. * @param {Boolean} [absolute] use coordinates without viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords * @return {Object} Object with left, top, width, height properties */ - getBoundingRect: function(absolute, calculate) { - var coords = this.getCoords(absolute, calculate); - return util.makeBoundingBoxFromPoints(coords); - }, + getBoundingRect: function(absolute, calculate) { + var coords = this.getCoords(absolute, calculate); + return util.makeBoundingBoxFromPoints(coords); + }, - /** + /** * Returns width of an object's bounding box counting transformations * before 2.0 it was named getWidth(); * @return {Number} width value */ - getScaledWidth: function() { - return this._getTransformedDimensions().x; - }, + getScaledWidth: function() { + return this._getTransformedDimensions().x; + }, - /** + /** * Returns height of an object bounding box counting transformations * before 2.0 it was named getHeight(); * @return {Number} height value */ - getScaledHeight: function() { - return this._getTransformedDimensions().y; - }, + getScaledHeight: function() { + return this._getTransformedDimensions().y; + }, - /** + /** * Makes sure the scale is valid and modifies it if necessary * @private * @param {Number} value * @return {Number} */ - _constrainScale: function(value) { - if (Math.abs(value) < this.minScaleLimit) { - if (value < 0) { - return -this.minScaleLimit; - } - else { - return this.minScaleLimit; - } + _constrainScale: function(value) { + if (Math.abs(value) < this.minScaleLimit) { + if (value < 0) { + return -this.minScaleLimit; } - else if (value === 0) { - return 0.0001; + else { + return this.minScaleLimit; } - return value; - }, - - /** + } + else if (value === 0) { + return 0.0001; + } + return value; + }, + + /** * Scales an object (equally by x and y) * @param {Number} value Scale factor * @return {fabric.Object} thisArg * @chainable */ - scale: function(value) { - this._set('scaleX', value); - this._set('scaleY', value); - return this.setCoords(); - }, + scale: function(value) { + this._set('scaleX', value); + this._set('scaleY', value); + return this.setCoords(); + }, - /** + /** * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) * @param {Number} value New width value * @param {Boolean} absolute ignore viewport * @return {fabric.Object} thisArg * @chainable */ - scaleToWidth: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); - return this.scale(value / this.width / boundingRectFactor); - }, + scaleToWidth: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); + return this.scale(value / this.width / boundingRectFactor); + }, - /** + /** * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) * @param {Number} value New height value * @param {Boolean} absolute ignore viewport * @return {fabric.Object} thisArg * @chainable */ - scaleToHeight: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); - return this.scale(value / this.height / boundingRectFactor); - }, - - calcLineCoords: function() { - var vpt = this.getViewportTransform(), - padding = this.padding, angle = degreesToRadians(this.getTotalAngle()), - cos = util.cos(angle), sin = util.sin(angle), - cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, - cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); - - var lineCoords = { - tl: transformPoint(aCoords.tl, vpt), - tr: transformPoint(aCoords.tr, vpt), - bl: transformPoint(aCoords.bl, vpt), - br: transformPoint(aCoords.br, vpt), - }; - - if (padding) { - lineCoords.tl.x -= cosPMinusSinP; - lineCoords.tl.y -= cosPSinP; - lineCoords.tr.x += cosPSinP; - lineCoords.tr.y -= cosPMinusSinP; - lineCoords.bl.x -= cosPSinP; - lineCoords.bl.y += cosPMinusSinP; - lineCoords.br.x += cosPMinusSinP; - lineCoords.br.y += cosPSinP; - } - - return lineCoords; - }, - - calcOCoords: function () { - var vpt = this.getViewportTransform(), - center = this.getCenterPoint(), - tMatrix = [1, 0, 0, 1, center.x, center.y], - rMatrix = util.calcRotateMatrix({ angle: this.getTotalAngle() - (!!this.group && this.flipX ? 180 : 0) }), - positionMatrix = multiplyMatrices(tMatrix, rMatrix), - startMatrix = multiplyMatrices(vpt, positionMatrix), - finalMatrix = multiplyMatrices(startMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), - transformOptions = this.group ? fabric.util.qrDecompose(this.calcTransformMatrix()) : undefined, - dim = this._calculateCurrentDimensions(transformOptions), - coords = {}; - this.forEachControl(function(control, key, fabricObject) { - coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); - }); - - // debug code - /* + scaleToHeight: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); + return this.scale(value / this.height / boundingRectFactor); + }, + + calcLineCoords: function() { + var vpt = this.getViewportTransform(), + padding = this.padding, angle = degreesToRadians(this.getTotalAngle()), + cos = util.cos(angle), sin = util.sin(angle), + cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, + cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); + + var lineCoords = { + tl: transformPoint(aCoords.tl, vpt), + tr: transformPoint(aCoords.tr, vpt), + bl: transformPoint(aCoords.bl, vpt), + br: transformPoint(aCoords.br, vpt), + }; + + if (padding) { + lineCoords.tl.x -= cosPMinusSinP; + lineCoords.tl.y -= cosPSinP; + lineCoords.tr.x += cosPSinP; + lineCoords.tr.y -= cosPMinusSinP; + lineCoords.bl.x -= cosPSinP; + lineCoords.bl.y += cosPMinusSinP; + lineCoords.br.x += cosPMinusSinP; + lineCoords.br.y += cosPSinP; + } + + return lineCoords; + }, + + calcOCoords: function () { + var vpt = this.getViewportTransform(), + center = this.getCenterPoint(), + tMatrix = [1, 0, 0, 1, center.x, center.y], + rMatrix = util.calcRotateMatrix({ angle: this.getTotalAngle() - (!!this.group && this.flipX ? 180 : 0) }), + positionMatrix = multiplyMatrices(tMatrix, rMatrix), + startMatrix = multiplyMatrices(vpt, positionMatrix), + finalMatrix = multiplyMatrices(startMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), + transformOptions = this.group ? fabric.util.qrDecompose(this.calcTransformMatrix()) : undefined, + dim = this._calculateCurrentDimensions(transformOptions), + coords = {}; + this.forEachControl(function(control, key, fabricObject) { + coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); + }); + + // debug code + /* var canvas = this.canvas; setTimeout(function () { if (!canvas) return; @@ -597,26 +597,26 @@ }); }, 50); */ - return coords; - }, - - calcACoords: function() { - var rotateMatrix = util.calcRotateMatrix({ angle: this.angle }), - center = this.getRelativeCenterPoint(), - translateMatrix = [1, 0, 0, 1, center.x, center.y], - finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), - dim = this._getTransformedDimensions(), - w = dim.x / 2, h = dim.y / 2; - return { - // corners - tl: transformPoint({ x: -w, y: -h }, finalMatrix), - tr: transformPoint({ x: w, y: -h }, finalMatrix), - bl: transformPoint({ x: -w, y: h }, finalMatrix), - br: transformPoint({ x: w, y: h }, finalMatrix) - }; - }, - - /** + return coords; + }, + + calcACoords: function() { + var rotateMatrix = util.calcRotateMatrix({ angle: this.angle }), + center = this.getRelativeCenterPoint(), + translateMatrix = [1, 0, 0, 1, center.x, center.y], + finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), + dim = this._getTransformedDimensions(), + w = dim.x / 2, h = dim.y / 2; + return { + // corners + tl: transformPoint({ x: -w, y: -h }, finalMatrix), + tr: transformPoint({ x: w, y: -h }, finalMatrix), + bl: transformPoint({ x: -w, y: h }, finalMatrix), + br: transformPoint({ x: w, y: h }, finalMatrix) + }; + }, + + /** * Sets corner and controls position coordinates based on current angle, width and height, left and top. * oCoords are used to find the corners * aCoords are used to quickly find an object on the canvas @@ -627,91 +627,91 @@ * @return {fabric.Object} thisArg * @chainable */ - setCoords: function(skipCorners) { - this.aCoords = this.calcACoords(); - // in case we are in a group, for how the inner group target check works, - // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. - this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); - if (skipCorners) { - return this; - } - // set coordinates of the draggable boxes in the corners used to scale/rotate the image - this.oCoords = this.calcOCoords(); - this._setCornerCoords && this._setCornerCoords(); + setCoords: function(skipCorners) { + this.aCoords = this.calcACoords(); + // in case we are in a group, for how the inner group target check works, + // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. + this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); + if (skipCorners) { return this; - }, - - transformMatrixKey: function(skipGroup) { - var sep = '_', prefix = ''; - if (!skipGroup && this.group) { - prefix = this.group.transformMatrixKey(skipGroup) + sep; - }; - return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + + } + // set coordinates of the draggable boxes in the corners used to scale/rotate the image + this.oCoords = this.calcOCoords(); + this._setCornerCoords && this._setCornerCoords(); + return this; + }, + + transformMatrixKey: function(skipGroup) { + var sep = '_', prefix = ''; + if (!skipGroup && this.group) { + prefix = this.group.transformMatrixKey(skipGroup) + sep; + }; + return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + sep + this.skewX + sep + this.skewY + sep + this.angle + sep + this.originX + sep + this.originY + sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY; - }, + }, - /** + /** * calculate transform matrix that represents the current transformations from the * object's properties. * @param {Boolean} [skipGroup] return transform matrix for object not counting parent transformations * There are some situation in which this is useful to avoid the fake rotation. * @return {Array} transform matrix for the object */ - calcTransformMatrix: function(skipGroup) { - var matrix = this.calcOwnMatrix(); - if (skipGroup || !this.group) { - return matrix; - } - var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); - if (cache.key === key) { - return cache.value; - } - if (this.group) { - matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); - } - cache.key = key; - cache.value = matrix; + calcTransformMatrix: function(skipGroup) { + var matrix = this.calcOwnMatrix(); + if (skipGroup || !this.group) { return matrix; - }, - - /** + } + var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); + if (cache.key === key) { + return cache.value; + } + if (this.group) { + matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); + } + cache.key = key; + cache.value = matrix; + return matrix; + }, + + /** * calculate transform matrix that represents the current transformations from the * object's properties, this matrix does not include the group transformation * @return {Array} transform matrix for the object */ - calcOwnMatrix: function() { - var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); - if (cache.key === key) { - return cache.value; - } - var center = this.getRelativeCenterPoint(), - options = { - angle: this.angle, - translateX: center.x, - translateY: center.y, - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: this.skewX, - skewY: this.skewY, - flipX: this.flipX, - flipY: this.flipY, - }; - cache.key = key; - cache.value = util.composeMatrix(options); + calcOwnMatrix: function() { + var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); + if (cache.key === key) { return cache.value; - }, - - /** + } + var center = this.getRelativeCenterPoint(), + options = { + angle: this.angle, + translateX: center.x, + translateY: center.y, + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + flipX: this.flipX, + flipY: this.flipY, + }; + cache.key = key; + cache.value = util.composeMatrix(options); + return cache.value; + }, + + /** * Calculate object dimensions from its properties * @private * @returns {fabric.Point} dimensions */ - _getNonTransformedDimensions: function() { - return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth); - }, + _getNonTransformedDimensions: function() { + return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth); + }, - /** + /** * Calculate object bounding box dimensions from its properties scale, skew. * @param {Object} [options] * @param {Number} [options.scaleX] @@ -721,52 +721,52 @@ * @private * @returns {fabric.Point} dimensions */ - _getTransformedDimensions: function (options) { - options = Object.assign({ - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: this.skewX, - skewY: this.skewY, - width: this.width, - height: this.height, - strokeWidth: this.strokeWidth - }, options || {}); - // stroke is applied before/after transformations are applied according to `strokeUniform` - var preScalingStrokeValue, postScalingStrokeValue, strokeWidth = options.strokeWidth; - if (this.strokeUniform) { - preScalingStrokeValue = 0; - postScalingStrokeValue = strokeWidth; - } - else { - preScalingStrokeValue = strokeWidth; - postScalingStrokeValue = 0; - } - var dimX = options.width + preScalingStrokeValue, - dimY = options.height + preScalingStrokeValue, - finalDimensions, - noSkew = options.skewX === 0 && options.skewY === 0; - if (noSkew) { - finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY); - } - else { - var bbox = util.sizeAfterTransform(dimX, dimY, options); - finalDimensions = new fabric.Point(bbox.x, bbox.y); - } - - return finalDimensions.scalarAddEquals(postScalingStrokeValue); - }, - - /** + _getTransformedDimensions: function (options) { + options = Object.assign({ + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + width: this.width, + height: this.height, + strokeWidth: this.strokeWidth + }, options || {}); + // stroke is applied before/after transformations are applied according to `strokeUniform` + var preScalingStrokeValue, postScalingStrokeValue, strokeWidth = options.strokeWidth; + if (this.strokeUniform) { + preScalingStrokeValue = 0; + postScalingStrokeValue = strokeWidth; + } + else { + preScalingStrokeValue = strokeWidth; + postScalingStrokeValue = 0; + } + var dimX = options.width + preScalingStrokeValue, + dimY = options.height + preScalingStrokeValue, + finalDimensions, + noSkew = options.skewX === 0 && options.skewY === 0; + if (noSkew) { + finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY); + } + else { + var bbox = util.sizeAfterTransform(dimX, dimY, options); + finalDimensions = new fabric.Point(bbox.x, bbox.y); + } + + return finalDimensions.scalarAddEquals(postScalingStrokeValue); + }, + + /** * Calculate object dimensions for controls box, including padding and canvas zoom. * and active selection * @private * @param {object} [options] transform options * @returns {fabric.Point} dimensions */ - _calculateCurrentDimensions: function(options) { - var vpt = this.getViewportTransform(), - dim = this._getTransformedDimensions(options), - p = transformPoint(dim, vpt, true); - return p.scalarAdd(2 * this.padding); - }, - }); + _calculateCurrentDimensions: function(options) { + var vpt = this.getViewportTransform(), + dim = this._getTransformedDimensions(options), + p = transformPoint(dim, vpt, true); + return p.scalarAdd(2 * this.padding); + }, +}); diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index bf6b960cdc8..7326e8d9d59 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -1,83 +1,83 @@ - var degreesToRadians = fabric.util.degreesToRadians; +var degreesToRadians = fabric.util.degreesToRadians; - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** * Determines which corner has been clicked * @private * @param {Object} pointer The pointer indicating the mouse position * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found */ - _findTargetCorner: function(pointer, forTouch) { - if (!this.hasControls || (!this.canvas || this.canvas._activeObject !== this)) { - return false; - } - var xPoints, - lines, keys = Object.keys(this.oCoords), - j = keys.length - 1, i; - this.__corner = 0; + _findTargetCorner: function(pointer, forTouch) { + if (!this.hasControls || (!this.canvas || this.canvas._activeObject !== this)) { + return false; + } + var xPoints, + lines, keys = Object.keys(this.oCoords), + j = keys.length - 1, i; + this.__corner = 0; - // cycle in reverse order so we pick first the one on top - for (; j >= 0; j--) { - i = keys[j]; - if (!this.isControlVisible(i)) { - continue; - } + // cycle in reverse order so we pick first the one on top + for (; j >= 0; j--) { + i = keys[j]; + if (!this.isControlVisible(i)) { + continue; + } - lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); - // // debugging - // - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); + // // debugging + // + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); - xPoints = this._findCrossPoints(pointer, lines); - if (xPoints !== 0 && xPoints % 2 === 1) { - this.__corner = i; - return i; - } + xPoints = this._findCrossPoints(pointer, lines); + if (xPoints !== 0 && xPoints % 2 === 1) { + this.__corner = i; + return i; } - return false; - }, + } + return false; + }, - /** + /** * Calls a function for each control. The function gets called, * with the control, the object that is calling the iterator and the control's key * @param {Function} fn function to iterate over the controls over */ - forEachControl: function(fn) { - for (var i in this.controls) { - fn(this.controls[i], i, this); - }; - }, + forEachControl: function(fn) { + for (var i in this.controls) { + fn(this.controls[i], i, this); + }; + }, - /** + /** * Sets the coordinates of the draggable boxes in the corners of * the image used to scale/rotate it. * note: if we would switch to ROUND corner area, all of this would disappear. * everything would resolve to a single point and a pythagorean theorem for the distance * @private */ - _setCornerCoords: function() { - var coords = this.oCoords; + _setCornerCoords: function() { + var coords = this.oCoords; - for (var control in coords) { - var controlObject = this.controls[control]; - coords[control].corner = controlObject.calcCornerCoords( - this.angle, this.cornerSize, coords[control].x, coords[control].y, false); - coords[control].touchCorner = controlObject.calcCornerCoords( - this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); - } - }, + for (var control in coords) { + var controlObject = this.controls[control]; + coords[control].corner = controlObject.calcCornerCoords( + this.angle, this.cornerSize, coords[control].x, coords[control].y, false); + coords[control].touchCorner = controlObject.calcCornerCoords( + this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); + } + }, - /** + /** * Draws a colored layer behind the object, inside its selection borders. * Requires public options: padding, selectionBackgroundColor * this function is called when the context is transformed @@ -86,60 +86,60 @@ * @return {fabric.Object} thisArg * @chainable */ - drawSelectionBackground: function(ctx) { - if (!this.selectionBackgroundColor || + drawSelectionBackground: function(ctx) { + if (!this.selectionBackgroundColor || (this.canvas && !this.canvas.interactive) || (this.canvas && this.canvas._activeObject !== this) - ) { - return this; - } - ctx.save(); - var center = this.getRelativeCenterPoint(), wh = this._calculateCurrentDimensions(), - vpt = this.canvas.viewportTransform; - ctx.translate(center.x, center.y); - ctx.scale(1 / vpt[0], 1 / vpt[3]); - ctx.rotate(degreesToRadians(this.angle)); - ctx.fillStyle = this.selectionBackgroundColor; - ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); - ctx.restore(); + ) { return this; - }, + } + ctx.save(); + var center = this.getRelativeCenterPoint(), wh = this._calculateCurrentDimensions(), + vpt = this.canvas.viewportTransform; + ctx.translate(center.x, center.y); + ctx.scale(1 / vpt[0], 1 / vpt[3]); + ctx.rotate(degreesToRadians(this.angle)); + ctx.fillStyle = this.selectionBackgroundColor; + ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); + ctx.restore(); + return this; + }, - /** + /** * @public override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style. * @param {CanvasRenderingContext2D} ctx ctx is rotated and translated so that (0,0) is at object's center * @param {fabric.Point} size the control box size used */ - strokeBorders: function (ctx, size) { - ctx.strokeRect( - -size.x / 2, - -size.y / 2, - size.x, - size.y - ); - }, + strokeBorders: function (ctx, size) { + ctx.strokeRect( + -size.x / 2, + -size.y / 2, + size.x, + size.y + ); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to draw on * @param {fabric.Point} size * @param {Object} styleOverride object to override the object style */ - _drawBorders: function (ctx, size, styleOverride) { - var options = Object.assign({ - hasControls: this.hasControls, - borderColor: this.borderColor, - borderDashArray: this.borderDashArray - }, styleOverride || {}); - ctx.save(); - ctx.strokeStyle = options.borderColor; - this._setLineDash(ctx, options.borderDashArray); - this.strokeBorders(ctx, size); - options.hasControls && this.drawControlsConnectingLines(ctx, size); - ctx.restore(); - }, + _drawBorders: function (ctx, size, styleOverride) { + var options = Object.assign({ + hasControls: this.hasControls, + borderColor: this.borderColor, + borderDashArray: this.borderDashArray + }, styleOverride || {}); + ctx.save(); + ctx.strokeStyle = options.borderColor; + this._setLineDash(ctx, options.borderDashArray); + this.strokeBorders(ctx, size); + options.hasControls && this.drawControlsConnectingLines(ctx, size); + ctx.restore(); + }, - /** + /** * Draws borders of an object's bounding box. * Requires public properties: width, height * Requires public options: padding, borderColor @@ -149,24 +149,24 @@ * @return {fabric.Object} thisArg * @chainable */ - drawBorders: function (ctx, options, styleOverride) { - var size; - if ((styleOverride && styleOverride.forActiveSelection) || this.group) { - var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), - strokeFactor = this.strokeUniform ? - new fabric.Point(0, 0).scalarAddEquals(this.canvas.getZoom()) : - new fabric.Point(options.scaleX, options.scaleY), - stroke = strokeFactor.scalarMultiplyEquals(this.strokeWidth); - size = bbox.addEquals(stroke).scalarAddEquals(this.borderScaleFactor); - } - else { - size = this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor); - } - this._drawBorders(ctx, size, styleOverride); - return this; - }, + drawBorders: function (ctx, options, styleOverride) { + var size; + if ((styleOverride && styleOverride.forActiveSelection) || this.group) { + var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), + strokeFactor = this.strokeUniform ? + new fabric.Point(0, 0).scalarAddEquals(this.canvas.getZoom()) : + new fabric.Point(options.scaleX, options.scaleY), + stroke = strokeFactor.scalarMultiplyEquals(this.strokeWidth); + size = bbox.addEquals(stroke).scalarAddEquals(this.borderScaleFactor); + } + else { + size = this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor); + } + this._drawBorders(ctx, size, styleOverride); + return this; + }, - /** + /** * Draws lines from a borders of an object's bounding box to controls that have `withConnection` property set. * Requires public properties: width, height * Requires public options: padding, borderColor @@ -176,29 +176,29 @@ * @return {fabric.Object} thisArg * @chainable */ - drawControlsConnectingLines: function (ctx, size) { - var shouldStroke = false; + drawControlsConnectingLines: function (ctx, size) { + var shouldStroke = false; - ctx.beginPath(); - this.forEachControl(function (control, key, fabricObject) { - // in this moment, the ctx is centered on the object. - // width and height of the above function are the size of the bbox. - if (control.withConnection && control.getVisibility(fabricObject, key)) { - // reset movement for each control - shouldStroke = true; - ctx.moveTo(control.x * size.x, control.y * size.y); - ctx.lineTo( - control.x * size.x + control.offsetX, - control.y * size.y + control.offsetY - ); - } - }); - shouldStroke && ctx.stroke(); + ctx.beginPath(); + this.forEachControl(function (control, key, fabricObject) { + // in this moment, the ctx is centered on the object. + // width and height of the above function are the size of the bbox. + if (control.withConnection && control.getVisibility(fabricObject, key)) { + // reset movement for each control + shouldStroke = true; + ctx.moveTo(control.x * size.x, control.y * size.y); + ctx.lineTo( + control.x * size.x + control.offsetX, + control.y * size.y + control.offsetY + ); + } + }); + shouldStroke && ctx.stroke(); - return this; - }, + return this; + }, - /** + /** * Draws corners of an object's bounding box. * Requires public properties: width, height * Requires public options: cornerSize, padding @@ -207,53 +207,53 @@ * @return {fabric.Object} thisArg * @chainable */ - drawControls: function(ctx, styleOverride) { - styleOverride = styleOverride || {}; - ctx.save(); - var retinaScaling = this.canvas.getRetinaScaling(), p; - ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); - ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; - if (!this.transparentCorners) { - ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; + drawControls: function(ctx, styleOverride) { + styleOverride = styleOverride || {}; + ctx.save(); + var retinaScaling = this.canvas.getRetinaScaling(), p; + ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); + ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; + if (!this.transparentCorners) { + ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; + } + this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); + this.setCoords(); + this.forEachControl(function(control, key, fabricObject) { + if (control.getVisibility(fabricObject, key)) { + p = fabricObject.oCoords[key]; + control.render(ctx, p.x, p.y, styleOverride, fabricObject); } - this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); - this.setCoords(); - this.forEachControl(function(control, key, fabricObject) { - if (control.getVisibility(fabricObject, key)) { - p = fabricObject.oCoords[key]; - control.render(ctx, p.x, p.y, styleOverride, fabricObject); - } - }); - ctx.restore(); + }); + ctx.restore(); - return this; - }, + return this; + }, - /** + /** * Returns true if the specified control is visible, false otherwise. * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. * @returns {Boolean} true if the specified control is visible, false otherwise */ - isControlVisible: function(controlKey) { - return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); - }, + isControlVisible: function(controlKey) { + return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); + }, - /** + /** * Sets the visibility of the specified control. * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. * @param {Boolean} visible true to set the specified control visible, false otherwise * @return {fabric.Object} thisArg * @chainable */ - setControlVisible: function(controlKey, visible) { - if (!this._controlsVisibility) { - this._controlsVisibility = {}; - } - this._controlsVisibility[controlKey] = visible; - return this; - }, + setControlVisible: function(controlKey, visible) { + if (!this._controlsVisibility) { + this._controlsVisibility = {}; + } + this._controlsVisibility[controlKey] = visible; + return this; + }, - /** + /** * Sets the visibility state of object controls. * @param {Object} [options] Options object * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it @@ -268,34 +268,34 @@ * @return {fabric.Object} thisArg * @chainable */ - setControlsVisibility: function(options) { - options || (options = { }); + setControlsVisibility: function(options) { + options || (options = { }); - for (var p in options) { - this.setControlVisible(p, options[p]); - } - return this; - }, + for (var p in options) { + this.setControlVisible(p, options[p]); + } + return this; + }, - /** + /** * This callback function is called every time _discardActiveObject or _setActiveObject * try to to deselect this object. If the function returns true, the process is cancelled * @param {Object} [options] options sent from the upper functions * @param {Event} [options.e] event if the process is generated by an event */ - onDeselect: function() { - // implemented by sub-classes, as needed. - }, + onDeselect: function() { + // implemented by sub-classes, as needed. + }, - /** + /** * This callback function is called every time _discardActiveObject or _setActiveObject * try to to select this object. If the function returns true, the process is cancelled * @param {Object} [options] options sent from the upper functions * @param {Event} [options.e] event if the process is generated by an event */ - onSelect: function() { - // implemented by sub-classes, as needed. - } - }); + onSelect: function() { + // implemented by sub-classes, as needed. + } +}); diff --git a/src/mixins/object_origin.mixin.js b/src/mixins/object_origin.mixin.js index 189298cd7a0..700abb33dba 100644 --- a/src/mixins/object_origin.mixin.js +++ b/src/mixins/object_origin.mixin.js @@ -1,47 +1,47 @@ - var degreesToRadians = fabric.util.degreesToRadians, - originXOffset = { - left: -0.5, - center: 0, - right: 0.5 - }, - originYOffset = { - top: -0.5, - center: 0, - bottom: 0.5 - }; +var degreesToRadians = fabric.util.degreesToRadians, + originXOffset = { + left: -0.5, + center: 0, + right: 0.5 + }, + originYOffset = { + top: -0.5, + center: 0, + bottom: 0.5 + }; - /** +/** * @typedef {number | 'left' | 'center' | 'right'} OriginX * @typedef {number | 'top' | 'center' | 'bottom'} OriginY */ - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** + /** * Resolves origin value relative to center * @private * @param {OriginX} originX * @returns number */ - resolveOriginX: function (originX) { - return typeof originX === 'string' ? - originXOffset[originX] : - originX - 0.5; - }, + resolveOriginX: function (originX) { + return typeof originX === 'string' ? + originXOffset[originX] : + originX - 0.5; + }, - /** + /** * Resolves origin value relative to center * @private * @param {OriginY} originY * @returns number */ - resolveOriginY: function (originY) { - return typeof originY === 'string' ? - originYOffset[originY] : - originY - 0.5; - }, + resolveOriginY: function (originY) { + return typeof originY === 'string' ? + originYOffset[originY] : + originY - 0.5; + }, - /** + /** * Translates the coordinates from a set of origin to another (based on the object's dimensions) * @param {fabric.Point} point The point which corresponds to the originX and originY params * @param {OriginX} fromOriginX Horizontal origin: 'left', 'center' or 'right' @@ -50,231 +50,231 @@ * @param {OriginY} toOriginY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { - var x = point.x, - y = point.y, - dim, - offsetX = this.resolveOriginX(toOriginX) - this.resolveOriginX(fromOriginX), - offsetY = this.resolveOriginY(toOriginY) - this.resolveOriginY(fromOriginY); + translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { + var x = point.x, + y = point.y, + dim, + offsetX = this.resolveOriginX(toOriginX) - this.resolveOriginX(fromOriginX), + offsetY = this.resolveOriginY(toOriginY) - this.resolveOriginY(fromOriginY); - if (offsetX || offsetY) { - dim = this._getTransformedDimensions(); - x = point.x + offsetX * dim.x; - y = point.y + offsetY * dim.y; - } + if (offsetX || offsetY) { + dim = this._getTransformedDimensions(); + x = point.x + offsetX * dim.x; + y = point.y + offsetY * dim.y; + } - return new fabric.Point(x, y); - }, + return new fabric.Point(x, y); + }, - /** + /** * Translates the coordinates from origin to center coordinates (based on the object's dimensions) * @param {fabric.Point} point The point which corresponds to the originX and originY params * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - translateToCenterPoint: function(point, originX, originY) { - var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); - if (this.angle) { - return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); - } - return p; - }, + translateToCenterPoint: function(point, originX, originY) { + var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); + if (this.angle) { + return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); + } + return p; + }, - /** + /** * Translates the coordinates from center to origin coordinates (based on the object's dimensions) * @param {fabric.Point} center The point which corresponds to center of the object * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - translateToOriginPoint: function(center, originX, originY) { - var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - if (this.angle) { - return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); - } - return p; - }, + translateToOriginPoint: function(center, originX, originY) { + var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + if (this.angle) { + return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); + } + return p; + }, - /** + /** * Returns the center coordinates of the object relative to canvas * @return {fabric.Point} */ - getCenterPoint: function() { - var relCenter = this.getRelativeCenterPoint(); - return this.group ? - fabric.util.transformPoint(relCenter, this.group.calcTransformMatrix()) : - relCenter; - }, + getCenterPoint: function() { + var relCenter = this.getRelativeCenterPoint(); + return this.group ? + fabric.util.transformPoint(relCenter, this.group.calcTransformMatrix()) : + relCenter; + }, - /** + /** * Returns the center coordinates of the object relative to it's containing group or null * @return {fabric.Point|null} point or null of object has no parent group */ - getCenterPointRelativeToParent: function () { - return this.group ? this.getRelativeCenterPoint() : null; - }, + getCenterPointRelativeToParent: function () { + return this.group ? this.getRelativeCenterPoint() : null; + }, - /** + /** * Returns the center coordinates of the object relative to it's parent * @return {fabric.Point} */ - getRelativeCenterPoint: function () { - return this.translateToCenterPoint(new fabric.Point(this.left, this.top), this.originX, this.originY); - }, + getRelativeCenterPoint: function () { + return this.translateToCenterPoint(new fabric.Point(this.left, this.top), this.originX, this.originY); + }, - /** + /** * Returns the coordinates of the object based on center coordinates * @param {fabric.Point} point The point which corresponds to the originX and originY params * @return {fabric.Point} */ - // getOriginPoint: function(center) { - // return this.translateToOriginPoint(center, this.originX, this.originY); - // }, + // getOriginPoint: function(center) { + // return this.translateToOriginPoint(center, this.originX, this.originY); + // }, - /** + /** * Returns the coordinates of the object as if it has a different origin * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - getPointByOrigin: function(originX, originY) { - var center = this.getRelativeCenterPoint(); - return this.translateToOriginPoint(center, originX, originY); - }, + getPointByOrigin: function(originX, originY) { + var center = this.getRelativeCenterPoint(); + return this.translateToOriginPoint(center, originX, originY); + }, - /** + /** * Returns the normalized point (rotated relative to center) in local coordinates * @param {fabric.Point} point The point relative to instance coordinate system * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - normalizePoint: function(point, originX, originY) { - var center = this.getRelativeCenterPoint(), p, p2; - if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { - p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - } - else { - p = new fabric.Point(this.left, this.top); - } + normalizePoint: function(point, originX, originY) { + var center = this.getRelativeCenterPoint(), p, p2; + if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { + p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + } + else { + p = new fabric.Point(this.left, this.top); + } - p2 = new fabric.Point(point.x, point.y); - if (this.angle) { - p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); - } - return p2.subtractEquals(p); - }, + p2 = new fabric.Point(point.x, point.y); + if (this.angle) { + p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); + } + return p2.subtractEquals(p); + }, - /** + /** * Returns coordinates of a pointer relative to object's top left corner in object's plane * @param {Event} e Event to operate upon * @param {Object} [pointer] Pointer to operate upon (instead of event) * @return {Object} Coordinates of a pointer (x, y) */ - getLocalPointer: function (e, pointer) { - pointer = pointer || this.canvas.getPointer(e); - return fabric.util.transformPoint( - new fabric.Point(pointer.x, pointer.y), - fabric.util.invertTransform(this.calcTransformMatrix()) - ).addEquals(new fabric.Point(this.width / 2, this.height / 2)); - }, + getLocalPointer: function (e, pointer) { + pointer = pointer || this.canvas.getPointer(e); + return fabric.util.transformPoint( + new fabric.Point(pointer.x, pointer.y), + fabric.util.invertTransform(this.calcTransformMatrix()) + ).addEquals(new fabric.Point(this.width / 2, this.height / 2)); + }, - /** + /** * Returns the point in global coordinates * @param {fabric.Point} The point relative to the local coordinate system * @return {fabric.Point} */ - // toGlobalPoint: function(point) { - // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); - // }, + // toGlobalPoint: function(point) { + // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); + // }, - /** + /** * Sets the position of the object taking into consideration the object's origin * @param {fabric.Point} pos The new position of the object * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {void} */ - setPositionByOrigin: function(pos, originX, originY) { - var center = this.translateToCenterPoint(pos, originX, originY), - position = this.translateToOriginPoint(center, this.originX, this.originY); - this.set('left', position.x); - this.set('top', position.y); - }, + setPositionByOrigin: function(pos, originX, originY) { + var center = this.translateToCenterPoint(pos, originX, originY), + position = this.translateToOriginPoint(center, this.originX, this.originY); + this.set('left', position.x); + this.set('top', position.y); + }, - /** + /** * @param {String} to One of 'left', 'center', 'right' */ - adjustPosition: function(to) { - var angle = degreesToRadians(this.angle), - hypotFull = this.getScaledWidth(), - xFull = fabric.util.cos(angle) * hypotFull, - yFull = fabric.util.sin(angle) * hypotFull, - offsetFrom, offsetTo; + adjustPosition: function(to) { + var angle = degreesToRadians(this.angle), + hypotFull = this.getScaledWidth(), + xFull = fabric.util.cos(angle) * hypotFull, + yFull = fabric.util.sin(angle) * hypotFull, + offsetFrom, offsetTo; - //TODO: this function does not consider mixed situation like top, center. - if (typeof this.originX === 'string') { - offsetFrom = originXOffset[this.originX]; - } - else { - offsetFrom = this.originX - 0.5; - } - if (typeof to === 'string') { - offsetTo = originXOffset[to]; - } - else { - offsetTo = to - 0.5; - } - this.left += xFull * (offsetTo - offsetFrom); - this.top += yFull * (offsetTo - offsetFrom); - this.setCoords(); - this.originX = to; - }, + //TODO: this function does not consider mixed situation like top, center. + if (typeof this.originX === 'string') { + offsetFrom = originXOffset[this.originX]; + } + else { + offsetFrom = this.originX - 0.5; + } + if (typeof to === 'string') { + offsetTo = originXOffset[to]; + } + else { + offsetTo = to - 0.5; + } + this.left += xFull * (offsetTo - offsetFrom); + this.top += yFull * (offsetTo - offsetFrom); + this.setCoords(); + this.originX = to; + }, - /** + /** * Sets the origin/position of the object to it's center point * @private * @return {void} */ - _setOriginToCenter: function() { - this._originalOriginX = this.originX; - this._originalOriginY = this.originY; + _setOriginToCenter: function() { + this._originalOriginX = this.originX; + this._originalOriginY = this.originY; - var center = this.getRelativeCenterPoint(); + var center = this.getRelativeCenterPoint(); - this.originX = 'center'; - this.originY = 'center'; + this.originX = 'center'; + this.originY = 'center'; - this.left = center.x; - this.top = center.y; - }, + this.left = center.x; + this.top = center.y; + }, - /** + /** * Resets the origin/position of the object to it's original origin * @private * @return {void} */ - _resetOrigin: function() { - var originPoint = this.translateToOriginPoint( - this.getRelativeCenterPoint(), - this._originalOriginX, - this._originalOriginY); + _resetOrigin: function() { + var originPoint = this.translateToOriginPoint( + this.getRelativeCenterPoint(), + this._originalOriginX, + this._originalOriginY); - this.originX = this._originalOriginX; - this.originY = this._originalOriginY; + this.originX = this._originalOriginX; + this.originY = this._originalOriginY; - this.left = originPoint.x; - this.top = originPoint.y; + this.left = originPoint.x; + this.top = originPoint.y; - this._originalOriginX = null; - this._originalOriginY = null; - }, + this._originalOriginX = null; + this._originalOriginY = null; + }, - /** + /** * @private */ - _getLeftTopCoords: function() { - return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top'); - }, - }); + _getLeftTopCoords: function() { + return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top'); + }, +}); diff --git a/src/mixins/observable.mixin.js b/src/mixins/observable.mixin.js index bc30843ac4e..0775f7cb8b7 100644 --- a/src/mixins/observable.mixin.js +++ b/src/mixins/observable.mixin.js @@ -1,22 +1,22 @@ - /** +/** * @private * @param {String} eventName * @param {Function} handler */ - function _removeEventListener(eventName, handler) { - if (!this.__eventListeners[eventName]) { - return; - } - var eventListener = this.__eventListeners[eventName]; - if (handler) { - eventListener[eventListener.indexOf(handler)] = false; - } - else { - fabric.util.array.fill(eventListener, false); - } +function _removeEventListener(eventName, handler) { + if (!this.__eventListeners[eventName]) { + return; + } + var eventListener = this.__eventListeners[eventName]; + if (handler) { + eventListener[eventListener.indexOf(handler)] = false; + } + else { + fabric.util.array.fill(eventListener, false); } +} - /** +/** * Observes specified event * @memberOf fabric.Observable * @alias on @@ -24,35 +24,35 @@ * @param {Function} handler Function that receives a notification when an event of the specified type occurs * @return {Function} disposer */ - function on(eventName, handler) { - if (!this.__eventListeners) { - this.__eventListeners = { }; - } - // one object with key/value pairs was passed - if (arguments.length === 1) { - for (var prop in eventName) { - this.on(prop, eventName[prop]); - } +function on(eventName, handler) { + if (!this.__eventListeners) { + this.__eventListeners = { }; + } + // one object with key/value pairs was passed + if (arguments.length === 1) { + for (var prop in eventName) { + this.on(prop, eventName[prop]); } - else { - if (!this.__eventListeners[eventName]) { - this.__eventListeners[eventName] = []; - } - this.__eventListeners[eventName].push(handler); + } + else { + if (!this.__eventListeners[eventName]) { + this.__eventListeners[eventName] = []; } - return off.bind(this, eventName, handler); + this.__eventListeners[eventName].push(handler); } + return off.bind(this, eventName, handler); +} - function _once(eventName, handler) { - var _handler = function () { - handler.apply(this, arguments); - this.off(eventName, _handler); - }.bind(this); - this.on(eventName, _handler); - return _handler; - } +function _once(eventName, handler) { + var _handler = function () { + handler.apply(this, arguments); + this.off(eventName, _handler); + }.bind(this); + this.on(eventName, _handler); + return _handler; +} - /** +/** * Observes specified event **once** * @memberOf fabric.Observable * @alias once @@ -60,22 +60,22 @@ * @param {Function} handler Function that receives a notification when an event of the specified type occurs * @return {Function} disposer */ - function once(eventName, handler) { - // one object with key/value pairs was passed - if (arguments.length === 1) { - var handlers = {}; - for (var prop in eventName) { - handlers[prop] = _once.call(this, prop, eventName[prop]); - } - return off.bind(this, handlers); - } - else { - var _handler = _once.call(this, eventName, handler); - return off.bind(this, eventName, _handler); +function once(eventName, handler) { + // one object with key/value pairs was passed + if (arguments.length === 1) { + var handlers = {}; + for (var prop in eventName) { + handlers[prop] = _once.call(this, prop, eventName[prop]); } + return off.bind(this, handlers); } + else { + var _handler = _once.call(this, eventName, handler); + return off.bind(this, eventName, _handler); + } +} - /** +/** * Stops event observing for a particular event handler. Calling this method * without arguments removes all handlers for all events * @memberOf fabric.Observable @@ -83,60 +83,60 @@ * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) * @param {Function} handler Function to be deleted from EventListeners */ - function off(eventName, handler) { - if (!this.__eventListeners) { - return; - } +function off(eventName, handler) { + if (!this.__eventListeners) { + return; + } - // remove all key/value pairs (event name -> event handler) - if (arguments.length === 0) { - for (eventName in this.__eventListeners) { - _removeEventListener.call(this, eventName); - } + // remove all key/value pairs (event name -> event handler) + if (arguments.length === 0) { + for (eventName in this.__eventListeners) { + _removeEventListener.call(this, eventName); } - // one object with key/value pairs was passed - else if (typeof eventName === 'object' && typeof handler === 'undefined') { - for (var prop in eventName) { - _removeEventListener.call(this, prop, eventName[prop]); - } - } - else { - _removeEventListener.call(this, eventName, handler); + } + // one object with key/value pairs was passed + else if (typeof eventName === 'object' && typeof handler === 'undefined') { + for (var prop in eventName) { + _removeEventListener.call(this, prop, eventName[prop]); } } + else { + _removeEventListener.call(this, eventName, handler); + } +} - /** +/** * Fires event with an optional options object * @memberOf fabric.Observable * @param {String} eventName Event name to fire * @param {Object} [options] Options object */ - function fire(eventName, options) { - if (!this.__eventListeners) { - return; - } +function fire(eventName, options) { + if (!this.__eventListeners) { + return; + } - var listenersForEvent = this.__eventListeners[eventName]; - if (!listenersForEvent) { - return; - } + var listenersForEvent = this.__eventListeners[eventName]; + if (!listenersForEvent) { + return; + } - for (var i = 0, len = listenersForEvent.length; i < len; i++) { - listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); - } - this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { - return value !== false; - }); + for (var i = 0, len = listenersForEvent.length; i < len; i++) { + listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); } + this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { + return value !== false; + }); +} - /** +/** * @namespace fabric.Observable * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events} * @see {@link http://fabricjs.com/events|Events demo} */ - fabric.Observable = { - fire: fire, - on: on, - once: once, - off: off, - }; +fabric.Observable = { + fire: fire, + on: on, + once: once, + off: off, +}; diff --git a/src/mixins/stateful.mixin.js b/src/mixins/stateful.mixin.js index 3738d4d9ef7..31f7bbd3269 100644 --- a/src/mixins/stateful.mixin.js +++ b/src/mixins/stateful.mixin.js @@ -1,104 +1,104 @@ - var extend = fabric.util.object.extend, - originalSet = 'stateProperties'; +var extend = fabric.util.object.extend, + originalSet = 'stateProperties'; - /* +/* Depends on `stateProperties` */ - function saveProps(origin, destination, props) { - var tmpObj = { }, deep = true; - props.forEach(function(prop) { - tmpObj[prop] = origin[prop]; - }); +function saveProps(origin, destination, props) { + var tmpObj = { }, deep = true; + props.forEach(function(prop) { + tmpObj[prop] = origin[prop]; + }); - extend(origin[destination], tmpObj, deep); - } + extend(origin[destination], tmpObj, deep); +} - function _isEqual(origValue, currentValue, firstPass) { - if (origValue === currentValue) { - // if the objects are identical, return - return true; +function _isEqual(origValue, currentValue, firstPass) { + if (origValue === currentValue) { + // if the objects are identical, return + return true; + } + else if (Array.isArray(origValue)) { + if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { + return false; } - else if (Array.isArray(origValue)) { - if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { + for (var i = 0, len = origValue.length; i < len; i++) { + if (!_isEqual(origValue[i], currentValue[i])) { return false; } - for (var i = 0, len = origValue.length; i < len; i++) { - if (!_isEqual(origValue[i], currentValue[i])) { - return false; - } - } - return true; } - else if (origValue && typeof origValue === 'object') { - var keys = Object.keys(origValue), key; - if (!currentValue || + return true; + } + else if (origValue && typeof origValue === 'object') { + var keys = Object.keys(origValue), key; + if (!currentValue || typeof currentValue !== 'object' || (!firstPass && keys.length !== Object.keys(currentValue).length) - ) { - return false; + ) { + return false; + } + for (var i = 0, len = keys.length; i < len; i++) { + key = keys[i]; + // since clipPath is in the statefull cache list and the clipPath objects + // would be iterated as an object, this would lead to possible infinite recursion + // we do not want to compare those. + if (key === 'canvas' || key === 'group') { + continue; } - for (var i = 0, len = keys.length; i < len; i++) { - key = keys[i]; - // since clipPath is in the statefull cache list and the clipPath objects - // would be iterated as an object, this would lead to possible infinite recursion - // we do not want to compare those. - if (key === 'canvas' || key === 'group') { - continue; - } - if (!_isEqual(origValue[key], currentValue[key])) { - return false; - } + if (!_isEqual(origValue[key], currentValue[key])) { + return false; } - return true; } + return true; } +} - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** + /** * Returns true if object state (one of its state properties) was changed * @param {String} [propertySet] optional name for the set of property we want to save * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called */ - hasStateChanged: function(propertySet) { - propertySet = propertySet || originalSet; - var dashedPropertySet = '_' + propertySet; - if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { - return true; - } - return !_isEqual(this[dashedPropertySet], this, true); - }, + hasStateChanged: function(propertySet) { + propertySet = propertySet || originalSet; + var dashedPropertySet = '_' + propertySet; + if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { + return true; + } + return !_isEqual(this[dashedPropertySet], this, true); + }, - /** + /** * Saves state of an object * @param {Object} [options] Object with additional `stateProperties` array to include when saving state * @return {fabric.Object} thisArg */ - saveState: function(options) { - var propertySet = options && options.propertySet || originalSet, - destination = '_' + propertySet; - if (!this[destination]) { - return this.setupState(options); - } - saveProps(this, destination, this[propertySet]); - if (options && options.stateProperties) { - saveProps(this, destination, options.stateProperties); - } - return this; - }, + saveState: function(options) { + var propertySet = options && options.propertySet || originalSet, + destination = '_' + propertySet; + if (!this[destination]) { + return this.setupState(options); + } + saveProps(this, destination, this[propertySet]); + if (options && options.stateProperties) { + saveProps(this, destination, options.stateProperties); + } + return this; + }, - /** + /** * Setups state of an object * @param {Object} [options] Object with additional `stateProperties` array to include when saving state * @return {fabric.Object} thisArg */ - setupState: function(options) { - options = options || { }; - var propertySet = options.propertySet || originalSet; - options.propertySet = propertySet; - this['_' + propertySet] = { }; - this.saveState(options); - return this; - } - }); + setupState: function(options) { + options = options || { }; + var propertySet = options.propertySet || originalSet; + options.propertySet = propertySet; + this['_' + propertySet] = { }; + this.saveState(options); + return this; + } +}); diff --git a/src/mixins/text_style.mixin.js b/src/mixins/text_style.mixin.js index 6ef320ec9df..2d4e0763302 100644 --- a/src/mixins/text_style.mixin.js +++ b/src/mixins/text_style.mixin.js @@ -1,56 +1,56 @@ - fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** +fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + /** * Returns true if object has no styling or no styling in a line * @param {Number} lineIndex , lineIndex is on wrapped lines. * @return {Boolean} */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { - return true; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return true; - } - var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; - } + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return true; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; } } - return true; - }, + } + return true; + }, - /** + /** * Returns true if object has a style property or has it ina specified line * This function is used to detect if a text will use a particular property or not. * @param {String} property to check for * @param {Number} lineIndex to check the style on * @return {Boolean} */ - styleHas: function(property, lineIndex) { - if (!this.styles || !property || property === '') { - return false; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return false; - } - var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; - // eslint-disable-next-line + styleHas: function(property, lineIndex) { + if (!this.styles || !property || property === '') { + return false; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return false; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; + // eslint-disable-next-line for (var p1 in obj) { - // eslint-disable-next-line + // eslint-disable-next-line for (var p2 in obj[p1]) { - if (typeof obj[p1][p2][property] !== 'undefined') { - return true; - } + if (typeof obj[p1][p2][property] !== 'undefined') { + return true; } } - return false; - }, + } + return false; + }, - /** + /** * Check if characters in a text have a value for a property * whose value matches the textbox's value for that property. If so, * the character-level property is deleted. If the character @@ -60,131 +60,131 @@ * * @param {string} property The property to compare between characters and text. */ - cleanStyle: function(property) { - if (!this.styles || !property || property === '') { - return false; - } - var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, - allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; - // eslint-disable-next-line + cleanStyle: function(property) { + if (!this.styles || !property || property === '') { + return false; + } + var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, + allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; + // eslint-disable-next-line for (var p1 in obj) { - letterCount = 0; - // eslint-disable-next-line + letterCount = 0; + // eslint-disable-next-line for (var p2 in obj[p1]) { - var styleObject = obj[p1][p2], - stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); - - stylesCount++; + var styleObject = obj[p1][p2], + stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); - if (stylePropertyHasBeenSet) { - if (!stylePropertyValue) { - stylePropertyValue = styleObject[property]; - } - else if (styleObject[property] !== stylePropertyValue) { - allStyleObjectPropertiesMatch = false; - } + stylesCount++; - if (styleObject[property] === this[property]) { - delete styleObject[property]; - } + if (stylePropertyHasBeenSet) { + if (!stylePropertyValue) { + stylePropertyValue = styleObject[property]; } - else { + else if (styleObject[property] !== stylePropertyValue) { allStyleObjectPropertiesMatch = false; } - if (Object.keys(styleObject).length !== 0) { - letterCount++; - } - else { - delete obj[p1][p2]; + if (styleObject[property] === this[property]) { + delete styleObject[property]; } } + else { + allStyleObjectPropertiesMatch = false; + } - if (letterCount === 0) { - delete obj[p1]; + if (Object.keys(styleObject).length !== 0) { + letterCount++; + } + else { + delete obj[p1][p2]; } } - // if every grapheme has the same style set then - // delete those styles and set it on the parent - for (var i = 0; i < this._textLines.length; i++) { - graphemeCount += this._textLines[i].length; - } - if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { - this[property] = stylePropertyValue; - this.removeStyle(property); + + if (letterCount === 0) { + delete obj[p1]; } - }, + } + // if every grapheme has the same style set then + // delete those styles and set it on the parent + for (var i = 0; i < this._textLines.length; i++) { + graphemeCount += this._textLines[i].length; + } + if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { + this[property] = stylePropertyValue; + this.removeStyle(property); + } + }, - /** + /** * Remove a style property or properties from all individual character styles * in a text object. Deletes the character style object if it contains no other style * props. Deletes a line style object if it contains no other character styles. * * @param {String} props The property to remove from character styles. */ - removeStyle: function(property) { - if (!this.styles || !property || property === '') { - return; - } - var obj = this.styles, line, lineNum, charNum; - for (lineNum in obj) { - line = obj[lineNum]; - for (charNum in line) { - delete line[charNum][property]; - if (Object.keys(line[charNum]).length === 0) { - delete line[charNum]; - } - } - if (Object.keys(line).length === 0) { - delete obj[lineNum]; + removeStyle: function(property) { + if (!this.styles || !property || property === '') { + return; + } + var obj = this.styles, line, lineNum, charNum; + for (lineNum in obj) { + line = obj[lineNum]; + for (charNum in line) { + delete line[charNum][property]; + if (Object.keys(line[charNum]).length === 0) { + delete line[charNum]; } } - }, + if (Object.keys(line).length === 0) { + delete obj[lineNum]; + } + } + }, - /** + /** * @private */ - _extendStyles: function(index, styles) { - var loc = this.get2DCursorLocation(index); + _extendStyles: function(index, styles) { + var loc = this.get2DCursorLocation(index); - if (!this._getLineStyle(loc.lineIndex)) { - this._setLineStyle(loc.lineIndex); - } + if (!this._getLineStyle(loc.lineIndex)) { + this._setLineStyle(loc.lineIndex); + } - if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { - this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); - } + if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { + this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); + } - fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); - }, + fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); + }, - /** + /** * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles. */ - get2DCursorLocation: function(selectionStart, skipWrapping) { - if (typeof selectionStart === 'undefined') { - selectionStart = this.selectionStart; - } - var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, - len = lines.length; - for (var i = 0; i < len; i++) { - if (selectionStart <= lines[i].length) { - return { - lineIndex: i, - charIndex: selectionStart - }; - } - selectionStart -= lines[i].length + this.missingNewlineOffset(i); + get2DCursorLocation: function(selectionStart, skipWrapping) { + if (typeof selectionStart === 'undefined') { + selectionStart = this.selectionStart; + } + var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, + len = lines.length; + for (var i = 0; i < len; i++) { + if (selectionStart <= lines[i].length) { + return { + lineIndex: i, + charIndex: selectionStart + }; } - return { - lineIndex: i - 1, - charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart - }; - }, + selectionStart -= lines[i].length + this.missingNewlineOffset(i); + } + return { + lineIndex: i - 1, + charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart + }; + }, - /** + /** * Gets style of a current selection/cursor (at the start position) * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used. * @param {Number} [startIndex] Start index to get styles at @@ -192,35 +192,35 @@ * @param {Boolean} [complete] get full style or not * @return {Array} styles an array with one, zero or more Style objects */ - getSelectionStyles: function(startIndex, endIndex, complete) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - var styles = []; - for (var i = startIndex; i < endIndex; i++) { - styles.push(this.getStyleAtPosition(i, complete)); - } - return styles; - }, + getSelectionStyles: function(startIndex, endIndex, complete) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + var styles = []; + for (var i = startIndex; i < endIndex; i++) { + styles.push(this.getStyleAtPosition(i, complete)); + } + return styles; + }, - /** + /** * Gets style of a current selection/cursor position * @param {Number} position to get styles at * @param {Boolean} [complete] full style if true * @return {Object} style Style object at a specified index * @private */ - getStyleAtPosition: function(position, complete) { - var loc = this.get2DCursorLocation(position), - style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : - this._getStyleDeclaration(loc.lineIndex, loc.charIndex); - return style || {}; - }, + getStyleAtPosition: function(position, complete) { + var loc = this.get2DCursorLocation(position), + style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : + this._getStyleDeclaration(loc.lineIndex, loc.charIndex); + return style || {}; + }, - /** + /** * Sets style of a current selection, if no selection exist, do not set anything. * @param {Object} [styles] Styles object * @param {Number} [startIndex] Start index to get styles at @@ -228,95 +228,95 @@ * @return {fabric.IText} thisArg * @chainable */ - setSelectionStyles: function(styles, startIndex, endIndex) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - for (var i = startIndex; i < endIndex; i++) { - this._extendStyles(i, styles); - } - /* not included in _extendStyles to avoid clearing cache more than once */ - this._forceClearCache = true; - return this; - }, + setSelectionStyles: function(styles, startIndex, endIndex) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + for (var i = startIndex; i < endIndex; i++) { + this._extendStyles(i, styles); + } + /* not included in _extendStyles to avoid clearing cache more than once */ + this._forceClearCache = true; + return this; + }, - /** + /** * get the reference, not a clone, of the style object for a given character * @param {Number} lineIndex * @param {Number} charIndex * @return {Object} style object */ - _getStyleDeclaration: function(lineIndex, charIndex) { - var lineStyle = this.styles && this.styles[lineIndex]; - if (!lineStyle) { - return null; - } - return lineStyle[charIndex]; - }, + _getStyleDeclaration: function(lineIndex, charIndex) { + var lineStyle = this.styles && this.styles[lineIndex]; + if (!lineStyle) { + return null; + } + return lineStyle[charIndex]; + }, - /** + /** * return a new object that contains all the style property for a character * the object returned is newly created * @param {Number} lineIndex of the line where the character is * @param {Number} charIndex position of the character on the line * @return {Object} style object */ - getCompleteStyleDeclaration: function(lineIndex, charIndex) { - var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, - styleObject = { }, prop; - for (var i = 0; i < this._styleProperties.length; i++) { - prop = this._styleProperties[i]; - styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; - } - return styleObject; - }, + getCompleteStyleDeclaration: function(lineIndex, charIndex) { + var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, + styleObject = { }, prop; + for (var i = 0; i < this._styleProperties.length; i++) { + prop = this._styleProperties[i]; + styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; + } + return styleObject; + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @param {Object} style * @private */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - this.styles[lineIndex][charIndex] = style; - }, + _setStyleDeclaration: function(lineIndex, charIndex, style) { + this.styles[lineIndex][charIndex] = style; + }, - /** + /** * * @param {Number} lineIndex * @param {Number} charIndex * @private */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { - delete this.styles[lineIndex][charIndex]; - }, + _deleteStyleDeclaration: function(lineIndex, charIndex) { + delete this.styles[lineIndex][charIndex]; + }, - /** + /** * @param {Number} lineIndex * @return {Boolean} if the line exists or not * @private */ - _getLineStyle: function(lineIndex) { - return !!this.styles[lineIndex]; - }, + _getLineStyle: function(lineIndex) { + return !!this.styles[lineIndex]; + }, - /** + /** * Set the line style to an empty object so that is initialized * @param {Number} lineIndex * @private */ - _setLineStyle: function(lineIndex) { - this.styles[lineIndex] = {}; - }, + _setLineStyle: function(lineIndex) { + this.styles[lineIndex] = {}; + }, - /** + /** * @param {Number} lineIndex * @private */ - _deleteLineStyle: function(lineIndex) { - delete this.styles[lineIndex]; - } - }); + _deleteLineStyle: function(lineIndex) { + delete this.styles[lineIndex]; + } +}); diff --git a/src/parser.js b/src/parser.js index f725d58fc80..4597763cfba 100644 --- a/src/parser.js +++ b/src/parser.js @@ -1,195 +1,195 @@ - /** +/** * @name fabric * @namespace */ - var fabric = exports.fabric || (exports.fabric = { }), - toFixed = fabric.util.toFixed, - parseUnit = fabric.util.parseUnit, - multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, - - svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', - 'image', 'text'], - svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], - svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], - svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], - - attributesMap = { - cx: 'left', - x: 'left', - r: 'radius', - cy: 'top', - y: 'top', - display: 'visible', - visibility: 'visible', - transform: 'transformMatrix', - 'fill-opacity': 'fillOpacity', - 'fill-rule': 'fillRule', - 'font-family': 'fontFamily', - 'font-size': 'fontSize', - 'font-style': 'fontStyle', - 'font-weight': 'fontWeight', - 'letter-spacing': 'charSpacing', - 'paint-order': 'paintFirst', - 'stroke-dasharray': 'strokeDashArray', - 'stroke-dashoffset': 'strokeDashOffset', - 'stroke-linecap': 'strokeLineCap', - 'stroke-linejoin': 'strokeLineJoin', - 'stroke-miterlimit': 'strokeMiterLimit', - 'stroke-opacity': 'strokeOpacity', - 'stroke-width': 'strokeWidth', - 'text-decoration': 'textDecoration', - 'text-anchor': 'textAnchor', - opacity: 'opacity', - 'clip-path': 'clipPath', - 'clip-rule': 'clipRule', - 'vector-effect': 'strokeUniform', - 'image-rendering': 'imageSmoothing', - }, - - colorAttributes = { - stroke: 'strokeOpacity', - fill: 'fillOpacity' - }, - - fSize = 'font-size', cPath = 'clip-path'; - - fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); - fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); - fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); - fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); - - fabric.cssRules = { }; - fabric.gradientDefs = { }; - fabric.clipPaths = { }; - - function normalizeAttr(attr) { - // transform attribute names - if (attr in attributesMap) { - return attributesMap[attr]; - } - return attr; +var fabric = exports.fabric || (exports.fabric = { }), + toFixed = fabric.util.toFixed, + parseUnit = fabric.util.parseUnit, + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + + svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', + 'image', 'text'], + svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], + svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], + svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], + + attributesMap = { + cx: 'left', + x: 'left', + r: 'radius', + cy: 'top', + y: 'top', + display: 'visible', + visibility: 'visible', + transform: 'transformMatrix', + 'fill-opacity': 'fillOpacity', + 'fill-rule': 'fillRule', + 'font-family': 'fontFamily', + 'font-size': 'fontSize', + 'font-style': 'fontStyle', + 'font-weight': 'fontWeight', + 'letter-spacing': 'charSpacing', + 'paint-order': 'paintFirst', + 'stroke-dasharray': 'strokeDashArray', + 'stroke-dashoffset': 'strokeDashOffset', + 'stroke-linecap': 'strokeLineCap', + 'stroke-linejoin': 'strokeLineJoin', + 'stroke-miterlimit': 'strokeMiterLimit', + 'stroke-opacity': 'strokeOpacity', + 'stroke-width': 'strokeWidth', + 'text-decoration': 'textDecoration', + 'text-anchor': 'textAnchor', + opacity: 'opacity', + 'clip-path': 'clipPath', + 'clip-rule': 'clipRule', + 'vector-effect': 'strokeUniform', + 'image-rendering': 'imageSmoothing', + }, + + colorAttributes = { + stroke: 'strokeOpacity', + fill: 'fillOpacity' + }, + + fSize = 'font-size', cPath = 'clip-path'; + +fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); +fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); +fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); +fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); + +fabric.cssRules = { }; +fabric.gradientDefs = { }; +fabric.clipPaths = { }; + +function normalizeAttr(attr) { + // transform attribute names + if (attr in attributesMap) { + return attributesMap[attr]; } + return attr; +} - function normalizeValue(attr, value, parentAttributes, fontSize) { - var isArray = Array.isArray(value), parsed; +function normalizeValue(attr, value, parentAttributes, fontSize) { + var isArray = Array.isArray(value), parsed; - if ((attr === 'fill' || attr === 'stroke') && value === 'none') { - value = ''; - } - else if (attr === 'strokeUniform') { - return (value === 'non-scaling-stroke'); - } - else if (attr === 'strokeDashArray') { - if (value === 'none') { - value = null; - } - else { - value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); - } - } - else if (attr === 'transformMatrix') { - if (parentAttributes && parentAttributes.transformMatrix) { - value = multiplyTransformMatrices( - parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); - } - else { - value = fabric.parseTransformAttribute(value); - } - } - else if (attr === 'visible') { - value = value !== 'none' && value !== 'hidden'; - // display=none on parent element always takes precedence over child element - if (parentAttributes && parentAttributes.visible === false) { - value = false; - } + if ((attr === 'fill' || attr === 'stroke') && value === 'none') { + value = ''; + } + else if (attr === 'strokeUniform') { + return (value === 'non-scaling-stroke'); + } + else if (attr === 'strokeDashArray') { + if (value === 'none') { + value = null; } - else if (attr === 'opacity') { - value = parseFloat(value); - if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { - value *= parentAttributes.opacity; - } + else { + value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); } - else if (attr === 'textAnchor' /* text-anchor */) { - value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; + } + else if (attr === 'transformMatrix') { + if (parentAttributes && parentAttributes.transformMatrix) { + value = multiplyTransformMatrices( + parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); } - else if (attr === 'charSpacing') { - // parseUnit returns px and we convert it to em - parsed = parseUnit(value, fontSize) / fontSize * 1000; + else { + value = fabric.parseTransformAttribute(value); } - else if (attr === 'paintFirst') { - var fillIndex = value.indexOf('fill'); - var strokeIndex = value.indexOf('stroke'); - var value = 'fill'; - if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { - value = 'stroke'; - } - else if (fillIndex === -1 && strokeIndex > -1) { - value = 'stroke'; - } + } + else if (attr === 'visible') { + value = value !== 'none' && value !== 'hidden'; + // display=none on parent element always takes precedence over child element + if (parentAttributes && parentAttributes.visible === false) { + value = false; } - else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { - return value; + } + else if (attr === 'opacity') { + value = parseFloat(value); + if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { + value *= parentAttributes.opacity; } - else if (attr === 'imageSmoothing') { - return (value === 'optimizeQuality'); + } + else if (attr === 'textAnchor' /* text-anchor */) { + value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; + } + else if (attr === 'charSpacing') { + // parseUnit returns px and we convert it to em + parsed = parseUnit(value, fontSize) / fontSize * 1000; + } + else if (attr === 'paintFirst') { + var fillIndex = value.indexOf('fill'); + var strokeIndex = value.indexOf('stroke'); + var value = 'fill'; + if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { + value = 'stroke'; } - else { - parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); + else if (fillIndex === -1 && strokeIndex > -1) { + value = 'stroke'; } - - return (!isArray && isNaN(parsed) ? value : parsed); + } + else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { + return value; + } + else if (attr === 'imageSmoothing') { + return (value === 'optimizeQuality'); + } + else { + parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); } - /** + return (!isArray && isNaN(parsed) ? value : parsed); +} + +/** * @private */ - function getSvgRegex(arr) { - return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); - } +function getSvgRegex(arr) { + return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); +} - /** +/** * @private * @param {Object} attributes Array of attributes to parse */ - function _setStrokeFillOpacity(attributes) { - for (var attr in colorAttributes) { - - if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { - continue; - } +function _setStrokeFillOpacity(attributes) { + for (var attr in colorAttributes) { - if (typeof attributes[attr] === 'undefined') { - if (!fabric.Object.prototype[attr]) { - continue; - } - attributes[attr] = fabric.Object.prototype[attr]; - } + if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { + continue; + } - if (attributes[attr].indexOf('url(') === 0) { + if (typeof attributes[attr] === 'undefined') { + if (!fabric.Object.prototype[attr]) { continue; } + attributes[attr] = fabric.Object.prototype[attr]; + } - var color = new fabric.Color(attributes[attr]); - attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); + if (attributes[attr].indexOf('url(') === 0) { + continue; } - return attributes; + + var color = new fabric.Color(attributes[attr]); + attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); } + return attributes; +} - /** +/** * @private */ - function _getMultipleNodes(doc, nodeNames) { - var nodeName, nodeArray = [], nodeList, i, len; - for (i = 0, len = nodeNames.length; i < len; i++) { - nodeName = nodeNames[i]; - nodeList = doc.getElementsByTagName(nodeName); - nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); - } - return nodeArray; +function _getMultipleNodes(doc, nodeNames) { + var nodeName, nodeArray = [], nodeList, i, len; + for (i = 0, len = nodeNames.length; i < len; i++) { + nodeName = nodeNames[i]; + nodeList = doc.getElementsByTagName(nodeName); + nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); } + return nodeArray; +} - /** +/** * Parses "transform" attribute, returning an array of values * @static * @function @@ -197,65 +197,65 @@ * @param {String} attributeValue String containing attribute value * @return {Array} Array of 6 elements representing transformation matrix */ - fabric.parseTransformAttribute = (function() { - function rotateMatrix(matrix, args) { - var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), - x = 0, y = 0; - if (args.length === 3) { - x = args[1]; - y = args[2]; - } - - matrix[0] = cos; - matrix[1] = sin; - matrix[2] = -sin; - matrix[3] = cos; - matrix[4] = x - (cos * x - sin * y); - matrix[5] = y - (sin * x + cos * y); +fabric.parseTransformAttribute = (function() { + function rotateMatrix(matrix, args) { + var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), + x = 0, y = 0; + if (args.length === 3) { + x = args[1]; + y = args[2]; } - function scaleMatrix(matrix, args) { - var multiplierX = args[0], - multiplierY = (args.length === 2) ? args[1] : args[0]; + matrix[0] = cos; + matrix[1] = sin; + matrix[2] = -sin; + matrix[3] = cos; + matrix[4] = x - (cos * x - sin * y); + matrix[5] = y - (sin * x + cos * y); + } + + function scaleMatrix(matrix, args) { + var multiplierX = args[0], + multiplierY = (args.length === 2) ? args[1] : args[0]; - matrix[0] = multiplierX; - matrix[3] = multiplierY; - } + matrix[0] = multiplierX; + matrix[3] = multiplierY; + } - function skewMatrix(matrix, args, pos) { - matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); - } + function skewMatrix(matrix, args, pos) { + matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); + } - function translateMatrix(matrix, args) { - matrix[4] = args[0]; - if (args.length === 2) { - matrix[5] = args[1]; - } + function translateMatrix(matrix, args) { + matrix[4] = args[0]; + if (args.length === 2) { + matrix[5] = args[1]; } + } - // identity matrix - var iMatrix = fabric.iMatrix, + // identity matrix + var iMatrix = fabric.iMatrix, - // == begin transform regexp - number = fabric.reNum, + // == begin transform regexp + number = fabric.reNum, - commaWsp = fabric.commaWsp, + commaWsp = fabric.commaWsp, - skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', + skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', - skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', + skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', - rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + + rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + '))?\\s*\\))', - scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + + scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\s*\\))', - translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + + translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\s*\\))', - matrix = '(?:(matrix)\\s*\\(\\s*' + + matrix = '(?:(matrix)\\s*\\(\\s*' + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + @@ -264,7 +264,7 @@ '(' + number + ')' + '\\s*\\))', - transform = '(?:' + + transform = '(?:' + matrix + '|' + translate + '|' + scale + '|' + @@ -273,405 +273,405 @@ skewY + ')', - transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', + transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', - transformList = '^\\s*(?:' + transforms + '?)\\s*$', + transformList = '^\\s*(?:' + transforms + '?)\\s*$', - // http://www.w3.org/TR/SVG/coords.html#TransformAttribute - reTransformList = new RegExp(transformList), - // == end transform regexp + // http://www.w3.org/TR/SVG/coords.html#TransformAttribute + reTransformList = new RegExp(transformList), + // == end transform regexp - reTransform = new RegExp(transform, 'g'); + reTransform = new RegExp(transform, 'g'); - return function(attributeValue) { + return function(attributeValue) { - // start with identity matrix - var matrix = iMatrix.concat(), - matrices = []; + // start with identity matrix + var matrix = iMatrix.concat(), + matrices = []; - // return if no argument was given or - // an argument does not match transform attribute regexp - if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { - return matrix; - } + // return if no argument was given or + // an argument does not match transform attribute regexp + if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { + return matrix; + } - attributeValue.replace(reTransform, function(match) { - - var m = new RegExp(transform).exec(match).filter(function (match) { - // match !== '' && match != null - return (!!match); - }), - operation = m[1], - args = m.slice(2).map(parseFloat); - - switch (operation) { - case 'translate': - translateMatrix(matrix, args); - break; - case 'rotate': - args[0] = fabric.util.degreesToRadians(args[0]); - rotateMatrix(matrix, args); - break; - case 'scale': - scaleMatrix(matrix, args); - break; - case 'skewX': - skewMatrix(matrix, args, 2); - break; - case 'skewY': - skewMatrix(matrix, args, 1); - break; - case 'matrix': - matrix = args; - break; - } + attributeValue.replace(reTransform, function(match) { + + var m = new RegExp(transform).exec(match).filter(function (match) { + // match !== '' && match != null + return (!!match); + }), + operation = m[1], + args = m.slice(2).map(parseFloat); + + switch (operation) { + case 'translate': + translateMatrix(matrix, args); + break; + case 'rotate': + args[0] = fabric.util.degreesToRadians(args[0]); + rotateMatrix(matrix, args); + break; + case 'scale': + scaleMatrix(matrix, args); + break; + case 'skewX': + skewMatrix(matrix, args, 2); + break; + case 'skewY': + skewMatrix(matrix, args, 1); + break; + case 'matrix': + matrix = args; + break; + } - // snapshot current matrix into matrices array - matrices.push(matrix.concat()); - // reset - matrix = iMatrix.concat(); - }); + // snapshot current matrix into matrices array + matrices.push(matrix.concat()); + // reset + matrix = iMatrix.concat(); + }); - var combinedMatrix = matrices[0]; - while (matrices.length > 1) { - matrices.shift(); - combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); - } - return combinedMatrix; - }; - })(); + var combinedMatrix = matrices[0]; + while (matrices.length > 1) { + matrices.shift(); + combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); + } + return combinedMatrix; + }; +})(); - /** +/** * @private */ - function parseStyleString(style, oStyle) { - var attr, value; - style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { - var pair = chunk.split(':'); +function parseStyleString(style, oStyle) { + var attr, value; + style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { + var pair = chunk.split(':'); - attr = pair[0].trim().toLowerCase(); - value = pair[1].trim(); + attr = pair[0].trim().toLowerCase(); + value = pair[1].trim(); - oStyle[attr] = value; - }); - } + oStyle[attr] = value; + }); +} - /** +/** * @private */ - function parseStyleObject(style, oStyle) { - var attr, value; - for (var prop in style) { - if (typeof style[prop] === 'undefined') { - continue; - } +function parseStyleObject(style, oStyle) { + var attr, value; + for (var prop in style) { + if (typeof style[prop] === 'undefined') { + continue; + } - attr = prop.toLowerCase(); - value = style[prop]; + attr = prop.toLowerCase(); + value = style[prop]; - oStyle[attr] = value; - } + oStyle[attr] = value; } +} - /** +/** * @private */ - function getGlobalStylesForElement(element, svgUid) { - var styles = { }; - for (var rule in fabric.cssRules[svgUid]) { - if (elementMatchesRule(element, rule.split(' '))) { - for (var property in fabric.cssRules[svgUid][rule]) { - styles[property] = fabric.cssRules[svgUid][rule][property]; - } +function getGlobalStylesForElement(element, svgUid) { + var styles = { }; + for (var rule in fabric.cssRules[svgUid]) { + if (elementMatchesRule(element, rule.split(' '))) { + for (var property in fabric.cssRules[svgUid][rule]) { + styles[property] = fabric.cssRules[svgUid][rule][property]; } } - return styles; } + return styles; +} - /** +/** * @private */ - function elementMatchesRule(element, selectors) { - var firstMatching, parentMatching = true; - //start from rightmost selector. - firstMatching = selectorMatches(element, selectors.pop()); - if (firstMatching && selectors.length) { - parentMatching = doesSomeParentMatch(element, selectors); - } - return firstMatching && parentMatching && (selectors.length === 0); +function elementMatchesRule(element, selectors) { + var firstMatching, parentMatching = true; + //start from rightmost selector. + firstMatching = selectorMatches(element, selectors.pop()); + if (firstMatching && selectors.length) { + parentMatching = doesSomeParentMatch(element, selectors); } - - function doesSomeParentMatch(element, selectors) { - var selector, parentMatching = true; - while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { - if (parentMatching) { - selector = selectors.pop(); - } - element = element.parentNode; - parentMatching = selectorMatches(element, selector); + return firstMatching && parentMatching && (selectors.length === 0); +} + +function doesSomeParentMatch(element, selectors) { + var selector, parentMatching = true; + while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { + if (parentMatching) { + selector = selectors.pop(); } - return selectors.length === 0; + element = element.parentNode; + parentMatching = selectorMatches(element, selector); } + return selectors.length === 0; +} - /** +/** * @private */ - function selectorMatches(element, selector) { - var nodeName = element.nodeName, - classNames = element.getAttribute('class'), - id = element.getAttribute('id'), matcher, i; - // i check if a selector matches slicing away part from it. - // if i get empty string i should match - matcher = new RegExp('^' + nodeName, 'i'); +function selectorMatches(element, selector) { + var nodeName = element.nodeName, + classNames = element.getAttribute('class'), + id = element.getAttribute('id'), matcher, i; + // i check if a selector matches slicing away part from it. + // if i get empty string i should match + matcher = new RegExp('^' + nodeName, 'i'); + selector = selector.replace(matcher, ''); + if (id && selector.length) { + matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); selector = selector.replace(matcher, ''); - if (id && selector.length) { - matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); + } + if (classNames && selector.length) { + classNames = classNames.split(' '); + for (i = classNames.length; i--;) { + matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); selector = selector.replace(matcher, ''); } - if (classNames && selector.length) { - classNames = classNames.split(' '); - for (i = classNames.length; i--;) { - matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); - selector = selector.replace(matcher, ''); - } - } - return selector.length === 0; } + return selector.length === 0; +} - /** +/** * @private * to support IE8 missing getElementById on SVGdocument and on node xmlDOM */ - function elementById(doc, id) { - var el; - doc.getElementById && (el = doc.getElementById(id)); - if (el) { - return el; - } - var node, i, len, nodelist = doc.getElementsByTagName('*'); - for (i = 0, len = nodelist.length; i < len; i++) { - node = nodelist[i]; - if (id === node.getAttribute('id')) { - return node; - } +function elementById(doc, id) { + var el; + doc.getElementById && (el = doc.getElementById(id)); + if (el) { + return el; + } + var node, i, len, nodelist = doc.getElementsByTagName('*'); + for (i = 0, len = nodelist.length; i < len; i++) { + node = nodelist[i]; + if (id === node.getAttribute('id')) { + return node; } } +} - /** +/** * @private */ - function parseUseDirectives(doc) { - var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; - while (nodelist.length && i < nodelist.length) { - var el = nodelist[i], - xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); - - if (xlinkAttribute === null) { - return; - } +function parseUseDirectives(doc) { + var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; + while (nodelist.length && i < nodelist.length) { + var el = nodelist[i], + xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); - var xlink = xlinkAttribute.slice(1), - x = el.getAttribute('x') || 0, - y = el.getAttribute('y') || 0, - el2 = elementById(doc, xlink).cloneNode(true), - currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', - parentNode, - oldLength = nodelist.length, attr, - j, - attrs, - len, - namespace = fabric.svgNS; - - applyViewboxTransform(el2); - if (/^svg$/i.test(el2.nodeName)) { - var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); - for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { - attr = attrs.item(j); - el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); - } - // el2.firstChild != null - while (el2.firstChild) { - el3.appendChild(el2.firstChild); - } - el2 = el3; - } + if (xlinkAttribute === null) { + return; + } - for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { + var xlink = xlinkAttribute.slice(1), + x = el.getAttribute('x') || 0, + y = el.getAttribute('y') || 0, + el2 = elementById(doc, xlink).cloneNode(true), + currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', + parentNode, + oldLength = nodelist.length, attr, + j, + attrs, + len, + namespace = fabric.svgNS; + + applyViewboxTransform(el2); + if (/^svg$/i.test(el2.nodeName)) { + var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); + for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { attr = attrs.item(j); - if (attr.nodeName === 'x' || attr.nodeName === 'y' || - attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { - continue; - } + el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); + } + // el2.firstChild != null + while (el2.firstChild) { + el3.appendChild(el2.firstChild); + } + el2 = el3; + } - if (attr.nodeName === 'transform') { - currentTrans = attr.nodeValue + ' ' + currentTrans; - } - else { - el2.setAttribute(attr.nodeName, attr.nodeValue); - } + for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + if (attr.nodeName === 'x' || attr.nodeName === 'y' || + attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { + continue; } - el2.setAttribute('transform', currentTrans); - el2.setAttribute('instantiated_by_use', '1'); - el2.removeAttribute('id'); - parentNode = el.parentNode; - parentNode.replaceChild(el2, el); - // some browsers do not shorten nodelist after replaceChild (IE8) - if (nodelist.length === oldLength) { - i++; + if (attr.nodeName === 'transform') { + currentTrans = attr.nodeValue + ' ' + currentTrans; } + else { + el2.setAttribute(attr.nodeName, attr.nodeValue); + } + } + + el2.setAttribute('transform', currentTrans); + el2.setAttribute('instantiated_by_use', '1'); + el2.removeAttribute('id'); + parentNode = el.parentNode; + parentNode.replaceChild(el2, el); + // some browsers do not shorten nodelist after replaceChild (IE8) + if (nodelist.length === oldLength) { + i++; } } +} - // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute - // matches, e.g.: +14.56e-12, etc. - var reViewBoxAttrValue = new RegExp( - '^' + +// http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute +// matches, e.g.: +14.56e-12, etc. +var reViewBoxAttrValue = new RegExp( + '^' + '\\s*(' + fabric.reNum + '+)\\s*,?' + '\\s*(' + fabric.reNum + '+)\\s*,?' + '\\s*(' + fabric.reNum + '+)\\s*,?' + '\\s*(' + fabric.reNum + '+)\\s*' + '$' - ); +); - /** +/** * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements */ - function applyViewboxTransform(element) { - if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { - return {}; - } - var viewBoxAttr = element.getAttribute('viewBox'), - scaleX = 1, - scaleY = 1, - minX = 0, - minY = 0, - viewBoxWidth, viewBoxHeight, matrix, el, - widthAttr = element.getAttribute('width'), - heightAttr = element.getAttribute('height'), - x = element.getAttribute('x') || 0, - y = element.getAttribute('y') || 0, - preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', - missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), - missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), - toBeParsed = missingViewBox && missingDimAttr, - parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; - - parsedDim.width = 0; - parsedDim.height = 0; - parsedDim.toBeParsed = toBeParsed; - - if (missingViewBox) { - if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; - matrix = (element.getAttribute('transform') || '') + translateMatrix; - element.setAttribute('transform', matrix); - element.removeAttribute('x'); - element.removeAttribute('y'); - } +function applyViewboxTransform(element) { + if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { + return {}; + } + var viewBoxAttr = element.getAttribute('viewBox'), + scaleX = 1, + scaleY = 1, + minX = 0, + minY = 0, + viewBoxWidth, viewBoxHeight, matrix, el, + widthAttr = element.getAttribute('width'), + heightAttr = element.getAttribute('height'), + x = element.getAttribute('x') || 0, + y = element.getAttribute('y') || 0, + preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', + missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), + missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), + toBeParsed = missingViewBox && missingDimAttr, + parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; + + parsedDim.width = 0; + parsedDim.height = 0; + parsedDim.toBeParsed = toBeParsed; + + if (missingViewBox) { + if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + matrix = (element.getAttribute('transform') || '') + translateMatrix; + element.setAttribute('transform', matrix); + element.removeAttribute('x'); + element.removeAttribute('y'); } + } - if (toBeParsed) { - return parsedDim; - } + if (toBeParsed) { + return parsedDim; + } - if (missingViewBox) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - // set a transform for elements that have x y and are inner(only) SVGs - return parsedDim; + if (missingViewBox) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + // set a transform for elements that have x y and are inner(only) SVGs + return parsedDim; + } + minX = -parseFloat(viewBoxAttr[1]); + minY = -parseFloat(viewBoxAttr[2]); + viewBoxWidth = parseFloat(viewBoxAttr[3]); + viewBoxHeight = parseFloat(viewBoxAttr[4]); + parsedDim.minX = minX; + parsedDim.minY = minY; + parsedDim.viewBoxWidth = viewBoxWidth; + parsedDim.viewBoxHeight = viewBoxHeight; + if (!missingDimAttr) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + scaleX = parsedDim.width / viewBoxWidth; + scaleY = parsedDim.height / viewBoxHeight; + } + else { + parsedDim.width = viewBoxWidth; + parsedDim.height = viewBoxHeight; + } + + // default is to preserve aspect ratio + preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); + if (preserveAspectRatio.alignX !== 'none') { + //translate all container for the effect of Mid, Min, Max + if (preserveAspectRatio.meetOrSlice === 'meet') { + scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); + // calculate additional translation to move the viewbox } - minX = -parseFloat(viewBoxAttr[1]); - minY = -parseFloat(viewBoxAttr[2]); - viewBoxWidth = parseFloat(viewBoxAttr[3]); - viewBoxHeight = parseFloat(viewBoxAttr[4]); - parsedDim.minX = minX; - parsedDim.minY = minY; - parsedDim.viewBoxWidth = viewBoxWidth; - parsedDim.viewBoxHeight = viewBoxHeight; - if (!missingDimAttr) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - scaleX = parsedDim.width / viewBoxWidth; - scaleY = parsedDim.height / viewBoxHeight; + if (preserveAspectRatio.meetOrSlice === 'slice') { + scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); + // calculate additional translation to move the viewbox } - else { - parsedDim.width = viewBoxWidth; - parsedDim.height = viewBoxHeight; + widthDiff = parsedDim.width - viewBoxWidth * scaleX; + heightDiff = parsedDim.height - viewBoxHeight * scaleX; + if (preserveAspectRatio.alignX === 'Mid') { + widthDiff /= 2; } - - // default is to preserve aspect ratio - preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); - if (preserveAspectRatio.alignX !== 'none') { - //translate all container for the effect of Mid, Min, Max - if (preserveAspectRatio.meetOrSlice === 'meet') { - scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); - // calculate additional translation to move the viewbox - } - if (preserveAspectRatio.meetOrSlice === 'slice') { - scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); - // calculate additional translation to move the viewbox - } - widthDiff = parsedDim.width - viewBoxWidth * scaleX; - heightDiff = parsedDim.height - viewBoxHeight * scaleX; - if (preserveAspectRatio.alignX === 'Mid') { - widthDiff /= 2; - } - if (preserveAspectRatio.alignY === 'Mid') { - heightDiff /= 2; - } - if (preserveAspectRatio.alignX === 'Min') { - widthDiff = 0; - } - if (preserveAspectRatio.alignY === 'Min') { - heightDiff = 0; - } + if (preserveAspectRatio.alignY === 'Mid') { + heightDiff /= 2; } - - if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { - return parsedDim; + if (preserveAspectRatio.alignX === 'Min') { + widthDiff = 0; } - if ((x || y) && element.parentNode.nodeName !== '#document') { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + if (preserveAspectRatio.alignY === 'Min') { + heightDiff = 0; } + } + + if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { + return parsedDim; + } + if ((x || y) && element.parentNode.nodeName !== '#document') { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + } - matrix = translateMatrix + ' matrix(' + scaleX + + matrix = translateMatrix + ' matrix(' + scaleX + ' 0' + ' 0 ' + scaleY + ' ' + (minX * scaleX + widthDiff) + ' ' + (minY * scaleY + heightDiff) + ') '; - // seems unused. - // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); - if (element.nodeName === 'svg') { - el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); - // element.firstChild != null - while (element.firstChild) { - el.appendChild(element.firstChild); - } - element.appendChild(el); - } - else { - el = element; - el.removeAttribute('x'); - el.removeAttribute('y'); - matrix = el.getAttribute('transform') + matrix; + // seems unused. + // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); + if (element.nodeName === 'svg') { + el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); + // element.firstChild != null + while (element.firstChild) { + el.appendChild(element.firstChild); } - el.setAttribute('transform', matrix); - return parsedDim; + element.appendChild(el); + } + else { + el = element; + el.removeAttribute('x'); + el.removeAttribute('y'); + matrix = el.getAttribute('transform') + matrix; } + el.setAttribute('transform', matrix); + return parsedDim; +} - function hasAncestorWithNodeName(element, nodeName) { - while (element && (element = element.parentNode)) { - if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) +function hasAncestorWithNodeName(element, nodeName) { + while (element && (element = element.parentNode)) { + if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) && !element.getAttribute('instantiated_by_use')) { - return true; - } + return true; } - return false; } + return false; +} - /** +/** * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback * @static * @function @@ -683,92 +683,92 @@ * @param {Object} [parsingOptions] options for parsing document * @param {String} [parsingOptions.crossOrigin] crossOrigin settings */ - fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { - if (!doc) { - return; - } +fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { + if (!doc) { + return; + } - parseUseDirectives(doc); - - var svgUid = fabric.Object.__uid++, i, len, - options = applyViewboxTransform(doc), - descendants = fabric.util.toArray(doc.getElementsByTagName('*')); - options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; - options.svgUid = svgUid; - - if (descendants.length === 0 && fabric.isLikelyNode) { - // we're likely in node, where "o3-xml" library fails to gEBTN("*") - // https://github.com/ajaxorg/node-o3-xml/issues/21 - descendants = doc.selectNodes('//*[name(.)!="svg"]'); - var arr = []; - for (i = 0, len = descendants.length; i < len; i++) { - arr[i] = descendants[i]; - } - descendants = arr; + parseUseDirectives(doc); + + var svgUid = fabric.Object.__uid++, i, len, + options = applyViewboxTransform(doc), + descendants = fabric.util.toArray(doc.getElementsByTagName('*')); + options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; + options.svgUid = svgUid; + + if (descendants.length === 0 && fabric.isLikelyNode) { + // we're likely in node, where "o3-xml" library fails to gEBTN("*") + // https://github.com/ajaxorg/node-o3-xml/issues/21 + descendants = doc.selectNodes('//*[name(.)!="svg"]'); + var arr = []; + for (i = 0, len = descendants.length; i < len; i++) { + arr[i] = descendants[i]; } + descendants = arr; + } - var elements = descendants.filter(function(el) { - applyViewboxTransform(el); - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && + var elements = descendants.filter(function(el) { + applyViewboxTransform(el); + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement + }); + if (!elements || (elements && !elements.length)) { + callback && callback([], {}); + return; + } + var clipPaths = { }; + descendants.filter(function(el) { + return el.nodeName.replace('svg:', '') === 'clipPath'; + }).forEach(function(el) { + var id = el.getAttribute('id'); + clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); }); - if (!elements || (elements && !elements.length)) { - callback && callback([], {}); - return; + }); + fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); + fabric.cssRules[svgUid] = fabric.getCSSRules(doc); + fabric.clipPaths[svgUid] = clipPaths; + // Precedence of rules: style > class > attribute + fabric.parseElements(elements, function(instances, elements) { + if (callback) { + callback(instances, options, elements, descendants); + delete fabric.gradientDefs[svgUid]; + delete fabric.cssRules[svgUid]; + delete fabric.clipPaths[svgUid]; } - var clipPaths = { }; - descendants.filter(function(el) { - return el.nodeName.replace('svg:', '') === 'clipPath'; - }).forEach(function(el) { - var id = el.getAttribute('id'); - clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); - }); - }); - fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); - fabric.cssRules[svgUid] = fabric.getCSSRules(doc); - fabric.clipPaths[svgUid] = clipPaths; - // Precedence of rules: style > class > attribute - fabric.parseElements(elements, function(instances, elements) { - if (callback) { - callback(instances, options, elements, descendants); - delete fabric.gradientDefs[svgUid]; - delete fabric.cssRules[svgUid]; - delete fabric.clipPaths[svgUid]; - } - }, Object.assign({}, options), reviver, parsingOptions); - }; - - function recursivelyParseGradientsXlink(doc, gradient) { - var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], - xlinkAttr = 'xlink:href', - xLink = gradient.getAttribute(xlinkAttr).slice(1), - referencedGradient = elementById(doc, xLink); - if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { - recursivelyParseGradientsXlink(doc, referencedGradient); + }, Object.assign({}, options), reviver, parsingOptions); +}; + +function recursivelyParseGradientsXlink(doc, gradient) { + var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], + xlinkAttr = 'xlink:href', + xLink = gradient.getAttribute(xlinkAttr).slice(1), + referencedGradient = elementById(doc, xLink); + if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { + recursivelyParseGradientsXlink(doc, referencedGradient); + } + gradientsAttrs.forEach(function(attr) { + if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { + gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); } - gradientsAttrs.forEach(function(attr) { - if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { - gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); - } - }); - if (!gradient.children.length) { - var referenceClone = referencedGradient.cloneNode(true); - while (referenceClone.firstChild) { - gradient.appendChild(referenceClone.firstChild); - } + }); + if (!gradient.children.length) { + var referenceClone = referencedGradient.cloneNode(true); + while (referenceClone.firstChild) { + gradient.appendChild(referenceClone.firstChild); } - gradient.removeAttribute(xlinkAttr); } + gradient.removeAttribute(xlinkAttr); +} - var reFontDeclaration = new RegExp( - '(normal|italic)?\\s*(normal|small-caps)?\\s*' + +var reFontDeclaration = new RegExp( + '(normal|italic)?\\s*(normal|small-caps)?\\s*' + '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + fabric.reNum + '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)'); - fabric.util.object.extend(fabric, { - /** +fabric.util.object.extend(fabric, { + /** * Parses a short font declaration, building adding its properties to a style object * @static * @function @@ -776,38 +776,38 @@ * @param {String} value font declaration * @param {Object} oStyle definition */ - parseFontDeclaration: function(value, oStyle) { - var match = value.match(reFontDeclaration); + parseFontDeclaration: function(value, oStyle) { + var match = value.match(reFontDeclaration); - if (!match) { - return; - } - var fontStyle = match[1], - // font variant is not used - // fontVariant = match[2], - fontWeight = match[3], - fontSize = match[4], - lineHeight = match[5], - fontFamily = match[6]; - - if (fontStyle) { - oStyle.fontStyle = fontStyle; - } - if (fontWeight) { - oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); - } - if (fontSize) { - oStyle.fontSize = parseUnit(fontSize); - } - if (fontFamily) { - oStyle.fontFamily = fontFamily; - } - if (lineHeight) { - oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; - } - }, + if (!match) { + return; + } + var fontStyle = match[1], + // font variant is not used + // fontVariant = match[2], + fontWeight = match[3], + fontSize = match[4], + lineHeight = match[5], + fontFamily = match[6]; + + if (fontStyle) { + oStyle.fontStyle = fontStyle; + } + if (fontWeight) { + oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); + } + if (fontSize) { + oStyle.fontSize = parseUnit(fontSize); + } + if (fontFamily) { + oStyle.fontFamily = fontFamily; + } + if (lineHeight) { + oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; + } + }, - /** + /** * Parses an SVG document, returning all of the gradient declarations found in it * @static * @function @@ -815,26 +815,26 @@ * @param {SVGDocument} doc SVG document to parse * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element */ - getGradientDefs: function(doc) { - var tagArray = [ - 'linearGradient', - 'radialGradient', - 'svg:linearGradient', - 'svg:radialGradient'], - elList = _getMultipleNodes(doc, tagArray), - el, j = 0, gradientDefs = { }; - j = elList.length; - while (j--) { - el = elList[j]; - if (el.getAttribute('xlink:href')) { - recursivelyParseGradientsXlink(doc, el); - } - gradientDefs[el.getAttribute('id')] = el; + getGradientDefs: function(doc) { + var tagArray = [ + 'linearGradient', + 'radialGradient', + 'svg:linearGradient', + 'svg:radialGradient'], + elList = _getMultipleNodes(doc, tagArray), + el, j = 0, gradientDefs = { }; + j = elList.length; + while (j--) { + el = elList[j]; + if (el.getAttribute('xlink:href')) { + recursivelyParseGradientsXlink(doc, el); } - return gradientDefs; - }, + gradientDefs[el.getAttribute('id')] = el; + } + return gradientDefs; + }, - /** + /** * Returns an object of attributes' name/value, given element and an array of attribute names; * Parses parent "g" nodes recursively upwards. * @static @@ -843,64 +843,64 @@ * @param {Array} attributes Array of attributes to parse * @return {Object} object containing parsed attributes' names/values */ - parseAttributes: function(element, attributes, svgUid) { + parseAttributes: function(element, attributes, svgUid) { - if (!element) { - return; - } + if (!element) { + return; + } - var value, - parentAttributes = { }, - fontSize, parentFontSize; + var value, + parentAttributes = { }, + fontSize, parentFontSize; - if (typeof svgUid === 'undefined') { - svgUid = element.getAttribute('svgUid'); - } - // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards - if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { - parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); - } + if (typeof svgUid === 'undefined') { + svgUid = element.getAttribute('svgUid'); + } + // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards + if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { + parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); + } - var ownAttributes = attributes.reduce(function(memo, attr) { - value = element.getAttribute(attr); + var ownAttributes = attributes.reduce(function(memo, attr) { + value = element.getAttribute(attr); if (value) { // eslint-disable-line - memo[attr] = value; - } - return memo; - }, { }); - // add values parsed from style, which take precedence over attributes - // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) - var cssAttrs = Object.assign( - getGlobalStylesForElement(element, svgUid), - fabric.parseStyleAttribute(element) - ); - ownAttributes = Object.assign( - ownAttributes, - cssAttrs - ); - if (cssAttrs[cPath]) { - element.setAttribute(cPath, cssAttrs[cPath]); - } - fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; - if (ownAttributes[fSize]) { - // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. - ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); + memo[attr] = value; } + return memo; + }, { }); + // add values parsed from style, which take precedence over attributes + // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) + var cssAttrs = Object.assign( + getGlobalStylesForElement(element, svgUid), + fabric.parseStyleAttribute(element) + ); + ownAttributes = Object.assign( + ownAttributes, + cssAttrs + ); + if (cssAttrs[cPath]) { + element.setAttribute(cPath, cssAttrs[cPath]); + } + fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; + if (ownAttributes[fSize]) { + // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. + ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); + } - var normalizedAttr, normalizedValue, normalizedStyle = {}; - for (var attr in ownAttributes) { - normalizedAttr = normalizeAttr(attr); - normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); - normalizedStyle[normalizedAttr] = normalizedValue; - } - if (normalizedStyle && normalizedStyle.font) { - fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); - } - var mergedAttrs = Object.assign(parentAttributes, normalizedStyle); - return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); - }, + var normalizedAttr, normalizedValue, normalizedStyle = {}; + for (var attr in ownAttributes) { + normalizedAttr = normalizeAttr(attr); + normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); + normalizedStyle[normalizedAttr] = normalizedValue; + } + if (normalizedStyle && normalizedStyle.font) { + fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); + } + var mergedAttrs = Object.assign(parentAttributes, normalizedStyle); + return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); + }, - /** + /** * Transforms an array of svg elements to corresponding fabric.* instances * @static * @memberOf fabric @@ -909,71 +909,71 @@ * @param {Object} [options] Options object * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. */ - parseElements: function(elements, callback, options, reviver, parsingOptions) { - new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); - }, + parseElements: function(elements, callback, options, reviver, parsingOptions) { + new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); + }, - /** + /** * Parses "style" attribute, retuning an object with values * @static * @memberOf fabric * @param {SVGElement} element Element to parse * @return {Object} Objects with values parsed from style attribute of an element */ - parseStyleAttribute: function(element) { - var oStyle = { }, - style = element.getAttribute('style'); + parseStyleAttribute: function(element) { + var oStyle = { }, + style = element.getAttribute('style'); - if (!style) { - return oStyle; - } + if (!style) { + return oStyle; + } - if (typeof style === 'string') { - parseStyleString(style, oStyle); - } - else { - parseStyleObject(style, oStyle); - } + if (typeof style === 'string') { + parseStyleString(style, oStyle); + } + else { + parseStyleObject(style, oStyle); + } - return oStyle; - }, + return oStyle; + }, - /** + /** * Parses "points" attribute, returning an array of values * @static * @memberOf fabric * @param {String} points points attribute string * @return {Array} array of points */ - parsePointsAttribute: function(points) { + parsePointsAttribute: function(points) { - // points attribute is required and must not be empty - if (!points) { - return null; - } + // points attribute is required and must not be empty + if (!points) { + return null; + } - // replace commas with whitespace and remove bookending whitespace - points = points.replace(/,/g, ' ').trim(); + // replace commas with whitespace and remove bookending whitespace + points = points.replace(/,/g, ' ').trim(); - points = points.split(/\s+/); - var parsedPoints = [], i, len; + points = points.split(/\s+/); + var parsedPoints = [], i, len; - for (i = 0, len = points.length; i < len; i += 2) { - parsedPoints.push({ - x: parseFloat(points[i]), - y: parseFloat(points[i + 1]) - }); - } + for (i = 0, len = points.length; i < len; i += 2) { + parsedPoints.push({ + x: parseFloat(points[i]), + y: parseFloat(points[i + 1]) + }); + } - // odd number of points is an error - // if (parsedPoints.length % 2 !== 0) { - // return null; - // } + // odd number of points is an error + // if (parsedPoints.length % 2 !== 0) { + // return null; + // } - return parsedPoints; - }, + return parsedPoints; + }, - /** + /** * Returns CSS rules for a given SVG document * @static * @function @@ -981,57 +981,57 @@ * @param {SVGDocument} doc SVG document to parse * @return {Object} CSS rules of this document */ - getCSSRules: function(doc) { - var styles = doc.getElementsByTagName('style'), i, len, - allRules = { }, rules; - - // very crude parsing of style contents - for (i = 0, len = styles.length; i < len; i++) { - var styleContents = styles[i].textContent; - - // remove comments - styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); - if (styleContents.trim() === '') { - continue; + getCSSRules: function(doc) { + var styles = doc.getElementsByTagName('style'), i, len, + allRules = { }, rules; + + // very crude parsing of style contents + for (i = 0, len = styles.length; i < len; i++) { + var styleContents = styles[i].textContent; + + // remove comments + styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); + if (styleContents.trim() === '') { + continue; + } + // recovers all the rule in this form `body { style code... }` + // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); + rules = styleContents.split('}'); + // remove empty rules. + rules = rules.filter(function(rule) { return rule.trim(); }); + // at this point we have hopefully an array of rules `body { style code... ` + // eslint-disable-next-line no-loop-func + rules.forEach(function(rule) { + + var match = rule.split('{'), + ruleObj = { }, declaration = match[1].trim(), + propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); + + for (i = 0, len = propertyValuePairs.length; i < len; i++) { + var pair = propertyValuePairs[i].split(':'), + property = pair[0].trim(), + value = pair[1].trim(); + ruleObj[property] = value; } - // recovers all the rule in this form `body { style code... }` - // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); - rules = styleContents.split('}'); - // remove empty rules. - rules = rules.filter(function(rule) { return rule.trim(); }); - // at this point we have hopefully an array of rules `body { style code... ` - // eslint-disable-next-line no-loop-func - rules.forEach(function(rule) { - - var match = rule.split('{'), - ruleObj = { }, declaration = match[1].trim(), - propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); - - for (i = 0, len = propertyValuePairs.length; i < len; i++) { - var pair = propertyValuePairs[i].split(':'), - property = pair[0].trim(), - value = pair[1].trim(); - ruleObj[property] = value; + rule = match[0].trim(); + rule.split(',').forEach(function(_rule) { + _rule = _rule.replace(/^svg/i, '').trim(); + if (_rule === '') { + return; + } + if (allRules[_rule]) { + Object.assign(allRules[_rule], ruleObj); + } + else { + allRules[_rule] = Object.assign({}, ruleObj); } - rule = match[0].trim(); - rule.split(',').forEach(function(_rule) { - _rule = _rule.replace(/^svg/i, '').trim(); - if (_rule === '') { - return; - } - if (allRules[_rule]) { - Object.assign(allRules[_rule], ruleObj); - } - else { - allRules[_rule] = Object.assign({}, ruleObj); - } - }); }); - } - return allRules; - }, + }); + } + return allRules; + }, - /** + /** * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy) * @memberOf fabric @@ -1041,29 +1041,29 @@ * @param {Object} [options] Object containing options for parsing * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources */ - loadSVGFromURL: function(url, callback, reviver, options) { - - url = url.replace(/^\n\s*/, '').trim(); - new fabric.util.request(url, { - method: 'get', - onComplete: onComplete - }); + loadSVGFromURL: function(url, callback, reviver, options) { - function onComplete(r) { + url = url.replace(/^\n\s*/, '').trim(); + new fabric.util.request(url, { + method: 'get', + onComplete: onComplete + }); - var xml = r.responseXML; - if (!xml || !xml.documentElement) { - callback && callback(null); - return false; - } + function onComplete(r) { - fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { - callback && callback(results, _options, elements, allElements); - }, reviver, options); + var xml = r.responseXML; + if (!xml || !xml.documentElement) { + callback && callback(null); + return false; } - }, - /** + fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { + callback && callback(results, _options, elements, allElements); + }, reviver, options); + } + }, + + /** * Takes string corresponding to an SVG document, and parses it into a set of fabric objects * @memberOf fabric * @param {String} string @@ -1072,11 +1072,11 @@ * @param {Object} [options] Object containing options for parsing * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources */ - loadSVGFromString: function(string, callback, reviver, options) { - var parser = new fabric.window.DOMParser(), - doc = parser.parseFromString(string.trim(), 'text/xml'); - fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { - callback(results, _options, elements, allElements); - }, reviver, options); - } - }); + loadSVGFromString: function(string, callback, reviver, options) { + var parser = new fabric.window.DOMParser(), + doc = parser.parseFromString(string.trim(), 'text/xml'); + fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { + callback(results, _options, elements, allElements); + }, reviver, options); + } +}); diff --git a/src/pattern.class.js b/src/pattern.class.js index e879e0b39e2..cc39bcdc90f 100644 --- a/src/pattern.class.js +++ b/src/pattern.class.js @@ -1,6 +1,6 @@ - var toFixed = fabric.util.toFixed; +var toFixed = fabric.util.toFixed; - /** +/** * Pattern class * @class fabric.Pattern * @see {@link http://fabricjs.com/patterns|Pattern demo} @@ -9,124 +9,124 @@ */ - fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { +fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { - /** + /** * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) * @type String * @default */ - repeat: 'repeat', + repeat: 'repeat', - /** + /** * Pattern horizontal offset from object's left/top corner * @type Number * @default */ - offsetX: 0, + offsetX: 0, - /** + /** * Pattern vertical offset from object's left/top corner * @type Number * @default */ - offsetY: 0, + offsetY: 0, - /** + /** * crossOrigin value (one of "", "anonymous", "use-credentials") * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes * @type String * @default */ - crossOrigin: '', + crossOrigin: '', - /** + /** * transform matrix to change the pattern, imported from svgs. * @type Array * @default */ - patternTransform: null, + patternTransform: null, - type: 'pattern', + type: 'pattern', - /** + /** * Constructor * @param {Object} [options] Options object * @param {option.source} [source] the pattern source, eventually empty or a drawable * @return {fabric.Pattern} thisArg */ - initialize: function(options) { - options || (options = { }); - this.id = fabric.Object.__uid++; - this.setOptions(options); - }, + initialize: function(options) { + options || (options = { }); + this.id = fabric.Object.__uid++; + this.setOptions(options); + }, - /** + /** * Returns object representation of a pattern * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of a pattern instance */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - source, object; + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + source, object; - // element - if (typeof this.source.src === 'string') { - source = this.source.src; - } - // element - else if (typeof this.source === 'object' && this.source.toDataURL) { - source = this.source.toDataURL(); - } + // element + if (typeof this.source.src === 'string') { + source = this.source.src; + } + // element + else if (typeof this.source === 'object' && this.source.toDataURL) { + source = this.source.toDataURL(); + } - object = { - type: 'pattern', - source: source, - repeat: this.repeat, - crossOrigin: this.crossOrigin, - offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), - offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), - patternTransform: this.patternTransform ? this.patternTransform.concat() : null - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); - - return object; - }, - - /* _TO_SVG_START_ */ - /** + object = { + type: 'pattern', + source: source, + repeat: this.repeat, + crossOrigin: this.crossOrigin, + offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), + offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), + patternTransform: this.patternTransform ? this.patternTransform.concat() : null + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); + + return object; + }, + + /* _TO_SVG_START_ */ + /** * Returns SVG representation of a pattern * @param {fabric.Object} object * @return {String} SVG representation of a pattern */ - toSVG: function(object) { - var patternSource = typeof this.source === 'function' ? this.source() : this.source, - patternWidth = patternSource.width / object.width, - patternHeight = patternSource.height / object.height, - patternOffsetX = this.offsetX / object.width, - patternOffsetY = this.offsetY / object.height, - patternImgSrc = ''; - if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { - patternHeight = 1; - if (patternOffsetY) { - patternHeight += Math.abs(patternOffsetY); - } - } - if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { - patternWidth = 1; - if (patternOffsetX) { - patternWidth += Math.abs(patternOffsetX); - } - - } - if (patternSource.src) { - patternImgSrc = patternSource.src; + toSVG: function(object) { + var patternSource = typeof this.source === 'function' ? this.source() : this.source, + patternWidth = patternSource.width / object.width, + patternHeight = patternSource.height / object.height, + patternOffsetX = this.offsetX / object.width, + patternOffsetY = this.offsetY / object.height, + patternImgSrc = ''; + if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { + patternHeight = 1; + if (patternOffsetY) { + patternHeight += Math.abs(patternOffsetY); } - else if (patternSource.toDataURL) { - patternImgSrc = patternSource.toDataURL(); + } + if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { + patternWidth = 1; + if (patternOffsetX) { + patternWidth += Math.abs(patternOffsetX); } - return '\n' + '\n'; - }, - /* _TO_SVG_END_ */ + }, + /* _TO_SVG_END_ */ - setOptions: function(options) { - for (var prop in options) { - this[prop] = options[prop]; - } - }, + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, - /** + /** * Returns an instance of CanvasPattern * @param {CanvasRenderingContext2D} ctx Context to create pattern * @return {CanvasPattern} */ - toLive: function(ctx) { - var source = this.source; - // if the image failed to load, return, and allow rest to continue loading - if (!source) { + toLive: function(ctx) { + var source = this.source; + // if the image failed to load, return, and allow rest to continue loading + if (!source) { + return ''; + } + + // if an image + if (typeof source.src !== 'undefined') { + if (!source.complete) { return ''; } - - // if an image - if (typeof source.src !== 'undefined') { - if (!source.complete) { - return ''; - } - if (source.naturalWidth === 0 || source.naturalHeight === 0) { - return ''; - } + if (source.naturalWidth === 0 || source.naturalHeight === 0) { + return ''; } - return ctx.createPattern(source, this.repeat); } - }); - - fabric.Pattern.fromObject = function(object) { - var patternOptions = Object.assign({}, object); - return fabric.util.loadImage(object.source, { crossOrigin: object.crossOrigin }) - .then(function(img) { - patternOptions.source = img; - return new fabric.Pattern(patternOptions); - }); - }; + return ctx.createPattern(source, this.repeat); + } +}); + +fabric.Pattern.fromObject = function(object) { + var patternOptions = Object.assign({}, object); + return fabric.util.loadImage(object.source, { crossOrigin: object.crossOrigin }) + .then(function(img) { + patternOptions.source = img; + return new fabric.Pattern(patternOptions); + }); +}; diff --git a/src/point.class.js b/src/point.class.js index f9cad4ee6a3..c20d52a15d4 100644 --- a/src/point.class.js +++ b/src/point.class.js @@ -1,10 +1,10 @@ - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ +/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - var fabric = exports.fabric || (exports.fabric = { }); +var fabric = exports.fabric || (exports.fabric = { }); - fabric.Point = Point; +fabric.Point = Point; - /** +/** * Point class * @class fabric.Point * @memberOf fabric @@ -13,328 +13,328 @@ * @param {Number} y * @return {fabric.Point} thisArg */ - function Point(x, y) { - this.x = x || 0; - this.y = y || 0; - } +function Point(x, y) { + this.x = x || 0; + this.y = y || 0; +} - Point.prototype = /** @lends fabric.Point.prototype */ { +Point.prototype = /** @lends fabric.Point.prototype */ { - type: 'point', + type: 'point', - constructor: Point, + constructor: Point, - /** + /** * Adds another point to this one and returns another one * @param {fabric.Point} that * @return {fabric.Point} new Point instance with added values */ - add: function (that) { - return new Point(this.x + that.x, this.y + that.y); - }, + add: function (that) { + return new Point(this.x + that.x, this.y + that.y); + }, - /** + /** * Adds another point to this one * @param {fabric.Point} that * @return {fabric.Point} thisArg * @chainable */ - addEquals: function (that) { - this.x += that.x; - this.y += that.y; - return this; - }, + addEquals: function (that) { + this.x += that.x; + this.y += that.y; + return this; + }, - /** + /** * Adds value to this point and returns a new one * @param {Number} scalar * @return {fabric.Point} new Point with added value */ - scalarAdd: function (scalar) { - return new Point(this.x + scalar, this.y + scalar); - }, + scalarAdd: function (scalar) { + return new Point(this.x + scalar, this.y + scalar); + }, - /** + /** * Adds value to this point * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarAddEquals: function (scalar) { - this.x += scalar; - this.y += scalar; - return this; - }, + scalarAddEquals: function (scalar) { + this.x += scalar; + this.y += scalar; + return this; + }, - /** + /** * Subtracts another point from this point and returns a new one * @param {fabric.Point} that * @return {fabric.Point} new Point object with subtracted values */ - subtract: function (that) { - return new Point(this.x - that.x, this.y - that.y); - }, + subtract: function (that) { + return new Point(this.x - that.x, this.y - that.y); + }, - /** + /** * Subtracts another point from this point * @param {fabric.Point} that * @return {fabric.Point} thisArg * @chainable */ - subtractEquals: function (that) { - this.x -= that.x; - this.y -= that.y; - return this; - }, + subtractEquals: function (that) { + this.x -= that.x; + this.y -= that.y; + return this; + }, - /** + /** * Subtracts value from this point and returns a new one * @param {Number} scalar * @return {fabric.Point} */ - scalarSubtract: function (scalar) { - return new Point(this.x - scalar, this.y - scalar); - }, + scalarSubtract: function (scalar) { + return new Point(this.x - scalar, this.y - scalar); + }, - /** + /** * Subtracts value from this point * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarSubtractEquals: function (scalar) { - this.x -= scalar; - this.y -= scalar; - return this; - }, + scalarSubtractEquals: function (scalar) { + this.x -= scalar; + this.y -= scalar; + return this; + }, - /** + /** * Multiplies this point by another value and returns a new one * @param {fabric.Point} that * @return {fabric.Point} */ - multiply: function (that) { - return new Point(this.x * that.x, this.y * that.y); - }, + multiply: function (that) { + return new Point(this.x * that.x, this.y * that.y); + }, - /** + /** * Multiplies this point by a value and returns a new one * @param {Number} scalar * @return {fabric.Point} */ - scalarMultiply: function (scalar) { - return new Point(this.x * scalar, this.y * scalar); - }, + scalarMultiply: function (scalar) { + return new Point(this.x * scalar, this.y * scalar); + }, - /** + /** * Multiplies this point by a value * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarMultiplyEquals: function (scalar) { - this.x *= scalar; - this.y *= scalar; - return this; - }, + scalarMultiplyEquals: function (scalar) { + this.x *= scalar; + this.y *= scalar; + return this; + }, - /** + /** * Divides this point by another and returns a new one * @param {fabric.Point} that * @return {fabric.Point} */ - divide: function (that) { - return new Point(this.x / that.x, this.y / that.y); - }, + divide: function (that) { + return new Point(this.x / that.x, this.y / that.y); + }, - /** + /** * Divides this point by a value and returns a new one * @param {Number} scalar * @return {fabric.Point} */ - scalarDivide: function (scalar) { - return new Point(this.x / scalar, this.y / scalar); - }, + scalarDivide: function (scalar) { + return new Point(this.x / scalar, this.y / scalar); + }, - /** + /** * Divides this point by a value * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarDivideEquals: function (scalar) { - this.x /= scalar; - this.y /= scalar; - return this; - }, + scalarDivideEquals: function (scalar) { + this.x /= scalar; + this.y /= scalar; + return this; + }, - /** + /** * Returns true if this point is equal to another one * @param {fabric.Point} that * @return {Boolean} */ - eq: function (that) { - return (this.x === that.x && this.y === that.y); - }, + eq: function (that) { + return (this.x === that.x && this.y === that.y); + }, - /** + /** * Returns true if this point is less than another one * @param {fabric.Point} that * @return {Boolean} */ - lt: function (that) { - return (this.x < that.x && this.y < that.y); - }, + lt: function (that) { + return (this.x < that.x && this.y < that.y); + }, - /** + /** * Returns true if this point is less than or equal to another one * @param {fabric.Point} that * @return {Boolean} */ - lte: function (that) { - return (this.x <= that.x && this.y <= that.y); - }, + lte: function (that) { + return (this.x <= that.x && this.y <= that.y); + }, - /** + /** * Returns true if this point is greater another one * @param {fabric.Point} that * @return {Boolean} */ - gt: function (that) { - return (this.x > that.x && this.y > that.y); - }, + gt: function (that) { + return (this.x > that.x && this.y > that.y); + }, - /** + /** * Returns true if this point is greater than or equal to another one * @param {fabric.Point} that * @return {Boolean} */ - gte: function (that) { - return (this.x >= that.x && this.y >= that.y); - }, + gte: function (that) { + return (this.x >= that.x && this.y >= that.y); + }, - /** + /** * Returns new point which is the result of linear interpolation with this one and another one * @param {fabric.Point} that * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 * @return {fabric.Point} */ - lerp: function (that, t) { - if (typeof t === 'undefined') { - t = 0.5; - } - t = Math.max(Math.min(1, t), 0); - return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); - }, - - /** + lerp: function (that, t) { + if (typeof t === 'undefined') { + t = 0.5; + } + t = Math.max(Math.min(1, t), 0); + return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); + }, + + /** * Returns distance from this point and another one * @param {fabric.Point} that * @return {Number} */ - distanceFrom: function (that) { - var dx = this.x - that.x, - dy = this.y - that.y; - return Math.sqrt(dx * dx + dy * dy); - }, + distanceFrom: function (that) { + var dx = this.x - that.x, + dy = this.y - that.y; + return Math.sqrt(dx * dx + dy * dy); + }, - /** + /** * Returns the point between this point and another one * @param {fabric.Point} that * @return {fabric.Point} */ - midPointFrom: function (that) { - return this.lerp(that); - }, + midPointFrom: function (that) { + return this.lerp(that); + }, - /** + /** * Returns a new point which is the min of this and another one * @param {fabric.Point} that * @return {fabric.Point} */ - min: function (that) { - return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); - }, + min: function (that) { + return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); + }, - /** + /** * Returns a new point which is the max of this and another one * @param {fabric.Point} that * @return {fabric.Point} */ - max: function (that) { - return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); - }, + max: function (that) { + return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); + }, - /** + /** * Returns string representation of this point * @return {String} */ - toString: function () { - return this.x + ',' + this.y; - }, + toString: function () { + return this.x + ',' + this.y; + }, - /** + /** * Sets x/y of this point * @param {Number} x * @param {Number} y * @chainable */ - setXY: function (x, y) { - this.x = x; - this.y = y; - return this; - }, + setXY: function (x, y) { + this.x = x; + this.y = y; + return this; + }, - /** + /** * Sets x of this point * @param {Number} x * @chainable */ - setX: function (x) { - this.x = x; - return this; - }, + setX: function (x) { + this.x = x; + return this; + }, - /** + /** * Sets y of this point * @param {Number} y * @chainable */ - setY: function (y) { - this.y = y; - return this; - }, + setY: function (y) { + this.y = y; + return this; + }, - /** + /** * Sets x/y of this point from another point * @param {fabric.Point} that * @chainable */ - setFromPoint: function (that) { - this.x = that.x; - this.y = that.y; - return this; - }, + setFromPoint: function (that) { + this.x = that.x; + this.y = that.y; + return this; + }, - /** + /** * Swaps x/y of this point and another point * @param {fabric.Point} that */ - swap: function (that) { - var x = this.x, - y = this.y; - this.x = that.x; - this.y = that.y; - that.x = x; - that.y = y; - }, - - /** + swap: function (that) { + var x = this.x, + y = this.y; + this.x = that.x; + this.y = that.y; + that.x = x; + that.y = y; + }, + + /** * return a cloned instance of the point * @return {fabric.Point} */ - clone: function () { - return new Point(this.x, this.y); - } - }; + clone: function () { + return new Point(this.x, this.y); + } +}; diff --git a/src/shadow.class.js b/src/shadow.class.js index f3cbe6ecdd1..5c4faf85ab9 100644 --- a/src/shadow.class.js +++ b/src/shadow.class.js @@ -1,137 +1,137 @@ - var fabric = exports.fabric || (exports.fabric = { }), - toFixed = fabric.util.toFixed; +var fabric = exports.fabric || (exports.fabric = { }), + toFixed = fabric.util.toFixed; - /** +/** * Shadow class * @class fabric.Shadow * @see {@link http://fabricjs.com/shadows|Shadow demo} * @see {@link fabric.Shadow#initialize} for constructor definition */ - fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { +fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { - /** + /** * Shadow color * @type String * @default */ - color: 'rgb(0,0,0)', + color: 'rgb(0,0,0)', - /** + /** * Shadow blur * @type Number */ - blur: 0, + blur: 0, - /** + /** * Shadow horizontal offset * @type Number * @default */ - offsetX: 0, + offsetX: 0, - /** + /** * Shadow vertical offset * @type Number * @default */ - offsetY: 0, + offsetY: 0, - /** + /** * Whether the shadow should affect stroke operations * @type Boolean * @default */ - affectStroke: false, + affectStroke: false, - /** + /** * Indicates whether toObject should include default values * @type Boolean * @default */ - includeDefaultValues: true, + includeDefaultValues: true, - /** + /** * When `false`, the shadow will scale with the object. * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale. * default to false * @type Boolean * @default */ - nonScaling: false, + nonScaling: false, - /** + /** * Constructor * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px") * @return {fabric.Shadow} thisArg */ - initialize: function(options) { + initialize: function(options) { - if (typeof options === 'string') { - options = this._parseShadow(options); - } + if (typeof options === 'string') { + options = this._parseShadow(options); + } - for (var prop in options) { - this[prop] = options[prop]; - } + for (var prop in options) { + this[prop] = options[prop]; + } - this.id = fabric.Object.__uid++; - }, + this.id = fabric.Object.__uid++; + }, - /** + /** * @private * @param {String} shadow Shadow value to parse * @return {Object} Shadow object with color, offsetX, offsetY and blur */ - _parseShadow: function(shadow) { - var shadowStr = shadow.trim(), - offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], - color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; - - return { - color: color.trim(), - offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, - offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, - blur: parseFloat(offsetsAndBlur[3], 10) || 0 - }; - }, + _parseShadow: function(shadow) { + var shadowStr = shadow.trim(), + offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], + color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; + + return { + color: color.trim(), + offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, + offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, + blur: parseFloat(offsetsAndBlur[3], 10) || 0 + }; + }, - /** + /** * Returns a string representation of an instance * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow * @return {String} Returns CSS3 text-shadow declaration */ - toString: function() { - return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); - }, + toString: function() { + return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns SVG representation of a shadow * @param {fabric.Object} object * @return {String} SVG representation of a shadow */ - toSVG: function(object) { - var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - offset = fabric.util.rotateVector( - { x: this.offsetX, y: this.offsetY }, - fabric.util.degreesToRadians(-object.angle)), - BLUR_BOX = 20, color = new fabric.Color(this.color); - - if (object.width && object.height) { - //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion - // we add some extra space to filter box to contain the blur ( 20 ) - fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - } - if (object.flipX) { - offset.x *= -1; - } - if (object.flipY) { - offset.y *= -1; - } + toSVG: function(object) { + var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + offset = fabric.util.rotateVector( + { x: this.offsetX, y: this.offsetY }, + fabric.util.degreesToRadians(-object.angle)), + BLUR_BOX = 20, color = new fabric.Color(this.color); + + if (object.width && object.height) { + //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion + // we add some extra space to filter box to contain the blur ( 20 ) + fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + } + if (object.flipX) { + offset.x *= -1; + } + if (object.flipY) { + offset.y *= -1; + } - return ( - '\n' + '\t\n' + @@ -144,41 +144,41 @@ '\t\t\n' + '\t\n' + '\n'); - }, - /* _TO_SVG_END_ */ + }, + /* _TO_SVG_END_ */ - /** + /** * Returns object representation of a shadow * @return {Object} Object representation of a shadow instance */ - toObject: function() { - if (this.includeDefaultValues) { - return { - color: this.color, - blur: this.blur, - offsetX: this.offsetX, - offsetY: this.offsetY, - affectStroke: this.affectStroke, - nonScaling: this.nonScaling - }; - } - var obj = { }, proto = fabric.Shadow.prototype; + toObject: function() { + if (this.includeDefaultValues) { + return { + color: this.color, + blur: this.blur, + offsetX: this.offsetX, + offsetY: this.offsetY, + affectStroke: this.affectStroke, + nonScaling: this.nonScaling + }; + } + var obj = { }, proto = fabric.Shadow.prototype; - ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { - if (this[prop] !== proto[prop]) { - obj[prop] = this[prop]; - } - }, this); + ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { + if (this[prop] !== proto[prop]) { + obj[prop] = this[prop]; + } + }, this); - return obj; - } - }); + return obj; + } +}); - /** +/** * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") * @static * @field * @memberOf fabric.Shadow */ - // eslint-disable-next-line max-len - fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; +// eslint-disable-next-line max-len +fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; diff --git a/src/shapes/active_selection.class.js b/src/shapes/active_selection.class.js index 87d444b7130..42791ec507b 100644 --- a/src/shapes/active_selection.class.js +++ b/src/shapes/active_selection.class.js @@ -1,37 +1,37 @@ - var fabric = exports.fabric || (exports.fabric = { }); +var fabric = exports.fabric || (exports.fabric = { }); - /** +/** * Group class * @class fabric.ActiveSelection * @extends fabric.Group * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} * @see {@link fabric.ActiveSelection#initialize} for constructor definition */ - fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { +fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'activeSelection', + type: 'activeSelection', - /** + /** * @override */ - layout: 'fit-content', + layout: 'fit-content', - /** + /** * @override */ - subTargetCheck: false, + subTargetCheck: false, - /** + /** * @override */ - interactive: false, + interactive: false, - /** + /** * Constructor * * @param {fabric.Object[]} [objects] instance objects @@ -39,94 +39,94 @@ * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane * @return {fabric.ActiveSelection} thisArg */ - initialize: function (objects, options, objectsRelativeToGroup) { - this.callSuper('initialize', objects, options, objectsRelativeToGroup); - this.setCoords(); - }, + initialize: function (objects, options, objectsRelativeToGroup) { + this.callSuper('initialize', objects, options, objectsRelativeToGroup); + this.setCoords(); + }, - /** + /** * @private */ - _shouldSetNestedCoords: function () { - return true; - }, + _shouldSetNestedCoords: function () { + return true; + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane * @returns {boolean} true if object entered group */ - enterGroup: function (object, removeParentTransform) { - if (object.group) { - // save ref to group for later in order to return to it - var parent = object.group; - parent._exitGroup(object); - object.__owningGroup = parent; - } - this._enterGroup(object, removeParentTransform); - return true; - }, - - /** + enterGroup: function (object, removeParentTransform) { + if (object.group) { + // save ref to group for later in order to return to it + var parent = object.group; + parent._exitGroup(object); + object.__owningGroup = parent; + } + this._enterGroup(object, removeParentTransform); + return true; + }, + + /** * we want objects to retain their canvas ref when exiting instance * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - exitGroup: function (object, removeParentTransform) { - this._exitGroup(object, removeParentTransform); - var parent = object.__owningGroup; - if (parent) { - // return to owning group - parent.enterGroup(object); - delete object.__owningGroup; - } - }, - - /** + exitGroup: function (object, removeParentTransform) { + this._exitGroup(object, removeParentTransform); + var parent = object.__owningGroup; + if (parent) { + // return to owning group + parent.enterGroup(object); + delete object.__owningGroup; + } + }, + + /** * @private * @param {'added'|'removed'} type * @param {fabric.Object[]} targets */ - _onAfterObjectsChange: function (type, targets) { - var groups = []; - targets.forEach(function (object) { - object.group && !groups.includes(object.group) && groups.push(object.group); + _onAfterObjectsChange: function (type, targets) { + var groups = []; + targets.forEach(function (object) { + object.group && !groups.includes(object.group) && groups.push(object.group); + }); + if (type === 'removed') { + // invalidate groups' layout and mark as dirty + groups.forEach(function (group) { + group._onAfterObjectsChange('added', targets); }); - if (type === 'removed') { - // invalidate groups' layout and mark as dirty - groups.forEach(function (group) { - group._onAfterObjectsChange('added', targets); - }); - } - else { - // mark groups as dirty - groups.forEach(function (group) { - group._set('dirty', true); - }); - } - }, - - /** + } + else { + // mark groups as dirty + groups.forEach(function (group) { + group._set('dirty', true); + }); + } + }, + + /** * If returns true, deselection is cancelled. * @since 2.0.0 * @return {Boolean} [cancel] */ - onDeselect: function() { - this.removeAll(); - return false; - }, + onDeselect: function() { + this.removeAll(); + return false; + }, - /** + /** * Returns string representation of a group * @return {String} */ - toString: function() { - return '#'; - }, + toString: function() { + return '#'; + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * objectCaching is a global flag, wins over everything * needsItsOwnCache should be used when the object drawing method requires @@ -134,52 +134,52 @@ * Generally you do not cache objects in groups because the group outside is cached. * @return {Boolean} */ - shouldCache: function() { - return false; - }, + shouldCache: function() { + return false; + }, - /** + /** * Check if this group or its parent group are caching, recursively up * @return {Boolean} */ - isOnACache: function() { - return false; - }, + isOnACache: function() { + return false; + }, - /** + /** * Renders controls and borders for the object * @param {CanvasRenderingContext2D} ctx Context to render on * @param {Object} [styleOverride] properties to override the object style * @param {Object} [childrenOverride] properties to override the children overrides */ - _renderControls: function(ctx, styleOverride, childrenOverride) { - ctx.save(); - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; - this.callSuper('_renderControls', ctx, styleOverride); - var options = Object.assign( - { hasControls: false }, - childrenOverride, - { forActiveSelection: true } - ); - for (var i = 0; i < this._objects.length; i++) { - this._objects[i]._renderControls(ctx, options); - } - ctx.restore(); - }, - }); - - /** + _renderControls: function(ctx, styleOverride, childrenOverride) { + ctx.save(); + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + this.callSuper('_renderControls', ctx, styleOverride); + var options = Object.assign( + { hasControls: false }, + childrenOverride, + { forActiveSelection: true } + ); + for (var i = 0; i < this._objects.length; i++) { + this._objects[i]._renderControls(ctx, options); + } + ctx.restore(); + }, +}); + +/** * Returns {@link fabric.ActiveSelection} instance from an object representation * @static * @memberOf fabric.ActiveSelection * @param {Object} object Object to create a group from * @returns {Promise} */ - fabric.ActiveSelection.fromObject = function(object) { - var objects = object.objects, - options = fabric.util.object.clone(object, true); - delete options.objects; - return fabric.util.enlivenObjects(objects).then(function(enlivenedObjects) { - return new fabric.ActiveSelection(enlivenedObjects, options, true); - }); - }; +fabric.ActiveSelection.fromObject = function(object) { + var objects = object.objects, + options = fabric.util.object.clone(object, true); + delete options.objects; + return fabric.util.enlivenObjects(objects).then(function(enlivenedObjects) { + return new fabric.ActiveSelection(enlivenedObjects, options, true); + }); +}; diff --git a/src/shapes/circle.class.js b/src/shapes/circle.class.js index 7562f9a8304..ae89d93a6a1 100644 --- a/src/shapes/circle.class.js +++ b/src/shapes/circle.class.js @@ -1,163 +1,163 @@ - var fabric = exports.fabric || (exports.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians; +var fabric = exports.fabric || (exports.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians; - /** +/** * Circle class * @class fabric.Circle * @extends fabric.Object * @see {@link fabric.Circle#initialize} for constructor definition */ - fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { +fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'circle', + type: 'circle', - /** + /** * Radius of this circle * @type Number * @default */ - radius: 0, + radius: 0, - /** + /** * degrees of start of the circle. * probably will change to degrees in next major version * @type Number 0 - 359 * @default 0 */ - startAngle: 0, + startAngle: 0, - /** + /** * End angle of the circle * probably will change to degrees in next major version * @type Number 1 - 360 * @default 360 */ - endAngle: 360, + endAngle: 360, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), - /** + /** * @private * @param {String} key * @param {*} value * @return {fabric.Circle} thisArg */ - _set: function(key, value) { - this.callSuper('_set', key, value); + _set: function(key, value) { + this.callSuper('_set', key, value); - if (key === 'radius') { - this.setRadius(value); - } + if (key === 'radius') { + this.setRadius(value); + } - return this; - }, + return this; + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); - }, + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); + }, - /* _TO_SVG_START_ */ + /* _TO_SVG_START_ */ - /** + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var svgString, x = 0, y = 0, - angle = (this.endAngle - this.startAngle) % 360; - - if (angle === 0) { - svgString = [ - '\n' - ]; - } - else { - var start = degreesToRadians(this.startAngle), - end = degreesToRadians(this.endAngle), - radius = this.radius, - startX = fabric.util.cos(start) * radius, - startY = fabric.util.sin(start) * radius, - endX = fabric.util.cos(end) * radius, - endY = fabric.util.sin(end) * radius, - largeFlag = angle > 180 ? '1' : '0'; - svgString = [ - '\n' - ]; - } - return svgString; - }, - /* _TO_SVG_END_ */ - - /** + _toSVG: function() { + var svgString, x = 0, y = 0, + angle = (this.endAngle - this.startAngle) % 360; + + if (angle === 0) { + svgString = [ + '\n' + ]; + } + else { + var start = degreesToRadians(this.startAngle), + end = degreesToRadians(this.endAngle), + radius = this.radius, + startX = fabric.util.cos(start) * radius, + startY = fabric.util.sin(start) * radius, + endX = fabric.util.cos(end) * radius, + endY = fabric.util.sin(end) * radius, + largeFlag = angle > 180 ? '1' : '0'; + svgString = [ + '\n' + ]; + } + return svgString; + }, + /* _TO_SVG_END_ */ + + /** * @private * @param {CanvasRenderingContext2D} ctx context to render on */ - _render: function(ctx) { - ctx.beginPath(); - ctx.arc( - 0, - 0, - this.radius, - degreesToRadians(this.startAngle), - degreesToRadians(this.endAngle), - false - ); - this._renderPaintInOrder(ctx); - }, - - /** + _render: function(ctx) { + ctx.beginPath(); + ctx.arc( + 0, + 0, + this.radius, + degreesToRadians(this.startAngle), + degreesToRadians(this.endAngle), + false + ); + this._renderPaintInOrder(ctx); + }, + + /** * Returns horizontal radius of an object (according to how an object is scaled) * @return {Number} */ - getRadiusX: function() { - return this.get('radius') * this.get('scaleX'); - }, + getRadiusX: function() { + return this.get('radius') * this.get('scaleX'); + }, - /** + /** * Returns vertical radius of an object (according to how an object is scaled) * @return {Number} */ - getRadiusY: function() { - return this.get('radius') * this.get('scaleY'); - }, + getRadiusY: function() { + return this.get('radius') * this.get('scaleY'); + }, - /** + /** * Sets radius of an object (and updates width accordingly) * @return {fabric.Circle} thisArg */ - setRadius: function(value) { - this.radius = value; - return this.set('width', value * 2).set('height', value * 2); - }, - }); - - /* _FROM_SVG_START_ */ - /** + setRadius: function(value) { + this.radius = value; + return this.set('width', value * 2).set('height', value * 2); + }, +}); + +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) * @static * @memberOf fabric.Circle * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement */ - fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); +fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); - /** +/** * Returns {@link fabric.Circle} instance from an SVG element * @static * @memberOf fabric.Circle @@ -166,33 +166,33 @@ * @param {Object} [options] Options object * @throws {Error} If value of `r` attribute is missing or invalid */ - fabric.Circle.fromElement = function(element, callback) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); +fabric.Circle.fromElement = function(element, callback) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); - if (!isValidRadius(parsedAttributes)) { - throw new Error('value of `r` attribute is required and can not be negative'); - } + if (!isValidRadius(parsedAttributes)) { + throw new Error('value of `r` attribute is required and can not be negative'); + } - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; - callback(new fabric.Circle(parsedAttributes)); - }; + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; + callback(new fabric.Circle(parsedAttributes)); +}; - /** +/** * @private */ - function isValidRadius(attributes) { - return (('radius' in attributes) && (attributes.radius >= 0)); - } - /* _FROM_SVG_END_ */ +function isValidRadius(attributes) { + return (('radius' in attributes) && (attributes.radius >= 0)); +} +/* _FROM_SVG_END_ */ - /** +/** * Returns {@link fabric.Circle} instance from an object representation * @static * @memberOf fabric.Circle * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Circle.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Circle, object); - }; +fabric.Circle.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Circle, object); +}; diff --git a/src/shapes/ellipse.class.js b/src/shapes/ellipse.class.js index 6c905097eef..87b8101a0c9 100644 --- a/src/shapes/ellipse.class.js +++ b/src/shapes/ellipse.class.js @@ -1,145 +1,145 @@ - var fabric = exports.fabric || (exports.fabric = { }), - piBy2 = Math.PI * 2; +var fabric = exports.fabric || (exports.fabric = { }), + piBy2 = Math.PI * 2; - /** +/** * Ellipse class * @class fabric.Ellipse * @extends fabric.Object * @return {fabric.Ellipse} thisArg * @see {@link fabric.Ellipse#initialize} for constructor definition */ - fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { +fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'ellipse', + type: 'ellipse', - /** + /** * Horizontal radius * @type Number * @default */ - rx: 0, + rx: 0, - /** + /** * Vertical radius * @type Number * @default */ - ry: 0, + ry: 0, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), - /** + /** * Constructor * @param {Object} [options] Options object * @return {fabric.Ellipse} thisArg */ - initialize: function(options) { - this.callSuper('initialize', options); - this.set('rx', options && options.rx || 0); - this.set('ry', options && options.ry || 0); - }, + initialize: function(options) { + this.callSuper('initialize', options); + this.set('rx', options && options.rx || 0); + this.set('ry', options && options.ry || 0); + }, - /** + /** * @private * @param {String} key * @param {*} value * @return {fabric.Ellipse} thisArg */ - _set: function(key, value) { - this.callSuper('_set', key, value); - switch (key) { + _set: function(key, value) { + this.callSuper('_set', key, value); + switch (key) { - case 'rx': - this.rx = value; - this.set('width', value * 2); - break; + case 'rx': + this.rx = value; + this.set('width', value * 2); + break; - case 'ry': - this.ry = value; - this.set('height', value * 2); - break; + case 'ry': + this.ry = value; + this.set('height', value * 2); + break; - } - return this; - }, + } + return this; + }, - /** + /** * Returns horizontal radius of an object (according to how an object is scaled) * @return {Number} */ - getRx: function() { - return this.get('rx') * this.get('scaleX'); - }, + getRx: function() { + return this.get('rx') * this.get('scaleX'); + }, - /** + /** * Returns Vertical radius of an object (according to how an object is scaled) * @return {Number} */ - getRy: function() { - return this.get('ry') * this.get('scaleY'); - }, + getRy: function() { + return this.get('ry') * this.get('scaleY'); + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - - /** + _toSVG: function() { + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + + /** * @private * @param {CanvasRenderingContext2D} ctx context to render on */ - _render: function(ctx) { - ctx.beginPath(); - ctx.save(); - ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); - ctx.arc( - 0, - 0, - this.rx, - 0, - piBy2, - false); - ctx.restore(); - this._renderPaintInOrder(ctx); - }, - }); - - /* _FROM_SVG_START_ */ - /** + _render: function(ctx) { + ctx.beginPath(); + ctx.save(); + ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); + ctx.arc( + 0, + 0, + this.rx, + 0, + piBy2, + false); + ctx.restore(); + this._renderPaintInOrder(ctx); + }, +}); + +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) * @static * @memberOf fabric.Ellipse * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement */ - fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); +fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); - /** +/** * Returns {@link fabric.Ellipse} instance from an SVG element * @static * @memberOf fabric.Ellipse @@ -147,23 +147,23 @@ * @param {Function} [callback] Options callback invoked after parsing is finished * @return {fabric.Ellipse} */ - fabric.Ellipse.fromElement = function(element, callback) { +fabric.Ellipse.fromElement = function(element, callback) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); + var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; - callback(new fabric.Ellipse(parsedAttributes)); - }; - /* _FROM_SVG_END_ */ + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; + callback(new fabric.Ellipse(parsedAttributes)); +}; +/* _FROM_SVG_END_ */ - /** +/** * Returns {@link fabric.Ellipse} instance from an object representation * @static * @memberOf fabric.Ellipse * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Ellipse.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Ellipse, object); - }; +fabric.Ellipse.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Ellipse, object); +}; diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index 267da49b8ac..1f02bb3976d 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -1,12 +1,12 @@ - var fabric = exports.fabric || (exports.fabric = {}), - multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, - invertTransform = fabric.util.invertTransform, - transformPoint = fabric.util.transformPoint, - applyTransformToObject = fabric.util.applyTransformToObject, - degreesToRadians = fabric.util.degreesToRadians, - clone = fabric.util.object.clone; - - /** +var fabric = exports.fabric || (exports.fabric = {}), + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + invertTransform = fabric.util.invertTransform, + transformPoint = fabric.util.transformPoint, + applyTransformToObject = fabric.util.applyTransformToObject, + degreesToRadians = fabric.util.degreesToRadians, + clone = fabric.util.object.clone; + +/** * Group class * @class fabric.Group * @extends fabric.Object @@ -14,64 +14,64 @@ * @fires layout once layout completes * @see {@link fabric.Group#initialize} for constructor definition */ - fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { +fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { - /** + /** * Type of an object * @type string * @default */ - type: 'group', + type: 'group', - /** + /** * Specifies the **layout strategy** for instance * Used by `getLayoutStrategyResult` to calculate layout * `fit-content`, `fit-content-lazy`, `fixed`, `clip-path` are supported out of the box * @type string * @default */ - layout: 'fit-content', + layout: 'fit-content', - /** + /** * Width of stroke * @type Number */ - strokeWidth: 0, + strokeWidth: 0, - /** + /** * List of properties to consider when checking if state * of an object is changed (fabric.Object#hasStateChanged) * as well as for history (undo/redo) purposes * @type string[] */ - stateProperties: fabric.Object.prototype.stateProperties.concat('layout'), + stateProperties: fabric.Object.prototype.stateProperties.concat('layout'), - /** + /** * Used to optimize performance * set to `false` if you don't need contained objects to be targets of events * @default * @type boolean */ - subTargetCheck: false, + subTargetCheck: false, - /** + /** * Used to allow targeting of object inside groups. * set to true if you want to select an object inside a group.\ * **REQUIRES** `subTargetCheck` set to true * @default * @type boolean */ - interactive: false, + interactive: false, - /** + /** * Used internally to optimize performance * Once an object is selected, instance is rendered without the selected object. * This way instance is cached only once for the entire interaction with the selected object. * @private */ - _activeObjects: undefined, + _activeObjects: undefined, - /** + /** * Constructor * * @param {fabric.Object[]} [objects] instance objects @@ -79,418 +79,418 @@ * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane * @return {fabric.Group} thisArg */ - initialize: function (objects, options, objectsRelativeToGroup) { - this._objects = objects || []; - this._activeObjects = []; - this.__objectMonitor = this.__objectMonitor.bind(this); - this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true); - this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false); - this._firstLayoutDone = false; - // setting angle, skewX, skewY must occur after initial layout - this.callSuper('initialize', Object.assign({}, options, { angle: 0, skewX: 0, skewY: 0 })); - this.forEachObject(function (object) { - this.enterGroup(object, false); - }, this); - this._applyLayoutStrategy({ - type: 'initialization', - options: options, - objectsRelativeToGroup: objectsRelativeToGroup - }); - }, + initialize: function (objects, options, objectsRelativeToGroup) { + this._objects = objects || []; + this._activeObjects = []; + this.__objectMonitor = this.__objectMonitor.bind(this); + this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true); + this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false); + this._firstLayoutDone = false; + // setting angle, skewX, skewY must occur after initial layout + this.callSuper('initialize', Object.assign({}, options, { angle: 0, skewX: 0, skewY: 0 })); + this.forEachObject(function (object) { + this.enterGroup(object, false); + }, this); + this._applyLayoutStrategy({ + type: 'initialization', + options: options, + objectsRelativeToGroup: objectsRelativeToGroup + }); + }, - /** + /** * @private * @param {string} key * @param {*} value */ - _set: function (key, value) { - var prev = this[key]; - this.callSuper('_set', key, value); - if (key === 'canvas' && prev !== value) { - this.forEachObject(function (object) { - object._set(key, value); - }); - } - if (key === 'layout' && prev !== value) { - this._applyLayoutStrategy({ type: 'layout_change', layout: value, prevLayout: prev }); - } - if (key === 'interactive') { - this.forEachObject(this._watchObject.bind(this, value)); - } - return this; - }, + _set: function (key, value) { + var prev = this[key]; + this.callSuper('_set', key, value); + if (key === 'canvas' && prev !== value) { + this.forEachObject(function (object) { + object._set(key, value); + }); + } + if (key === 'layout' && prev !== value) { + this._applyLayoutStrategy({ type: 'layout_change', layout: value, prevLayout: prev }); + } + if (key === 'interactive') { + this.forEachObject(this._watchObject.bind(this, value)); + } + return this; + }, - /** + /** * @private */ - _shouldSetNestedCoords: function () { - return this.subTargetCheck; - }, + _shouldSetNestedCoords: function () { + return this.subTargetCheck; + }, - /** + /** * Override this method to enhance performance (for groups with a lot of objects). * If Overriding, be sure not pass illegal objects to group - it will break your app. * @private */ - _filterObjectsBeforeEnteringGroup: function (objects) { - return objects.filter(function (object, index, array) { - // can enter AND is the first occurrence of the object in the passed args (to prevent adding duplicates) - return this.canEnterGroup(object) && array.indexOf(object) === index; - }, this); - }, + _filterObjectsBeforeEnteringGroup: function (objects) { + return objects.filter(function (object, index, array) { + // can enter AND is the first occurrence of the object in the passed args (to prevent adding duplicates) + return this.canEnterGroup(object) && array.indexOf(object) === index; + }, this); + }, - /** + /** * Add objects * @param {...fabric.Object} objects */ - add: function () { - var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.from(arguments)); - fabric.Collection.add.call(this, allowedObjects, this._onObjectAdded); - this._onAfterObjectsChange('added', allowedObjects); - }, + add: function () { + var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.from(arguments)); + fabric.Collection.add.call(this, allowedObjects, this._onObjectAdded); + this._onAfterObjectsChange('added', allowedObjects); + }, - /** + /** * Inserts an object into collection at specified index * @param {fabric.Object | fabric.Object[]} objects Object to insert * @param {Number} index Index to insert object at */ - insertAt: function (objects, index) { - var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.isArray(objects) ? objects : [objects]); - fabric.Collection.insertAt.call(this, allowedObjects, index, this._onObjectAdded); - this._onAfterObjectsChange('added', allowedObjects); - }, + insertAt: function (objects, index) { + var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.isArray(objects) ? objects : [objects]); + fabric.Collection.insertAt.call(this, allowedObjects, index, this._onObjectAdded); + this._onAfterObjectsChange('added', allowedObjects); + }, - /** + /** * Remove objects * @param {...fabric.Object} objects * @returns {fabric.Object[]} removed objects */ - remove: function () { - var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); - this._onAfterObjectsChange('removed', removed); - return removed; - }, + remove: function () { + var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); + this._onAfterObjectsChange('removed', removed); + return removed; + }, - /** + /** * Remove all objects * @returns {fabric.Object[]} removed objects */ - removeAll: function () { - this._activeObjects = []; - return this.remove.apply(this, this._objects.slice()); - }, + removeAll: function () { + this._activeObjects = []; + return this.remove.apply(this, this._objects.slice()); + }, - /** + /** * invalidates layout on object modified * @private */ - __objectMonitor: function (opt) { - this._applyLayoutStrategy(Object.assign({}, opt, { - type: 'object_modified' - })); - this._set('dirty', true); - }, + __objectMonitor: function (opt) { + this._applyLayoutStrategy(Object.assign({}, opt, { + type: 'object_modified' + })); + this._set('dirty', true); + }, - /** + /** * keeps track of the selected objects * @private */ - __objectSelectionMonitor: function (selected, opt) { - var object = opt.target; - if (selected) { - this._activeObjects.push(object); + __objectSelectionMonitor: function (selected, opt) { + var object = opt.target; + if (selected) { + this._activeObjects.push(object); + this._set('dirty', true); + } + else if (this._activeObjects.length > 0) { + var index = this._activeObjects.indexOf(object); + if (index > -1) { + this._activeObjects.splice(index, 1); this._set('dirty', true); } - else if (this._activeObjects.length > 0) { - var index = this._activeObjects.indexOf(object); - if (index > -1) { - this._activeObjects.splice(index, 1); - this._set('dirty', true); - } - } - }, + } + }, - /** + /** * @private * @param {boolean} watch * @param {fabric.Object} object */ - _watchObject: function (watch, object) { - var directive = watch ? 'on' : 'off'; - // make sure we listen only once - watch && this._watchObject(false, object); - object[directive]('changed', this.__objectMonitor); - object[directive]('modified', this.__objectMonitor); - object[directive]('selected', this.__objectSelectionTracker); - object[directive]('deselected', this.__objectSelectionDisposer); - }, - - /** + _watchObject: function (watch, object) { + var directive = watch ? 'on' : 'off'; + // make sure we listen only once + watch && this._watchObject(false, object); + object[directive]('changed', this.__objectMonitor); + object[directive]('modified', this.__objectMonitor); + object[directive]('selected', this.__objectSelectionTracker); + object[directive]('deselected', this.__objectSelectionDisposer); + }, + + /** * Checks if object can enter group and logs relevant warnings * @private * @param {fabric.Object} object * @returns */ - canEnterGroup: function (object) { - if (object === this || this.isDescendantOf(object)) { - // prevent circular object tree - /* _DEV_MODE_START_ */ - console.error('fabric.Group: circular object trees are not supported, this call has no effect'); - /* _DEV_MODE_END_ */ - return false; - } - else if (this._objects.indexOf(object) !== -1) { - // is already in the objects array - /* _DEV_MODE_START_ */ - console.error('fabric.Group: duplicate objects are not supported inside group, this call has no effect'); - /* _DEV_MODE_END_ */ - return false; - } - return true; - }, + canEnterGroup: function (object) { + if (object === this || this.isDescendantOf(object)) { + // prevent circular object tree + /* _DEV_MODE_START_ */ + console.error('fabric.Group: circular object trees are not supported, this call has no effect'); + /* _DEV_MODE_END_ */ + return false; + } + else if (this._objects.indexOf(object) !== -1) { + // is already in the objects array + /* _DEV_MODE_START_ */ + console.error('fabric.Group: duplicate objects are not supported inside group, this call has no effect'); + /* _DEV_MODE_END_ */ + return false; + } + return true; + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane * @returns {boolean} true if object entered group */ - enterGroup: function (object, removeParentTransform) { - if (object.group) { - object.group.remove(object); - } - this._enterGroup(object, removeParentTransform); - return true; - }, + enterGroup: function (object, removeParentTransform) { + if (object.group) { + object.group.remove(object); + } + this._enterGroup(object, removeParentTransform); + return true; + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane */ - _enterGroup: function (object, removeParentTransform) { - if (removeParentTransform) { - // can this be converted to utils (sendObjectToPlane)? - applyTransformToObject( - object, - multiplyTransformMatrices( - invertTransform(this.calcTransformMatrix()), - object.calcTransformMatrix() - ) - ); - } - this._shouldSetNestedCoords() && object.setCoords(); - object._set('group', this); - object._set('canvas', this.canvas); - this.interactive && this._watchObject(true, object); - var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject(); - // if we are adding the activeObject in a group - if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) { - this._activeObjects.push(object); - } - }, + _enterGroup: function (object, removeParentTransform) { + if (removeParentTransform) { + // can this be converted to utils (sendObjectToPlane)? + applyTransformToObject( + object, + multiplyTransformMatrices( + invertTransform(this.calcTransformMatrix()), + object.calcTransformMatrix() + ) + ); + } + this._shouldSetNestedCoords() && object.setCoords(); + object._set('group', this); + object._set('canvas', this.canvas); + this.interactive && this._watchObject(true, object); + var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject(); + // if we are adding the activeObject in a group + if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) { + this._activeObjects.push(object); + } + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - exitGroup: function (object, removeParentTransform) { - this._exitGroup(object, removeParentTransform); - object._set('canvas', undefined); - }, + exitGroup: function (object, removeParentTransform) { + this._exitGroup(object, removeParentTransform); + object._set('canvas', undefined); + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - _exitGroup: function (object, removeParentTransform) { - object._set('group', undefined); - if (!removeParentTransform) { - applyTransformToObject( - object, - multiplyTransformMatrices( - this.calcTransformMatrix(), - object.calcTransformMatrix() - ) - ); - object.setCoords(); - } - this._watchObject(false, object); - var index = this._activeObjects.length > 0 ? this._activeObjects.indexOf(object) : -1; - if (index > -1) { - this._activeObjects.splice(index, 1); - } - }, + _exitGroup: function (object, removeParentTransform) { + object._set('group', undefined); + if (!removeParentTransform) { + applyTransformToObject( + object, + multiplyTransformMatrices( + this.calcTransformMatrix(), + object.calcTransformMatrix() + ) + ); + object.setCoords(); + } + this._watchObject(false, object); + var index = this._activeObjects.length > 0 ? this._activeObjects.indexOf(object) : -1; + if (index > -1) { + this._activeObjects.splice(index, 1); + } + }, - /** + /** * @private * @param {'added'|'removed'} type * @param {fabric.Object[]} targets */ - _onAfterObjectsChange: function (type, targets) { - this._applyLayoutStrategy({ - type: type, - targets: targets - }); - this._set('dirty', true); - }, + _onAfterObjectsChange: function (type, targets) { + this._applyLayoutStrategy({ + type: type, + targets: targets + }); + this._set('dirty', true); + }, - /** + /** * @private * @param {fabric.Object} object */ - _onObjectAdded: function (object) { - this.enterGroup(object, true); - object.fire('added', { target: this }); - }, + _onObjectAdded: function (object) { + this.enterGroup(object, true); + object.fire('added', { target: this }); + }, - /** + /** * @private * @param {fabric.Object} object */ - _onRelativeObjectAdded: function (object) { - this.enterGroup(object, false); - object.fire('added', { target: this }); - }, + _onRelativeObjectAdded: function (object) { + this.enterGroup(object, false); + object.fire('added', { target: this }); + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - _onObjectRemoved: function (object, removeParentTransform) { - this.exitGroup(object, removeParentTransform); - object.fire('removed', { target: this }); - }, + _onObjectRemoved: function (object, removeParentTransform) { + this.exitGroup(object, removeParentTransform); + object.fire('removed', { target: this }); + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * needsItsOwnCache should be used when the object drawing method requires * a cache step. None of the fabric classes requires it. * Generally you do not cache objects in groups because the group is already cached. * @return {Boolean} */ - shouldCache: function() { - var ownCache = fabric.Object.prototype.shouldCache.call(this); - if (ownCache) { - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].willDrawShadow()) { - this.ownCaching = false; - return false; - } + shouldCache: function() { + var ownCache = fabric.Object.prototype.shouldCache.call(this); + if (ownCache) { + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].willDrawShadow()) { + this.ownCaching = false; + return false; } } - return ownCache; - }, + } + return ownCache; + }, - /** + /** * Check if this object or a child object will cast a shadow * @return {Boolean} */ - willDrawShadow: function() { - if (fabric.Object.prototype.willDrawShadow.call(this)) { + willDrawShadow: function() { + if (fabric.Object.prototype.willDrawShadow.call(this)) { + return true; + } + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].willDrawShadow()) { return true; } - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].willDrawShadow()) { - return true; - } - } - return false; - }, + } + return false; + }, - /** + /** * Check if instance or its group are caching, recursively up * @return {Boolean} */ - isOnACache: function () { - return this.ownCaching || (!!this.group && this.group.isOnACache()); - }, + isOnACache: function () { + return this.ownCaching || (!!this.group && this.group.isOnACache()); + }, - /** + /** * Execute the drawing operation for an object on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawObject: function(ctx) { - this._renderBackground(ctx); - for (var i = 0; i < this._objects.length; i++) { - this._objects[i].render(ctx); - } - this._drawClipPath(ctx, this.clipPath); - }, + drawObject: function(ctx) { + this._renderBackground(ctx); + for (var i = 0; i < this._objects.length; i++) { + this._objects[i].render(ctx); + } + this._drawClipPath(ctx, this.clipPath); + }, - /** + /** * Check if cache is dirty */ - isCacheDirty: function(skipCanvas) { - if (this.callSuper('isCacheDirty', skipCanvas)) { - return true; - } - if (!this.statefullCache) { - return false; - } - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].isCacheDirty(true)) { - if (this._cacheCanvas) { - // if this group has not a cache canvas there is nothing to clean - var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-x / 2, -y / 2, x, y); - } - return true; + isCacheDirty: function(skipCanvas) { + if (this.callSuper('isCacheDirty', skipCanvas)) { + return true; + } + if (!this.statefullCache) { + return false; + } + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].isCacheDirty(true)) { + if (this._cacheCanvas) { + // if this group has not a cache canvas there is nothing to clean + var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-x / 2, -y / 2, x, y); } + return true; } - return false; - }, + } + return false; + }, - /** + /** * @override * @return {Boolean} */ - setCoords: function () { - this.callSuper('setCoords'); - this._shouldSetNestedCoords() && this.forEachObject(function (object) { - object.setCoords(); - }); - }, + setCoords: function () { + this.callSuper('setCoords'); + this._shouldSetNestedCoords() && this.forEachObject(function (object) { + object.setCoords(); + }); + }, - /** + /** * Renders instance on a given context * @param {CanvasRenderingContext2D} ctx context to render instance on */ - render: function (ctx) { - // used to inform objects not to double opacity - this._transformDone = true; - this.callSuper('render', ctx); - this._transformDone = false; - }, + render: function (ctx) { + // used to inform objects not to double opacity + this._transformDone = true; + this.callSuper('render', ctx); + this._transformDone = false; + }, - /** + /** * @public * @param {Partial & { layout?: string }} [context] pass values to use for layout calculations */ - triggerLayout: function (context) { - if (context && context.layout) { - context.prevLayout = this.layout; - this.layout = context.layout; - } - this._applyLayoutStrategy({ type: 'imperative', context: context }); - }, + triggerLayout: function (context) { + if (context && context.layout) { + context.prevLayout = this.layout; + this.layout = context.layout; + } + this._applyLayoutStrategy({ type: 'imperative', context: context }); + }, - /** + /** * @private * @param {fabric.Object} object * @param {fabric.Point} diff */ - _adjustObjectPosition: function (object, diff) { - object.set({ - left: object.left + diff.x, - top: object.top + diff.y, - }); - }, + _adjustObjectPosition: function (object, diff) { + object.set({ + left: object.left + diff.x, + top: object.top + diff.y, + }); + }, - /** + /** * initial layout logic: * calculate bbox of objects (if necessary) and translate it according to options received from the constructor (left, top, width, height) * so it is placed in the center of the bbox received from the constructor @@ -498,78 +498,78 @@ * @private * @param {LayoutContext} context */ - _applyLayoutStrategy: function (context) { - var isFirstLayout = context.type === 'initialization'; - if (!isFirstLayout && !this._firstLayoutDone) { - // reject layout requests before initialization layout - return; - } - var options = isFirstLayout && context.options; - var initialTransform = options && { - angle: options.angle || 0, - skewX: options.skewX || 0, - skewY: options.skewY || 0, - }; - var center = this.getRelativeCenterPoint(); - var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context); - if (result) { - // handle positioning - var newCenter = new fabric.Point(result.centerX, result.centerY); - var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0)); - var diff = transformPoint(vector, invertTransform(this.calcOwnMatrix()), true); - // set dimensions - this.set({ width: result.width, height: result.height }); - // adjust objects to account for new center - !context.objectsRelativeToGroup && this.forEachObject(function (object) { - this._adjustObjectPosition(object, diff); - }, this); - // clip path as well - !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned + _applyLayoutStrategy: function (context) { + var isFirstLayout = context.type === 'initialization'; + if (!isFirstLayout && !this._firstLayoutDone) { + // reject layout requests before initialization layout + return; + } + var options = isFirstLayout && context.options; + var initialTransform = options && { + angle: options.angle || 0, + skewX: options.skewX || 0, + skewY: options.skewY || 0, + }; + var center = this.getRelativeCenterPoint(); + var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context); + if (result) { + // handle positioning + var newCenter = new fabric.Point(result.centerX, result.centerY); + var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0)); + var diff = transformPoint(vector, invertTransform(this.calcOwnMatrix()), true); + // set dimensions + this.set({ width: result.width, height: result.height }); + // adjust objects to account for new center + !context.objectsRelativeToGroup && this.forEachObject(function (object) { + this._adjustObjectPosition(object, diff); + }, this); + // clip path as well + !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned && this._adjustObjectPosition(this.clipPath, diff); - if (!newCenter.eq(center) || initialTransform) { - // set position - this.setPositionByOrigin(newCenter, 'center', 'center'); - initialTransform && this.set(initialTransform); - this.setCoords(); - } - } - else if (isFirstLayout) { - // fill `result` with initial values for the layout hook - result = { - centerX: center.x, - centerY: center.y, - width: this.width, - height: this.height, - }; + if (!newCenter.eq(center) || initialTransform) { + // set position + this.setPositionByOrigin(newCenter, 'center', 'center'); initialTransform && this.set(initialTransform); + this.setCoords(); } - else { - // no `result` so we return - return; - } - // flag for next layouts - this._firstLayoutDone = true; - // fire layout hook and event (event will fire only for layouts after initialization layout) - this.onLayout(context, result); - this.fire('layout', { - context: context, - result: result, - diff: diff - }); - // recursive up - if (this.group && this.group._applyLayoutStrategy) { - // append the path recursion to context - if (!context.path) { - context.path = []; - } - context.path.push(this); - // all parents should invalidate their layout - this.group._applyLayoutStrategy(context); + } + else if (isFirstLayout) { + // fill `result` with initial values for the layout hook + result = { + centerX: center.x, + centerY: center.y, + width: this.width, + height: this.height, + }; + initialTransform && this.set(initialTransform); + } + else { + // no `result` so we return + return; + } + // flag for next layouts + this._firstLayoutDone = true; + // fire layout hook and event (event will fire only for layouts after initialization layout) + this.onLayout(context, result); + this.fire('layout', { + context: context, + result: result, + diff: diff + }); + // recursive up + if (this.group && this.group._applyLayoutStrategy) { + // append the path recursion to context + if (!context.path) { + context.path = []; } - }, + context.path.push(this); + // all parents should invalidate their layout + this.group._applyLayoutStrategy(context); + } + }, - /** + /** * Override this method to customize layout. * If you need to run logic once layout completes use `onLayout` * @public @@ -593,75 +593,75 @@ * @param {LayoutContext} context * @returns {LayoutResult | undefined} */ - getLayoutStrategyResult: function (layoutDirective, objects, context) { // eslint-disable-line no-unused-vars - // `fit-content-lazy` performance enhancement - // skip if instance had no objects before the `added` event because it may have kept layout after removing all previous objects - if (layoutDirective === 'fit-content-lazy' + getLayoutStrategyResult: function (layoutDirective, objects, context) { // eslint-disable-line no-unused-vars + // `fit-content-lazy` performance enhancement + // skip if instance had no objects before the `added` event because it may have kept layout after removing all previous objects + if (layoutDirective === 'fit-content-lazy' && context.type === 'added' && objects.length > context.targets.length) { - // calculate added objects' bbox with existing bbox - var addedObjects = context.targets.concat(this); - return this.prepareBoundingBox(layoutDirective, addedObjects, context); - } - else if (layoutDirective === 'fit-content' || layoutDirective === 'fit-content-lazy' + // calculate added objects' bbox with existing bbox + var addedObjects = context.targets.concat(this); + return this.prepareBoundingBox(layoutDirective, addedObjects, context); + } + else if (layoutDirective === 'fit-content' || layoutDirective === 'fit-content-lazy' || (layoutDirective === 'fixed' && (context.type === 'initialization' || context.type === 'imperative'))) { - return this.prepareBoundingBox(layoutDirective, objects, context); + return this.prepareBoundingBox(layoutDirective, objects, context); + } + else if (layoutDirective === 'clip-path' && this.clipPath) { + var clipPath = this.clipPath; + var clipPathSizeAfter = clipPath._getTransformedDimensions(); + if (clipPath.absolutePositioned && (context.type === 'initialization' || context.type === 'layout_change')) { + // we want the center point to exist in group's containing plane + var clipPathCenter = clipPath.getCenterPoint(); + if (this.group) { + // send point from canvas plane to group's containing plane + var inv = invertTransform(this.group.calcTransformMatrix()); + clipPathCenter = transformPoint(clipPathCenter, inv); + } + return { + centerX: clipPathCenter.x, + centerY: clipPathCenter.y, + width: clipPathSizeAfter.x, + height: clipPathSizeAfter.y, + }; } - else if (layoutDirective === 'clip-path' && this.clipPath) { - var clipPath = this.clipPath; - var clipPathSizeAfter = clipPath._getTransformedDimensions(); - if (clipPath.absolutePositioned && (context.type === 'initialization' || context.type === 'layout_change')) { - // we want the center point to exist in group's containing plane - var clipPathCenter = clipPath.getCenterPoint(); - if (this.group) { - // send point from canvas plane to group's containing plane - var inv = invertTransform(this.group.calcTransformMatrix()); - clipPathCenter = transformPoint(clipPathCenter, inv); - } + else if (!clipPath.absolutePositioned) { + var center; + var clipPathRelativeCenter = clipPath.getRelativeCenterPoint(), + // we want the center point to exist in group's containing plane, so we send it upwards + clipPathCenter = transformPoint(clipPathRelativeCenter, this.calcOwnMatrix(), true); + if (context.type === 'initialization' || context.type === 'layout_change') { + var bbox = this.prepareBoundingBox(layoutDirective, objects, context) || {}; + center = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0); + return { + centerX: center.x + clipPathCenter.x, + centerY: center.y + clipPathCenter.y, + correctionX: bbox.correctionX - clipPathCenter.x, + correctionY: bbox.correctionY - clipPathCenter.y, + width: clipPath.width, + height: clipPath.height, + }; + } + else { + center = this.getRelativeCenterPoint(); return { - centerX: clipPathCenter.x, - centerY: clipPathCenter.y, + centerX: center.x + clipPathCenter.x, + centerY: center.y + clipPathCenter.y, width: clipPathSizeAfter.x, height: clipPathSizeAfter.y, }; } - else if (!clipPath.absolutePositioned) { - var center; - var clipPathRelativeCenter = clipPath.getRelativeCenterPoint(), - // we want the center point to exist in group's containing plane, so we send it upwards - clipPathCenter = transformPoint(clipPathRelativeCenter, this.calcOwnMatrix(), true); - if (context.type === 'initialization' || context.type === 'layout_change') { - var bbox = this.prepareBoundingBox(layoutDirective, objects, context) || {}; - center = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0); - return { - centerX: center.x + clipPathCenter.x, - centerY: center.y + clipPathCenter.y, - correctionX: bbox.correctionX - clipPathCenter.x, - correctionY: bbox.correctionY - clipPathCenter.y, - width: clipPath.width, - height: clipPath.height, - }; - } - else { - center = this.getRelativeCenterPoint(); - return { - centerX: center.x + clipPathCenter.x, - centerY: center.y + clipPathCenter.y, - width: clipPathSizeAfter.x, - height: clipPathSizeAfter.y, - }; - } - } - } - else if (layoutDirective === 'svg' && context.type === 'initialization') { - var bbox = this.getObjectsBoundingBox(objects, true) || {}; - return Object.assign(bbox, { - correctionX: -bbox.offsetX || 0, - correctionY: -bbox.offsetY || 0, - }); } - }, + } + else if (layoutDirective === 'svg' && context.type === 'initialization') { + var bbox = this.getObjectsBoundingBox(objects, true) || {}; + return Object.assign(bbox, { + correctionX: -bbox.offsetX || 0, + correctionY: -bbox.offsetY || 0, + }); + } + }, - /** + /** * Override this method to customize layout. * A wrapper around {@link fabric.Group#getObjectsBoundingBox} * @public @@ -670,22 +670,22 @@ * @param {LayoutContext} context * @returns {LayoutResult | undefined} */ - prepareBoundingBox: function (layoutDirective, objects, context) { - if (context.type === 'initialization') { - return this.prepareInitialBoundingBox(layoutDirective, objects, context); - } - else if (context.type === 'imperative' && context.context) { - return Object.assign( - this.getObjectsBoundingBox(objects) || {}, - context.context - ); - } - else { - return this.getObjectsBoundingBox(objects); - } - }, + prepareBoundingBox: function (layoutDirective, objects, context) { + if (context.type === 'initialization') { + return this.prepareInitialBoundingBox(layoutDirective, objects, context); + } + else if (context.type === 'imperative' && context.context) { + return Object.assign( + this.getObjectsBoundingBox(objects) || {}, + context.context + ); + } + else { + return this.getObjectsBoundingBox(objects); + } + }, - /** + /** * Calculates center taking into account originX, originY while not being sure that width/height are initialized * @public * @param {string} layoutDirective @@ -693,124 +693,124 @@ * @param {LayoutContext} context * @returns {LayoutResult | undefined} */ - prepareInitialBoundingBox: function (layoutDirective, objects, context) { - var options = context.options || {}, - hasX = typeof options.left === 'number', - hasY = typeof options.top === 'number', - hasWidth = typeof options.width === 'number', - hasHeight = typeof options.height === 'number'; - - // performance enhancement - // skip layout calculation if bbox is defined - if ((hasX && hasY && hasWidth && hasHeight && context.objectsRelativeToGroup) || objects.length === 0) { - // return nothing to skip layout - return; - } + prepareInitialBoundingBox: function (layoutDirective, objects, context) { + var options = context.options || {}, + hasX = typeof options.left === 'number', + hasY = typeof options.top === 'number', + hasWidth = typeof options.width === 'number', + hasHeight = typeof options.height === 'number'; + + // performance enhancement + // skip layout calculation if bbox is defined + if ((hasX && hasY && hasWidth && hasHeight && context.objectsRelativeToGroup) || objects.length === 0) { + // return nothing to skip layout + return; + } + + var bbox = this.getObjectsBoundingBox(objects) || {}; + var width = hasWidth ? this.width : (bbox.width || 0), + height = hasHeight ? this.height : (bbox.height || 0), + calculatedCenter = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0), + origin = new fabric.Point(this.resolveOriginX(this.originX), this.resolveOriginY(this.originY)), + size = new fabric.Point(width, height), + strokeWidthVector = this._getTransformedDimensions({ width: 0, height: 0 }), + sizeAfter = this._getTransformedDimensions({ + width: width, + height: height, + strokeWidth: 0 + }), + bboxSizeAfter = this._getTransformedDimensions({ + width: bbox.width, + height: bbox.height, + strokeWidth: 0 + }), + rotationCorrection = new fabric.Point(0, 0); + + // calculate center and correction + var originT = origin.scalarAdd(0.5); + var originCorrection = sizeAfter.multiply(originT); + var centerCorrection = new fabric.Point( + hasWidth ? bboxSizeAfter.x / 2 : originCorrection.x, + hasHeight ? bboxSizeAfter.y / 2 : originCorrection.y + ); + var center = new fabric.Point( + hasX ? this.left - (sizeAfter.x + strokeWidthVector.x) * origin.x : calculatedCenter.x - centerCorrection.x, + hasY ? this.top - (sizeAfter.y + strokeWidthVector.y) * origin.y : calculatedCenter.y - centerCorrection.y + ); + var offsetCorrection = new fabric.Point( + hasX ? + center.x - calculatedCenter.x + bboxSizeAfter.x * (hasWidth ? 0.5 : 0) : + -(hasWidth ? (sizeAfter.x - strokeWidthVector.x) * 0.5 : sizeAfter.x * originT.x), + hasY ? + center.y - calculatedCenter.y + bboxSizeAfter.y * (hasHeight ? 0.5 : 0) : + -(hasHeight ? (sizeAfter.y - strokeWidthVector.y) * 0.5 : sizeAfter.y * originT.y) + ).add(rotationCorrection); + var correction = new fabric.Point( + hasWidth ? -sizeAfter.x / 2 : 0, + hasHeight ? -sizeAfter.y / 2 : 0 + ).add(offsetCorrection); + + return { + centerX: center.x, + centerY: center.y, + correctionX: correction.x, + correctionY: correction.y, + width: size.x, + height: size.y, + }; + }, - var bbox = this.getObjectsBoundingBox(objects) || {}; - var width = hasWidth ? this.width : (bbox.width || 0), - height = hasHeight ? this.height : (bbox.height || 0), - calculatedCenter = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0), - origin = new fabric.Point(this.resolveOriginX(this.originX), this.resolveOriginY(this.originY)), - size = new fabric.Point(width, height), - strokeWidthVector = this._getTransformedDimensions({ width: 0, height: 0 }), - sizeAfter = this._getTransformedDimensions({ - width: width, - height: height, - strokeWidth: 0 - }), - bboxSizeAfter = this._getTransformedDimensions({ - width: bbox.width, - height: bbox.height, - strokeWidth: 0 - }), - rotationCorrection = new fabric.Point(0, 0); - - // calculate center and correction - var originT = origin.scalarAdd(0.5); - var originCorrection = sizeAfter.multiply(originT); - var centerCorrection = new fabric.Point( - hasWidth ? bboxSizeAfter.x / 2 : originCorrection.x, - hasHeight ? bboxSizeAfter.y / 2 : originCorrection.y - ); - var center = new fabric.Point( - hasX ? this.left - (sizeAfter.x + strokeWidthVector.x) * origin.x : calculatedCenter.x - centerCorrection.x, - hasY ? this.top - (sizeAfter.y + strokeWidthVector.y) * origin.y : calculatedCenter.y - centerCorrection.y - ); - var offsetCorrection = new fabric.Point( - hasX ? - center.x - calculatedCenter.x + bboxSizeAfter.x * (hasWidth ? 0.5 : 0) : - -(hasWidth ? (sizeAfter.x - strokeWidthVector.x) * 0.5 : sizeAfter.x * originT.x), - hasY ? - center.y - calculatedCenter.y + bboxSizeAfter.y * (hasHeight ? 0.5 : 0) : - -(hasHeight ? (sizeAfter.y - strokeWidthVector.y) * 0.5 : sizeAfter.y * originT.y) - ).add(rotationCorrection); - var correction = new fabric.Point( - hasWidth ? -sizeAfter.x / 2 : 0, - hasHeight ? -sizeAfter.y / 2 : 0 - ).add(offsetCorrection); - - return { - centerX: center.x, - centerY: center.y, - correctionX: correction.x, - correctionY: correction.y, - width: size.x, - height: size.y, - }; - }, - - /** + /** * Calculate the bbox of objects relative to instance's containing plane * @public * @param {fabric.Object[]} objects * @returns {LayoutResult | null} bounding box */ - getObjectsBoundingBox: function (objects, ignoreOffset) { - if (objects.length === 0) { - return null; + getObjectsBoundingBox: function (objects, ignoreOffset) { + if (objects.length === 0) { + return null; + } + var objCenter, sizeVector, min, max, a, b; + objects.forEach(function (object, i) { + objCenter = object.getRelativeCenterPoint(); + sizeVector = object._getTransformedDimensions().scalarDivideEquals(2); + if (object.angle) { + var rad = degreesToRadians(object.angle), + sin = Math.abs(fabric.util.sin(rad)), + cos = Math.abs(fabric.util.cos(rad)), + rx = sizeVector.x * cos + sizeVector.y * sin, + ry = sizeVector.x * sin + sizeVector.y * cos; + sizeVector = new fabric.Point(rx, ry); + } + a = objCenter.subtract(sizeVector); + b = objCenter.add(sizeVector); + if (i === 0) { + min = new fabric.Point(Math.min(a.x, b.x), Math.min(a.y, b.y)); + max = new fabric.Point(Math.max(a.x, b.x), Math.max(a.y, b.y)); } - var objCenter, sizeVector, min, max, a, b; - objects.forEach(function (object, i) { - objCenter = object.getRelativeCenterPoint(); - sizeVector = object._getTransformedDimensions().scalarDivideEquals(2); - if (object.angle) { - var rad = degreesToRadians(object.angle), - sin = Math.abs(fabric.util.sin(rad)), - cos = Math.abs(fabric.util.cos(rad)), - rx = sizeVector.x * cos + sizeVector.y * sin, - ry = sizeVector.x * sin + sizeVector.y * cos; - sizeVector = new fabric.Point(rx, ry); - } - a = objCenter.subtract(sizeVector); - b = objCenter.add(sizeVector); - if (i === 0) { - min = new fabric.Point(Math.min(a.x, b.x), Math.min(a.y, b.y)); - max = new fabric.Point(Math.max(a.x, b.x), Math.max(a.y, b.y)); - } - else { - min.setXY(Math.min(min.x, a.x, b.x), Math.min(min.y, a.y, b.y)); - max.setXY(Math.max(max.x, a.x, b.x), Math.max(max.y, a.y, b.y)); - } - }); + else { + min.setXY(Math.min(min.x, a.x, b.x), Math.min(min.y, a.y, b.y)); + max.setXY(Math.max(max.x, a.x, b.x), Math.max(max.y, a.y, b.y)); + } + }); - var size = max.subtract(min), - relativeCenter = ignoreOffset ? size.scalarDivide(2) : min.midPointFrom(max), - // we send `relativeCenter` up to group's containing plane - offset = transformPoint(min, this.calcOwnMatrix()), - center = transformPoint(relativeCenter, this.calcOwnMatrix()); + var size = max.subtract(min), + relativeCenter = ignoreOffset ? size.scalarDivide(2) : min.midPointFrom(max), + // we send `relativeCenter` up to group's containing plane + offset = transformPoint(min, this.calcOwnMatrix()), + center = transformPoint(relativeCenter, this.calcOwnMatrix()); + + return { + offsetX: offset.x, + offsetY: offset.y, + centerX: center.x, + centerY: center.y, + width: size.x, + height: size.y, + }; + }, - return { - offsetX: offset.x, - offsetY: offset.y, - centerX: center.x, - centerY: center.y, - width: size.x, - height: size.y, - }; - }, - - /** + /** * Hook that is called once layout has completed. * Provided for layout customization, override if necessary. * Complements `getLayoutStrategyResult`, which is called at the beginning of layout. @@ -818,121 +818,121 @@ * @param {LayoutContext} context layout context * @param {LayoutResult} result layout result */ - onLayout: function (/* context, result */) { - // override by subclass - }, + onLayout: function (/* context, result */) { + // override by subclass + }, - /** + /** * * @private * @param {'toObject'|'toDatalessObject'} [method] * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output * @returns {fabric.Object[]} serialized objects */ - __serializeObjects: function (method, propertiesToInclude) { - var _includeDefaultValues = this.includeDefaultValues; - return this._objects - .filter(function (obj) { - return !obj.excludeFromExport; - }) - .map(function (obj) { - var originalDefaults = obj.includeDefaultValues; - obj.includeDefaultValues = _includeDefaultValues; - var data = obj[method || 'toObject'](propertiesToInclude); - obj.includeDefaultValues = originalDefaults; - //delete data.version; - return data; - }); - }, - - /** + __serializeObjects: function (method, propertiesToInclude) { + var _includeDefaultValues = this.includeDefaultValues; + return this._objects + .filter(function (obj) { + return !obj.excludeFromExport; + }) + .map(function (obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = _includeDefaultValues; + var data = obj[method || 'toObject'](propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + //delete data.version; + return data; + }); + }, + + /** * Returns object representation of an instance * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function (propertiesToInclude) { - var obj = this.callSuper('toObject', ['layout', 'subTargetCheck', 'interactive'].concat(propertiesToInclude)); - obj.objects = this.__serializeObjects('toObject', propertiesToInclude); - return obj; - }, + toObject: function (propertiesToInclude) { + var obj = this.callSuper('toObject', ['layout', 'subTargetCheck', 'interactive'].concat(propertiesToInclude)); + obj.objects = this.__serializeObjects('toObject', propertiesToInclude); + return obj; + }, - toString: function () { - return '#'; - }, + toString: function () { + return '#'; + }, - dispose: function () { - this._activeObjects = []; - this.forEachObject(function (object) { - this._watchObject(false, object); - object.dispose && object.dispose(); - }, this); - this.callSuper('dispose'); - }, + dispose: function () { + this._activeObjects = []; + this.forEachObject(function (object) { + this._watchObject(false, object); + object.dispose && object.dispose(); + }, this); + this.callSuper('dispose'); + }, - /* _TO_SVG_START_ */ + /* _TO_SVG_START_ */ - /** + /** * @private */ - _createSVGBgRect: function (reviver) { - if (!this.backgroundColor) { - return ''; - } - var fillStroke = fabric.Rect.prototype._toSVG.call(this, reviver); - var commons = fillStroke.indexOf('COMMON_PARTS'); - fillStroke[commons] = 'for="group" '; - return fillStroke.join(''); - }, + _createSVGBgRect: function (reviver) { + if (!this.backgroundColor) { + return ''; + } + var fillStroke = fabric.Rect.prototype._toSVG.call(this, reviver); + var commons = fillStroke.indexOf('COMMON_PARTS'); + fillStroke[commons] = 'for="group" '; + return fillStroke.join(''); + }, - /** + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - _toSVG: function (reviver) { - var svgString = ['\n']; - var bg = this._createSVGBgRect(reviver); - bg && svgString.push('\t\t', bg); - for (var i = 0; i < this._objects.length; i++) { - svgString.push('\t\t', this._objects[i].toSVG(reviver)); - } - svgString.push('\n'); - return svgString; - }, + _toSVG: function (reviver) { + var svgString = ['\n']; + var bg = this._createSVGBgRect(reviver); + bg && svgString.push('\t\t', bg); + for (var i = 0; i < this._objects.length; i++) { + svgString.push('\t\t', this._objects[i].toSVG(reviver)); + } + svgString.push('\n'); + return svgString; + }, - /** + /** * Returns styles-string for svg-export, specific version for group * @return {String} */ - getSvgStyles: function() { - var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? - 'opacity: ' + this.opacity + ';' : '', - visibility = this.visible ? '' : ' visibility: hidden;'; - return [ - opacity, - this.getSvgFilter(), - visibility - ].join(''); - }, - - /** + getSvgStyles: function() { + var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? + 'opacity: ' + this.opacity + ';' : '', + visibility = this.visible ? '' : ' visibility: hidden;'; + return [ + opacity, + this.getSvgFilter(), + visibility + ].join(''); + }, + + /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toClipPathSVG: function (reviver) { - var svgString = []; - var bg = this._createSVGBgRect(reviver); - bg && svgString.push('\t', bg); - for (var i = 0; i < this._objects.length; i++) { - svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); - } - return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); - }, - /* _TO_SVG_END_ */ - }); - - /** + toClipPathSVG: function (reviver) { + var svgString = []; + var bg = this._createSVGBgRect(reviver); + bg && svgString.push('\t', bg); + for (var i = 0; i < this._objects.length; i++) { + svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); + } + return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); + }, + /* _TO_SVG_END_ */ +}); + +/** * @todo support loading from svg * @private * @static @@ -940,14 +940,14 @@ * @param {Object} object Object to create a group from * @returns {Promise} */ - fabric.Group.fromObject = function(object) { - var objects = object.objects || [], - options = clone(object, true); - delete options.objects; - return Promise.all([ - fabric.util.enlivenObjects(objects), - fabric.util.enlivenObjectEnlivables(options) - ]).then(function (enlivened) { - return new fabric.Group(enlivened[0], Object.assign(options, enlivened[1]), true); - }); - }; +fabric.Group.fromObject = function(object) { + var objects = object.objects || [], + options = clone(object, true); + delete options.objects; + return Promise.all([ + fabric.util.enlivenObjects(objects), + fabric.util.enlivenObjectEnlivables(options) + ]).then(function (enlivened) { + return new fabric.Group(enlivened[0], Object.assign(options, enlivened[1]), true); + }); +}; diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js index ff4374a6419..06d40c27c60 100644 --- a/src/shapes/image.class.js +++ b/src/shapes/image.class.js @@ -1,131 +1,131 @@ - var extend = fabric.util.object.extend; +var extend = fabric.util.object.extend; - if (!exports.fabric) { - exports.fabric = { }; - } +if (!exports.fabric) { + exports.fabric = { }; +} - /** +/** * Image class * @class fabric.Image * @extends fabric.Object * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} * @see {@link fabric.Image#initialize} for constructor definition */ - fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { +fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'image', + type: 'image', - /** + /** * Width of a stroke. * For image quality a stroke multiple of 2 gives better results. * @type Number * @default */ - strokeWidth: 0, + strokeWidth: 0, - /** + /** * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. * This allows for relative urls as image src. * @since 2.7.0 * @type Boolean * @default */ - srcFromAttribute: false, + srcFromAttribute: false, - /** + /** * private * contains last value of scaleX to detect * if the Image got resized after the last Render * @type Number */ - _lastScaleX: 1, + _lastScaleX: 1, - /** + /** * private * contains last value of scaleY to detect * if the Image got resized after the last Render * @type Number */ - _lastScaleY: 1, + _lastScaleY: 1, - /** + /** * private * contains last value of scaling applied by the apply filter chain * @type Number */ - _filterScalingX: 1, + _filterScalingX: 1, - /** + /** * private * contains last value of scaling applied by the apply filter chain * @type Number */ - _filterScalingY: 1, + _filterScalingY: 1, - /** + /** * minimum scale factor under which any resizeFilter is triggered to resize the image * 0 will disable the automatic resize. 1 will trigger automatically always. * number bigger than 1 are not implemented yet. * @type Number */ - minimumScaleTrigger: 0.5, + minimumScaleTrigger: 0.5, - /** + /** * List of properties to consider when checking if * state of an object is changed ({@link fabric.Object#hasStateChanged}) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), + stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), - /** + /** * List of properties to consider when checking if cache needs refresh * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty * and refreshed at the next render * @type Array */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), - /** + /** * key used to retrieve the texture representing this image * @since 2.0.0 * @type String * @default */ - cacheKey: '', + cacheKey: '', - /** + /** * Image crop in pixels from original image size. * @since 2.0.0 * @type Number * @default */ - cropX: 0, + cropX: 0, - /** + /** * Image crop in pixels from original image size. * @since 2.0.0 * @type Number * @default */ - cropY: 0, + cropY: 0, - /** + /** * Indicates whether this canvas will use image smoothing when painting this image. * Also influence if the cacheCanvas for this image uses imageSmoothing * @since 4.0.0-beta.11 * @type Boolean * @default */ - imageSmoothing: true, + imageSmoothing: true, - /** + /** * Constructor * Image can be initialized with any canvas drawable or a string. * The string should be a url and will be loaded as an image. @@ -135,23 +135,23 @@ * @param {Object} [options] Options object * @return {fabric.Image} thisArg */ - initialize: function(element, options) { - options || (options = { }); - this.filters = []; - this.cacheKey = 'texture' + fabric.Object.__uid++; - this.callSuper('initialize', options); - this._initElement(element, options); - }, + initialize: function(element, options) { + options || (options = { }); + this.filters = []; + this.cacheKey = 'texture' + fabric.Object.__uid++; + this.callSuper('initialize', options); + this._initElement(element, options); + }, - /** + /** * Returns image element which this instance if based on * @return {HTMLImageElement} Image element */ - getElement: function() { - return this._element || {}; - }, + getElement: function() { + return this._element || {}; + }, - /** + /** * Sets image element for this instance to a specified one. * If filters defined they are applied to new image. * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area. @@ -160,204 +160,204 @@ * @return {fabric.Image} thisArg * @chainable */ - setElement: function(element, options) { - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._element = element; - this._originalElement = element; - this._initConfig(options); - if (this.filters.length !== 0) { - this.applyFilters(); - } - // resizeFilters work on the already filtered copy. - // we need to apply resizeFilters AFTER normal filters. - // applyResizeFilters is run more often than normal filters - // and is triggered by user interactions rather than dev code - if (this.resizeFilter) { - this.applyResizeFilters(); - } - return this; - }, + setElement: function(element, options) { + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._element = element; + this._originalElement = element; + this._initConfig(options); + if (this.filters.length !== 0) { + this.applyFilters(); + } + // resizeFilters work on the already filtered copy. + // we need to apply resizeFilters AFTER normal filters. + // applyResizeFilters is run more often than normal filters + // and is triggered by user interactions rather than dev code + if (this.resizeFilter) { + this.applyResizeFilters(); + } + return this; + }, - /** + /** * Delete a single texture if in webgl mode */ - removeTexture: function(key) { - var backend = fabric.filterBackend; - if (backend && backend.evictCachesForKey) { - backend.evictCachesForKey(key); - } - }, + removeTexture: function(key) { + var backend = fabric.filterBackend; + if (backend && backend.evictCachesForKey) { + backend.evictCachesForKey(key); + } + }, - /** + /** * Delete textures, reference to elements and eventually JSDOM cleanup */ - dispose: function () { - this.callSuper('dispose'); - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._cacheContext = undefined; - ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { - fabric.util.cleanUpJsdomNode(this[element]); - this[element] = undefined; - }).bind(this)); - }, - - /** + dispose: function () { + this.callSuper('dispose'); + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._cacheContext = undefined; + ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { + fabric.util.cleanUpJsdomNode(this[element]); + this[element] = undefined; + }).bind(this)); + }, + + /** * Get the crossOrigin value (of the corresponding image element) */ - getCrossOrigin: function() { - return this._originalElement && (this._originalElement.crossOrigin || null); - }, + getCrossOrigin: function() { + return this._originalElement && (this._originalElement.crossOrigin || null); + }, - /** + /** * Returns original size of an image * @return {Object} Object with "width" and "height" properties */ - getOriginalSize: function() { - var element = this.getElement(); - return { - width: element.naturalWidth || element.width, - height: element.naturalHeight || element.height - }; - }, + getOriginalSize: function() { + var element = this.getElement(); + return { + width: element.naturalWidth || element.width, + height: element.naturalHeight || element.height + }; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _stroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } - var w = this.width / 2, h = this.height / 2; - ctx.beginPath(); - ctx.moveTo(-w, -h); - ctx.lineTo(w, -h); - ctx.lineTo(w, h); - ctx.lineTo(-w, h); - ctx.lineTo(-w, -h); - ctx.closePath(); - }, - - /** + _stroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } + var w = this.width / 2, h = this.height / 2; + ctx.beginPath(); + ctx.moveTo(-w, -h); + ctx.lineTo(w, -h); + ctx.lineTo(w, h); + ctx.lineTo(-w, h); + ctx.lineTo(-w, -h); + ctx.closePath(); + }, + + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - var filters = []; + toObject: function(propertiesToInclude) { + var filters = []; - this.filters.forEach(function(filterObj) { - if (filterObj) { - filters.push(filterObj.toObject()); - } - }); - var object = extend( - this.callSuper( - 'toObject', - ['cropX', 'cropY'].concat(propertiesToInclude) - ), { - src: this.getSrc(), - crossOrigin: this.getCrossOrigin(), - filters: filters, - }); - if (this.resizeFilter) { - object.resizeFilter = this.resizeFilter.toObject(); + this.filters.forEach(function(filterObj) { + if (filterObj) { + filters.push(filterObj.toObject()); } - return object; - }, + }); + var object = extend( + this.callSuper( + 'toObject', + ['cropX', 'cropY'].concat(propertiesToInclude) + ), { + src: this.getSrc(), + crossOrigin: this.getCrossOrigin(), + filters: filters, + }); + if (this.resizeFilter) { + object.resizeFilter = this.resizeFilter.toObject(); + } + return object; + }, - /** + /** * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height. * @return {Boolean} */ - hasCrop: function() { - return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; - }, + hasCrop: function() { + return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var svgString = [], imageMarkup = [], strokeSvg, element = this._element, - x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; - if (!element) { - return []; - } - if (this.hasCrop()) { - var clipPathId = fabric.Object.__uid++; - svgString.push( - '\n', - '\t\n', - '\n' - ); - clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; - } - if (!this.imageSmoothing) { - imageRendering = '" image-rendering="optimizeSpeed'; - } - imageMarkup.push('\t\n'); - - if (this.stroke || this.strokeDashArray) { - var origFill = this.fill; - this.fill = null; - strokeSvg = [ - '\t\n' - ]; - this.fill = origFill; - } - if (this.paintFirst !== 'fill') { - svgString = svgString.concat(strokeSvg, imageMarkup); - } - else { - svgString = svgString.concat(imageMarkup, strokeSvg); - } - return svgString; - }, - /* _TO_SVG_END_ */ + _toSVG: function() { + var svgString = [], imageMarkup = [], strokeSvg, element = this._element, + x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; + if (!element) { + return []; + } + if (this.hasCrop()) { + var clipPathId = fabric.Object.__uid++; + svgString.push( + '\n', + '\t\n', + '\n' + ); + clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; + } + if (!this.imageSmoothing) { + imageRendering = '" image-rendering="optimizeSpeed'; + } + imageMarkup.push('\t\n'); + + if (this.stroke || this.strokeDashArray) { + var origFill = this.fill; + this.fill = null; + strokeSvg = [ + '\t\n' + ]; + this.fill = origFill; + } + if (this.paintFirst !== 'fill') { + svgString = svgString.concat(strokeSvg, imageMarkup); + } + else { + svgString = svgString.concat(imageMarkup, strokeSvg); + } + return svgString; + }, + /* _TO_SVG_END_ */ - /** + /** * Returns source of an image * @param {Boolean} filtered indicates if the src is needed for svg * @return {String} Source of an image */ - getSrc: function(filtered) { - var element = filtered ? this._element : this._originalElement; - if (element) { - if (element.toDataURL) { - return element.toDataURL(); - } + getSrc: function(filtered) { + var element = filtered ? this._element : this._originalElement; + if (element) { + if (element.toDataURL) { + return element.toDataURL(); + } - if (this.srcFromAttribute) { - return element.getAttribute('src'); - } - else { - return element.src; - } + if (this.srcFromAttribute) { + return element.getAttribute('src'); } else { - return this.src || ''; + return element.src; } - }, + } + else { + return this.src || ''; + } + }, - /** + /** * Sets source of an image * @param {String} src Source string (URL) * @param {Object} [options] Options object @@ -365,59 +365,59 @@ * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes * @return {Promise} thisArg */ - setSrc: function(src, options) { - var _this = this; - return fabric.util.loadImage(src, options).then(function(img) { - _this.setElement(img, options); - _this._setWidthHeight(); - return _this; - }); - }, + setSrc: function(src, options) { + var _this = this; + return fabric.util.loadImage(src, options).then(function(img) { + _this.setElement(img, options); + _this._setWidthHeight(); + return _this; + }); + }, - /** + /** * Returns string representation of an instance * @return {String} String representation of an instance */ - toString: function() { - return '#'; - }, - - applyResizeFilters: function() { - var filter = this.resizeFilter, - minimumScale = this.minimumScaleTrigger, - objectScale = this.getTotalObjectScaling(), - scaleX = objectScale.x, - scaleY = objectScale.y, - elementToFilter = this._filteredEl || this._originalElement; - if (this.group) { - this.set('dirty', true); - } - if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { - this._element = elementToFilter; - this._filterScalingX = 1; - this._filterScalingY = 1; - this._lastScaleX = scaleX; - this._lastScaleY = scaleY; - return; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - var canvasEl = fabric.util.createCanvasElement(), - cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, - sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._lastScaleX = filter.scaleX = scaleX; - this._lastScaleY = filter.scaleY = scaleY; - fabric.filterBackend.applyFilters( - [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); - this._filterScalingX = canvasEl.width / this._originalElement.width; - this._filterScalingY = canvasEl.height / this._originalElement.height; - }, - - /** + toString: function() { + return '#'; + }, + + applyResizeFilters: function() { + var filter = this.resizeFilter, + minimumScale = this.minimumScaleTrigger, + objectScale = this.getTotalObjectScaling(), + scaleX = objectScale.x, + scaleY = objectScale.y, + elementToFilter = this._filteredEl || this._originalElement; + if (this.group) { + this.set('dirty', true); + } + if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { + this._element = elementToFilter; + this._filterScalingX = 1; + this._filterScalingY = 1; + this._lastScaleX = scaleX; + this._lastScaleY = scaleY; + return; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + var canvasEl = fabric.util.createCanvasElement(), + cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, + sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._lastScaleX = filter.scaleX = scaleX; + this._lastScaleY = filter.scaleY = scaleY; + fabric.filterBackend.applyFilters( + [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); + this._filterScalingX = canvasEl.width / this._originalElement.width; + this._filterScalingY = canvasEl.height / this._originalElement.height; + }, + + /** * Applies filters assigned to this image (from "filters" array) or from filter param * @method applyFilters * @param {Array} filters to be applied @@ -425,81 +425,81 @@ * @return {thisArg} return the fabric.Image object * @chainable */ - applyFilters: function(filters) { + applyFilters: function(filters) { - filters = filters || this.filters || []; - filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); - this.set('dirty', true); + filters = filters || this.filters || []; + filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); + this.set('dirty', true); - // needs to clear out or WEBGL will not resize correctly - this.removeTexture(this.cacheKey + '_filtered'); + // needs to clear out or WEBGL will not resize correctly + this.removeTexture(this.cacheKey + '_filtered'); - if (filters.length === 0) { - this._element = this._originalElement; - this._filteredEl = null; - this._filterScalingX = 1; - this._filterScalingY = 1; - return this; - } + if (filters.length === 0) { + this._element = this._originalElement; + this._filteredEl = null; + this._filterScalingX = 1; + this._filterScalingY = 1; + return this; + } - var imgElement = this._originalElement, - sourceWidth = imgElement.naturalWidth || imgElement.width, - sourceHeight = imgElement.naturalHeight || imgElement.height; - - if (this._element === this._originalElement) { - // if the element is the same we need to create a new element - var canvasEl = fabric.util.createCanvasElement(); - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._filteredEl = canvasEl; - } - else { - // clear the existing element to get new filter data - // also dereference the eventual resized _element - this._element = this._filteredEl; - this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); - // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y - this._lastScaleX = 1; - this._lastScaleY = 1; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - fabric.filterBackend.applyFilters( - filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); - if (this._originalElement.width !== this._element.width || + var imgElement = this._originalElement, + sourceWidth = imgElement.naturalWidth || imgElement.width, + sourceHeight = imgElement.naturalHeight || imgElement.height; + + if (this._element === this._originalElement) { + // if the element is the same we need to create a new element + var canvasEl = fabric.util.createCanvasElement(); + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._filteredEl = canvasEl; + } + else { + // clear the existing element to get new filter data + // also dereference the eventual resized _element + this._element = this._filteredEl; + this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); + // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y + this._lastScaleX = 1; + this._lastScaleY = 1; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + fabric.filterBackend.applyFilters( + filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); + if (this._originalElement.width !== this._element.width || this._originalElement.height !== this._element.height) { - this._filterScalingX = this._element.width / this._originalElement.width; - this._filterScalingY = this._element.height / this._originalElement.height; - } - return this; - }, + this._filterScalingX = this._element.width / this._originalElement.width; + this._filterScalingY = this._element.height / this._originalElement.height; + } + return this; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { - this.applyResizeFilters(); - } - this._stroke(ctx); - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { + this.applyResizeFilters(); + } + this._stroke(ctx); + this._renderPaintInOrder(ctx); + }, - /** + /** * Paint the cached copy of the object on the target context. * it will set the imageSmoothing for the draw operation * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawCacheOnCanvas: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); - }, + drawCacheOnCanvas: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * needsItsOwnCache should be used when the object drawing method requires * a cache step. None of the fabric classes requires it. @@ -510,215 +510,215 @@ * A full performance audit should be done. * @return {Boolean} */ - shouldCache: function() { - return this.needsItsOwnCache(); - }, + shouldCache: function() { + return this.needsItsOwnCache(); + }, - _renderFill: function(ctx) { - var elementToDraw = this._element; - if (!elementToDraw) { - return; - } - var scaleX = this._filterScalingX, scaleY = this._filterScalingY, - w = this.width, h = this.height, min = Math.min, max = Math.max, - // crop values cannot be lesser than 0. - cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), - elWidth = elementToDraw.naturalWidth || elementToDraw.width, - elHeight = elementToDraw.naturalHeight || elementToDraw.height, - sX = cropX * scaleX, - sY = cropY * scaleY, - // the width height cannot exceed element width/height, starting from the crop offset. - sW = min(w * scaleX, elWidth - sX), - sH = min(h * scaleY, elHeight - sY), - x = -w / 2, y = -h / 2, - maxDestW = min(w, elWidth / scaleX - cropX), - maxDestH = min(h, elHeight / scaleY - cropY); - - elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); - }, - - /** + _renderFill: function(ctx) { + var elementToDraw = this._element; + if (!elementToDraw) { + return; + } + var scaleX = this._filterScalingX, scaleY = this._filterScalingY, + w = this.width, h = this.height, min = Math.min, max = Math.max, + // crop values cannot be lesser than 0. + cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), + elWidth = elementToDraw.naturalWidth || elementToDraw.width, + elHeight = elementToDraw.naturalHeight || elementToDraw.height, + sX = cropX * scaleX, + sY = cropY * scaleY, + // the width height cannot exceed element width/height, starting from the crop offset. + sW = min(w * scaleX, elWidth - sX), + sH = min(h * scaleY, elHeight - sY), + x = -w / 2, y = -h / 2, + maxDestW = min(w, elWidth / scaleX - cropX), + maxDestH = min(h, elHeight / scaleY - cropY); + + elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); + }, + + /** * needed to check if image needs resize * @private */ - _needsResize: function() { - var scale = this.getTotalObjectScaling(); - return (scale.x !== this._lastScaleX || scale.y !== this._lastScaleY); - }, + _needsResize: function() { + var scale = this.getTotalObjectScaling(); + return (scale.x !== this._lastScaleX || scale.y !== this._lastScaleY); + }, - /** + /** * @private */ - _resetWidthHeight: function() { - this.set(this.getOriginalSize()); - }, + _resetWidthHeight: function() { + this.set(this.getOriginalSize()); + }, - /** + /** * The Image class's initialization method. This method is automatically * called by the constructor. * @private * @param {HTMLImageElement|String} element The element representing the image * @param {Object} [options] Options object */ - _initElement: function(element, options) { - this.setElement(fabric.util.getById(element), options); - fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); - }, + _initElement: function(element, options) { + this.setElement(fabric.util.getById(element), options); + fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); + }, - /** + /** * @private * @param {Object} [options] Options object */ - _initConfig: function(options) { - options || (options = { }); - this.setOptions(options); - this._setWidthHeight(options); - }, + _initConfig: function(options) { + options || (options = { }); + this.setOptions(options); + this._setWidthHeight(options); + }, - /** + /** * @private * Set the width and the height of the image object, using the element or the * options. * @param {Object} [options] Object with width/height properties */ - _setWidthHeight: function(options) { - options || (options = { }); - var el = this.getElement(); - this.width = options.width || el.naturalWidth || el.width || 0; - this.height = options.height || el.naturalHeight || el.height || 0; - }, + _setWidthHeight: function(options) { + options || (options = { }); + var el = this.getElement(); + this.width = options.width || el.naturalWidth || el.width || 0; + this.height = options.height || el.naturalHeight || el.height || 0; + }, - /** + /** * Calculate offset for center and scale factor for the image in order to respect * the preserveAspectRatio attribute * @private * @return {Object} */ - parsePreserveAspectRatioAttribute: function() { - var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), - rWidth = this._element.width, rHeight = this._element.height, - scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, - offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; - if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { - if (pAR.meetOrSlice === 'meet') { - scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); - offset = (pWidth - rWidth * scaleX) / 2; - if (pAR.alignX === 'Min') { - offsetLeft = -offset; - } - if (pAR.alignX === 'Max') { - offsetLeft = offset; - } - offset = (pHeight - rHeight * scaleY) / 2; - if (pAR.alignY === 'Min') { - offsetTop = -offset; - } - if (pAR.alignY === 'Max') { - offsetTop = offset; - } + parsePreserveAspectRatioAttribute: function() { + var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), + rWidth = this._element.width, rHeight = this._element.height, + scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, + offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; + if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { + if (pAR.meetOrSlice === 'meet') { + scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); + offset = (pWidth - rWidth * scaleX) / 2; + if (pAR.alignX === 'Min') { + offsetLeft = -offset; + } + if (pAR.alignX === 'Max') { + offsetLeft = offset; + } + offset = (pHeight - rHeight * scaleY) / 2; + if (pAR.alignY === 'Min') { + offsetTop = -offset; } - if (pAR.meetOrSlice === 'slice') { - scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); - offset = rWidth - pWidth / scaleX; - if (pAR.alignX === 'Mid') { - cropX = offset / 2; - } - if (pAR.alignX === 'Max') { - cropX = offset; - } - offset = rHeight - pHeight / scaleY; - if (pAR.alignY === 'Mid') { - cropY = offset / 2; - } - if (pAR.alignY === 'Max') { - cropY = offset; - } - rWidth = pWidth / scaleX; - rHeight = pHeight / scaleY; + if (pAR.alignY === 'Max') { + offsetTop = offset; } } - else { - scaleX = pWidth / rWidth; - scaleY = pHeight / rHeight; + if (pAR.meetOrSlice === 'slice') { + scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); + offset = rWidth - pWidth / scaleX; + if (pAR.alignX === 'Mid') { + cropX = offset / 2; + } + if (pAR.alignX === 'Max') { + cropX = offset; + } + offset = rHeight - pHeight / scaleY; + if (pAR.alignY === 'Mid') { + cropY = offset / 2; + } + if (pAR.alignY === 'Max') { + cropY = offset; + } + rWidth = pWidth / scaleX; + rHeight = pHeight / scaleY; } - return { - width: rWidth, - height: rHeight, - scaleX: scaleX, - scaleY: scaleY, - offsetLeft: offsetLeft, - offsetTop: offsetTop, - cropX: cropX, - cropY: cropY - }; } - }); + else { + scaleX = pWidth / rWidth; + scaleY = pHeight / rHeight; + } + return { + width: rWidth, + height: rHeight, + scaleX: scaleX, + scaleY: scaleY, + offsetLeft: offsetLeft, + offsetTop: offsetTop, + cropX: cropX, + cropY: cropY + }; + } +}); - /** +/** * Default CSS class name for canvas * @static * @type String * @default */ - fabric.Image.CSS_CANVAS = 'canvas-img'; +fabric.Image.CSS_CANVAS = 'canvas-img'; - /** +/** * Alias for getSrc * @static */ - fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; +fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; - /** +/** * Creates an instance of fabric.Image from its object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Image.fromObject = function(_object) { - var object = Object.assign({}, _object), - filters = object.filters, - resizeFilter = object.resizeFilter; - // the generic enliving will fail on filters for now - delete object.resizeFilter; - delete object.filters; - return Promise.all([ - fabric.util.loadImage(object.src, { crossOrigin: _object.crossOrigin }), - filters && fabric.util.enlivenObjects(filters, 'fabric.Image.filters'), - resizeFilter && fabric.util.enlivenObjects([resizeFilter], 'fabric.Image.filters'), - fabric.util.enlivenObjectEnlivables(object), - ]) - .then(function(imgAndFilters) { - object.filters = imgAndFilters[1] || []; - object.resizeFilter = imgAndFilters[2] && imgAndFilters[2][0]; - return new fabric.Image(imgAndFilters[0], Object.assign(object, imgAndFilters[3])); - }); - }; +fabric.Image.fromObject = function(_object) { + var object = Object.assign({}, _object), + filters = object.filters, + resizeFilter = object.resizeFilter; + // the generic enliving will fail on filters for now + delete object.resizeFilter; + delete object.filters; + return Promise.all([ + fabric.util.loadImage(object.src, { crossOrigin: _object.crossOrigin }), + filters && fabric.util.enlivenObjects(filters, 'fabric.Image.filters'), + resizeFilter && fabric.util.enlivenObjects([resizeFilter], 'fabric.Image.filters'), + fabric.util.enlivenObjectEnlivables(object), + ]) + .then(function(imgAndFilters) { + object.filters = imgAndFilters[1] || []; + object.resizeFilter = imgAndFilters[2] && imgAndFilters[2][0]; + return new fabric.Image(imgAndFilters[0], Object.assign(object, imgAndFilters[3])); + }); +}; - /** +/** * Creates an instance of fabric.Image from an URL string * @static * @param {String} url URL to create an image from * @param {Object} [imgOptions] Options object * @returns {Promise} */ - fabric.Image.fromURL = function(url, imgOptions) { - return fabric.util.loadImage(url, imgOptions || {}).then(function(img) { - return new fabric.Image(img, imgOptions); - }); - }; +fabric.Image.fromURL = function(url, imgOptions) { + return fabric.util.loadImage(url, imgOptions || {}).then(function(img) { + return new fabric.Image(img, imgOptions); + }); +}; - /* _FROM_SVG_START_ */ - /** +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement}) * @static * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement} */ - fabric.Image.ATTRIBUTE_NAMES = +fabric.Image.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( 'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ') ); - /** +/** * Returns {@link fabric.Image} instance from an SVG element * @static * @param {SVGElement} element Element to parse @@ -726,11 +726,11 @@ * @param {Function} callback Callback to execute when fabric.Image object is created * @return {fabric.Image} Instance of fabric.Image */ - fabric.Image.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); - fabric.Image.fromURL(parsedAttributes['xlink:href'], Object.assign({ }, options || { }, parsedAttributes)) - .then(function(fabricImage) { - callback(fabricImage); - }); - }; - /* _FROM_SVG_END_ */ +fabric.Image.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); + fabric.Image.fromURL(parsedAttributes['xlink:href'], Object.assign({ }, options || { }, parsedAttributes)) + .then(function(fabricImage) { + callback(fabricImage); + }); +}; +/* _FROM_SVG_END_ */ diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index ecd22bc931d..d438a5ff0b7 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -1,4 +1,4 @@ - /** +/** * IText class (introduced in v1.4) Events are also fired with "text:" * prefix when observing canvas. * @class fabric.IText @@ -44,65 +44,65 @@ * Select line: triple click * */ - fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { +fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'i-text', + type: 'i-text', - /** + /** * Index where text selection starts (or where cursor is when there is no selection) * @type Number * @default */ - selectionStart: 0, + selectionStart: 0, - /** + /** * Index where text selection ends * @type Number * @default */ - selectionEnd: 0, + selectionEnd: 0, - /** + /** * Color of text selection * @type String * @default */ - selectionColor: 'rgba(17,119,255,0.3)', + selectionColor: 'rgba(17,119,255,0.3)', - /** + /** * Indicates whether text is in editing mode * @type Boolean * @default */ - isEditing: false, + isEditing: false, - /** + /** * Indicates whether a text can be edited * @type Boolean * @default */ - editable: true, + editable: true, - /** + /** * Border color of text object while it's in editing mode * @type String * @default */ - editingBorderColor: 'rgba(102,153,255,0.25)', + editingBorderColor: 'rgba(102,153,255,0.25)', - /** + /** * Width of cursor (in px) * @type Number * @default */ - cursorWidth: 2, + cursorWidth: 2, - /** + /** * Color of text cursor color in editing mode. * if not set (default) will take color from the text. * if set to a color value that fabric can understand, it will @@ -110,30 +110,30 @@ * @type String * @default */ - cursorColor: '', + cursorColor: '', - /** + /** * Delay between cursor blink (in ms) * @type Number * @default */ - cursorDelay: 1000, + cursorDelay: 1000, - /** + /** * Duration of cursor fadein (in ms) * @type Number * @default */ - cursorDuration: 600, + cursorDuration: 600, - /** + /** * Indicates whether internal text char widths can be cached * @type Boolean * @default */ - caching: true, + caching: true, - /** + /** * DOM container to append the hiddenTextarea. * An alternative to attaching to the document.body. * Useful to reduce laggish redraw of the full document.body tree and @@ -141,364 +141,364 @@ * @type HTMLElement * @default */ - hiddenTextareaContainer: null, + hiddenTextareaContainer: null, - /** + /** * @private */ - _reSpace: /\s|\n/, + _reSpace: /\s|\n/, - /** + /** * @private */ - _currentCursorOpacity: 0, + _currentCursorOpacity: 0, - /** + /** * @private */ - _selectionDirection: null, + _selectionDirection: null, - /** + /** * @private */ - _abortCursorAnimation: false, + _abortCursorAnimation: false, - /** + /** * @private */ - __widthOfSpace: [], + __widthOfSpace: [], - /** + /** * Helps determining when the text is in composition, so that the cursor * rendering is altered. */ - inCompositionMode: false, + inCompositionMode: false, - /** + /** * Constructor * @param {String} text Text string * @param {Object} [options] Options object * @return {fabric.IText} thisArg */ - initialize: function(text, options) { - this.callSuper('initialize', text, options); - this.initBehavior(); - }, + initialize: function(text, options) { + this.callSuper('initialize', text, options); + this.initBehavior(); + }, - /** + /** * While editing handle differently * @private * @param {string} key * @param {*} value */ - _set: function (key, value) { - if (this.isEditing && this._savedProps && key in this._savedProps) { - this._savedProps[key] = value; - } - else { - this.callSuper('_set', key, value); - } - }, + _set: function (key, value) { + if (this.isEditing && this._savedProps && key in this._savedProps) { + this._savedProps[key] = value; + } + else { + this.callSuper('_set', key, value); + } + }, - /** + /** * Sets selection start (left boundary of a selection) * @param {Number} index Index to set selection start to */ - setSelectionStart: function(index) { - index = Math.max(index, 0); - this._updateAndFire('selectionStart', index); - }, + setSelectionStart: function(index) { + index = Math.max(index, 0); + this._updateAndFire('selectionStart', index); + }, - /** + /** * Sets selection end (right boundary of a selection) * @param {Number} index Index to set selection end to */ - setSelectionEnd: function(index) { - index = Math.min(index, this.text.length); - this._updateAndFire('selectionEnd', index); - }, + setSelectionEnd: function(index) { + index = Math.min(index, this.text.length); + this._updateAndFire('selectionEnd', index); + }, - /** + /** * @private * @param {String} property 'selectionStart' or 'selectionEnd' * @param {Number} index new position of property */ - _updateAndFire: function(property, index) { - if (this[property] !== index) { - this._fireSelectionChanged(); - this[property] = index; - } - this._updateTextarea(); - }, + _updateAndFire: function(property, index) { + if (this[property] !== index) { + this._fireSelectionChanged(); + this[property] = index; + } + this._updateTextarea(); + }, - /** + /** * Fires the even of selection changed * @private */ - _fireSelectionChanged: function() { - this.fire('selection:changed'); - this.canvas && this.canvas.fire('text:selection:changed', { target: this }); - }, + _fireSelectionChanged: function() { + this.fire('selection:changed'); + this.canvas && this.canvas.fire('text:selection:changed', { target: this }); + }, - /** + /** * Initialize text dimensions. Render all text on given context * or on a offscreen canvas to get the text width with measureText. * Updates this.width and this.height with the proper values. * Does not return dimensions. * @private */ - initDimensions: function() { - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this.callSuper('initDimensions'); - }, + initDimensions: function() { + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this.callSuper('initDimensions'); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - render: function(ctx) { - this.clearContextTop(); - this.callSuper('render', ctx); - // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor - // the correct position but not at every cursor animation. - this.cursorOffsetCache = { }; - this.renderCursorOrSelection(); - }, + render: function(ctx) { + this.clearContextTop(); + this.callSuper('render', ctx); + // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor + // the correct position but not at every cursor animation. + this.cursorOffsetCache = { }; + this.renderCursorOrSelection(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - this.callSuper('_render', ctx); - }, + _render: function(ctx) { + this.callSuper('_render', ctx); + }, - /** + /** * Prepare and clean the contextTop */ - clearContextTop: function(skipRestore) { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; - } - var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - this.transform(ctx); - this._clearTextArea(ctx); - skipRestore || ctx.restore(); - }, - /** + clearContextTop: function(skipRestore) { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this.transform(ctx); + this._clearTextArea(ctx); + skipRestore || ctx.restore(); + }, + /** * Renders cursor or selection (depending on what exists) * it does on the contextTop. If contextTop is not available, do nothing. */ - renderCursorOrSelection: function() { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; - } - var boundaries = this._getCursorBoundaries(), - ctx = this.canvas.contextTop; - this.clearContextTop(true); - if (this.selectionStart === this.selectionEnd) { - this.renderCursor(boundaries, ctx); - } - else { - this.renderSelection(boundaries, ctx); - } - ctx.restore(); - }, + renderCursorOrSelection: function() { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var boundaries = this._getCursorBoundaries(), + ctx = this.canvas.contextTop; + this.clearContextTop(true); + if (this.selectionStart === this.selectionEnd) { + this.renderCursor(boundaries, ctx); + } + else { + this.renderSelection(boundaries, ctx); + } + ctx.restore(); + }, - _clearTextArea: function(ctx) { - // we add 4 pixel, to be sure to do not leave any pixel out - var width = this.width + 4, height = this.height + 4; - ctx.clearRect(-width / 2, -height / 2, width, height); - }, + _clearTextArea: function(ctx) { + // we add 4 pixel, to be sure to do not leave any pixel out + var width = this.width + 4, height = this.height + 4; + ctx.clearRect(-width / 2, -height / 2, width, height); + }, - /** + /** * Returns cursor boundaries (left, top, leftOffset, topOffset) * @private * @param {Array} chars Array of characters * @param {String} typeOfBoundaries */ - _getCursorBoundaries: function(position) { + _getCursorBoundaries: function(position) { - // left/top are left/top of entire text box - // leftOffset/topOffset are offset from that left/top point of a text box + // left/top are left/top of entire text box + // leftOffset/topOffset are offset from that left/top point of a text box - if (typeof position === 'undefined') { - position = this.selectionStart; - } + if (typeof position === 'undefined') { + position = this.selectionStart; + } + + var left = this._getLeftOffset(), + top = this._getTopOffset(), + offsets = this._getCursorBoundariesOffsets(position); + return { + left: left, + top: top, + leftOffset: offsets.left, + topOffset: offsets.top + }; + }, - var left = this._getLeftOffset(), - top = this._getTopOffset(), - offsets = this._getCursorBoundariesOffsets(position); - return { - left: left, - top: top, - leftOffset: offsets.left, - topOffset: offsets.top - }; - }, - - /** + /** * @private */ - _getCursorBoundariesOffsets: function(position) { - if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { - return this.cursorOffsetCache; - } - var lineLeftOffset, - lineIndex, - charIndex, - topOffset = 0, - leftOffset = 0, - boundaries, - cursorPosition = this.get2DCursorLocation(position); - charIndex = cursorPosition.charIndex; - lineIndex = cursorPosition.lineIndex; - for (var i = 0; i < lineIndex; i++) { - topOffset += this.getHeightOfLine(i); + _getCursorBoundariesOffsets: function(position) { + if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { + return this.cursorOffsetCache; + } + var lineLeftOffset, + lineIndex, + charIndex, + topOffset = 0, + leftOffset = 0, + boundaries, + cursorPosition = this.get2DCursorLocation(position); + charIndex = cursorPosition.charIndex; + lineIndex = cursorPosition.lineIndex; + for (var i = 0; i < lineIndex; i++) { + topOffset += this.getHeightOfLine(i); + } + lineLeftOffset = this._getLineLeftOffset(lineIndex); + var bound = this.__charBounds[lineIndex][charIndex]; + bound && (leftOffset = bound.left); + if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { + leftOffset -= this._getWidthOfCharSpacing(); + } + boundaries = { + top: topOffset, + left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), + }; + if (this.direction === 'rtl') { + if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { + boundaries.left *= -1; } - lineLeftOffset = this._getLineLeftOffset(lineIndex); - var bound = this.__charBounds[lineIndex][charIndex]; - bound && (leftOffset = bound.left); - if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { - leftOffset -= this._getWidthOfCharSpacing(); + else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { + boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); } - boundaries = { - top: topOffset, - left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), - }; - if (this.direction === 'rtl') { - if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { - boundaries.left *= -1; - } - else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { - boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); - } - else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { - boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); - } + else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { + boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); } - this.cursorOffsetCache = boundaries; - return this.cursorOffsetCache; - }, + } + this.cursorOffsetCache = boundaries; + return this.cursorOffsetCache; + }, - /** + /** * Renders cursor * @param {Object} boundaries * @param {CanvasRenderingContext2D} ctx transformed context to draw on */ - renderCursor: function(boundaries, ctx) { - var cursorLocation = this.get2DCursorLocation(), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), - multiplier = this.scaleX * this.canvas.getZoom(), - cursorWidth = this.cursorWidth / multiplier, - topOffset = boundaries.topOffset, - dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); - topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight + renderCursor: function(boundaries, ctx) { + var cursorLocation = this.get2DCursorLocation(), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), + multiplier = this.scaleX * this.canvas.getZoom(), + cursorWidth = this.cursorWidth / multiplier, + topOffset = boundaries.topOffset, + dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); + topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight - charHeight * (1 - this._fontSizeFraction); - if (this.inCompositionMode) { - this.renderSelection(boundaries, ctx); - } - ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); - ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; - ctx.fillRect( - boundaries.left + boundaries.leftOffset - cursorWidth / 2, - topOffset + boundaries.top + dy, - cursorWidth, - charHeight); - }, + if (this.inCompositionMode) { + this.renderSelection(boundaries, ctx); + } + ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); + ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; + ctx.fillRect( + boundaries.left + boundaries.leftOffset - cursorWidth / 2, + topOffset + boundaries.top + dy, + cursorWidth, + charHeight); + }, - /** + /** * Renders text selection * @param {Object} boundaries Object with left/top/leftOffset/topOffset * @param {CanvasRenderingContext2D} ctx transformed context to draw on */ - renderSelection: function(boundaries, ctx) { - - var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, - selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, - isJustify = this.textAlign.indexOf('justify') !== -1, - start = this.get2DCursorLocation(selectionStart), - end = this.get2DCursorLocation(selectionEnd), - startLine = start.lineIndex, - endLine = end.lineIndex, - startChar = start.charIndex < 0 ? 0 : start.charIndex, - endChar = end.charIndex < 0 ? 0 : end.charIndex; - - for (var i = startLine; i <= endLine; i++) { - var lineOffset = this._getLineLeftOffset(i) || 0, - lineHeight = this.getHeightOfLine(i), - realLineHeight = 0, boxStart = 0, boxEnd = 0; - - if (i === startLine) { - boxStart = this.__charBounds[startLine][startChar].left; - } - if (i >= startLine && i < endLine) { - boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? + renderSelection: function(boundaries, ctx) { + + var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, + selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, + isJustify = this.textAlign.indexOf('justify') !== -1, + start = this.get2DCursorLocation(selectionStart), + end = this.get2DCursorLocation(selectionEnd), + startLine = start.lineIndex, + endLine = end.lineIndex, + startChar = start.charIndex < 0 ? 0 : start.charIndex, + endChar = end.charIndex < 0 ? 0 : end.charIndex; + + for (var i = startLine; i <= endLine; i++) { + var lineOffset = this._getLineLeftOffset(i) || 0, + lineHeight = this.getHeightOfLine(i), + realLineHeight = 0, boxStart = 0, boxEnd = 0; + + if (i === startLine) { + boxStart = this.__charBounds[startLine][startChar].left; + } + if (i >= startLine && i < endLine) { + boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? + } + else if (i === endLine) { + if (endChar === 0) { + boxEnd = this.__charBounds[endLine][endChar].left; } - else if (i === endLine) { - if (endChar === 0) { - boxEnd = this.__charBounds[endLine][endChar].left; - } - else { - var charSpacing = this._getWidthOfCharSpacing(); - boxEnd = this.__charBounds[endLine][endChar - 1].left + else { + var charSpacing = this._getWidthOfCharSpacing(); + boxEnd = this.__charBounds[endLine][endChar - 1].left + this.__charBounds[endLine][endChar - 1].width - charSpacing; - } - } - realLineHeight = lineHeight; - if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { - lineHeight /= this.lineHeight; } - var drawStart = boundaries.left + lineOffset + boxStart, - drawWidth = boxEnd - boxStart, - drawHeight = lineHeight, extraTop = 0; - if (this.inCompositionMode) { - ctx.fillStyle = this.compositionColor || 'black'; - drawHeight = 1; - extraTop = lineHeight; + } + realLineHeight = lineHeight; + if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { + lineHeight /= this.lineHeight; + } + var drawStart = boundaries.left + lineOffset + boxStart, + drawWidth = boxEnd - boxStart, + drawHeight = lineHeight, extraTop = 0; + if (this.inCompositionMode) { + ctx.fillStyle = this.compositionColor || 'black'; + drawHeight = 1; + extraTop = lineHeight; + } + else { + ctx.fillStyle = this.selectionColor; + } + if (this.direction === 'rtl') { + if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { + drawStart = this.width - drawStart - drawWidth; } - else { - ctx.fillStyle = this.selectionColor; + else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { + drawStart = boundaries.left + lineOffset - boxEnd; } - if (this.direction === 'rtl') { - if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { - drawStart = this.width - drawStart - drawWidth; - } - else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { - drawStart = boundaries.left + lineOffset - boxEnd; - } - else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { - drawStart = boundaries.left + lineOffset - boxEnd; - } + else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { + drawStart = boundaries.left + lineOffset - boxEnd; } - ctx.fillRect( - drawStart, - boundaries.top + boundaries.topOffset + extraTop, - drawWidth, - drawHeight); - boundaries.topOffset += realLineHeight; } - }, + ctx.fillRect( + drawStart, + boundaries.top + boundaries.topOffset + extraTop, + drawWidth, + drawHeight); + boundaries.topOffset += realLineHeight; + } + }, - /** + /** * High level function to know the height of the cursor. * the currentChar is the one that precedes the cursor * Returns fontSize of char at the current cursor * Unused from the library, is for the end user * @return {Number} Character font size */ - getCurrentCharFontSize: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); - }, + getCurrentCharFontSize: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); + }, - /** + /** * High level function to know the color of the cursor. * the currentChar is the one that precedes the cursor * Returns color (fill) of char at the current cursor @@ -506,29 +506,29 @@ * Unused by the library, is for the end user * @return {String | fabric.Gradient | fabric.Pattern} Character color (fill) */ - getCurrentCharColor: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); - }, + getCurrentCharColor: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); + }, - /** + /** * Returns the cursor position for the getCurrent.. functions * @private */ - _getCurrentCharIndex: function() { - var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), - charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; - return { l: cursorPosition.lineIndex, c: charIndex }; - } - }); + _getCurrentCharIndex: function() { + var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), + charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; + return { l: cursorPosition.lineIndex, c: charIndex }; + } +}); - /** +/** * Returns fabric.IText instance from an object representation * @static * @memberOf fabric.IText * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.IText.fromObject = function(object) { - return fabric.Object._fromObject(fabric.IText, object, 'text'); - }; +fabric.IText.fromObject = function(object) { + return fabric.Object._fromObject(fabric.IText, object, 'text'); +}; diff --git a/src/shapes/line.class.js b/src/shapes/line.class.js index b9f1d00960c..a948b3bf99c 100644 --- a/src/shapes/line.class.js +++ b/src/shapes/line.class.js @@ -1,255 +1,255 @@ - var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; +var fabric = exports.fabric || (exports.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; - /** +/** * Line class * @class fabric.Line * @extends fabric.Object * @see {@link fabric.Line#initialize} for constructor definition */ - fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { +fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'line', + type: 'line', - /** + /** * x value or first line edge * @type Number * @default */ - x1: 0, + x1: 0, - /** + /** * y value or first line edge * @type Number * @default */ - y1: 0, + y1: 0, - /** + /** * x value or second line edge * @type Number * @default */ - x2: 0, + x2: 0, - /** + /** * y value or second line edge * @type Number * @default */ - y2: 0, + y2: 0, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), - /** + /** * Constructor * @param {Array} [points] Array of points * @param {Object} [options] Options object * @return {fabric.Line} thisArg */ - initialize: function(points, options) { - if (!points) { - points = [0, 0, 0, 0]; - } + initialize: function(points, options) { + if (!points) { + points = [0, 0, 0, 0]; + } - this.callSuper('initialize', options); + this.callSuper('initialize', options); - this.set('x1', points[0]); - this.set('y1', points[1]); - this.set('x2', points[2]); - this.set('y2', points[3]); + this.set('x1', points[0]); + this.set('y1', points[1]); + this.set('x2', points[2]); + this.set('y2', points[3]); - this._setWidthHeight(options); - }, + this._setWidthHeight(options); + }, - /** + /** * @private * @param {Object} [options] Options */ - _setWidthHeight: function(options) { - options || (options = { }); + _setWidthHeight: function(options) { + options || (options = { }); - this.width = Math.abs(this.x2 - this.x1); - this.height = Math.abs(this.y2 - this.y1); + this.width = Math.abs(this.x2 - this.x1); + this.height = Math.abs(this.y2 - this.y1); - this.left = 'left' in options - ? options.left - : this._getLeftToOriginX(); + this.left = 'left' in options + ? options.left + : this._getLeftToOriginX(); - this.top = 'top' in options - ? options.top - : this._getTopToOriginY(); - }, + this.top = 'top' in options + ? options.top + : this._getTopToOriginY(); + }, - /** + /** * @private * @param {String} key * @param {*} value */ - _set: function(key, value) { - this.callSuper('_set', key, value); - if (typeof coordProps[key] !== 'undefined') { - this._setWidthHeight(); - } - return this; - }, + _set: function(key, value) { + this.callSuper('_set', key, value); + if (typeof coordProps[key] !== 'undefined') { + this._setWidthHeight(); + } + return this; + }, - /** + /** * @private * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line. */ - _getLeftToOriginX: makeEdgeToOriginGetter( - { // property names - origin: 'originX', - axis1: 'x1', - axis2: 'x2', - dimension: 'width' - }, - { // possible values of origin - nearest: 'left', - center: 'center', - farthest: 'right' - } - ), + _getLeftToOriginX: makeEdgeToOriginGetter( + { // property names + origin: 'originX', + axis1: 'x1', + axis2: 'x2', + dimension: 'width' + }, + { // possible values of origin + nearest: 'left', + center: 'center', + farthest: 'right' + } + ), - /** + /** * @private * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line. */ - _getTopToOriginY: makeEdgeToOriginGetter( - { // property names - origin: 'originY', - axis1: 'y1', - axis2: 'y2', - dimension: 'height' - }, - { // possible values of origin - nearest: 'top', - center: 'center', - farthest: 'bottom' - } - ), + _getTopToOriginY: makeEdgeToOriginGetter( + { // property names + origin: 'originY', + axis1: 'y1', + axis2: 'y2', + dimension: 'height' + }, + { // possible values of origin + nearest: 'top', + center: 'center', + farthest: 'bottom' + } + ), - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - ctx.beginPath(); + _render: function(ctx) { + ctx.beginPath(); - var p = this.calcLinePoints(); - ctx.moveTo(p.x1, p.y1); - ctx.lineTo(p.x2, p.y2); + var p = this.calcLinePoints(); + ctx.moveTo(p.x1, p.y1); + ctx.lineTo(p.x2, p.y2); - ctx.lineWidth = this.strokeWidth; + ctx.lineWidth = this.strokeWidth; - // TODO: test this - // make sure setting "fill" changes color of a line - // (by copying fillStyle to strokeStyle, since line is stroked, not filled) - var origStrokeStyle = ctx.strokeStyle; - ctx.strokeStyle = this.stroke || ctx.fillStyle; - this.stroke && this._renderStroke(ctx); - ctx.strokeStyle = origStrokeStyle; - }, + // TODO: test this + // make sure setting "fill" changes color of a line + // (by copying fillStyle to strokeStyle, since line is stroked, not filled) + var origStrokeStyle = ctx.strokeStyle; + ctx.strokeStyle = this.stroke || ctx.fillStyle; + this.stroke && this._renderStroke(ctx); + ctx.strokeStyle = origStrokeStyle; + }, - /** + /** * This function is an helper for svg import. it returns the center of the object in the svg * untransformed coordinates * @private * @return {Object} center point from element coordinates */ - _findCenterFromElement: function() { - return { - x: (this.x1 + this.x2) / 2, - y: (this.y1 + this.y2) / 2, - }; - }, + _findCenterFromElement: function() { + return { + x: (this.x1 + this.x2) / 2, + y: (this.y1 + this.y2) / 2, + }; + }, - /** + /** * Returns object representation of an instance * @method toObject * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); - }, + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); + }, - /* + /* * Calculate object dimensions from its properties * @private */ - _getNonTransformedDimensions: function() { - var dim = this.callSuper('_getNonTransformedDimensions'); - if (this.strokeLineCap === 'butt') { - if (this.width === 0) { - dim.y -= this.strokeWidth; - } - if (this.height === 0) { - dim.x -= this.strokeWidth; - } + _getNonTransformedDimensions: function() { + var dim = this.callSuper('_getNonTransformedDimensions'); + if (this.strokeLineCap === 'butt') { + if (this.width === 0) { + dim.y -= this.strokeWidth; } - return dim; - }, + if (this.height === 0) { + dim.x -= this.strokeWidth; + } + } + return dim; + }, - /** + /** * Recalculates line points given width and height * @private */ - calcLinePoints: function() { - var xMult = this.x1 <= this.x2 ? -1 : 1, - yMult = this.y1 <= this.y2 ? -1 : 1, - x1 = (xMult * this.width * 0.5), - y1 = (yMult * this.height * 0.5), - x2 = (xMult * this.width * -0.5), - y2 = (yMult * this.height * -0.5); - - return { - x1: x1, - x2: x2, - y1: y1, - y2: y2 - }; - }, + calcLinePoints: function() { + var xMult = this.x1 <= this.x2 ? -1 : 1, + yMult = this.y1 <= this.y2 ? -1 : 1, + x1 = (xMult * this.width * 0.5), + y1 = (yMult * this.height * 0.5), + x2 = (xMult * this.width * -0.5), + y2 = (yMult * this.height * -0.5); + + return { + x1: x1, + x2: x2, + y1: y1, + y2: y2 + }; + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var p = this.calcLinePoints(); - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - }); - - /* _FROM_SVG_START_ */ - /** + _toSVG: function() { + var p = this.calcLinePoints(); + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ +}); + +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement}) * @static * @memberOf fabric.Line * @see http://www.w3.org/TR/SVG/shapes.html#LineElement */ - fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); +fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); - /** +/** * Returns fabric.Line instance from an SVG element * @static * @memberOf fabric.Line @@ -257,57 +257,57 @@ * @param {Object} [options] Options object * @param {Function} [callback] callback function invoked after parsing */ - fabric.Line.fromElement = function(element, callback, options) { - options = options || { }; - var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), - points = [ - parsedAttributes.x1 || 0, - parsedAttributes.y1 || 0, - parsedAttributes.x2 || 0, - parsedAttributes.y2 || 0 - ]; - callback(new fabric.Line(points, extend(parsedAttributes, options))); - }; - /* _FROM_SVG_END_ */ +fabric.Line.fromElement = function(element, callback, options) { + options = options || { }; + var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), + points = [ + parsedAttributes.x1 || 0, + parsedAttributes.y1 || 0, + parsedAttributes.x2 || 0, + parsedAttributes.y2 || 0 + ]; + callback(new fabric.Line(points, extend(parsedAttributes, options))); +}; +/* _FROM_SVG_END_ */ - /** +/** * Returns fabric.Line instance from an object representation * @static * @memberOf fabric.Line * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Line.fromObject = function(object) { - var options = clone(object, true); - options.points = [object.x1, object.y1, object.x2, object.y2]; - return fabric.Object._fromObject(fabric.Line, options, 'points').then(function(fabricLine) { - delete fabricLine.points; - return fabricLine; - }); - }; +fabric.Line.fromObject = function(object) { + var options = clone(object, true); + options.points = [object.x1, object.y1, object.x2, object.y2]; + return fabric.Object._fromObject(fabric.Line, options, 'points').then(function(fabricLine) { + delete fabricLine.points; + return fabricLine; + }); +}; - /** +/** * Produces a function that calculates distance from canvas edge to Line origin. */ - function makeEdgeToOriginGetter(propertyNames, originValues) { - var origin = propertyNames.origin, - axis1 = propertyNames.axis1, - axis2 = propertyNames.axis2, - dimension = propertyNames.dimension, - nearest = originValues.nearest, - center = originValues.center, - farthest = originValues.farthest; - - return function() { - switch (this.get(origin)) { - case nearest: - return Math.min(this.get(axis1), this.get(axis2)); - case center: - return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); - case farthest: - return Math.max(this.get(axis1), this.get(axis2)); - } - }; +function makeEdgeToOriginGetter(propertyNames, originValues) { + var origin = propertyNames.origin, + axis1 = propertyNames.axis1, + axis2 = propertyNames.axis2, + dimension = propertyNames.dimension, + nearest = originValues.nearest, + center = originValues.center, + farthest = originValues.farthest; + + return function() { + switch (this.get(origin)) { + case nearest: + return Math.min(this.get(axis1), this.get(axis2)); + case center: + return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); + case farthest: + return Math.max(this.get(axis1), this.get(axis2)); + } + }; - } +} diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 1f8b6c87865..cb435b8e5cf 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1,13 +1,13 @@ - var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed, - capitalize = fabric.util.string.capitalize, - degreesToRadians = fabric.util.degreesToRadians, - objectCaching = !fabric.isLikelyNode, - ALIASING_LIMIT = 2; - - /** +var fabric = exports.fabric || (exports.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed, + capitalize = fabric.util.string.capitalize, + degreesToRadians = fabric.util.degreesToRadians, + objectCaching = !fabric.isLikelyNode, + ALIASING_LIMIT = 2; + +/** * Root object class from which all 2d shape classes inherit from * @class fabric.Object * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#objects} @@ -42,203 +42,203 @@ * @fires dragleave * @fires drop */ - fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { +fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { - /** + /** * Type of an object (rect, circle, path, etc.). * Note that this property is meant to be read-only and not meant to be modified. * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly. * @type String * @default */ - type: 'object', + type: 'object', - /** + /** * Horizontal origin of transformation of an object (one of "left", "right", "center") * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups * @type String * @default */ - originX: 'left', + originX: 'left', - /** + /** * Vertical origin of transformation of an object (one of "top", "bottom", "center") * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups * @type String * @default */ - originY: 'top', + originY: 'top', - /** + /** * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom} * @type Number * @default */ - top: 0, + top: 0, - /** + /** * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right} * @type Number * @default */ - left: 0, + left: 0, - /** + /** * Object width * @type Number * @default */ - width: 0, + width: 0, - /** + /** * Object height * @type Number * @default */ - height: 0, + height: 0, - /** + /** * Object scale factor (horizontal) * @type Number * @default */ - scaleX: 1, + scaleX: 1, - /** + /** * Object scale factor (vertical) * @type Number * @default */ - scaleY: 1, + scaleY: 1, - /** + /** * When true, an object is rendered as flipped horizontally * @type Boolean * @default */ - flipX: false, + flipX: false, - /** + /** * When true, an object is rendered as flipped vertically * @type Boolean * @default */ - flipY: false, + flipY: false, - /** + /** * Opacity of an object * @type Number * @default */ - opacity: 1, + opacity: 1, - /** + /** * Angle of rotation of an object (in degrees) * @type Number * @default */ - angle: 0, + angle: 0, - /** + /** * Angle of skew on x axes of an object (in degrees) * @type Number * @default */ - skewX: 0, + skewX: 0, - /** + /** * Angle of skew on y axes of an object (in degrees) * @type Number * @default */ - skewY: 0, + skewY: 0, - /** + /** * Size of object's controlling corners (in pixels) * @type Number * @default */ - cornerSize: 13, + cornerSize: 13, - /** + /** * Size of object's controlling corners when touch interaction is detected * @type Number * @default */ - touchCornerSize: 24, + touchCornerSize: 24, - /** + /** * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) * @type Boolean * @default */ - transparentCorners: true, + transparentCorners: true, - /** + /** * Default cursor value used when hovering over this object on canvas * @type String * @default */ - hoverCursor: null, + hoverCursor: null, - /** + /** * Default cursor value used when moving this object on canvas * @type String * @default */ - moveCursor: null, + moveCursor: null, - /** + /** * Padding between object and its controlling borders (in pixels) * @type Number * @default */ - padding: 0, + padding: 0, - /** + /** * Color of controlling borders of an object (when it's active) * @type String * @default */ - borderColor: 'rgb(178,204,255)', + borderColor: 'rgb(178,204,255)', - /** + /** * Array specifying dash pattern of an object's borders (hasBorder must be true) * @since 1.6.2 * @type Array */ - borderDashArray: null, + borderDashArray: null, - /** + /** * Color of controlling corners of an object (when it's active) * @type String * @default */ - cornerColor: 'rgb(178,204,255)', + cornerColor: 'rgb(178,204,255)', - /** + /** * Color of controlling corners of an object (when it's active and transparentCorners false) * @since 1.6.2 * @type String * @default */ - cornerStrokeColor: null, + cornerStrokeColor: null, - /** + /** * Specify style of control, 'rect' or 'circle' * @since 1.6.2 * @type String */ - cornerStyle: 'rect', + cornerStyle: 'rect', - /** + /** * Array specifying dash pattern of an object's control (hasBorder must be true) * @since 1.6.2 * @type Array */ - cornerDashArray: null, + cornerDashArray: null, - /** + /** * When true, this object will use center point as the origin of transformation * when being scaled via the controls. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). @@ -246,9 +246,9 @@ * @type Boolean * @default */ - centeredScaling: false, + centeredScaling: false, - /** + /** * When true, this object will use center point as the origin of transformation * when being rotated via the controls. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). @@ -256,112 +256,112 @@ * @type Boolean * @default */ - centeredRotation: true, + centeredRotation: true, - /** + /** * Color of object's fill * takes css colors https://www.w3.org/TR/css-color-3/ * @type String * @default */ - fill: 'rgb(0,0,0)', + fill: 'rgb(0,0,0)', - /** + /** * Fill rule used to fill an object * accepted values are nonzero, evenodd * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead) * @type String * @default */ - fillRule: 'nonzero', + fillRule: 'nonzero', - /** + /** * Composite rule used for canvas globalCompositeOperation * @type String * @default */ - globalCompositeOperation: 'source-over', + globalCompositeOperation: 'source-over', - /** + /** * Background color of an object. * takes css colors https://www.w3.org/TR/css-color-3/ * @type String * @default */ - backgroundColor: '', + backgroundColor: '', - /** + /** * Selection Background color of an object. colored layer behind the object when it is active. * does not mix good with globalCompositeOperation methods. * @type String * @default */ - selectionBackgroundColor: '', + selectionBackgroundColor: '', - /** + /** * When defined, an object is rendered via stroke and this property specifies its color * takes css colors https://www.w3.org/TR/css-color-3/ * @type String * @default */ - stroke: null, + stroke: null, - /** + /** * Width of a stroke used to render this object * @type Number * @default */ - strokeWidth: 1, + strokeWidth: 1, - /** + /** * Array specifying dash pattern of an object's stroke (stroke must be defined) * @type Array */ - strokeDashArray: null, + strokeDashArray: null, - /** + /** * Line offset of an object's stroke * @type Number * @default */ - strokeDashOffset: 0, + strokeDashOffset: 0, - /** + /** * Line endings style of an object's stroke (one of "butt", "round", "square") * @type String * @default */ - strokeLineCap: 'butt', + strokeLineCap: 'butt', - /** + /** * Corner style of an object's stroke (one of "bevel", "round", "miter") * @type String * @default */ - strokeLineJoin: 'miter', + strokeLineJoin: 'miter', - /** + /** * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke * @type Number * @default */ - strokeMiterLimit: 4, + strokeMiterLimit: 4, - /** + /** * Shadow object representing shadow of this shape * @type fabric.Shadow * @default */ - shadow: null, + shadow: null, - /** + /** * Opacity of object's controlling borders when object is active and moving * @type Number * @default */ - borderOpacityWhenMoving: 0.4, + borderOpacityWhenMoving: 0.4, - /** + /** * Scale factor of object's controlling borders * bigger number will make a thicker border * border is 1, so this is basically a border thickness @@ -369,130 +369,130 @@ * @type Number * @default */ - borderScaleFactor: 1, + borderScaleFactor: 1, - /** + /** * Minimum allowed scale value of an object * @type Number * @default */ - minScaleLimit: 0, + minScaleLimit: 0, - /** + /** * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection). * But events still fire on it. * @type Boolean * @default */ - selectable: true, + selectable: true, - /** + /** * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4 * @type Boolean * @default */ - evented: true, + evented: true, - /** + /** * When set to `false`, an object is not rendered on canvas * @type Boolean * @default */ - visible: true, + visible: true, - /** + /** * When set to `false`, object's controls are not displayed and can not be used to manipulate object * @type Boolean * @default */ - hasControls: true, + hasControls: true, - /** + /** * When set to `false`, object's controlling borders are not rendered * @type Boolean * @default */ - hasBorders: true, + hasBorders: true, - /** + /** * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box * @type Boolean * @default */ - perPixelTargetFind: false, + perPixelTargetFind: false, - /** + /** * When `false`, default object's values are not included in its serialization * @type Boolean * @default */ - includeDefaultValues: true, + includeDefaultValues: true, - /** + /** * When `true`, object horizontal movement is locked * @type Boolean * @default */ - lockMovementX: false, + lockMovementX: false, - /** + /** * When `true`, object vertical movement is locked * @type Boolean * @default */ - lockMovementY: false, + lockMovementY: false, - /** + /** * When `true`, object rotation is locked * @type Boolean * @default */ - lockRotation: false, + lockRotation: false, - /** + /** * When `true`, object horizontal scaling is locked * @type Boolean * @default */ - lockScalingX: false, + lockScalingX: false, - /** + /** * When `true`, object vertical scaling is locked * @type Boolean * @default */ - lockScalingY: false, + lockScalingY: false, - /** + /** * When `true`, object horizontal skewing is locked * @type Boolean * @default */ - lockSkewingX: false, + lockSkewingX: false, - /** + /** * When `true`, object vertical skewing is locked * @type Boolean * @default */ - lockSkewingY: false, + lockSkewingY: false, - /** + /** * When `true`, object cannot be flipped by scaling into negative values * @type Boolean * @default */ - lockScalingFlip: false, + lockScalingFlip: false, - /** + /** * When `true`, object is not exported in OBJECT/JSON * @since 1.6.3 * @type Boolean * @default */ - excludeFromExport: false, + excludeFromExport: false, - /** + /** * When `true`, object is cached on an additional canvas. * When `false`, object is not cached unless necessary ( clipPath ) * default to true @@ -500,9 +500,9 @@ * @type Boolean * @default true */ - objectCaching: objectCaching, + objectCaching: objectCaching, - /** + /** * When `true`, object properties are checked for cache invalidation. In some particular * situation you may want this to be disabled ( spray brush, very big, groups) * or if your application does not allow you to modify properties for groups child you want @@ -512,9 +512,9 @@ * @type Boolean * @default false */ - statefullCache: false, + statefullCache: false, - /** + /** * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled * too much and will be redrawn with correct details at the end of scaling. * this setting is performance and application dependant. @@ -523,9 +523,9 @@ * @type Boolean * @default true */ - noScaleCache: true, + noScaleCache: true, - /** + /** * When `false`, the stoke width will scale with the object. * When `true`, the stroke will always match the exact pixel size entered for stroke width. * this Property does not work on Text classes or drawing call that uses strokeText,fillText methods @@ -536,17 +536,17 @@ * @type Boolean * @default false */ - strokeUniform: false, + strokeUniform: false, - /** + /** * When set to `true`, object's cache will be rerendered next render call. * since 1.7.0 * @type Boolean * @default true */ - dirty: true, + dirty: true, - /** + /** * keeps the value of the last hovered corner during mouse move. * 0 is no corner, or 'mt', 'ml', 'mtr' etc.. * It should be private, but there is no harm in using it as @@ -554,16 +554,16 @@ * @type number|string|any * @default 0 */ - __corner: 0, + __corner: 0, - /** + /** * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") * @type String * @default */ - paintFirst: 'fill', + paintFirst: 'fill', - /** + /** * When 'down', object is set to active on mousedown/touchstart * When 'up', object is set to active on mouseup/touchend * Experimental. Let's see if this breaks anything before supporting officially @@ -572,60 +572,60 @@ * @type String * @default 'down' */ - activeOn: 'down', + activeOn: 'down', - /** + /** * List of properties to consider when checking if state * of an object is changed (fabric.Object#hasStateChanged) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: ( - 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + + stateProperties: ( + 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + 'angle opacity fill globalCompositeOperation shadow visible backgroundColor ' + 'skewX skewY fillRule paintFirst clipPath strokeUniform' - ).split(' '), + ).split(' '), - /** + /** * List of properties to consider when checking if cache needs refresh * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty * and refreshed at the next render * @type Array */ - cacheProperties: ( - 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + + cacheProperties: ( + 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath' - ).split(' '), + ).split(' '), - /** + /** * List of properties to consider for animating colors. * @type Array */ - colorProperties: ( - 'fill stroke backgroundColor' - ).split(' '), + colorProperties: ( + 'fill stroke backgroundColor' + ).split(' '), - /** + /** * a fabricObject that, without stroke define a clipping area with their shape. filled in black * the clipPath object gets used when the object has rendered, and the context is placed in the center * of the object cacheCanvas. * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' * @type fabric.Object */ - clipPath: undefined, + clipPath: undefined, - /** + /** * Meaningful ONLY when the object is used as clipPath. * if true, the clipPath will make the object clip to the outside of the clipPath * since 2.4.0 * @type boolean * @default false */ - inverted: false, + inverted: false, - /** + /** * Meaningful ONLY when the object is used as clipPath. * if true, the clipPath will have its top and left relative to canvas, and will * not be influenced by the object transform. This will make the clipPath relative @@ -635,32 +635,32 @@ * @type boolean * @default false */ - absolutePositioned: false, + absolutePositioned: false, - /** + /** * Constructor * @param {Object} [options] Options object */ - initialize: function(options) { - if (options) { - this.setOptions(options); - } - }, + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, - /** + /** * Create a the canvas used to keep the cached copy of the object * @private */ - _createCacheCanvas: function() { - this._cacheProperties = {}; - this._cacheCanvas = fabric.util.createCanvasElement(); - this._cacheContext = this._cacheCanvas.getContext('2d'); - this._updateCacheCanvas(); - // if canvas gets created, is empty, so dirty. - this.dirty = true; - }, + _createCacheCanvas: function() { + this._cacheProperties = {}; + this._cacheCanvas = fabric.util.createCanvasElement(); + this._cacheContext = this._cacheCanvas.getContext('2d'); + this._updateCacheCanvas(); + // if canvas gets created, is empty, so dirty. + this.dirty = true; + }, - /** + /** * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal * and each side do not cross fabric.cacheSideLimit * those numbers are configurable so that you can get as much detail as you want @@ -675,37 +675,37 @@ * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _limitCacheSize: function(dims) { - var perfLimitSizeTotal = fabric.perfLimitSizeTotal, - width = dims.width, height = dims.height, - max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; - if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { - if (width < min) { - dims.width = min; - } - if (height < min) { - dims.height = min; - } - return dims; + _limitCacheSize: function(dims) { + var perfLimitSizeTotal = fabric.perfLimitSizeTotal, + width = dims.width, height = dims.height, + max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; + if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { + if (width < min) { + dims.width = min; } - var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), - capValue = fabric.util.capValue, - x = capValue(min, limitedDims.x, max), - y = capValue(min, limitedDims.y, max); - if (width > x) { - dims.zoomX /= width / x; - dims.width = x; - dims.capped = true; - } - if (height > y) { - dims.zoomY /= height / y; - dims.height = y; - dims.capped = true; + if (height < min) { + dims.height = min; } return dims; - }, + } + var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), + capValue = fabric.util.capValue, + x = capValue(min, limitedDims.x, max), + y = capValue(min, limitedDims.y, max); + if (width > x) { + dims.zoomX /= width / x; + dims.width = x; + dims.capped = true; + } + if (height > y) { + dims.zoomY /= height / y; + dims.height = y; + dims.capped = true; + } + return dims; + }, - /** + /** * Return the dimension and the zoom level needed to create a cache canvas * big enough to host the object to be cached. * @private @@ -716,384 +716,384 @@ * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function() { - var objectScale = this.getTotalObjectScaling(), - // caculate dimensions without skewing - dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }), - neededX = dim.x * objectScale.x / this.scaleX, - neededY = dim.y * objectScale.y / this.scaleY; - return { - // for sure this ALIASING_LIMIT is slightly creating problem - // in situation in which the cache canvas gets an upper limit - // also objectScale contains already scaleX and scaleY - width: neededX + ALIASING_LIMIT, - height: neededY + ALIASING_LIMIT, - zoomX: objectScale.x, - zoomY: objectScale.y, - x: neededX, - y: neededY - }; - }, - - /** + _getCacheCanvasDimensions: function() { + var objectScale = this.getTotalObjectScaling(), + // caculate dimensions without skewing + dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }), + neededX = dim.x * objectScale.x / this.scaleX, + neededY = dim.y * objectScale.y / this.scaleY; + return { + // for sure this ALIASING_LIMIT is slightly creating problem + // in situation in which the cache canvas gets an upper limit + // also objectScale contains already scaleX and scaleY + width: neededX + ALIASING_LIMIT, + height: neededY + ALIASING_LIMIT, + zoomX: objectScale.x, + zoomY: objectScale.y, + x: neededX, + y: neededY + }; + }, + + /** * Update width and height of the canvas for cache * returns true or false if canvas needed resize. * @private * @return {Boolean} true if the canvas has been resized */ - _updateCacheCanvas: function() { - var targetCanvas = this.canvas; - if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { - var target = targetCanvas._currentTransform.target, - action = targetCanvas._currentTransform.action; - if (this === target && action.slice && action.slice(0, 5) === 'scale') { - return false; - } + _updateCacheCanvas: function() { + var targetCanvas = this.canvas; + if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { + var target = targetCanvas._currentTransform.target, + action = targetCanvas._currentTransform.action; + if (this === target && action.slice && action.slice(0, 5) === 'scale') { + return false; } - var canvas = this._cacheCanvas, - dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - minCacheSize = fabric.minCacheSideLimit, - width = dims.width, height = dims.height, drawingWidth, drawingHeight, - zoomX = dims.zoomX, zoomY = dims.zoomY, - dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, - zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, - shouldRedraw = dimensionsChanged || zoomChanged, - additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; - if (dimensionsChanged) { - var canvasWidth = this._cacheCanvas.width, - canvasHeight = this._cacheCanvas.height, - sizeGrowing = width > canvasWidth || height > canvasHeight, - sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && + } + var canvas = this._cacheCanvas, + dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + minCacheSize = fabric.minCacheSideLimit, + width = dims.width, height = dims.height, drawingWidth, drawingHeight, + zoomX = dims.zoomX, zoomY = dims.zoomY, + dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, + zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, + shouldRedraw = dimensionsChanged || zoomChanged, + additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; + if (dimensionsChanged) { + var canvasWidth = this._cacheCanvas.width, + canvasHeight = this._cacheCanvas.height, + sizeGrowing = width > canvasWidth || height > canvasHeight, + sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && canvasWidth > minCacheSize && canvasHeight > minCacheSize; - shouldResizeCanvas = sizeGrowing || sizeShrinking; - if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { - additionalWidth = width * 0.1; - additionalHeight = height * 0.1; - } + shouldResizeCanvas = sizeGrowing || sizeShrinking; + if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { + additionalWidth = width * 0.1; + additionalHeight = height * 0.1; } - if (this instanceof fabric.Text && this.path) { - shouldRedraw = true; - shouldResizeCanvas = true; - additionalWidth += this.getHeightOfLine(0) * this.zoomX; - additionalHeight += this.getHeightOfLine(0) * this.zoomY; - } - if (shouldRedraw) { - if (shouldResizeCanvas) { - canvas.width = Math.ceil(width + additionalWidth); - canvas.height = Math.ceil(height + additionalHeight); - } - else { - this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); - this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); - } - drawingWidth = dims.x / 2; - drawingHeight = dims.y / 2; - this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; - this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; - this.cacheWidth = width; - this.cacheHeight = height; - this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); - this._cacheContext.scale(zoomX, zoomY); - this.zoomX = zoomX; - this.zoomY = zoomY; - return true; + } + if (this instanceof fabric.Text && this.path) { + shouldRedraw = true; + shouldResizeCanvas = true; + additionalWidth += this.getHeightOfLine(0) * this.zoomX; + additionalHeight += this.getHeightOfLine(0) * this.zoomY; + } + if (shouldRedraw) { + if (shouldResizeCanvas) { + canvas.width = Math.ceil(width + additionalWidth); + canvas.height = Math.ceil(height + additionalHeight); } - return false; - }, + else { + this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); + this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); + } + drawingWidth = dims.x / 2; + drawingHeight = dims.y / 2; + this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; + this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; + this.cacheWidth = width; + this.cacheHeight = height; + this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); + this._cacheContext.scale(zoomX, zoomY); + this.zoomX = zoomX; + this.zoomY = zoomY; + return true; + } + return false; + }, - /** + /** * Sets object's properties from options * @param {Object} [options] Options object */ - setOptions: function(options) { - this._setOptions(options); - }, + setOptions: function(options) { + this._setOptions(options); + }, - /** + /** * Transforms context when rendering an object * @param {CanvasRenderingContext2D} ctx Context */ - transform: function(ctx) { - var needFullTransform = (this.group && !this.group._transformDone) || + transform: function(ctx) { + var needFullTransform = (this.group && !this.group._transformDone) || (this.group && this.canvas && ctx === this.canvas.contextTop); - var m = this.calcTransformMatrix(!needFullTransform); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - }, + var m = this.calcTransformMatrix(!needFullTransform); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + }, - /** + /** * Returns an object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - - object = { - type: this.type, - version: fabric.version, - originX: this.originX, - originY: this.originY, - left: toFixed(this.left, NUM_FRACTION_DIGITS), - top: toFixed(this.top, NUM_FRACTION_DIGITS), - width: toFixed(this.width, NUM_FRACTION_DIGITS), - height: toFixed(this.height, NUM_FRACTION_DIGITS), - fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, - stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, - strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), - strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, - strokeLineCap: this.strokeLineCap, - strokeDashOffset: this.strokeDashOffset, - strokeLineJoin: this.strokeLineJoin, - strokeUniform: this.strokeUniform, - strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), - scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), - scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), - angle: toFixed(this.angle, NUM_FRACTION_DIGITS), - flipX: this.flipX, - flipY: this.flipY, - opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), - shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, - visible: this.visible, - backgroundColor: this.backgroundColor, - fillRule: this.fillRule, - paintFirst: this.paintFirst, - globalCompositeOperation: this.globalCompositeOperation, - skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), - skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), - }; - - if (this.clipPath && !this.clipPath.excludeFromExport) { - object.clipPath = this.clipPath.toObject(propertiesToInclude); - object.clipPath.inverted = this.clipPath.inverted; - object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; - } + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + + object = { + type: this.type, + version: fabric.version, + originX: this.originX, + originY: this.originY, + left: toFixed(this.left, NUM_FRACTION_DIGITS), + top: toFixed(this.top, NUM_FRACTION_DIGITS), + width: toFixed(this.width, NUM_FRACTION_DIGITS), + height: toFixed(this.height, NUM_FRACTION_DIGITS), + fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, + stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, + strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), + strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, + strokeLineCap: this.strokeLineCap, + strokeDashOffset: this.strokeDashOffset, + strokeLineJoin: this.strokeLineJoin, + strokeUniform: this.strokeUniform, + strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), + scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), + scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), + angle: toFixed(this.angle, NUM_FRACTION_DIGITS), + flipX: this.flipX, + flipY: this.flipY, + opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), + shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, + visible: this.visible, + backgroundColor: this.backgroundColor, + fillRule: this.fillRule, + paintFirst: this.paintFirst, + globalCompositeOperation: this.globalCompositeOperation, + skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), + skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), + }; + + if (this.clipPath && !this.clipPath.excludeFromExport) { + object.clipPath = this.clipPath.toObject(propertiesToInclude); + object.clipPath.inverted = this.clipPath.inverted; + object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; + } - fabric.util.populateWithProperties(this, object, propertiesToInclude); - if (!this.includeDefaultValues) { - object = this._removeDefaultValues(object); - } + fabric.util.populateWithProperties(this, object, propertiesToInclude); + if (!this.includeDefaultValues) { + object = this._removeDefaultValues(object); + } - return object; - }, + return object; + }, - /** + /** * Returns (dataless) object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toDatalessObject: function(propertiesToInclude) { - // will be overwritten by subclasses - return this.toObject(propertiesToInclude); - }, + toDatalessObject: function(propertiesToInclude) { + // will be overwritten by subclasses + return this.toObject(propertiesToInclude); + }, - /** + /** * @private * @param {Object} object */ - _removeDefaultValues: function(object) { - var prototype = fabric.util.getKlass(object.type).prototype; - Object.keys(object).forEach(function(prop) { - if (prop === 'left' || prop === 'top' || prop === 'type') { - return; - } - if (object[prop] === prototype[prop]) { - delete object[prop]; - } - // basically a check for [] === [] - if (Array.isArray(object[prop]) && Array.isArray(prototype[prop]) + _removeDefaultValues: function(object) { + var prototype = fabric.util.getKlass(object.type).prototype; + Object.keys(object).forEach(function(prop) { + if (prop === 'left' || prop === 'top' || prop === 'type') { + return; + } + if (object[prop] === prototype[prop]) { + delete object[prop]; + } + // basically a check for [] === [] + if (Array.isArray(object[prop]) && Array.isArray(prototype[prop]) && object[prop].length === 0 && prototype[prop].length === 0) { - delete object[prop]; - } - }); + delete object[prop]; + } + }); - return object; - }, + return object; + }, - /** + /** * Returns a string representation of an instance * @return {String} */ - toString: function() { - return '#'; - }, + toString: function() { + return '#'; + }, - /** + /** * Return the object scale factor counting also the group scaling * @return {fabric.Point} */ - getObjectScaling: function() { - // if the object is a top level one, on the canvas, we go for simple aritmetic - // otherwise the complex method with angles will return approximations and decimals - // and will likely kill the cache when not needed - // https://github.com/fabricjs/fabric.js/issues/7157 - if (!this.group) { - return new fabric.Point(Math.abs(this.scaleX), Math.abs(this.scaleY)); - } - // if we are inside a group total zoom calculation is complex, we defer to generic matrices - var options = fabric.util.qrDecompose(this.calcTransformMatrix()); - return new fabric.Point(Math.abs(options.scaleX), Math.abs(options.scaleY)); - }, + getObjectScaling: function() { + // if the object is a top level one, on the canvas, we go for simple aritmetic + // otherwise the complex method with angles will return approximations and decimals + // and will likely kill the cache when not needed + // https://github.com/fabricjs/fabric.js/issues/7157 + if (!this.group) { + return new fabric.Point(Math.abs(this.scaleX), Math.abs(this.scaleY)); + } + // if we are inside a group total zoom calculation is complex, we defer to generic matrices + var options = fabric.util.qrDecompose(this.calcTransformMatrix()); + return new fabric.Point(Math.abs(options.scaleX), Math.abs(options.scaleY)); + }, - /** + /** * Return the object scale factor counting also the group scaling, zoom and retina * @return {Object} object with scaleX and scaleY properties */ - getTotalObjectScaling: function() { - var scale = this.getObjectScaling(); - if (this.canvas) { - var zoom = this.canvas.getZoom(); - var retina = this.canvas.getRetinaScaling(); - scale.scalarMultiplyEquals(zoom * retina); - } - return scale; - }, + getTotalObjectScaling: function() { + var scale = this.getObjectScaling(); + if (this.canvas) { + var zoom = this.canvas.getZoom(); + var retina = this.canvas.getRetinaScaling(); + scale.scalarMultiplyEquals(zoom * retina); + } + return scale; + }, - /** + /** * Return the object opacity counting also the group property * @return {Number} */ - getObjectOpacity: function() { - var opacity = this.opacity; - if (this.group) { - opacity *= this.group.getObjectOpacity(); - } - return opacity; - }, + getObjectOpacity: function() { + var opacity = this.opacity; + if (this.group) { + opacity *= this.group.getObjectOpacity(); + } + return opacity; + }, - /** + /** * Returns the object angle relative to canvas counting also the group property * @returns {number} */ - getTotalAngle: function () { - return this.group ? - fabric.util.qrDecompose(this.calcTransformMatrix()).angle : - this.angle; - }, + getTotalAngle: function () { + return this.group ? + fabric.util.qrDecompose(this.calcTransformMatrix()).angle : + this.angle; + }, - /** + /** * @private * @param {String} key * @param {*} value * @return {fabric.Object} thisArg */ - _set: function(key, value) { - var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), - isChanged = this[key] !== value, groupNeedsUpdate = false; + _set: function(key, value) { + var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), + isChanged = this[key] !== value, groupNeedsUpdate = false; - if (shouldConstrainValue) { - value = this._constrainScale(value); - } - if (key === 'scaleX' && value < 0) { - this.flipX = !this.flipX; - value *= -1; - } - else if (key === 'scaleY' && value < 0) { - this.flipY = !this.flipY; - value *= -1; - } - else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { - value = new fabric.Shadow(value); - } - else if (key === 'dirty' && this.group) { - this.group.set('dirty', value); - } + if (shouldConstrainValue) { + value = this._constrainScale(value); + } + if (key === 'scaleX' && value < 0) { + this.flipX = !this.flipX; + value *= -1; + } + else if (key === 'scaleY' && value < 0) { + this.flipY = !this.flipY; + value *= -1; + } + else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { + value = new fabric.Shadow(value); + } + else if (key === 'dirty' && this.group) { + this.group.set('dirty', value); + } - this[key] = value; + this[key] = value; - if (isChanged) { - groupNeedsUpdate = this.group && this.group.isOnACache(); - if (this.cacheProperties.indexOf(key) > -1) { - this.dirty = true; - groupNeedsUpdate && this.group.set('dirty', true); - } - else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { - this.group.set('dirty', true); - } + if (isChanged) { + groupNeedsUpdate = this.group && this.group.isOnACache(); + if (this.cacheProperties.indexOf(key) > -1) { + this.dirty = true; + groupNeedsUpdate && this.group.set('dirty', true); + } + else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { + this.group.set('dirty', true); } - return this; - }, + } + return this; + }, - /** + /** * Retrieves viewportTransform from Object's canvas if possible * @method getViewportTransform * @memberOf fabric.Object.prototype * @return {Array} */ - getViewportTransform: function() { - if (this.canvas && this.canvas.viewportTransform) { - return this.canvas.viewportTransform; - } - return fabric.iMatrix.concat(); - }, + getViewportTransform: function() { + if (this.canvas && this.canvas.viewportTransform) { + return this.canvas.viewportTransform; + } + return fabric.iMatrix.concat(); + }, - /* + /* * @private * return if the object would be visible in rendering * @memberOf fabric.Object.prototype * @return {Boolean} */ - isNotVisible: function() { - return this.opacity === 0 || + isNotVisible: function() { + return this.opacity === 0 || (!this.width && !this.height && this.strokeWidth === 0) || !this.visible; - }, + }, - /** + /** * Renders an object on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - render: function(ctx) { - // do not render if width/height are zeros or object is not visible - if (this.isNotVisible()) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - ctx.save(); - this._setupCompositeOperation(ctx); - this.drawSelectionBackground(ctx); - this.transform(ctx); - this._setOpacity(ctx); - this._setShadow(ctx, this); - if (this.shouldCache()) { - this.renderCache(); - this.drawCacheOnCanvas(ctx); - } - else { - this._removeCacheCanvas(); - this.dirty = false; - this.drawObject(ctx); - if (this.objectCaching && this.statefullCache) { - this.saveState({ propertySet: 'cacheProperties' }); - } + render: function(ctx) { + // do not render if width/height are zeros or object is not visible + if (this.isNotVisible()) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + ctx.save(); + this._setupCompositeOperation(ctx); + this.drawSelectionBackground(ctx); + this.transform(ctx); + this._setOpacity(ctx); + this._setShadow(ctx, this); + if (this.shouldCache()) { + this.renderCache(); + this.drawCacheOnCanvas(ctx); + } + else { + this._removeCacheCanvas(); + this.dirty = false; + this.drawObject(ctx); + if (this.objectCaching && this.statefullCache) { + this.saveState({ propertySet: 'cacheProperties' }); } - ctx.restore(); - }, + } + ctx.restore(); + }, - renderCache: function(options) { - options = options || {}; - if (!this._cacheCanvas || !this._cacheContext) { - this._createCacheCanvas(); - } - if (this.isCacheDirty()) { - this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); - this.drawObject(this._cacheContext, options.forClipping); - this.dirty = false; - } - }, + renderCache: function(options) { + options = options || {}; + if (!this._cacheCanvas || !this._cacheContext) { + this._createCacheCanvas(); + } + if (this.isCacheDirty()) { + this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); + this.drawObject(this._cacheContext, options.forClipping); + this.dirty = false; + } + }, - /** + /** * Remove cacheCanvas and its dimensions from the objects */ - _removeCacheCanvas: function() { - this._cacheCanvas = null; - this._cacheContext = null; - this.cacheWidth = 0; - this.cacheHeight = 0; - }, + _removeCacheCanvas: function() { + this._cacheCanvas = null; + this._cacheContext = null; + this.cacheWidth = 0; + this.cacheHeight = 0; + }, - /** + /** * return true if the object will draw a stroke * Does not consider text styles. This is just a shortcut used at rendering time * We want it to be an approximation and be fast. @@ -1103,11 +1103,11 @@ * @since 3.0.0 * @returns Boolean */ - hasStroke: function() { - return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; - }, + hasStroke: function() { + return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; + }, - /** + /** * return true if the object will draw a fill * Does not consider text styles. This is just a shortcut used at rendering time * We want it to be an approximation and be fast. @@ -1117,11 +1117,11 @@ * @since 3.0.0 * @returns Boolean */ - hasFill: function() { - return this.fill && this.fill !== 'transparent'; - }, + hasFill: function() { + return this.fill && this.fill !== 'transparent'; + }, - /** + /** * When set to `true`, force the object to have its own cache, even if it is inside a group * it may be needed when your object behave in a particular way on the cache and always needs * its own isolated canvas to render correctly. @@ -1129,18 +1129,18 @@ * since 1.7.12 * @returns Boolean */ - needsItsOwnCache: function() { - if (this.paintFirst === 'stroke' && + needsItsOwnCache: function() { + if (this.paintFirst === 'stroke' && this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') { - return true; - } - if (this.clipPath) { - return true; - } - return false; - }, + return true; + } + if (this.clipPath) { + return true; + } + return false; + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * objectCaching is a global flag, wins over everything * needsItsOwnCache should be used when the object drawing method requires @@ -1149,391 +1149,391 @@ * Read as: cache if is needed, or if the feature is enabled but we are not already caching. * @return {Boolean} */ - shouldCache: function() { - this.ownCaching = this.needsItsOwnCache() || ( - this.objectCaching && + shouldCache: function() { + this.ownCaching = this.needsItsOwnCache() || ( + this.objectCaching && (!this.group || !this.group.isOnACache()) - ); - return this.ownCaching; - }, + ); + return this.ownCaching; + }, - /** + /** * Check if this object or a child object will cast a shadow * used by Group.shouldCache to know if child has a shadow recursively * @return {Boolean} * @deprecated */ - willDrawShadow: function() { - return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); - }, + willDrawShadow: function() { + return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); + }, - /** + /** * Execute the drawing operation for an object clipPath * @param {CanvasRenderingContext2D} ctx Context to render on * @param {fabric.Object} clipPath */ - drawClipPathOnCache: function(ctx, clipPath) { - ctx.save(); - // DEBUG: uncomment this line, comment the following - // ctx.globalAlpha = 0.4 - if (clipPath.inverted) { - ctx.globalCompositeOperation = 'destination-out'; - } - else { - ctx.globalCompositeOperation = 'destination-in'; - } - //ctx.scale(1 / 2, 1 / 2); - if (clipPath.absolutePositioned) { - var m = fabric.util.invertTransform(this.calcTransformMatrix()); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - } - clipPath.transform(ctx); - ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); - ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); - ctx.restore(); - }, + drawClipPathOnCache: function(ctx, clipPath) { + ctx.save(); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4 + if (clipPath.inverted) { + ctx.globalCompositeOperation = 'destination-out'; + } + else { + ctx.globalCompositeOperation = 'destination-in'; + } + //ctx.scale(1 / 2, 1 / 2); + if (clipPath.absolutePositioned) { + var m = fabric.util.invertTransform(this.calcTransformMatrix()); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + } + clipPath.transform(ctx); + ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); + ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); + ctx.restore(); + }, - /** + /** * Execute the drawing operation for an object on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawObject: function(ctx, forClipping) { - var originalFill = this.fill, originalStroke = this.stroke; - if (forClipping) { - this.fill = 'black'; - this.stroke = ''; - this._setClippingProperties(ctx); - } - else { - this._renderBackground(ctx); - } - this._render(ctx); - this._drawClipPath(ctx, this.clipPath); - this.fill = originalFill; - this.stroke = originalStroke; - }, + drawObject: function(ctx, forClipping) { + var originalFill = this.fill, originalStroke = this.stroke; + if (forClipping) { + this.fill = 'black'; + this.stroke = ''; + this._setClippingProperties(ctx); + } + else { + this._renderBackground(ctx); + } + this._render(ctx); + this._drawClipPath(ctx, this.clipPath); + this.fill = originalFill; + this.stroke = originalStroke; + }, - /** + /** * Prepare clipPath state and cache and draw it on instance's cache * @param {CanvasRenderingContext2D} ctx * @param {fabric.Object} clipPath */ - _drawClipPath: function (ctx, clipPath) { - if (!clipPath) { return; } - // needed to setup a couple of variables - // path canvas gets overridden with this one. - // TODO find a better solution? - clipPath._set('canvas', this.canvas); - clipPath.shouldCache(); - clipPath._transformDone = true; - clipPath.renderCache({ forClipping: true }); - this.drawClipPathOnCache(ctx, clipPath); - }, - - /** + _drawClipPath: function (ctx, clipPath) { + if (!clipPath) { return; } + // needed to setup a couple of variables + // path canvas gets overridden with this one. + // TODO find a better solution? + clipPath._set('canvas', this.canvas); + clipPath.shouldCache(); + clipPath._transformDone = true; + clipPath.renderCache({ forClipping: true }); + this.drawClipPathOnCache(ctx, clipPath); + }, + + /** * Paint the cached copy of the object on the target context. * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawCacheOnCanvas: function(ctx) { - ctx.scale(1 / this.zoomX, 1 / this.zoomY); - ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); - }, + drawCacheOnCanvas: function(ctx) { + ctx.scale(1 / this.zoomX, 1 / this.zoomY); + ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); + }, - /** + /** * Check if cache is dirty * @param {Boolean} skipCanvas skip canvas checks because this object is painted * on parent canvas. */ - isCacheDirty: function(skipCanvas) { - if (this.isNotVisible()) { - return false; - } - if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) { - // in this case the context is already cleared. - return true; - } - else { - if (this.dirty || + isCacheDirty: function(skipCanvas) { + if (this.isNotVisible()) { + return false; + } + if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) { + // in this case the context is already cleared. + return true; + } + else { + if (this.dirty || (this.clipPath && this.clipPath.absolutePositioned) || (this.statefullCache && this.hasStateChanged('cacheProperties')) - ) { - if (this._cacheCanvas && this._cacheContext && !skipCanvas) { - var width = this.cacheWidth / this.zoomX; - var height = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-width / 2, -height / 2, width, height); - } - return true; + ) { + if (this._cacheCanvas && this._cacheContext && !skipCanvas) { + var width = this.cacheWidth / this.zoomX; + var height = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-width / 2, -height / 2, width, height); } + return true; } - return false; - }, + } + return false; + }, - /** + /** * Draws a background for the object big as its untransformed dimensions * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderBackground: function(ctx) { - if (!this.backgroundColor) { - return; - } - var dim = this._getNonTransformedDimensions(); - ctx.fillStyle = this.backgroundColor; - - ctx.fillRect( - -dim.x / 2, - -dim.y / 2, - dim.x, - dim.y - ); - // if there is background color no other shadows - // should be casted - this._removeShadow(ctx); - }, + _renderBackground: function(ctx) { + if (!this.backgroundColor) { + return; + } + var dim = this._getNonTransformedDimensions(); + ctx.fillStyle = this.backgroundColor; + + ctx.fillRect( + -dim.x / 2, + -dim.y / 2, + dim.x, + dim.y + ); + // if there is background color no other shadows + // should be casted + this._removeShadow(ctx); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _setOpacity: function(ctx) { - if (this.group && !this.group._transformDone) { - ctx.globalAlpha = this.getObjectOpacity(); - } - else { - ctx.globalAlpha *= this.opacity; - } - }, - - _setStrokeStyles: function(ctx, decl) { - var stroke = decl.stroke; - if (stroke) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = decl.strokeLineCap; - ctx.lineDashOffset = decl.strokeDashOffset; - ctx.lineJoin = decl.strokeLineJoin; - ctx.miterLimit = decl.strokeMiterLimit; - if (stroke.toLive) { - if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - this._applyPatternForTransformedGradient(ctx, stroke); - } - else { - // is a simple gradient or pattern - ctx.strokeStyle = stroke.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, stroke); - } + _setOpacity: function(ctx) { + if (this.group && !this.group._transformDone) { + ctx.globalAlpha = this.getObjectOpacity(); + } + else { + ctx.globalAlpha *= this.opacity; + } + }, + + _setStrokeStyles: function(ctx, decl) { + var stroke = decl.stroke; + if (stroke) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = decl.strokeLineCap; + ctx.lineDashOffset = decl.strokeDashOffset; + ctx.lineJoin = decl.strokeLineJoin; + ctx.miterLimit = decl.strokeMiterLimit; + if (stroke.toLive) { + if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + this._applyPatternForTransformedGradient(ctx, stroke); } else { - // is a color - ctx.strokeStyle = decl.stroke; + // is a simple gradient or pattern + ctx.strokeStyle = stroke.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, stroke); } } - }, - - _setFillStyles: function(ctx, decl) { - var fill = decl.fill; - if (fill) { - if (fill.toLive) { - ctx.fillStyle = fill.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, decl.fill); - } - else { - ctx.fillStyle = fill; - } + else { + // is a color + ctx.strokeStyle = decl.stroke; + } + } + }, + + _setFillStyles: function(ctx, decl) { + var fill = decl.fill; + if (fill) { + if (fill.toLive) { + ctx.fillStyle = fill.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, decl.fill); + } + else { + ctx.fillStyle = fill; } - }, + } + }, - _setClippingProperties: function(ctx) { - ctx.globalAlpha = 1; - ctx.strokeStyle = 'transparent'; - ctx.fillStyle = '#000000'; - }, + _setClippingProperties: function(ctx) { + ctx.globalAlpha = 1; + ctx.strokeStyle = 'transparent'; + ctx.fillStyle = '#000000'; + }, - /** + /** * @private * Sets line dash * @param {CanvasRenderingContext2D} ctx Context to set the dash line on * @param {Array} dashArray array representing dashes */ - _setLineDash: function(ctx, dashArray) { - if (!dashArray || dashArray.length === 0) { - return; - } - // Spec requires the concatenation of two copies the dash list when the number of elements is odd - if (1 & dashArray.length) { - dashArray.push.apply(dashArray, dashArray); - } - ctx.setLineDash(dashArray); - }, + _setLineDash: function(ctx, dashArray) { + if (!dashArray || dashArray.length === 0) { + return; + } + // Spec requires the concatenation of two copies the dash list when the number of elements is odd + if (1 & dashArray.length) { + dashArray.push.apply(dashArray, dashArray); + } + ctx.setLineDash(dashArray); + }, - /** + /** * Renders controls and borders for the object * the context here is not transformed * @param {CanvasRenderingContext2D} ctx Context to render on * @param {Object} [styleOverride] properties to override the object style */ - _renderControls: function(ctx, styleOverride) { - var vpt = this.getViewportTransform(), - matrix = this.calcTransformMatrix(), - options, drawBorders, drawControls; - styleOverride = styleOverride || { }; - drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; - drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; - matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); - options = fabric.util.qrDecompose(matrix); - ctx.save(); - ctx.translate(options.translateX, options.translateY); - ctx.lineWidth = 1 * this.borderScaleFactor; - if (!this.group) { - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; - } - if (this.flipX) { - options.angle -= 180; - } - ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); - drawBorders && this.drawBorders(ctx, options, styleOverride); - drawControls && this.drawControls(ctx, styleOverride); - ctx.restore(); - }, + _renderControls: function(ctx, styleOverride) { + var vpt = this.getViewportTransform(), + matrix = this.calcTransformMatrix(), + options, drawBorders, drawControls; + styleOverride = styleOverride || { }; + drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; + drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; + matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); + options = fabric.util.qrDecompose(matrix); + ctx.save(); + ctx.translate(options.translateX, options.translateY); + ctx.lineWidth = 1 * this.borderScaleFactor; + if (!this.group) { + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + } + if (this.flipX) { + options.angle -= 180; + } + ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); + drawBorders && this.drawBorders(ctx, options, styleOverride); + drawControls && this.drawControls(ctx, styleOverride); + ctx.restore(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _setShadow: function(ctx) { - if (!this.shadow) { - return; - } + _setShadow: function(ctx) { + if (!this.shadow) { + return; + } - var shadow = this.shadow, canvas = this.canvas, - multX = (canvas && canvas.viewportTransform[0]) || 1, - multY = (canvas && canvas.viewportTransform[3]) || 1, - scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); - if (canvas && canvas._isRetinaScaling()) { - multX *= fabric.devicePixelRatio; - multY *= fabric.devicePixelRatio; - } - ctx.shadowColor = shadow.color; - ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * + var shadow = this.shadow, canvas = this.canvas, + multX = (canvas && canvas.viewportTransform[0]) || 1, + multY = (canvas && canvas.viewportTransform[3]) || 1, + scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); + if (canvas && canvas._isRetinaScaling()) { + multX *= fabric.devicePixelRatio; + multY *= fabric.devicePixelRatio; + } + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * (multX + multY) * (scaling.x + scaling.y) / 4; - ctx.shadowOffsetX = shadow.offsetX * multX * scaling.x; - ctx.shadowOffsetY = shadow.offsetY * multY * scaling.y; - }, + ctx.shadowOffsetX = shadow.offsetX * multX * scaling.x; + ctx.shadowOffsetY = shadow.offsetY * multY * scaling.y; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _removeShadow: function(ctx) { - if (!this.shadow) { - return; - } + _removeShadow: function(ctx) { + if (!this.shadow) { + return; + } - ctx.shadowColor = ''; - ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; - }, + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on * @param {Object} filler fabric.Pattern or fabric.Gradient * @return {Object} offset.offsetX offset for text rendering * @return {Object} offset.offsetY offset for text rendering */ - _applyPatternGradientTransform: function(ctx, filler) { - if (!filler || !filler.toLive) { - return { offsetX: 0, offsetY: 0 }; - } - var t = filler.gradientTransform || filler.patternTransform; - var offsetX = -this.width / 2 + filler.offsetX || 0, - offsetY = -this.height / 2 + filler.offsetY || 0; + _applyPatternGradientTransform: function(ctx, filler) { + if (!filler || !filler.toLive) { + return { offsetX: 0, offsetY: 0 }; + } + var t = filler.gradientTransform || filler.patternTransform; + var offsetX = -this.width / 2 + filler.offsetX || 0, + offsetY = -this.height / 2 + filler.offsetY || 0; - if (filler.gradientUnits === 'percentage') { - ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); - } - else { - ctx.transform(1, 0, 0, 1, offsetX, offsetY); - } - if (t) { - ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); - } - return { offsetX: offsetX, offsetY: offsetY }; - }, + if (filler.gradientUnits === 'percentage') { + ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); + } + else { + ctx.transform(1, 0, 0, 1, offsetX, offsetY); + } + if (t) { + ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); + } + return { offsetX: offsetX, offsetY: offsetY }; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderPaintInOrder: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderStroke(ctx); - this._renderFill(ctx); - } - else { - this._renderFill(ctx); - this._renderStroke(ctx); - } - }, + _renderPaintInOrder: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderStroke(ctx); + this._renderFill(ctx); + } + else { + this._renderFill(ctx); + this._renderStroke(ctx); + } + }, - /** + /** * @private * function that actually render something on the context. * empty here to allow Obects to work on tests to benchmark fabric functionalites * not related to rendering * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(/* ctx */) { + _render: function(/* ctx */) { - }, + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderFill: function(ctx) { - if (!this.fill) { - return; - } + _renderFill: function(ctx) { + if (!this.fill) { + return; + } - ctx.save(); - this._setFillStyles(ctx, this); - if (this.fillRule === 'evenodd') { - ctx.fill('evenodd'); - } - else { - ctx.fill(); - } - ctx.restore(); - }, + ctx.save(); + this._setFillStyles(ctx, this); + if (this.fillRule === 'evenodd') { + ctx.fill('evenodd'); + } + else { + ctx.fill(); + } + ctx.restore(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderStroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } + _renderStroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); - } + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } - ctx.save(); - if (this.strokeUniform) { - var scaling = this.getObjectScaling(); - ctx.scale(1 / scaling.x, 1 / scaling.y); - } - this._setLineDash(ctx, this.strokeDashArray); - this._setStrokeStyles(ctx, this); - ctx.stroke(); - ctx.restore(); - }, + ctx.save(); + if (this.strokeUniform) { + var scaling = this.getObjectScaling(); + ctx.scale(1 / scaling.x, 1 / scaling.y); + } + this._setLineDash(ctx, this.strokeDashArray); + this._setStrokeStyles(ctx, this); + ctx.stroke(); + ctx.restore(); + }, - /** + /** * This function try to patch the missing gradientTransform on canvas gradients. * transforming a context to transform the gradient, is going to transform the stroke too. * we want to transform the gradient but not the stroke operation, so we create @@ -1544,99 +1544,99 @@ * @param {CanvasRenderingContext2D} ctx Context to render on * @param {fabric.Gradient} filler a fabric gradient instance */ - _applyPatternForTransformedGradient: function(ctx, filler) { - var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), - width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.scale( - dims.zoomX / this.scaleX / retinaScaling, - dims.zoomY / this.scaleY / retinaScaling - ); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fillStyle = filler.toLive(ctx); - pCtx.fill(); - ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); - ctx.scale( - retinaScaling * this.scaleX / dims.zoomX, - retinaScaling * this.scaleY / dims.zoomY - ); - ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); - }, - - /** + _applyPatternForTransformedGradient: function(ctx, filler) { + var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), + width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.scale( + dims.zoomX / this.scaleX / retinaScaling, + dims.zoomY / this.scaleY / retinaScaling + ); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fillStyle = filler.toLive(ctx); + pCtx.fill(); + ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); + ctx.scale( + retinaScaling * this.scaleX / dims.zoomX, + retinaScaling * this.scaleY / dims.zoomY + ); + ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); + }, + + /** * This function is an helper for svg import. it returns the center of the object in the svg * untransformed coordinates * @private * @return {Object} center point from element coordinates */ - _findCenterFromElement: function() { - return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; - }, + _findCenterFromElement: function() { + return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; + }, - /** + /** * This function is an helper for svg import. it decompose the transformMatrix * and assign properties to object. * untransformed coordinates * @private * @chainable */ - _assignTransformMatrixProps: function() { - if (this.transformMatrix) { - var options = fabric.util.qrDecompose(this.transformMatrix); - this.flipX = false; - this.flipY = false; - this.set('scaleX', options.scaleX); - this.set('scaleY', options.scaleY); - this.angle = options.angle; - this.skewX = options.skewX; - this.skewY = 0; - } - }, + _assignTransformMatrixProps: function() { + if (this.transformMatrix) { + var options = fabric.util.qrDecompose(this.transformMatrix); + this.flipX = false; + this.flipY = false; + this.set('scaleX', options.scaleX); + this.set('scaleY', options.scaleY); + this.angle = options.angle; + this.skewX = options.skewX; + this.skewY = 0; + } + }, - /** + /** * This function is an helper for svg import. it removes the transform matrix * and set to object properties that fabricjs can handle * @private * @param {Object} preserveAspectRatioOptions * @return {thisArg} */ - _removeTransformMatrix: function(preserveAspectRatioOptions) { - var center = this._findCenterFromElement(); - if (this.transformMatrix) { - this._assignTransformMatrixProps(); - center = fabric.util.transformPoint(center, this.transformMatrix); - } - this.transformMatrix = null; - if (preserveAspectRatioOptions) { - this.scaleX *= preserveAspectRatioOptions.scaleX; - this.scaleY *= preserveAspectRatioOptions.scaleY; - this.cropX = preserveAspectRatioOptions.cropX; - this.cropY = preserveAspectRatioOptions.cropY; - center.x += preserveAspectRatioOptions.offsetLeft; - center.y += preserveAspectRatioOptions.offsetTop; - this.width = preserveAspectRatioOptions.width; - this.height = preserveAspectRatioOptions.height; - } - this.setPositionByOrigin(center, 'center', 'center'); - }, + _removeTransformMatrix: function(preserveAspectRatioOptions) { + var center = this._findCenterFromElement(); + if (this.transformMatrix) { + this._assignTransformMatrixProps(); + center = fabric.util.transformPoint(center, this.transformMatrix); + } + this.transformMatrix = null; + if (preserveAspectRatioOptions) { + this.scaleX *= preserveAspectRatioOptions.scaleX; + this.scaleY *= preserveAspectRatioOptions.scaleY; + this.cropX = preserveAspectRatioOptions.cropX; + this.cropY = preserveAspectRatioOptions.cropY; + center.x += preserveAspectRatioOptions.offsetLeft; + center.y += preserveAspectRatioOptions.offsetTop; + this.width = preserveAspectRatioOptions.width; + this.height = preserveAspectRatioOptions.height; + } + this.setPositionByOrigin(center, 'center', 'center'); + }, - /** + /** * Clones an instance. * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @returns {Promise} */ - clone: function(propertiesToInclude) { - var objectForm = this.toObject(propertiesToInclude); - return this.constructor.fromObject(objectForm); - }, + clone: function(propertiesToInclude) { + var objectForm = this.toObject(propertiesToInclude); + return this.constructor.fromObject(objectForm); + }, - /** + /** * Creates an instance of fabric.Image out of an object * makes use of toCanvasElement. * Once this method was based on toDataUrl and loadImage, so it also had a quality @@ -1654,12 +1654,12 @@ * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 * @return {fabric.Image} Object cloned as image. */ - cloneAsImage: function(options) { - var canvasEl = this.toCanvasElement(options); - return new fabric.Image(canvasEl); - }, + cloneAsImage: function(options) { + var canvasEl = this.toCanvasElement(options); + return new fabric.Image(canvasEl); + }, - /** + /** * Converts an object into a HTMLCanvas element * @param {Object} options Options object * @param {Number} [options.multiplier=1] Multiplier to scale by @@ -1672,73 +1672,73 @@ * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 * @return {HTMLCanvasElement} Returns DOM element with the fabric.Object */ - toCanvasElement: function(options) { - options || (options = { }); - - var utils = fabric.util, origParams = utils.saveObjectTransform(this), - originalGroup = this.group, - originalShadow = this.shadow, abs = Math.abs, - retinaScaling = options.enableRetinaScaling ? Math.max(fabric.devicePixelRatio, 1) : 1, - multiplier = (options.multiplier || 1) * retinaScaling; - delete this.group; - if (options.withoutTransform) { - utils.resetObjectTransform(this); - } - if (options.withoutShadow) { - this.shadow = null; - } + toCanvasElement: function(options) { + options || (options = { }); + + var utils = fabric.util, origParams = utils.saveObjectTransform(this), + originalGroup = this.group, + originalShadow = this.shadow, abs = Math.abs, + retinaScaling = options.enableRetinaScaling ? Math.max(fabric.devicePixelRatio, 1) : 1, + multiplier = (options.multiplier || 1) * retinaScaling; + delete this.group; + if (options.withoutTransform) { + utils.resetObjectTransform(this); + } + if (options.withoutShadow) { + this.shadow = null; + } - var el = fabric.util.createCanvasElement(), - // skip canvas zoom and calculate with setCoords now. - boundingRect = this.getBoundingRect(true, true), - shadow = this.shadow, shadowOffset = { x: 0, y: 0 }, - width, height; - - if (shadow) { - var shadowBlur = shadow.blur; - var scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); - // consider non scaling shadow. - shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.x)); - shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.y)); - } - width = boundingRect.width + shadowOffset.x; - height = boundingRect.height + shadowOffset.y; - // if the current width/height is not an integer - // we need to make it so. - el.width = Math.ceil(width); - el.height = Math.ceil(height); - var canvas = new fabric.StaticCanvas(el, { - enableRetinaScaling: false, - renderOnAddRemove: false, - skipOffscreen: false, - }); - if (options.format === 'jpeg') { - canvas.backgroundColor = '#fff'; - } - this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); - var originalCanvas = this.canvas; - canvas._objects = [this]; - this.set('canvas', canvas); - this.setCoords(); - var canvasEl = canvas.toCanvasElement(multiplier || 1, options); - this.set('canvas', originalCanvas); - this.shadow = originalShadow; - if (originalGroup) { - this.group = originalGroup; - } - this.set(origParams); - this.setCoords(); - // canvas.dispose will call image.dispose that will nullify the elements - // since this canvas is a simple element for the process, we remove references - // to objects in this way in order to avoid object trashing. - canvas._objects = []; - canvas.dispose(); - canvas = null; - - return canvasEl; - }, - - /** + var el = fabric.util.createCanvasElement(), + // skip canvas zoom and calculate with setCoords now. + boundingRect = this.getBoundingRect(true, true), + shadow = this.shadow, shadowOffset = { x: 0, y: 0 }, + width, height; + + if (shadow) { + var shadowBlur = shadow.blur; + var scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); + // consider non scaling shadow. + shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.x)); + shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.y)); + } + width = boundingRect.width + shadowOffset.x; + height = boundingRect.height + shadowOffset.y; + // if the current width/height is not an integer + // we need to make it so. + el.width = Math.ceil(width); + el.height = Math.ceil(height); + var canvas = new fabric.StaticCanvas(el, { + enableRetinaScaling: false, + renderOnAddRemove: false, + skipOffscreen: false, + }); + if (options.format === 'jpeg') { + canvas.backgroundColor = '#fff'; + } + this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); + var originalCanvas = this.canvas; + canvas._objects = [this]; + this.set('canvas', canvas); + this.setCoords(); + var canvasEl = canvas.toCanvasElement(multiplier || 1, options); + this.set('canvas', originalCanvas); + this.shadow = originalShadow; + if (originalGroup) { + this.group = originalGroup; + } + this.set(origParams); + this.setCoords(); + // canvas.dispose will call image.dispose that will nullify the elements + // since this canvas is a simple element for the process, we remove references + // to objects in this way in order to avoid object trashing. + canvas._objects = []; + canvas.dispose(); + canvas = null; + + return canvasEl; + }, + + /** * Converts an object into a data-url-like string * @param {Object} options Options object * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" @@ -1753,163 +1753,163 @@ * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format */ - toDataURL: function(options) { - options || (options = { }); - return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); - }, + toDataURL: function(options) { + options || (options = { }); + return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); + }, - /** + /** * Returns true if specified type is identical to the type of an instance * @param {String} type Type to check against * @return {Boolean} */ - isType: function(type) { - return arguments.length > 1 ? Array.from(arguments).includes(this.type) : this.type === type; - }, + isType: function(type) { + return arguments.length > 1 ? Array.from(arguments).includes(this.type) : this.type === type; + }, - /** + /** * Returns complexity of an instance * @return {Number} complexity of this instance (is 1 unless subclassed) */ - complexity: function() { - return 1; - }, + complexity: function() { + return 1; + }, - /** + /** * Returns a JSON representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} JSON */ - toJSON: function(propertiesToInclude) { - // delegate, not alias - return this.toObject(propertiesToInclude); - }, + toJSON: function(propertiesToInclude) { + // delegate, not alias + return this.toObject(propertiesToInclude); + }, - /** + /** * Sets "angle" of an instance with centered rotation * @param {Number} angle Angle value (in degrees) * @return {fabric.Object} thisArg * @chainable */ - rotate: function(angle) { - var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; + rotate: function(angle) { + var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; - if (shouldCenterOrigin) { - this._setOriginToCenter(); - } + if (shouldCenterOrigin) { + this._setOriginToCenter(); + } - this.set('angle', angle); + this.set('angle', angle); - if (shouldCenterOrigin) { - this._resetOrigin(); - } + if (shouldCenterOrigin) { + this._resetOrigin(); + } - return this; - }, + return this; + }, - /** + /** * Centers object horizontally on canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - centerH: function () { - this.canvas && this.canvas.centerObjectH(this); - return this; - }, + centerH: function () { + this.canvas && this.canvas.centerObjectH(this); + return this; + }, - /** + /** * Centers object horizontally on current viewport of canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - viewportCenterH: function () { - this.canvas && this.canvas.viewportCenterObjectH(this); - return this; - }, + viewportCenterH: function () { + this.canvas && this.canvas.viewportCenterObjectH(this); + return this; + }, - /** + /** * Centers object vertically on canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - centerV: function () { - this.canvas && this.canvas.centerObjectV(this); - return this; - }, + centerV: function () { + this.canvas && this.canvas.centerObjectV(this); + return this; + }, - /** + /** * Centers object vertically on current viewport of canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - viewportCenterV: function () { - this.canvas && this.canvas.viewportCenterObjectV(this); - return this; - }, + viewportCenterV: function () { + this.canvas && this.canvas.viewportCenterObjectV(this); + return this; + }, - /** + /** * Centers object vertically and horizontally on canvas to which is was added last * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - center: function () { - this.canvas && this.canvas.centerObject(this); - return this; - }, + center: function () { + this.canvas && this.canvas.centerObject(this); + return this; + }, - /** + /** * Centers object on current viewport of canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - viewportCenter: function () { - this.canvas && this.canvas.viewportCenterObject(this); - return this; - }, + viewportCenter: function () { + this.canvas && this.canvas.viewportCenterObject(this); + return this; + }, - /** + /** * This callback function is called by the parent group of an object every * time a non-delegated property changes on the group. It is passed the key * and value as parameters. Not adding in this function's signature to avoid * Travis build error about unused variables. */ - setOnGroup: function() { - // implemented by sub-classes, as needed. - }, + setOnGroup: function() { + // implemented by sub-classes, as needed. + }, - /** + /** * Sets canvas globalCompositeOperation for specific object * custom composition operation for the particular object can be specified using globalCompositeOperation property * @param {CanvasRenderingContext2D} ctx Rendering canvas context */ - _setupCompositeOperation: function (ctx) { - if (this.globalCompositeOperation) { - ctx.globalCompositeOperation = this.globalCompositeOperation; - } - }, + _setupCompositeOperation: function (ctx) { + if (this.globalCompositeOperation) { + ctx.globalCompositeOperation = this.globalCompositeOperation; + } + }, - /** + /** * cancel instance's running animations * override if necessary to dispose artifacts such as `clipPath` */ - dispose: function () { - if (fabric.runningAnimations) { - fabric.runningAnimations.cancelByTarget(this); - } + dispose: function () { + if (fabric.runningAnimations) { + fabric.runningAnimations.cancelByTarget(this); } - }); + } +}); - fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); +fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); - extend(fabric.Object.prototype, fabric.Observable); +extend(fabric.Object.prototype, fabric.Observable); - /** +/** * Defines the number of fraction digits to use when serializing object values. * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc. * @static @@ -1917,9 +1917,9 @@ * @constant * @type Number */ - fabric.Object.NUM_FRACTION_DIGITS = 2; +fabric.Object.NUM_FRACTION_DIGITS = 2; - /** +/** * Defines which properties should be enlivened from the object passed to {@link fabric.Object._fromObject} * @static * @memberOf fabric.Object @@ -1927,22 +1927,22 @@ * @type string[] */ - fabric.Object._fromObject = function(klass, object, extraParam) { - var serializedObject = clone(object, true); - return fabric.util.enlivenObjectEnlivables(serializedObject).then(function(enlivedMap) { - var newObject = Object.assign(object, enlivedMap); - return extraParam ? new klass(object[extraParam], newObject) : new klass(newObject); - }); - }; +fabric.Object._fromObject = function(klass, object, extraParam) { + var serializedObject = clone(object, true); + return fabric.util.enlivenObjectEnlivables(serializedObject).then(function(enlivedMap) { + var newObject = Object.assign(object, enlivedMap); + return extraParam ? new klass(object[extraParam], newObject) : new klass(newObject); + }); +}; - fabric.Object.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Object, object); - }; +fabric.Object.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Object, object); +}; - /** +/** * Unique id used internally when creating SVG elements * @static * @memberOf fabric.Object * @type Number */ - fabric.Object.__uid = 0; +fabric.Object.__uid = 0; diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js index aaa76cec68c..9c5429c00ee 100644 --- a/src/shapes/path.class.js +++ b/src/shapes/path.class.js @@ -1,344 +1,344 @@ - var fabric = exports.fabric || (exports.fabric = { }), - min = fabric.util.array.min, - max = fabric.util.array.max, - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed; - - /** +var fabric = exports.fabric || (exports.fabric = { }), + min = fabric.util.array.min, + max = fabric.util.array.max, + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed; + +/** * Path class * @class fabric.Path * @extends fabric.Object * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup} * @see {@link fabric.Path#initialize} for constructor definition */ - fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { +fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'path', + type: 'path', - /** + /** * Array of path points * @type Array * @default */ - path: null, + path: null, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), - stateProperties: fabric.Object.prototype.stateProperties.concat('path'), + stateProperties: fabric.Object.prototype.stateProperties.concat('path'), - /** + /** * Constructor * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) * @param {Object} [options] Options object * @return {fabric.Path} thisArg */ - initialize: function (path, options) { - options = clone(options || {}); - delete options.path; - this.callSuper('initialize', options); - this._setPath(path || [], options); - }, - - /** + initialize: function (path, options) { + options = clone(options || {}); + delete options.path; + this.callSuper('initialize', options); + this._setPath(path || [], options); + }, + + /** * @private * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) * @param {Object} [options] Options object */ - _setPath: function (path, options) { - this.path = fabric.util.makePathSimpler( - Array.isArray(path) ? path : fabric.util.parsePath(path) - ); + _setPath: function (path, options) { + this.path = fabric.util.makePathSimpler( + Array.isArray(path) ? path : fabric.util.parsePath(path) + ); - fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); - }, + fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx context to render path on */ - _renderPathCommands: function(ctx) { - var current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - controlX = 0, // current control point x - controlY = 0, // current control point y - l = -this.pathOffset.x, - t = -this.pathOffset.y; - - ctx.beginPath(); - - for (var i = 0, len = this.path.length; i < len; ++i) { - - current = this.path[i]; - - switch (current[0]) { // first letter - - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - ctx.lineTo(x + l, y + t); - break; - - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - ctx.moveTo(x + l, y + t); - break; - - case 'C': // bezierCurveTo, absolute - x = current[5]; - y = current[6]; - controlX = current[3]; - controlY = current[4]; - ctx.bezierCurveTo( - current[1] + l, - current[2] + t, - controlX + l, - controlY + t, - x + l, - y + t - ); - break; - - case 'Q': // quadraticCurveTo, absolute - ctx.quadraticCurveTo( - current[1] + l, - current[2] + t, - current[3] + l, - current[4] + t - ); - x = current[3]; - y = current[4]; - controlX = current[1]; - controlY = current[2]; - break; - - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - ctx.closePath(); - break; - } + _renderPathCommands: function(ctx) { + var current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + controlX = 0, // current control point x + controlY = 0, // current control point y + l = -this.pathOffset.x, + t = -this.pathOffset.y; + + ctx.beginPath(); + + for (var i = 0, len = this.path.length; i < len; ++i) { + + current = this.path[i]; + + switch (current[0]) { // first letter + + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + ctx.lineTo(x + l, y + t); + break; + + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + ctx.moveTo(x + l, y + t); + break; + + case 'C': // bezierCurveTo, absolute + x = current[5]; + y = current[6]; + controlX = current[3]; + controlY = current[4]; + ctx.bezierCurveTo( + current[1] + l, + current[2] + t, + controlX + l, + controlY + t, + x + l, + y + t + ); + break; + + case 'Q': // quadraticCurveTo, absolute + ctx.quadraticCurveTo( + current[1] + l, + current[2] + t, + current[3] + l, + current[4] + t + ); + x = current[3]; + y = current[4]; + controlX = current[1]; + controlY = current[2]; + break; + + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + ctx.closePath(); + break; } - }, + } + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx context to render path on */ - _render: function(ctx) { - this._renderPathCommands(ctx); - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + this._renderPathCommands(ctx); + this._renderPaintInOrder(ctx); + }, - /** + /** * Returns string representation of an instance * @return {String} string representation of an instance */ - toString: function() { - return '#'; - }, + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - path: this.path.map(function(item) { return item.slice(); }), - }); - }, + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + path: this.path.map(function(item) { return item.slice(); }), + }); + }, - /** + /** * Returns dataless object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toDatalessObject: function(propertiesToInclude) { - var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); - if (o.sourcePath) { - delete o.path; - } - return o; - }, + toDatalessObject: function(propertiesToInclude) { + var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); + if (o.sourcePath) { + delete o.path; + } + return o; + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var path = fabric.util.joinPath(this.path); - return [ - '\n' - ]; - }, - - _getOffsetTransform: function() { - var digits = fabric.Object.NUM_FRACTION_DIGITS; - return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + + _toSVG: function() { + var path = fabric.util.joinPath(this.path); + return [ + '\n' + ]; + }, + + _getOffsetTransform: function() { + var digits = fabric.Object.NUM_FRACTION_DIGITS; + return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + toFixed(-this.pathOffset.y, digits) + ')'; - }, + }, - /** + /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toClipPathSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return '\t' + this._createBaseClipPathSVGMarkup( - this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } - ); - }, - - /** + toClipPathSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return '\t' + this._createBaseClipPathSVGMarkup( + this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } + ); + }, + + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); - }, - /* _TO_SVG_END_ */ + toSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); + }, + /* _TO_SVG_END_ */ - /** + /** * Returns number representation of an instance complexity * @return {Number} complexity of this instance */ - complexity: function() { - return this.path.length; - }, + complexity: function() { + return this.path.length; + }, - /** + /** * @private */ - _calcDimensions: function() { - - var aX = [], - aY = [], - current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - bounds; - - for (var i = 0, len = this.path.length; i < len; ++i) { - - current = this.path[i]; - - switch (current[0]) { // first letter - - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - bounds = []; - break; - - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - bounds = []; - break; - - case 'C': // bezierCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - x = current[5]; - y = current[6]; - break; - - case 'Q': // quadraticCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[1], - current[2], - current[3], - current[4] - ); - x = current[3]; - y = current[4]; - break; - - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - break; - } - bounds.forEach(function (point) { - aX.push(point.x); - aY.push(point.y); - }); - aX.push(x); - aY.push(y); + _calcDimensions: function() { + + var aX = [], + aY = [], + current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + bounds; + + for (var i = 0, len = this.path.length; i < len; ++i) { + + current = this.path[i]; + + switch (current[0]) { // first letter + + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + bounds = []; + break; + + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + bounds = []; + break; + + case 'C': // bezierCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + x = current[5]; + y = current[6]; + break; + + case 'Q': // quadraticCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[1], + current[2], + current[3], + current[4] + ); + x = current[3]; + y = current[4]; + break; + + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + break; } - - var minX = min(aX) || 0, - minY = min(aY) || 0, - maxX = max(aX) || 0, - maxY = max(aY) || 0, - deltaX = maxX - minX, - deltaY = maxY - minY; - - return { - left: minX, - top: minY, - width: deltaX, - height: deltaY - }; + bounds.forEach(function (point) { + aX.push(point.x); + aY.push(point.y); + }); + aX.push(x); + aY.push(y); } - }); - /** + var minX = min(aX) || 0, + minY = min(aY) || 0, + maxX = max(aX) || 0, + maxY = max(aY) || 0, + deltaX = maxX - minX, + deltaY = maxY - minY; + + return { + left: minX, + top: minY, + width: deltaX, + height: deltaY + }; + } +}); + +/** * Creates an instance of fabric.Path from an object * @static * @memberOf fabric.Path * @param {Object} object * @returns {Promise} */ - fabric.Path.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Path, object, 'path'); - }; +fabric.Path.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Path, object, 'path'); +}; - /* _FROM_SVG_START_ */ - /** +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) * @static * @memberOf fabric.Path * @see http://www.w3.org/TR/SVG/paths.html#PathElement */ - fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); +fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); - /** +/** * Creates an instance of fabric.Path from an SVG element * @static * @memberOf fabric.Path @@ -347,9 +347,9 @@ * @param {Object} [options] Options object * @param {Function} [callback] Options callback invoked after parsing is finished */ - fabric.Path.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); - }; - /* _FROM_SVG_END_ */ +fabric.Path.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); +}; +/* _FROM_SVG_END_ */ diff --git a/src/shapes/polygon.class.js b/src/shapes/polygon.class.js index b47c0433ea7..c8d956eb18d 100644 --- a/src/shapes/polygon.class.js +++ b/src/shapes/polygon.class.js @@ -1,52 +1,52 @@ - var fabric = exports.fabric || (exports.fabric = {}), - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; +var fabric = exports.fabric || (exports.fabric = {}), + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; - /** +/** * Polygon class * @class fabric.Polygon * @extends fabric.Polyline * @see {@link fabric.Polygon#initialize} for constructor definition */ - fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { +fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'polygon', + type: 'polygon', - /** + /** * @private */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this); - }, + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; - } - ctx.closePath(); - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + ctx.closePath(); + this._renderPaintInOrder(ctx); + }, - }); +}); - /* _FROM_SVG_START_ */ - /** +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) * @static * @memberOf fabric.Polygon * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement */ - fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); +fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); - /** +/** * Returns {@link fabric.Polygon} instance from an SVG element * @static * @memberOf fabric.Polygon @@ -54,16 +54,16 @@ * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ - fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); - /* _FROM_SVG_END_ */ +fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); +/* _FROM_SVG_END_ */ - /** +/** * Returns fabric.Polygon instance from an object representation * @static * @memberOf fabric.Polygon * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Polygon.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Polygon, object, 'points'); - }; +fabric.Polygon.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Polygon, object, 'points'); +}; diff --git a/src/shapes/polyline.class.js b/src/shapes/polyline.class.js index 34c629f39b7..4af0273af2a 100644 --- a/src/shapes/polyline.class.js +++ b/src/shapes/polyline.class.js @@ -1,33 +1,33 @@ - var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - min = fabric.util.array.min, - max = fabric.util.array.max, - toFixed = fabric.util.toFixed, - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; +var fabric = exports.fabric || (exports.fabric = { }), + extend = fabric.util.object.extend, + min = fabric.util.array.min, + max = fabric.util.array.max, + toFixed = fabric.util.toFixed, + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; - /** +/** * Polyline class * @class fabric.Polyline * @extends fabric.Object * @see {@link fabric.Polyline#initialize} for constructor definition */ - fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { +fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'polyline', + type: 'polyline', - /** + /** * Points array * @type Array * @default */ - points: null, + points: null, - /** + /** * WARNING: Feature in progress * Calculate the exact bounding box taking in account strokeWidth on acute angles * this will be turned to true by default on fabric 6.0 @@ -36,11 +36,11 @@ * @type Boolean * @default false */ - exactBoundingBox: false, + exactBoundingBox: false, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), - /** + /** * Constructor * @param {Array} points Array of points (where each point is an object with x and y) * @param {Object} [options] Options object @@ -59,52 +59,52 @@ * top: 100 * }); */ - initialize: function(points, options) { - options = options || {}; - this.points = points || []; - this.callSuper('initialize', options); - this._setPositionDimensions(options); - }, + initialize: function(points, options) { + options = options || {}; + this.points = points || []; + this.callSuper('initialize', options); + this._setPositionDimensions(options); + }, - /** + /** * @private */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this, true); - }, + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this, true); + }, - _setPositionDimensions: function(options) { - options || (options = {}); - var calcDim = this._calcDimensions(options), correctLeftTop, - correctSize = this.exactBoundingBox ? this.strokeWidth : 0; - this.width = calcDim.width - correctSize; - this.height = calcDim.height - correctSize; - if (!options.fromSVG) { - correctLeftTop = this.translateToGivenOrigin( - { - // this looks bad, but is one way to keep it optional for now. - x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, - y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 - }, - 'left', - 'top', - this.originX, - this.originY - ); - } - if (typeof options.left === 'undefined') { - this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; - } - if (typeof options.top === 'undefined') { - this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; - } - this.pathOffset = { - x: calcDim.left + this.width / 2 + correctSize / 2, - y: calcDim.top + this.height / 2 + correctSize / 2 - }; - }, + _setPositionDimensions: function(options) { + options || (options = {}); + var calcDim = this._calcDimensions(options), correctLeftTop, + correctSize = this.exactBoundingBox ? this.strokeWidth : 0; + this.width = calcDim.width - correctSize; + this.height = calcDim.height - correctSize; + if (!options.fromSVG) { + correctLeftTop = this.translateToGivenOrigin( + { + // this looks bad, but is one way to keep it optional for now. + x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, + y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 + }, + 'left', + 'top', + this.originX, + this.originY + ); + } + if (typeof options.left === 'undefined') { + this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; + } + if (typeof options.top === 'undefined') { + this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; + } + this.pathOffset = { + x: calcDim.left + this.width / 2 + correctSize / 2, + y: calcDim.top + this.height / 2 + correctSize / 2 + }; + }, - /** + /** * Calculate the polygon min and max point from points array, * returning an object with left, top, width, height to measure the * polygon size @@ -114,113 +114,113 @@ * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point * @private */ - _calcDimensions: function() { + _calcDimensions: function() { - var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, - minX = min(points, 'x') || 0, - minY = min(points, 'y') || 0, - maxX = max(points, 'x') || 0, - maxY = max(points, 'y') || 0, - width = (maxX - minX), - height = (maxY - minY); + var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, + minX = min(points, 'x') || 0, + minY = min(points, 'y') || 0, + maxX = max(points, 'x') || 0, + maxY = max(points, 'y') || 0, + width = (maxX - minX), + height = (maxY - minY); - return { - left: minX, - top: minY, - width: width, - height: height, - }; - }, + return { + left: minX, + top: minY, + width: width, + height: height, + }; + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - points: this.points.concat() - }); - }, + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + points: this.points.concat() + }); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + _toSVG: function() { + var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - for (var i = 0, len = this.points.length; i < len; i++) { - points.push( - toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', - toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' - ); - } - return [ - '<' + this.type + ' ', 'COMMON_PARTS', - 'points="', points.join(''), - '" />\n' - ]; - }, - /* _TO_SVG_END_ */ + for (var i = 0, len = this.points.length; i < len; i++) { + points.push( + toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', + toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' + ); + } + return [ + '<' + this.type + ' ', 'COMMON_PARTS', + 'points="', points.join(''), + '" />\n' + ]; + }, + /* _TO_SVG_END_ */ - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - commonRender: function(ctx) { - var point, len = this.points.length, - x = this.pathOffset.x, - y = this.pathOffset.y; + commonRender: function(ctx) { + var point, len = this.points.length, + x = this.pathOffset.x, + y = this.pathOffset.y; - if (!len || isNaN(this.points[len - 1].y)) { - // do not draw if no points or odd points - // NaN comes from parseFloat of a empty string in parser - return false; - } - ctx.beginPath(); - ctx.moveTo(this.points[0].x - x, this.points[0].y - y); - for (var i = 0; i < len; i++) { - point = this.points[i]; - ctx.lineTo(point.x - x, point.y - y); - } - return true; - }, + if (!len || isNaN(this.points[len - 1].y)) { + // do not draw if no points or odd points + // NaN comes from parseFloat of a empty string in parser + return false; + } + ctx.beginPath(); + ctx.moveTo(this.points[0].x - x, this.points[0].y - y); + for (var i = 0; i < len; i++) { + point = this.points[i]; + ctx.lineTo(point.x - x, point.y - y); + } + return true; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; - } - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + this._renderPaintInOrder(ctx); + }, - /** + /** * Returns complexity of an instance * @return {Number} complexity of this instance */ - complexity: function() { - return this.get('points').length; - } - }); + complexity: function() { + return this.get('points').length; + } +}); - /* _FROM_SVG_START_ */ - /** +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement}) * @static * @memberOf fabric.Polyline * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement */ - fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); +fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); - /** +/** * Returns fabric.Polyline instance from an SVG element * @static * @memberOf fabric.Polyline @@ -228,31 +228,31 @@ * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ - fabric.Polyline.fromElementGenerator = function(_class) { - return function(element, callback, options) { - if (!element) { - return callback(null); - } - options || (options = { }); +fabric.Polyline.fromElementGenerator = function(_class) { + return function(element, callback, options) { + if (!element) { + return callback(null); + } + options || (options = { }); - var points = fabric.parsePointsAttribute(element.getAttribute('points')), - parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric[_class](points, extend(parsedAttributes, options))); - }; + var points = fabric.parsePointsAttribute(element.getAttribute('points')), + parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric[_class](points, extend(parsedAttributes, options))); }; +}; - fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); +fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); - /* _FROM_SVG_END_ */ +/* _FROM_SVG_END_ */ - /** +/** * Returns fabric.Polyline instance from an object representation * @static * @memberOf fabric.Polyline * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Polyline.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Polyline, object, 'points'); - }; +fabric.Polyline.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Polyline, object, 'points'); +}; diff --git a/src/shapes/rect.class.js b/src/shapes/rect.class.js index acce1227719..cfcecb28586 100644 --- a/src/shapes/rect.class.js +++ b/src/shapes/rect.class.js @@ -1,144 +1,144 @@ - var fabric = exports.fabric || (exports.fabric = { }); +var fabric = exports.fabric || (exports.fabric = { }); - /** +/** * Rectangle class * @class fabric.Rect * @extends fabric.Object * @return {fabric.Rect} thisArg * @see {@link fabric.Rect#initialize} for constructor definition */ - fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { +fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { - /** + /** * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged}) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), + stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), - /** + /** * Type of an object * @type String * @default */ - type: 'rect', + type: 'rect', - /** + /** * Horizontal border radius * @type Number * @default */ - rx: 0, + rx: 0, - /** + /** * Vertical border radius * @type Number * @default */ - ry: 0, + ry: 0, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), - /** + /** * Constructor * @param {Object} [options] Options object * @return {Object} thisArg */ - initialize: function(options) { - this.callSuper('initialize', options); - this._initRxRy(); - }, + initialize: function(options) { + this.callSuper('initialize', options); + this._initRxRy(); + }, - /** + /** * Initializes rx/ry attributes * @private */ - _initRxRy: function() { - if (this.rx && !this.ry) { - this.ry = this.rx; - } - else if (this.ry && !this.rx) { - this.rx = this.ry; - } - }, - - /** + _initRxRy: function() { + if (this.rx && !this.ry) { + this.ry = this.rx; + } + else if (this.ry && !this.rx) { + this.rx = this.ry; + } + }, + + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { + _render: function(ctx) { - // 1x1 case (used in spray brush) optimization was removed because - // with caching and higher zoom level this makes more damage than help + // 1x1 case (used in spray brush) optimization was removed because + // with caching and higher zoom level this makes more damage than help - var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, - ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, - w = this.width, - h = this.height, - x = -this.width / 2, - y = -this.height / 2, - isRounded = rx !== 0 || ry !== 0, - /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ - k = 1 - 0.5522847498; - ctx.beginPath(); + var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, + ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, + w = this.width, + h = this.height, + x = -this.width / 2, + y = -this.height / 2, + isRounded = rx !== 0 || ry !== 0, + /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ + k = 1 - 0.5522847498; + ctx.beginPath(); - ctx.moveTo(x + rx, y); + ctx.moveTo(x + rx, y); - ctx.lineTo(x + w - rx, y); - isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); + ctx.lineTo(x + w - rx, y); + isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); - ctx.lineTo(x + w, y + h - ry); - isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); + ctx.lineTo(x + w, y + h - ry); + isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); - ctx.lineTo(x + rx, y + h); - isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); + ctx.lineTo(x + rx, y + h); + isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); - ctx.lineTo(x, y + ry); - isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); + ctx.lineTo(x, y + ry); + isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); - ctx.closePath(); + ctx.closePath(); - this._renderPaintInOrder(ctx); - }, + this._renderPaintInOrder(ctx); + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var x = -this.width / 2, y = -this.height / 2; - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - }); - - /* _FROM_SVG_START_ */ - /** + _toSVG: function() { + var x = -this.width / 2, y = -this.height / 2; + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ +}); + +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) * @static * @memberOf fabric.Rect * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement */ - fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); +fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); - /** +/** * Returns {@link fabric.Rect} instance from an SVG element * @static * @memberOf fabric.Rect @@ -146,30 +146,30 @@ * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ - fabric.Rect.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); - } - options = options || { }; - - var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); - parsedAttributes.left = parsedAttributes.left || 0; - parsedAttributes.top = parsedAttributes.top || 0; - parsedAttributes.height = parsedAttributes.height || 0; - parsedAttributes.width = parsedAttributes.width || 0; - var rect = new fabric.Rect(Object.assign({}, options, parsedAttributes)); - rect.visible = rect.visible && rect.width > 0 && rect.height > 0; - callback(rect); - }; - /* _FROM_SVG_END_ */ - - /** +fabric.Rect.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } + options = options || { }; + + var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); + parsedAttributes.left = parsedAttributes.left || 0; + parsedAttributes.top = parsedAttributes.top || 0; + parsedAttributes.height = parsedAttributes.height || 0; + parsedAttributes.width = parsedAttributes.width || 0; + var rect = new fabric.Rect(Object.assign({}, options, parsedAttributes)); + rect.visible = rect.visible && rect.width > 0 && rect.height > 0; + callback(rect); +}; +/* _FROM_SVG_END_ */ + +/** * Returns {@link fabric.Rect} instance from an object representation * @static * @memberOf fabric.Rect * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Rect.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Rect, object); - }; +fabric.Rect.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Rect, object); +}; diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index d0a2a711345..8e82e518425 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -1,12 +1,12 @@ - var fabric = exports.fabric || (exports.fabric = { }), - clone = fabric.util.object.clone; +var fabric = exports.fabric || (exports.fabric = { }), + clone = fabric.util.object.clone; - var additionalProps = +var additionalProps = ('fontFamily fontWeight fontSize text underline overline linethrough' + ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + ' direction path pathStartOffset pathSide pathAlign').split(' '); - /** +/** * Text class * @class fabric.Text * @extends fabric.Object @@ -14,184 +14,184 @@ * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} * @see {@link fabric.Text#initialize} for constructor definition */ - fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { +fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { - /** + /** * Properties which when set cause object to change dimensions * @type Array * @private */ - _dimensionAffectingProps: [ - 'fontSize', - 'fontWeight', - 'fontFamily', - 'fontStyle', - 'lineHeight', - 'text', - 'charSpacing', - 'textAlign', - 'styles', - 'path', - 'pathStartOffset', - 'pathSide', - 'pathAlign' - ], - - /** + _dimensionAffectingProps: [ + 'fontSize', + 'fontWeight', + 'fontFamily', + 'fontStyle', + 'lineHeight', + 'text', + 'charSpacing', + 'textAlign', + 'styles', + 'path', + 'pathStartOffset', + 'pathSide', + 'pathAlign' + ], + + /** * @private */ - _reNewline: /\r?\n/, + _reNewline: /\r?\n/, - /** + /** * Use this regular expression to filter for whitespaces that is not a new line. * Mostly used when text is 'justify' aligned. * @private */ - _reSpacesAndTabs: /[ \t\r]/g, + _reSpacesAndTabs: /[ \t\r]/g, - /** + /** * Use this regular expression to filter for whitespace that is not a new line. * Mostly used when text is 'justify' aligned. * @private */ - _reSpaceAndTab: /[ \t\r]/, + _reSpaceAndTab: /[ \t\r]/, - /** + /** * Use this regular expression to filter consecutive groups of non spaces. * Mostly used when text is 'justify' aligned. * @private */ - _reWords: /\S+/g, + _reWords: /\S+/g, - /** + /** * Type of an object * @type String * @default */ - type: 'text', + type: 'text', - /** + /** * Font size (in pixels) * @type Number * @default */ - fontSize: 40, + fontSize: 40, - /** + /** * Font weight (e.g. bold, normal, 400, 600, 800) * @type {(Number|String)} * @default */ - fontWeight: 'normal', + fontWeight: 'normal', - /** + /** * Font family * @type String * @default */ - fontFamily: 'Times New Roman', + fontFamily: 'Times New Roman', - /** + /** * Text decoration underline. * @type Boolean * @default */ - underline: false, + underline: false, - /** + /** * Text decoration overline. * @type Boolean * @default */ - overline: false, + overline: false, - /** + /** * Text decoration linethrough. * @type Boolean * @default */ - linethrough: false, + linethrough: false, - /** + /** * Text alignment. Possible values: "left", "center", "right", "justify", * "justify-left", "justify-center" or "justify-right". * @type String * @default */ - textAlign: 'left', + textAlign: 'left', - /** + /** * Font style . Possible values: "", "normal", "italic" or "oblique". * @type String * @default */ - fontStyle: 'normal', + fontStyle: 'normal', - /** + /** * Line height * @type Number * @default */ - lineHeight: 1.16, + lineHeight: 1.16, - /** + /** * Superscript schema object (minimum overlap) * @type {Object} * @default */ - superscript: { - size: 0.60, // fontSize factor - baseline: -0.35 // baseline-shift factor (upwards) - }, + superscript: { + size: 0.60, // fontSize factor + baseline: -0.35 // baseline-shift factor (upwards) + }, - /** + /** * Subscript schema object (minimum overlap) * @type {Object} * @default */ - subscript: { - size: 0.60, // fontSize factor - baseline: 0.11 // baseline-shift factor (downwards) - }, + subscript: { + size: 0.60, // fontSize factor + baseline: 0.11 // baseline-shift factor (downwards) + }, - /** + /** * Background color of text lines * @type String * @default */ - textBackgroundColor: '', + textBackgroundColor: '', - /** + /** * List of properties to consider when checking if * state of an object is changed ({@link fabric.Object#hasStateChanged}) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), + stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), - /** + /** * List of properties to consider when checking if cache needs refresh * @type Array */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), + cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), - /** + /** * When defined, an object is rendered via stroke and this property specifies its color. * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 * @type String * @default */ - stroke: null, + stroke: null, - /** + /** * Shadow object representing shadow of this shape. * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 * @type fabric.Shadow * @default */ - shadow: null, + shadow: null, - /** + /** * fabric.Path that the text should follow. * since 4.6.0 the path will be drawn automatically. * if you want to make the path visible, give it a stroke and strokeWidth or fill value @@ -213,25 +213,25 @@ * }); * @default */ - path: null, + path: null, - /** + /** * Offset amount for text path starting position * Only used when text has a path * @type Number * @default */ - pathStartOffset: 0, + pathStartOffset: 0, - /** + /** * Which side of the path the text should be drawn on. * Only used when text has a path * @type {String} 'left|right' * @default */ - pathSide: 'left', + pathSide: 'left', - /** + /** * How text is aligned to the path. This property determines * the perpendicular position of each character relative to the path. * (one of "baseline", "center", "ascender", "descender") @@ -239,46 +239,46 @@ * @type String * @default */ - pathAlign: 'baseline', + pathAlign: 'baseline', - /** + /** * @private */ - _fontSizeFraction: 0.222, + _fontSizeFraction: 0.222, - /** + /** * @private */ - offsets: { - underline: 0.10, - linethrough: -0.315, - overline: -0.88 - }, + offsets: { + underline: 0.10, + linethrough: -0.315, + overline: -0.88 + }, - /** + /** * Text Line proportion to font Size (in pixels) * @type Number * @default */ - _fontSizeMult: 1.13, + _fontSizeMult: 1.13, - /** + /** * additional space between characters * expressed in thousands of em unit * @type Number * @default */ - charSpacing: 0, + charSpacing: 0, - /** + /** * Object containing character styles - top-level properties -> line numbers, * 2nd-level properties - character numbers * @type Object * @default */ - styles: null, + styles: null, - /** + /** * Reference to a context to measure text char or couple of chars * the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas * once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every @@ -286,16 +286,16 @@ * @type {CanvasRenderingContext2D} * @default */ - _measuringContext: null, + _measuringContext: null, - /** + /** * Baseline shift, styles only, keep at 0 for the main text object * @type {Number} * @default */ - deltaY: 0, + deltaY: 0, - /** + /** * WARNING: EXPERIMENTAL. NOT SUPPORTED YET * determine the direction of the text. * This has to be set manually together with textAlign and originX for proper @@ -306,82 +306,82 @@ * @type {String} 'ltr|rtl' * @default */ - direction: 'ltr', + direction: 'ltr', - /** + /** * Array of properties that define a style unit (of 'styles'). * @type {Array} * @default */ - _styleProperties: [ - 'stroke', - 'strokeWidth', - 'fill', - 'fontFamily', - 'fontSize', - 'fontWeight', - 'fontStyle', - 'underline', - 'overline', - 'linethrough', - 'deltaY', - 'textBackgroundColor', - ], - - /** + _styleProperties: [ + 'stroke', + 'strokeWidth', + 'fill', + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'underline', + 'overline', + 'linethrough', + 'deltaY', + 'textBackgroundColor', + ], + + /** * contains characters bounding boxes */ - __charBounds: [], + __charBounds: [], - /** + /** * use this size when measuring text. To avoid IE11 rounding errors * @type {Number} * @default * @readonly * @private */ - CACHE_FONT_SIZE: 400, + CACHE_FONT_SIZE: 400, - /** + /** * contains the min text width to avoid getting 0 * @type {Number} * @default */ - MIN_TEXT_WIDTH: 2, + MIN_TEXT_WIDTH: 2, - /** + /** * Constructor * @param {String} text Text string * @param {Object} [options] Options object * @return {fabric.Text} thisArg */ - initialize: function(text, options) { - this.styles = options ? (options.styles || { }) : { }; - this.text = text; - this.__skipDimension = true; - this.callSuper('initialize', options); - if (this.path) { - this.setPathInfo(); - } - this.__skipDimension = false; - this.initDimensions(); - this.setCoords(); - this.setupState({ propertySet: '_dimensionAffectingProps' }); - }, + initialize: function(text, options) { + this.styles = options ? (options.styles || { }) : { }; + this.text = text; + this.__skipDimension = true; + this.callSuper('initialize', options); + if (this.path) { + this.setPathInfo(); + } + this.__skipDimension = false; + this.initDimensions(); + this.setCoords(); + this.setupState({ propertySet: '_dimensionAffectingProps' }); + }, - /** + /** * If text has a path, it will add the extra information needed * for path and text calculations * @return {fabric.Text} thisArg */ - setPathInfo: function() { - var path = this.path; - if (path) { - path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); - } - }, + setPathInfo: function() { + var path = this.path; + if (path) { + path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); + } + }, - /** + /** * Return a context for measurement of text string. * if created it gets stored for reuse * this is for internal use, please do not use it @@ -390,114 +390,114 @@ * @param {Object} [options] Options object * @return {fabric.Text} thisArg */ - getMeasuringContext: function() { - // if we did not return we have to measure something. - if (!fabric._measuringContext) { - fabric._measuringContext = this.canvas && this.canvas.contextCache || + getMeasuringContext: function() { + // if we did not return we have to measure something. + if (!fabric._measuringContext) { + fabric._measuringContext = this.canvas && this.canvas.contextCache || fabric.util.createCanvasElement().getContext('2d'); - } - return fabric._measuringContext; - }, + } + return fabric._measuringContext; + }, - /** + /** * @private * Divides text into lines of text and lines of graphemes. */ - _splitText: function() { - var newLines = this._splitTextIntoLines(this.text); - this.textLines = newLines.lines; - this._textLines = newLines.graphemeLines; - this._unwrappedTextLines = newLines._unwrappedLines; - this._text = newLines.graphemeText; - return newLines; - }, + _splitText: function() { + var newLines = this._splitTextIntoLines(this.text); + this.textLines = newLines.lines; + this._textLines = newLines.graphemeLines; + this._unwrappedTextLines = newLines._unwrappedLines; + this._text = newLines.graphemeText; + return newLines; + }, - /** + /** * Initialize or update text dimensions. * Updates this.width and this.height with the proper values. * Does not return dimensions. */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this._splitText(); - this._clearCache(); - if (this.path) { - this.width = this.path.width; - this.height = this.path.height; - } - else { - this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; - this.height = this.calcTextHeight(); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this._splitText(); + this._clearCache(); + if (this.path) { + this.width = this.path.width; + this.height = this.path.height; + } + else { + this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; + this.height = this.calcTextHeight(); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, - /** + /** * Enlarge space boxes and shift the others */ - enlargeSpaces: function() { - var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; - for (var i = 0, len = this._textLines.length; i < len; i++) { - if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { - continue; - } - accumulatedSpace = 0; - line = this._textLines[i]; - currentLineWidth = this.getLineWidth(i); - if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { - numberOfSpaces = spaces.length; - diffSpace = (this.width - currentLineWidth) / numberOfSpaces; - for (var j = 0, jlen = line.length; j <= jlen; j++) { - charBound = this.__charBounds[i][j]; - if (this._reSpaceAndTab.test(line[j])) { - charBound.width += diffSpace; - charBound.kernedWidth += diffSpace; - charBound.left += accumulatedSpace; - accumulatedSpace += diffSpace; - } - else { - charBound.left += accumulatedSpace; - } + enlargeSpaces: function() { + var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { + continue; + } + accumulatedSpace = 0; + line = this._textLines[i]; + currentLineWidth = this.getLineWidth(i); + if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { + numberOfSpaces = spaces.length; + diffSpace = (this.width - currentLineWidth) / numberOfSpaces; + for (var j = 0, jlen = line.length; j <= jlen; j++) { + charBound = this.__charBounds[i][j]; + if (this._reSpaceAndTab.test(line[j])) { + charBound.width += diffSpace; + charBound.kernedWidth += diffSpace; + charBound.left += accumulatedSpace; + accumulatedSpace += diffSpace; + } + else { + charBound.left += accumulatedSpace; } } } - }, + } + }, - /** + /** * Detect if the text line is ended with an hard break * text and itext do not have wrapping, return false * @return {Boolean} */ - isEndOfWrapping: function(lineIndex) { - return lineIndex === this._textLines.length - 1; - }, + isEndOfWrapping: function(lineIndex) { + return lineIndex === this._textLines.length - 1; + }, - /** + /** * Detect if a line has a linebreak and so we need to account for it when moving * and counting style. * It return always for text and Itext. * @return Number */ - missingNewlineOffset: function() { - return 1; - }, + missingNewlineOffset: function() { + return 1; + }, - /** + /** * Returns string representation of an instance * @return {String} String representation of text object */ - toString: function() { - return '#'; - }, + }, - /** + /** * Return the dimension and the zoom level needed to create a cache canvas * big enough to host the object to be cached. * @private @@ -508,45 +508,45 @@ * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function() { - var dims = this.callSuper('_getCacheCanvasDimensions'); - var fontSize = this.fontSize; - dims.width += fontSize * dims.zoomX; - dims.height += fontSize * dims.zoomY; - return dims; - }, + _getCacheCanvasDimensions: function() { + var dims = this.callSuper('_getCacheCanvasDimensions'); + var fontSize = this.fontSize; + dims.width += fontSize * dims.zoomX; + dims.height += fontSize * dims.zoomY; + return dims; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - var path = this.path; - path && !path.isNotVisible() && path._render(ctx); - this._setTextStyles(ctx); - this._renderTextLinesBackground(ctx); - this._renderTextDecoration(ctx, 'underline'); - this._renderText(ctx); - this._renderTextDecoration(ctx, 'overline'); - this._renderTextDecoration(ctx, 'linethrough'); - }, - - /** + _render: function(ctx) { + var path = this.path; + path && !path.isNotVisible() && path._render(ctx); + this._setTextStyles(ctx); + this._renderTextLinesBackground(ctx); + this._renderTextDecoration(ctx, 'underline'); + this._renderText(ctx); + this._renderTextDecoration(ctx, 'overline'); + this._renderTextDecoration(ctx, 'linethrough'); + }, + + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderText: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderTextStroke(ctx); - this._renderTextFill(ctx); - } - else { - this._renderTextFill(ctx); - this._renderTextStroke(ctx); - } - }, + _renderText: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderTextStroke(ctx); + this._renderTextFill(ctx); + } + else { + this._renderTextFill(ctx); + this._renderTextStroke(ctx); + } + }, - /** + /** * Set the font parameter of the context with the object properties or with charStyle * @private * @param {CanvasRenderingContext2D} ctx Context to render on @@ -556,43 +556,43 @@ * @param {String} [charStyle.fontWeight] Font weight * @param {String} [charStyle.fontStyle] Font style (italic|normal) */ - _setTextStyles: function(ctx, charStyle, forMeasuring) { - ctx.textBaseline = 'alphabetical'; - if (this.path) { - switch (this.pathAlign) { - case 'center': - ctx.textBaseline = 'middle'; - break; - case 'ascender': - ctx.textBaseline = 'top'; - break; - case 'descender': - ctx.textBaseline = 'bottom'; - break; - } + _setTextStyles: function(ctx, charStyle, forMeasuring) { + ctx.textBaseline = 'alphabetical'; + if (this.path) { + switch (this.pathAlign) { + case 'center': + ctx.textBaseline = 'middle'; + break; + case 'ascender': + ctx.textBaseline = 'top'; + break; + case 'descender': + ctx.textBaseline = 'bottom'; + break; } - ctx.font = this._getFontDeclaration(charStyle, forMeasuring); - }, + } + ctx.font = this._getFontDeclaration(charStyle, forMeasuring); + }, - /** + /** * calculate and return the text Width measuring each line. * @private * @param {CanvasRenderingContext2D} ctx Context to render on * @return {Number} Maximum width of fabric.Text object */ - calcTextWidth: function() { - var maxWidth = this.getLineWidth(0); + calcTextWidth: function() { + var maxWidth = this.getLineWidth(0); - for (var i = 1, len = this._textLines.length; i < len; i++) { - var currentLineWidth = this.getLineWidth(i); - if (currentLineWidth > maxWidth) { - maxWidth = currentLineWidth; - } + for (var i = 1, len = this._textLines.length; i < len; i++) { + var currentLineWidth = this.getLineWidth(i); + if (currentLineWidth > maxWidth) { + maxWidth = currentLineWidth; } - return maxWidth; - }, + } + return maxWidth; + }, - /** + /** * @private * @param {String} method Method name ("fillText" or "strokeText") * @param {CanvasRenderingContext2D} ctx Context to render on @@ -601,96 +601,96 @@ * @param {Number} top Top position of text * @param {Number} lineIndex Index of a line in a text */ - _renderTextLine: function(method, ctx, line, left, top, lineIndex) { - this._renderChars(method, ctx, line, left, top, lineIndex); - }, + _renderTextLine: function(method, ctx, line, left, top, lineIndex) { + this._renderChars(method, ctx, line, left, top, lineIndex); + }, - /** + /** * Renders the text background for lines, taking care of style * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextLinesBackground: function(ctx) { - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { - return; - } - var heightOfLine, - lineLeftOffset, originalFill = ctx.fillStyle, - line, lastColor, - leftOffset = this._getLeftOffset(), - lineTopOffset = this._getTopOffset(), - boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, - drawStart; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { - lineTopOffset += heightOfLine; - continue; - } - line = this._textLines[i]; - lineLeftOffset = this._getLineLeftOffset(i); - boxWidth = 0; - boxStart = 0; - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - ctx.fillStyle = currentColor; - currentColor && ctx.fillRect( - -charBox.width / 2, - -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), - charBox.width, - heightOfLine / this.lineHeight - ); - ctx.restore(); - } - else if (currentColor !== lastColor) { - drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - ctx.fillStyle = lastColor; - lastColor && ctx.fillRect( - drawStart, - lineTopOffset, - boxWidth, - heightOfLine / this.lineHeight - ); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; - } - else { - boxWidth += charBox.kernedWidth; - } + _renderTextLinesBackground: function(ctx) { + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { + return; + } + var heightOfLine, + lineLeftOffset, originalFill = ctx.fillStyle, + line, lastColor, + leftOffset = this._getLeftOffset(), + lineTopOffset = this._getTopOffset(), + boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, + drawStart; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { + lineTopOffset += heightOfLine; + continue; + } + line = this._textLines[i]; + lineLeftOffset = this._getLineLeftOffset(i); + boxWidth = 0; + boxStart = 0; + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillStyle = currentColor; + currentColor && ctx.fillRect( + -charBox.width / 2, + -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), + charBox.width, + heightOfLine / this.lineHeight + ); + ctx.restore(); } - if (currentColor && !path) { + else if (currentColor !== lastColor) { drawStart = leftOffset + lineLeftOffset + boxStart; if (this.direction === 'rtl') { drawStart = this.width - drawStart - boxWidth; } - ctx.fillStyle = currentColor; - ctx.fillRect( + ctx.fillStyle = lastColor; + lastColor && ctx.fillRect( drawStart, lineTopOffset, boxWidth, heightOfLine / this.lineHeight ); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; + } + else { + boxWidth += charBox.kernedWidth; } - lineTopOffset += heightOfLine; } - ctx.fillStyle = originalFill; - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, + if (currentColor && !path) { + drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = currentColor; + ctx.fillRect( + drawStart, + lineTopOffset, + boxWidth, + heightOfLine / this.lineHeight + ); + } + lineTopOffset += heightOfLine; + } + ctx.fillStyle = originalFill; + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** + /** * @private * @param {Object} decl style declaration for cache * @param {String} decl.fontFamily fontFamily @@ -698,20 +698,20 @@ * @param {String} decl.fontWeight fontWeight * @return {Object} reference to cache */ - getFontCache: function(decl) { - var fontFamily = decl.fontFamily.toLowerCase(); - if (!fabric.charWidthsCache[fontFamily]) { - fabric.charWidthsCache[fontFamily] = { }; - } - var cache = fabric.charWidthsCache[fontFamily], - cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); - if (!cache[cacheProp]) { - cache[cacheProp] = { }; - } - return cache[cacheProp]; - }, + getFontCache: function(decl) { + var fontFamily = decl.fontFamily.toLowerCase(); + if (!fabric.charWidthsCache[fontFamily]) { + fabric.charWidthsCache[fontFamily] = { }; + } + var cache = fabric.charWidthsCache[fontFamily], + cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); + if (!cache[cacheProp]) { + cache[cacheProp] = { }; + } + return cache[cacheProp]; + }, - /** + /** * measure and return the width of a single character. * possibly overridden to accommodate different measure logic or * to hook some external lib for character measurement @@ -721,137 +721,137 @@ * @param {String} [previousChar] previous char * @param {Object} [prevCharStyle] style of previous char */ - _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { - // first i try to return from cache - var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), - previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, - stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, - fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; + _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { + // first i try to return from cache + var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), + previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, + stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, + fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; - if (previousChar && fontCache[previousChar] !== undefined) { - previousWidth = fontCache[previousChar]; - } - if (fontCache[_char] !== undefined) { - kernedWidth = width = fontCache[_char]; - } - if (stylesAreEqual && fontCache[couple] !== undefined) { - coupleWidth = fontCache[couple]; - kernedWidth = coupleWidth - previousWidth; - } - if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { - var ctx = this.getMeasuringContext(); - // send a TRUE to specify measuring font size CACHE_FONT_SIZE - this._setTextStyles(ctx, charStyle, true); - } - if (width === undefined) { - kernedWidth = width = ctx.measureText(_char).width; - fontCache[_char] = width; - } - if (previousWidth === undefined && stylesAreEqual && previousChar) { - previousWidth = ctx.measureText(previousChar).width; - fontCache[previousChar] = previousWidth; - } - if (stylesAreEqual && coupleWidth === undefined) { - // we can measure the kerning couple and subtract the width of the previous character - coupleWidth = ctx.measureText(couple).width; - fontCache[couple] = coupleWidth; - kernedWidth = coupleWidth - previousWidth; - } - return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; - }, + if (previousChar && fontCache[previousChar] !== undefined) { + previousWidth = fontCache[previousChar]; + } + if (fontCache[_char] !== undefined) { + kernedWidth = width = fontCache[_char]; + } + if (stylesAreEqual && fontCache[couple] !== undefined) { + coupleWidth = fontCache[couple]; + kernedWidth = coupleWidth - previousWidth; + } + if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { + var ctx = this.getMeasuringContext(); + // send a TRUE to specify measuring font size CACHE_FONT_SIZE + this._setTextStyles(ctx, charStyle, true); + } + if (width === undefined) { + kernedWidth = width = ctx.measureText(_char).width; + fontCache[_char] = width; + } + if (previousWidth === undefined && stylesAreEqual && previousChar) { + previousWidth = ctx.measureText(previousChar).width; + fontCache[previousChar] = previousWidth; + } + if (stylesAreEqual && coupleWidth === undefined) { + // we can measure the kerning couple and subtract the width of the previous character + coupleWidth = ctx.measureText(couple).width; + fontCache[couple] = coupleWidth; + kernedWidth = coupleWidth - previousWidth; + } + return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; + }, - /** + /** * Computes height of character at given position * @param {Number} line the line index number * @param {Number} _char the character index number * @return {Number} fontSize of the character */ - getHeightOfChar: function(line, _char) { - return this.getValueOfPropertyAt(line, _char, 'fontSize'); - }, + getHeightOfChar: function(line, _char) { + return this.getValueOfPropertyAt(line, _char, 'fontSize'); + }, - /** + /** * measure a text line measuring all characters. * @param {Number} lineIndex line number * @return {Number} Line width */ - measureLine: function(lineIndex) { - var lineInfo = this._measureLine(lineIndex); - if (this.charSpacing !== 0) { - lineInfo.width -= this._getWidthOfCharSpacing(); - } - if (lineInfo.width < 0) { - lineInfo.width = 0; - } - return lineInfo; - }, + measureLine: function(lineIndex) { + var lineInfo = this._measureLine(lineIndex); + if (this.charSpacing !== 0) { + lineInfo.width -= this._getWidthOfCharSpacing(); + } + if (lineInfo.width < 0) { + lineInfo.width = 0; + } + return lineInfo; + }, - /** + /** * measure every grapheme of a line, populating __charBounds * @param {Number} lineIndex * @return {Object} object.width total width of characters * @return {Object} object.widthOfSpaces length of chars that match this._reSpacesAndTabs */ - _measureLine: function(lineIndex) { - var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, - graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), - positionInPath = 0, startingPoint, totalPathLength, path = this.path, - reverse = this.pathSide === 'right'; - - this.__charBounds[lineIndex] = lineBounds; - for (i = 0; i < line.length; i++) { - grapheme = line[i]; - graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); - lineBounds[i] = graphemeInfo; - width += graphemeInfo.kernedWidth; - prevGrapheme = grapheme; - } - // this latest bound box represent the last character of the line - // to simplify cursor handling in interactive mode. - lineBounds[i] = { - left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, - width: 0, - kernedWidth: 0, - height: this.fontSize - }; - if (path) { - totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; - startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); - startingPoint.x += path.pathOffset.x; - startingPoint.y += path.pathOffset.y; - switch (this.textAlign) { - case 'left': - positionInPath = reverse ? (totalPathLength - width) : 0; - break; - case 'center': - positionInPath = (totalPathLength - width) / 2; - break; - case 'right': - positionInPath = reverse ? 0 : (totalPathLength - width); - break; + _measureLine: function(lineIndex) { + var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, + graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), + positionInPath = 0, startingPoint, totalPathLength, path = this.path, + reverse = this.pathSide === 'right'; + + this.__charBounds[lineIndex] = lineBounds; + for (i = 0; i < line.length; i++) { + grapheme = line[i]; + graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); + lineBounds[i] = graphemeInfo; + width += graphemeInfo.kernedWidth; + prevGrapheme = grapheme; + } + // this latest bound box represent the last character of the line + // to simplify cursor handling in interactive mode. + lineBounds[i] = { + left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, + width: 0, + kernedWidth: 0, + height: this.fontSize + }; + if (path) { + totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; + startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); + startingPoint.x += path.pathOffset.x; + startingPoint.y += path.pathOffset.y; + switch (this.textAlign) { + case 'left': + positionInPath = reverse ? (totalPathLength - width) : 0; + break; + case 'center': + positionInPath = (totalPathLength - width) / 2; + break; + case 'right': + positionInPath = reverse ? 0 : (totalPathLength - width); + break; //todo - add support for justify + } + positionInPath += this.pathStartOffset * (reverse ? -1 : 1); + for (i = reverse ? line.length - 1 : 0; + reverse ? i >= 0 : i < line.length; + reverse ? i-- : i++) { + graphemeInfo = lineBounds[i]; + if (positionInPath > totalPathLength) { + positionInPath %= totalPathLength; } - positionInPath += this.pathStartOffset * (reverse ? -1 : 1); - for (i = reverse ? line.length - 1 : 0; - reverse ? i >= 0 : i < line.length; - reverse ? i-- : i++) { - graphemeInfo = lineBounds[i]; - if (positionInPath > totalPathLength) { - positionInPath %= totalPathLength; - } - else if (positionInPath < 0) { - positionInPath += totalPathLength; - } - // it would probably much faster to send all the grapheme position for a line - // and calculate path position/angle at once. - this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); - positionInPath += graphemeInfo.kernedWidth; + else if (positionInPath < 0) { + positionInPath += totalPathLength; } + // it would probably much faster to send all the grapheme position for a line + // and calculate path position/angle at once. + this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); + positionInPath += graphemeInfo.kernedWidth; } - return { width: width, numOfSpaces: numOfSpaces }; - }, + } + return { width: width, numOfSpaces: numOfSpaces }; + }, - /** + /** * Calculate the angle and the left,top position of the char that follow a path. * It appends it to graphemeInfo to be reused later at rendering * @private @@ -859,18 +859,18 @@ * @param {Object} graphemeInfo current grapheme box information * @param {Object} startingPoint position of the point */ - _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { - var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, - path = this.path; + _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { + var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, + path = this.path; - // we are at currentPositionOnPath. we want to know what point on the path is. - var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); - graphemeInfo.renderLeft = info.x - startingPoint.x; - graphemeInfo.renderTop = info.y - startingPoint.y; - graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); - }, + // we are at currentPositionOnPath. we want to know what point on the path is. + var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); + graphemeInfo.renderLeft = info.x - startingPoint.x; + graphemeInfo.renderTop = info.y - startingPoint.y; + graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); + }, - /** + /** * Measure and return the info of a single grapheme. * needs the the info of previous graphemes already filled * Override to customize measuring @@ -888,141 +888,141 @@ * @param {String} [prevGrapheme] character preceding the one to be measured * @returns {GraphemeBBox} grapheme bbox */ - _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { - var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), - prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, - info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), - kernedWidth = info.kernedWidth, - width = info.width, charSpacing; - - if (this.charSpacing !== 0) { - charSpacing = this._getWidthOfCharSpacing(); - width += charSpacing; - kernedWidth += charSpacing; - } + _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { + var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), + prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, + info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), + kernedWidth = info.kernedWidth, + width = info.width, charSpacing; + + if (this.charSpacing !== 0) { + charSpacing = this._getWidthOfCharSpacing(); + width += charSpacing; + kernedWidth += charSpacing; + } - var box = { - width: width, - left: 0, - height: style.fontSize, - kernedWidth: kernedWidth, - deltaY: style.deltaY, - }; - if (charIndex > 0 && !skipLeft) { - var previousBox = this.__charBounds[lineIndex][charIndex - 1]; - box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; - } - return box; - }, + var box = { + width: width, + left: 0, + height: style.fontSize, + kernedWidth: kernedWidth, + deltaY: style.deltaY, + }; + if (charIndex > 0 && !skipLeft) { + var previousBox = this.__charBounds[lineIndex][charIndex - 1]; + box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; + } + return box; + }, - /** + /** * Calculate height of line at 'lineIndex' * @param {Number} lineIndex index of line to calculate * @return {Number} */ - getHeightOfLine: function(lineIndex) { - if (this.__lineHeights[lineIndex]) { - return this.__lineHeights[lineIndex]; - } + getHeightOfLine: function(lineIndex) { + if (this.__lineHeights[lineIndex]) { + return this.__lineHeights[lineIndex]; + } - var line = this._textLines[lineIndex], - // char 0 is measured before the line cycle because it nneds to char - // emptylines - maxHeight = this.getHeightOfChar(lineIndex, 0); - for (var i = 1, len = line.length; i < len; i++) { - maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); - } + var line = this._textLines[lineIndex], + // char 0 is measured before the line cycle because it nneds to char + // emptylines + maxHeight = this.getHeightOfChar(lineIndex, 0); + for (var i = 1, len = line.length; i < len; i++) { + maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); + } - return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; - }, + return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; + }, - /** + /** * Calculate text box height */ - calcTextHeight: function() { - var lineHeight, height = 0; - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineHeight = this.getHeightOfLine(i); - height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); - } - return height; - }, + calcTextHeight: function() { + var lineHeight, height = 0; + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineHeight = this.getHeightOfLine(i); + height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); + } + return height; + }, - /** + /** * @private * @return {Number} Left offset */ - _getLeftOffset: function() { - return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; - }, + _getLeftOffset: function() { + return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; + }, - /** + /** * @private * @return {Number} Top offset */ - _getTopOffset: function() { - return -this.height / 2; - }, + _getTopOffset: function() { + return -this.height / 2; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on * @param {String} method Method name ("fillText" or "strokeText") */ - _renderTextCommon: function(ctx, method) { - ctx.save(); - var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); - for (var i = 0, len = this._textLines.length; i < len; i++) { - var heightOfLine = this.getHeightOfLine(i), - maxHeight = heightOfLine / this.lineHeight, - leftOffset = this._getLineLeftOffset(i); - this._renderTextLine( - method, - ctx, - this._textLines[i], - left + leftOffset, - top + lineHeights + maxHeight, - i - ); - lineHeights += heightOfLine; - } - ctx.restore(); - }, + _renderTextCommon: function(ctx, method) { + ctx.save(); + var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); + for (var i = 0, len = this._textLines.length; i < len; i++) { + var heightOfLine = this.getHeightOfLine(i), + maxHeight = heightOfLine / this.lineHeight, + leftOffset = this._getLineLeftOffset(i); + this._renderTextLine( + method, + ctx, + this._textLines[i], + left + leftOffset, + top + lineHeights + maxHeight, + i + ); + lineHeights += heightOfLine; + } + ctx.restore(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextFill: function(ctx) { - if (!this.fill && !this.styleHas('fill')) { - return; - } + _renderTextFill: function(ctx) { + if (!this.fill && !this.styleHas('fill')) { + return; + } - this._renderTextCommon(ctx, 'fillText'); - }, + this._renderTextCommon(ctx, 'fillText'); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextStroke: function(ctx) { - if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { - return; - } + _renderTextStroke: function(ctx) { + if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { + return; + } - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); - } + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } - ctx.save(); - this._setLineDash(ctx, this.strokeDashArray); - ctx.beginPath(); - this._renderTextCommon(ctx, 'strokeText'); - ctx.closePath(); - ctx.restore(); - }, + ctx.save(); + this._setLineDash(ctx, this.strokeDashArray); + ctx.beginPath(); + this._renderTextCommon(ctx, 'strokeText'); + ctx.closePath(); + ctx.restore(); + }, - /** + /** * @private * @param {String} method fillText or strokeText. * @param {CanvasRenderingContext2D} ctx Context to render on @@ -1031,80 +1031,80 @@ * @param {Number} top * @param {Number} lineIndex */ - _renderChars: function(method, ctx, line, left, top, lineIndex) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, - boxWidth = 0, - timeToRender, - path = this.path, - shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, - isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, - // this was changed in the PR #7674 - // currentDirection = ctx.canvas.getAttribute('dir'); - drawingLeft, currentDirection = ctx.direction; - ctx.save(); - if (currentDirection !== this.direction) { - ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); - ctx.direction = isLtr ? 'ltr' : 'rtl'; - ctx.textAlign = isLtr ? 'left' : 'right'; + _renderChars: function(method, ctx, line, left, top, lineIndex) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, + boxWidth = 0, + timeToRender, + path = this.path, + shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, + isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, + // this was changed in the PR #7674 + // currentDirection = ctx.canvas.getAttribute('dir'); + drawingLeft, currentDirection = ctx.direction; + ctx.save(); + if (currentDirection !== this.direction) { + ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); + ctx.direction = isLtr ? 'ltr' : 'rtl'; + ctx.textAlign = isLtr ? 'left' : 'right'; + } + top -= lineHeight * this._fontSizeFraction / this.lineHeight; + if (shortCut) { + // render all the line in one pass without checking + // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); + this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); + ctx.restore(); + return; + } + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing || path; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + left += sign * (charBox.kernedWidth - charBox.width); + boxWidth += charBox.width; } - top -= lineHeight * this._fontSizeFraction / this.lineHeight; - if (shortCut) { - // render all the line in one pass without checking - // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); - this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); - ctx.restore(); - return; + else { + boxWidth += charBox.kernedWidth; } - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing || path; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - left += sign * (charBox.kernedWidth - charBox.width); - boxWidth += charBox.width; - } - else { - boxWidth += charBox.kernedWidth; + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; - } - } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChanged(actualStyle, nextStyle); + } + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChanged(actualStyle, nextStyle); + } + if (timeToRender) { + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); + ctx.restore(); } - if (timeToRender) { - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); - ctx.restore(); - } - else { - drawingLeft = left; - this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); - } - charsToRender = ''; - actualStyle = nextStyle; - left += sign * boxWidth; - boxWidth = 0; + else { + drawingLeft = left; + this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); } + charsToRender = ''; + actualStyle = nextStyle; + left += sign * boxWidth; + boxWidth = 0; } - ctx.restore(); - }, + } + ctx.restore(); + }, - /** + /** * This function try to patch the missing gradientTransform on canvas gradients. * transforming a context to transform the gradient, is going to transform the stroke too. * we want to transform the gradient but not the stroke operation, so we create @@ -1115,63 +1115,63 @@ * @param {fabric.Gradient} filler a fabric gradient instance * @return {CanvasPattern} a pattern to use as fill/stroke style */ - _applyPatternGradientTransformText: function(filler) { - var pCanvas = fabric.util.createCanvasElement(), pCtx, - // TODO: verify compatibility with strokeUniform - width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.fillStyle = filler.toLive(pCtx); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fill(); - return pCtx.createPattern(pCanvas, 'no-repeat'); - }, - - handleFiller: function(ctx, property, filler) { - var offsetX, offsetY; - if (filler.toLive) { - if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - offsetX = -this.width / 2; - offsetY = -this.height / 2; - ctx.translate(offsetX, offsetY); - ctx[property] = this._applyPatternGradientTransformText(filler); - return { offsetX: offsetX, offsetY: offsetY }; - } - else { - // is a simple gradient or pattern - ctx[property] = filler.toLive(ctx, this); - return this._applyPatternGradientTransform(ctx, filler); - } + _applyPatternGradientTransformText: function(filler) { + var pCanvas = fabric.util.createCanvasElement(), pCtx, + // TODO: verify compatibility with strokeUniform + width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.fillStyle = filler.toLive(pCtx); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fill(); + return pCtx.createPattern(pCanvas, 'no-repeat'); + }, + + handleFiller: function(ctx, property, filler) { + var offsetX, offsetY; + if (filler.toLive) { + if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + offsetX = -this.width / 2; + offsetY = -this.height / 2; + ctx.translate(offsetX, offsetY); + ctx[property] = this._applyPatternGradientTransformText(filler); + return { offsetX: offsetX, offsetY: offsetY }; } else { - // is a color - ctx[property] = filler; + // is a simple gradient or pattern + ctx[property] = filler.toLive(ctx, this); + return this._applyPatternGradientTransform(ctx, filler); } - return { offsetX: 0, offsetY: 0 }; - }, - - _setStrokeStyles: function(ctx, decl) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = this.strokeLineCap; - ctx.lineDashOffset = this.strokeDashOffset; - ctx.lineJoin = this.strokeLineJoin; - ctx.miterLimit = this.strokeMiterLimit; - return this.handleFiller(ctx, 'strokeStyle', decl.stroke); - }, - - _setFillStyles: function(ctx, decl) { - return this.handleFiller(ctx, 'fillStyle', decl.fill); - }, - - /** + } + else { + // is a color + ctx[property] = filler; + } + return { offsetX: 0, offsetY: 0 }; + }, + + _setStrokeStyles: function(ctx, decl) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = this.strokeLineCap; + ctx.lineDashOffset = this.strokeDashOffset; + ctx.lineJoin = this.strokeLineJoin; + ctx.miterLimit = this.strokeMiterLimit; + return this.handleFiller(ctx, 'strokeStyle', decl.stroke); + }, + + _setFillStyles: function(ctx, decl) { + return this.handleFiller(ctx, 'fillStyle', decl.fill); + }, + + /** * @private * @param {String} method * @param {CanvasRenderingContext2D} ctx Context to render on @@ -1182,58 +1182,58 @@ * @param {Number} top Top coordinate * @param {Number} lineHeight Height of the line */ - _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { - var decl = this._getStyleDeclaration(lineIndex, charIndex), - fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), - shouldFill = method === 'fillText' && fullDecl.fill, - shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, - fillOffsets, strokeOffsets; + _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { + var decl = this._getStyleDeclaration(lineIndex, charIndex), + fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), + shouldFill = method === 'fillText' && fullDecl.fill, + shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, + fillOffsets, strokeOffsets; - if (!shouldStroke && !shouldFill) { - return; - } - ctx.save(); + if (!shouldStroke && !shouldFill) { + return; + } + ctx.save(); - shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); - shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); + shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); + shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); - ctx.font = this._getFontDeclaration(fullDecl); + ctx.font = this._getFontDeclaration(fullDecl); - if (decl && decl.textBackgroundColor) { - this._removeShadow(ctx); - } - if (decl && decl.deltaY) { - top += decl.deltaY; - } - shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); - shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); - ctx.restore(); - }, + if (decl && decl.textBackgroundColor) { + this._removeShadow(ctx); + } + if (decl && decl.deltaY) { + top += decl.deltaY; + } + shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); + shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); + ctx.restore(); + }, - /** + /** * Turns the character into a 'superior figure' (i.e. 'superscript') * @param {Number} start selection start * @param {Number} end selection end * @returns {fabric.Text} thisArg * @chainable */ - setSuperscript: function(start, end) { - return this._setScript(start, end, this.superscript); - }, + setSuperscript: function(start, end) { + return this._setScript(start, end, this.superscript); + }, - /** + /** * Turns the character into an 'inferior figure' (i.e. 'subscript') * @param {Number} start selection start * @param {Number} end selection end * @returns {fabric.Text} thisArg * @chainable */ - setSubscript: function(start, end) { - return this._setScript(start, end, this.subscript); - }, + setSubscript: function(start, end) { + return this._setScript(start, end, this.subscript); + }, - /** + /** * Applies 'schema' at given position * @private * @param {Number} start selection start @@ -1242,22 +1242,22 @@ * @returns {fabric.Text} thisArg * @chainable */ - _setScript: function(start, end, schema) { - var loc = this.get2DCursorLocation(start, true), - fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), - dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), - style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; - this.setSelectionStyles(style, start, end); - return this; - }, + _setScript: function(start, end, schema) { + var loc = this.get2DCursorLocation(start, true), + fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), + dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), + style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; + this.setSelectionStyles(style, start, end); + return this; + }, - /** + /** * @private * @param {Object} prevStyle * @param {Object} thisStyle */ - _hasStyleChanged: function(prevStyle, thisStyle) { - return prevStyle.fill !== thisStyle.fill || + _hasStyleChanged: function(prevStyle, thisStyle) { + return prevStyle.fill !== thisStyle.fill || prevStyle.stroke !== thisStyle.stroke || prevStyle.strokeWidth !== thisStyle.strokeWidth || prevStyle.fontSize !== thisStyle.fontSize || @@ -1265,367 +1265,367 @@ prevStyle.fontWeight !== thisStyle.fontWeight || prevStyle.fontStyle !== thisStyle.fontStyle || prevStyle.deltaY !== thisStyle.deltaY; - }, + }, - /** + /** * @private * @param {Object} prevStyle * @param {Object} thisStyle */ - _hasStyleChangedForSvg: function(prevStyle, thisStyle) { - return this._hasStyleChanged(prevStyle, thisStyle) || + _hasStyleChangedForSvg: function(prevStyle, thisStyle) { + return this._hasStyleChanged(prevStyle, thisStyle) || prevStyle.overline !== thisStyle.overline || prevStyle.underline !== thisStyle.underline || prevStyle.linethrough !== thisStyle.linethrough; - }, + }, - /** + /** * @private * @param {Number} lineIndex index text line * @return {Number} Line left offset */ - _getLineLeftOffset: function(lineIndex) { - var lineWidth = this.getLineWidth(lineIndex), - lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, - isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); - if (textAlign === 'justify' + _getLineLeftOffset: function(lineIndex) { + var lineWidth = this.getLineWidth(lineIndex), + lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, + isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); + if (textAlign === 'justify' || (textAlign === 'justify-center' && !isEndOfWrapping) || (textAlign === 'justify-right' && !isEndOfWrapping) || (textAlign === 'justify-left' && !isEndOfWrapping) - ) { - return 0; - } - if (textAlign === 'center') { - leftOffset = lineDiff / 2; - } - if (textAlign === 'right') { - leftOffset = lineDiff; - } - if (textAlign === 'justify-center') { - leftOffset = lineDiff / 2; + ) { + return 0; + } + if (textAlign === 'center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'right') { + leftOffset = lineDiff; + } + if (textAlign === 'justify-center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'justify-right') { + leftOffset = lineDiff; + } + if (direction === 'rtl') { + if (textAlign === 'right' || textAlign === 'justify' || textAlign === 'justify-right') { + leftOffset = 0; } - if (textAlign === 'justify-right') { - leftOffset = lineDiff; + else if (textAlign === 'left' || textAlign === 'justify-left') { + leftOffset = -lineDiff; } - if (direction === 'rtl') { - if (textAlign === 'right' || textAlign === 'justify' || textAlign === 'justify-right') { - leftOffset = 0; - } - else if (textAlign === 'left' || textAlign === 'justify-left') { - leftOffset = -lineDiff; - } - else if (textAlign === 'center' || textAlign === 'justify-center') { - leftOffset = -lineDiff / 2; - } + else if (textAlign === 'center' || textAlign === 'justify-center') { + leftOffset = -lineDiff / 2; } - return leftOffset; - }, + } + return leftOffset; + }, - /** + /** * @private */ - _clearCache: function() { - this.__lineWidths = []; - this.__lineHeights = []; - this.__charBounds = []; - }, + _clearCache: function() { + this.__lineWidths = []; + this.__lineHeights = []; + this.__charBounds = []; + }, - /** + /** * @private */ - _shouldClearDimensionCache: function() { - var shouldClear = this._forceClearCache; - shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); - if (shouldClear) { - this.dirty = true; - this._forceClearCache = false; - } - return shouldClear; - }, + _shouldClearDimensionCache: function() { + var shouldClear = this._forceClearCache; + shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); + if (shouldClear) { + this.dirty = true; + this._forceClearCache = false; + } + return shouldClear; + }, - /** + /** * Measure a single line given its index. Used to calculate the initial * text bounding box. The values are calculated and stored in __lineWidths cache. * @private * @param {Number} lineIndex line number * @return {Number} Line width */ - getLineWidth: function(lineIndex) { - if (this.__lineWidths[lineIndex] !== undefined) { - return this.__lineWidths[lineIndex]; - } + getLineWidth: function(lineIndex) { + if (this.__lineWidths[lineIndex] !== undefined) { + return this.__lineWidths[lineIndex]; + } - var lineInfo = this.measureLine(lineIndex); - var width = lineInfo.width; - this.__lineWidths[lineIndex] = width; - return width; - }, + var lineInfo = this.measureLine(lineIndex); + var width = lineInfo.width; + this.__lineWidths[lineIndex] = width; + return width; + }, - _getWidthOfCharSpacing: function() { - if (this.charSpacing !== 0) { - return this.fontSize * this.charSpacing / 1000; - } - return 0; - }, + _getWidthOfCharSpacing: function() { + if (this.charSpacing !== 0) { + return this.fontSize * this.charSpacing / 1000; + } + return 0; + }, - /** + /** * Retrieves the value of property at given character position * @param {Number} lineIndex the line number * @param {Number} charIndex the character number * @param {String} property the property name * @returns the value of 'property' */ - getValueOfPropertyAt: function(lineIndex, charIndex, property) { - var charStyle = this._getStyleDeclaration(lineIndex, charIndex); - if (charStyle && typeof charStyle[property] !== 'undefined') { - return charStyle[property]; - } - return this[property]; - }, + getValueOfPropertyAt: function(lineIndex, charIndex, property) { + var charStyle = this._getStyleDeclaration(lineIndex, charIndex); + if (charStyle && typeof charStyle[property] !== 'undefined') { + return charStyle[property]; + } + return this[property]; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextDecoration: function(ctx, type) { - if (!this[type] && !this.styleHas(type)) { - return; - } - var heightOfLine, size, _size, - lineLeftOffset, dy, _dy, - line, lastDecoration, - leftOffset = this._getLeftOffset(), - topOffset = this._getTopOffset(), top, - boxStart, boxWidth, charBox, currentDecoration, - maxHeight, currentFill, lastFill, path = this.path, - charSpacing = this._getWidthOfCharSpacing(), - offsetY = this.offsets[type]; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this[type] && !this.styleHas(type, i)) { - topOffset += heightOfLine; - continue; + _renderTextDecoration: function(ctx, type) { + if (!this[type] && !this.styleHas(type)) { + return; + } + var heightOfLine, size, _size, + lineLeftOffset, dy, _dy, + line, lastDecoration, + leftOffset = this._getLeftOffset(), + topOffset = this._getTopOffset(), top, + boxStart, boxWidth, charBox, currentDecoration, + maxHeight, currentFill, lastFill, path = this.path, + charSpacing = this._getWidthOfCharSpacing(), + offsetY = this.offsets[type]; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this[type] && !this.styleHas(type, i)) { + topOffset += heightOfLine; + continue; + } + line = this._textLines[i]; + maxHeight = heightOfLine / this.lineHeight; + lineLeftOffset = this._getLineLeftOffset(i); + boxStart = 0; + boxWidth = 0; + lastDecoration = this.getValueOfPropertyAt(i, 0, type); + lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); + top = topOffset + maxHeight * (1 - this._fontSizeFraction); + size = this.getHeightOfChar(i, 0); + dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentDecoration = this.getValueOfPropertyAt(i, j, type); + currentFill = this.getValueOfPropertyAt(i, j, 'fill'); + _size = this.getHeightOfChar(i, j); + _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); + if (path && currentDecoration && currentFill) { + ctx.save(); + ctx.fillStyle = lastFill; + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillRect( + -charBox.kernedWidth / 2, + offsetY * _size + _dy, + charBox.kernedWidth, + this.fontSize / 15 + ); + ctx.restore(); } - line = this._textLines[i]; - maxHeight = heightOfLine / this.lineHeight; - lineLeftOffset = this._getLineLeftOffset(i); - boxStart = 0; - boxWidth = 0; - lastDecoration = this.getValueOfPropertyAt(i, 0, type); - lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); - top = topOffset + maxHeight * (1 - this._fontSizeFraction); - size = this.getHeightOfChar(i, 0); - dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentDecoration = this.getValueOfPropertyAt(i, j, type); - currentFill = this.getValueOfPropertyAt(i, j, 'fill'); - _size = this.getHeightOfChar(i, j); - _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); - if (path && currentDecoration && currentFill) { - ctx.save(); + else if ( + (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) + && boxWidth > 0 + ) { + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + if (lastDecoration && lastFill) { ctx.fillStyle = lastFill; - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); ctx.fillRect( - -charBox.kernedWidth / 2, - offsetY * _size + _dy, - charBox.kernedWidth, + drawStart, + top + offsetY * size + dy, + boxWidth, this.fontSize / 15 ); - ctx.restore(); - } - else if ( - (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) - && boxWidth > 0 - ) { - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - if (lastDecoration && lastFill) { - ctx.fillStyle = lastFill; - ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth, - this.fontSize / 15 - ); - } - boxStart = charBox.left; - boxWidth = charBox.width; - lastDecoration = currentDecoration; - lastFill = currentFill; - size = _size; - dy = _dy; - } - else { - boxWidth += charBox.kernedWidth; } + boxStart = charBox.left; + boxWidth = charBox.width; + lastDecoration = currentDecoration; + lastFill = currentFill; + size = _size; + dy = _dy; } - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; + else { + boxWidth += charBox.kernedWidth; } - ctx.fillStyle = currentFill; - currentDecoration && currentFill && ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth - charSpacing, - this.fontSize / 15 - ); - topOffset += heightOfLine; } - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = currentFill; + currentDecoration && currentFill && ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth - charSpacing, + this.fontSize / 15 + ); + topOffset += heightOfLine; + } + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** + /** * return font declaration string for canvas context * @param {Object} [styleObject] object * @returns {String} font declaration formatted for canvas context. */ - _getFontDeclaration: function(styleObject, forMeasuring) { - var style = styleObject || this, family = this.fontFamily, - fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; - var fontFamily = family === undefined || + _getFontDeclaration: function(styleObject, forMeasuring) { + var style = styleObject || this, family = this.fontFamily, + fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; + var fontFamily = family === undefined || family.indexOf('\'') > -1 || family.indexOf(',') > -1 || family.indexOf('"') > -1 || fontIsGeneric - ? style.fontFamily : '"' + style.fontFamily + '"'; - return [ - // node-canvas needs "weight style", while browsers need "style weight" - // verify if this can be fixed in JSDOM - (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), - (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), - forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', - fontFamily - ].join(' '); - }, - - /** + ? style.fontFamily : '"' + style.fontFamily + '"'; + return [ + // node-canvas needs "weight style", while browsers need "style weight" + // verify if this can be fixed in JSDOM + (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), + (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), + forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', + fontFamily + ].join(' '); + }, + + /** * Renders text instance on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - render: function(ctx) { - // do not render if object is not visible - if (!this.visible) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - } - this.callSuper('render', ctx); - }, + render: function(ctx) { + // do not render if object is not visible + if (!this.visible) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + } + this.callSuper('render', ctx); + }, - /** + /** * Override this method to customize grapheme splitting * @param {string} value * @returns {string[]} array of graphemes */ - graphemeSplit: function (value) { - return fabric.util.string.graphemeSplit(value); - }, + graphemeSplit: function (value) { + return fabric.util.string.graphemeSplit(value); + }, - /** + /** * Returns the text as an array of lines. * @param {String} text text to split * @returns {Array} Lines in the text */ - _splitTextIntoLines: function(text) { - var lines = text.split(this._reNewline), - newLines = new Array(lines.length), - newLine = ['\n'], - newText = []; - for (var i = 0; i < lines.length; i++) { - newLines[i] = this.graphemeSplit(lines[i]); - newText = newText.concat(newLines[i], newLine); - } - newText.pop(); - return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; - }, + _splitTextIntoLines: function(text) { + var lines = text.split(this._reNewline), + newLines = new Array(lines.length), + newLine = ['\n'], + newText = []; + for (var i = 0; i < lines.length; i++) { + newLines[i] = this.graphemeSplit(lines[i]); + newText = newText.concat(newLines[i], newLine); + } + newText.pop(); + return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - var allProperties = additionalProps.concat(propertiesToInclude); - var obj = this.callSuper('toObject', allProperties); - // styles will be overridden with a properly cloned structure - obj.styles = clone(this.styles, true); - if (obj.path) { - obj.path = this.path.toObject(); - } - return obj; - }, + toObject: function(propertiesToInclude) { + var allProperties = additionalProps.concat(propertiesToInclude); + var obj = this.callSuper('toObject', allProperties); + // styles will be overridden with a properly cloned structure + obj.styles = clone(this.styles, true); + if (obj.path) { + obj.path = this.path.toObject(); + } + return obj; + }, - /** + /** * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. * @param {String|Object} key Property name or object (if object, iterate over the object properties) * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) * @return {fabric.Object} thisArg * @chainable */ - set: function(key, value) { - this.callSuper('set', key, value); - var needsDims = false; - var isAddingPath = false; - if (typeof key === 'object') { - for (var _key in key) { - if (_key === 'path') { - this.setPathInfo(); - } - needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; - isAddingPath = isAddingPath || _key === 'path'; + set: function(key, value) { + this.callSuper('set', key, value); + var needsDims = false; + var isAddingPath = false; + if (typeof key === 'object') { + for (var _key in key) { + if (_key === 'path') { + this.setPathInfo(); } + needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; + isAddingPath = isAddingPath || _key === 'path'; } - else { - needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; - isAddingPath = key === 'path'; - } - if (isAddingPath) { - this.setPathInfo(); - } - if (needsDims) { - this.initDimensions(); - this.setCoords(); - } - return this; - }, + } + else { + needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; + isAddingPath = key === 'path'; + } + if (isAddingPath) { + this.setPathInfo(); + } + if (needsDims) { + this.initDimensions(); + this.setCoords(); + } + return this; + }, - /** + /** * Returns complexity of an instance * @return {Number} complexity */ - complexity: function() { - return 1; - } - }); + complexity: function() { + return 1; + } +}); - /* _FROM_SVG_START_ */ - /** +/* _FROM_SVG_START_ */ +/** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement}) * @static * @memberOf fabric.Text * @see: http://www.w3.org/TR/SVG/text.html#TextElement */ - fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( - 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); +fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( + 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); - /** +/** * Default SVG font size * @static * @memberOf fabric.Text */ - fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; +fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; - /** +/** * Returns fabric.Text instance from an SVG element (not yet implemented) * @static * @memberOf fabric.Text @@ -1633,97 +1633,97 @@ * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ - fabric.Text.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); - } - - var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), - parsedAnchor = parsedAttributes.textAnchor || 'left'; - options = Object.assign({}, options, parsedAttributes); - - options.top = options.top || 0; - options.left = options.left || 0; - if (parsedAttributes.textDecoration) { - var textDecoration = parsedAttributes.textDecoration; - if (textDecoration.indexOf('underline') !== -1) { - options.underline = true; - } - if (textDecoration.indexOf('overline') !== -1) { - options.overline = true; - } - if (textDecoration.indexOf('line-through') !== -1) { - options.linethrough = true; - } - delete options.textDecoration; +fabric.Text.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } + + var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), + parsedAnchor = parsedAttributes.textAnchor || 'left'; + options = Object.assign({}, options, parsedAttributes); + + options.top = options.top || 0; + options.left = options.left || 0; + if (parsedAttributes.textDecoration) { + var textDecoration = parsedAttributes.textDecoration; + if (textDecoration.indexOf('underline') !== -1) { + options.underline = true; } - if ('dx' in parsedAttributes) { - options.left += parsedAttributes.dx; + if (textDecoration.indexOf('overline') !== -1) { + options.overline = true; } - if ('dy' in parsedAttributes) { - options.top += parsedAttributes.dy; + if (textDecoration.indexOf('line-through') !== -1) { + options.linethrough = true; } - if (!('fontSize' in options)) { - options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; - } - - var textContent = ''; - - // The XML is not properly parsed in IE9 so a workaround to get - // textContent is through firstChild.data. Another workaround would be - // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) - if (!('textContent' in element)) { - if ('firstChild' in element && element.firstChild !== null) { - if ('data' in element.firstChild && element.firstChild.data !== null) { - textContent = element.firstChild.data; - } + delete options.textDecoration; + } + if ('dx' in parsedAttributes) { + options.left += parsedAttributes.dx; + } + if ('dy' in parsedAttributes) { + options.top += parsedAttributes.dy; + } + if (!('fontSize' in options)) { + options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + } + + var textContent = ''; + + // The XML is not properly parsed in IE9 so a workaround to get + // textContent is through firstChild.data. Another workaround would be + // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) + if (!('textContent' in element)) { + if ('firstChild' in element && element.firstChild !== null) { + if ('data' in element.firstChild && element.firstChild.data !== null) { + textContent = element.firstChild.data; } } - else { - textContent = element.textContent; - } - - textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); - var originalStrokeWidth = options.strokeWidth; - options.strokeWidth = 0; - - var text = new fabric.Text(textContent, options), - textHeightScaleFactor = text.getScaledHeight() / text.height, - lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, - scaledDiff = lineHeightDiff * textHeightScaleFactor, - textHeight = text.getScaledHeight() + scaledDiff, - offX = 0; - /* + } + else { + textContent = element.textContent; + } + + textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); + var originalStrokeWidth = options.strokeWidth; + options.strokeWidth = 0; + + var text = new fabric.Text(textContent, options), + textHeightScaleFactor = text.getScaledHeight() / text.height, + lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, + scaledDiff = lineHeightDiff * textHeightScaleFactor, + textHeight = text.getScaledHeight() + scaledDiff, + offX = 0; + /* Adjust positioning: x/y attributes in SVG correspond to the bottom-left corner of text bounding box fabric output by default at top, left. */ - if (parsedAnchor === 'center') { - offX = text.getScaledWidth() / 2; - } - if (parsedAnchor === 'right') { - offX = text.getScaledWidth(); - } - text.set({ - left: text.left - offX, - top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, - strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, - }); - callback(text); - }; - /* _FROM_SVG_END_ */ + if (parsedAnchor === 'center') { + offX = text.getScaledWidth() / 2; + } + if (parsedAnchor === 'right') { + offX = text.getScaledWidth(); + } + text.set({ + left: text.left - offX, + top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, + strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, + }); + callback(text); +}; +/* _FROM_SVG_END_ */ - /** +/** * Returns fabric.Text instance from an object representation * @static * @memberOf fabric.Text * @param {Object} object plain js Object to create an instance from * @returns {Promise} */ - fabric.Text.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Text, object, 'text'); - }; +fabric.Text.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Text, object, 'text'); +}; - fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; +fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; - fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); +fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js index 768c4c74707..1fc29113129 100644 --- a/src/shapes/textbox.class.js +++ b/src/shapes/textbox.class.js @@ -1,6 +1,6 @@ - var fabric = exports.fabric || (exports.fabric = {}); +var fabric = exports.fabric || (exports.fabric = {}); - /** +/** * Textbox class, based on IText, allows the user to resize the text rectangle * and wraps lines automatically. Textboxes have their Y scaling locked, the * user can only change width. Height is adjusted automatically based on the @@ -11,226 +11,226 @@ * @return {fabric.Textbox} thisArg * @see {@link fabric.Textbox#initialize} for constructor definition */ - fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { +fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { - /** + /** * Type of an object * @type String * @default */ - type: 'textbox', + type: 'textbox', - /** + /** * Minimum width of textbox, in pixels. * @type Number * @default */ - minWidth: 20, + minWidth: 20, - /** + /** * Minimum calculated width of a textbox, in pixels. * fixed to 2 so that an empty textbox cannot go to 0 * and is still selectable without text. * @type Number * @default */ - dynamicMinWidth: 2, + dynamicMinWidth: 2, - /** + /** * Cached array of text wrapping. * @type Array */ - __cachedLines: null, + __cachedLines: null, - /** + /** * Override standard Object class values */ - lockScalingFlip: true, + lockScalingFlip: true, - /** + /** * Override standard Object class values * Textbox needs this on false */ - noScaleCache: false, + noScaleCache: false, - /** + /** * Properties which when set cause object to change dimensions * @type Object * @private */ - _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), + _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), - /** + /** * Use this regular expression to split strings in breakable lines * @private */ - _wordJoiners: /[ \t\r]/, + _wordJoiners: /[ \t\r]/, - /** + /** * Use this boolean property in order to split strings that have no white space concept. * this is a cheap way to help with chinese/japanese * @type Boolean * @since 2.6.0 */ - splitByGrapheme: false, + splitByGrapheme: false, - /** + /** * Unlike superclass's version of this function, Textbox does not update * its width. * @private * @override */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this._clearCache(); - // clear dynamicMinWidth as it will be different after we re-wrap line - this.dynamicMinWidth = 0; - // wrap lines - this._styleMap = this._generateStyleMap(this._splitText()); - // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap - if (this.dynamicMinWidth > this.width) { - this._set('width', this.dynamicMinWidth); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - // clear cache and re-calculate height - this.height = this.calcTextHeight(); - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this._clearCache(); + // clear dynamicMinWidth as it will be different after we re-wrap line + this.dynamicMinWidth = 0; + // wrap lines + this._styleMap = this._generateStyleMap(this._splitText()); + // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap + if (this.dynamicMinWidth > this.width) { + this._set('width', this.dynamicMinWidth); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + // clear cache and re-calculate height + this.height = this.calcTextHeight(); + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, - /** + /** * Generate an object that translates the style object so that it is * broken up by visual lines (new lines and automatic wrapping). * The original text styles object is broken up by actual lines (new lines only), * which is only sufficient for Text / IText * @private */ - _generateStyleMap: function(textInfo) { - var realLineCount = 0, - realLineCharCount = 0, - charCount = 0, - map = {}; - - for (var i = 0; i < textInfo.graphemeLines.length; i++) { - if (textInfo.graphemeText[charCount] === '\n' && i > 0) { - realLineCharCount = 0; - charCount++; - realLineCount++; - } - else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { - // this case deals with space's that are removed from end of lines when wrapping - realLineCharCount++; - charCount++; - } + _generateStyleMap: function(textInfo) { + var realLineCount = 0, + realLineCharCount = 0, + charCount = 0, + map = {}; + + for (var i = 0; i < textInfo.graphemeLines.length; i++) { + if (textInfo.graphemeText[charCount] === '\n' && i > 0) { + realLineCharCount = 0; + charCount++; + realLineCount++; + } + else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { + // this case deals with space's that are removed from end of lines when wrapping + realLineCharCount++; + charCount++; + } - map[i] = { line: realLineCount, offset: realLineCharCount }; + map[i] = { line: realLineCount, offset: realLineCharCount }; - charCount += textInfo.graphemeLines[i].length; - realLineCharCount += textInfo.graphemeLines[i].length; - } + charCount += textInfo.graphemeLines[i].length; + realLineCharCount += textInfo.graphemeLines[i].length; + } - return map; - }, + return map; + }, - /** + /** * Returns true if object has a style property or has it on a specified line * @param {Number} lineIndex * @return {Boolean} */ - styleHas: function(property, lineIndex) { - if (this._styleMap && !this.isWrapping) { - var map = this._styleMap[lineIndex]; - if (map) { - lineIndex = map.line; - } + styleHas: function(property, lineIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (map) { + lineIndex = map.line; } - return fabric.Text.prototype.styleHas.call(this, property, lineIndex); - }, + } + return fabric.Text.prototype.styleHas.call(this, property, lineIndex); + }, - /** + /** * Returns true if object has no styling or no styling in a line * @param {Number} lineIndex , lineIndex is on wrapped lines. * @return {Boolean} */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { - return true; - } - var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, - map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; - if (map) { - lineIndex = map.line; - offset = map.offset; - } - if (mapNextLine) { - nextLineIndex = mapNextLine.line; - shouldLimit = nextLineIndex === lineIndex; - nextOffset = mapNextLine.offset; - } - obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; - } + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, + map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; + if (map) { + lineIndex = map.line; + offset = map.offset; + } + if (mapNextLine) { + nextLineIndex = mapNextLine.line; + shouldLimit = nextLineIndex === lineIndex; + nextOffset = mapNextLine.offset; + } + obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; } } } - return true; - }, + } + return true; + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @private */ - _getStyleDeclaration: function(lineIndex, charIndex) { - if (this._styleMap && !this.isWrapping) { - var map = this._styleMap[lineIndex]; - if (!map) { - return null; - } - lineIndex = map.line; - charIndex = map.offset + charIndex; + _getStyleDeclaration: function(lineIndex, charIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (!map) { + return null; } - return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); - }, + lineIndex = map.line; + charIndex = map.offset + charIndex; + } + return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @param {Object} style * @private */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - var map = this._styleMap[lineIndex]; - lineIndex = map.line; - charIndex = map.offset + charIndex; + _setStyleDeclaration: function(lineIndex, charIndex, style) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; - this.styles[lineIndex][charIndex] = style; - }, + this.styles[lineIndex][charIndex] = style; + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @private */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { - var map = this._styleMap[lineIndex]; - lineIndex = map.line; - charIndex = map.offset + charIndex; - delete this.styles[lineIndex][charIndex]; - }, + _deleteStyleDeclaration: function(lineIndex, charIndex) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; + delete this.styles[lineIndex][charIndex]; + }, - /** + /** * probably broken need a fix * Returns the real style line that correspond to the wrapped lineIndex line * Used just to verify if the line does exist or not. @@ -238,23 +238,23 @@ * @returns {Boolean} if the line exists or not * @private */ - _getLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - return !!this.styles[map.line]; - }, + _getLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + return !!this.styles[map.line]; + }, - /** + /** * Set the line style to an empty object so that is initialized * @param {Number} lineIndex * @param {Object} style * @private */ - _setLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - this.styles[map.line] = {}; - }, + _setLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + this.styles[map.line] = {}; + }, - /** + /** * Wraps text using the 'width' property of Textbox. First this function * splits text on newlines, so we preserve newlines entered by the user. * Then it wraps each line using the width of the Textbox by calling @@ -263,17 +263,17 @@ * @param {Number} desiredWidth width you want to wrap to * @returns {Array} Array of lines */ - _wrapText: function(lines, desiredWidth) { - var wrapped = [], i; - this.isWrapping = true; - for (i = 0; i < lines.length; i++) { - wrapped.push.apply(wrapped, this._wrapLine(lines[i], i, desiredWidth)); - } - this.isWrapping = false; - return wrapped; - }, + _wrapText: function(lines, desiredWidth) { + var wrapped = [], i; + this.isWrapping = true; + for (i = 0; i < lines.length; i++) { + wrapped.push.apply(wrapped, this._wrapLine(lines[i], i, desiredWidth)); + } + this.isWrapping = false; + return wrapped; + }, - /** + /** * Helper function to measure a string of text, given its lineIndex and charIndex offset * It gets called when charBounds are not available yet. * Override if necessary @@ -285,28 +285,28 @@ * @param {number} charOffset * @returns {number} */ - _measureWord: function(word, lineIndex, charOffset) { - var width = 0, prevGrapheme, skipLeft = true; - charOffset = charOffset || 0; - for (var i = 0, len = word.length; i < len; i++) { - var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); - width += box.kernedWidth; - prevGrapheme = word[i]; - } - return width; - }, + _measureWord: function(word, lineIndex, charOffset) { + var width = 0, prevGrapheme, skipLeft = true; + charOffset = charOffset || 0; + for (var i = 0, len = word.length; i < len; i++) { + var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); + width += box.kernedWidth; + prevGrapheme = word[i]; + } + return width; + }, - /** + /** * Override this method to customize word splitting * Use with {@link fabric.Textbox#_measureWord} * @param {string} value * @returns {string[]} array of words */ - wordSplit: function (value) { - return value.split(this._wordJoiners); - }, + wordSplit: function (value) { + return value.split(this._wordJoiners); + }, - /** + /** * Wraps a line of text using the width of the Textbox and a context. * @param {Array} line The grapheme array that represent the line * @param {Number} lineIndex @@ -315,158 +315,158 @@ * @returns {Array} Array of line(s) into which the given text is wrapped * to. */ - _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { - var lineWidth = 0, - splitByGrapheme = this.splitByGrapheme, - graphemeLines = [], - line = [], - // spaces in different languages? - words = splitByGrapheme ? this.graphemeSplit(_line) : this.wordSplit(_line), - word = '', - offset = 0, - infix = splitByGrapheme ? '' : ' ', - wordWidth = 0, - infixWidth = 0, - largestWordWidth = 0, - lineJustStarted = true, - additionalSpace = this._getWidthOfCharSpacing(), - reservedSpace = reservedSpace || 0; - // fix a difference between split and graphemeSplit - if (words.length === 0) { - words.push([]); + _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { + var lineWidth = 0, + splitByGrapheme = this.splitByGrapheme, + graphemeLines = [], + line = [], + // spaces in different languages? + words = splitByGrapheme ? this.graphemeSplit(_line) : this.wordSplit(_line), + word = '', + offset = 0, + infix = splitByGrapheme ? '' : ' ', + wordWidth = 0, + infixWidth = 0, + largestWordWidth = 0, + lineJustStarted = true, + additionalSpace = this._getWidthOfCharSpacing(), + reservedSpace = reservedSpace || 0; + // fix a difference between split and graphemeSplit + if (words.length === 0) { + words.push([]); + } + desiredWidth -= reservedSpace; + // measure words + var data = words.map(function (word) { + // if using splitByGrapheme words are already in graphemes. + word = splitByGrapheme ? word : this.graphemeSplit(word); + var width = this._measureWord(word, lineIndex, offset); + largestWordWidth = Math.max(width, largestWordWidth); + offset += word.length + 1; + return { word: word, width: width }; + }.bind(this)); + var maxWidth = Math.max(desiredWidth, largestWordWidth, this.dynamicMinWidth); + // layout words + offset = 0; + for (var i = 0; i < words.length; i++) { + word = data[i].word; + wordWidth = data[i].width; + offset += word.length; + + lineWidth += infixWidth + wordWidth - additionalSpace; + if (lineWidth > maxWidth && !lineJustStarted) { + graphemeLines.push(line); + line = []; + lineWidth = wordWidth; + lineJustStarted = true; + } + else { + lineWidth += additionalSpace; } - desiredWidth -= reservedSpace; - // measure words - var data = words.map(function (word) { - // if using splitByGrapheme words are already in graphemes. - word = splitByGrapheme ? word : this.graphemeSplit(word); - var width = this._measureWord(word, lineIndex, offset); - largestWordWidth = Math.max(width, largestWordWidth); - offset += word.length + 1; - return { word: word, width: width }; - }.bind(this)); - var maxWidth = Math.max(desiredWidth, largestWordWidth, this.dynamicMinWidth); - // layout words - offset = 0; - for (var i = 0; i < words.length; i++) { - word = data[i].word; - wordWidth = data[i].width; - offset += word.length; - - lineWidth += infixWidth + wordWidth - additionalSpace; - if (lineWidth > maxWidth && !lineJustStarted) { - graphemeLines.push(line); - line = []; - lineWidth = wordWidth; - lineJustStarted = true; - } - else { - lineWidth += additionalSpace; - } - - if (!lineJustStarted && !splitByGrapheme) { - line.push(infix); - } - line = line.concat(word); - infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); - offset++; - lineJustStarted = false; + if (!lineJustStarted && !splitByGrapheme) { + line.push(infix); } + line = line.concat(word); - i && graphemeLines.push(line); + infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); + offset++; + lineJustStarted = false; + } - if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { - this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; - } - return graphemeLines; - }, + i && graphemeLines.push(line); - /** + if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { + this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; + } + return graphemeLines; + }, + + /** * Detect if the text line is ended with an hard break * text and itext do not have wrapping, return false * @param {Number} lineIndex text to split * @return {Boolean} */ - isEndOfWrapping: function(lineIndex) { - if (!this._styleMap[lineIndex + 1]) { - // is last line, return true; - return true; - } - if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { - // this is last line before a line break, return true; - return true; - } - return false; - }, + isEndOfWrapping: function(lineIndex) { + if (!this._styleMap[lineIndex + 1]) { + // is last line, return true; + return true; + } + if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { + // this is last line before a line break, return true; + return true; + } + return false; + }, - /** + /** * Detect if a line has a linebreak and so we need to account for it when moving * and counting style. * @return Number */ - missingNewlineOffset: function(lineIndex) { - if (this.splitByGrapheme) { - return this.isEndOfWrapping(lineIndex) ? 1 : 0; - } - return 1; - }, + missingNewlineOffset: function(lineIndex) { + if (this.splitByGrapheme) { + return this.isEndOfWrapping(lineIndex) ? 1 : 0; + } + return 1; + }, - /** + /** * Gets lines of text to render in the Textbox. This function calculates * text wrapping on the fly every time it is called. * @param {String} text text to split * @returns {Array} Array of lines in the Textbox. * @override */ - _splitTextIntoLines: function(text) { - var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), - graphemeLines = this._wrapText(newText.lines, this.width), - lines = new Array(graphemeLines.length); - for (var i = 0; i < graphemeLines.length; i++) { - lines[i] = graphemeLines[i].join(''); - } - newText.lines = lines; - newText.graphemeLines = graphemeLines; - return newText; - }, - - getMinWidth: function() { - return Math.max(this.minWidth, this.dynamicMinWidth); - }, - - _removeExtraneousStyles: function() { - var linesToKeep = {}; - for (var prop in this._styleMap) { - if (this._textLines[prop]) { - linesToKeep[this._styleMap[prop].line] = 1; - } + _splitTextIntoLines: function(text) { + var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), + graphemeLines = this._wrapText(newText.lines, this.width), + lines = new Array(graphemeLines.length); + for (var i = 0; i < graphemeLines.length; i++) { + lines[i] = graphemeLines[i].join(''); + } + newText.lines = lines; + newText.graphemeLines = graphemeLines; + return newText; + }, + + getMinWidth: function() { + return Math.max(this.minWidth, this.dynamicMinWidth); + }, + + _removeExtraneousStyles: function() { + var linesToKeep = {}; + for (var prop in this._styleMap) { + if (this._textLines[prop]) { + linesToKeep[this._styleMap[prop].line] = 1; } - for (var prop in this.styles) { - if (!linesToKeep[prop]) { - delete this.styles[prop]; - } + } + for (var prop in this.styles) { + if (!linesToKeep[prop]) { + delete this.styles[prop]; } - }, + } + }, - /** + /** * Returns object representation of an instance * @method toObject * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); - } - }); + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); + } +}); - /** +/** * Returns fabric.Textbox instance from an object representation * @static * @memberOf fabric.Textbox * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Textbox.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Textbox, object, 'text'); - }; +fabric.Textbox.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Textbox, object, 'text'); +}; diff --git a/src/shapes/triangle.class.js b/src/shapes/triangle.class.js index ad44d38c40b..070472cb461 100644 --- a/src/shapes/triangle.class.js +++ b/src/shapes/triangle.class.js @@ -1,82 +1,82 @@ - var fabric = exports.fabric || (exports.fabric = { }); +var fabric = exports.fabric || (exports.fabric = { }); - /** +/** * Triangle class * @class fabric.Triangle * @extends fabric.Object * @return {fabric.Triangle} thisArg * @see {@link fabric.Triangle#initialize} for constructor definition */ - fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { +fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'triangle', + type: 'triangle', - /** + /** * Width is set to 100 to compensate the old initialize code that was setting it to 100 * @type Number * @default */ - width: 100, + width: 100, - /** + /** * Height is set to 100 to compensate the old initialize code that was setting it to 100 * @type Number * @default */ - height: 100, + height: 100, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2; + _render: function(ctx) { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2; - ctx.beginPath(); - ctx.moveTo(-widthBy2, heightBy2); - ctx.lineTo(0, -heightBy2); - ctx.lineTo(widthBy2, heightBy2); - ctx.closePath(); + ctx.beginPath(); + ctx.moveTo(-widthBy2, heightBy2); + ctx.lineTo(0, -heightBy2); + ctx.lineTo(widthBy2, heightBy2); + ctx.closePath(); - this._renderPaintInOrder(ctx); - }, + this._renderPaintInOrder(ctx); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2, - points = [ - -widthBy2 + ' ' + heightBy2, - '0 ' + -heightBy2, - widthBy2 + ' ' + heightBy2 - ].join(','); - return [ - '' - ]; - }, - /* _TO_SVG_END_ */ - }); + _toSVG: function() { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2, + points = [ + -widthBy2 + ' ' + heightBy2, + '0 ' + -heightBy2, + widthBy2 + ' ' + heightBy2 + ].join(','); + return [ + '' + ]; + }, + /* _TO_SVG_END_ */ +}); - /** +/** * Returns {@link fabric.Triangle} instance from an object representation * @static * @memberOf fabric.Triangle * @param {Object} object Object to create an instance from * @returns {Promise} */ - fabric.Triangle.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Triangle, object); - }; +fabric.Triangle.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Triangle, object); +}; diff --git a/src/util/anim_ease.js b/src/util/anim_ease.js index 723a8f767f1..8754163de07 100644 --- a/src/util/anim_ease.js +++ b/src/util/anim_ease.js @@ -1,394 +1,394 @@ - function normalize(a, c, p, s) { - if (a < Math.abs(c)) { - a = c; - s = p / 4; +function normalize(a, c, p, s) { + if (a < Math.abs(c)) { + a = c; + s = p / 4; + } + else { + //handle the 0/0 case: + if (c === 0 && a === 0) { + s = p / (2 * Math.PI) * Math.asin(1); } else { - //handle the 0/0 case: - if (c === 0 && a === 0) { - s = p / (2 * Math.PI) * Math.asin(1); - } - else { - s = p / (2 * Math.PI) * Math.asin(c / a); - } + s = p / (2 * Math.PI) * Math.asin(c / a); } - return { a: a, c: c, p: p, s: s }; } + return { a: a, c: c, p: p, s: s }; +} - function elastic(opts, t, d) { - return opts.a * +function elastic(opts, t, d) { + return opts.a * Math.pow(2, 10 * (t -= 1)) * Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p ); - } +} - /** +/** * Cubic easing out * @memberOf fabric.util.ease */ - function easeOutCubic(t, b, c, d) { - return c * ((t = t / d - 1) * t * t + 1) + b; - } +function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; +} - /** +/** * Cubic easing in and out * @memberOf fabric.util.ease */ - function easeInOutCubic(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t + b; - } - return c / 2 * ((t -= 2) * t * t + 2) + b; +function easeInOutCubic(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t + b; } + return c / 2 * ((t -= 2) * t * t + 2) + b; +} - /** +/** * Quartic easing in * @memberOf fabric.util.ease */ - function easeInQuart(t, b, c, d) { - return c * (t /= d) * t * t * t + b; - } +function easeInQuart(t, b, c, d) { + return c * (t /= d) * t * t * t + b; +} - /** +/** * Quartic easing out * @memberOf fabric.util.ease */ - function easeOutQuart(t, b, c, d) { - return -c * ((t = t / d - 1) * t * t * t - 1) + b; - } +function easeOutQuart(t, b, c, d) { + return -c * ((t = t / d - 1) * t * t * t - 1) + b; +} - /** +/** * Quartic easing in and out * @memberOf fabric.util.ease */ - function easeInOutQuart(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t * t + b; - } - return -c / 2 * ((t -= 2) * t * t * t - 2) + b; +function easeInOutQuart(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t + b; } + return -c / 2 * ((t -= 2) * t * t * t - 2) + b; +} - /** +/** * Quintic easing in * @memberOf fabric.util.ease */ - function easeInQuint(t, b, c, d) { - return c * (t /= d) * t * t * t * t + b; - } +function easeInQuint(t, b, c, d) { + return c * (t /= d) * t * t * t * t + b; +} - /** +/** * Quintic easing out * @memberOf fabric.util.ease */ - function easeOutQuint(t, b, c, d) { - return c * ((t = t / d - 1) * t * t * t * t + 1) + b; - } +function easeOutQuint(t, b, c, d) { + return c * ((t = t / d - 1) * t * t * t * t + 1) + b; +} - /** +/** * Quintic easing in and out * @memberOf fabric.util.ease */ - function easeInOutQuint(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t * t * t + b; - } - return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; +function easeInOutQuint(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t * t + b; } + return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; +} - /** +/** * Sinusoidal easing in * @memberOf fabric.util.ease */ - function easeInSine(t, b, c, d) { - return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; - } +function easeInSine(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; +} - /** +/** * Sinusoidal easing out * @memberOf fabric.util.ease */ - function easeOutSine(t, b, c, d) { - return c * Math.sin(t / d * (Math.PI / 2)) + b; - } +function easeOutSine(t, b, c, d) { + return c * Math.sin(t / d * (Math.PI / 2)) + b; +} - /** +/** * Sinusoidal easing in and out * @memberOf fabric.util.ease */ - function easeInOutSine(t, b, c, d) { - return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; - } +function easeInOutSine(t, b, c, d) { + return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; +} - /** +/** * Exponential easing in * @memberOf fabric.util.ease */ - function easeInExpo(t, b, c, d) { - return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; - } +function easeInExpo(t, b, c, d) { + return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; +} - /** +/** * Exponential easing out * @memberOf fabric.util.ease */ - function easeOutExpo(t, b, c, d) { - return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; - } +function easeOutExpo(t, b, c, d) { + return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; +} - /** +/** * Exponential easing in and out * @memberOf fabric.util.ease */ - function easeInOutExpo(t, b, c, d) { - if (t === 0) { - return b; - } - if (t === d) { - return b + c; - } - t /= d / 2; - if (t < 1) { - return c / 2 * Math.pow(2, 10 * (t - 1)) + b; - } - return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; +function easeInOutExpo(t, b, c, d) { + if (t === 0) { + return b; + } + if (t === d) { + return b + c; } + t /= d / 2; + if (t < 1) { + return c / 2 * Math.pow(2, 10 * (t - 1)) + b; + } + return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; +} - /** +/** * Circular easing in * @memberOf fabric.util.ease */ - function easeInCirc(t, b, c, d) { - return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; - } +function easeInCirc(t, b, c, d) { + return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; +} - /** +/** * Circular easing out * @memberOf fabric.util.ease */ - function easeOutCirc(t, b, c, d) { - return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; - } +function easeOutCirc(t, b, c, d) { + return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; +} - /** +/** * Circular easing in and out * @memberOf fabric.util.ease */ - function easeInOutCirc(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; - } - return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; +function easeInOutCirc(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; } + return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; +} - /** +/** * Elastic easing in * @memberOf fabric.util.ease */ - function easeInElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; - } - var opts = normalize(a, c, p, s); - return -elastic(opts, t, d) + b; +function easeInElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; + } + var opts = normalize(a, c, p, s); + return -elastic(opts, t, d) + b; +} - /** +/** * Elastic easing out * @memberOf fabric.util.ease */ - function easeOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; - } - var opts = normalize(a, c, p, s); - return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; +function easeOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; } + if (!p) { + p = d * 0.3; + } + var opts = normalize(a, c, p, s); + return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; +} - /** +/** * Elastic easing in and out * @memberOf fabric.util.ease */ - function easeInOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d / 2; - if (t === 2) { - return b + c; - } - if (!p) { - p = d * (0.3 * 1.5); - } - var opts = normalize(a, c, p, s); - if (t < 1) { - return -0.5 * elastic(opts, t, d) + b; - } - return opts.a * Math.pow(2, -10 * (t -= 1)) * - Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; +function easeInOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d / 2; + if (t === 2) { + return b + c; } + if (!p) { + p = d * (0.3 * 1.5); + } + var opts = normalize(a, c, p, s); + if (t < 1) { + return -0.5 * elastic(opts, t, d) + b; + } + return opts.a * Math.pow(2, -10 * (t -= 1)) * + Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; +} - /** +/** * Backwards easing in * @memberOf fabric.util.ease */ - function easeInBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; - } - return c * (t /= d) * t * ((s + 1) * t - s) + b; +function easeInBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; } + return c * (t /= d) * t * ((s + 1) * t - s) + b; +} - /** +/** * Backwards easing out * @memberOf fabric.util.ease */ - function easeOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; - } - return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; +function easeOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; } + return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; +} - /** +/** * Backwards easing in and out * @memberOf fabric.util.ease */ - function easeInOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; - } - t /= d / 2; - if (t < 1) { - return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; - } - return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; +function easeInOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + t /= d / 2; + if (t < 1) { + return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; } + return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; +} - /** +/** * Bouncing easing in * @memberOf fabric.util.ease */ - function easeInBounce(t, b, c, d) { - return c - easeOutBounce (d - t, 0, c, d) + b; - } +function easeInBounce(t, b, c, d) { + return c - easeOutBounce (d - t, 0, c, d) + b; +} - /** +/** * Bouncing easing out * @memberOf fabric.util.ease */ - function easeOutBounce(t, b, c, d) { - if ((t /= d) < (1 / 2.75)) { - return c * (7.5625 * t * t) + b; - } - else if (t < (2 / 2.75)) { - return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; - } - else if (t < (2.5 / 2.75)) { - return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; - } - else { - return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; - } +function easeOutBounce(t, b, c, d) { + if ((t /= d) < (1 / 2.75)) { + return c * (7.5625 * t * t) + b; + } + else if (t < (2 / 2.75)) { + return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; } + else if (t < (2.5 / 2.75)) { + return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; + } + else { + return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; + } +} - /** +/** * Bouncing easing in and out * @memberOf fabric.util.ease */ - function easeInOutBounce(t, b, c, d) { - if (t < d / 2) { - return easeInBounce (t * 2, 0, c, d) * 0.5 + b; - } - return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; +function easeInOutBounce(t, b, c, d) { + if (t < d / 2) { + return easeInBounce (t * 2, 0, c, d) * 0.5 + b; } + return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; +} - /** +/** * Easing functions * See Easing Equations by Robert Penner * @namespace fabric.util.ease */ - fabric.util.ease = { +fabric.util.ease = { - /** + /** * Quadratic easing in * @memberOf fabric.util.ease */ - easeInQuad: function(t, b, c, d) { - return c * (t /= d) * t + b; - }, + easeInQuad: function(t, b, c, d) { + return c * (t /= d) * t + b; + }, - /** + /** * Quadratic easing out * @memberOf fabric.util.ease */ - easeOutQuad: function(t, b, c, d) { - return -c * (t /= d) * (t - 2) + b; - }, + easeOutQuad: function(t, b, c, d) { + return -c * (t /= d) * (t - 2) + b; + }, - /** + /** * Quadratic easing in and out * @memberOf fabric.util.ease */ - easeInOutQuad: function(t, b, c, d) { - t /= (d / 2); - if (t < 1) { - return c / 2 * t * t + b; - } - return -c / 2 * ((--t) * (t - 2) - 1) + b; - }, - - /** + easeInOutQuad: function(t, b, c, d) { + t /= (d / 2); + if (t < 1) { + return c / 2 * t * t + b; + } + return -c / 2 * ((--t) * (t - 2) - 1) + b; + }, + + /** * Cubic easing in * @memberOf fabric.util.ease */ - easeInCubic: function(t, b, c, d) { - return c * (t /= d) * t * t + b; - }, - - easeOutCubic: easeOutCubic, - easeInOutCubic: easeInOutCubic, - easeInQuart: easeInQuart, - easeOutQuart: easeOutQuart, - easeInOutQuart: easeInOutQuart, - easeInQuint: easeInQuint, - easeOutQuint: easeOutQuint, - easeInOutQuint: easeInOutQuint, - easeInSine: easeInSine, - easeOutSine: easeOutSine, - easeInOutSine: easeInOutSine, - easeInExpo: easeInExpo, - easeOutExpo: easeOutExpo, - easeInOutExpo: easeInOutExpo, - easeInCirc: easeInCirc, - easeOutCirc: easeOutCirc, - easeInOutCirc: easeInOutCirc, - easeInElastic: easeInElastic, - easeOutElastic: easeOutElastic, - easeInOutElastic: easeInOutElastic, - easeInBack: easeInBack, - easeOutBack: easeOutBack, - easeInOutBack: easeInOutBack, - easeInBounce: easeInBounce, - easeOutBounce: easeOutBounce, - easeInOutBounce: easeInOutBounce - }; + easeInCubic: function(t, b, c, d) { + return c * (t /= d) * t * t + b; + }, + + easeOutCubic: easeOutCubic, + easeInOutCubic: easeInOutCubic, + easeInQuart: easeInQuart, + easeOutQuart: easeOutQuart, + easeInOutQuart: easeInOutQuart, + easeInQuint: easeInQuint, + easeOutQuint: easeOutQuint, + easeInOutQuint: easeInOutQuint, + easeInSine: easeInSine, + easeOutSine: easeOutSine, + easeInOutSine: easeInOutSine, + easeInExpo: easeInExpo, + easeOutExpo: easeOutExpo, + easeInOutExpo: easeInOutExpo, + easeInCirc: easeInCirc, + easeOutCirc: easeOutCirc, + easeInOutCirc: easeInOutCirc, + easeInElastic: easeInElastic, + easeOutElastic: easeOutElastic, + easeInOutElastic: easeInOutElastic, + easeInBack: easeInBack, + easeOutBack: easeOutBack, + easeInOutBack: easeInOutBack, + easeInBounce: easeInBounce, + easeOutBounce: easeOutBounce, + easeInOutBounce: easeInOutBounce +}; diff --git a/src/util/animate.js b/src/util/animate.js index 67b270944de..e66a500b49f 100644 --- a/src/util/animate.js +++ b/src/util/animate.js @@ -1,7 +1,7 @@ (function () { /** - * + * * @typedef {Object} AnimationOptions * Animation of a value or list of values. * @property {Function} [onChange] Callback; invoked on every value change @@ -132,7 +132,7 @@ * canvas.requestRenderAll(); * } * }); - * + * * @example * fabric.util.animate({ * startValue: 1, @@ -142,7 +142,7 @@ * canvas.requestRenderAll(); * } * }); - * + * * @returns {CancelFunction} cancel function */ function animate(options) { diff --git a/src/util/animate_color.js b/src/util/animate_color.js index fd5b0d55104..50f6ef4aa6d 100644 --- a/src/util/animate_color.js +++ b/src/util/animate_color.js @@ -1,18 +1,18 @@ - // Calculate an in-between color. Returns a "rgba()" string. - // Credit: Edwin Martin - // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js - function calculateColor(begin, end, pos) { - var color = 'rgba(' +// Calculate an in-between color. Returns a "rgba()" string. +// Credit: Edwin Martin +// http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js +function calculateColor(begin, end, pos) { + var color = 'rgba(' + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); - color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); - color += ')'; - return color; - } + color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); + color += ')'; + return color; +} - /** +/** * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. * @memberOf fabric.util * @param {String} fromColor The starting color in hex or rgb(a) format. @@ -25,47 +25,47 @@ * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. * @returns {Function} abort function */ - function animateColor(fromColor, toColor, duration, options) { - var startColor = new fabric.Color(fromColor).getSource(), - endColor = new fabric.Color(toColor).getSource(), - originalOnComplete = options.onComplete, - originalOnChange = options.onChange; - options = options || {}; +function animateColor(fromColor, toColor, duration, options) { + var startColor = new fabric.Color(fromColor).getSource(), + endColor = new fabric.Color(toColor).getSource(), + originalOnComplete = options.onComplete, + originalOnChange = options.onChange; + options = options || {}; - return fabric.util.animate(Object.assign(options, { - duration: duration || 500, - startValue: startColor, - endValue: endColor, - byValue: endColor, - easing: function (currentTime, startValue, byValue, duration) { - var posValue = options.colorEasing - ? options.colorEasing(currentTime, duration) - : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); - return calculateColor(startValue, byValue, posValue); - }, - // has to take in account for color restoring; - onComplete: function(current, valuePerc, timePerc) { - if (originalOnComplete) { - return originalOnComplete( - calculateColor(endColor, endColor, 0), + return fabric.util.animate(Object.assign(options, { + duration: duration || 500, + startValue: startColor, + endValue: endColor, + byValue: endColor, + easing: function (currentTime, startValue, byValue, duration) { + var posValue = options.colorEasing + ? options.colorEasing(currentTime, duration) + : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); + return calculateColor(startValue, byValue, posValue); + }, + // has to take in account for color restoring; + onComplete: function(current, valuePerc, timePerc) { + if (originalOnComplete) { + return originalOnComplete( + calculateColor(endColor, endColor, 0), + valuePerc, + timePerc + ); + } + }, + onChange: function(current, valuePerc, timePerc) { + if (originalOnChange) { + if (Array.isArray(current)) { + return originalOnChange( + calculateColor(current, current, 0), valuePerc, timePerc ); } - }, - onChange: function(current, valuePerc, timePerc) { - if (originalOnChange) { - if (Array.isArray(current)) { - return originalOnChange( - calculateColor(current, current, 0), - valuePerc, - timePerc - ); - } - originalOnChange(current, valuePerc, timePerc); - } + originalOnChange(current, valuePerc, timePerc); } - })); - } + } + })); +} - fabric.util.animateColor = animateColor; +fabric.util.animateColor = animateColor; diff --git a/src/util/dom_misc.js b/src/util/dom_misc.js index fbd0223ccbb..7d68376729a 100644 --- a/src/util/dom_misc.js +++ b/src/util/dom_misc.js @@ -1,77 +1,77 @@ - var _slice = Array.prototype.slice; +var _slice = Array.prototype.slice; - /** +/** * Takes id and returns an element with that id (if one exists in a document) * @memberOf fabric.util * @param {String|HTMLElement} id * @return {HTMLElement|null} */ - function getById(id) { - return typeof id === 'string' ? fabric.document.getElementById(id) : id; - } +function getById(id) { + return typeof id === 'string' ? fabric.document.getElementById(id) : id; +} - var sliceCanConvertNodelists, - /** +var sliceCanConvertNodelists, + /** * Converts an array-like object (e.g. arguments or NodeList) to an array * @memberOf fabric.util * @param {Object} arrayLike * @return {Array} */ - toArray = function(arrayLike) { - return _slice.call(arrayLike, 0); - }; - - try { - sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; - } - catch (err) { } - - if (!sliceCanConvertNodelists) { toArray = function(arrayLike) { - var arr = new Array(arrayLike.length), i = arrayLike.length; - while (i--) { - arr[i] = arrayLike[i]; - } - return arr; + return _slice.call(arrayLike, 0); }; - } - /** +try { + sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; +} +catch (err) { } + +if (!sliceCanConvertNodelists) { + toArray = function(arrayLike) { + var arr = new Array(arrayLike.length), i = arrayLike.length; + while (i--) { + arr[i] = arrayLike[i]; + } + return arr; + }; +} + +/** * Creates specified element with specified attributes * @memberOf fabric.util * @param {String} tagName Type of an element to create * @param {Object} [attributes] Attributes to set on an element * @return {HTMLElement} Newly created element */ - function makeElement(tagName, attributes) { - var el = fabric.document.createElement(tagName); - for (var prop in attributes) { - if (prop === 'class') { - el.className = attributes[prop]; - } - else if (prop === 'for') { - el.htmlFor = attributes[prop]; - } - else { - el.setAttribute(prop, attributes[prop]); - } +function makeElement(tagName, attributes) { + var el = fabric.document.createElement(tagName); + for (var prop in attributes) { + if (prop === 'class') { + el.className = attributes[prop]; + } + else if (prop === 'for') { + el.htmlFor = attributes[prop]; + } + else { + el.setAttribute(prop, attributes[prop]); } - return el; } + return el; +} - /** +/** * Adds class to an element * @memberOf fabric.util * @param {HTMLElement} element Element to add class to * @param {String} className Class to add to an element */ - function addClass(element, className) { - if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { - element.className += (element.className ? ' ' : '') + className; - } +function addClass(element, className) { + if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { + element.className += (element.className ? ' ' : '') + className; } +} - /** +/** * Wraps element with another element * @memberOf fabric.util * @param {HTMLElement} element Element to wrap @@ -79,204 +79,204 @@ * @param {Object} [attributes] Attributes to set on a wrapper * @return {HTMLElement} wrapper */ - function wrapElement(element, wrapper, attributes) { - if (typeof wrapper === 'string') { - wrapper = makeElement(wrapper, attributes); - } - if (element.parentNode) { - element.parentNode.replaceChild(wrapper, element); - } - wrapper.appendChild(element); - return wrapper; +function wrapElement(element, wrapper, attributes) { + if (typeof wrapper === 'string') { + wrapper = makeElement(wrapper, attributes); } + if (element.parentNode) { + element.parentNode.replaceChild(wrapper, element); + } + wrapper.appendChild(element); + return wrapper; +} - /** +/** * Returns element scroll offsets * @memberOf fabric.util * @param {HTMLElement} element Element to operate on * @return {Object} Object with left/top values */ - function getScrollLeftTop(element) { +function getScrollLeftTop(element) { - var left = 0, - top = 0, - docElement = fabric.document.documentElement, - body = fabric.document.body || { - scrollLeft: 0, scrollTop: 0 - }; - - // While loop checks (and then sets element to) .parentNode OR .host - // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, - // but the .parentNode of a root ShadowDOM node will always be null, instead - // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 - while (element && (element.parentNode || element.host)) { + var left = 0, + top = 0, + docElement = fabric.document.documentElement, + body = fabric.document.body || { + scrollLeft: 0, scrollTop: 0 + }; - // Set element to element parent, or 'host' in case of ShadowDOM - element = element.parentNode || element.host; + // While loop checks (and then sets element to) .parentNode OR .host + // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, + // but the .parentNode of a root ShadowDOM node will always be null, instead + // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 + while (element && (element.parentNode || element.host)) { - if (element === fabric.document) { - left = body.scrollLeft || docElement.scrollLeft || 0; - top = body.scrollTop || docElement.scrollTop || 0; - } - else { - left += element.scrollLeft || 0; - top += element.scrollTop || 0; - } + // Set element to element parent, or 'host' in case of ShadowDOM + element = element.parentNode || element.host; - if (element.nodeType === 1 && element.style.position === 'fixed') { - break; - } + if (element === fabric.document) { + left = body.scrollLeft || docElement.scrollLeft || 0; + top = body.scrollTop || docElement.scrollTop || 0; + } + else { + left += element.scrollLeft || 0; + top += element.scrollTop || 0; } - return { left: left, top: top }; + if (element.nodeType === 1 && element.style.position === 'fixed') { + break; + } } - /** + return { left: left, top: top }; +} + +/** * Returns offset for a given element * @function * @memberOf fabric.util * @param {HTMLElement} element Element to get offset for * @return {Object} Object with "left" and "top" properties */ - function getElementOffset(element) { - var docElem, - doc = element && element.ownerDocument, - box = { left: 0, top: 0 }, - offset = { left: 0, top: 0 }, - scrollLeftTop, - offsetAttributes = { - borderLeftWidth: 'left', - borderTopWidth: 'top', - paddingLeft: 'left', - paddingTop: 'top' - }; +function getElementOffset(element) { + var docElem, + doc = element && element.ownerDocument, + box = { left: 0, top: 0 }, + offset = { left: 0, top: 0 }, + scrollLeftTop, + offsetAttributes = { + borderLeftWidth: 'left', + borderTopWidth: 'top', + paddingLeft: 'left', + paddingTop: 'top' + }; - if (!doc) { - return offset; - } + if (!doc) { + return offset; + } - for (var attr in offsetAttributes) { - offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; - } + for (var attr in offsetAttributes) { + offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; + } - docElem = doc.documentElement; - if ( typeof element.getBoundingClientRect !== 'undefined' ) { - box = element.getBoundingClientRect(); - } + docElem = doc.documentElement; + if ( typeof element.getBoundingClientRect !== 'undefined' ) { + box = element.getBoundingClientRect(); + } - scrollLeftTop = getScrollLeftTop(element); + scrollLeftTop = getScrollLeftTop(element); - return { - left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, - top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top - }; - } + return { + left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, + top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top + }; +} - /** +/** * Returns style attribute value of a given element * @memberOf fabric.util * @param {HTMLElement} element Element to get style attribute for * @param {String} attr Style attribute to get for element * @return {String} Style attribute value of the given element. */ - var getElementStyle; - if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { - getElementStyle = function(element, attr) { - var style = fabric.document.defaultView.getComputedStyle(element, null); - return style ? style[attr] : undefined; - }; - } - else { - getElementStyle = function(element, attr) { - var value = element.style[attr]; - if (!value && element.currentStyle) { - value = element.currentStyle[attr]; - } - return value; - }; - } +var getElementStyle; +if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { + getElementStyle = function(element, attr) { + var style = fabric.document.defaultView.getComputedStyle(element, null); + return style ? style[attr] : undefined; + }; +} +else { + getElementStyle = function(element, attr) { + var value = element.style[attr]; + if (!value && element.currentStyle) { + value = element.currentStyle[attr]; + } + return value; + }; +} - (function () { - var style = fabric.document.documentElement.style, - selectProp = 'userSelect' in style - ? 'userSelect' - : 'MozUserSelect' in style - ? 'MozUserSelect' - : 'WebkitUserSelect' in style - ? 'WebkitUserSelect' - : 'KhtmlUserSelect' in style - ? 'KhtmlUserSelect' - : ''; +(function () { + var style = fabric.document.documentElement.style, + selectProp = 'userSelect' in style + ? 'userSelect' + : 'MozUserSelect' in style + ? 'MozUserSelect' + : 'WebkitUserSelect' in style + ? 'WebkitUserSelect' + : 'KhtmlUserSelect' in style + ? 'KhtmlUserSelect' + : ''; - /** + /** * Makes element unselectable * @memberOf fabric.util * @param {HTMLElement} element Element to make unselectable * @return {HTMLElement} Element that was passed in */ - function makeElementUnselectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = fabric.util.falseFunction; - } - if (selectProp) { - element.style[selectProp] = 'none'; - } - else if (typeof element.unselectable === 'string') { - element.unselectable = 'on'; - } - return element; + function makeElementUnselectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = fabric.util.falseFunction; + } + if (selectProp) { + element.style[selectProp] = 'none'; } + else if (typeof element.unselectable === 'string') { + element.unselectable = 'on'; + } + return element; + } - /** + /** * Makes element selectable * @memberOf fabric.util * @param {HTMLElement} element Element to make selectable * @return {HTMLElement} Element that was passed in */ - function makeElementSelectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = null; - } - if (selectProp) { - element.style[selectProp] = ''; - } - else if (typeof element.unselectable === 'string') { - element.unselectable = ''; - } - return element; + function makeElementSelectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = null; + } + if (selectProp) { + element.style[selectProp] = ''; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = ''; } + return element; + } - fabric.util.makeElementUnselectable = makeElementUnselectable; - fabric.util.makeElementSelectable = makeElementSelectable; - })(); + fabric.util.makeElementUnselectable = makeElementUnselectable; + fabric.util.makeElementSelectable = makeElementSelectable; +})(); - function getNodeCanvas(element) { - var impl = fabric.jsdomImplForWrapper(element); - return impl._canvas || impl._image; - }; +function getNodeCanvas(element) { + var impl = fabric.jsdomImplForWrapper(element); + return impl._canvas || impl._image; +}; - function cleanUpJsdomNode(element) { - if (!fabric.isLikelyNode) { - return; - } - var impl = fabric.jsdomImplForWrapper(element); - if (impl) { - impl._image = null; - impl._canvas = null; - // unsure if necessary - impl._currentSrc = null; - impl._attributes = null; - impl._classList = null; - } +function cleanUpJsdomNode(element) { + if (!fabric.isLikelyNode) { + return; } + var impl = fabric.jsdomImplForWrapper(element); + if (impl) { + impl._image = null; + impl._canvas = null; + // unsure if necessary + impl._currentSrc = null; + impl._attributes = null; + impl._classList = null; + } +} - function setImageSmoothing(ctx, value) { - ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled +function setImageSmoothing(ctx, value) { + ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled; - ctx.imageSmoothingEnabled = value; - } + ctx.imageSmoothingEnabled = value; +} - /** +/** * setImageSmoothing sets the context imageSmoothingEnabled property. * Used by canvas and by ImageObject. * @memberOf fabric.util @@ -284,13 +284,13 @@ * @param {HTMLRenderingContext2D} ctx to set on * @param {Boolean} value true or false */ - fabric.util.setImageSmoothing = setImageSmoothing; - fabric.util.getById = getById; - fabric.util.toArray = toArray; - fabric.util.addClass = addClass; - fabric.util.makeElement = makeElement; - fabric.util.wrapElement = wrapElement; - fabric.util.getScrollLeftTop = getScrollLeftTop; - fabric.util.getElementOffset = getElementOffset; - fabric.util.getNodeCanvas = getNodeCanvas; - fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; +fabric.util.setImageSmoothing = setImageSmoothing; +fabric.util.getById = getById; +fabric.util.toArray = toArray; +fabric.util.addClass = addClass; +fabric.util.makeElement = makeElement; +fabric.util.wrapElement = wrapElement; +fabric.util.getScrollLeftTop = getScrollLeftTop; +fabric.util.getElementOffset = getElementOffset; +fabric.util.getNodeCanvas = getNodeCanvas; +fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; diff --git a/src/util/dom_request.js b/src/util/dom_request.js index 7685dd26854..eb5876f12f7 100644 --- a/src/util/dom_request.js +++ b/src/util/dom_request.js @@ -1,10 +1,10 @@ - function addParamToUrl(url, param) { - return url + (/\?/.test(url) ? '&' : '?') + param; - } +function addParamToUrl(url, param) { + return url + (/\?/.test(url) ? '&' : '?') + param; +} - function emptyFn() { } +function emptyFn() { } - /** +/** * Cross-browser abstraction for sending XMLHttpRequest * @memberOf fabric.util * @deprecated this has to go away, we can use a modern browser method to do the same. @@ -16,37 +16,37 @@ * @param {Function} options.onComplete Callback to invoke when request is completed * @return {XMLHttpRequest} request */ - function request(url, options) { - options || (options = { }); - - var method = options.method ? options.method.toUpperCase() : 'GET', - onComplete = options.onComplete || function() { }, - xhr = new fabric.window.XMLHttpRequest(), - body = options.body || options.parameters; - - /** @ignore */ - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - onComplete(xhr); - xhr.onreadystatechange = emptyFn; - } - }; - - if (method === 'GET') { - body = null; - if (typeof options.parameters === 'string') { - url = addParamToUrl(url, options.parameters); - } +function request(url, options) { + options || (options = { }); + + var method = options.method ? options.method.toUpperCase() : 'GET', + onComplete = options.onComplete || function() { }, + xhr = new fabric.window.XMLHttpRequest(), + body = options.body || options.parameters; + + /** @ignore */ + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + onComplete(xhr); + xhr.onreadystatechange = emptyFn; } + }; - xhr.open(method, url, true); - - if (method === 'POST' || method === 'PUT') { - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + if (method === 'GET') { + body = null; + if (typeof options.parameters === 'string') { + url = addParamToUrl(url, options.parameters); } + } - xhr.send(body); - return xhr; + xhr.open(method, url, true); + + if (method === 'POST' || method === 'PUT') { + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } - fabric.util.request = request; + xhr.send(body); + return xhr; +} + +fabric.util.request = request; diff --git a/src/util/lang_array.js b/src/util/lang_array.js index 4bac1a6c5fd..14fbc772866 100644 --- a/src/util/lang_array.js +++ b/src/util/lang_array.js @@ -1,90 +1,90 @@ - var slice = Array.prototype.slice; +var slice = Array.prototype.slice; - /** +/** * Invokes method on all items in a given array * @memberOf fabric.util.array * @param {Array} array Array to iterate over * @param {String} method Name of a method to invoke * @return {Array} */ - function invoke(array, method) { - var args = slice.call(arguments, 2), result = []; - for (var i = 0, len = array.length; i < len; i++) { - result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); - } - return result; +function invoke(array, method) { + var args = slice.call(arguments, 2), result = []; + for (var i = 0, len = array.length; i < len; i++) { + result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); } + return result; +} - /** +/** * Finds maximum value in array (not necessarily "first" one) * @memberOf fabric.util.array * @param {Array} array Array to iterate over * @param {String} byProperty * @return {*} */ - function max(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 >= value2; - }); - } +function max(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 >= value2; + }); +} - /** +/** * Finds minimum value in array (not necessarily "first" one) * @memberOf fabric.util.array * @param {Array} array Array to iterate over * @param {String} byProperty * @return {*} */ - function min(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 < value2; - }); - } +function min(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 < value2; + }); +} - /** +/** * @private */ - function fill(array, value) { - var k = array.length; - while (k--) { - array[k] = value; - } - return array; +function fill(array, value) { + var k = array.length; + while (k--) { + array[k] = value; } + return array; +} - /** +/** * @private */ - function find(array, byProperty, condition) { - if (!array || array.length === 0) { - return; - } +function find(array, byProperty, condition) { + if (!array || array.length === 0) { + return; + } - var i = array.length - 1, - result = byProperty ? array[i][byProperty] : array[i]; - if (byProperty) { - while (i--) { - if (condition(array[i][byProperty], result)) { - result = array[i][byProperty]; - } + var i = array.length - 1, + result = byProperty ? array[i][byProperty] : array[i]; + if (byProperty) { + while (i--) { + if (condition(array[i][byProperty], result)) { + result = array[i][byProperty]; } } - else { - while (i--) { - if (condition(array[i], result)) { - result = array[i]; - } + } + else { + while (i--) { + if (condition(array[i], result)) { + result = array[i]; } } - return result; } + return result; +} - /** +/** * @namespace fabric.util.array */ - fabric.util.array = { - fill: fill, - invoke: invoke, - min: min, - max: max - }; +fabric.util.array = { + fill: fill, + invoke: invoke, + min: min, + max: max +}; diff --git a/src/util/lang_class.js b/src/util/lang_class.js index 4984272d972..ab7bdefc9eb 100644 --- a/src/util/lang_class.js +++ b/src/util/lang_class.js @@ -1,94 +1,94 @@ - var slice = Array.prototype.slice, emptyFunction = function() { }, +var slice = Array.prototype.slice, emptyFunction = function() { }, - /** @ignore */ - addMethods = function(klass, source, parent) { - for (var property in source) { + /** @ignore */ + addMethods = function(klass, source, parent) { + for (var property in source) { - if (property in klass.prototype && + if (property in klass.prototype && typeof klass.prototype[property] === 'function' && (source[property] + '').indexOf('callSuper') > -1) { - klass.prototype[property] = (function(property) { - return function() { + klass.prototype[property] = (function(property) { + return function() { - var superclass = this.constructor.superclass; - this.constructor.superclass = parent; - var returnValue = source[property].apply(this, arguments); - this.constructor.superclass = superclass; + var superclass = this.constructor.superclass; + this.constructor.superclass = parent; + var returnValue = source[property].apply(this, arguments); + this.constructor.superclass = superclass; - if (property !== 'initialize') { - return returnValue; - } - }; - })(property); - } - else { - klass.prototype[property] = source[property]; - } + if (property !== 'initialize') { + return returnValue; + } + }; + })(property); } - }; + else { + klass.prototype[property] = source[property]; + } + } + }; - function Subclass() { } +function Subclass() { } - function callSuper(methodName) { - var parentMethod = null, - _this = this; +function callSuper(methodName) { + var parentMethod = null, + _this = this; - // climb prototype chain to find method not equal to callee's method - while (_this.constructor.superclass) { - var superClassMethod = _this.constructor.superclass.prototype[methodName]; - if (_this[methodName] !== superClassMethod) { - parentMethod = superClassMethod; - break; - } - // eslint-disable-next-line - _this = _this.constructor.superclass.prototype; - } - - if (!parentMethod) { - return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); + // climb prototype chain to find method not equal to callee's method + while (_this.constructor.superclass) { + var superClassMethod = _this.constructor.superclass.prototype[methodName]; + if (_this[methodName] !== superClassMethod) { + parentMethod = superClassMethod; + break; } + // eslint-disable-next-line + _this = _this.constructor.superclass.prototype; + } - return (arguments.length > 1) - ? parentMethod.apply(this, slice.call(arguments, 1)) - : parentMethod.call(this); + if (!parentMethod) { + return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); } - /** + return (arguments.length > 1) + ? parentMethod.apply(this, slice.call(arguments, 1)) + : parentMethod.call(this); +} + +/** * Helper for creation of "classes". * @memberOf fabric.util * @param {Function} [parent] optional "Class" to inherit from * @param {Object} [properties] Properties shared by all instances of this class * (be careful modifying objects defined here as this would affect all instances) */ - function createClass() { - var parent = null, - properties = slice.call(arguments, 0); +function createClass() { + var parent = null, + properties = slice.call(arguments, 0); - if (typeof properties[0] === 'function') { - parent = properties.shift(); - } - function klass() { - this.initialize.apply(this, arguments); - } + if (typeof properties[0] === 'function') { + parent = properties.shift(); + } + function klass() { + this.initialize.apply(this, arguments); + } - klass.superclass = parent; - klass.subclasses = []; + klass.superclass = parent; + klass.subclasses = []; - if (parent) { - Subclass.prototype = parent.prototype; - klass.prototype = new Subclass(); - parent.subclasses.push(klass); - } - for (var i = 0, length = properties.length; i < length; i++) { - addMethods(klass, properties[i], parent); - } - if (!klass.prototype.initialize) { - klass.prototype.initialize = emptyFunction; - } - klass.prototype.constructor = klass; - klass.prototype.callSuper = callSuper; - return klass; + if (parent) { + Subclass.prototype = parent.prototype; + klass.prototype = new Subclass(); + parent.subclasses.push(klass); + } + for (var i = 0, length = properties.length; i < length; i++) { + addMethods(klass, properties[i], parent); + } + if (!klass.prototype.initialize) { + klass.prototype.initialize = emptyFunction; } + klass.prototype.constructor = klass; + klass.prototype.callSuper = callSuper; + return klass; +} - fabric.util.createClass = createClass; +fabric.util.createClass = createClass; diff --git a/src/util/lang_object.js b/src/util/lang_object.js index 33b461d229b..5debb3d9f33 100644 --- a/src/util/lang_object.js +++ b/src/util/lang_object.js @@ -1,4 +1,4 @@ - /** +/** * Copies all enumerable properties of one js object to another * this does not and cannot compete with generic utils. * Does not clone or extend fabric.Object subclasses. @@ -11,47 +11,47 @@ * @return {Object} */ - function extend(destination, source, deep) { - // JScript DontEnum bug is not taken care of - // the deep clone is for internal use, is not meant to avoid - // javascript traps or cloning html element or self referenced objects. - if (deep) { - if (!fabric.isLikelyNode && source instanceof Element) { - // avoid cloning deep images, canvases, - destination = source; +function extend(destination, source, deep) { + // JScript DontEnum bug is not taken care of + // the deep clone is for internal use, is not meant to avoid + // javascript traps or cloning html element or self referenced objects. + if (deep) { + if (!fabric.isLikelyNode && source instanceof Element) { + // avoid cloning deep images, canvases, + destination = source; + } + else if (source instanceof Array) { + destination = []; + for (var i = 0, len = source.length; i < len; i++) { + destination[i] = extend({ }, source[i], deep); } - else if (source instanceof Array) { - destination = []; - for (var i = 0, len = source.length; i < len; i++) { - destination[i] = extend({ }, source[i], deep); + } + else if (source && typeof source === 'object') { + for (var property in source) { + if (property === 'canvas' || property === 'group') { + // we do not want to clone this props at all. + // we want to keep the keys in the copy + destination[property] = null; } - } - else if (source && typeof source === 'object') { - for (var property in source) { - if (property === 'canvas' || property === 'group') { - // we do not want to clone this props at all. - // we want to keep the keys in the copy - destination[property] = null; - } - else if (source.hasOwnProperty(property)) { - destination[property] = extend({ }, source[property], deep); - } + else if (source.hasOwnProperty(property)) { + destination[property] = extend({ }, source[property], deep); } } - else { - // this sounds odd for an extend but is ok for recursive use - destination = source; - } } else { - for (var property in source) { - destination[property] = source[property]; - } + // this sounds odd for an extend but is ok for recursive use + destination = source; } - return destination; } + else { + for (var property in source) { + destination[property] = source[property]; + } + } + return destination; +} - /** +/** * Creates an empty object and copies all enumerable properties of another object to it * This method is mostly for internal use, and not intended for duplicating shapes in canvas. * @memberOf fabric.util.object @@ -60,14 +60,14 @@ * @return {Object} */ - //TODO: this function return an empty object if you try to clone null - function clone(object, deep) { - return deep ? extend({ }, object, deep) : Object.assign({}, object); - } +//TODO: this function return an empty object if you try to clone null +function clone(object, deep) { + return deep ? extend({ }, object, deep) : Object.assign({}, object); +} - /** @namespace fabric.util.object */ - fabric.util.object = { - extend: extend, - clone: clone - }; - fabric.util.object.extend(fabric.util, fabric.Observable); +/** @namespace fabric.util.object */ +fabric.util.object = { + extend: extend, + clone: clone +}; +fabric.util.object.extend(fabric.util, fabric.Observable); diff --git a/src/util/lang_string.js b/src/util/lang_string.js index 36b353d032d..a258fbc77c3 100644 --- a/src/util/lang_string.js +++ b/src/util/lang_string.js @@ -1,16 +1,16 @@ - /** +/** * Camelizes a string * @memberOf fabric.util.string * @param {String} string String to camelize * @return {String} Camelized version of a string */ - function camelize(string) { - return string.replace(/-+(.)?/g, function(match, character) { - return character ? character.toUpperCase() : ''; - }); - } +function camelize(string) { + return string.replace(/-+(.)?/g, function(match, character) { + return character ? character.toUpperCase() : ''; + }); +} - /** +/** * Capitalizes a string * @memberOf fabric.util.string * @param {String} string String to capitalize @@ -19,89 +19,89 @@ * and other letters are converted to lowercase. * @return {String} Capitalized version of a string */ - function capitalize(string, firstLetterOnly) { - return string.charAt(0).toUpperCase() + +function capitalize(string, firstLetterOnly) { + return string.charAt(0).toUpperCase() + (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()); - } +} - /** +/** * Escapes XML in a string * @memberOf fabric.util.string * @param {String} string String to escape * @return {String} Escaped version of a string */ - function escapeXml(string) { - return string.replace(/&/g, '&') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(//g, '>'); - } +function escapeXml(string) { + return string.replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); +} - /** +/** * Divide a string in the user perceived single units * @memberOf fabric.util.string * @param {String} textstring String to escape * @return {Array} array containing the graphemes */ - function graphemeSplit(textstring) { - var i = 0, chr, graphemes = []; - for (i = 0, chr; i < textstring.length; i++) { - if ((chr = getWholeChar(textstring, i)) === false) { - continue; - } - graphemes.push(chr); +function graphemeSplit(textstring) { + var i = 0, chr, graphemes = []; + for (i = 0, chr; i < textstring.length; i++) { + if ((chr = getWholeChar(textstring, i)) === false) { + continue; } - return graphemes; + graphemes.push(chr); } + return graphemes; +} - // taken from mdn in the charAt doc page. - function getWholeChar(str, i) { - var code = str.charCodeAt(i); +// taken from mdn in the charAt doc page. +function getWholeChar(str, i) { + var code = str.charCodeAt(i); - if (isNaN(code)) { - return ''; // Position not found - } - if (code < 0xD800 || code > 0xDFFF) { - return str.charAt(i); - } + if (isNaN(code)) { + return ''; // Position not found + } + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); + } - // High surrogate (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 <= code && code <= 0xDBFF) { - if (str.length <= (i + 1)) { - throw 'High surrogate without following low surrogate'; - } - var next = str.charCodeAt(i + 1); - if (0xDC00 > next || next > 0xDFFF) { - throw 'High surrogate without following low surrogate'; - } - return str.charAt(i) + str.charAt(i + 1); + // High surrogate (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; } - // Low surrogate (0xDC00 <= code && code <= 0xDFFF) - if (i === 0) { - throw 'Low surrogate without preceding high surrogate'; + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; } - var prev = str.charCodeAt(i - 1); + return str.charAt(i) + str.charAt(i + 1); + } + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; + } + var prev = str.charCodeAt(i - 1); - // (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 > prev || prev > 0xDBFF) { - throw 'Low surrogate without preceding high surrogate'; - } - // We can pass over low surrogates now as the second component - // in a pair which we have already processed - return false; + // (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; } + // We can pass over low surrogates now as the second component + // in a pair which we have already processed + return false; +} - /** +/** * String utilities * @namespace fabric.util.string */ - fabric.util.string = { - camelize: camelize, - capitalize: capitalize, - escapeXml: escapeXml, - graphemeSplit: graphemeSplit - }; +fabric.util.string = { + camelize: camelize, + capitalize: capitalize, + escapeXml: escapeXml, + graphemeSplit: graphemeSplit +}; diff --git a/src/util/misc.js b/src/util/misc.js index 9abac021764..60a06aa2699 100644 --- a/src/util/misc.js +++ b/src/util/misc.js @@ -1,63 +1,63 @@ - var fabric = exports.fabric || (exports.fabric = { }), - sqrt = Math.sqrt, - atan2 = Math.atan2, - pow = Math.pow, - PiBy180 = Math.PI / 180, - PiBy2 = Math.PI / 2; - - /** +var fabric = exports.fabric || (exports.fabric = { }), + sqrt = Math.sqrt, + atan2 = Math.atan2, + pow = Math.pow, + PiBy180 = Math.PI / 180, + PiBy2 = Math.PI / 2; + +/** * @typedef {[number,number,number,number,number,number]} Matrix */ - /** +/** * @namespace fabric.util */ - fabric.util = { +fabric.util = { - /** + /** * Calculate the cos of an angle, avoiding returning floats for known results * @static * @memberOf fabric.util * @param {Number} angle the angle in radians or in degree * @return {Number} */ - cos: function(angle) { - if (angle === 0) { return 1; } - if (angle < 0) { - // cos(a) = cos(-a) - angle = -angle; - } - var angleSlice = angle / PiBy2; - switch (angleSlice) { - case 1: case 3: return 0; - case 2: return -1; - } - return Math.cos(angle); - }, + cos: function(angle) { + if (angle === 0) { return 1; } + if (angle < 0) { + // cos(a) = cos(-a) + angle = -angle; + } + var angleSlice = angle / PiBy2; + switch (angleSlice) { + case 1: case 3: return 0; + case 2: return -1; + } + return Math.cos(angle); + }, - /** + /** * Calculate the sin of an angle, avoiding returning floats for known results * @static * @memberOf fabric.util * @param {Number} angle the angle in radians or in degree * @return {Number} */ - sin: function(angle) { - if (angle === 0) { return 0; } - var angleSlice = angle / PiBy2, sign = 1; - if (angle < 0) { - // sin(-a) = -sin(a) - sign = -1; - } - switch (angleSlice) { - case 1: return sign; - case 2: return 0; - case 3: return -sign; - } - return Math.sin(angle); - }, + sin: function(angle) { + if (angle === 0) { return 0; } + var angleSlice = angle / PiBy2, sign = 1; + if (angle < 0) { + // sin(-a) = -sin(a) + sign = -1; + } + switch (angleSlice) { + case 1: return sign; + case 2: return 0; + case 3: return -sign; + } + return Math.sin(angle); + }, - /** + /** * Removes value from an array. * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` * @static @@ -66,15 +66,15 @@ * @param {*} value * @return {Array} original array */ - removeFromArray: function(array, value) { - var idx = array.indexOf(value); - if (idx !== -1) { - array.splice(idx, 1); - } - return array; - }, + removeFromArray: function(array, value) { + var idx = array.indexOf(value); + if (idx !== -1) { + array.splice(idx, 1); + } + return array; + }, - /** + /** * Returns random number between 2 specified ones. * @static * @memberOf fabric.util @@ -82,33 +82,33 @@ * @param {Number} max upper limit * @return {Number} random value (between min and max) */ - getRandomInt: function(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; - }, + getRandomInt: function(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, - /** + /** * Transforms degrees to radians. * @static * @memberOf fabric.util * @param {Number} degrees value in degrees * @return {Number} value in radians */ - degreesToRadians: function(degrees) { - return degrees * PiBy180; - }, + degreesToRadians: function(degrees) { + return degrees * PiBy180; + }, - /** + /** * Transforms radians to degrees. * @static * @memberOf fabric.util * @param {Number} radians value in radians * @return {Number} value in degrees */ - radiansToDegrees: function(radians) { - return radians / PiBy180; - }, + radiansToDegrees: function(radians) { + return radians / PiBy180; + }, - /** + /** * Rotates `point` around `origin` with `radians` * @static * @memberOf fabric.util @@ -117,13 +117,13 @@ * @param {Number} radians The radians of the angle for the rotation * @return {fabric.Point} The new rotated point */ - rotatePoint: function(point, origin, radians) { - var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), - v = fabric.util.rotateVector(newPoint, radians); - return v.addEquals(origin); - }, + rotatePoint: function(point, origin, radians) { + var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), + v = fabric.util.rotateVector(newPoint, radians); + return v.addEquals(origin); + }, - /** + /** * Rotates `vector` with `radians` * @static * @memberOf fabric.util @@ -131,15 +131,15 @@ * @param {Number} radians The radians of the angle for the rotation * @return {fabric.Point} The new rotated point */ - rotateVector: function(vector, radians) { - var sin = fabric.util.sin(radians), - cos = fabric.util.cos(radians), - rx = vector.x * cos - vector.y * sin, - ry = vector.x * sin + vector.y * cos; - return new fabric.Point(rx, ry); - }, - - /** + rotateVector: function(vector, radians) { + var sin = fabric.util.sin(radians), + cos = fabric.util.cos(radians), + rx = vector.x * cos - vector.y * sin, + ry = vector.x * sin + vector.y * cos; + return new fabric.Point(rx, ry); + }, + + /** * Creates a vetor from points represented as a point * @static * @memberOf fabric.util @@ -152,11 +152,11 @@ * @param {Point} to * @returns {Point} vector */ - createVector: function (from, to) { - return new fabric.Point(to.x - from.x, to.y - from.y); - }, + createVector: function (from, to) { + return new fabric.Point(to.x - from.x, to.y - from.y); + }, - /** + /** * Calculates angle between 2 vectors using dot product * @static * @memberOf fabric.util @@ -164,21 +164,21 @@ * @param {Point} b * @returns the angle in radian between the vectors */ - calcAngleBetweenVectors: function (a, b) { - return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); - }, + calcAngleBetweenVectors: function (a, b) { + return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); + }, - /** + /** * @static * @memberOf fabric.util * @param {Point} v * @returns {Point} vector representing the unit vector of pointing to the direction of `v` */ - getHatVector: function (v) { - return new fabric.Point(v.x, v.y).scalarMultiply(1 / Math.hypot(v.x, v.y)); - }, + getHatVector: function (v) { + return new fabric.Point(v.x, v.y).scalarMultiply(1 / Math.hypot(v.x, v.y)); + }, - /** + /** * @static * @memberOf fabric.util * @param {Point} A @@ -186,19 +186,19 @@ * @param {Point} C * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle */ - getBisector: function (A, B, C) { - var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); - var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); - // check if alpha is relative to AB->BC - var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); - var phi = alpha * (ro === 0 ? 1 : -1) / 2; - return { - vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), - angle: alpha - }; - }, + getBisector: function (A, B, C) { + var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); + var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); + // check if alpha is relative to AB->BC + var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); + var phi = alpha * (ro === 0 ? 1 : -1) / 2; + return { + vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), + angle: alpha + }; + }, - /** + /** * Project stroke width on points returning 2 projections for each point as follows: * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke. * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector. @@ -217,58 +217,58 @@ * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points * @returns {fabric.Point[]} array of size 2n/4n of all suspected points */ - projectStrokeOnPoints: function (points, options, openPath) { - var coords = [], s = options.strokeWidth / 2, - strokeUniformScalar = options.strokeUniform ? - new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), - getStrokeHatVector = function (v) { - var scalar = s / (Math.hypot(v.x, v.y)); - return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); - }; - if (points.length <= 1) {return coords;} - points.forEach(function (p, index) { - var A = new fabric.Point(p.x, p.y), B, C; - if (index === 0) { - C = points[index + 1]; - B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; - } - else if (index === points.length - 1) { - B = points[index - 1]; - C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; - } - else { - B = points[index - 1]; - C = points[index + 1]; - } - var bisector = fabric.util.getBisector(A, B, C), - bisectorVector = bisector.vector, - alpha = bisector.angle, - scalar, - miterVector; - if (options.strokeLineJoin === 'miter') { - scalar = -s / Math.sin(alpha / 2); - miterVector = new fabric.Point( - bisectorVector.x * scalar * strokeUniformScalar.x, - bisectorVector.y * scalar * strokeUniformScalar.y - ); - if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - return; - } - } - scalar = -s * Math.SQRT2; + projectStrokeOnPoints: function (points, options, openPath) { + var coords = [], s = options.strokeWidth / 2, + strokeUniformScalar = options.strokeUniform ? + new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), + getStrokeHatVector = function (v) { + var scalar = s / (Math.hypot(v.x, v.y)); + return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); + }; + if (points.length <= 1) {return coords;} + points.forEach(function (p, index) { + var A = new fabric.Point(p.x, p.y), B, C; + if (index === 0) { + C = points[index + 1]; + B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; + } + else if (index === points.length - 1) { + B = points[index - 1]; + C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; + } + else { + B = points[index - 1]; + C = points[index + 1]; + } + var bisector = fabric.util.getBisector(A, B, C), + bisectorVector = bisector.vector, + alpha = bisector.angle, + scalar, + miterVector; + if (options.strokeLineJoin === 'miter') { + scalar = -s / Math.sin(alpha / 2); miterVector = new fabric.Point( bisectorVector.x * scalar * strokeUniformScalar.x, bisectorVector.y * scalar * strokeUniformScalar.y ); - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - }); - return coords; - }, + if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + return; + } + } + scalar = -s * Math.SQRT2; + miterVector = new fabric.Point( + bisectorVector.x * scalar * strokeUniformScalar.x, + bisectorVector.y * scalar * strokeUniformScalar.y + ); + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + }); + return coords; + }, - /** + /** * Apply transform t to point p * @static * @memberOf fabric.util @@ -277,20 +277,20 @@ * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied * @return {fabric.Point} The transformed point */ - transformPoint: function(p, t, ignoreOffset) { - if (ignoreOffset) { - return new fabric.Point( - t[0] * p.x + t[2] * p.y, - t[1] * p.x + t[3] * p.y - ); - } + transformPoint: function(p, t, ignoreOffset) { + if (ignoreOffset) { return new fabric.Point( - t[0] * p.x + t[2] * p.y + t[4], - t[1] * p.x + t[3] * p.y + t[5] + t[0] * p.x + t[2] * p.y, + t[1] * p.x + t[3] * p.y ); - }, + } + return new fabric.Point( + t[0] * p.x + t[2] * p.y + t[4], + t[1] * p.x + t[3] * p.y + t[5] + ); + }, - /** + /** * Sends a point from the source coordinate plane to the destination coordinate plane.\ * From the canvas/viewer's perspective the point remains unchanged. * @@ -309,15 +309,15 @@ * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `point` should be sent to the canvas coordinate plane. * @returns {fabric.Point} transformed point */ - sendPointToPlane: function (point, from, to) { - // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) - // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) - var inv = fabric.util.invertTransform(to || fabric.iMatrix); - var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); - return fabric.util.transformPoint(point, t); - }, - - /** + sendPointToPlane: function (point, from, to) { + // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) + // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) + var inv = fabric.util.invertTransform(to || fabric.iMatrix); + var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); + return fabric.util.transformPoint(point, t); + }, + + /** * Transform point relative to canvas. * From the viewport/viewer's perspective the point remains unchanged. * @@ -336,21 +336,21 @@ * @param {'sibling'|'child'} relationAfter desired relation of point to canvas * @returns {fabric.Point} transformed point */ - transformPointRelativeToCanvas: function (point, canvas, relationBefore, relationAfter) { - if (relationBefore !== 'child' && relationBefore !== 'sibling') { - throw new Error('fabric.js: received bad argument ' + relationBefore); - } - if (relationAfter !== 'child' && relationAfter !== 'sibling') { - throw new Error('fabric.js: received bad argument ' + relationAfter); - } - if (relationBefore === relationAfter) { - return point; - } - var t = canvas.viewportTransform; - return fabric.util.transformPoint(point, relationAfter === 'child' ? fabric.util.invertTransform(t) : t); - }, + transformPointRelativeToCanvas: function (point, canvas, relationBefore, relationAfter) { + if (relationBefore !== 'child' && relationBefore !== 'sibling') { + throw new Error('fabric.js: received bad argument ' + relationBefore); + } + if (relationAfter !== 'child' && relationAfter !== 'sibling') { + throw new Error('fabric.js: received bad argument ' + relationAfter); + } + if (relationBefore === relationAfter) { + return point; + } + var t = canvas.viewportTransform; + return fabric.util.transformPoint(point, relationAfter === 'child' ? fabric.util.invertTransform(t) : t); + }, - /** + /** * Returns coordinates of points's bounding rectangle (left, top, width, height) * @static * @memberOf fabric.util @@ -358,46 +358,46 @@ * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix * @return {Object} Object with left, top, width, height properties */ - makeBoundingBoxFromPoints: function(points, transform) { - if (transform) { - for (var i = 0; i < points.length; i++) { - points[i] = fabric.util.transformPoint(points[i], transform); - } + makeBoundingBoxFromPoints: function(points, transform) { + if (transform) { + for (var i = 0; i < points.length; i++) { + points[i] = fabric.util.transformPoint(points[i], transform); } - var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], - minX = fabric.util.array.min(xPoints), - maxX = fabric.util.array.max(xPoints), - width = maxX - minX, - yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], - minY = fabric.util.array.min(yPoints), - maxY = fabric.util.array.max(yPoints), - height = maxY - minY; - - return { - left: minX, - top: minY, - width: width, - height: height - }; - }, + } + var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], + minX = fabric.util.array.min(xPoints), + maxX = fabric.util.array.max(xPoints), + width = maxX - minX, + yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], + minY = fabric.util.array.min(yPoints), + maxY = fabric.util.array.max(yPoints), + height = maxY - minY; + + return { + left: minX, + top: minY, + width: width, + height: height + }; + }, - /** + /** * Invert transformation t * @static * @memberOf fabric.util * @param {Array} t The transform * @return {Array} The inverted transform */ - invertTransform: function(t) { - var a = 1 / (t[0] * t[3] - t[1] * t[2]), - r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], - o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); - r[4] = -o.x; - r[5] = -o.y; - return r; - }, - - /** + invertTransform: function(t) { + var a = 1 / (t[0] * t[3] - t[1] * t[2]), + r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], + o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); + r[4] = -o.x; + r[5] = -o.y; + return r; + }, + + /** * A wrapper around Number#toFixed, which contrary to native method returns number, not string. * @static * @memberOf fabric.util @@ -405,120 +405,120 @@ * @param {Number} fractionDigits number of fraction digits to "leave" * @return {Number} */ - toFixed: function(number, fractionDigits) { - return parseFloat(Number(number).toFixed(fractionDigits)); - }, + toFixed: function(number, fractionDigits) { + return parseFloat(Number(number).toFixed(fractionDigits)); + }, - /** + /** * Converts from attribute value to pixel value if applicable. * Returns converted pixels or original value not converted. * @param {Number|String} value number to operate on * @param {Number} fontSize * @return {Number|String} */ - parseUnit: function(value, fontSize) { - var unit = /\D{0,2}$/.exec(value), - number = parseFloat(value); - if (!fontSize) { - fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; - } - switch (unit[0]) { - case 'mm': - return number * fabric.DPI / 25.4; + parseUnit: function(value, fontSize) { + var unit = /\D{0,2}$/.exec(value), + number = parseFloat(value); + if (!fontSize) { + fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + } + switch (unit[0]) { + case 'mm': + return number * fabric.DPI / 25.4; - case 'cm': - return number * fabric.DPI / 2.54; + case 'cm': + return number * fabric.DPI / 2.54; - case 'in': - return number * fabric.DPI; + case 'in': + return number * fabric.DPI; - case 'pt': - return number * fabric.DPI / 72; // or * 4 / 3 + case 'pt': + return number * fabric.DPI / 72; // or * 4 / 3 - case 'pc': - return number * fabric.DPI / 72 * 12; // or * 16 + case 'pc': + return number * fabric.DPI / 72 * 12; // or * 16 - case 'em': - return number * fontSize; + case 'em': + return number * fontSize; - default: - return number; - } - }, + default: + return number; + } + }, - /** + /** * Function which always returns `false`. * @static * @memberOf fabric.util * @return {Boolean} */ - falseFunction: function() { - return false; - }, + falseFunction: function() { + return false; + }, - /** + /** * Returns klass "Class" object of given namespace * @memberOf fabric.util * @param {String} type Type of object (eg. 'circle') * @param {String} namespace Namespace to get klass "Class" object from * @return {Object} klass "Class" */ - getKlass: function(type, namespace) { - // capitalize first letter only - type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); - return fabric.util.resolveNamespace(namespace)[type]; - }, + getKlass: function(type, namespace) { + // capitalize first letter only + type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); + return fabric.util.resolveNamespace(namespace)[type]; + }, - /** + /** * Returns array of attributes for given svg that fabric parses * @memberOf fabric.util * @param {String} type Type of svg element (eg. 'circle') * @return {Array} string names of supported attributes */ - getSvgAttributes: function(type) { - var attributes = [ - 'instantiated_by_use', - 'style', - 'id', - 'class' - ]; - switch (type) { - case 'linearGradient': - attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); - break; - case 'radialGradient': - attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); - break; - case 'stop': - attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); - break; - } - return attributes; - }, + getSvgAttributes: function(type) { + var attributes = [ + 'instantiated_by_use', + 'style', + 'id', + 'class' + ]; + switch (type) { + case 'linearGradient': + attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); + break; + case 'radialGradient': + attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); + break; + case 'stop': + attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); + break; + } + return attributes; + }, - /** + /** * Returns object of given namespace * @memberOf fabric.util * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric' * @return {Object} Object for given namespace (default fabric) */ - resolveNamespace: function(namespace) { - if (!namespace) { - return fabric; - } + resolveNamespace: function(namespace) { + if (!namespace) { + return fabric; + } - var parts = namespace.split('.'), - len = parts.length, i, - obj = global || fabric.window; + var parts = namespace.split('.'), + len = parts.length, i, + obj = exports || fabric.window; - for (i = 0; i < len; ++i) { - obj = obj[parts[i]]; - } + for (i = 0; i < len; ++i) { + obj = obj[parts[i]]; + } - return obj; - }, + return obj; + }, - /** + /** * Loads image element from given url and resolve it, or catch. * @memberOf fabric.util * @param {String} url URL representing an image @@ -526,28 +526,28 @@ * @param {string} [options.crossOrigin] cors value for the image loading, default to anonymous * @param {Promise} img the loaded image. */ - loadImage: function(url, options) { - return new Promise(function(resolve, reject) { - var img = fabric.util.createImage(); - var done = function() { - img.onload = img.onerror = null; - resolve(img); + loadImage: function(url, options) { + return new Promise(function(resolve, reject) { + var img = fabric.util.createImage(); + var done = function() { + img.onload = img.onerror = null; + resolve(img); + }; + if (!url) { + done(); + } + else { + img.onload = done; + img.onerror = function () { + reject(new Error('Error loading ' + img.src)); }; - if (!url) { - done(); - } - else { - img.onload = done; - img.onerror = function () { - reject(new Error('Error loading ' + img.src)); - }; - options && options.crossOrigin && (img.crossOrigin = options.crossOrigin); - img.src = url; - } - }); - }, + options && options.crossOrigin && (img.crossOrigin = options.crossOrigin); + img.src = url; + } + }); + }, - /** + /** * Creates corresponding fabric instances from their object representations * @static * @memberOf fabric.util @@ -556,65 +556,65 @@ * @param {Function} reviver Method for further parsing of object elements, * called after each fabric object created. */ - enlivenObjects: function(objects, namespace, reviver) { - return Promise.all(objects.map(function(obj) { - var klass = fabric.util.getKlass(obj.type, namespace); - return klass.fromObject(obj).then(function(fabricInstance) { - reviver && reviver(obj, fabricInstance); - return fabricInstance; - }); - })); - }, + enlivenObjects: function(objects, namespace, reviver) { + return Promise.all(objects.map(function(obj) { + var klass = fabric.util.getKlass(obj.type, namespace); + return klass.fromObject(obj).then(function(fabricInstance) { + reviver && reviver(obj, fabricInstance); + return fabricInstance; + }); + })); + }, - /** + /** * Creates corresponding fabric instances residing in an object, e.g. `clipPath` * @param {Object} object with properties to enlive ( fill, stroke, clipPath, path ) * @returns {Promise} the input object with enlived values */ - enlivenObjectEnlivables: function (serializedObject) { - // enlive every possible property - var promises = Object.values(serializedObject).map(function(value) { - if (!value) { - return value; - } - if (value.colorStops) { - return new fabric.Gradient(value); - } - if (value.type) { - return fabric.util.enlivenObjects([value]).then(function (enlived) { - return enlived[0]; - }); - } - if (value.source) { - return fabric.Pattern.fromObject(value); - } + enlivenObjectEnlivables: function (serializedObject) { + // enlive every possible property + var promises = Object.values(serializedObject).map(function(value) { + if (!value) { return value; - }); - var keys = Object.keys(serializedObject); - return Promise.all(promises).then(function(enlived) { - return enlived.reduce(function(acc, instance, index) { - acc[keys[index]] = instance; - return acc; - }, {}); - }); - }, + } + if (value.colorStops) { + return new fabric.Gradient(value); + } + if (value.type) { + return fabric.util.enlivenObjects([value]).then(function (enlived) { + return enlived[0]; + }); + } + if (value.source) { + return fabric.Pattern.fromObject(value); + } + return value; + }); + var keys = Object.keys(serializedObject); + return Promise.all(promises).then(function(enlived) { + return enlived.reduce(function(acc, instance, index) { + acc[keys[index]] = instance; + return acc; + }, {}); + }); + }, - /** + /** * Groups SVG elements (usually those retrieved from SVG document) * @static * @memberOf fabric.util * @param {Array} elements SVG elements to group * @return {fabric.Object|fabric.Group} */ - groupSVGElements: function(elements) { - if (elements && elements.length === 1) { - return elements[0]; - } - return new fabric.Group(elements); - }, + groupSVGElements: function(elements) { + if (elements && elements.length === 1) { + return elements[0]; + } + return new fabric.Group(elements); + }, - /** + /** * Populates an object with properties of another object * @static * @memberOf fabric.util @@ -622,42 +622,42 @@ * @param {Object} destination Destination object * @return {Array} properties Properties names to include */ - populateWithProperties: function(source, destination, properties) { - if (properties && Array.isArray(properties)) { - for (var i = 0, len = properties.length; i < len; i++) { - if (properties[i] in source) { - destination[properties[i]] = source[properties[i]]; - } + populateWithProperties: function(source, destination, properties) { + if (properties && Array.isArray(properties)) { + for (var i = 0, len = properties.length; i < len; i++) { + if (properties[i] in source) { + destination[properties[i]] = source[properties[i]]; } } - }, + } + }, - /** + /** * Creates canvas element * @static * @memberOf fabric.util * @return {CanvasElement} initialized canvas element */ - createCanvasElement: function() { - return fabric.document.createElement('canvas'); - }, + createCanvasElement: function() { + return fabric.document.createElement('canvas'); + }, - /** + /** * Creates a canvas element that is a copy of another and is also painted * @param {CanvasElement} canvas to copy size and content of * @static * @memberOf fabric.util * @return {CanvasElement} initialized canvas element */ - copyCanvasElement: function(canvas) { - var newCanvas = fabric.util.createCanvasElement(); - newCanvas.width = canvas.width; - newCanvas.height = canvas.height; - newCanvas.getContext('2d').drawImage(canvas, 0, 0); - return newCanvas; - }, - - /** + copyCanvasElement: function(canvas) { + var newCanvas = fabric.util.createCanvasElement(); + newCanvas.width = canvas.width; + newCanvas.height = canvas.height; + newCanvas.getContext('2d').drawImage(canvas, 0, 0); + return newCanvas; + }, + + /** * since 2.6.0 moved from canvas instance to utility. * @param {CanvasElement} canvasEl to copy size and content of * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too @@ -666,21 +666,21 @@ * @memberOf fabric.util * @return {String} data url */ - toDataURL: function(canvasEl, format, quality) { - return canvasEl.toDataURL('image/' + format, quality); - }, + toDataURL: function(canvasEl, format, quality) { + return canvasEl.toDataURL('image/' + format, quality); + }, - /** + /** * Creates image element (works on client and node) * @static * @memberOf fabric.util * @return {HTMLImageElement} HTML image element */ - createImage: function() { - return fabric.document.createElement('img'); - }, + createImage: function() { + return fabric.document.createElement('img'); + }, - /** + /** * Multiply matrix A by matrix B to nest transformations * @static * @memberOf fabric.util @@ -689,43 +689,43 @@ * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices * @return {Array} The product of the two transform matrices */ - multiplyTransformMatrices: function(a, b, is2x2) { - // Matrix multiply a * b - return [ - a[0] * b[0] + a[2] * b[1], - a[1] * b[0] + a[3] * b[1], - a[0] * b[2] + a[2] * b[3], - a[1] * b[2] + a[3] * b[3], - is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], - is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] - ]; - }, - - /** + multiplyTransformMatrices: function(a, b, is2x2) { + // Matrix multiply a * b + return [ + a[0] * b[0] + a[2] * b[1], + a[1] * b[0] + a[3] * b[1], + a[0] * b[2] + a[2] * b[3], + a[1] * b[2] + a[3] * b[3], + is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], + is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] + ]; + }, + + /** * Decomposes standard 2x3 matrix into transform components * @static * @memberOf fabric.util * @param {Array} a transformMatrix * @return {Object} Components of transform */ - qrDecompose: function(a) { - var angle = atan2(a[1], a[0]), - denom = pow(a[0], 2) + pow(a[1], 2), - scaleX = sqrt(denom), - scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, - skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); - return { - angle: angle / PiBy180, - scaleX: scaleX, - scaleY: scaleY, - skewX: skewX / PiBy180, - skewY: 0, - translateX: a[4], - translateY: a[5] - }; - }, + qrDecompose: function(a) { + var angle = atan2(a[1], a[0]), + denom = pow(a[0], 2) + pow(a[1], 2), + scaleX = sqrt(denom), + scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, + skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); + return { + angle: angle / PiBy180, + scaleX: scaleX, + scaleY: scaleY, + skewX: skewX / PiBy180, + skewY: 0, + translateX: a[4], + translateY: a[5] + }; + }, - /** + /** * Returns a transform matrix starting from an object of the same kind of * the one returned from qrDecompose, useful also if you want to calculate some * transformations from an object that is not enlived yet @@ -735,17 +735,17 @@ * @param {Number} [options.angle] angle in degrees * @return {Number[]} transform matrix */ - calcRotateMatrix: function(options) { - if (!options.angle) { - return fabric.iMatrix.concat(); - } - var theta = fabric.util.degreesToRadians(options.angle), - cos = fabric.util.cos(theta), - sin = fabric.util.sin(theta); - return [cos, sin, -sin, cos, 0, 0]; - }, + calcRotateMatrix: function(options) { + if (!options.angle) { + return fabric.iMatrix.concat(); + } + var theta = fabric.util.degreesToRadians(options.angle), + cos = fabric.util.cos(theta), + sin = fabric.util.sin(theta); + return [cos, sin, -sin, cos, 0, 0]; + }, - /** + /** * Returns a transform matrix starting from an object of the same kind of * the one returned from qrDecompose, useful also if you want to calculate some * transformations from an object that is not enlived yet. @@ -762,34 +762,34 @@ * @param {Number} [options.skewY] * @return {Number[]} transform matrix */ - calcDimensionsMatrix: function(options) { - var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, - scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, - scaleMatrix = [ - options.flipX ? -scaleX : scaleX, - 0, - 0, - options.flipY ? -scaleY : scaleY, - 0, - 0], - multiply = fabric.util.multiplyTransformMatrices, - degreesToRadians = fabric.util.degreesToRadians; - if (options.skewX) { - scaleMatrix = multiply( - scaleMatrix, - [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], - true); - } - if (options.skewY) { - scaleMatrix = multiply( - scaleMatrix, - [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], - true); - } - return scaleMatrix; - }, + calcDimensionsMatrix: function(options) { + var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, + scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, + scaleMatrix = [ + options.flipX ? -scaleX : scaleX, + 0, + 0, + options.flipY ? -scaleY : scaleY, + 0, + 0], + multiply = fabric.util.multiplyTransformMatrices, + degreesToRadians = fabric.util.degreesToRadians; + if (options.skewX) { + scaleMatrix = multiply( + scaleMatrix, + [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], + true); + } + if (options.skewY) { + scaleMatrix = multiply( + scaleMatrix, + [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], + true); + } + return scaleMatrix; + }, - /** + /** * Returns a transform matrix starting from an object of the same kind of * the one returned from qrDecompose, useful also if you want to calculate some * transformations from an object that is not enlived yet @@ -807,57 +807,57 @@ * @param {Number} [options.translateY] * @return {Number[]} transform matrix */ - composeMatrix: function(options) { - var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], - multiply = fabric.util.multiplyTransformMatrices; - if (options.angle) { - matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); - } - if (options.scaleX !== 1 || options.scaleY !== 1 || + composeMatrix: function(options) { + var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], + multiply = fabric.util.multiplyTransformMatrices; + if (options.angle) { + matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); + } + if (options.scaleX !== 1 || options.scaleY !== 1 || options.skewX || options.skewY || options.flipX || options.flipY) { - matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); - } - return matrix; - }, + matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); + } + return matrix; + }, - /** + /** * reset an object transform state to neutral. Top and left are not accounted for * @static * @memberOf fabric.util * @param {fabric.Object} target object to transform */ - resetObjectTransform: function (target) { - target.scaleX = 1; - target.scaleY = 1; - target.skewX = 0; - target.skewY = 0; - target.flipX = false; - target.flipY = false; - target.rotate(0); - }, - - /** + resetObjectTransform: function (target) { + target.scaleX = 1; + target.scaleY = 1; + target.skewX = 0; + target.skewY = 0; + target.flipX = false; + target.flipY = false; + target.rotate(0); + }, + + /** * Extract Object transform values * @static * @memberOf fabric.util * @param {fabric.Object} target object to read from * @return {Object} Components of transform */ - saveObjectTransform: function (target) { - return { - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - angle: target.angle, - left: target.left, - flipX: target.flipX, - flipY: target.flipY, - top: target.top - }; - }, + saveObjectTransform: function (target) { + return { + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + angle: target.angle, + left: target.left, + flipX: target.flipX, + flipY: target.flipY, + top: target.top + }; + }, - /** + /** * Returns true if context has transparent pixel * at specified location (taking tolerance into account) * @param {CanvasRenderingContext2D} ctx context @@ -865,73 +865,73 @@ * @param {Number} y y coordinate * @param {Number} tolerance Tolerance */ - isTransparent: function(ctx, x, y, tolerance) { + isTransparent: function(ctx, x, y, tolerance) { - // If tolerance is > 0 adjust start coords to take into account. - // If moves off Canvas fix to 0 - if (tolerance > 0) { - if (x > tolerance) { - x -= tolerance; - } - else { - x = 0; - } - if (y > tolerance) { - y -= tolerance; - } - else { - y = 0; - } + // If tolerance is > 0 adjust start coords to take into account. + // If moves off Canvas fix to 0 + if (tolerance > 0) { + if (x > tolerance) { + x -= tolerance; } - - var _isTransparent = true, i, temp, - imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), - l = imageData.data.length; - - // Split image data - for tolerance > 1, pixelDataSize = 4; - for (i = 3; i < l; i += 4) { - temp = imageData.data[i]; - _isTransparent = temp <= 0; - if (_isTransparent === false) { - break; // Stop if colour found - } + else { + x = 0; + } + if (y > tolerance) { + y -= tolerance; + } + else { + y = 0; } + } + + var _isTransparent = true, i, temp, + imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), + l = imageData.data.length; + + // Split image data - for tolerance > 1, pixelDataSize = 4; + for (i = 3; i < l; i += 4) { + temp = imageData.data[i]; + _isTransparent = temp <= 0; + if (_isTransparent === false) { + break; // Stop if colour found + } + } - imageData = null; + imageData = null; - return _isTransparent; - }, + return _isTransparent; + }, - /** + /** * Parse preserveAspectRatio attribute from element * @param {string} attribute to be parsed * @return {Object} an object containing align and meetOrSlice attribute */ - parsePreserveAspectRatioAttribute: function(attribute) { - var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', - aspectRatioAttrs = attribute.split(' '), align; - - if (aspectRatioAttrs && aspectRatioAttrs.length) { - meetOrSlice = aspectRatioAttrs.pop(); - if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { - align = meetOrSlice; - meetOrSlice = 'meet'; - } - else if (aspectRatioAttrs.length) { - align = aspectRatioAttrs.pop(); - } + parsePreserveAspectRatioAttribute: function(attribute) { + var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', + aspectRatioAttrs = attribute.split(' '), align; + + if (aspectRatioAttrs && aspectRatioAttrs.length) { + meetOrSlice = aspectRatioAttrs.pop(); + if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { + align = meetOrSlice; + meetOrSlice = 'meet'; } - //divide align in alignX and alignY - alignX = align !== 'none' ? align.slice(1, 4) : 'none'; - alignY = align !== 'none' ? align.slice(5, 8) : 'none'; - return { - meetOrSlice: meetOrSlice, - alignX: alignX, - alignY: alignY - }; - }, + else if (aspectRatioAttrs.length) { + align = aspectRatioAttrs.pop(); + } + } + //divide align in alignX and alignY + alignX = align !== 'none' ? align.slice(1, 4) : 'none'; + alignY = align !== 'none' ? align.slice(5, 8) : 'none'; + return { + meetOrSlice: meetOrSlice, + alignX: alignX, + alignY: alignY + }; + }, - /** + /** * Clear char widths cache for the given font family or all the cache if no * fontFamily is specified. * Use it if you know you are loading fonts in a lazy way and you are not waiting @@ -943,17 +943,17 @@ * @memberOf fabric.util * @param {String} [fontFamily] font family to clear */ - clearFabricFontCache: function(fontFamily) { - fontFamily = (fontFamily || '').toLowerCase(); - if (!fontFamily) { - fabric.charWidthsCache = { }; - } - else if (fabric.charWidthsCache[fontFamily]) { - delete fabric.charWidthsCache[fontFamily]; - } - }, + clearFabricFontCache: function(fontFamily) { + fontFamily = (fontFamily || '').toLowerCase(); + if (!fontFamily) { + fabric.charWidthsCache = { }; + } + else if (fabric.charWidthsCache[fontFamily]) { + delete fabric.charWidthsCache[fontFamily]; + } + }, - /** + /** * Given current aspect ratio, determines the max width and height that can * respect the total allowed area for the cache. * @memberOf fabric.util @@ -962,17 +962,17 @@ * @return {Object.x} Limited dimensions by X * @return {Object.y} Limited dimensions by Y */ - limitDimsByArea: function(ar, maximumArea) { - var roughWidth = Math.sqrt(maximumArea * ar), - perfLimitSizeY = Math.floor(maximumArea / roughWidth); - return { x: Math.floor(roughWidth), y: perfLimitSizeY }; - }, + limitDimsByArea: function(ar, maximumArea) { + var roughWidth = Math.sqrt(maximumArea * ar), + perfLimitSizeY = Math.floor(maximumArea / roughWidth); + return { x: Math.floor(roughWidth), y: perfLimitSizeY }; + }, - capValue: function(min, value, max) { - return Math.max(min, Math.min(value, max)); - }, + capValue: function(min, value, max) { + return Math.max(min, Math.min(value, max)); + }, - /** + /** * Finds the scale for the object source to fit inside the object destination, * keeping aspect ratio intact. * respect the total allowed area for the cache. @@ -985,11 +985,11 @@ * @param {Number} destination.width natural unscaled width of the object * @return {Number} scale factor to apply to source to fit into destination */ - findScaleToFit: function(source, destination) { - return Math.min(destination.width / source.width, destination.height / source.height); - }, + findScaleToFit: function(source, destination) { + return Math.min(destination.width / source.width, destination.height / source.height); + }, - /** + /** * Finds the scale for the object source to cover entirely the object destination, * keeping aspect ratio intact. * respect the total allowed area for the cache. @@ -1002,24 +1002,24 @@ * @param {Number} destination.width natural unscaled width of the object * @return {Number} scale factor to apply to source to cover destination */ - findScaleToCover: function(source, destination) { - return Math.max(destination.width / source.width, destination.height / source.height); - }, + findScaleToCover: function(source, destination) { + return Math.max(destination.width / source.width, destination.height / source.height); + }, - /** + /** * given an array of 6 number returns something like `"matrix(...numbers)"` * @memberOf fabric.util * @param {Array} transform an array with 6 numbers * @return {String} transform matrix for svg * @return {Object.y} Limited dimensions by Y */ - matrixToSVG: function(transform) { - return 'matrix(' + transform.map(function(value) { - return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); - }).join(' ') + ')'; - }, + matrixToSVG: function(transform) { + return 'matrix(' + transform.map(function(value) { + return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); + }).join(' ') + ')'; + }, - /** + /** * given an object and a transform, apply the inverse transform to the object, * this is equivalent to remove from that object that transformation, so that * added in a space with the removed transform, the object will be the same as before. @@ -1031,13 +1031,13 @@ * @param {fabric.Object} object the object you want to transform * @param {Array} transform the destination transform */ - removeTransformFromObject: function(object, transform) { - var inverted = fabric.util.invertTransform(transform), - finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); - fabric.util.applyTransformToObject(object, finalTransform); - }, + removeTransformFromObject: function(object, transform) { + var inverted = fabric.util.invertTransform(transform), + finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); + fabric.util.applyTransformToObject(object, finalTransform); + }, - /** + /** * given an object and a transform, apply the transform to the object. * this is equivalent to change the space where the object is drawn. * Adding to an object a transform that scale by 2 is like scaling it by 2. @@ -1046,33 +1046,33 @@ * @param {fabric.Object} object the object you want to transform * @param {Array} transform the destination transform */ - addTransformToObject: function(object, transform) { - fabric.util.applyTransformToObject( - object, - fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) - ); - }, + addTransformToObject: function(object, transform) { + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) + ); + }, - /** + /** * discard an object transform state and apply the one from the matrix. * @memberOf fabric.util * @param {fabric.Object} object the object you want to transform * @param {Array} transform the destination transform */ - applyTransformToObject: function(object, transform) { - var options = fabric.util.qrDecompose(transform), - center = new fabric.Point(options.translateX, options.translateY); - object.flipX = false; - object.flipY = false; - object.set('scaleX', options.scaleX); - object.set('scaleY', options.scaleY); - object.skewX = options.skewX; - object.skewY = options.skewY; - object.angle = options.angle; - object.setPositionByOrigin(center, 'center', 'center'); - }, - - /** + applyTransformToObject: function(object, transform) { + var options = fabric.util.qrDecompose(transform), + center = new fabric.Point(options.translateX, options.translateY); + object.flipX = false; + object.flipY = false; + object.set('scaleX', options.scaleX); + object.set('scaleY', options.scaleY); + object.skewX = options.skewX; + object.skewY = options.skewY; + object.angle = options.angle; + object.setPositionByOrigin(center, 'center', 'center'); + }, + + /** * * A util that abstracts applying transform to objects.\ * Sends `object` to the destination coordinate plane by applying the relevant transformations.\ @@ -1104,19 +1104,19 @@ * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `object` should be sent to the canvas coordinate plane. * @returns {Matrix} the transform matrix that was applied to `object` */ - sendObjectToPlane: function (object, from, to) { - // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) - // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) - var inv = fabric.util.invertTransform(to || fabric.iMatrix); - var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); - fabric.util.applyTransformToObject( - object, - fabric.util.multiplyTransformMatrices(t, object.calcOwnMatrix()) - ); - return t; - }, + sendObjectToPlane: function (object, from, to) { + // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) + // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) + var inv = fabric.util.invertTransform(to || fabric.iMatrix); + var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(t, object.calcOwnMatrix()) + ); + return t; + }, - /** + /** * given a width and height, return the size of the bounding box * that can contains the box with width/height with applied transform * described in options. @@ -1131,31 +1131,31 @@ * @param {Number} options.skewY * @returns {fabric.Point} size */ - sizeAfterTransform: function(width, height, options) { - var dimX = width / 2, dimY = height / 2, - points = [ - { - x: -dimX, - y: -dimY - }, - { - x: dimX, - y: -dimY - }, - { - x: -dimX, - y: dimY - }, - { - x: dimX, - y: dimY - }], - transformMatrix = fabric.util.calcDimensionsMatrix(options), - bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); - return new fabric.Point(bbox.width, bbox.height); - }, - - /** + sizeAfterTransform: function(width, height, options) { + var dimX = width / 2, dimY = height / 2, + points = [ + { + x: -dimX, + y: -dimY + }, + { + x: dimX, + y: -dimY + }, + { + x: -dimX, + y: dimY + }, + { + x: dimX, + y: dimY + }], + transformMatrix = fabric.util.calcDimensionsMatrix(options), + bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); + return new fabric.Point(bbox.width, bbox.height); + }, + + /** * Merges 2 clip paths into one visually equal clip path * * **IMPORTANT**:\ @@ -1174,27 +1174,27 @@ * @param {fabric.Object} c2 * @returns {fabric.Object} merged clip path */ - mergeClipPaths: function (c1, c2) { - var a = c1, b = c2; - if (a.inverted && !b.inverted) { - // case (2) - a = c2; - b = c1; - } - // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane - fabric.util.applyTransformToObject( - b, - fabric.util.multiplyTransformMatrices( - fabric.util.invertTransform(a.calcTransformMatrix()), - b.calcTransformMatrix() - ) - ); - // assign the `inverted` prop to the wrapping group - var inverted = a.inverted && b.inverted; - if (inverted) { - // case (1) - a.inverted = b.inverted = false; - } - return new fabric.Group([a], { clipPath: b, inverted: inverted }); - }, - }; + mergeClipPaths: function (c1, c2) { + var a = c1, b = c2; + if (a.inverted && !b.inverted) { + // case (2) + a = c2; + b = c1; + } + // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane + fabric.util.applyTransformToObject( + b, + fabric.util.multiplyTransformMatrices( + fabric.util.invertTransform(a.calcTransformMatrix()), + b.calcTransformMatrix() + ) + ); + // assign the `inverted` prop to the wrapping group + var inverted = a.inverted && b.inverted; + if (inverted) { + // case (1) + a.inverted = b.inverted = false; + } + return new fabric.Group([a], { clipPath: b, inverted: inverted }); + }, +}; diff --git a/src/util/named_accessors.mixin.js b/src/util/named_accessors.mixin.js index 092de5d118d..1418f668116 100644 --- a/src/util/named_accessors.mixin.js +++ b/src/util/named_accessors.mixin.js @@ -1,43 +1,43 @@ - /** +/** * Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array * @static * @memberOf fabric.util * @param {Object} klass "Class" to create accessors for */ - fabric.util.createAccessors = function(klass) { - var proto = klass.prototype, i, propName, - capitalizedPropName, setterName, getterName; - - for (i = proto.stateProperties.length; i--; ) { - - propName = proto.stateProperties[i]; - capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1); - setterName = 'set' + capitalizedPropName; - getterName = 'get' + capitalizedPropName; - - // using `new Function` for better introspection - if (!proto[getterName]) { - proto[getterName] = (function(property) { - return new Function('return this.get("' + property + '")'); - })(propName); - } - if (!proto[setterName]) { - proto[setterName] = (function(property) { - return new Function('value', 'return this.set("' + property + '", value)'); - })(propName); - } +fabric.util.createAccessors = function(klass) { + var proto = klass.prototype, i, propName, + capitalizedPropName, setterName, getterName; + + for (i = proto.stateProperties.length; i--; ) { + + propName = proto.stateProperties[i]; + capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1); + setterName = 'set' + capitalizedPropName; + getterName = 'get' + capitalizedPropName; + + // using `new Function` for better introspection + if (!proto[getterName]) { + proto[getterName] = (function(property) { + return new Function('return this.get("' + property + '")'); + })(propName); + } + if (!proto[setterName]) { + proto[setterName] = (function(property) { + return new Function('value', 'return this.set("' + property + '", value)'); + })(propName); } - }; + } +}; - /** @lends fabric.Text.Prototype */ - /** +/** @lends fabric.Text.Prototype */ +/** * Retrieves object's fontSize * @method getFontSize * @memberOf fabric.Text.prototype * @return {String} Font size (in pixels) */ - /** +/** * Sets object's fontSize * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -48,14 +48,14 @@ * @chainable */ - /** +/** * Retrieves object's fontWeight * @method getFontWeight * @memberOf fabric.Text.prototype * @return {(String|Number)} Font weight */ - /** +/** * Sets object's fontWeight * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -66,14 +66,14 @@ * @chainable */ - /** +/** * Retrieves object's fontFamily * @method getFontFamily * @memberOf fabric.Text.prototype * @return {String} Font family */ - /** +/** * Sets object's fontFamily * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -84,14 +84,14 @@ * @chainable */ - /** +/** * Retrieves object's text * @method getText * @memberOf fabric.Text.prototype * @return {String} text */ - /** +/** * Sets object's text * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -102,14 +102,14 @@ * @chainable */ - /** +/** * Retrieves object's underline * @method getUnderline * @memberOf fabric.Text.prototype * @return {Boolean} underline enabled or disabled */ - /** +/** * Sets object's underline * @method setUnderline * @memberOf fabric.Text.prototype @@ -118,14 +118,14 @@ * @chainable */ - /** +/** * Retrieves object's fontStyle * @method getFontStyle * @memberOf fabric.Text.prototype * @return {String} Font style */ - /** +/** * Sets object's fontStyle * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -136,14 +136,14 @@ * @chainable */ - /** +/** * Retrieves object's lineHeight * @method getLineHeight * @memberOf fabric.Text.prototype * @return {Number} Line height */ - /** +/** * Sets object's lineHeight * @method setLineHeight * @memberOf fabric.Text.prototype @@ -152,14 +152,14 @@ * @chainable */ - /** +/** * Retrieves object's textAlign * @method getTextAlign * @memberOf fabric.Text.prototype * @return {String} Text alignment */ - /** +/** * Sets object's textAlign * @method setTextAlign * @memberOf fabric.Text.prototype @@ -168,14 +168,14 @@ * @chainable */ - /** +/** * Retrieves object's textBackgroundColor * @method getTextBackgroundColor * @memberOf fabric.Text.prototype * @return {String} Text background color */ - /** +/** * Sets object's textBackgroundColor * @method setTextBackgroundColor * @memberOf fabric.Text.prototype @@ -184,15 +184,15 @@ * @chainable */ - /** @lends fabric.Object.Prototype */ - /** +/** @lends fabric.Object.Prototype */ +/** * Retrieves object's {@link fabric.Object#transformMatrix|transformMatrix} * @method getTransformMatrix * @memberOf fabric.Object.prototype * @return {Array} transformMatrix */ - /** +/** * Sets object's {@link fabric.Object#transformMatrix|transformMatrix} * @method setTransformMatrix * @memberOf fabric.Object.prototype @@ -201,14 +201,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#visible|visible} state * @method getVisible * @memberOf fabric.Object.prototype * @return {Boolean} True if visible */ - /** +/** * Sets object's {@link fabric.Object#visible|visible} state * @method setVisible * @memberOf fabric.Object.prototype @@ -217,21 +217,21 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#shadow|shadow} * @method getShadow * @memberOf fabric.Object.prototype * @return {Object} Shadow instance */ - /** +/** * Retrieves object's {@link fabric.Object#stroke|stroke} * @method getStroke * @memberOf fabric.Object.prototype * @return {String} stroke value */ - /** +/** * Sets object's {@link fabric.Object#stroke|stroke} * @method setStroke * @memberOf fabric.Object.prototype @@ -240,14 +240,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#strokeWidth|strokeWidth} * @method getStrokeWidth * @memberOf fabric.Object.prototype * @return {Number} strokeWidth value */ - /** +/** * Sets object's {@link fabric.Object#strokeWidth|strokeWidth} * @method setStrokeWidth * @memberOf fabric.Object.prototype @@ -256,14 +256,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#originX|originX} * @method getOriginX * @memberOf fabric.Object.prototype * @return {String} originX value */ - /** +/** * Sets object's {@link fabric.Object#originX|originX} * @method setOriginX * @memberOf fabric.Object.prototype @@ -272,14 +272,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#originY|originY} * @method getOriginY * @memberOf fabric.Object.prototype * @return {String} originY value */ - /** +/** * Sets object's {@link fabric.Object#originY|originY} * @method setOriginY * @memberOf fabric.Object.prototype @@ -288,14 +288,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#fill|fill} * @method getFill * @memberOf fabric.Object.prototype * @return {String} Fill value */ - /** +/** * Sets object's {@link fabric.Object#fill|fill} * @method setFill * @memberOf fabric.Object.prototype @@ -304,14 +304,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#opacity|opacity} * @method getOpacity * @memberOf fabric.Object.prototype * @return {Number} Opacity value (0-1) */ - /** +/** * Sets object's {@link fabric.Object#opacity|opacity} * @method setOpacity * @memberOf fabric.Object.prototype @@ -320,21 +320,21 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#angle|angle} (in degrees) * @method getAngle * @memberOf fabric.Object.prototype * @return {Number} */ - /** +/** * Retrieves object's {@link fabric.Object#top|top position} * @method getTop * @memberOf fabric.Object.prototype * @return {Number} Top value (in pixels) */ - /** +/** * Sets object's {@link fabric.Object#top|top position} * @method setTop * @memberOf fabric.Object.prototype @@ -343,14 +343,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#left|left position} * @method getLeft * @memberOf fabric.Object.prototype * @return {Number} Left value (in pixels) */ - /** +/** * Sets object's {@link fabric.Object#left|left position} * @method setLeft * @memberOf fabric.Object.prototype @@ -359,14 +359,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#scaleX|scaleX} value * @method getScaleX * @memberOf fabric.Object.prototype * @return {Number} scaleX value */ - /** +/** * Sets object's {@link fabric.Object#scaleX|scaleX} value * @method setScaleX * @memberOf fabric.Object.prototype @@ -375,14 +375,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#scaleY|scaleY} value * @method getScaleY * @memberOf fabric.Object.prototype * @return {Number} scaleY value */ - /** +/** * Sets object's {@link fabric.Object#scaleY|scaleY} value * @method setScaleY * @memberOf fabric.Object.prototype @@ -391,14 +391,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#flipX|flipX} value * @method getFlipX * @memberOf fabric.Object.prototype * @return {Boolean} flipX value */ - /** +/** * Sets object's {@link fabric.Object#flipX|flipX} value * @method setFlipX * @memberOf fabric.Object.prototype @@ -407,14 +407,14 @@ * @chainable */ - /** +/** * Retrieves object's {@link fabric.Object#flipY|flipY} value * @method getFlipY * @memberOf fabric.Object.prototype * @return {Boolean} flipY value */ - /** +/** * Sets object's {@link fabric.Object#flipY|flipY} value * @method setFlipY * @memberOf fabric.Object.prototype diff --git a/src/util/path.js b/src/util/path.js index cddd0ff85ef..d036438bdcb 100644 --- a/src/util/path.js +++ b/src/util/path.js @@ -1,112 +1,112 @@ - var _join = Array.prototype.join, - commandLengths = { - m: 2, - l: 2, - h: 1, - v: 1, - c: 6, - s: 4, - q: 4, - t: 2, - a: 7 - }, - repeatedCommands = { - m: 'l', - M: 'L' - }; - function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { - var costh2 = fabric.util.cos(th2), - sinth2 = fabric.util.sin(th2), - costh3 = fabric.util.cos(th3), - sinth3 = fabric.util.sin(th3), - toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, - toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, - cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), - cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), - cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), - cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); - - return ['C', - cp1X, cp1Y, - cp2X, cp2Y, - toX, toY - ]; - } - - /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp +var _join = Array.prototype.join, + commandLengths = { + m: 2, + l: 2, + h: 1, + v: 1, + c: 6, + s: 4, + q: 4, + t: 2, + a: 7 + }, + repeatedCommands = { + m: 'l', + M: 'L' + }; +function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { + var costh2 = fabric.util.cos(th2), + sinth2 = fabric.util.sin(th2), + costh3 = fabric.util.cos(th3), + sinth3 = fabric.util.sin(th3), + toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, + toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, + cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), + cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), + cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), + cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); + + return ['C', + cp1X, cp1Y, + cp2X, cp2Y, + toX, toY + ]; +} + +/* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here * http://mozilla.org/MPL/2.0/ */ - function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { - var PI = Math.PI, th = rotateX * PI / 180, - sinTh = fabric.util.sin(th), - cosTh = fabric.util.cos(th), - fromX = 0, fromY = 0; - - rx = Math.abs(rx); - ry = Math.abs(ry); - - var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, - py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, - rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, - pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, - root = 0; - - if (pl < 0) { - var s = Math.sqrt(1 - pl / (rx2 * ry2)); - rx *= s; - ry *= s; - } - else { - root = (large === sweep ? -1.0 : 1.0) * +function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { + var PI = Math.PI, th = rotateX * PI / 180, + sinTh = fabric.util.sin(th), + cosTh = fabric.util.cos(th), + fromX = 0, fromY = 0; + + rx = Math.abs(rx); + ry = Math.abs(ry); + + var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, + py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, + rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, + pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, + root = 0; + + if (pl < 0) { + var s = Math.sqrt(1 - pl / (rx2 * ry2)); + rx *= s; + ry *= s; + } + else { + root = (large === sweep ? -1.0 : 1.0) * Math.sqrt( pl / (rx2 * py2 + ry2 * px2)); - } + } - var cx = root * rx * py / ry, - cy = -root * ry * px / rx, - cx1 = cosTh * cx - sinTh * cy + toX * 0.5, - cy1 = sinTh * cx + cosTh * cy + toY * 0.5, - mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), - dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); + var cx = root * rx * py / ry, + cy = -root * ry * px / rx, + cx1 = cosTh * cx - sinTh * cy + toX * 0.5, + cy1 = sinTh * cx + cosTh * cy + toY * 0.5, + mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), + dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); - if (sweep === 0 && dtheta > 0) { - dtheta -= 2 * PI; - } - else if (sweep === 1 && dtheta < 0) { - dtheta += 2 * PI; - } + if (sweep === 0 && dtheta > 0) { + dtheta -= 2 * PI; + } + else if (sweep === 1 && dtheta < 0) { + dtheta += 2 * PI; + } - // Convert into cubic bezier segments <= 90deg - var segments = Math.ceil(Math.abs(dtheta / PI * 2)), - result = [], mDelta = dtheta / segments, - mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), - th3 = mTheta + mDelta; - - for (var i = 0; i < segments; i++) { - result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); - fromX = result[i][5]; - fromY = result[i][6]; - mTheta = th3; - th3 += mDelta; - } - return result; + // Convert into cubic bezier segments <= 90deg + var segments = Math.ceil(Math.abs(dtheta / PI * 2)), + result = [], mDelta = dtheta / segments, + mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), + th3 = mTheta + mDelta; + + for (var i = 0; i < segments; i++) { + result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); + fromX = result[i][5]; + fromY = result[i][6]; + mTheta = th3; + th3 += mDelta; } + return result; +} - /* +/* * Private */ - function calcVectorAngle(ux, uy, vx, vy) { - var ta = Math.atan2(uy, ux), - tb = Math.atan2(vy, vx); - if (tb >= ta) { - return tb - ta; - } - else { - return 2 * Math.PI - (ta - tb); - } +function calcVectorAngle(ux, uy, vx, vy) { + var ta = Math.atan2(uy, ux), + tb = Math.atan2(vy, vx); + if (tb >= ta) { + return tb - ta; + } + else { + return 2 * Math.PI - (ta - tb); } +} - /** +/** * Calculate bounding box of a beziercurve * @param {Number} x0 starting point * @param {Number} y0 @@ -117,291 +117,291 @@ * @param {Number} x3 end of bezier * @param {Number} y3 */ - // taken from http://jsbin.com/ivomiq/56/edit no credits available for that. - // TODO: can we normalize this with the starting points set at 0 and then translated the bbox? - function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { - var argsString; - if (fabric.cachesBoundsOfCurve) { - argsString = _join.call(arguments); - if (fabric.boundsOfCurveCache[argsString]) { - return fabric.boundsOfCurveCache[argsString]; - } +// taken from http://jsbin.com/ivomiq/56/edit no credits available for that. +// TODO: can we normalize this with the starting points set at 0 and then translated the bbox? +function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { + var argsString; + if (fabric.cachesBoundsOfCurve) { + argsString = _join.call(arguments); + if (fabric.boundsOfCurveCache[argsString]) { + return fabric.boundsOfCurveCache[argsString]; } + } - var sqrt = Math.sqrt, - min = Math.min, max = Math.max, - abs = Math.abs, tvalues = [], - bounds = [[], []], - a, b, c, t, t1, t2, b2ac, sqrtb2ac; - - b = 6 * x0 - 12 * x1 + 6 * x2; - a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; - c = 3 * x1 - 3 * x0; - - for (var i = 0; i < 2; ++i) { - if (i > 0) { - b = 6 * y0 - 12 * y1 + 6 * y2; - a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; - c = 3 * y1 - 3 * y0; - } + var sqrt = Math.sqrt, + min = Math.min, max = Math.max, + abs = Math.abs, tvalues = [], + bounds = [[], []], + a, b, c, t, t1, t2, b2ac, sqrtb2ac; + + b = 6 * x0 - 12 * x1 + 6 * x2; + a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; + c = 3 * x1 - 3 * x0; + + for (var i = 0; i < 2; ++i) { + if (i > 0) { + b = 6 * y0 - 12 * y1 + 6 * y2; + a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; + c = 3 * y1 - 3 * y0; + } - if (abs(a) < 1e-12) { - if (abs(b) < 1e-12) { - continue; - } - t = -c / b; - if (0 < t && t < 1) { - tvalues.push(t); - } - continue; - } - b2ac = b * b - 4 * c * a; - if (b2ac < 0) { + if (abs(a) < 1e-12) { + if (abs(b) < 1e-12) { continue; } - sqrtb2ac = sqrt(b2ac); - t1 = (-b + sqrtb2ac) / (2 * a); - if (0 < t1 && t1 < 1) { - tvalues.push(t1); - } - t2 = (-b - sqrtb2ac) / (2 * a); - if (0 < t2 && t2 < 1) { - tvalues.push(t2); + t = -c / b; + if (0 < t && t < 1) { + tvalues.push(t); } + continue; } + b2ac = b * b - 4 * c * a; + if (b2ac < 0) { + continue; + } + sqrtb2ac = sqrt(b2ac); + t1 = (-b + sqrtb2ac) / (2 * a); + if (0 < t1 && t1 < 1) { + tvalues.push(t1); + } + t2 = (-b - sqrtb2ac) / (2 * a); + if (0 < t2 && t2 < 1) { + tvalues.push(t2); + } + } - var x, y, j = tvalues.length, jlen = j, mt; - while (j--) { - t = tvalues[j]; - mt = 1 - t; - x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); - bounds[0][j] = x; + var x, y, j = tvalues.length, jlen = j, mt; + while (j--) { + t = tvalues[j]; + mt = 1 - t; + x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); + bounds[0][j] = x; - y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); - bounds[1][j] = y; - } + y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); + bounds[1][j] = y; + } - bounds[0][jlen] = x0; - bounds[1][jlen] = y0; - bounds[0][jlen + 1] = x3; - bounds[1][jlen + 1] = y3; - var result = [ - { - x: min.apply(null, bounds[0]), - y: min.apply(null, bounds[1]) - }, - { - x: max.apply(null, bounds[0]), - y: max.apply(null, bounds[1]) - } - ]; - if (fabric.cachesBoundsOfCurve) { - fabric.boundsOfCurveCache[argsString] = result; + bounds[0][jlen] = x0; + bounds[1][jlen] = y0; + bounds[0][jlen + 1] = x3; + bounds[1][jlen + 1] = y3; + var result = [ + { + x: min.apply(null, bounds[0]), + y: min.apply(null, bounds[1]) + }, + { + x: max.apply(null, bounds[0]), + y: max.apply(null, bounds[1]) } - return result; + ]; + if (fabric.cachesBoundsOfCurve) { + fabric.boundsOfCurveCache[argsString] = result; } + return result; +} - /** +/** * Converts arc to a bunch of bezier curves * @param {Number} fx starting point x * @param {Number} fy starting point y * @param {Array} coords Arc command */ - function fromArcToBeziers(fx, fy, coords) { - var rx = coords[1], - ry = coords[2], - rot = coords[3], - large = coords[4], - sweep = coords[5], - tx = coords[6], - ty = coords[7], - segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); - - for (var i = 0, len = segsNorm.length; i < len; i++) { - segsNorm[i][1] += fx; - segsNorm[i][2] += fy; - segsNorm[i][3] += fx; - segsNorm[i][4] += fy; - segsNorm[i][5] += fx; - segsNorm[i][6] += fy; - } - return segsNorm; - }; +function fromArcToBeziers(fx, fy, coords) { + var rx = coords[1], + ry = coords[2], + rot = coords[3], + large = coords[4], + sweep = coords[5], + tx = coords[6], + ty = coords[7], + segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); + + for (var i = 0, len = segsNorm.length; i < len; i++) { + segsNorm[i][1] += fx; + segsNorm[i][2] += fy; + segsNorm[i][3] += fx; + segsNorm[i][4] += fy; + segsNorm[i][5] += fx; + segsNorm[i][6] += fy; + } + return segsNorm; +}; - /** +/** * This function take a parsed SVG path and make it simpler for fabricJS logic. * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute ) * S converted in C, T converted in Q, A converted in C. * @param {Array} path the array of commands of a parsed svg path for fabric.Path * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path */ - function makePathSimpler(path) { - // x and y represent the last point of the path. the previous command point. - // we add them to each relative command to make it an absolute comment. - // we also swap the v V h H with L, because are easier to transform. - var x = 0, y = 0, len = path.length, - // x1 and y1 represent the last point of the subpath. the subpath is started with - // m or M command. When a z or Z command is drawn, x and y need to be resetted to - // the last x1 and y1. - x1 = 0, y1 = 0, current, i, converted, - // previous will host the letter of the previous command, to handle S and T. - // controlX and controlY will host the previous reflected control point - destinationPath = [], previous, controlX, controlY; - for (i = 0; i < len; ++i) { - converted = false; - current = path[i].slice(0); - switch (current[0]) { // first letter - case 'l': // lineto, relative - current[0] = 'L'; - current[1] += x; - current[2] += y; - // falls through - case 'L': - x = current[1]; - y = current[2]; - break; - case 'h': // horizontal lineto, relative - current[1] += x; - // falls through - case 'H': - current[0] = 'L'; - current[2] = y; - x = current[1]; - break; - case 'v': // vertical lineto, relative - current[1] += y; - // falls through - case 'V': - current[0] = 'L'; - y = current[1]; - current[1] = x; - current[2] = y; - break; - case 'm': // moveTo, relative - current[0] = 'M'; - current[1] += x; - current[2] += y; - // falls through - case 'M': - x = current[1]; - y = current[2]; - x1 = current[1]; - y1 = current[2]; - break; - case 'c': // bezierCurveTo, relative - current[0] = 'C'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - current[5] += x; - current[6] += y; - // falls through - case 'C': - controlX = current[3]; - controlY = current[4]; - x = current[5]; - y = current[6]; - break; - case 's': // shorthand cubic bezierCurveTo, relative - current[0] = 'S'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'S': - // would be sScC but since we are swapping sSc for C, we check just that. - if (previous === 'C') { - // calculate reflection of previous control points - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a C, c, S, or s, - // the control point is coincident with the current point - controlX = x; - controlY = y; - } - x = current[3]; - y = current[4]; - current[0] = 'C'; - current[5] = current[3]; - current[6] = current[4]; - current[3] = current[1]; - current[4] = current[2]; - current[1] = controlX; - current[2] = controlY; - // current[3] and current[4] are NOW the second control point. - // we keep it for the next reflection. - controlX = current[3]; - controlY = current[4]; - break; - case 'q': // quadraticCurveTo, relative - current[0] = 'Q'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'Q': - controlX = current[1]; - controlY = current[2]; - x = current[3]; - y = current[4]; - break; - case 't': // shorthand quadraticCurveTo, relative - current[0] = 'T'; - current[1] += x; - current[2] += y; - // falls through - case 'T': - if (previous === 'Q') { - // calculate reflection of previous control point - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a Q, q, T or t, - // assume the control point is coincident with the current point - controlX = x; - controlY = y; - } - current[0] = 'Q'; - x = current[1]; - y = current[2]; - current[1] = controlX; - current[2] = controlY; - current[3] = x; - current[4] = y; - break; - case 'a': - current[0] = 'A'; - current[6] += x; - current[7] += y; - // falls through - case 'A': - converted = true; - destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); - x = current[6]; - y = current[7]; - break; - case 'z': - case 'Z': - x = x1; - y = y1; - break; - default: - } - if (!converted) { - destinationPath.push(current); - } - previous = current[0]; +function makePathSimpler(path) { + // x and y represent the last point of the path. the previous command point. + // we add them to each relative command to make it an absolute comment. + // we also swap the v V h H with L, because are easier to transform. + var x = 0, y = 0, len = path.length, + // x1 and y1 represent the last point of the subpath. the subpath is started with + // m or M command. When a z or Z command is drawn, x and y need to be resetted to + // the last x1 and y1. + x1 = 0, y1 = 0, current, i, converted, + // previous will host the letter of the previous command, to handle S and T. + // controlX and controlY will host the previous reflected control point + destinationPath = [], previous, controlX, controlY; + for (i = 0; i < len; ++i) { + converted = false; + current = path[i].slice(0); + switch (current[0]) { // first letter + case 'l': // lineto, relative + current[0] = 'L'; + current[1] += x; + current[2] += y; + // falls through + case 'L': + x = current[1]; + y = current[2]; + break; + case 'h': // horizontal lineto, relative + current[1] += x; + // falls through + case 'H': + current[0] = 'L'; + current[2] = y; + x = current[1]; + break; + case 'v': // vertical lineto, relative + current[1] += y; + // falls through + case 'V': + current[0] = 'L'; + y = current[1]; + current[1] = x; + current[2] = y; + break; + case 'm': // moveTo, relative + current[0] = 'M'; + current[1] += x; + current[2] += y; + // falls through + case 'M': + x = current[1]; + y = current[2]; + x1 = current[1]; + y1 = current[2]; + break; + case 'c': // bezierCurveTo, relative + current[0] = 'C'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + current[5] += x; + current[6] += y; + // falls through + case 'C': + controlX = current[3]; + controlY = current[4]; + x = current[5]; + y = current[6]; + break; + case 's': // shorthand cubic bezierCurveTo, relative + current[0] = 'S'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'S': + // would be sScC but since we are swapping sSc for C, we check just that. + if (previous === 'C') { + // calculate reflection of previous control points + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a C, c, S, or s, + // the control point is coincident with the current point + controlX = x; + controlY = y; + } + x = current[3]; + y = current[4]; + current[0] = 'C'; + current[5] = current[3]; + current[6] = current[4]; + current[3] = current[1]; + current[4] = current[2]; + current[1] = controlX; + current[2] = controlY; + // current[3] and current[4] are NOW the second control point. + // we keep it for the next reflection. + controlX = current[3]; + controlY = current[4]; + break; + case 'q': // quadraticCurveTo, relative + current[0] = 'Q'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'Q': + controlX = current[1]; + controlY = current[2]; + x = current[3]; + y = current[4]; + break; + case 't': // shorthand quadraticCurveTo, relative + current[0] = 'T'; + current[1] += x; + current[2] += y; + // falls through + case 'T': + if (previous === 'Q') { + // calculate reflection of previous control point + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a Q, q, T or t, + // assume the control point is coincident with the current point + controlX = x; + controlY = y; + } + current[0] = 'Q'; + x = current[1]; + y = current[2]; + current[1] = controlX; + current[2] = controlY; + current[3] = x; + current[4] = y; + break; + case 'a': + current[0] = 'A'; + current[6] += x; + current[7] += y; + // falls through + case 'A': + converted = true; + destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); + x = current[6]; + y = current[7]; + break; + case 'z': + case 'Z': + x = x1; + y = y1; + break; + default: } - return destinationPath; - }; + if (!converted) { + destinationPath.push(current); + } + previous = current[0]; + } + return destinationPath; +}; - /** +/** * Calc length from point x1,y1 to x2,y2 * @param {Number} x1 starting point x * @param {Number} y1 starting point y @@ -409,91 +409,91 @@ * @param {Number} y2 starting point y * @return {Number} length of segment */ - function calcLineLength(x1, y1, x2, y2) { - return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); - } - - // functions for the Cubic beizer - // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 - function CB1(t) { - return t * t * t; - } - function CB2(t) { - return 3 * t * t * (1 - t); - } - function CB3(t) { - return 3 * t * (1 - t) * (1 - t); - } - function CB4(t) { - return (1 - t) * (1 - t) * (1 - t); - } - - function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function(pct) { - var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); - return { - x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, - y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 - }; +function calcLineLength(x1, y1, x2, y2) { + return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); +} + +// functions for the Cubic beizer +// taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 +function CB1(t) { + return t * t * t; +} +function CB2(t) { + return 3 * t * t * (1 - t); +} +function CB3(t) { + return 3 * t * (1 - t) * (1 - t); +} +function CB4(t) { + return (1 - t) * (1 - t) * (1 - t); +} + +function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function(pct) { + var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); + return { + x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, + y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 }; - } + }; +} - function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + +function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + (3 * pct * pct * (p4x - p3x)), - tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + + tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + (3 * pct * pct * (p4y - p3y)); - return Math.atan2(tangentY, tangentX); - }; - } - - function QB1(t) { - return t * t; - } - - function QB2(t) { - return 2 * t * (1 - t); - } - - function QB3(t) { - return (1 - t) * (1 - t); - } - - function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function(pct) { - var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); - return { - x: p3x * c1 + p2x * c2 + p1x * c3, - y: p3y * c1 + p2y * c2 + p1y * c3 - }; - }; - } - - function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), - tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); - return Math.atan2(tangentY, tangentX); + return Math.atan2(tangentY, tangentX); + }; +} + +function QB1(t) { + return t * t; +} + +function QB2(t) { + return 2 * t * (1 - t); +} + +function QB3(t) { + return (1 - t) * (1 - t); +} + +function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function(pct) { + var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); + return { + x: p3x * c1 + p2x * c2 + p1x * c3, + y: p3y * c1 + p2y * c2 + p1y * c3 }; - } + }; +} + +function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), + tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); + return Math.atan2(tangentY, tangentX); + }; +} - // this will run over a path segment ( a cubic or quadratic segment) and approximate it - // with 100 segemnts. This will good enough to calculate the length of the curve - function pathIterator(iterator, x1, y1) { - var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; - for (perc = 1; perc <= 100; perc += 1) { - p = iterator(perc / 100); - tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); - tempP = p; - } - return tmpLen; +// this will run over a path segment ( a cubic or quadratic segment) and approximate it +// with 100 segemnts. This will good enough to calculate the length of the curve +function pathIterator(iterator, x1, y1) { + var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; + for (perc = 1; perc <= 100; perc += 1) { + p = iterator(perc / 100); + tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); + tempP = p; } + return tmpLen; +} - /** +/** * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1 * that correspond to that pixels run over the path. * The percentage will be then used to find the correct point on the canvas for the path. @@ -501,166 +501,166 @@ * @param {Number} distance from starting point, in pixels. * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point; */ - function findPercentageForDistance(segInfo, distance) { - var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, - p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; - // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 - // the path - while (tmpLen < distance && nextStep > 0.0001) { - p = iterator(perc); - lastPerc = perc; - nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); - // compare tmpLen each cycle with distance, decide next perc to test. - if ((nextLen + tmpLen) > distance) { - // we discard this step and we make smaller steps. - perc -= nextStep; - nextStep /= 2; - } - else { - tempP = p; - perc += nextStep; - tmpLen += nextLen; - } +function findPercentageForDistance(segInfo, distance) { + var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, + p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; + // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 + // the path + while (tmpLen < distance && nextStep > 0.0001) { + p = iterator(perc); + lastPerc = perc; + nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); + // compare tmpLen each cycle with distance, decide next perc to test. + if ((nextLen + tmpLen) > distance) { + // we discard this step and we make smaller steps. + perc -= nextStep; + nextStep /= 2; + } + else { + tempP = p; + perc += nextStep; + tmpLen += nextLen; } - p.angle = angleFinder(lastPerc); - return p; } + p.angle = angleFinder(lastPerc); + return p; +} - /** +/** * Run over a parsed and simplifed path and extract some informations. * informations are length of each command and starting point * @param {Array} path fabricJS parsed path commands * @return {Array} path commands informations */ - function getPathSegmentsInfo(path) { - var totalLength = 0, len = path.length, current, - //x2 and y2 are the coords of segment start - //x1 and y1 are the coords of the current point - x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; - for (var i = 0; i < len; i++) { - current = path[i]; - tempInfo = { - x: x1, - y: y1, - command: current[0], - }; - switch (current[0]) { //first letter - case 'M': - tempInfo.length = 0; - x2 = x1 = current[1]; - y2 = y1 = current[2]; - break; - case 'L': - tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); - x1 = current[1]; - y1 = current[2]; - break; - case 'C': - iterator = getPointOnCubicBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - angleFinder = getTangentCubicIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[5]; - y1 = current[6]; - break; - case 'Q': - iterator = getPointOnQuadraticBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - angleFinder = getTangentQuadraticIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[3]; - y1 = current[4]; - break; - case 'Z': - case 'z': - // we add those in order to ease calculations later - tempInfo.destX = x2; - tempInfo.destY = y2; - tempInfo.length = calcLineLength(x1, y1, x2, y2); - x1 = x2; - y1 = y2; - break; - } - totalLength += tempInfo.length; - info.push(tempInfo); - } - info.push({ length: totalLength, x: x1, y: y1 }); - return info; - } - - function getPointOnPath(path, distance, infos) { - if (!infos) { - infos = getPathSegmentsInfo(path); - } - var i = 0; - while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { - distance -= infos[i].length; - i++; - } - // var distance = infos[infos.length - 1] * perc; - var segInfo = infos[i], segPercent = distance / segInfo.length, - command = segInfo.command, segment = path[i], info; - - switch (command) { +function getPathSegmentsInfo(path) { + var totalLength = 0, len = path.length, current, + //x2 and y2 are the coords of segment start + //x1 and y1 are the coords of the current point + x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; + for (var i = 0; i < len; i++) { + current = path[i]; + tempInfo = { + x: x1, + y: y1, + command: current[0], + }; + switch (current[0]) { //first letter case 'M': - return { x: segInfo.x, y: segInfo.y, angle: 0 }; - case 'Z': - case 'z': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segInfo.destX, segInfo.destY), - segPercent - ); - info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); - return info; + tempInfo.length = 0; + x2 = x1 = current[1]; + y2 = y1 = current[2]; + break; case 'L': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segment[1], segment[2]), - segPercent - ); - info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); - return info; + tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); + x1 = current[1]; + y1 = current[2]; + break; case 'C': - return findPercentageForDistance(segInfo, distance); + iterator = getPointOnCubicBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + angleFinder = getTangentCubicIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[5]; + y1 = current[6]; + break; case 'Q': - return findPercentageForDistance(segInfo, distance); + iterator = getPointOnQuadraticBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + angleFinder = getTangentQuadraticIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[3]; + y1 = current[4]; + break; + case 'Z': + case 'z': + // we add those in order to ease calculations later + tempInfo.destX = x2; + tempInfo.destY = y2; + tempInfo.length = calcLineLength(x1, y1, x2, y2); + x1 = x2; + y1 = y2; + break; } + totalLength += tempInfo.length; + info.push(tempInfo); } + info.push({ length: totalLength, x: x1, y: y1 }); + return info; +} - /** +function getPointOnPath(path, distance, infos) { + if (!infos) { + infos = getPathSegmentsInfo(path); + } + var i = 0; + while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { + distance -= infos[i].length; + i++; + } + // var distance = infos[infos.length - 1] * perc; + var segInfo = infos[i], segPercent = distance / segInfo.length, + command = segInfo.command, segment = path[i], info; + + switch (command) { + case 'M': + return { x: segInfo.x, y: segInfo.y, angle: 0 }; + case 'Z': + case 'z': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segInfo.destX, segInfo.destY), + segPercent + ); + info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); + return info; + case 'L': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segment[1], segment[2]), + segPercent + ); + info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); + return info; + case 'C': + return findPercentageForDistance(segInfo, distance); + case 'Q': + return findPercentageForDistance(segInfo, distance); + } +} + +/** * * @param {string} pathString * @return {(string|number)[][]} An array of SVG path commands @@ -672,114 +672,114 @@ * ]; * */ - function parsePath(pathString) { - var result = [], - coords = [], - currentPath, - parsed, - re = fabric.rePathCommand, - rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', - rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, - rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', - rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + +function parsePath(pathString) { + var result = [], + coords = [], + currentPath, + parsed, + re = fabric.rePathCommand, + rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', + rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, + rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', + rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + rNumberCommaWsp + '?(' + rNumber + ')', - regArcArgumentSequence = new RegExp(rArcSeq, 'g'), - match, - coordsStr, - // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) - path; - if (!pathString || !pathString.match) { - return result; - } - path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); + regArcArgumentSequence = new RegExp(rArcSeq, 'g'), + match, + coordsStr, + // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) + path; + if (!pathString || !pathString.match) { + return result; + } + path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); - for (var i = 0, coordsParsed, len = path.length; i < len; i++) { - currentPath = path[i]; + for (var i = 0, coordsParsed, len = path.length; i < len; i++) { + currentPath = path[i]; - coordsStr = currentPath.slice(1).trim(); - coords.length = 0; + coordsStr = currentPath.slice(1).trim(); + coords.length = 0; - var command = currentPath.charAt(0); - coordsParsed = [command]; + var command = currentPath.charAt(0); + coordsParsed = [command]; - if (command.toLowerCase() === 'a') { - // arcs have special flags that apparently don't require spaces so handle special - for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { - for (var j = 1; j < args.length; j++) { - coords.push(args[j]); - } + if (command.toLowerCase() === 'a') { + // arcs have special flags that apparently don't require spaces so handle special + for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { + for (var j = 1; j < args.length; j++) { + coords.push(args[j]); } } - else { - while ((match = re.exec(coordsStr))) { - coords.push(match[0]); - } + } + else { + while ((match = re.exec(coordsStr))) { + coords.push(match[0]); } + } - for (var j = 0, jlen = coords.length; j < jlen; j++) { - parsed = parseFloat(coords[j]); - if (!isNaN(parsed)) { - coordsParsed.push(parsed); - } + for (var j = 0, jlen = coords.length; j < jlen; j++) { + parsed = parseFloat(coords[j]); + if (!isNaN(parsed)) { + coordsParsed.push(parsed); } + } - var commandLength = commandLengths[command.toLowerCase()], - repeatedCommand = repeatedCommands[command] || command; + var commandLength = commandLengths[command.toLowerCase()], + repeatedCommand = repeatedCommands[command] || command; - if (coordsParsed.length - 1 > commandLength) { - for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { - result.push([command].concat(coordsParsed.slice(k, k + commandLength))); - command = repeatedCommand; - } - } - else { - result.push(coordsParsed); + if (coordsParsed.length - 1 > commandLength) { + for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { + result.push([command].concat(coordsParsed.slice(k, k + commandLength))); + command = repeatedCommand; } } + else { + result.push(coordsParsed); + } + } - return result; - }; + return result; +}; - /** +/** * * Converts points to a smooth SVG path * @param {{ x: number,y: number }[]} points Array of points * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value. * @return {(string|number)[][]} An array of SVG path commands */ - function getSmoothPathFromPoints(points, correction) { - var path = [], i, - p1 = new fabric.Point(points[0].x, points[0].y), - p2 = new fabric.Point(points[1].x, points[1].y), - len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; - correction = correction || 0; - - if (manyPoints) { - multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; - multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; - } - path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); - for (i = 1; i < len; i++) { - if (!p1.eq(p2)) { - var midPoint = p1.midPointFrom(p2); - // p1 is our bezier control point - // midpoint is our endpoint - // start point is p(i-1) value. - path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); - } - p1 = points[i]; - if ((i + 1) < points.length) { - p2 = points[i + 1]; - } +function getSmoothPathFromPoints(points, correction) { + var path = [], i, + p1 = new fabric.Point(points[0].x, points[0].y), + p2 = new fabric.Point(points[1].x, points[1].y), + len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; + correction = correction || 0; + + if (manyPoints) { + multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; + multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; + } + path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); + for (i = 1; i < len; i++) { + if (!p1.eq(p2)) { + var midPoint = p1.midPointFrom(p2); + // p1 is our bezier control point + // midpoint is our endpoint + // start point is p(i-1) value. + path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); } - if (manyPoints) { - multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; - multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; + p1 = points[i]; + if ((i + 1) < points.length) { + p2 = points[i + 1]; } - path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); - return path; } - /** + if (manyPoints) { + multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; + multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; + } + path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); + return path; +} +/** * Transform a path by transforming each segment. * it has to be a simplified path or it won't work. * WARNING: this depends from pathOffset for correct operation @@ -790,63 +790,63 @@ * @param {Number} pathOffset.y * @returns {Array} the transformed path */ - function transformPath(path, transform, pathOffset) { - if (pathOffset) { - transform = fabric.util.multiplyTransformMatrices( - transform, - [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] - ); - } - return path.map(function(pathSegment) { - var newSegment = pathSegment.slice(0), point = {}; - for (var i = 1; i < pathSegment.length - 1; i += 2) { - point.x = pathSegment[i]; - point.y = pathSegment[i + 1]; - point = fabric.util.transformPoint(point, transform); - newSegment[i] = point.x; - newSegment[i + 1] = point.y; - } - return newSegment; - }); +function transformPath(path, transform, pathOffset) { + if (pathOffset) { + transform = fabric.util.multiplyTransformMatrices( + transform, + [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] + ); } + return path.map(function(pathSegment) { + var newSegment = pathSegment.slice(0), point = {}; + for (var i = 1; i < pathSegment.length - 1; i += 2) { + point.x = pathSegment[i]; + point.y = pathSegment[i + 1]; + point = fabric.util.transformPoint(point, transform); + newSegment[i] = point.x; + newSegment[i + 1] = point.y; + } + return newSegment; + }); +} - /** +/** * Returns an array of path commands to create a regular polygon * @param {number} radius * @param {number} numVertexes * @returns {(string|number)[][]} An array of SVG path commands */ - function getRegularPolygonPath(numVertexes, radius) { - var interiorAngle = Math.PI * 2 / numVertexes; - // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom - // This isn't strictly necessary, but it's how we tend to think of and expect polygons to be drawn - var rotationAdjustment = -Math.PI / 2; - if (numVertexes % 2 === 0) { - rotationAdjustment += interiorAngle / 2; - } - var d = []; - for (var i = 0, rad, coord; i < numVertexes; i++) { - rad = i * interiorAngle + rotationAdjustment; - coord = new fabric.Point(Math.cos(rad), Math.sin(rad)).scalarMultiplyEquals(radius); - d.push([i === 0 ? 'M' : 'L', coord.x, coord.y]); - } - d.push(['Z']); - return d; +function getRegularPolygonPath(numVertexes, radius) { + var interiorAngle = Math.PI * 2 / numVertexes; + // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom + // This isn't strictly necessary, but it's how we tend to think of and expect polygons to be drawn + var rotationAdjustment = -Math.PI / 2; + if (numVertexes % 2 === 0) { + rotationAdjustment += interiorAngle / 2; } + var d = []; + for (var i = 0, rad, coord; i < numVertexes; i++) { + rad = i * interiorAngle + rotationAdjustment; + coord = new fabric.Point(Math.cos(rad), Math.sin(rad)).scalarMultiplyEquals(radius); + d.push([i === 0 ? 'M' : 'L', coord.x, coord.y]); + } + d.push(['Z']); + return d; +} - /** +/** * Join path commands to go back to svg format * @param {Array} pathData fabricJS parsed path commands * @return {String} joined path 'M 0 0 L 20 30' */ - fabric.util.joinPath = function(pathData) { - return pathData.map(function (segment) { return segment.join(' '); }).join(' '); - }; - fabric.util.parsePath = parsePath; - fabric.util.makePathSimpler = makePathSimpler; - fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; - fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; - fabric.util.getBoundsOfCurve = getBoundsOfCurve; - fabric.util.getPointOnPath = getPointOnPath; - fabric.util.transformPath = transformPath; - fabric.util.getRegularPolygonPath = getRegularPolygonPath; +fabric.util.joinPath = function(pathData) { + return pathData.map(function (segment) { return segment.join(' '); }).join(' '); +}; +fabric.util.parsePath = parsePath; +fabric.util.makePathSimpler = makePathSimpler; +fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; +fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; +fabric.util.getBoundsOfCurve = getBoundsOfCurve; +fabric.util.getPointOnPath = getPointOnPath; +fabric.util.transformPath = transformPath; +fabric.util.getRegularPolygonPath = getRegularPolygonPath; From fe9f78519f3c159bb83f4f938cb73b45e4de9b7f Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 18 Jun 2022 22:03:24 +0200 Subject: [PATCH 04/21] a test --- HEADER.js | 10 +- package-lock.json | 6658 +------------------ package.json | 3 + src/mixins/canvas_dataurl_exporter.mixin.js | 200 +- src/mixins/eraser_brush.mixin.js | 1418 ++-- src/shapes/image.class.js | 8 +- 6 files changed, 1029 insertions(+), 7268 deletions(-) diff --git a/HEADER.js b/HEADER.js index abf33ba7a6d..f186c21d3f9 100644 --- a/HEADER.js +++ b/HEADER.js @@ -4,11 +4,7 @@ var fabric = fabric || { version: '5.1.0' }; if (typeof exports !== 'undefined') { exports.fabric = fabric; } -/* _AMD_START_ */ -else if (typeof define === 'function' && define.amd) { - define([], function() { return fabric; }); -} -/* _AMD_END_ */ + if (typeof document !== 'undefined' && typeof window !== 'undefined') { if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) { fabric.document = document; @@ -33,7 +29,7 @@ else { fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper; fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas; fabric.window = virtualWindow; - DOMParser = fabric.window.DOMParser; + global.DOMParser = fabric.window.DOMParser; } /** @@ -201,3 +197,5 @@ fabric.initFilterBackend = function() { return (new fabric.Canvas2dFilterBackend()); } }; + +export { fabric }; diff --git a/package-lock.json b/package-lock.json index d911ff6816a..c991acbf20d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6342 +1,8 @@ { "name": "fabric", "version": "5.1.0", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, - "packages": { - "": { - "name": "fabric", - "version": "5.1.0", - "license": "MIT", - "devDependencies": { - "@types/fs-extra": "^9.0.13", - "@types/lodash": "^4.14.180", - "@types/node": "^17.0.21", - "ansi-escape": "^1.1.0", - "auto-changelog": "^2.3.0", - "chalk": "^2.4.1", - "commander": "^9.1.0", - "deep-object-diff": "^1.1.7", - "eslint": "4.18.x", - "fs-extra": "^10.0.1", - "fuzzy": "^0.1.3", - "inquirer": "^8.2.1", - "inquirer-checkbox-plus-prompt": "^1.0.1", - "moment": "^2.29.1", - "nyc": "^15.1.0", - "pixelmatch": "^4.0.2", - "qunit": "^2.17.2", - "testem": "^3.2.0", - "uglify-js": "^3.15.5" - }, - "engines": { - "node": ">=14.0.0" - }, - "optionalDependencies": { - "canvas": "^2.8.0", - "jsdom": "^19.0.0" - } - }, - "node_modules/@babel/code-frame": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", - "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, - "dependencies": { - "@babel/highlight": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/compat-data": { - "version": "7.16.4", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.4.tgz", - "integrity": "sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==", - "dev": true, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/core": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.7.tgz", - "integrity": "sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-compilation-targets": "^7.16.7", - "@babel/helper-module-transforms": "^7.16.7", - "@babel/helpers": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7", - "convert-source-map": "^1.7.0", - "debug": "^4.1.0", - "gensync": "^1.0.0-beta.2", - "json5": "^2.1.2", - "semver": "^6.3.0", - "source-map": "^0.5.0" - }, - "engines": { - "node": ">=6.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/babel" - } - }, - "node_modules/@babel/core/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/@babel/core/node_modules/source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/@babel/generator": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz", - "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7", - "jsesc": "^2.5.1", - "source-map": "^0.5.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/generator/node_modules/source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/@babel/helper-compilation-targets": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz", - "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==", - "dev": true, - "dependencies": { - "@babel/compat-data": "^7.16.4", - "@babel/helper-validator-option": "^7.16.7", - "browserslist": "^4.17.5", - "semver": "^6.3.0" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0" - } - }, - "node_modules/@babel/helper-compilation-targets/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/@babel/helper-environment-visitor": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz", - "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-function-name": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz", - "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==", - "dev": true, - "dependencies": { - "@babel/helper-get-function-arity": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-get-function-arity": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz", - "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-hoist-variables": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz", - "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-imports": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", - "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-transforms": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz", - "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==", - "dev": true, - "dependencies": { - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-simple-access": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/helper-validator-identifier": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-simple-access": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz", - "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-split-export-declaration": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz", - "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-validator-identifier": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", - "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==", - "dev": true, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-validator-option": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz", - "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==", - "dev": true, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helpers": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz", - "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==", - "dev": true, - "dependencies": { - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz", - "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "chalk": "^2.0.0", - "js-tokens": "^4.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight/node_modules/js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true - }, - "node_modules/@babel/parser": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz", - "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==", - "dev": true, - "bin": { - "parser": "bin/babel-parser.js" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@babel/template": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", - "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/traverse": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz", - "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-function-name": "^7.16.7", - "@babel/helper-hoist-variables": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/types": "^7.16.7", - "debug": "^4.1.0", - "globals": "^11.1.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@istanbuljs/load-nyc-config": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", - "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==", - "dev": true, - "dependencies": { - "camelcase": "^5.3.1", - "find-up": "^4.1.0", - "get-package-type": "^0.1.0", - "js-yaml": "^3.13.1", - "resolve-from": "^5.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", - "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/@istanbuljs/schema": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", - "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/@mapbox/node-pre-gyp": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.8.tgz", - "integrity": "sha512-CMGKi28CF+qlbXh26hDe6NxCd7amqeAzEqnS6IHeO6LoaKyM/n+Xw3HT1COdq8cuioOdlKdqn/hCmqPUOMOywg==", - "optional": true, - "dependencies": { - "detect-libc": "^1.0.3", - "https-proxy-agent": "^5.0.0", - "make-dir": "^3.1.0", - "node-fetch": "^2.6.5", - "nopt": "^5.0.0", - "npmlog": "^5.0.1", - "rimraf": "^3.0.2", - "semver": "^7.3.5", - "tar": "^6.1.11" - }, - "bin": { - "node-pre-gyp": "bin/node-pre-gyp" - } - }, - "node_modules/@tootallnate/once": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", - "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", - "optional": true, - "engines": { - "node": ">= 10" - } - }, - "node_modules/@types/component-emitter": { - "version": "1.2.11", - "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", - "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==", - "dev": true - }, - "node_modules/@types/cookie": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", - "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", - "dev": true - }, - "node_modules/@types/cors": { - "version": "2.8.12", - "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", - "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==", - "dev": true - }, - "node_modules/@types/fs-extra": { - "version": "9.0.13", - "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz", - "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==", - "dev": true, - "dependencies": { - "@types/node": "*" - } - }, - "node_modules/@types/lodash": { - "version": "4.14.180", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.180.tgz", - "integrity": "sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==", - "dev": true - }, - "node_modules/@types/node": { - "version": "17.0.21", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz", - "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==", - "dev": true - }, - "node_modules/@xmldom/xmldom": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz", - "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==", - "dev": true, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/abab": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", - "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==", - "optional": true - }, - "node_modules/abbrev": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", - "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", - "optional": true - }, - "node_modules/accepts": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", - "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", - "dev": true, - "dependencies": { - "mime-types": "~2.1.24", - "negotiator": "0.6.2" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/acorn": { - "version": "8.7.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz", - "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==", - "optional": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-globals": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz", - "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==", - "optional": true, - "dependencies": { - "acorn": "^7.1.1", - "acorn-walk": "^7.1.1" - } - }, - "node_modules/acorn-globals/node_modules/acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", - "optional": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-jsx": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz", - "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=", - "dev": true, - "dependencies": { - "acorn": "^3.0.4" - } - }, - "node_modules/acorn-jsx/node_modules/acorn": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", - "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-walk": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", - "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", - "optional": true, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/agent-base": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", - "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", - "optional": true, - "dependencies": { - "debug": "4" - }, - "engines": { - "node": ">= 6.0.0" - } - }, - "node_modules/aggregate-error": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", - "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", - "dev": true, - "dependencies": { - "clean-stack": "^2.0.0", - "indent-string": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/ajv": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", - "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", - "dev": true, - "dependencies": { - "co": "^4.6.0", - "fast-deep-equal": "^1.0.0", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.3.0" - } - }, - "node_modules/ajv-keywords": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz", - "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=", - "dev": true, - "peerDependencies": { - "ajv": "^5.0.0" - } - }, - "node_modules/ansi-escape": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/ansi-escape/-/ansi-escape-1.1.0.tgz", - "integrity": "sha1-ithZ6Epp4P+Rd5aUeTqS5OjAXpk=", - "dev": true - }, - "node_modules/ansi-escapes": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", - "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", - "dev": true, - "dependencies": { - "type-fest": "^0.21.3" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/ansi-escapes/node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "devOptional": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/append-transform": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-2.0.0.tgz", - "integrity": "sha512-7yeyCEurROLQJFv5Xj4lEGTy0borxepjFv1g22oAdqFu//SrAlDl1O1Nxx15SH1RoliUml6p8dwJW9jvZughhg==", - "dev": true, - "dependencies": { - "default-require-extensions": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/aproba": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", - "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==", - "optional": true - }, - "node_modules/archy": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", - "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=", - "dev": true - }, - "node_modules/are-we-there-yet": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz", - "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==", - "optional": true, - "dependencies": { - "delegates": "^1.0.0", - "readable-stream": "^3.6.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dev": true, - "dependencies": { - "sprintf-js": "~1.0.2" - } - }, - "node_modules/array-flatten": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", - "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", - "dev": true - }, - "node_modules/async": { - "version": "0.2.10", - "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", - "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=", - "dev": true - }, - "node_modules/asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "optional": true - }, - "node_modules/auto-changelog": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.3.0.tgz", - "integrity": "sha512-S2B+RtTgytsa7l5iFGBoWT9W9ylITT5JJ8OaMJ7nrwvnlRm1dSS2tghaYueDeInZZafOE+1llH3tUQjMDRVS1g==", - "dev": true, - "dependencies": { - "commander": "^5.0.0", - "handlebars": "^4.7.3", - "node-fetch": "^2.6.0", - "parse-github-url": "^1.0.2", - "semver": "^6.3.0" - }, - "bin": { - "auto-changelog": "src/index.js" - }, - "engines": { - "node": ">=8.3" - } - }, - "node_modules/auto-changelog/node_modules/commander": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", - "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", - "dev": true, - "engines": { - "node": ">= 6" - } - }, - "node_modules/auto-changelog/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/babel-code-frame": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", - "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", - "dev": true, - "dependencies": { - "chalk": "^1.1.3", - "esutils": "^2.0.2", - "js-tokens": "^3.0.2" - } - }, - "node_modules/babel-code-frame/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/babel-code-frame/node_modules/ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/babel-code-frame/node_modules/chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "dependencies": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/babel-code-frame/node_modules/strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/babel-code-frame/node_modules/supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true, - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/backbone": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.4.0.tgz", - "integrity": "sha512-RLmDrRXkVdouTg38jcgHhyQ/2zjg7a8E6sz2zxfz21Hh17xDJYUHBZimVIt5fUyS8vbfpeSmTL3gUjTEvUV3qQ==", - "dev": true, - "dependencies": { - "underscore": ">=1.8.3" - } - }, - "node_modules/balanced-match": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "devOptional": true - }, - "node_modules/base64-arraybuffer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz", - "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==", - "dev": true, - "engines": { - "node": ">= 0.6.0" - } - }, - "node_modules/base64-js": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", - "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/base64id": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", - "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==", - "dev": true, - "engines": { - "node": "^4.5.0 || >= 5.9" - } - }, - "node_modules/bl": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", - "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", - "dev": true, - "dependencies": { - "buffer": "^5.5.0", - "inherits": "^2.0.4", - "readable-stream": "^3.4.0" - } - }, - "node_modules/bluebird": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", - "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", - "dev": true - }, - "node_modules/body-parser": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz", - "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==", - "dev": true, - "dependencies": { - "bytes": "3.1.1", - "content-type": "~1.0.4", - "debug": "2.6.9", - "depd": "~1.1.2", - "http-errors": "1.8.1", - "iconv-lite": "0.4.24", - "on-finished": "~2.3.0", - "qs": "6.9.6", - "raw-body": "2.4.2", - "type-is": "~1.6.18" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/body-parser/node_modules/bytes": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz", - "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/body-parser/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/body-parser/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/body-parser/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "devOptional": true, - "dependencies": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "node_modules/browser-process-hrtime": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", - "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==", - "optional": true - }, - "node_modules/browserslist": { - "version": "4.19.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz", - "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==", - "dev": true, - "dependencies": { - "caniuse-lite": "^1.0.30001286", - "electron-to-chromium": "^1.4.17", - "escalade": "^3.1.1", - "node-releases": "^2.0.1", - "picocolors": "^1.0.0" - }, - "bin": { - "browserslist": "cli.js" - }, - "engines": { - "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } - }, - "node_modules/buffer": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", - "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "dependencies": { - "base64-js": "^1.3.1", - "ieee754": "^1.1.13" - } - }, - "node_modules/buffer-from": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", - "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "dev": true - }, - "node_modules/bytes": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", - "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/caching-transform": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-4.0.0.tgz", - "integrity": "sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==", - "dev": true, - "dependencies": { - "hasha": "^5.0.0", - "make-dir": "^3.0.0", - "package-hash": "^4.0.0", - "write-file-atomic": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/caller-path": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz", - "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=", - "dev": true, - "dependencies": { - "callsites": "^0.2.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/callsites": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz", - "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/caniuse-lite": { - "version": "1.0.30001298", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001298.tgz", - "integrity": "sha512-AcKqikjMLlvghZL/vfTHorlQsLDhGRalYf1+GmWCf5SCMziSGjRYQW/JEksj14NaYHIR6KIhrFAy0HV5C25UzQ==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } - }, - "node_modules/canvas": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.8.0.tgz", - "integrity": "sha512-gLTi17X8WY9Cf5GZ2Yns8T5lfBOcGgFehDFb+JQwDqdOoBOcECS9ZWMEAqMSVcMYwXD659J8NyzjRY/2aE+C2Q==", - "hasInstallScript": true, - "optional": true, - "dependencies": { - "@mapbox/node-pre-gyp": "^1.0.0", - "nan": "^2.14.0", - "simple-get": "^3.0.3" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/chardet": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", - "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", - "dev": true - }, - "node_modules/charm": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/charm/-/charm-1.0.2.tgz", - "integrity": "sha1-it02cVOm2aWBMxBSxAkJkdqZXjU=", - "dev": true, - "dependencies": { - "inherits": "^2.0.1" - } - }, - "node_modules/chownr": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", - "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", - "optional": true, - "engines": { - "node": ">=10" - } - }, - "node_modules/circular-json": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz", - "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==", - "deprecated": "CircularJSON is in maintenance only, flatted is its successor.", - "dev": true - }, - "node_modules/clean-stack": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", - "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/cli-cursor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", - "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", - "dev": true, - "dependencies": { - "restore-cursor": "^3.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cli-spinners": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz", - "integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==", - "dev": true, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/cli-width": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz", - "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", - "dev": true, - "engines": { - "node": ">= 10" - } - }, - "node_modules/cliui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", - "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", - "dev": true, - "dependencies": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^6.2.0" - } - }, - "node_modules/clone": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", - "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", - "dev": true, - "engines": { - "node": ">=0.8" - } - }, - "node_modules/co": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", - "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", - "dev": true, - "engines": { - "iojs": ">= 1.0.0", - "node": ">= 0.12.0" - } - }, - "node_modules/code-point-at": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true - }, - "node_modules/color-support": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", - "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", - "optional": true, - "bin": { - "color-support": "bin.js" - } - }, - "node_modules/combined-stream": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", - "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "optional": true, - "dependencies": { - "delayed-stream": "~1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/commander": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-9.1.0.tgz", - "integrity": "sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==", - "dev": true, - "engines": { - "node": "^12.20.0 || >=14" - } - }, - "node_modules/commondir": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", - "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", - "dev": true - }, - "node_modules/component-emitter": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", - "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", - "dev": true - }, - "node_modules/compressible": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", - "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==", - "dev": true, - "dependencies": { - "mime-db": ">= 1.43.0 < 2" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/compression": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz", - "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==", - "dev": true, - "dependencies": { - "accepts": "~1.3.5", - "bytes": "3.0.0", - "compressible": "~2.0.16", - "debug": "2.6.9", - "on-headers": "~1.0.2", - "safe-buffer": "5.1.2", - "vary": "~1.1.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/compression/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/compression/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "node_modules/compression/node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true - }, - "node_modules/concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "devOptional": true - }, - "node_modules/concat-stream": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", - "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", - "dev": true, - "engines": [ - "node >= 0.8" - ], - "dependencies": { - "buffer-from": "^1.0.0", - "inherits": "^2.0.3", - "readable-stream": "^2.2.2", - "typedarray": "^0.0.6" - } - }, - "node_modules/concat-stream/node_modules/readable-stream": { - "version": "2.3.7", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", - "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", - "dev": true, - "dependencies": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "node_modules/concat-stream/node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true - }, - "node_modules/concat-stream/node_modules/string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "dependencies": { - "safe-buffer": "~5.1.0" - } - }, - "node_modules/console-control-strings": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "devOptional": true - }, - "node_modules/consolidate": { - "version": "0.15.1", - "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz", - "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==", - "dev": true, - "dependencies": { - "bluebird": "^3.1.1" - }, - "engines": { - "node": ">= 0.10.0" - } - }, - "node_modules/content-disposition": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", - "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", - "dev": true, - "dependencies": { - "safe-buffer": "5.2.1" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/content-type": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", - "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/convert-source-map": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", - "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", - "dev": true, - "dependencies": { - "safe-buffer": "~5.1.1" - } - }, - "node_modules/convert-source-map/node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true - }, - "node_modules/cookie": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", - "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/cookie-signature": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", - "dev": true - }, - "node_modules/core-util-is": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", - "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", - "dev": true - }, - "node_modules/cors": { - "version": "2.8.5", - "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", - "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", - "dev": true, - "dependencies": { - "object-assign": "^4", - "vary": "^1" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", - "dev": true, - "dependencies": { - "lru-cache": "^4.0.1", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, - "node_modules/cross-spawn/node_modules/lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", - "dev": true, - "dependencies": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" - } - }, - "node_modules/cross-spawn/node_modules/yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", - "dev": true - }, - "node_modules/cssom": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", - "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==", - "optional": true - }, - "node_modules/cssstyle": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz", - "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==", - "optional": true, - "dependencies": { - "cssom": "~0.3.6" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cssstyle/node_modules/cssom": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", - "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", - "optional": true - }, - "node_modules/data-urls": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.1.tgz", - "integrity": "sha512-Ds554NeT5Gennfoo9KN50Vh6tpgtvYEwraYjejXnyTpu1C7oXKxdFk75REooENHE8ndTVOJuv+BEs4/J/xcozw==", - "optional": true, - "dependencies": { - "abab": "^2.0.3", - "whatwg-mimetype": "^3.0.0", - "whatwg-url": "^10.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/data-urls/node_modules/tr46": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz", - "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==", - "optional": true, - "dependencies": { - "punycode": "^2.1.1" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/data-urls/node_modules/webidl-conversions": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", - "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", - "optional": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/data-urls/node_modules/whatwg-url": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz", - "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==", - "optional": true, - "dependencies": { - "tr46": "^3.0.0", - "webidl-conversions": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/debug": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", - "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", - "devOptional": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, - "node_modules/decamelize": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/decimal.js": { - "version": "10.3.1", - "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz", - "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==", - "optional": true - }, - "node_modules/decompress-response": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz", - "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==", - "optional": true, - "dependencies": { - "mimic-response": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/deep-is": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", - "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", - "devOptional": true - }, - "node_modules/deep-object-diff": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.7.tgz", - "integrity": "sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg==", - "dev": true - }, - "node_modules/default-require-extensions": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.0.tgz", - "integrity": "sha512-ek6DpXq/SCpvjhpFsLFRVtIxJCRw6fUR42lYMVZuUMK7n8eMz4Uh5clckdBjEpLhn/gEBZo7hDJnJcwdKLKQjg==", - "dev": true, - "dependencies": { - "strip-bom": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/defaults": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz", - "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=", - "dev": true, - "dependencies": { - "clone": "^1.0.2" - } - }, - "node_modules/delayed-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "optional": true, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/delegates": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "devOptional": true - }, - "node_modules/depd": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", - "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/destroy": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", - "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", - "dev": true - }, - "node_modules/detect-libc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", - "optional": true, - "bin": { - "detect-libc": "bin/detect-libc.js" - }, - "engines": { - "node": ">=0.10" - } - }, - "node_modules/doctrine": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", - "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", - "dev": true, - "dependencies": { - "esutils": "^2.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/domexception": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", - "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==", - "optional": true, - "dependencies": { - "webidl-conversions": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/domexception/node_modules/webidl-conversions": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", - "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", - "optional": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/ee-first": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", - "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", - "dev": true - }, - "node_modules/electron-to-chromium": { - "version": "1.4.38", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.38.tgz", - "integrity": "sha512-WhHt3sZazKj0KK/UpgsbGQnUUoFeAHVishzHFExMxagpZgjiGYSC9S0ZlbhCfSH2L2i+2A1yyqOIliTctMx7KQ==", - "dev": true - }, - "node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "devOptional": true - }, - "node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/end-of-stream": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", - "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", - "dev": true, - "dependencies": { - "once": "^1.4.0" - } - }, - "node_modules/engine.io": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.1.2.tgz", - "integrity": "sha512-v/7eGHxPvO2AWsksyx2PUsQvBafuvqs0jJJQ0FdmJG1b9qIvgSbqDRGwNhfk2XHaTTbTXiC4quRE8Q9nRjsrQQ==", - "dev": true, - "dependencies": { - "@types/cookie": "^0.4.1", - "@types/cors": "^2.8.12", - "@types/node": ">=10.0.0", - "accepts": "~1.3.4", - "base64id": "2.0.0", - "cookie": "~0.4.1", - "cors": "~2.8.5", - "debug": "~4.3.1", - "engine.io-parser": "~5.0.0", - "ws": "~8.2.3" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/engine.io-parser": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.2.tgz", - "integrity": "sha512-wuiO7qO/OEkPJSFueuATIXtrxF7/6GTbAO9QLv7nnbjwZ5tYhLm9zxvLwxstRs0dcT0KUlWTjtIOs1T86jt12g==", - "dev": true, - "dependencies": { - "base64-arraybuffer": "~1.0.1" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/engine.io/node_modules/ws": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", - "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, - "node_modules/es6-error": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz", - "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", - "dev": true - }, - "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/escape-html": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", - "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=", - "dev": true - }, - "node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true, - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/escodegen": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz", - "integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==", - "optional": true, - "dependencies": { - "esprima": "^4.0.1", - "estraverse": "^5.2.0", - "esutils": "^2.0.2", - "optionator": "^0.8.1" - }, - "bin": { - "escodegen": "bin/escodegen.js", - "esgenerate": "bin/esgenerate.js" - }, - "engines": { - "node": ">=6.0" - }, - "optionalDependencies": { - "source-map": "~0.6.1" - } - }, - "node_modules/eslint": { - "version": "4.18.2", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.18.2.tgz", - "integrity": "sha512-qy4i3wODqKMYfz9LUI8N2qYDkHkoieTbiHpMrYUI/WbjhXJQr7lI4VngixTgaG+yHX+NBCv7nW4hA0ShbvaNKw==", - "dev": true, - "dependencies": { - "ajv": "^5.3.0", - "babel-code-frame": "^6.22.0", - "chalk": "^2.1.0", - "concat-stream": "^1.6.0", - "cross-spawn": "^5.1.0", - "debug": "^3.1.0", - "doctrine": "^2.1.0", - "eslint-scope": "^3.7.1", - "eslint-visitor-keys": "^1.0.0", - "espree": "^3.5.2", - "esquery": "^1.0.0", - "esutils": "^2.0.2", - "file-entry-cache": "^2.0.0", - "functional-red-black-tree": "^1.0.1", - "glob": "^7.1.2", - "globals": "^11.0.1", - "ignore": "^3.3.3", - "imurmurhash": "^0.1.4", - "inquirer": "^3.0.6", - "is-resolvable": "^1.0.0", - "js-yaml": "^3.9.1", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.3.0", - "lodash": "^4.17.4", - "minimatch": "^3.0.2", - "mkdirp": "^0.5.1", - "natural-compare": "^1.4.0", - "optionator": "^0.8.2", - "path-is-inside": "^1.0.2", - "pluralize": "^7.0.0", - "progress": "^2.0.0", - "require-uncached": "^1.0.3", - "semver": "^5.3.0", - "strip-ansi": "^4.0.0", - "strip-json-comments": "~2.0.1", - "table": "4.0.2", - "text-table": "~0.2.0" - }, - "bin": { - "eslint": "bin/eslint.js" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint-scope": { - "version": "3.7.3", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.3.tgz", - "integrity": "sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==", - "dev": true, - "dependencies": { - "esrecurse": "^4.1.0", - "estraverse": "^4.1.1" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/eslint-scope/node_modules/estraverse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", - "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", - "dev": true, - "engines": { - "node": ">=4.0" - } - }, - "node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/ansi-escapes": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", - "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/chardet": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", - "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", - "dev": true - }, - "node_modules/eslint/node_modules/cli-cursor": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", - "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", - "dev": true, - "dependencies": { - "restore-cursor": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/cli-width": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", - "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", - "dev": true - }, - "node_modules/eslint/node_modules/debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "dependencies": { - "ms": "^2.1.1" - } - }, - "node_modules/eslint/node_modules/external-editor": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", - "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", - "dev": true, - "dependencies": { - "chardet": "^0.4.0", - "iconv-lite": "^0.4.17", - "tmp": "^0.0.33" - }, - "engines": { - "node": ">=0.12" - } - }, - "node_modules/eslint/node_modules/figures": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", - "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", - "dev": true, - "dependencies": { - "escape-string-regexp": "^1.0.5" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/eslint/node_modules/inquirer": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", - "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==", - "dev": true, - "dependencies": { - "ansi-escapes": "^3.0.0", - "chalk": "^2.0.0", - "cli-cursor": "^2.1.0", - "cli-width": "^2.0.0", - "external-editor": "^2.0.4", - "figures": "^2.0.0", - "lodash": "^4.3.0", - "mute-stream": "0.0.7", - "run-async": "^2.2.0", - "rx-lite": "^4.0.8", - "rx-lite-aggregates": "^4.0.8", - "string-width": "^2.1.0", - "strip-ansi": "^4.0.0", - "through": "^2.3.6" - } - }, - "node_modules/eslint/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/mimic-fn": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", - "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "dev": true, - "dependencies": { - "minimist": "^1.2.5" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, - "node_modules/eslint/node_modules/mute-stream": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", - "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", - "dev": true - }, - "node_modules/eslint/node_modules/onetime": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", - "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=", - "dev": true, - "dependencies": { - "mimic-fn": "^1.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/restore-cursor": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", - "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=", - "dev": true, - "dependencies": { - "onetime": "^2.0.0", - "signal-exit": "^3.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true, - "bin": { - "semver": "bin/semver" - } - }, - "node_modules/eslint/node_modules/string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "dependencies": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint/node_modules/strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "dependencies": { - "ansi-regex": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/espree": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz", - "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==", - "dev": true, - "dependencies": { - "acorn": "^5.5.0", - "acorn-jsx": "^3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/espree/node_modules/acorn": { - "version": "5.7.4", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz", - "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/esprima": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", - "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", - "devOptional": true, - "bin": { - "esparse": "bin/esparse.js", - "esvalidate": "bin/esvalidate.js" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/esquery": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz", - "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==", - "dev": true, - "dependencies": { - "estraverse": "^5.1.0" - }, - "engines": { - "node": ">=0.10" - } - }, - "node_modules/esrecurse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", - "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", - "dev": true, - "dependencies": { - "estraverse": "^5.2.0" - }, - "engines": { - "node": ">=4.0" - } - }, - "node_modules/estraverse": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", - "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", - "devOptional": true, - "engines": { - "node": ">=4.0" - } - }, - "node_modules/esutils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "devOptional": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/etag": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", - "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", - "dev": true - }, - "node_modules/events-to-array": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/events-to-array/-/events-to-array-1.1.2.tgz", - "integrity": "sha1-LUH1Y+H+QA7Uli/hpNXGp1Od9/Y=", - "dev": true - }, - "node_modules/execa": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", - "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", - "dev": true, - "dependencies": { - "cross-spawn": "^6.0.0", - "get-stream": "^4.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/execa/node_modules/cross-spawn": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", - "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", - "dev": true, - "dependencies": { - "nice-try": "^1.0.4", - "path-key": "^2.0.1", - "semver": "^5.5.0", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - }, - "engines": { - "node": ">=4.8" - } - }, - "node_modules/execa/node_modules/is-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/execa/node_modules/path-key": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", - "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/execa/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", - "dev": true, - "bin": { - "semver": "bin/semver" - } - }, - "node_modules/express": { - "version": "4.17.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.17.2.tgz", - "integrity": "sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==", - "dev": true, - "dependencies": { - "accepts": "~1.3.7", - "array-flatten": "1.1.1", - "body-parser": "1.19.1", - "content-disposition": "0.5.4", - "content-type": "~1.0.4", - "cookie": "0.4.1", - "cookie-signature": "1.0.6", - "debug": "2.6.9", - "depd": "~1.1.2", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "finalhandler": "~1.1.2", - "fresh": "0.5.2", - "merge-descriptors": "1.0.1", - "methods": "~1.1.2", - "on-finished": "~2.3.0", - "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", - "proxy-addr": "~2.0.7", - "qs": "6.9.6", - "range-parser": "~1.2.1", - "safe-buffer": "5.2.1", - "send": "0.17.2", - "serve-static": "1.14.2", - "setprototypeof": "1.2.0", - "statuses": "~1.5.0", - "type-is": "~1.6.18", - "utils-merge": "1.0.1", - "vary": "~1.1.2" - }, - "engines": { - "node": ">= 0.10.0" - } - }, - "node_modules/express/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/express/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "node_modules/external-editor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", - "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==", - "dev": true, - "dependencies": { - "chardet": "^0.7.0", - "iconv-lite": "^0.4.24", - "tmp": "^0.0.33" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/external-editor/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/fast-deep-equal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", - "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", - "dev": true - }, - "node_modules/fast-json-stable-stringify": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", - "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", - "dev": true - }, - "node_modules/fast-levenshtein": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", - "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", - "devOptional": true - }, - "node_modules/figures": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", - "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==", - "dev": true, - "dependencies": { - "escape-string-regexp": "^1.0.5" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/file-entry-cache": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz", - "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=", - "dev": true, - "dependencies": { - "flat-cache": "^1.2.1", - "object-assign": "^4.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/finalhandler": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", - "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", - "dev": true, - "dependencies": { - "debug": "2.6.9", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "on-finished": "~2.3.0", - "parseurl": "~1.3.3", - "statuses": "~1.5.0", - "unpipe": "~1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/finalhandler/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/finalhandler/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "node_modules/find-cache-dir": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", - "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", - "dev": true, - "dependencies": { - "commondir": "^1.0.1", - "make-dir": "^3.0.2", - "pkg-dir": "^4.1.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/avajs/find-cache-dir?sponsor=1" - } - }, - "node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/fireworm": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/fireworm/-/fireworm-0.7.1.tgz", - "integrity": "sha1-zPIPeUHxCIg/zduZOD2+bhhhx1g=", - "dev": true, - "dependencies": { - "async": "~0.2.9", - "is-type": "0.0.1", - "lodash.debounce": "^3.1.1", - "lodash.flatten": "^3.0.2", - "minimatch": "^3.0.2" - } - }, - "node_modules/flat-cache": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz", - "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==", - "dev": true, - "dependencies": { - "circular-json": "^0.3.1", - "graceful-fs": "^4.1.2", - "rimraf": "~2.6.2", - "write": "^0.2.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/flat-cache/node_modules/rimraf": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", - "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", - "dev": true, - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - } - }, - "node_modules/follow-redirects": { - "version": "1.14.8", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz", - "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://github.com/sponsors/RubenVerborgh" - } - ], - "engines": { - "node": ">=4.0" - }, - "peerDependenciesMeta": { - "debug": { - "optional": true - } - } - }, - "node_modules/foreground-child": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz", - "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", - "dev": true, - "dependencies": { - "cross-spawn": "^7.0.0", - "signal-exit": "^3.0.2" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/foreground-child/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/foreground-child/node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/foreground-child/node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/foreground-child/node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "optional": true, - "dependencies": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.8", - "mime-types": "^2.1.12" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/forwarded": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", - "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/fresh": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", - "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/fromentries": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/fromentries/-/fromentries-1.3.2.tgz", - "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/fs-extra": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.1.tgz", - "integrity": "sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==", - "dev": true, - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/fs-extra/node_modules/universalify": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", - "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", - "dev": true, - "engines": { - "node": ">= 10.0.0" - } - }, - "node_modules/fs-minipass": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", - "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "optional": true, - "dependencies": { - "minipass": "^3.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "devOptional": true - }, - "node_modules/functional-red-black-tree": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", - "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", - "dev": true - }, - "node_modules/fuzzy": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/fuzzy/-/fuzzy-0.1.3.tgz", - "integrity": "sha1-THbsL/CsGjap3M+aAN+GIweNTtg=", - "dev": true, - "engines": { - "node": ">= 0.6.0" - } - }, - "node_modules/gauge": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", - "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==", - "optional": true, - "dependencies": { - "aproba": "^1.0.3 || ^2.0.0", - "color-support": "^1.1.2", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.1", - "object-assign": "^4.1.1", - "signal-exit": "^3.0.0", - "string-width": "^4.2.3", - "strip-ansi": "^6.0.1", - "wide-align": "^1.1.2" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/gensync": { - "version": "1.0.0-beta.2", - "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", - "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", - "dev": true, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/get-caller-file": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", - "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", - "dev": true, - "engines": { - "node": "6.* || 8.* || >= 10.*" - } - }, - "node_modules/get-package-type": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", - "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==", - "dev": true, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/get-stream": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", - "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", - "dev": true, - "dependencies": { - "pump": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/glob": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", - "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", - "devOptional": true, - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/globalyzer": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz", - "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==", - "dev": true - }, - "node_modules/globrex": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", - "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", - "dev": true - }, - "node_modules/graceful-fs": { - "version": "4.2.9", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", - "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==", - "dev": true - }, - "node_modules/growly": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", - "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", - "dev": true - }, - "node_modules/handlebars": { - "version": "4.7.7", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz", - "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==", - "dev": true, - "dependencies": { - "minimist": "^1.2.5", - "neo-async": "^2.6.0", - "source-map": "^0.6.1", - "wordwrap": "^1.0.0" - }, - "bin": { - "handlebars": "bin/handlebars" - }, - "engines": { - "node": ">=0.4.7" - }, - "optionalDependencies": { - "uglify-js": "^3.1.4" - } - }, - "node_modules/has-ansi": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", - "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/has-ansi/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/has-unicode": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", - "devOptional": true - }, - "node_modules/hasha": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz", - "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==", - "dev": true, - "dependencies": { - "is-stream": "^2.0.0", - "type-fest": "^0.8.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/html-encoding-sniffer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", - "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", - "optional": true, - "dependencies": { - "whatwg-encoding": "^2.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/html-escaper": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", - "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", - "dev": true - }, - "node_modules/http-errors": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz", - "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==", - "dev": true, - "dependencies": { - "depd": "~1.1.2", - "inherits": "2.0.4", - "setprototypeof": "1.2.0", - "statuses": ">= 1.5.0 < 2", - "toidentifier": "1.0.1" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/http-proxy": { - "version": "1.18.1", - "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", - "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", - "dev": true, - "dependencies": { - "eventemitter3": "^4.0.0", - "follow-redirects": "^1.0.0", - "requires-port": "^1.0.0" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/http-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", - "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==", - "optional": true, - "dependencies": { - "@tootallnate/once": "2", - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/https-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz", - "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==", - "optional": true, - "dependencies": { - "agent-base": "6", - "debug": "4" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "optional": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/ieee754": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", - "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/ignore": { - "version": "3.3.10", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", - "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", - "dev": true - }, - "node_modules/imurmurhash": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", - "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", - "dev": true, - "engines": { - "node": ">=0.8.19" - } - }, - "node_modules/indent-string": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", - "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "devOptional": true, - "dependencies": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "node_modules/inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "devOptional": true - }, - "node_modules/inquirer": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.1.tgz", - "integrity": "sha512-pxhBaw9cyTFMjwKtkjePWDhvwzvrNGAw7En4hottzlPvz80GZaMZthdDU35aA6/f5FRZf3uhE057q8w1DE3V2g==", - "dev": true, - "dependencies": { - "ansi-escapes": "^4.2.1", - "chalk": "^4.1.1", - "cli-cursor": "^3.1.0", - "cli-width": "^3.0.0", - "external-editor": "^3.0.3", - "figures": "^3.0.0", - "lodash": "^4.17.21", - "mute-stream": "0.0.8", - "ora": "^5.4.1", - "run-async": "^2.4.0", - "rxjs": "^7.5.5", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0", - "through": "^2.3.6" - }, - "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/inquirer-checkbox-plus-prompt": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/inquirer-checkbox-plus-prompt/-/inquirer-checkbox-plus-prompt-1.0.1.tgz", - "integrity": "sha1-VP8e0Jd3oQNThWIna1z0Uhox0W0=", - "dev": true, - "dependencies": { - "cli-cursor": "^2.1.0", - "figures": "^2.0.0", - "inquirer": "^5.1.0", - "lodash": "^4.17.5" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/ansi-escapes": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", - "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/chardet": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", - "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", - "dev": true - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/cli-cursor": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", - "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", - "dev": true, - "dependencies": { - "restore-cursor": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/cli-width": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", - "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", - "dev": true - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/external-editor": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", - "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", - "dev": true, - "dependencies": { - "chardet": "^0.4.0", - "iconv-lite": "^0.4.17", - "tmp": "^0.0.33" - }, - "engines": { - "node": ">=0.12" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/figures": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", - "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", - "dev": true, - "dependencies": { - "escape-string-regexp": "^1.0.5" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/inquirer": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-5.2.0.tgz", - "integrity": "sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==", - "dev": true, - "dependencies": { - "ansi-escapes": "^3.0.0", - "chalk": "^2.0.0", - "cli-cursor": "^2.1.0", - "cli-width": "^2.0.0", - "external-editor": "^2.1.0", - "figures": "^2.0.0", - "lodash": "^4.3.0", - "mute-stream": "0.0.7", - "run-async": "^2.2.0", - "rxjs": "^5.5.2", - "string-width": "^2.1.0", - "strip-ansi": "^4.0.0", - "through": "^2.3.6" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/mimic-fn": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", - "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/mute-stream": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", - "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", - "dev": true - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/onetime": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", - "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=", - "dev": true, - "dependencies": { - "mimic-fn": "^1.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/restore-cursor": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", - "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=", - "dev": true, - "dependencies": { - "onetime": "^2.0.0", - "signal-exit": "^3.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/rxjs": { - "version": "5.5.12", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz", - "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==", - "dev": true, - "dependencies": { - "symbol-observable": "1.0.1" - }, - "engines": { - "npm": ">=2.0.0" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "dependencies": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer-checkbox-plus-prompt/node_modules/strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "dependencies": { - "ansi-regex": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/inquirer/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/inquirer/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/inquirer/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/inquirer/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/inquirer/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/inquirer/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/ipaddr.js": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", - "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", - "dev": true, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/is-docker": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", - "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", - "dev": true, - "bin": { - "is-docker": "cli.js" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "devOptional": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-interactive": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", - "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-potential-custom-element-name": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", - "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", - "optional": true - }, - "node_modules/is-resolvable": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz", - "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==", - "dev": true - }, - "node_modules/is-stream": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", - "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", - "dev": true, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/is-type": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/is-type/-/is-type-0.0.1.tgz", - "integrity": "sha1-9lHYXDZdRJVdFKUdjXBh8/a0d5w=", - "dev": true, - "dependencies": { - "core-util-is": "~1.0.0" - } - }, - "node_modules/is-typedarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", - "dev": true - }, - "node_modules/is-unicode-supported": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", - "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/is-windows": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", - "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-wsl": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", - "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", - "dev": true, - "dependencies": { - "is-docker": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/isarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true - }, - "node_modules/isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true - }, - "node_modules/istanbul-lib-coverage": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz", - "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-hook": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-3.0.0.tgz", - "integrity": "sha512-Pt/uge1Q9s+5VAZ+pCo16TYMWPBIl+oaNIjgLQxcX0itS6ueeaA+pEfThZpH8WxhFgCiEb8sAJY6MdUKgiIWaQ==", - "dev": true, - "dependencies": { - "append-transform": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-instrument": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz", - "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==", - "dev": true, - "dependencies": { - "@babel/core": "^7.7.5", - "@istanbuljs/schema": "^0.1.2", - "istanbul-lib-coverage": "^3.0.0", - "semver": "^6.3.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-instrument/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/istanbul-lib-processinfo": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-2.0.2.tgz", - "integrity": "sha512-kOwpa7z9hme+IBPZMzQ5vdQj8srYgAtaRqeI48NGmAQ+/5yKiHLV0QbYqQpxsdEF0+w14SoB8YbnHKcXE2KnYw==", - "dev": true, - "dependencies": { - "archy": "^1.0.0", - "cross-spawn": "^7.0.0", - "istanbul-lib-coverage": "^3.0.0-alpha.1", - "make-dir": "^3.0.0", - "p-map": "^3.0.0", - "rimraf": "^3.0.0", - "uuid": "^3.3.3" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-processinfo/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/istanbul-lib-processinfo/node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-processinfo/node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-processinfo/node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/istanbul-lib-report": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz", - "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==", - "dev": true, - "dependencies": { - "istanbul-lib-coverage": "^3.0.0", - "make-dir": "^3.0.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-report/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-report/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-source-maps": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz", - "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==", - "dev": true, - "dependencies": { - "debug": "^4.1.1", - "istanbul-lib-coverage": "^3.0.0", - "source-map": "^0.6.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/istanbul-reports": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.3.tgz", - "integrity": "sha512-x9LtDVtfm/t1GFiLl3NffC7hz+I1ragvgX1P/Lg1NlIagifZDKUkuuaAxH/qpwj2IuEfD8G2Bs/UKp+sZ/pKkg==", - "dev": true, - "dependencies": { - "html-escaper": "^2.0.0", - "istanbul-lib-report": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/js-tokens": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true - }, - "node_modules/js-yaml": { - "version": "3.14.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", - "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", - "dev": true, - "dependencies": { - "argparse": "^1.0.7", - "esprima": "^4.0.0" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, - "node_modules/jsdom": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-19.0.0.tgz", - "integrity": "sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==", - "optional": true, - "dependencies": { - "abab": "^2.0.5", - "acorn": "^8.5.0", - "acorn-globals": "^6.0.0", - "cssom": "^0.5.0", - "cssstyle": "^2.3.0", - "data-urls": "^3.0.1", - "decimal.js": "^10.3.1", - "domexception": "^4.0.0", - "escodegen": "^2.0.0", - "form-data": "^4.0.0", - "html-encoding-sniffer": "^3.0.0", - "http-proxy-agent": "^5.0.0", - "https-proxy-agent": "^5.0.0", - "is-potential-custom-element-name": "^1.0.1", - "nwsapi": "^2.2.0", - "parse5": "6.0.1", - "saxes": "^5.0.1", - "symbol-tree": "^3.2.4", - "tough-cookie": "^4.0.0", - "w3c-hr-time": "^1.0.2", - "w3c-xmlserializer": "^3.0.0", - "webidl-conversions": "^7.0.0", - "whatwg-encoding": "^2.0.0", - "whatwg-mimetype": "^3.0.0", - "whatwg-url": "^10.0.0", - "ws": "^8.2.3", - "xml-name-validator": "^4.0.0" - }, - "engines": { - "node": ">=12" - }, - "peerDependencies": { - "canvas": "^2.5.0" - }, - "peerDependenciesMeta": { - "canvas": { - "optional": true - } - } - }, - "node_modules/jsdom/node_modules/tr46": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz", - "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==", - "optional": true, - "dependencies": { - "punycode": "^2.1.1" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/jsdom/node_modules/webidl-conversions": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", - "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", - "optional": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/jsdom/node_modules/whatwg-url": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz", - "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==", - "optional": true, - "dependencies": { - "tr46": "^3.0.0", - "webidl-conversions": "^7.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/jsesc": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true, - "bin": { - "jsesc": "bin/jsesc" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/json-schema-traverse": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", - "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", - "dev": true - }, - "node_modules/json-stable-stringify-without-jsonify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", - "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", - "dev": true - }, - "node_modules/json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, - "dependencies": { - "minimist": "^1.2.5" - }, - "bin": { - "json5": "lib/cli.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/jsonfile": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", - "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", - "dev": true, - "dependencies": { - "universalify": "^2.0.0" - }, - "optionalDependencies": { - "graceful-fs": "^4.1.6" - } - }, - "node_modules/jsonfile/node_modules/universalify": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", - "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", - "dev": true, - "engines": { - "node": ">= 10.0.0" - } - }, - "node_modules/levn": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", - "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", - "devOptional": true, - "dependencies": { - "prelude-ls": "~1.1.2", - "type-check": "~0.3.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true - }, - "node_modules/lodash._baseflatten": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/lodash._baseflatten/-/lodash._baseflatten-3.1.4.tgz", - "integrity": "sha1-B3D/gBMa9uNPO1EXlqe6UhTmX/c=", - "dev": true, - "dependencies": { - "lodash.isarguments": "^3.0.0", - "lodash.isarray": "^3.0.0" - } - }, - "node_modules/lodash._getnative": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", - "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=", - "dev": true - }, - "node_modules/lodash._isiterateecall": { - "version": "3.0.9", - "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz", - "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=", - "dev": true - }, - "node_modules/lodash.assignin": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz", - "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI=", - "dev": true - }, - "node_modules/lodash.castarray": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", - "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=", - "dev": true - }, - "node_modules/lodash.clonedeep": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", - "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", - "dev": true - }, - "node_modules/lodash.debounce": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz", - "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=", - "dev": true, - "dependencies": { - "lodash._getnative": "^3.0.0" - } - }, - "node_modules/lodash.find": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz", - "integrity": "sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=", - "dev": true - }, - "node_modules/lodash.flatten": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-3.0.2.tgz", - "integrity": "sha1-3hz1d1j49EeTGdNcPpzGDEUBk4w=", - "dev": true, - "dependencies": { - "lodash._baseflatten": "^3.0.0", - "lodash._isiterateecall": "^3.0.0" - } - }, - "node_modules/lodash.flattendeep": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", - "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", - "dev": true - }, - "node_modules/lodash.isarguments": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", - "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=", - "dev": true - }, - "node_modules/lodash.isarray": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", - "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", - "dev": true - }, - "node_modules/lodash.uniqby": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz", - "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=", - "dev": true - }, - "node_modules/log-symbols": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", - "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==", - "dev": true, - "dependencies": { - "chalk": "^4.1.0", - "is-unicode-supported": "^0.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/log-symbols/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/log-symbols/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/log-symbols/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/log-symbols/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/log-symbols/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/log-symbols/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "devOptional": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "devOptional": true, - "dependencies": { - "semver": "^6.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/make-dir/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "devOptional": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/media-typer": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", - "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/merge-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=", - "dev": true - }, - "node_modules/methods": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", - "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/mime": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", - "dev": true, - "bin": { - "mime": "cli.js" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/mime-db": { - "version": "1.51.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", - "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", - "devOptional": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/mime-types": { - "version": "2.1.34", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", - "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", - "devOptional": true, - "dependencies": { - "mime-db": "1.51.0" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/mimic-fn": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", - "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/mimic-response": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz", - "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==", - "optional": true, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "devOptional": true, - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, - "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, - "node_modules/minipass": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz", - "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==", - "optional": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/minizlib": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", - "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", - "optional": true, - "dependencies": { - "minipass": "^3.0.0", - "yallist": "^4.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", - "optional": true, - "bin": { - "mkdirp": "bin/cmd.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/moment": { - "version": "2.29.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", - "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", - "dev": true, - "engines": { - "node": "*" - } - }, - "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "devOptional": true - }, - "node_modules/mustache": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz", - "integrity": "sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA==", - "dev": true, - "bin": { - "mustache": "bin/mustache" - }, - "engines": { - "npm": ">=1.4.0" - } - }, - "node_modules/mute-stream": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", - "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", - "dev": true - }, - "node_modules/nan": { - "version": "2.15.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", - "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", - "optional": true - }, - "node_modules/natural-compare": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", - "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", - "dev": true - }, - "node_modules/negotiator": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", - "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/neo-async": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", - "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", - "dev": true - }, - "node_modules/nice-try": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", - "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", - "dev": true - }, - "node_modules/node-fetch": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", - "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", - "devOptional": true, - "dependencies": { - "whatwg-url": "^5.0.0" - }, - "engines": { - "node": "4.x || >=6.0.0" - }, - "peerDependencies": { - "encoding": "^0.1.0" - }, - "peerDependenciesMeta": { - "encoding": { - "optional": true - } - } - }, - "node_modules/node-notifier": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-9.0.1.tgz", - "integrity": "sha512-fPNFIp2hF/Dq7qLDzSg4vZ0J4e9v60gJR+Qx7RbjbWqzPDdEqeVpEx5CFeDAELIl+A/woaaNn1fQ5nEVerMxJg==", - "dev": true, - "dependencies": { - "growly": "^1.3.0", - "is-wsl": "^2.2.0", - "semver": "^7.3.2", - "shellwords": "^0.1.1", - "uuid": "^8.3.0", - "which": "^2.0.2" - } - }, - "node_modules/node-notifier/node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true, - "bin": { - "uuid": "dist/bin/uuid" - } - }, - "node_modules/node-notifier/node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/node-preload": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/node-preload/-/node-preload-0.2.1.tgz", - "integrity": "sha512-RM5oyBy45cLEoHqCeh+MNuFAxO0vTFBLskvQbOKnEE7YTTSN4tbN8QWDIPQ6L+WvKsB/qLEGpYe2ZZ9d4W9OIQ==", - "dev": true, - "dependencies": { - "process-on-spawn": "^1.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/node-releases": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", - "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", - "dev": true - }, - "node_modules/node-watch": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.3.tgz", - "integrity": "sha512-3l4E8uMPY1HdMMryPRUAl+oIHtXtyiTlIiESNSVSNxcPfzAFzeTbXFQkZfAwBbo0B1qMSG8nUABx+Gd+YrbKrQ==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/nopt": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", - "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", - "optional": true, - "dependencies": { - "abbrev": "1" - }, - "bin": { - "nopt": "bin/nopt.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/npm-run-path": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", - "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", - "dev": true, - "dependencies": { - "path-key": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/npm-run-path/node_modules/path-key": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", - "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/npmlog": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz", - "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==", - "optional": true, - "dependencies": { - "are-we-there-yet": "^2.0.0", - "console-control-strings": "^1.1.0", - "gauge": "^3.0.0", - "set-blocking": "^2.0.0" - } - }, - "node_modules/number-is-nan": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/nwsapi": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", - "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==", - "optional": true - }, - "node_modules/nyc": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz", - "integrity": "sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==", - "dev": true, - "dependencies": { - "@istanbuljs/load-nyc-config": "^1.0.0", - "@istanbuljs/schema": "^0.1.2", - "caching-transform": "^4.0.0", - "convert-source-map": "^1.7.0", - "decamelize": "^1.2.0", - "find-cache-dir": "^3.2.0", - "find-up": "^4.1.0", - "foreground-child": "^2.0.0", - "get-package-type": "^0.1.0", - "glob": "^7.1.6", - "istanbul-lib-coverage": "^3.0.0", - "istanbul-lib-hook": "^3.0.0", - "istanbul-lib-instrument": "^4.0.0", - "istanbul-lib-processinfo": "^2.0.2", - "istanbul-lib-report": "^3.0.0", - "istanbul-lib-source-maps": "^4.0.0", - "istanbul-reports": "^3.0.2", - "make-dir": "^3.0.0", - "node-preload": "^0.2.1", - "p-map": "^3.0.0", - "process-on-spawn": "^1.0.0", - "resolve-from": "^5.0.0", - "rimraf": "^3.0.0", - "signal-exit": "^3.0.2", - "spawn-wrap": "^2.0.0", - "test-exclude": "^6.0.0", - "yargs": "^15.0.2" - }, - "bin": { - "nyc": "bin/nyc.js" - }, - "engines": { - "node": ">=8.9" - } - }, - "node_modules/nyc/node_modules/resolve-from": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", - "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "devOptional": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/on-finished": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", - "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", - "dev": true, - "dependencies": { - "ee-first": "1.1.1" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/on-headers": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", - "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "devOptional": true, - "dependencies": { - "wrappy": "1" - } - }, - "node_modules/onetime": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", - "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", - "dev": true, - "dependencies": { - "mimic-fn": "^2.1.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/optionator": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", - "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", - "devOptional": true, - "dependencies": { - "deep-is": "~0.1.3", - "fast-levenshtein": "~2.0.6", - "levn": "~0.3.0", - "prelude-ls": "~1.1.2", - "type-check": "~0.3.2", - "word-wrap": "~1.2.3" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/ora": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", - "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==", - "dev": true, - "dependencies": { - "bl": "^4.1.0", - "chalk": "^4.1.0", - "cli-cursor": "^3.1.0", - "cli-spinners": "^2.5.0", - "is-interactive": "^1.0.0", - "is-unicode-supported": "^0.1.0", - "log-symbols": "^4.1.0", - "strip-ansi": "^6.0.0", - "wcwidth": "^1.0.1" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/ora/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/ora/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/ora/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/ora/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/ora/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/ora/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/os-tmpdir": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/p-finally": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", - "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/p-map": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", - "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==", - "dev": true, - "dependencies": { - "aggregate-error": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/package-hash": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-4.0.0.tgz", - "integrity": "sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==", - "dev": true, - "dependencies": { - "graceful-fs": "^4.1.15", - "hasha": "^5.0.0", - "lodash.flattendeep": "^4.4.0", - "release-zalgo": "^1.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/parse-github-url": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.2.tgz", - "integrity": "sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==", - "dev": true, - "bin": { - "parse-github-url": "cli.js" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/parse5": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", - "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", - "optional": true - }, - "node_modules/parseurl": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", - "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "devOptional": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/path-is-inside": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", - "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=", - "dev": true - }, - "node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/path-to-regexp": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=", - "dev": true - }, - "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true - }, - "node_modules/pixelmatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz", - "integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=", - "dev": true, - "dependencies": { - "pngjs": "^3.0.0" - }, - "bin": { - "pixelmatch": "bin/pixelmatch" - } - }, - "node_modules/pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dev": true, - "dependencies": { - "find-up": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/pluralize": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz", - "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/pngjs": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", - "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==", - "dev": true, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/prelude-ls": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", - "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", - "devOptional": true, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/printf": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/printf/-/printf-0.6.1.tgz", - "integrity": "sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==", - "dev": true, - "engines": { - "node": ">= 0.9.0" - } - }, - "node_modules/process-nextick-args": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - "dev": true - }, - "node_modules/process-on-spawn": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/process-on-spawn/-/process-on-spawn-1.0.0.tgz", - "integrity": "sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==", - "dev": true, - "dependencies": { - "fromentries": "^1.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/progress": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", - "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", - "dev": true, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/proxy-addr": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", - "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", - "dev": true, - "dependencies": { - "forwarded": "0.2.0", - "ipaddr.js": "1.9.1" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/pseudomap": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", - "dev": true - }, - "node_modules/psl": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", - "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==", - "optional": true - }, - "node_modules/pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "dev": true, - "dependencies": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - }, - "node_modules/punycode": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", - "optional": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/qs": { - "version": "6.9.6", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz", - "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==", - "dev": true, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/qunit": { - "version": "2.18.1", - "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.18.1.tgz", - "integrity": "sha512-A2Adgr/DeMQOJZFVllyQi2wiGJVVXGSRRwMe39fNfuuftUYHHpGRTWUhBa8wNblunCAOUCt+1uFcg1L7NaxQTA==", - "dev": true, - "dependencies": { - "commander": "7.2.0", - "node-watch": "0.7.3", - "tiny-glob": "0.2.9" - }, - "bin": { - "qunit": "bin/qunit.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/qunit/node_modules/commander": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", - "dev": true, - "engines": { - "node": ">= 10" - } - }, - "node_modules/range-parser": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", - "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/raw-body": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz", - "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==", - "dev": true, - "dependencies": { - "bytes": "3.1.1", - "http-errors": "1.8.1", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/raw-body/node_modules/bytes": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz", - "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/raw-body/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/readable-stream": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", - "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", - "devOptional": true, - "dependencies": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/release-zalgo": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz", - "integrity": "sha1-CXALflB0Mpc5Mw5TXFqQ+2eFFzA=", - "dev": true, - "dependencies": { - "es6-error": "^4.0.1" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/require-directory": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", - "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/require-main-filename": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", - "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", - "dev": true - }, - "node_modules/require-uncached": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", - "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=", - "dev": true, - "dependencies": { - "caller-path": "^0.1.0", - "resolve-from": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/requires-port": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", - "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", - "dev": true - }, - "node_modules/resolve-from": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", - "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/restore-cursor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", - "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==", - "dev": true, - "dependencies": { - "onetime": "^5.1.0", - "signal-exit": "^3.0.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "devOptional": true, - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/run-async": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", - "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==", - "dev": true, - "engines": { - "node": ">=0.12.0" - } - }, - "node_modules/rx-lite": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz", - "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=", - "dev": true - }, - "node_modules/rx-lite-aggregates": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz", - "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=", - "dev": true, - "dependencies": { - "rx-lite": "*" - } - }, - "node_modules/rxjs": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz", - "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==", - "dev": true, - "dependencies": { - "tslib": "^2.1.0" - } - }, - "node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "devOptional": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "devOptional": true - }, - "node_modules/saxes": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", - "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==", - "optional": true, - "dependencies": { - "xmlchars": "^2.2.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "devOptional": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/send": { - "version": "0.17.2", - "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz", - "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==", - "dev": true, - "dependencies": { - "debug": "2.6.9", - "depd": "~1.1.2", - "destroy": "~1.0.4", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "1.8.1", - "mime": "1.6.0", - "ms": "2.1.3", - "on-finished": "~2.3.0", - "range-parser": "~1.2.1", - "statuses": "~1.5.0" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/send/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/send/node_modules/debug/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true - }, - "node_modules/send/node_modules/ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true - }, - "node_modules/serve-static": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz", - "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==", - "dev": true, - "dependencies": { - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "parseurl": "~1.3.3", - "send": "0.17.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/set-blocking": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", - "devOptional": true - }, - "node_modules/setprototypeof": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", - "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", - "dev": true - }, - "node_modules/shebang-command": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", - "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", - "dev": true, - "dependencies": { - "shebang-regex": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/shebang-regex": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", - "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/shellwords": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz", - "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==", - "dev": true - }, - "node_modules/signal-exit": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", - "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==", - "devOptional": true - }, - "node_modules/simple-concat": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", - "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "optional": true - }, - "node_modules/simple-get": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz", - "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==", - "optional": true, - "dependencies": { - "decompress-response": "^4.2.0", - "once": "^1.3.1", - "simple-concat": "^1.0.0" - } - }, - "node_modules/slice-ansi": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz", - "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==", - "dev": true, - "dependencies": { - "is-fullwidth-code-point": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/socket.io": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.4.1.tgz", - "integrity": "sha512-s04vrBswdQBUmuWJuuNTmXUVJhP0cVky8bBDhdkf8y0Ptsu7fKU2LuLbts9g+pdmAdyMMn8F/9Mf1/wbtUN0fg==", - "dev": true, - "dependencies": { - "accepts": "~1.3.4", - "base64id": "~2.0.0", - "debug": "~4.3.2", - "engine.io": "~6.1.0", - "socket.io-adapter": "~2.3.3", - "socket.io-parser": "~4.0.4" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/socket.io-adapter": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.3.3.tgz", - "integrity": "sha512-Qd/iwn3VskrpNO60BeRyCyr8ZWw9CPZyitW4AQwmRZ8zCiyDiL+znRnWX6tDHXnWn1sJrM1+b6Mn6wEDJJ4aYQ==", - "dev": true - }, - "node_modules/socket.io-parser": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", - "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==", - "dev": true, - "dependencies": { - "@types/component-emitter": "^1.2.10", - "component-emitter": "~1.3.0", - "debug": "~4.3.1" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "devOptional": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/spawn-args": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/spawn-args/-/spawn-args-0.2.0.tgz", - "integrity": "sha1-+30L0dcP1DFr2ePew4nmX51jYbs=", - "dev": true - }, - "node_modules/spawn-wrap": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-2.0.0.tgz", - "integrity": "sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==", - "dev": true, - "dependencies": { - "foreground-child": "^2.0.0", - "is-windows": "^1.0.2", - "make-dir": "^3.0.0", - "rimraf": "^3.0.0", - "signal-exit": "^3.0.2", - "which": "^2.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/spawn-wrap/node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/sprintf-js": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", - "dev": true - }, - "node_modules/statuses": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", - "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", - "dev": true, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "devOptional": true, - "dependencies": { - "safe-buffer": "~5.2.0" - } - }, - "node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "devOptional": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "devOptional": true, - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-bom": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz", - "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/strip-eof": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", - "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/strip-json-comments": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/styled_string": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/styled_string/-/styled_string-0.0.1.tgz", - "integrity": "sha1-0ieCvYEpVFm8Tx3xjEutjpTdEko=", - "dev": true - }, - "node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/symbol-observable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", - "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/symbol-tree": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", - "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", - "optional": true - }, - "node_modules/table": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz", - "integrity": "sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==", - "dev": true, - "dependencies": { - "ajv": "^5.2.3", - "ajv-keywords": "^2.1.0", - "chalk": "^2.1.0", - "lodash": "^4.17.4", - "slice-ansi": "1.0.0", - "string-width": "^2.1.1" - } - }, - "node_modules/table/node_modules/ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/table/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/table/node_modules/string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "dependencies": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/table/node_modules/strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "dependencies": { - "ansi-regex": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/tap-parser": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/tap-parser/-/tap-parser-7.0.0.tgz", - "integrity": "sha512-05G8/LrzqOOFvZhhAk32wsGiPZ1lfUrl+iV7+OkKgfofZxiceZWMHkKmow71YsyVQ8IvGBP2EjcIjE5gL4l5lA==", - "dev": true, - "dependencies": { - "events-to-array": "^1.0.1", - "js-yaml": "^3.2.7", - "minipass": "^2.2.0" - }, - "bin": { - "tap-parser": "bin/cmd.js" - } - }, - "node_modules/tap-parser/node_modules/minipass": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", - "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", - "dev": true, - "dependencies": { - "safe-buffer": "^5.1.2", - "yallist": "^3.0.0" - } - }, - "node_modules/tap-parser/node_modules/yallist": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", - "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true - }, - "node_modules/tar": { - "version": "6.1.11", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz", - "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==", - "optional": true, - "dependencies": { - "chownr": "^2.0.0", - "fs-minipass": "^2.0.0", - "minipass": "^3.0.0", - "minizlib": "^2.1.1", - "mkdirp": "^1.0.3", - "yallist": "^4.0.0" - }, - "engines": { - "node": ">= 10" - } - }, - "node_modules/test-exclude": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", - "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", - "dev": true, - "dependencies": { - "@istanbuljs/schema": "^0.1.2", - "glob": "^7.1.4", - "minimatch": "^3.0.4" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/testem": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/testem/-/testem-3.6.0.tgz", - "integrity": "sha512-sXwx2IlOadOhrKf0hsV1Yt/yuYhdfrtJ4dpp7T6pFN62GjMyKifjAv2SFm+4zYHee1JwxheO7JUL0+3iN0rlHw==", - "dev": true, - "dependencies": { - "@xmldom/xmldom": "^0.7.1", - "backbone": "^1.1.2", - "bluebird": "^3.4.6", - "charm": "^1.0.0", - "commander": "^2.6.0", - "compression": "^1.7.4", - "consolidate": "^0.15.1", - "execa": "^1.0.0", - "express": "^4.10.7", - "fireworm": "^0.7.0", - "glob": "^7.0.4", - "http-proxy": "^1.13.1", - "js-yaml": "^3.2.5", - "lodash.assignin": "^4.1.0", - "lodash.castarray": "^4.4.0", - "lodash.clonedeep": "^4.4.1", - "lodash.find": "^4.5.1", - "lodash.uniqby": "^4.7.0", - "mkdirp": "^0.5.1", - "mustache": "^3.0.0", - "node-notifier": "^9.0.1", - "npmlog": "^4.0.0", - "printf": "^0.6.1", - "rimraf": "^2.4.4", - "socket.io": "^4.1.2", - "spawn-args": "^0.2.0", - "styled_string": "0.0.1", - "tap-parser": "^7.0.0", - "tmp": "0.0.33" - }, - "bin": { - "testem": "testem.js" - }, - "engines": { - "node": ">= 7.*" - } - }, - "node_modules/testem/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/testem/node_modules/aproba": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", - "dev": true - }, - "node_modules/testem/node_modules/are-we-there-yet": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz", - "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==", - "dev": true, - "dependencies": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" - } - }, - "node_modules/testem/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, - "node_modules/testem/node_modules/gauge": { - "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", - "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", - "dev": true, - "dependencies": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" - } - }, - "node_modules/testem/node_modules/is-fullwidth-code-point": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "dev": true, - "dependencies": { - "number-is-nan": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/testem/node_modules/mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "dev": true, - "dependencies": { - "minimist": "^1.2.5" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, - "node_modules/testem/node_modules/npmlog": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", - "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", - "dev": true, - "dependencies": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" - } - }, - "node_modules/testem/node_modules/readable-stream": { - "version": "2.3.7", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", - "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", - "dev": true, - "dependencies": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "node_modules/testem/node_modules/rimraf": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", - "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", - "dev": true, - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - } - }, - "node_modules/testem/node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true - }, - "node_modules/testem/node_modules/string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "dependencies": { - "safe-buffer": "~5.1.0" - } - }, - "node_modules/testem/node_modules/string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "dev": true, - "dependencies": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/testem/node_modules/strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/text-table": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", - "dev": true - }, - "node_modules/through": { - "version": "2.3.8", - "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", - "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", - "dev": true - }, - "node_modules/tiny-glob": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", - "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==", - "dev": true, - "dependencies": { - "globalyzer": "0.1.0", - "globrex": "^0.1.2" - } - }, - "node_modules/tmp": { - "version": "0.0.33", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", - "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", - "dev": true, - "dependencies": { - "os-tmpdir": "~1.0.2" - }, - "engines": { - "node": ">=0.6.0" - } - }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/toidentifier": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", - "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", - "dev": true, - "engines": { - "node": ">=0.6" - } - }, - "node_modules/tough-cookie": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz", - "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==", - "optional": true, - "dependencies": { - "psl": "^1.1.33", - "punycode": "^2.1.1", - "universalify": "^0.1.2" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/tr46": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", - "devOptional": true - }, - "node_modules/tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==", - "dev": true - }, - "node_modules/type-check": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", - "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", - "devOptional": true, - "dependencies": { - "prelude-ls": "~1.1.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/type-is": { - "version": "1.6.18", - "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", - "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", - "dev": true, - "dependencies": { - "media-typer": "0.3.0", - "mime-types": "~2.1.24" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/typedarray": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", - "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", - "dev": true - }, - "node_modules/typedarray-to-buffer": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", - "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", - "dev": true, - "dependencies": { - "is-typedarray": "^1.0.0" - } - }, - "node_modules/uglify-js": { - "version": "3.15.5", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.5.tgz", - "integrity": "sha512-hNM5q5GbBRB5xB+PMqVRcgYe4c8jbyZ1pzZhS6jbq54/4F2gFK869ZheiE5A8/t+W5jtTNpWef/5Q9zk639FNQ==", - "dev": true, - "bin": { - "uglifyjs": "bin/uglifyjs" - }, - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/underscore": { - "version": "1.13.2", - "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.2.tgz", - "integrity": "sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g==", - "dev": true - }, - "node_modules/universalify": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", - "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", - "optional": true, - "engines": { - "node": ">= 4.0.0" - } - }, - "node_modules/unpipe": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", - "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "devOptional": true - }, - "node_modules/utils-merge": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", - "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", - "dev": true, - "engines": { - "node": ">= 0.4.0" - } - }, - "node_modules/uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", - "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", - "dev": true, - "bin": { - "uuid": "bin/uuid" - } - }, - "node_modules/vary": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", - "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/w3c-hr-time": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", - "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==", - "optional": true, - "dependencies": { - "browser-process-hrtime": "^1.0.0" - } - }, - "node_modules/w3c-xmlserializer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz", - "integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==", - "optional": true, - "dependencies": { - "xml-name-validator": "^4.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/wcwidth": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", - "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=", - "dev": true, - "dependencies": { - "defaults": "^1.0.3" - } - }, - "node_modules/webidl-conversions": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", - "devOptional": true - }, - "node_modules/whatwg-encoding": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", - "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", - "optional": true, - "dependencies": { - "iconv-lite": "0.6.3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/whatwg-mimetype": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz", - "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==", - "optional": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/whatwg-url": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", - "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", - "devOptional": true, - "dependencies": { - "tr46": "~0.0.3", - "webidl-conversions": "^3.0.0" - } - }, - "node_modules/which": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "which": "bin/which" - } - }, - "node_modules/which-module": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", - "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", - "dev": true - }, - "node_modules/wide-align": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", - "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", - "devOptional": true, - "dependencies": { - "string-width": "^1.0.2 || 2 || 3 || 4" - } - }, - "node_modules/word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", - "devOptional": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/wordwrap": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", - "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", - "dev": true - }, - "node_modules/wrap-ansi": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", - "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/wrap-ansi/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/wrap-ansi/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/wrap-ansi/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "devOptional": true - }, - "node_modules/write": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz", - "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=", - "dev": true, - "dependencies": { - "mkdirp": "^0.5.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/write-file-atomic": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", - "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", - "dev": true, - "dependencies": { - "imurmurhash": "^0.1.4", - "is-typedarray": "^1.0.0", - "signal-exit": "^3.0.2", - "typedarray-to-buffer": "^3.1.5" - } - }, - "node_modules/write/node_modules/mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "dev": true, - "dependencies": { - "minimist": "^1.2.5" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, - "node_modules/ws": { - "version": "8.4.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz", - "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==", - "optional": true, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, - "node_modules/xml-name-validator": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", - "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==", - "optional": true, - "engines": { - "node": ">=12" - } - }, - "node_modules/xmlchars": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", - "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", - "optional": true - }, - "node_modules/y18n": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", - "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", - "dev": true - }, - "node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "devOptional": true - }, - "node_modules/yargs": { - "version": "15.4.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", - "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", - "dev": true, - "dependencies": { - "cliui": "^6.0.0", - "decamelize": "^1.2.0", - "find-up": "^4.1.0", - "get-caller-file": "^2.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^2.0.0", - "set-blocking": "^2.0.0", - "string-width": "^4.2.0", - "which-module": "^2.0.0", - "y18n": "^4.0.0", - "yargs-parser": "^18.1.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/yargs-parser": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", - "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", - "dev": true, - "dependencies": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - }, - "engines": { - "node": ">=6" - } - } - }, "dependencies": { "@babel/code-frame": { "version": "7.16.7", @@ -6624,6 +290,55 @@ "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", "dev": true }, + "@jridgewell/gen-mapping": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz", + "integrity": "sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==", + "dev": true, + "requires": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "@jridgewell/resolve-uri": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz", + "integrity": "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==", + "dev": true + }, + "@jridgewell/set-array": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz", + "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==", + "dev": true + }, + "@jridgewell/source-map": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", + "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "dev": true, + "requires": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "@jridgewell/sourcemap-codec": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz", + "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==", + "dev": true + }, + "@jridgewell/trace-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz", + "integrity": "sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==", + "dev": true, + "requires": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, "@mapbox/node-pre-gyp": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.8.tgz", @@ -6717,8 +432,7 @@ "acorn": { "version": "8.7.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz", - "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==", - "optional": true + "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==" }, "acorn-globals": { "version": "6.0.0", @@ -6796,8 +510,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz", "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=", - "dev": true, - "requires": {} + "dev": true }, "ansi-escape": { "version": "1.1.0", @@ -6825,8 +538,7 @@ "ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "devOptional": true + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" }, "ansi-styles": { "version": "3.2.1", @@ -6987,8 +699,7 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "devOptional": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "base64-arraybuffer": { "version": "1.0.1", @@ -7079,7 +790,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "devOptional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7368,8 +1078,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "devOptional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "concat-stream": { "version": "1.6.2", @@ -7418,8 +1127,7 @@ "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "devOptional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "consolidate": { "version": "0.15.1", @@ -7584,7 +1292,6 @@ "version": "4.3.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", - "devOptional": true, "requires": { "ms": "2.1.2" } @@ -7613,8 +1320,7 @@ "deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", - "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", - "devOptional": true + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==" }, "deep-object-diff": { "version": "1.1.7", @@ -7649,8 +1355,7 @@ "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "devOptional": true + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=" }, "depd": { "version": "1.1.2", @@ -7711,8 +1416,7 @@ "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "devOptional": true + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" }, "encodeurl": { "version": "1.0.2", @@ -7751,8 +1455,7 @@ "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -8058,8 +1761,7 @@ "esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", - "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", - "devOptional": true + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" }, "esquery": { "version": "1.4.0", @@ -8082,14 +1784,12 @@ "estraverse": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", - "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", - "devOptional": true + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==" }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "devOptional": true + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==" }, "etag": { "version": "1.8.1", @@ -8249,8 +1949,7 @@ "fast-levenshtein": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", - "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", - "devOptional": true + "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, "figures": { "version": "3.2.0", @@ -8473,8 +2172,14 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "devOptional": true + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true }, "functional-red-black-tree": { "version": "1.0.1", @@ -8536,7 +2241,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", - "devOptional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -8615,8 +2319,7 @@ "has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", - "devOptional": true + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=" }, "hasha": { "version": "5.2.2", @@ -8725,7 +2428,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "devOptional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -8734,8 +2436,7 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "devOptional": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "inquirer": { "version": "8.2.1", @@ -8987,8 +2688,7 @@ "is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "devOptional": true + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" }, "is-interactive": { "version": "1.0.0", @@ -9198,6 +2898,34 @@ "istanbul-lib-report": "^3.0.0" } }, + "jest-worker": { + "version": "26.6.2", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", + "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==", + "dev": true, + "requires": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^7.0.0" + }, + "dependencies": { + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", @@ -9325,7 +3053,6 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", - "devOptional": true, "requires": { "prelude-ls": "~1.1.2", "type-check": "~0.3.2" @@ -9500,7 +3227,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "devOptional": true, "requires": { "yallist": "^4.0.0" } @@ -9509,7 +3235,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "devOptional": true, "requires": { "semver": "^6.0.0" }, @@ -9517,8 +3242,7 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "devOptional": true + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" } } }, @@ -9534,6 +3258,12 @@ "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=", "dev": true }, + "merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -9549,14 +3279,12 @@ "mime-db": { "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", - "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", - "devOptional": true + "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==" }, "mime-types": { "version": "2.1.34", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", - "devOptional": true, "requires": { "mime-db": "1.51.0" } @@ -9577,7 +3305,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "devOptional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -9622,8 +3349,7 @@ "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "devOptional": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "mustache": { "version": "3.2.1", @@ -9671,7 +3397,6 @@ "version": "2.6.7", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", - "devOptional": true, "requires": { "whatwg-url": "^5.0.0" } @@ -9824,8 +3549,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "devOptional": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "on-finished": { "version": "2.3.0", @@ -9846,7 +3570,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "devOptional": true, "requires": { "wrappy": "1" } @@ -9864,7 +3587,6 @@ "version": "0.8.3", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", - "devOptional": true, "requires": { "deep-is": "~0.1.3", "fast-levenshtein": "~2.0.6", @@ -10026,8 +3748,7 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "devOptional": true + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-is-inside": { "version": "1.0.2", @@ -10086,8 +3807,7 @@ "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", - "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", - "devOptional": true + "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=" }, "printf": { "version": "0.6.1", @@ -10179,6 +3899,15 @@ } } }, + "randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dev": true, + "requires": { + "safe-buffer": "^5.1.0" + } + }, "range-parser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", @@ -10218,7 +3947,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", - "devOptional": true, "requires": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -10282,11 +4010,31 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "devOptional": true, "requires": { "glob": "^7.1.3" } }, + "rollup": { + "version": "2.75.6", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.6.tgz", + "integrity": "sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==", + "dev": true, + "requires": { + "fsevents": "~2.3.2" + } + }, + "rollup-plugin-terser": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", + "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "jest-worker": "^26.2.1", + "serialize-javascript": "^4.0.0", + "terser": "^5.0.0" + } + }, "run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -10320,14 +4068,12 @@ "safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "devOptional": true + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" }, "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "devOptional": true + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "saxes": { "version": "5.0.1", @@ -10342,7 +4088,6 @@ "version": "7.3.5", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "devOptional": true, "requires": { "lru-cache": "^6.0.0" } @@ -10393,6 +4138,15 @@ } } }, + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } + }, "serve-static": { "version": "1.14.2", "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz", @@ -10408,8 +4162,7 @@ "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", - "devOptional": true + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" }, "setprototypeof": { "version": "1.2.0", @@ -10441,8 +4194,7 @@ "signal-exit": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", - "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==", - "devOptional": true + "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==" }, "simple-concat": { "version": "1.0.1", @@ -10512,8 +4264,17 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "devOptional": true + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + }, + "source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } }, "spawn-args": { "version": "0.2.0", @@ -10558,31 +4319,28 @@ "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", "dev": true }, - "string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "devOptional": true, - "requires": { - "safe-buffer": "~5.2.0" - } - }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "devOptional": true, "requires": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, + "string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "requires": { + "safe-buffer": "~5.2.0" + } + }, "strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "devOptional": true, "requires": { "ansi-regex": "^5.0.1" } @@ -10722,6 +4480,26 @@ "yallist": "^4.0.0" } }, + "terser": { + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz", + "integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==", + "dev": true, + "requires": { + "@jridgewell/source-map": "^0.3.2", + "acorn": "^8.5.0", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + } + } + }, "test-exclude": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", @@ -10874,15 +4652,6 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -10894,6 +4663,15 @@ "strip-ansi": "^3.0.0" } }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -10962,8 +4740,7 @@ "tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", - "devOptional": true + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" }, "tslib": { "version": "2.3.1", @@ -10975,7 +4752,6 @@ "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", - "devOptional": true, "requires": { "prelude-ls": "~1.1.2" } @@ -11038,8 +4814,7 @@ "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "devOptional": true + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" }, "utils-merge": { "version": "1.0.1", @@ -11089,8 +4864,7 @@ "webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", - "devOptional": true + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" }, "whatwg-encoding": { "version": "2.0.0", @@ -11111,7 +4885,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", - "devOptional": true, "requires": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" @@ -11136,7 +4909,6 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", - "devOptional": true, "requires": { "string-width": "^1.0.2 || 2 || 3 || 4" } @@ -11144,8 +4916,7 @@ "word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", - "devOptional": true + "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==" }, "wordwrap": { "version": "1.0.0", @@ -11193,8 +4964,7 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "devOptional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "write": { "version": "0.2.1", @@ -11232,8 +5002,7 @@ "version": "8.4.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz", "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==", - "optional": true, - "requires": {} + "optional": true }, "xml-name-validator": { "version": "4.0.0", @@ -11256,8 +5025,7 @@ "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "devOptional": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "yargs": { "version": "15.4.1", diff --git a/package.json b/package.json index 21f508cbf13..6f2bacb8682 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "scripts": { "changelog": "auto-changelog -o change-output.md --unreleased-only", "build": "node ./scripts build", + "build-rollup": "rollup -c", "build:fast": "npm run build -- --fast", "dev": "node ./scripts", "start": "node ./scripts start", @@ -83,6 +84,8 @@ "nyc": "^15.1.0", "pixelmatch": "^4.0.2", "qunit": "^2.17.2", + "rollup": "^2.75.6", + "rollup-plugin-terser": "^7.0.2", "testem": "^3.2.0", "uglify-js": "^3.15.5" }, diff --git a/src/mixins/canvas_dataurl_exporter.mixin.js b/src/mixins/canvas_dataurl_exporter.mixin.js index 75d7322ca8e..f84072c01aa 100644 --- a/src/mixins/canvas_dataurl_exporter.mixin.js +++ b/src/mixins/canvas_dataurl_exporter.mixin.js @@ -1,105 +1,103 @@ -(function () { - fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { +fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately - * @param {Object} [options] Options object - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 - * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. - * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format - * @see {@link https://jsfiddle.net/xsjua1rd/ demo} - * @example Generate jpeg dataURL with lower quality - * var dataURL = canvas.toDataURL({ - * format: 'jpeg', - * quality: 0.8 - * }); - * @example Generate cropped png dataURL (clipping of canvas) - * var dataURL = canvas.toDataURL({ - * format: 'png', - * left: 100, - * top: 100, - * width: 200, - * height: 200 - * }); - * @example Generate double scaled png dataURL - * var dataURL = canvas.toDataURL({ - * format: 'png', - * multiplier: 2 - * }); - * @example Generate dataURL with objects that overlap a specified object - * var myObject; - * var dataURL = canvas.toDataURL({ - * filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject) - * }); - */ - toDataURL: function (options) { - options || (options = { }); + /** + * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately + * @param {Object} [options] Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 + * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + * @see {@link https://jsfiddle.net/xsjua1rd/ demo} + * @example Generate jpeg dataURL with lower quality + * var dataURL = canvas.toDataURL({ + * format: 'jpeg', + * quality: 0.8 + * }); + * @example Generate cropped png dataURL (clipping of canvas) + * var dataURL = canvas.toDataURL({ + * format: 'png', + * left: 100, + * top: 100, + * width: 200, + * height: 200 + * }); + * @example Generate double scaled png dataURL + * var dataURL = canvas.toDataURL({ + * format: 'png', + * multiplier: 2 + * }); + * @example Generate dataURL with objects that overlap a specified object + * var myObject; + * var dataURL = canvas.toDataURL({ + * filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject) + * }); + */ + toDataURL: function (options) { + options || (options = { }); - var format = options.format || 'png', - quality = options.quality || 1, - multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), - canvasEl = this.toCanvasElement(multiplier, options); - return fabric.util.toDataURL(canvasEl, format, quality); - }, + var format = options.format || 'png', + quality = options.quality || 1, + multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), + canvasEl = this.toCanvasElement(multiplier, options); + return fabric.util.toDataURL(canvasEl, format, quality); + }, - /** - * Create a new HTMLCanvas element painted with the current canvas content. - * No need to resize the actual one or repaint it. - * Will transfer object ownership to a new canvas, paint it, and set everything back. - * This is an intermediary step used to get to a dataUrl but also it is useful to - * create quick image copies of a canvas without passing for the dataUrl string - * @param {Number} [multiplier] a zoom factor. - * @param {Object} [options] Cropping informations - * @param {Number} [options.left] Cropping left offset. - * @param {Number} [options.top] Cropping top offset. - * @param {Number} [options.width] Cropping width. - * @param {Number} [options.height] Cropping height. - * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. - */ - toCanvasElement: function (multiplier, options) { - multiplier = multiplier || 1; - options = options || { }; - var scaledWidth = (options.width || this.width) * multiplier, - scaledHeight = (options.height || this.height) * multiplier, - zoom = this.getZoom(), - originalWidth = this.width, - originalHeight = this.height, - newZoom = zoom * multiplier, - vp = this.viewportTransform, - translateX = (vp[4] - (options.left || 0)) * multiplier, - translateY = (vp[5] - (options.top || 0)) * multiplier, - originalInteractive = this.interactive, - newVp = [newZoom, 0, 0, newZoom, translateX, translateY], - originalRetina = this.enableRetinaScaling, - canvasEl = fabric.util.createCanvasElement(), - originalContextTop = this.contextTop, - objectsToRender = options.filter ? this._objects.filter(options.filter) : this._objects; - canvasEl.width = scaledWidth; - canvasEl.height = scaledHeight; - this.contextTop = null; - this.enableRetinaScaling = false; - this.interactive = false; - this.viewportTransform = newVp; - this.width = scaledWidth; - this.height = scaledHeight; - this.calcViewportBoundaries(); - this.renderCanvas(canvasEl.getContext('2d'), objectsToRender); - this.viewportTransform = vp; - this.width = originalWidth; - this.height = originalHeight; - this.calcViewportBoundaries(); - this.interactive = originalInteractive; - this.enableRetinaScaling = originalRetina; - this.contextTop = originalContextTop; - return canvasEl; - }, - }); + /** + * Create a new HTMLCanvas element painted with the current canvas content. + * No need to resize the actual one or repaint it. + * Will transfer object ownership to a new canvas, paint it, and set everything back. + * This is an intermediary step used to get to a dataUrl but also it is useful to + * create quick image copies of a canvas without passing for the dataUrl string + * @param {Number} [multiplier] a zoom factor. + * @param {Object} [options] Cropping informations + * @param {Number} [options.left] Cropping left offset. + * @param {Number} [options.top] Cropping top offset. + * @param {Number} [options.width] Cropping width. + * @param {Number} [options.height] Cropping height. + * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. + */ + toCanvasElement: function (multiplier, options) { + multiplier = multiplier || 1; + options = options || { }; + var scaledWidth = (options.width || this.width) * multiplier, + scaledHeight = (options.height || this.height) * multiplier, + zoom = this.getZoom(), + originalWidth = this.width, + originalHeight = this.height, + newZoom = zoom * multiplier, + vp = this.viewportTransform, + translateX = (vp[4] - (options.left || 0)) * multiplier, + translateY = (vp[5] - (options.top || 0)) * multiplier, + originalInteractive = this.interactive, + newVp = [newZoom, 0, 0, newZoom, translateX, translateY], + originalRetina = this.enableRetinaScaling, + canvasEl = fabric.util.createCanvasElement(), + originalContextTop = this.contextTop, + objectsToRender = options.filter ? this._objects.filter(options.filter) : this._objects; + canvasEl.width = scaledWidth; + canvasEl.height = scaledHeight; + this.contextTop = null; + this.enableRetinaScaling = false; + this.interactive = false; + this.viewportTransform = newVp; + this.width = scaledWidth; + this.height = scaledHeight; + this.calcViewportBoundaries(); + this.renderCanvas(canvasEl.getContext('2d'), objectsToRender); + this.viewportTransform = vp; + this.width = originalWidth; + this.height = originalHeight; + this.calcViewportBoundaries(); + this.interactive = originalInteractive; + this.enableRetinaScaling = originalRetina; + this.contextTop = originalContextTop; + return canvasEl; + }, +}); -})(); diff --git a/src/mixins/eraser_brush.mixin.js b/src/mixins/eraser_brush.mixin.js index fc1825e1f47..1f38f2b2c81 100644 --- a/src/mixins/eraser_brush.mixin.js +++ b/src/mixins/eraser_brush.mixin.js @@ -1,786 +1,784 @@ -(function () { - /** ERASER_START */ +/** ERASER_START */ + +var __drawClipPath = fabric.Object.prototype._drawClipPath; +var _needsItsOwnCache = fabric.Object.prototype.needsItsOwnCache; +var _toObject = fabric.Object.prototype.toObject; +var _getSvgCommons = fabric.Object.prototype.getSvgCommons; +var __createBaseClipPathSVGMarkup = fabric.Object.prototype._createBaseClipPathSVGMarkup; +var __createBaseSVGMarkup = fabric.Object.prototype._createBaseSVGMarkup; + +fabric.Object.prototype.cacheProperties.push('eraser'); +fabric.Object.prototype.stateProperties.push('eraser'); + +/** + * @fires erasing:end + */ +fabric.util.object.extend(fabric.Object.prototype, { + /** + * Indicates whether this object can be erased by {@link fabric.EraserBrush} + * The `deep` option introduces fine grained control over a group's `erasable` property. + * When set to `deep` the eraser will erase nested objects if they are erasable, leaving the group and the other objects untouched. + * When set to `true` the eraser will erase the entire group. Once the group changes the eraser is propagated to its children for proper functionality. + * When set to `false` the eraser will leave all objects including the group untouched. + * @tutorial {@link http://fabricjs.com/erasing#erasable_property} + * @type boolean | 'deep' + * @default true + */ + erasable: true, - var __drawClipPath = fabric.Object.prototype._drawClipPath; - var _needsItsOwnCache = fabric.Object.prototype.needsItsOwnCache; - var _toObject = fabric.Object.prototype.toObject; - var _getSvgCommons = fabric.Object.prototype.getSvgCommons; - var __createBaseClipPathSVGMarkup = fabric.Object.prototype._createBaseClipPathSVGMarkup; - var __createBaseSVGMarkup = fabric.Object.prototype._createBaseSVGMarkup; + /** + * @tutorial {@link http://fabricjs.com/erasing#eraser} + * @type fabric.Eraser + */ + eraser: undefined, + + /** + * @override + * @returns Boolean + */ + needsItsOwnCache: function () { + return _needsItsOwnCache.call(this) || !!this.eraser; + }, - fabric.Object.prototype.cacheProperties.push('eraser'); - fabric.Object.prototype.stateProperties.push('eraser'); + /** + * draw eraser above clip path + * @override + * @private + * @param {CanvasRenderingContext2D} ctx + * @param {fabric.Object} clipPath + */ + _drawClipPath: function (ctx, clipPath) { + __drawClipPath.call(this, ctx, clipPath); + if (this.eraser) { + // update eraser size to match instance + var size = this._getNonTransformedDimensions(); + this.eraser.isType('eraser') && this.eraser.set({ + width: size.x, + height: size.y + }); + __drawClipPath.call(this, ctx, this.eraser); + } + }, /** - * @fires erasing:end + * Returns an object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance */ - fabric.util.object.extend(fabric.Object.prototype, { - /** - * Indicates whether this object can be erased by {@link fabric.EraserBrush} - * The `deep` option introduces fine grained control over a group's `erasable` property. - * When set to `deep` the eraser will erase nested objects if they are erasable, leaving the group and the other objects untouched. - * When set to `true` the eraser will erase the entire group. Once the group changes the eraser is propagated to its children for proper functionality. - * When set to `false` the eraser will leave all objects including the group untouched. - * @tutorial {@link http://fabricjs.com/erasing#erasable_property} - * @type boolean | 'deep' - * @default true - */ - erasable: true, + toObject: function (propertiesToInclude) { + var object = _toObject.call(this, ['erasable'].concat(propertiesToInclude)); + if (this.eraser && !this.eraser.excludeFromExport) { + object.eraser = this.eraser.toObject(propertiesToInclude); + } + return object; + }, + + /* _TO_SVG_START_ */ + /** + * Returns id attribute for svg output + * @override + * @return {String} + */ + getSvgCommons: function () { + return _getSvgCommons.call(this) + (this.eraser ? 'mask="url(#' + this.eraser.clipPathId + ')" ' : ''); + }, + + /** + * create svg markup for eraser + * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 + * must be called before object markup creation as it relies on the `clipPathId` property of the mask + * @param {Function} [reviver] + * @returns + */ + _createEraserSVGMarkup: function (reviver) { + if (this.eraser) { + this.eraser.clipPathId = 'MASK_' + fabric.Object.__uid++; + return [ + '', + this.eraser.toSVG(reviver), + '', '\n' + ].join(''); + } + return ''; + }, + + /** + * @private + */ + _createBaseClipPathSVGMarkup: function (objectMarkup, options) { + return [ + this._createEraserSVGMarkup(options && options.reviver), + __createBaseClipPathSVGMarkup.call(this, objectMarkup, options) + ].join(''); + }, + + /** + * @private + */ + _createBaseSVGMarkup: function (objectMarkup, options) { + return [ + this._createEraserSVGMarkup(options && options.reviver), + __createBaseSVGMarkup.call(this, objectMarkup, options) + ].join(''); + } + /* _TO_SVG_END_ */ +}); + +fabric.util.object.extend(fabric.Group.prototype, { + /** + * @private + * @param {fabric.Path} path + * @returns {Promise} + */ + _addEraserPathToObjects: function (path) { + return Promise.all(this._objects.map(function (object) { + return fabric.EraserBrush.prototype._addPathToObjectEraser.call( + fabric.EraserBrush.prototype, + object, + path + ); + })); + }, + + /** + * Applies the group's eraser to its objects + * @tutorial {@link http://fabricjs.com/erasing#erasable_property} + * @returns {Promise} + */ + applyEraserToObjects: function () { + var _this = this, eraser = this.eraser; + return Promise.resolve() + .then(function () { + if (eraser) { + delete _this.eraser; + var transform = _this.calcTransformMatrix(); + return eraser.clone() + .then(function (eraser) { + var clipPath = _this.clipPath; + return Promise.all(eraser.getObjects('path') + .map(function (path) { + // first we transform the path from the group's coordinate system to the canvas' + var originalTransform = fabric.util.multiplyTransformMatrices( + transform, + path.calcTransformMatrix() + ); + fabric.util.applyTransformToObject(path, originalTransform); + return clipPath ? + clipPath.clone() + .then(function (_clipPath) { + var eraserPath = fabric.EraserBrush.prototype.applyClipPathToPath.call( + fabric.EraserBrush.prototype, + path, + _clipPath, + transform + ); + return _this._addEraserPathToObjects(eraserPath); + }, ['absolutePositioned', 'inverted']) : + _this._addEraserPathToObjects(path); + })); + }); + } + }); + } +}); + +/** + * An object's Eraser + * @private + * @class fabric.Eraser + * @extends fabric.Group + * @memberof fabric + */ +fabric.Eraser = fabric.util.createClass(fabric.Group, { + /** + * @readonly + * @static + */ + type: 'eraser', + + /** + * @default + */ + originX: 'center', + + /** + * @default + */ + originY: 'center', + + /** + * eraser should retain size + * dimensions should not change when paths are added or removed + * handled by {@link fabric.Object#_drawClipPath} + * @override + * @private + */ + layout: 'fixed', + + drawObject: function (ctx) { + ctx.save(); + ctx.fillStyle = 'black'; + ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); + ctx.restore(); + this.callSuper('drawObject', ctx); + }, + + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 + * for masking we need to add a white rect before all paths + * + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + _toSVG: function (reviver) { + var svgString = ['\n']; + var x = -this.width / 2, y = -this.height / 2; + var rectSvg = [ + '\n' + ].join(''); + svgString.push('\t\t', rectSvg); + for (var i = 0, len = this._objects.length; i < len; i++) { + svgString.push('\t\t', this._objects[i].toSVG(reviver)); + } + svgString.push('\n'); + return svgString; + }, + /* _TO_SVG_END_ */ +}); + +/** + * Returns instance from an object representation + * @static + * @memberOf fabric.Eraser + * @param {Object} object Object to create an Eraser from + * @returns {Promise} + */ +fabric.Eraser.fromObject = function (object) { + var objects = object.objects || [], + options = fabric.util.object.clone(object, true); + delete options.objects; + return Promise.all([ + fabric.util.enlivenObjects(objects), + fabric.util.enlivenObjectEnlivables(options) + ]).then(function (enlivedProps) { + return new fabric.Eraser(enlivedProps[0], Object.assign(options, enlivedProps[1]), true); + }); +}; + +var __renderOverlay = fabric.Canvas.prototype._renderOverlay; +/** + * @fires erasing:start + * @fires erasing:end + */ +fabric.util.object.extend(fabric.Canvas.prototype, { + /** + * Used by {@link #renderAll} + * @returns boolean + */ + isErasing: function () { + return ( + this.isDrawingMode && + this.freeDrawingBrush && + this.freeDrawingBrush.type === 'eraser' && + this.freeDrawingBrush._isErasing + ); + }, + + /** + * While erasing the brush clips out the erasing path from canvas + * so we need to render it on top of canvas every render + * @param {CanvasRenderingContext2D} ctx + */ + _renderOverlay: function (ctx) { + __renderOverlay.call(this, ctx); + this.isErasing() && this.freeDrawingBrush._render(); + } +}); + +/** + * EraserBrush class + * Supports selective erasing meaning that only erasable objects are affected by the eraser brush. + * Supports **inverted** erasing meaning that the brush can "undo" erasing. + * + * In order to support selective erasing, the brush clips the entire canvas + * and then draws all non-erasable objects over the erased path using a pattern brush so to speak (masking). + * If brush is **inverted** there is no need to clip canvas. The brush draws all erasable objects without their eraser. + * This achieves the desired effect of seeming to erase or unerase only erasable objects. + * After erasing is done the created path is added to all intersected objects' `eraser` property. + * + * In order to update the EraserBrush call `preparePattern`. + * It may come in handy when canvas changes during erasing (i.e animations) and you want the eraser to reflect the changes. + * + * @tutorial {@link http://fabricjs.com/erasing} + * @class fabric.EraserBrush + * @extends fabric.PencilBrush + * @memberof fabric + */ +fabric.EraserBrush = fabric.util.createClass( + fabric.PencilBrush, + /** @lends fabric.EraserBrush.prototype */ { + type: 'eraser', /** - * @tutorial {@link http://fabricjs.com/erasing#eraser} - * @type fabric.Eraser + * When set to `true` the brush will create a visual effect of undoing erasing + * @type boolean */ - eraser: undefined, + inverted: false, /** - * @override - * @returns Boolean + * Used to fix https://github.com/fabricjs/fabric.js/issues/7984 + * Reduces the path width while clipping the main context, resulting in a better visual overlap of both contexts + * @type number */ - needsItsOwnCache: function () { - return _needsItsOwnCache.call(this) || !!this.eraser; - }, + erasingWidthAliasing: 4, /** - * draw eraser above clip path - * @override * @private - * @param {CanvasRenderingContext2D} ctx - * @param {fabric.Object} clipPath */ - _drawClipPath: function (ctx, clipPath) { - __drawClipPath.call(this, ctx, clipPath); - if (this.eraser) { - // update eraser size to match instance - var size = this._getNonTransformedDimensions(); - this.eraser.isType('eraser') && this.eraser.set({ - width: size.x, - height: size.y - }); - __drawClipPath.call(this, ctx, this.eraser); - } - }, + _isErasing: false, /** - * Returns an object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance + * + * @private + * @param {fabric.Object} object + * @returns boolean */ - toObject: function (propertiesToInclude) { - var object = _toObject.call(this, ['erasable'].concat(propertiesToInclude)); - if (this.eraser && !this.eraser.excludeFromExport) { - object.eraser = this.eraser.toObject(propertiesToInclude); - } - return object; + _isErasable: function (object) { + return object.erasable !== false; }, - /* _TO_SVG_START_ */ /** - * Returns id attribute for svg output - * @override - * @return {String} + * @private + * This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\ + * Iterates over collections to allow nested selective erasing.\ + * Prepares objects before rendering the pattern brush.\ + * If brush is **NOT** inverted render all non-erasable objects.\ + * If brush is inverted render all objects, erasable objects without their eraser. + * This will render the erased parts as if they were not erased in the first place, achieving an undo effect. + * + * @param {fabric.Collection} collection + * @param {fabric.Object[]} objects + * @param {CanvasRenderingContext2D} ctx + * @param {{ visibility: fabric.Object[], eraser: fabric.Object[], collection: fabric.Object[] }} restorationContext */ - getSvgCommons: function () { - return _getSvgCommons.call(this) + (this.eraser ? 'mask="url(#' + this.eraser.clipPathId + ')" ' : ''); + _prepareCollectionTraversal: function (collection, objects, ctx, restorationContext) { + objects.forEach(function (obj) { + var dirty = false; + if (obj.forEachObject && obj.erasable === 'deep') { + // traverse + this._prepareCollectionTraversal(obj, obj._objects, ctx, restorationContext); + } + else if (!this.inverted && obj.erasable && obj.visible) { + // render only non-erasable objects + obj.visible = false; + restorationContext.visibility.push(obj); + dirty = true; + } + else if (this.inverted && obj.erasable && obj.eraser && obj.visible) { + // render all objects without eraser + var eraser = obj.eraser; + obj.eraser = undefined; + obj.dirty = true; + restorationContext.eraser.push([obj, eraser]); + dirty = true; + } + if (dirty && collection instanceof fabric.Object) { + collection.dirty = true; + restorationContext.collection.push(collection); + } + }, this); }, /** - * create svg markup for eraser - * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 - * must be called before object markup creation as it relies on the `clipPathId` property of the mask - * @param {Function} [reviver] - * @returns + * Prepare the pattern for the erasing brush + * This pattern will be drawn on the top context after clipping the main context, + * achieving a visual effect of erasing only erasable objects + * @private + * @param {fabric.Object[]} [objects] override default behavior by passing objects to render on pattern */ - _createEraserSVGMarkup: function (reviver) { - if (this.eraser) { - this.eraser.clipPathId = 'MASK_' + fabric.Object.__uid++; - return [ - '', - this.eraser.toSVG(reviver), - '', '\n' - ].join(''); + preparePattern: function (objects) { + if (!this._patternCanvas) { + this._patternCanvas = fabric.util.createCanvasElement(); + } + var canvas = this._patternCanvas; + objects = objects || this.canvas._objectsToRender || this.canvas._objects; + canvas.width = this.canvas.width; + canvas.height = this.canvas.height; + var patternCtx = canvas.getContext('2d'); + if (this.canvas._isRetinaScaling()) { + var retinaScaling = this.canvas.getRetinaScaling(); + this.canvas.__initRetinaScaling(retinaScaling, canvas, patternCtx); + } + var backgroundImage = this.canvas.backgroundImage, + bgErasable = backgroundImage && this._isErasable(backgroundImage), + overlayImage = this.canvas.overlayImage, + overlayErasable = overlayImage && this._isErasable(overlayImage); + if (!this.inverted && ((backgroundImage && !bgErasable) || !!this.canvas.backgroundColor)) { + if (bgErasable) { this.canvas.backgroundImage = undefined; } + this.canvas._renderBackground(patternCtx); + if (bgErasable) { this.canvas.backgroundImage = backgroundImage; } + } + else if (this.inverted) { + var eraser = backgroundImage && backgroundImage.eraser; + if (eraser) { + backgroundImage.eraser = undefined; + backgroundImage.dirty = true; + } + this.canvas._renderBackground(patternCtx); + if (eraser) { + backgroundImage.eraser = eraser; + backgroundImage.dirty = true; + } + } + patternCtx.save(); + patternCtx.transform.apply(patternCtx, this.canvas.viewportTransform); + var restorationContext = { visibility: [], eraser: [], collection: [] }; + this._prepareCollectionTraversal(this.canvas, objects, patternCtx, restorationContext); + this.canvas._renderObjects(patternCtx, objects); + restorationContext.visibility.forEach(function (obj) { obj.visible = true; }); + restorationContext.eraser.forEach(function (entry) { + var obj = entry[0], eraser = entry[1]; + obj.eraser = eraser; + obj.dirty = true; + }); + restorationContext.collection.forEach(function (obj) { obj.dirty = true; }); + patternCtx.restore(); + if (!this.inverted && ((overlayImage && !overlayErasable) || !!this.canvas.overlayColor)) { + if (overlayErasable) { this.canvas.overlayImage = undefined; } + __renderOverlay.call(this.canvas, patternCtx); + if (overlayErasable) { this.canvas.overlayImage = overlayImage; } + } + else if (this.inverted) { + var eraser = overlayImage && overlayImage.eraser; + if (eraser) { + overlayImage.eraser = undefined; + overlayImage.dirty = true; + } + __renderOverlay.call(this.canvas, patternCtx); + if (eraser) { + overlayImage.eraser = eraser; + overlayImage.dirty = true; + } } - return ''; }, /** + * Sets brush styles * @private + * @param {CanvasRenderingContext2D} ctx */ - _createBaseClipPathSVGMarkup: function (objectMarkup, options) { - return [ - this._createEraserSVGMarkup(options && options.reviver), - __createBaseClipPathSVGMarkup.call(this, objectMarkup, options) - ].join(''); + _setBrushStyles: function (ctx) { + this.callSuper('_setBrushStyles', ctx); + ctx.strokeStyle = 'black'; }, /** - * @private + * **Customiztion** + * + * if you need the eraser to update on each render (i.e animating during erasing) override this method by **adding** the following (performance may suffer): + * @example + * ``` + * if(ctx === this.canvas.contextTop) { + * this.preparePattern(); + * } + * ``` + * + * @override fabric.BaseBrush#_saveAndTransform + * @param {CanvasRenderingContext2D} ctx */ - _createBaseSVGMarkup: function (objectMarkup, options) { - return [ - this._createEraserSVGMarkup(options && options.reviver), - __createBaseSVGMarkup.call(this, objectMarkup, options) - ].join(''); - } - /* _TO_SVG_END_ */ - }); + _saveAndTransform: function (ctx) { + this.callSuper('_saveAndTransform', ctx); + this._setBrushStyles(ctx); + ctx.globalCompositeOperation = ctx === this.canvas.getContext() ? 'destination-out' : 'destination-in'; + }, - fabric.util.object.extend(fabric.Group.prototype, { /** - * @private - * @param {fabric.Path} path - * @returns {Promise} + * We indicate {@link fabric.PencilBrush} to repaint itself if necessary + * @returns */ - _addEraserPathToObjects: function (path) { - return Promise.all(this._objects.map(function (object) { - return fabric.EraserBrush.prototype._addPathToObjectEraser.call( - fabric.EraserBrush.prototype, - object, - path - ); - })); + needsFullRender: function () { + return true; }, /** - * Applies the group's eraser to its objects - * @tutorial {@link http://fabricjs.com/erasing#erasable_property} - * @returns {Promise} + * + * @param {fabric.Point} pointer + * @param {fabric.IEvent} options + * @returns */ - applyEraserToObjects: function () { - var _this = this, eraser = this.eraser; - return Promise.resolve() - .then(function () { - if (eraser) { - delete _this.eraser; - var transform = _this.calcTransformMatrix(); - return eraser.clone() - .then(function (eraser) { - var clipPath = _this.clipPath; - return Promise.all(eraser.getObjects('path') - .map(function (path) { - // first we transform the path from the group's coordinate system to the canvas' - var originalTransform = fabric.util.multiplyTransformMatrices( - transform, - path.calcTransformMatrix() - ); - fabric.util.applyTransformToObject(path, originalTransform); - return clipPath ? - clipPath.clone() - .then(function (_clipPath) { - var eraserPath = fabric.EraserBrush.prototype.applyClipPathToPath.call( - fabric.EraserBrush.prototype, - path, - _clipPath, - transform - ); - return _this._addEraserPathToObjects(eraserPath); - }, ['absolutePositioned', 'inverted']) : - _this._addEraserPathToObjects(path); - })); - }); - } - }); - } - }); + onMouseDown: function (pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this._prepareForDrawing(pointer); + // capture coordinates immediately + // this allows to draw dots (when movement never occurs) + this._captureDrawingPath(pointer); + + // prepare for erasing + this.preparePattern(); + this._isErasing = true; + this.canvas.fire('erasing:start'); + this._render(); + }, - /** - * An object's Eraser - * @private - * @class fabric.Eraser - * @extends fabric.Group - * @memberof fabric - */ - fabric.Eraser = fabric.util.createClass(fabric.Group, { /** - * @readonly - * @static + * Rendering Logic: + * 1. Use brush to clip canvas by rendering it on top of canvas (unnecessary if `inverted === true`) + * 2. Render brush with canvas pattern on top context + * + * @todo provide a better solution to https://github.com/fabricjs/fabric.js/issues/7984 */ - type: 'eraser', + _render: function () { + var ctx, lineWidth = this.width; + var t = this.canvas.getRetinaScaling(), s = 1 / t; + // clip canvas + ctx = this.canvas.getContext(); + // a hack that fixes https://github.com/fabricjs/fabric.js/issues/7984 by reducing path width + // the issue's cause is unknown at time of writing (@ShaMan123 06/2022) + if (lineWidth - this.erasingWidthAliasing > 0) { + this.width = lineWidth - this.erasingWidthAliasing; + this.callSuper('_render', ctx); + this.width = lineWidth; + } + // render brush and mask it with pattern + ctx = this.canvas.contextTop; + this.canvas.clearContext(ctx); + ctx.save(); + ctx.scale(s, s); + ctx.drawImage(this._patternCanvas, 0, 0); + ctx.restore(); + this.callSuper('_render', ctx); + }, /** - * @default + * Creates fabric.Path object + * @override + * @private + * @param {(string|number)[][]} pathData Path data + * @return {fabric.Path} Path to add on canvas + * @returns */ - originX: 'center', + createPath: function (pathData) { + var path = this.callSuper('createPath', pathData); + path.globalCompositeOperation = this.inverted ? 'source-over' : 'destination-out'; + path.stroke = this.inverted ? 'white' : 'black'; + return path; + }, /** - * @default + * Utility to apply a clip path to a path. + * Used to preserve clipping on eraser paths in nested objects. + * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. + * @param {fabric.Path} path The eraser path in canvas coordinate plane + * @param {fabric.Object} clipPath The clipPath to apply to the path + * @param {number[]} clipPathContainerTransformMatrix The transform matrix of the object that the clip path belongs to + * @returns {fabric.Path} path with clip path */ - originY: 'center', + applyClipPathToPath: function (path, clipPath, clipPathContainerTransformMatrix) { + var pathInvTransform = fabric.util.invertTransform(path.calcTransformMatrix()), + clipPathTransform = clipPath.calcTransformMatrix(), + transform = clipPath.absolutePositioned ? + pathInvTransform : + fabric.util.multiplyTransformMatrices( + pathInvTransform, + clipPathContainerTransformMatrix + ); + // when passing down a clip path it becomes relative to the parent + // so we transform it acoordingly and set `absolutePositioned` to false + clipPath.absolutePositioned = false; + fabric.util.applyTransformToObject( + clipPath, + fabric.util.multiplyTransformMatrices( + transform, + clipPathTransform + ) + ); + // We need to clip `path` with both `clipPath` and it's own clip path if existing (`path.clipPath`) + // so in turn `path` erases an object only where it overlaps with all it's clip paths, regardless of how many there are. + // this is done because both clip paths may have nested clip paths of their own (this method walks down a collection => this may reccur), + // so we can't assign one to the other's clip path property. + path.clipPath = path.clipPath ? fabric.util.mergeClipPaths(clipPath, path.clipPath) : clipPath; + return path; + }, /** - * eraser should retain size - * dimensions should not change when paths are added or removed - * handled by {@link fabric.Object#_drawClipPath} - * @override - * @private + * Utility to apply a clip path to a path. + * Used to preserve clipping on eraser paths in nested objects. + * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. + * @param {fabric.Path} path The eraser path + * @param {fabric.Object} object The clipPath to apply to path belongs to object + * @returns {Promise} */ - layout: 'fixed', - - drawObject: function (ctx) { - ctx.save(); - ctx.fillStyle = 'black'; - ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); - ctx.restore(); - this.callSuper('drawObject', ctx); + clonePathWithClipPath: function (path, object) { + var objTransform = object.calcTransformMatrix(); + var clipPath = object.clipPath; + var _this = this; + return Promise.all([ + path.clone(), + clipPath.clone(['absolutePositioned', 'inverted']) + ]).then(function (clones) { + return _this.applyClipPathToPath(clones[0], clones[1], objTransform); + }); }, - /* _TO_SVG_START_ */ /** - * Returns svg representation of an instance - * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 - * for masking we need to add a white rect before all paths + * Adds path to object's eraser, walks down object's descendants if necessary * - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance + * @public + * @fires erasing:end on object + * @param {fabric.Object} obj + * @param {fabric.Path} path + * @param {Object} [context] context to assign erased objects to + * @returns {Promise} */ - _toSVG: function (reviver) { - var svgString = ['\n']; - var x = -this.width / 2, y = -this.height / 2; - var rectSvg = [ - '\n' - ].join(''); - svgString.push('\t\t', rectSvg); - for (var i = 0, len = this._objects.length; i < len; i++) { - svgString.push('\t\t', this._objects[i].toSVG(reviver)); + _addPathToObjectEraser: function (obj, path, context) { + var _this = this; + // object is collection, i.e group + if (obj.forEachObject && obj.erasable === 'deep') { + var targets = obj._objects.filter(function (_obj) { + return _obj.erasable; + }); + if (targets.length > 0 && obj.clipPath) { + return this.clonePathWithClipPath(path, obj) + .then(function (_path) { + return Promise.all(targets.map(function (_obj) { + return _this._addPathToObjectEraser(_obj, _path, context); + })); + }); + } + else if (targets.length > 0) { + return Promise.all(targets.map(function (_obj) { + return _this._addPathToObjectEraser(_obj, path, context); + })); + } + return; + } + // prepare eraser + var eraser = obj.eraser; + if (!eraser) { + eraser = new fabric.Eraser(); + obj.eraser = eraser; } - svgString.push('\n'); - return svgString; + // clone and add path + return path.clone() + .then(function (path) { + // http://fabricjs.com/using-transformations + var desiredTransform = fabric.util.multiplyTransformMatrices( + fabric.util.invertTransform( + obj.calcTransformMatrix() + ), + path.calcTransformMatrix() + ); + fabric.util.applyTransformToObject(path, desiredTransform); + eraser.add(path); + obj.set('dirty', true); + obj.fire('erasing:end', { + path: path + }); + if (context) { + (obj.group ? context.subTargets : context.targets).push(obj); + //context.paths.set(obj, path); + } + return path; + }); }, - /* _TO_SVG_END_ */ - }); - /** - * Returns instance from an object representation - * @static - * @memberOf fabric.Eraser - * @param {Object} object Object to create an Eraser from - * @returns {Promise} - */ - fabric.Eraser.fromObject = function (object) { - var objects = object.objects || [], - options = fabric.util.object.clone(object, true); - delete options.objects; - return Promise.all([ - fabric.util.enlivenObjects(objects), - fabric.util.enlivenObjectEnlivables(options) - ]).then(function (enlivedProps) { - return new fabric.Eraser(enlivedProps[0], Object.assign(options, enlivedProps[1]), true); - }); - }; - - var __renderOverlay = fabric.Canvas.prototype._renderOverlay; - /** - * @fires erasing:start - * @fires erasing:end - */ - fabric.util.object.extend(fabric.Canvas.prototype, { /** - * Used by {@link #renderAll} - * @returns boolean + * Add the eraser path to canvas drawables' clip paths + * + * @param {fabric.Canvas} source + * @param {fabric.Canvas} path + * @param {Object} [context] context to assign erased objects to + * @returns {Promise} eraser paths */ - isErasing: function () { - return ( - this.isDrawingMode && - this.freeDrawingBrush && - this.freeDrawingBrush.type === 'eraser' && - this.freeDrawingBrush._isErasing - ); + applyEraserToCanvas: function (path, context) { + var canvas = this.canvas; + return Promise.all([ + 'backgroundImage', + 'overlayImage', + ].map(function (prop) { + var drawable = canvas[prop]; + return drawable && drawable.erasable && + this._addPathToObjectEraser(drawable, path) + .then(function (path) { + if (context) { + context.drawables[prop] = drawable; + //context.paths.set(drawable, path); + } + return path; + }); + }, this)); }, /** - * While erasing the brush clips out the erasing path from canvas - * so we need to render it on top of canvas every render - * @param {CanvasRenderingContext2D} ctx + * On mouseup after drawing the path on contextTop canvas + * we use the points captured to create an new fabric path object + * and add it to every intersected erasable object. */ - _renderOverlay: function (ctx) { - __renderOverlay.call(this, ctx); - this.isErasing() && this.freeDrawingBrush._render(); - } - }); + _finalizeAndAddPath: function () { + var ctx = this.canvas.contextTop, canvas = this.canvas; + ctx.closePath(); + if (this.decimate) { + this._points = this.decimatePoints(this._points, this.decimate); + } - /** - * EraserBrush class - * Supports selective erasing meaning that only erasable objects are affected by the eraser brush. - * Supports **inverted** erasing meaning that the brush can "undo" erasing. - * - * In order to support selective erasing, the brush clips the entire canvas - * and then draws all non-erasable objects over the erased path using a pattern brush so to speak (masking). - * If brush is **inverted** there is no need to clip canvas. The brush draws all erasable objects without their eraser. - * This achieves the desired effect of seeming to erase or unerase only erasable objects. - * After erasing is done the created path is added to all intersected objects' `eraser` property. - * - * In order to update the EraserBrush call `preparePattern`. - * It may come in handy when canvas changes during erasing (i.e animations) and you want the eraser to reflect the changes. - * - * @tutorial {@link http://fabricjs.com/erasing} - * @class fabric.EraserBrush - * @extends fabric.PencilBrush - * @memberof fabric - */ - fabric.EraserBrush = fabric.util.createClass( - fabric.PencilBrush, - /** @lends fabric.EraserBrush.prototype */ { - type: 'eraser', - - /** - * When set to `true` the brush will create a visual effect of undoing erasing - * @type boolean - */ - inverted: false, - - /** - * Used to fix https://github.com/fabricjs/fabric.js/issues/7984 - * Reduces the path width while clipping the main context, resulting in a better visual overlap of both contexts - * @type number - */ - erasingWidthAliasing: 4, - - /** - * @private - */ - _isErasing: false, - - /** - * - * @private - * @param {fabric.Object} object - * @returns boolean - */ - _isErasable: function (object) { - return object.erasable !== false; - }, - - /** - * @private - * This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\ - * Iterates over collections to allow nested selective erasing.\ - * Prepares objects before rendering the pattern brush.\ - * If brush is **NOT** inverted render all non-erasable objects.\ - * If brush is inverted render all objects, erasable objects without their eraser. - * This will render the erased parts as if they were not erased in the first place, achieving an undo effect. - * - * @param {fabric.Collection} collection - * @param {fabric.Object[]} objects - * @param {CanvasRenderingContext2D} ctx - * @param {{ visibility: fabric.Object[], eraser: fabric.Object[], collection: fabric.Object[] }} restorationContext - */ - _prepareCollectionTraversal: function (collection, objects, ctx, restorationContext) { - objects.forEach(function (obj) { - var dirty = false; - if (obj.forEachObject && obj.erasable === 'deep') { - // traverse - this._prepareCollectionTraversal(obj, obj._objects, ctx, restorationContext); - } - else if (!this.inverted && obj.erasable && obj.visible) { - // render only non-erasable objects - obj.visible = false; - restorationContext.visibility.push(obj); - dirty = true; - } - else if (this.inverted && obj.erasable && obj.eraser && obj.visible) { - // render all objects without eraser - var eraser = obj.eraser; - obj.eraser = undefined; - obj.dirty = true; - restorationContext.eraser.push([obj, eraser]); - dirty = true; - } - if (dirty && collection instanceof fabric.Object) { - collection.dirty = true; - restorationContext.collection.push(collection); - } - }, this); - }, - - /** - * Prepare the pattern for the erasing brush - * This pattern will be drawn on the top context after clipping the main context, - * achieving a visual effect of erasing only erasable objects - * @private - * @param {fabric.Object[]} [objects] override default behavior by passing objects to render on pattern - */ - preparePattern: function (objects) { - if (!this._patternCanvas) { - this._patternCanvas = fabric.util.createCanvasElement(); - } - var canvas = this._patternCanvas; - objects = objects || this.canvas._objectsToRender || this.canvas._objects; - canvas.width = this.canvas.width; - canvas.height = this.canvas.height; - var patternCtx = canvas.getContext('2d'); - if (this.canvas._isRetinaScaling()) { - var retinaScaling = this.canvas.getRetinaScaling(); - this.canvas.__initRetinaScaling(retinaScaling, canvas, patternCtx); - } - var backgroundImage = this.canvas.backgroundImage, - bgErasable = backgroundImage && this._isErasable(backgroundImage), - overlayImage = this.canvas.overlayImage, - overlayErasable = overlayImage && this._isErasable(overlayImage); - if (!this.inverted && ((backgroundImage && !bgErasable) || !!this.canvas.backgroundColor)) { - if (bgErasable) { this.canvas.backgroundImage = undefined; } - this.canvas._renderBackground(patternCtx); - if (bgErasable) { this.canvas.backgroundImage = backgroundImage; } - } - else if (this.inverted) { - var eraser = backgroundImage && backgroundImage.eraser; - if (eraser) { - backgroundImage.eraser = undefined; - backgroundImage.dirty = true; - } - this.canvas._renderBackground(patternCtx); - if (eraser) { - backgroundImage.eraser = eraser; - backgroundImage.dirty = true; - } - } - patternCtx.save(); - patternCtx.transform.apply(patternCtx, this.canvas.viewportTransform); - var restorationContext = { visibility: [], eraser: [], collection: [] }; - this._prepareCollectionTraversal(this.canvas, objects, patternCtx, restorationContext); - this.canvas._renderObjects(patternCtx, objects); - restorationContext.visibility.forEach(function (obj) { obj.visible = true; }); - restorationContext.eraser.forEach(function (entry) { - var obj = entry[0], eraser = entry[1]; - obj.eraser = eraser; - obj.dirty = true; - }); - restorationContext.collection.forEach(function (obj) { obj.dirty = true; }); - patternCtx.restore(); - if (!this.inverted && ((overlayImage && !overlayErasable) || !!this.canvas.overlayColor)) { - if (overlayErasable) { this.canvas.overlayImage = undefined; } - __renderOverlay.call(this.canvas, patternCtx); - if (overlayErasable) { this.canvas.overlayImage = overlayImage; } - } - else if (this.inverted) { - var eraser = overlayImage && overlayImage.eraser; - if (eraser) { - overlayImage.eraser = undefined; - overlayImage.dirty = true; - } - __renderOverlay.call(this.canvas, patternCtx); - if (eraser) { - overlayImage.eraser = eraser; - overlayImage.dirty = true; - } - } - }, - - /** - * Sets brush styles - * @private - * @param {CanvasRenderingContext2D} ctx - */ - _setBrushStyles: function (ctx) { - this.callSuper('_setBrushStyles', ctx); - ctx.strokeStyle = 'black'; - }, - - /** - * **Customiztion** - * - * if you need the eraser to update on each render (i.e animating during erasing) override this method by **adding** the following (performance may suffer): - * @example - * ``` - * if(ctx === this.canvas.contextTop) { - * this.preparePattern(); - * } - * ``` - * - * @override fabric.BaseBrush#_saveAndTransform - * @param {CanvasRenderingContext2D} ctx - */ - _saveAndTransform: function (ctx) { - this.callSuper('_saveAndTransform', ctx); - this._setBrushStyles(ctx); - ctx.globalCompositeOperation = ctx === this.canvas.getContext() ? 'destination-out' : 'destination-in'; - }, - - /** - * We indicate {@link fabric.PencilBrush} to repaint itself if necessary - * @returns - */ - needsFullRender: function () { - return true; - }, - - /** - * - * @param {fabric.Point} pointer - * @param {fabric.IEvent} options - * @returns - */ - onMouseDown: function (pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this._prepareForDrawing(pointer); - // capture coordinates immediately - // this allows to draw dots (when movement never occurs) - this._captureDrawingPath(pointer); - - // prepare for erasing - this.preparePattern(); - this._isErasing = true; - this.canvas.fire('erasing:start'); - this._render(); - }, - - /** - * Rendering Logic: - * 1. Use brush to clip canvas by rendering it on top of canvas (unnecessary if `inverted === true`) - * 2. Render brush with canvas pattern on top context - * - * @todo provide a better solution to https://github.com/fabricjs/fabric.js/issues/7984 - */ - _render: function () { - var ctx, lineWidth = this.width; - var t = this.canvas.getRetinaScaling(), s = 1 / t; - // clip canvas - ctx = this.canvas.getContext(); - // a hack that fixes https://github.com/fabricjs/fabric.js/issues/7984 by reducing path width - // the issue's cause is unknown at time of writing (@ShaMan123 06/2022) - if (lineWidth - this.erasingWidthAliasing > 0) { - this.width = lineWidth - this.erasingWidthAliasing; - this.callSuper('_render', ctx); - this.width = lineWidth; - } - // render brush and mask it with pattern - ctx = this.canvas.contextTop; - this.canvas.clearContext(ctx); - ctx.save(); - ctx.scale(s, s); - ctx.drawImage(this._patternCanvas, 0, 0); - ctx.restore(); - this.callSuper('_render', ctx); - }, - - /** - * Creates fabric.Path object - * @override - * @private - * @param {(string|number)[][]} pathData Path data - * @return {fabric.Path} Path to add on canvas - * @returns - */ - createPath: function (pathData) { - var path = this.callSuper('createPath', pathData); - path.globalCompositeOperation = this.inverted ? 'source-over' : 'destination-out'; - path.stroke = this.inverted ? 'white' : 'black'; - return path; - }, - - /** - * Utility to apply a clip path to a path. - * Used to preserve clipping on eraser paths in nested objects. - * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. - * @param {fabric.Path} path The eraser path in canvas coordinate plane - * @param {fabric.Object} clipPath The clipPath to apply to the path - * @param {number[]} clipPathContainerTransformMatrix The transform matrix of the object that the clip path belongs to - * @returns {fabric.Path} path with clip path - */ - applyClipPathToPath: function (path, clipPath, clipPathContainerTransformMatrix) { - var pathInvTransform = fabric.util.invertTransform(path.calcTransformMatrix()), - clipPathTransform = clipPath.calcTransformMatrix(), - transform = clipPath.absolutePositioned ? - pathInvTransform : - fabric.util.multiplyTransformMatrices( - pathInvTransform, - clipPathContainerTransformMatrix - ); - // when passing down a clip path it becomes relative to the parent - // so we transform it acoordingly and set `absolutePositioned` to false - clipPath.absolutePositioned = false; - fabric.util.applyTransformToObject( - clipPath, - fabric.util.multiplyTransformMatrices( - transform, - clipPathTransform - ) - ); - // We need to clip `path` with both `clipPath` and it's own clip path if existing (`path.clipPath`) - // so in turn `path` erases an object only where it overlaps with all it's clip paths, regardless of how many there are. - // this is done because both clip paths may have nested clip paths of their own (this method walks down a collection => this may reccur), - // so we can't assign one to the other's clip path property. - path.clipPath = path.clipPath ? fabric.util.mergeClipPaths(clipPath, path.clipPath) : clipPath; - return path; - }, - - /** - * Utility to apply a clip path to a path. - * Used to preserve clipping on eraser paths in nested objects. - * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. - * @param {fabric.Path} path The eraser path - * @param {fabric.Object} object The clipPath to apply to path belongs to object - * @returns {Promise} - */ - clonePathWithClipPath: function (path, object) { - var objTransform = object.calcTransformMatrix(); - var clipPath = object.clipPath; - var _this = this; - return Promise.all([ - path.clone(), - clipPath.clone(['absolutePositioned', 'inverted']) - ]).then(function (clones) { - return _this.applyClipPathToPath(clones[0], clones[1], objTransform); - }); - }, - - /** - * Adds path to object's eraser, walks down object's descendants if necessary - * - * @public - * @fires erasing:end on object - * @param {fabric.Object} obj - * @param {fabric.Path} path - * @param {Object} [context] context to assign erased objects to - * @returns {Promise} - */ - _addPathToObjectEraser: function (obj, path, context) { - var _this = this; - // object is collection, i.e group - if (obj.forEachObject && obj.erasable === 'deep') { - var targets = obj._objects.filter(function (_obj) { - return _obj.erasable; - }); - if (targets.length > 0 && obj.clipPath) { - return this.clonePathWithClipPath(path, obj) - .then(function (_path) { - return Promise.all(targets.map(function (_obj) { - return _this._addPathToObjectEraser(_obj, _path, context); - })); - }); - } - else if (targets.length > 0) { - return Promise.all(targets.map(function (_obj) { - return _this._addPathToObjectEraser(_obj, path, context); - })); - } - return; - } - // prepare eraser - var eraser = obj.eraser; - if (!eraser) { - eraser = new fabric.Eraser(); - obj.eraser = eraser; - } - // clone and add path - return path.clone() - .then(function (path) { - // http://fabricjs.com/using-transformations - var desiredTransform = fabric.util.multiplyTransformMatrices( - fabric.util.invertTransform( - obj.calcTransformMatrix() - ), - path.calcTransformMatrix() - ); - fabric.util.applyTransformToObject(path, desiredTransform); - eraser.add(path); - obj.set('dirty', true); - obj.fire('erasing:end', { - path: path - }); - if (context) { - (obj.group ? context.subTargets : context.targets).push(obj); - //context.paths.set(obj, path); - } - return path; - }); - }, - - /** - * Add the eraser path to canvas drawables' clip paths - * - * @param {fabric.Canvas} source - * @param {fabric.Canvas} path - * @param {Object} [context] context to assign erased objects to - * @returns {Promise} eraser paths - */ - applyEraserToCanvas: function (path, context) { - var canvas = this.canvas; - return Promise.all([ - 'backgroundImage', - 'overlayImage', - ].map(function (prop) { - var drawable = canvas[prop]; - return drawable && drawable.erasable && - this._addPathToObjectEraser(drawable, path) - .then(function (path) { - if (context) { - context.drawables[prop] = drawable; - //context.paths.set(drawable, path); - } - return path; - }); - }, this)); - }, - - /** - * On mouseup after drawing the path on contextTop canvas - * we use the points captured to create an new fabric path object - * and add it to every intersected erasable object. - */ - _finalizeAndAddPath: function () { - var ctx = this.canvas.contextTop, canvas = this.canvas; - ctx.closePath(); - if (this.decimate) { - this._points = this.decimatePoints(this._points, this.decimate); - } + // clear + canvas.clearContext(canvas.contextTop); + this._isErasing = false; + + var pathData = this._points && this._points.length > 1 ? + this.convertPointsToSVGPath(this._points) : + null; + if (!pathData || this._isEmptySVGPath(pathData)) { + canvas.fire('erasing:end'); + // do not create 0 width/height paths, as they are + // rendered inconsistently across browsers + // Firefox 4, for example, renders a dot, + // whereas Chrome 10 renders nothing + canvas.requestRenderAll(); + return; + } + + var path = this.createPath(pathData); + // needed for `intersectsWithObject` + path.setCoords(); + // commense event sequence + canvas.fire('before:path:created', { path: path }); + + // finalize erasing + var _this = this; + var context = { + targets: [], + subTargets: [], + //paths: new Map(), + drawables: {} + }; + var tasks = canvas._objects.map(function (obj) { + return obj.erasable && obj.intersectsWithObject(path, true, true) && + _this._addPathToObjectEraser(obj, path, context); + }); + tasks.push(_this.applyEraserToCanvas(path, context)); + return Promise.all(tasks) + .then(function () { + // fire erasing:end + canvas.fire('erasing:end', Object.assign(context, { + path: path + })); - // clear - canvas.clearContext(canvas.contextTop); - this._isErasing = false; - - var pathData = this._points && this._points.length > 1 ? - this.convertPointsToSVGPath(this._points) : - null; - if (!pathData || this._isEmptySVGPath(pathData)) { - canvas.fire('erasing:end'); - // do not create 0 width/height paths, as they are - // rendered inconsistently across browsers - // Firefox 4, for example, renders a dot, - // whereas Chrome 10 renders nothing canvas.requestRenderAll(); - return; - } + _this._resetShadow(); - var path = this.createPath(pathData); - // needed for `intersectsWithObject` - path.setCoords(); - // commense event sequence - canvas.fire('before:path:created', { path: path }); - - // finalize erasing - var _this = this; - var context = { - targets: [], - subTargets: [], - //paths: new Map(), - drawables: {} - }; - var tasks = canvas._objects.map(function (obj) { - return obj.erasable && obj.intersectsWithObject(path, true, true) && - _this._addPathToObjectEraser(obj, path, context); + // fire event 'path' created + canvas.fire('path:created', { path: path }); }); - tasks.push(_this.applyEraserToCanvas(path, context)); - return Promise.all(tasks) - .then(function () { - // fire erasing:end - canvas.fire('erasing:end', Object.assign(context, { - path: path - })); - - canvas.requestRenderAll(); - _this._resetShadow(); - - // fire event 'path' created - canvas.fire('path:created', { path: path }); - }); - } } - ); + } +); - /** ERASER_END */ -})(); +/** ERASER_END */ diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js index 06d40c27c60..b6d5eeb3c41 100644 --- a/src/shapes/image.class.js +++ b/src/shapes/image.class.js @@ -1,9 +1,5 @@ -var extend = fabric.util.object.extend; - -if (!exports.fabric) { - exports.fabric = { }; -} - +var extend = fabric.util.object.extend, + fabric = exports.fabric || (exports.fabric = {}); /** * Image class * @class fabric.Image From 6563e3bbd13b86aab2058a9067f087a3189d49b3 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 18 Jun 2022 22:03:31 +0200 Subject: [PATCH 05/21] a test --- index.js | 100 +++++++++++++++++++++++++++++++++++++++++++++++ rollup.config.js | 19 +++++++++ testimports.js | 3 ++ 3 files changed, 122 insertions(+) create mode 100644 index.js create mode 100644 rollup.config.js create mode 100644 testimports.js diff --git a/index.js b/index.js new file mode 100644 index 00000000000..b2ae1beddab --- /dev/null +++ b/index.js @@ -0,0 +1,100 @@ +import { fabric } from './HEADER.js'; +import './src/globalFabric.js'; // optional for global object. default OFF +// import './lib/event.js'), // optional gestures +import './src/mixins/observable.mixin.js'; +import './src/mixins/collection.mixin.js'; +import './src/mixins/shared_methods.mixin.js'; +import './src/util/misc.js'; +// import './src/util/named_accessors.mixin.js'; i would imagine dead forever or proper setters/getters +import './src/util/path.js'; +import './src/util/lang_array.js'; +import './src/util/lang_object.js'; +import './src/util/lang_string.js'; +import './src/util/lang_class.js'; +import './src/util/dom_event.js'; // optional interaction +import './src/util/dom_style.js'; +import './src/util/dom_misc.js'; +import './src/util/dom_request.js'; +import './src/log.js'; +import './src/util/animate.js'; // optional animation +import './src/util/animate_color.js'; // optional animation +import './src/util/anim_ease.js'; // optional easing +import './src/parser.js'; // optional parser +import './src/elements_parser.js'; // optional parser +import './src/point.class.js'; +import './src/intersection.class.js'; +import './src/color.class.js'; +import './src/controls.actions.js'; // optional interaction +import './src/controls.render.js'; // optional interaction +import './src/control.class.js'; // optional interaction +import './src/gradient.class.js'; // optional gradient +import './src/pattern.class.js'; // optional pattern +import './src/shadow.class.js'; // optional shadow +import './src/static_canvas.class.js'; +import './src/brushes/base_brush.class.js'; // optional freedrawing +import './src/brushes/pencil_brush.class.js'; // optional freedrawing +import './src/brushes/circle_brush.class.js'; // optional freedrawing +import './src/brushes/spray_brush.class.js'; // optional freedrawing +import './src/brushes/pattern_brush.class.js'; // optional freedrawing +import './src/canvas.class.js'; // optional interaction +import './src/mixins/canvas_events.mixin.js'; // optional interaction +import './src/mixins/canvas_grouping.mixin.js'; // optional interaction +import './src/mixins/canvas_dataurl_exporter.mixin.js'; +import './src/mixins/canvas_serialization.mixin.js'; // optiona serialization +import './src/mixins/canvas_gestures.mixin.js'; // optional gestures +import './src/shapes/object.class.js'; +import './src/mixins/object_origin.mixin.js'; +import './src/mixins/object_geometry.mixin.js'; +import './src/mixins/object_ancestry.mixin.js'; +import './src/mixins/object_stacking.mixin.js'; +import './src/mixins/object.svg_export.js'; +import './src/mixins/stateful.mixin.js'; +import './src/mixins/object_interactivity.mixin.js'; // optional interaction +import './src/mixins/animation.mixin.js'; // optional animation +import './src/shapes/line.class.js'; +import './src/shapes/circle.class.js'; +import './src/shapes/triangle.class.js'; +import './src/shapes/ellipse.class.js'; +import './src/shapes/rect.class.js'; +import './src/shapes/polyline.class.js'; +import './src/shapes/polygon.class.js'; +import './src/shapes/path.class.js'; +import './src/shapes/group.class.js'; +import './src/shapes/active_selection.class.js'; // optional interaction +import './src/shapes/image.class.js'; +import './src/mixins/object_straightening.mixin.js'; // optional objectstraightening +import './src/filters/webgl_backend.class.js'; // optional image_filters +import './src/filters/2d_backend.class.js'; // optional image_filters +import './src/filters/base_filter.class.js'; // optional image_filters +import './src/filters/colormatrix_filter.class.js'; // optional image_filters +import './src/filters/brightness_filter.class.js'; // optional image_filters +import './src/filters/convolute_filter.class.js'; // optional image_filters +import './src/filters/grayscale_filter.class.js'; // optional image_filters +import './src/filters/invert_filter.class.js'; // optional image_filters +import './src/filters/noise_filter.class.js'; // optional image_filters +import './src/filters/pixelate_filter.class.js'; // optional image_filters +import './src/filters/removecolor_filter.class.js'; // optional image_filters +import './src/filters/filter_generator.js'; // optional image_filters +import './src/filters/blendcolor_filter.class.js'; // optional image_filters +import './src/filters/blendimage_filter.class.js'; // optional image_filters +import './src/filters/resize_filter.class.js'; // optional image_filters +import './src/filters/contrast_filter.class.js'; // optional image_filters +import './src/filters/saturate_filter.class.js'; // optional image_filters +import './src/filters/vibrance_filter.class.js'; // optional image_filters +import './src/filters/blur_filter.class.js'; // optional image_filters +import './src/filters/gamma_filter.class.js'; // optional image_filters +import './src/filters/composed_filter.class.js'; // optional image_filters +import './src/filters/hue_rotation.class.js'; // optional image_filters +import './src/shapes/text.class.js'; // optional text +import './src/mixins/text_style.mixin.js'; // optional text +import './src/shapes/itext.class.js'; // optional itext +import './src/mixins/itext_behavior.mixin.js'; // optional itext +import './src/mixins/itext_click_behavior.mixin.js'; // optional itext +import './src/mixins/itext_key_behavior.mixin.js'; // optional itext +import './src/mixins/itext.svg_export.js'; // optional itext +import './src/shapes/textbox.class.js'; // optional textbox +import './src/mixins/default_controls.js'; // optional interaction +// extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect +import './src/mixins/eraser_brush.mixin.js'; // optional erasing + +export { fabric }; diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 00000000000..6a90b529f9c --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,19 @@ +import { terser } from 'rollup-plugin-terser'; + +// rollup.config.js +export default { + input: ['./index.js'], + output: [ + { + file: './dist/fabric.js', + name: 'fabric', + format: 'iife', + }, + { + file: './dist/fabric.min.js', + format: 'iife', + name: 'fabric', + plugins: [terser()], + }, + ], +}; diff --git a/testimports.js b/testimports.js new file mode 100644 index 00000000000..ed54ea9526d --- /dev/null +++ b/testimports.js @@ -0,0 +1,3 @@ +var all = require('./dist/fabric.js'); + +console.log(all); From 5d620609f66190908df05e4e87b4a906bf3cd4cc Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 19 Jun 2022 09:58:05 +0200 Subject: [PATCH 06/21] this sucls --- HEADER.js | 6 +- dist/fabric.js | 55967 +++++++++--------- dist/fabric.min.js | 3 +- index.js | 6 +- rollup.config.js | 12 +- src/brushes/base_brush.class.js | 277 +- src/brushes/circle_brush.class.js | 269 +- src/brushes/pattern_brush.class.js | 107 +- src/brushes/pencil_brush.class.js | 554 +- src/brushes/spray_brush.class.js | 401 +- src/canvas.class.js | 1521 +- src/color.class.js | 1136 +- src/control.class.js | 664 +- src/controls.actions.js | 999 +- src/controls.render.js | 183 +- src/elements_parser.js | 270 +- src/filters/2d_backend.class.js | 109 +- src/filters/base_filter.class.js | 652 +- src/filters/blendcolor_filter.class.js | 471 +- src/filters/blendimage_filter.class.js | 453 +- src/filters/blur_filter.class.js | 388 +- src/filters/brightness_filter.class.js | 192 +- src/filters/colormatrix_filter.class.js | 279 +- src/filters/composed_filter.class.js | 115 +- src/filters/contrast_filter.class.js | 188 +- src/filters/convolute_filter.class.js | 220 +- src/filters/filter_boilerplate.js | 188 +- src/filters/filter_generator.js | 153 +- src/filters/gamma_filter.class.js | 232 +- src/filters/grayscale_filter.class.js | 132 +- src/filters/hue_rotation.class.js | 92 +- src/filters/invert_filter.class.js | 99 +- src/filters/noise_filter.class.js | 108 +- src/filters/pixelate_filter.class.js | 126 +- src/filters/removecolor_filter.class.js | 170 +- src/filters/resize_filter.class.js | 662 +- src/filters/saturate_filter.class.js | 86 +- src/filters/vibrance_filter.class.js | 90 +- src/filters/webgl_backend.class.js | 471 +- src/globalFabric.js | 10 +- src/gradient.class.js | 633 +- src/intersection.class.js | 200 +- src/log.js | 23 +- src/mixins/animation.mixin.js | 419 +- src/mixins/canvas_dataurl_exporter.mixin.js | 201 +- src/mixins/canvas_events.mixin.js | 1414 +- src/mixins/canvas_gestures.mixin.js | 174 +- src/mixins/canvas_grouping.mixin.js | 265 +- src/mixins/canvas_serialization.mixin.js | 217 +- src/mixins/collection.mixin.js | 297 +- src/mixins/default_controls.js | 199 +- src/mixins/eraser_brush.mixin.js | 1418 +- src/mixins/itext.svg_export.js | 402 +- src/mixins/itext_behavior.mixin.js | 1407 +- src/mixins/itext_click_behavior.mixin.js | 489 +- src/mixins/itext_key_behavior.mixin.js | 1369 +- src/mixins/object.svg_export.js | 395 +- src/mixins/object_ancestry.mixin.js | 217 +- src/mixins/object_geometry.mixin.js | 991 +- src/mixins/object_interactivity.mixin.js | 363 +- src/mixins/object_origin.mixin.js | 344 +- src/mixins/object_stacking.mixin.js | 209 +- src/mixins/object_straightening.mixin.js | 147 +- src/mixins/observable.mixin.js | 181 +- src/mixins/shared_methods.mixin.js | 125 +- src/mixins/stateful.mixin.js | 146 +- src/mixins/text_style.mixin.js | 399 +- src/parser.js | 1589 +- src/pattern.class.js | 212 +- src/point.class.js | 337 +- src/shadow.class.js | 191 +- src/shapes/active_selection.class.js | 213 +- src/shapes/circle.class.js | 224 +- src/shapes/ellipse.class.js | 182 +- src/shapes/group.class.js | 1294 +- src/shapes/image.class.js | 926 +- src/shapes/itext.class.js | 581 +- src/shapes/line.class.js | 388 +- src/shapes/object.class.js | 2059 +- src/shapes/path.class.js | 515 +- src/shapes/polygon.class.js | 62 +- src/shapes/polyline.class.js | 297 +- src/shapes/rect.class.js | 197 +- src/shapes/text.class.js | 2151 +- src/shapes/textbox.class.js | 566 +- src/shapes/triangle.class.js | 88 +- src/static_canvas.class.js | 9 +- src/util/anim_ease.js | 504 +- src/util/animate.js | 7 +- src/util/animate_color.js | 98 +- src/util/dom_event.js | 6 +- src/util/dom_misc.js | 396 +- src/util/dom_request.js | 69 +- src/util/dom_style.js | 6 +- src/util/lang_array.js | 108 +- src/util/lang_class.js | 138 +- src/util/lang_object.js | 89 +- src/util/lang_string.js | 135 +- src/util/misc.js | 1316 +- src/util/named_accessors.mixin.js | 152 +- src/util/path.js | 1413 +- testimports.js | 3 +- 102 files changed, 48982 insertions(+), 48244 deletions(-) diff --git a/HEADER.js b/HEADER.js index f186c21d3f9..5430e1b3cb8 100644 --- a/HEADER.js +++ b/HEADER.js @@ -4,7 +4,11 @@ var fabric = fabric || { version: '5.1.0' }; if (typeof exports !== 'undefined') { exports.fabric = fabric; } - +/* _AMD_START_ */ +else if (typeof define === 'function' && define.amd) { + define([], function() { return fabric; }); +} +/* _AMD_END_ */ if (typeof document !== 'undefined' && typeof window !== 'undefined') { if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) { fabric.document = document; diff --git a/dist/fabric.js b/dist/fabric.js index 9b7bf655d2a..d450fa06c01 100644 --- a/dist/fabric.js +++ b/dist/fabric.js @@ -1,31077 +1,31490 @@ -/* build: `node build.js modules=ALL exclude=gestures,accessors,erasing requirejs minifier=uglifyjs` */ -/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */ - -var fabric = fabric || { version: '5.1.0' }; -if (typeof exports !== 'undefined') { - exports.fabric = fabric; -} -/* _AMD_START_ */ -else if (typeof define === 'function' && define.amd) { - define([], function() { return fabric; }); -} -/* _AMD_END_ */ -if (typeof document !== 'undefined' && typeof window !== 'undefined') { - if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) { - fabric.document = document; - } - else { - fabric.document = document.implementation.createHTMLDocument(''); - } - fabric.window = window; -} -else { - // assume we're running under node.js when document/window are not present - var jsdom = require('jsdom'); - var virtualWindow = new jsdom.JSDOM( - decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'), - { - features: { - FetchExternalResources: ['img'] - }, - resources: 'usable' - }).window; - fabric.document = virtualWindow.document; - fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper; - fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas; - fabric.window = virtualWindow; - DOMParser = fabric.window.DOMParser; -} - -/** - * True when in environment that supports touch events - * @type boolean - */ -fabric.isTouchSupported = 'ontouchstart' in fabric.window || 'ontouchstart' in fabric.document || - (fabric.window && fabric.window.navigator && fabric.window.navigator.maxTouchPoints > 0); - -/** - * True when in environment that's probably Node.js - * @type boolean - */ -fabric.isLikelyNode = typeof Buffer !== 'undefined' && - typeof window === 'undefined'; - -/* _FROM_SVG_START_ */ -/** - * Attributes parsed from all SVG elements - * @type array - */ -fabric.SHARED_ATTRIBUTES = [ - 'display', - 'transform', - 'fill', 'fill-opacity', 'fill-rule', - 'opacity', - 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', - 'stroke-linejoin', 'stroke-miterlimit', - 'stroke-opacity', 'stroke-width', - 'id', 'paint-order', 'vector-effect', - 'instantiated_by_use', 'clip-path', -]; -/* _FROM_SVG_END_ */ - -/** - * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion. - */ -fabric.DPI = 96; -fabric.reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)'; -fabric.commaWsp = '(?:\\s+,?\\s*|,\\s*)'; -fabric.rePathCommand = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/ig; -fabric.reNonWord = /[ \n\.,;!\?\-]/; -fabric.fontPaths = { }; -fabric.iMatrix = [1, 0, 0, 1, 0, 0]; -fabric.svgNS = 'http://www.w3.org/2000/svg'; - -/** - * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine. - * @since 1.7.14 - * @type Number - * @default - */ -fabric.perfLimitSizeTotal = 2097152; - -/** - * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000 - * @since 1.7.14 - * @type Number - * @default - */ -fabric.maxCacheSideLimit = 4096; - -/** - * Lowest pixel limit for cache canvases, set at 256PX - * @since 1.7.14 - * @type Number - * @default - */ -fabric.minCacheSideLimit = 256; - -/** - * Cache Object for widths of chars in text rendering. - */ -fabric.charWidthsCache = { }; - -/** - * if webgl is enabled and available, textureSize will determine the size - * of the canvas backend - * @since 2.0.0 - * @type Number - * @default - */ -fabric.textureSize = 2048; - -/** - * When 'true', style information is not retained when copy/pasting text, making - * pasted text use destination style. - * Defaults to 'false'. - * @type Boolean - * @default - */ -fabric.disableStyleCopyPaste = false; - -/** - * Enable webgl for filtering picture is available - * A filtering backend will be initialized, this will both take memory and - * time since a default 2048x2048 canvas will be created for the gl context - * @since 2.0.0 - * @type Boolean - * @default - */ -fabric.enableGLFiltering = true; - -/** - * Device Pixel Ratio - * @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html - */ -fabric.devicePixelRatio = fabric.window.devicePixelRatio || - fabric.window.webkitDevicePixelRatio || - fabric.window.mozDevicePixelRatio || - 1; -/** - * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value, - * which is unitless and not rendered equally across browsers. - * - * Values that work quite well (as of October 2017) are: - * - Chrome: 1.5 - * - Edge: 1.75 - * - Firefox: 0.9 - * - Safari: 0.95 - * - * @since 2.0.0 - * @type Number - * @default 1 - */ -fabric.browserShadowBlurConstant = 1; - -/** - * This object contains the result of arc to bezier conversion for faster retrieving if the same arc needs to be converted again. - * It was an internal variable, is accessible since version 2.3.4 - */ -fabric.arcToSegmentsCache = { }; - -/** - * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it. - * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing - * you do not get any speed benefit and you get a big object in memory. - * The object was a private variable before, while now is appended to the lib so that you have access to it and you - * can eventually clear it. - * It was an internal variable, is accessible since version 2.3.4 - */ -fabric.boundsOfCurveCache = { }; - -/** - * If disabled boundsOfCurveCache is not used. For apps that make heavy usage of pencil drawing probably disabling it is better - * @default true - */ -fabric.cachesBoundsOfCurve = true; - -/** - * Skip performance testing of setupGLContext and force the use of putImageData that seems to be the one that works best on - * Chrome + old hardware. if your users are experiencing empty images after filtering you may try to force this to true - * this has to be set before instantiating the filtering backend ( before filtering the first image ) - * @type Boolean - * @default false - */ -fabric.forceGLPutImageData = false; - -fabric.initFilterBackend = function() { - if (fabric.enableGLFiltering && fabric.isWebglSupported && fabric.isWebglSupported(fabric.textureSize)) { - console.log('max texture size: ' + fabric.maxTextureSize); - return (new fabric.WebglFilterBackend({ tileSize: fabric.textureSize })); - } - else if (fabric.Canvas2dFilterBackend) { - return (new fabric.Canvas2dFilterBackend()); - } -}; - - -if (typeof document !== 'undefined' && typeof window !== 'undefined') { - // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) - window.fabric = fabric; -} - - -(function() { +(function () { + 'use strict'; - /** - * @private - * @param {String} eventName - * @param {Function} handler - */ - function _removeEventListener(eventName, handler) { - if (!this.__eventListeners[eventName]) { - return; - } - var eventListener = this.__eventListeners[eventName]; - if (handler) { - eventListener[eventListener.indexOf(handler)] = false; - } - else { - fabric.util.array.fill(eventListener, false); - } - } + /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */ - /** - * Observes specified event - * @memberOf fabric.Observable - * @alias on - * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) - * @param {Function} handler Function that receives a notification when an event of the specified type occurs - * @return {Self} thisArg - * @chainable - */ - function on(eventName, handler) { - if (!this.__eventListeners) { - this.__eventListeners = { }; - } - // one object with key/value pairs was passed - if (arguments.length === 1) { - for (var prop in eventName) { - this.on(prop, eventName[prop]); - } - } - else { - if (!this.__eventListeners[eventName]) { - this.__eventListeners[eventName] = []; - } - this.__eventListeners[eventName].push(handler); - } - return this; + var fabric$1 = fabric$1 || { version: '5.1.0' }; + if (typeof exports !== 'undefined') { + exports.fabric = fabric$1; } - - function _once(eventName, handler) { - var _handler = function () { - handler.apply(this, arguments); - this.off(eventName, _handler); - }.bind(this); - this.on(eventName, _handler); + /* _AMD_START_ */ + else if (typeof define === 'function' && define.amd) { + define([], function() { return fabric$1; }); } - - function once(eventName, handler) { - // one object with key/value pairs was passed - if (arguments.length === 1) { - for (var prop in eventName) { - _once.call(this, prop, eventName[prop]); - } + /* _AMD_END_ */ + if (typeof document !== 'undefined' && typeof window !== 'undefined') { + if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) { + fabric$1.document = document; } else { - _once.call(this, eventName, handler); + fabric$1.document = document.implementation.createHTMLDocument(''); } - return this; + fabric$1.window = window; } - - /** - * Stops event observing for a particular event handler. Calling this method - * without arguments removes all handlers for all events - * @memberOf fabric.Observable - * @alias off - * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) - * @param {Function} handler Function to be deleted from EventListeners - * @return {Self} thisArg - * @chainable - */ - function off(eventName, handler) { - if (!this.__eventListeners) { - return this; - } - - // remove all key/value pairs (event name -> event handler) - if (arguments.length === 0) { - for (eventName in this.__eventListeners) { - _removeEventListener.call(this, eventName); - } - } - // one object with key/value pairs was passed - else if (arguments.length === 1 && typeof arguments[0] === 'object') { - for (var prop in eventName) { - _removeEventListener.call(this, prop, eventName[prop]); - } - } - else { - _removeEventListener.call(this, eventName, handler); - } - return this; + else { + // assume we're running under node.js when document/window are not present + var jsdom = require('jsdom'); + var virtualWindow = new jsdom.JSDOM( + decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'), + { + features: { + FetchExternalResources: ['img'] + }, + resources: 'usable' + }).window; + fabric$1.document = virtualWindow.document; + fabric$1.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper; + fabric$1.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas; + fabric$1.window = virtualWindow; + global.DOMParser = fabric$1.window.DOMParser; } /** - * Fires event with an optional options object - * @memberOf fabric.Observable - * @param {String} eventName Event name to fire - * @param {Object} [options] Options object - * @return {Self} thisArg - * @chainable + * True when in environment that supports touch events + * @type boolean */ - function fire(eventName, options) { - if (!this.__eventListeners) { - return this; - } - - var listenersForEvent = this.__eventListeners[eventName]; - if (!listenersForEvent) { - return this; - } - - for (var i = 0, len = listenersForEvent.length; i < len; i++) { - listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); - } - this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { - return value !== false; - }); - return this; - } + fabric$1.isTouchSupported = 'ontouchstart' in fabric$1.window || 'ontouchstart' in fabric$1.document || + (fabric$1.window && fabric$1.window.navigator && fabric$1.window.navigator.maxTouchPoints > 0); /** - * @namespace fabric.Observable - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events} - * @see {@link http://fabricjs.com/events|Events demo} + * True when in environment that's probably Node.js + * @type boolean */ - fabric.Observable = { - fire: fire, - on: on, - once: once, - off: off, - }; -})(); - - -/** - * @namespace fabric.Collection - */ -fabric.Collection = { - - _objects: [], + fabric$1.isLikelyNode = typeof Buffer !== 'undefined' && + typeof window === 'undefined'; + /* _FROM_SVG_START_ */ /** - * Adds objects to collection, Canvas or Group, then renders canvas - * (if `renderOnAddRemove` is not `false`). - * in case of Group no changes to bounding box are made. - * Objects should be instances of (or inherit from) fabric.Object - * Use of this function is highly discouraged for groups. - * you can add a bunch of objects with the add method but then you NEED - * to run a addWithUpdate call for the Group class or position/bbox will be wrong. - * @param {...fabric.Object} object Zero or more fabric instances - * @return {Self} thisArg - * @chainable - */ - add: function () { - this._objects.push.apply(this._objects, arguments); - if (this._onObjectAdded) { - for (var i = 0, length = arguments.length; i < length; i++) { - this._onObjectAdded(arguments[i]); - } - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + * Attributes parsed from all SVG elements + * @type array + */ + fabric$1.SHARED_ATTRIBUTES = [ + 'display', + 'transform', + 'fill', 'fill-opacity', 'fill-rule', + 'opacity', + 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', + 'stroke-linejoin', 'stroke-miterlimit', + 'stroke-opacity', 'stroke-width', + 'id', 'paint-order', 'vector-effect', + 'instantiated_by_use', 'clip-path', + ]; + /* _FROM_SVG_END_ */ /** - * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) - * An object should be an instance of (or inherit from) fabric.Object - * Use of this function is highly discouraged for groups. - * you can add a bunch of objects with the insertAt method but then you NEED - * to run a addWithUpdate call for the Group class or position/bbox will be wrong. - * @param {Object} object Object to insert - * @param {Number} index Index to insert object at - * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs - * @return {Self} thisArg - * @chainable + * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion. */ - insertAt: function (object, index, nonSplicing) { - var objects = this._objects; - if (nonSplicing) { - objects[index] = object; - } - else { - objects.splice(index, 0, object); - } - this._onObjectAdded && this._onObjectAdded(object); - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + fabric$1.DPI = 96; + fabric$1.reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)'; + fabric$1.commaWsp = '(?:\\s+,?\\s*|,\\s*)'; + fabric$1.rePathCommand = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/ig; + fabric$1.reNonWord = /[ \n\.,;!\?\-]/; + fabric$1.fontPaths = { }; + fabric$1.iMatrix = [1, 0, 0, 1, 0, 0]; + fabric$1.svgNS = 'http://www.w3.org/2000/svg'; /** - * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) - * @param {...fabric.Object} object Zero or more fabric instances - * @return {Self} thisArg - * @chainable + * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine. + * @since 1.7.14 + * @type Number + * @default */ - remove: function() { - var objects = this._objects, - index, somethingRemoved = false; - - for (var i = 0, length = arguments.length; i < length; i++) { - index = objects.indexOf(arguments[i]); - - // only call onObjectRemoved if an object was actually removed - if (index !== -1) { - somethingRemoved = true; - objects.splice(index, 1); - this._onObjectRemoved && this._onObjectRemoved(arguments[i]); - } - } - - this.renderOnAddRemove && somethingRemoved && this.requestRenderAll(); - return this; - }, + fabric$1.perfLimitSizeTotal = 2097152; /** - * Executes given function for each object in this group - * @param {Function} callback - * Callback invoked with current object as first argument, - * index - as second and an array of all objects - as third. - * Callback is invoked in a context of Global Object (e.g. `window`) - * when no `context` argument is given - * - * @param {Object} context Context (aka thisObject) - * @return {Self} thisArg - * @chainable + * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000 + * @since 1.7.14 + * @type Number + * @default */ - forEachObject: function(callback, context) { - var objects = this.getObjects(); - for (var i = 0, len = objects.length; i < len; i++) { - callback.call(context, objects[i], i, objects); - } - return this; - }, + fabric$1.maxCacheSideLimit = 4096; /** - * Returns an array of children objects of this instance - * Type parameter introduced in 1.3.10 - * since 2.3.5 this method return always a COPY of the array; - * @param {String} [type] When specified, only objects of this type are returned - * @return {Array} + * Lowest pixel limit for cache canvases, set at 256PX + * @since 1.7.14 + * @type Number + * @default */ - getObjects: function(type) { - if (typeof type === 'undefined') { - return this._objects.concat(); - } - return this._objects.filter(function(o) { - return o.type === type; - }); - }, + fabric$1.minCacheSideLimit = 256; /** - * Returns object at specified index - * @param {Number} index - * @return {Self} thisArg + * Cache Object for widths of chars in text rendering. */ - item: function (index) { - return this._objects[index]; - }, + fabric$1.charWidthsCache = { }; /** - * Returns true if collection contains no objects - * @return {Boolean} true if collection is empty + * if webgl is enabled and available, textureSize will determine the size + * of the canvas backend + * @since 2.0.0 + * @type Number + * @default */ - isEmpty: function () { - return this._objects.length === 0; - }, + fabric$1.textureSize = 2048; /** - * Returns a size of a collection (i.e: length of an array containing its objects) - * @return {Number} Collection size + * When 'true', style information is not retained when copy/pasting text, making + * pasted text use destination style. + * Defaults to 'false'. + * @type Boolean + * @default */ - size: function() { - return this._objects.length; - }, + fabric$1.disableStyleCopyPaste = false; /** - * Returns true if collection contains an object - * @param {Object} object Object to check against - * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects` - * @return {Boolean} `true` if collection contains an object + * Enable webgl for filtering picture is available + * A filtering backend will be initialized, this will both take memory and + * time since a default 2048x2048 canvas will be created for the gl context + * @since 2.0.0 + * @type Boolean + * @default */ - contains: function (object, deep) { - if (this._objects.indexOf(object) > -1) { - return true; - } - else if (deep) { - return this._objects.some(function (obj) { - return typeof obj.contains === 'function' && obj.contains(object, true); - }); - } - return false; - }, + fabric$1.enableGLFiltering = true; /** - * Returns number representation of a collection complexity - * @return {Number} complexity + * Device Pixel Ratio + * @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html */ - complexity: function () { - return this._objects.reduce(function (memo, current) { - memo += current.complexity ? current.complexity() : 0; - return memo; - }, 0); - } -}; - - -/** - * @namespace fabric.CommonMethods - */ -fabric.CommonMethods = { - + fabric$1.devicePixelRatio = fabric$1.window.devicePixelRatio || + fabric$1.window.webkitDevicePixelRatio || + fabric$1.window.mozDevicePixelRatio || + 1; /** - * Sets object's properties from options - * @param {Object} [options] Options object + * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value, + * which is unitless and not rendered equally across browsers. + * + * Values that work quite well (as of October 2017) are: + * - Chrome: 1.5 + * - Edge: 1.75 + * - Firefox: 0.9 + * - Safari: 0.95 + * + * @since 2.0.0 + * @type Number + * @default 1 */ - _setOptions: function(options) { - for (var prop in options) { - this.set(prop, options[prop]); - } - }, + fabric$1.browserShadowBlurConstant = 1; /** - * @private - * @param {Object} [filler] Options object - * @param {String} [property] property to set the Gradient to + * This object contains the result of arc to bezier conversion for faster retrieving if the same arc needs to be converted again. + * It was an internal variable, is accessible since version 2.3.4 */ - _initGradient: function(filler, property) { - if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) { - this.set(property, new fabric.Gradient(filler)); - } - }, + fabric$1.arcToSegmentsCache = { }; /** - * @private - * @param {Object} [filler] Options object - * @param {String} [property] property to set the Pattern to - * @param {Function} [callback] callback to invoke after pattern load + * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it. + * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing + * you do not get any speed benefit and you get a big object in memory. + * The object was a private variable before, while now is appended to the lib so that you have access to it and you + * can eventually clear it. + * It was an internal variable, is accessible since version 2.3.4 */ - _initPattern: function(filler, property, callback) { - if (filler && filler.source && !(filler instanceof fabric.Pattern)) { - this.set(property, new fabric.Pattern(filler, callback)); - } - else { - callback && callback(); - } - }, + fabric$1.boundsOfCurveCache = { }; /** - * @private + * If disabled boundsOfCurveCache is not used. For apps that make heavy usage of pencil drawing probably disabling it is better + * @default true */ - _setObject: function(obj) { - for (var prop in obj) { - this._set(prop, obj[prop]); - } - }, + fabric$1.cachesBoundsOfCurve = true; /** - * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. - * @param {String|Object} key Property name or object (if object, iterate over the object properties) - * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) - * @return {fabric.Object} thisArg - * @chainable + * Skip performance testing of setupGLContext and force the use of putImageData that seems to be the one that works best on + * Chrome + old hardware. if your users are experiencing empty images after filtering you may try to force this to true + * this has to be set before instantiating the filtering backend ( before filtering the first image ) + * @type Boolean + * @default false */ - set: function(key, value) { - if (typeof key === 'object') { - this._setObject(key); + fabric$1.forceGLPutImageData = false; + + fabric$1.initFilterBackend = function() { + if (fabric$1.enableGLFiltering && fabric$1.isWebglSupported && fabric$1.isWebglSupported(fabric$1.textureSize)) { + console.log('max texture size: ' + fabric$1.maxTextureSize); + return (new fabric$1.WebglFilterBackend({ tileSize: fabric$1.textureSize })); } - else { - this._set(key, value); + else if (fabric$1.Canvas2dFilterBackend) { + return (new fabric$1.Canvas2dFilterBackend()); } - return this; - }, - - _set: function(key, value) { - this[key] = value; - }, + }; - /** - * Toggles specified property from `true` to `false` or from `false` to `true` - * @param {String} property Property to toggle - * @return {fabric.Object} thisArg - * @chainable - */ - toggle: function(property) { - var value = this.get(property); - if (typeof value === 'boolean') { - this.set(property, !value); + (function(global) { + if (typeof document !== 'undefined' && typeof window !== 'undefined') { + // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) + global.fabric = fabric; } - return this; - }, - - /** - * Basic getter - * @param {String} property Property name - * @return {*} value of a property - */ - get: function(property) { - return this[property]; - } -}; - - -(function(global) { - - var sqrt = Math.sqrt, - atan2 = Math.atan2, - pow = Math.pow, - PiBy180 = Math.PI / 180, - PiBy2 = Math.PI / 2; - - /** - * @namespace fabric.util - */ - fabric.util = { + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric; /** - * Calculate the cos of an angle, avoiding returning floats for known results - * @static - * @memberOf fabric.util - * @param {Number} angle the angle in radians or in degree - * @return {Number} + * @private + * @param {String} eventName + * @param {Function} handler */ - cos: function(angle) { - if (angle === 0) { return 1; } - if (angle < 0) { - // cos(a) = cos(-a) - angle = -angle; + function _removeEventListener(eventName, handler) { + if (!this.__eventListeners[eventName]) { + return; + } + var eventListener = this.__eventListeners[eventName]; + if (handler) { + eventListener[eventListener.indexOf(handler)] = false; } - var angleSlice = angle / PiBy2; - switch (angleSlice) { - case 1: case 3: return 0; - case 2: return -1; + else { + fabric.util.array.fill(eventListener, false); } - return Math.cos(angle); - }, + } /** - * Calculate the sin of an angle, avoiding returning floats for known results - * @static - * @memberOf fabric.util - * @param {Number} angle the angle in radians or in degree - * @return {Number} + * Observes specified event + * @memberOf fabric.Observable + * @alias on + * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) + * @param {Function} handler Function that receives a notification when an event of the specified type occurs + * @return {Function} disposer */ - sin: function(angle) { - if (angle === 0) { return 0; } - var angleSlice = angle / PiBy2, sign = 1; - if (angle < 0) { - // sin(-a) = -sin(a) - sign = -1; + function on(eventName, handler) { + if (!this.__eventListeners) { + this.__eventListeners = { }; } - switch (angleSlice) { - case 1: return sign; - case 2: return 0; - case 3: return -sign; + // one object with key/value pairs was passed + if (arguments.length === 1) { + for (var prop in eventName) { + this.on(prop, eventName[prop]); + } } - return Math.sin(angle); - }, - - /** - * Removes value from an array. - * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` - * @static - * @memberOf fabric.util - * @param {Array} array - * @param {*} value - * @return {Array} original array - */ - removeFromArray: function(array, value) { - var idx = array.indexOf(value); - if (idx !== -1) { - array.splice(idx, 1); + else { + if (!this.__eventListeners[eventName]) { + this.__eventListeners[eventName] = []; + } + this.__eventListeners[eventName].push(handler); } - return array; - }, + return off.bind(this, eventName, handler); + } - /** - * Returns random number between 2 specified ones. - * @static - * @memberOf fabric.util - * @param {Number} min lower limit - * @param {Number} max upper limit - * @return {Number} random value (between min and max) - */ - getRandomInt: function(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; - }, + function _once(eventName, handler) { + var _handler = function () { + handler.apply(this, arguments); + this.off(eventName, _handler); + }.bind(this); + this.on(eventName, _handler); + return _handler; + } /** - * Transforms degrees to radians. - * @static - * @memberOf fabric.util - * @param {Number} degrees value in degrees - * @return {Number} value in radians + * Observes specified event **once** + * @memberOf fabric.Observable + * @alias once + * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) + * @param {Function} handler Function that receives a notification when an event of the specified type occurs + * @return {Function} disposer */ - degreesToRadians: function(degrees) { - return degrees * PiBy180; - }, + function once(eventName, handler) { + // one object with key/value pairs was passed + if (arguments.length === 1) { + var handlers = {}; + for (var prop in eventName) { + handlers[prop] = _once.call(this, prop, eventName[prop]); + } + return off.bind(this, handlers); + } + else { + var _handler = _once.call(this, eventName, handler); + return off.bind(this, eventName, _handler); + } + } /** - * Transforms radians to degrees. - * @static - * @memberOf fabric.util - * @param {Number} radians value in radians - * @return {Number} value in degrees + * Stops event observing for a particular event handler. Calling this method + * without arguments removes all handlers for all events + * @memberOf fabric.Observable + * @alias off + * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) + * @param {Function} handler Function to be deleted from EventListeners */ - radiansToDegrees: function(radians) { - return radians / PiBy180; - }, + function off(eventName, handler) { + if (!this.__eventListeners) { + return; + } + + // remove all key/value pairs (event name -> event handler) + if (arguments.length === 0) { + for (eventName in this.__eventListeners) { + _removeEventListener.call(this, eventName); + } + } + // one object with key/value pairs was passed + else if (typeof eventName === 'object' && typeof handler === 'undefined') { + for (var prop in eventName) { + _removeEventListener.call(this, prop, eventName[prop]); + } + } + else { + _removeEventListener.call(this, eventName, handler); + } + } /** - * Rotates `point` around `origin` with `radians` - * @static - * @memberOf fabric.util - * @param {fabric.Point} point The point to rotate - * @param {fabric.Point} origin The origin of the rotation - * @param {Number} radians The radians of the angle for the rotation - * @return {fabric.Point} The new rotated point + * Fires event with an optional options object + * @memberOf fabric.Observable + * @param {String} eventName Event name to fire + * @param {Object} [options] Options object */ - rotatePoint: function(point, origin, radians) { - var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), - v = fabric.util.rotateVector(newPoint, radians); - return new fabric.Point(v.x, v.y).addEquals(origin); - }, + function fire(eventName, options) { + if (!this.__eventListeners) { + return; + } - /** - * Rotates `vector` with `radians` - * @static - * @memberOf fabric.util - * @param {Object} vector The vector to rotate (x and y) - * @param {Number} radians The radians of the angle for the rotation - * @return {Object} The new rotated point - */ - rotateVector: function(vector, radians) { - var sin = fabric.util.sin(radians), - cos = fabric.util.cos(radians), - rx = vector.x * cos - vector.y * sin, - ry = vector.x * sin + vector.y * cos; - return { - x: rx, - y: ry - }; - }, + var listenersForEvent = this.__eventListeners[eventName]; + if (!listenersForEvent) { + return; + } - /** - * Creates a vetor from points represented as a point - * @static - * @memberOf fabric.util - * - * @typedef {Object} Point - * @property {number} x - * @property {number} y - * - * @param {Point} from - * @param {Point} to - * @returns {Point} vector - */ - createVector: function (from, to) { - return new fabric.Point(to.x - from.x, to.y - from.y); - }, + for (var i = 0, len = listenersForEvent.length; i < len; i++) { + listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); + } + this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { + return value !== false; + }); + } /** - * Calculates angle between 2 vectors using dot product - * @static - * @memberOf fabric.util - * @param {Point} a - * @param {Point} b - * @returns the angle in radian between the vectors + * @namespace fabric.Observable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events} + * @see {@link http://fabricjs.com/events|Events demo} */ - calcAngleBetweenVectors: function (a, b) { - return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); - }, + fabric.Observable = { + fire: fire, + on: on, + once: once, + off: off, + }; + })(typeof exports !== 'undefined' ? exports : window); + (function(global){ + var fabric = global.fabric; /** - * @static - * @memberOf fabric.util - * @param {Point} v - * @returns {Point} vector representing the unit vector of pointing to the direction of `v` + * @namespace fabric.Collection */ - getHatVector: function (v) { - return new fabric.Point(v.x, v.y).multiply(1 / Math.hypot(v.x, v.y)); - }, + fabric.Collection = { - /** - * @static - * @memberOf fabric.util - * @param {Point} A - * @param {Point} B - * @param {Point} C - * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle - */ - getBisector: function (A, B, C) { - var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); - var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); - // check if alpha is relative to AB->BC - var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); - var phi = alpha * (ro === 0 ? 1 : -1) / 2; - return { - vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), - angle: alpha - }; - }, + /** + * @type {fabric.Object[]} + */ + _objects: [], - /** - * Project stroke width on points returning 2 projections for each point as follows: - * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke. - * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector. - * - `round`: same as `bevel` - * Used to calculate object's bounding box - * @static - * @memberOf fabric.util - * @param {Point[]} points - * @param {Object} options - * @param {number} options.strokeWidth - * @param {'miter'|'bevel'|'round'} options.strokeLineJoin - * @param {number} options.strokeMiterLimit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit - * @param {boolean} options.strokeUniform - * @param {number} options.scaleX - * @param {number} options.scaleY - * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points - * @returns {fabric.Point[]} array of size 2n/4n of all suspected points - */ - projectStrokeOnPoints: function (points, options, openPath) { - var coords = [], s = options.strokeWidth / 2, - strokeUniformScalar = options.strokeUniform ? - new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), - getStrokeHatVector = function (v) { - var scalar = s / (Math.hypot(v.x, v.y)); - return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); - }; - if (points.length <= 1) {return coords;} - points.forEach(function (p, index) { - var A = new fabric.Point(p.x, p.y), B, C; - if (index === 0) { - C = points[index + 1]; - B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; + /** + * Adds objects to collection, Canvas or Group, then renders canvas + * (if `renderOnAddRemove` is not `false`). + * Objects should be instances of (or inherit from) fabric.Object + * @private + * @param {fabric.Object[]} objects to add + * @param {(object:fabric.Object) => any} [callback] + * @returns {number} new array length + */ + add: function (objects, callback) { + var size = this._objects.push.apply(this._objects, objects); + if (callback) { + for (var i = 0; i < objects.length; i++) { + callback.call(this, objects[i]); + } } - else if (index === points.length - 1) { - B = points[index - 1]; - C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; + return size; + }, + + /** + * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) + * An object should be an instance of (or inherit from) fabric.Object + * @private + * @param {fabric.Object|fabric.Object[]} objects Object(s) to insert + * @param {Number} index Index to insert object at + * @param {(object:fabric.Object) => any} [callback] + * @returns {number} new array length + */ + insertAt: function (objects, index, callback) { + var args = [index, 0].concat(objects); + this._objects.splice.apply(this._objects, args); + if (callback) { + for (var i = 2; i < args.length; i++) { + callback.call(this, args[i]); + } } - else { - B = points[index - 1]; - C = points[index + 1]; - } - var bisector = fabric.util.getBisector(A, B, C), - bisectorVector = bisector.vector, - alpha = bisector.angle, - scalar, - miterVector; - if (options.strokeLineJoin === 'miter') { - scalar = -s / Math.sin(alpha / 2); - miterVector = new fabric.Point( - bisectorVector.x * scalar * strokeUniformScalar.x, - bisectorVector.y * scalar * strokeUniformScalar.y - ); - if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - return; + return this._objects.length; + }, + + /** + * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) + * @private + * @param {fabric.Object[]} objectsToRemove objects to remove + * @param {(object:fabric.Object) => any} [callback] function to call for each object removed + * @returns {fabric.Object[]} removed objects + */ + remove: function(objectsToRemove, callback) { + var objects = this._objects, removed = []; + for (var i = 0, object, index; i < objectsToRemove.length; i++) { + object = objectsToRemove[i]; + index = objects.indexOf(object); + // only call onObjectRemoved if an object was actually removed + if (index !== -1) { + objects.splice(index, 1); + removed.push(object); + callback && callback.call(this, object); } } - scalar = -s * Math.SQRT2; - miterVector = new fabric.Point( - bisectorVector.x * scalar * strokeUniformScalar.x, - bisectorVector.y * scalar * strokeUniformScalar.y - ); - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - }); - return coords; - }, + return removed; + }, - /** - * Apply transform t to point p - * @static - * @memberOf fabric.util - * @param {fabric.Point} p The point to transform - * @param {Array} t The transform - * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied - * @return {fabric.Point} The transformed point - */ - transformPoint: function(p, t, ignoreOffset) { - if (ignoreOffset) { - return new fabric.Point( - t[0] * p.x + t[2] * p.y, - t[1] * p.x + t[3] * p.y - ); - } - return new fabric.Point( - t[0] * p.x + t[2] * p.y + t[4], - t[1] * p.x + t[3] * p.y + t[5] - ); - }, + /** + * Executes given function for each object in this group + * @param {Function} callback + * Callback invoked with current object as first argument, + * index - as second and an array of all objects - as third. + * Callback is invoked in a context of Global Object (e.g. `window`) + * when no `context` argument is given + * + * @param {Object} context Context (aka thisObject) + * @return {Self} thisArg + * @chainable + */ + forEachObject: function(callback, context) { + var objects = this.getObjects(); + for (var i = 0; i < objects.length; i++) { + callback.call(context, objects[i], i, objects); + } + return this; + }, - /** - * Returns coordinates of points's bounding rectangle (left, top, width, height) - * @param {Array} points 4 points array - * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix - * @return {Object} Object with left, top, width, height properties - */ - makeBoundingBoxFromPoints: function(points, transform) { - if (transform) { - for (var i = 0; i < points.length; i++) { - points[i] = fabric.util.transformPoint(points[i], transform); + /** + * Returns an array of children objects of this instance + * @param {...String} [types] When specified, only objects of these types are returned + * @return {Array} + */ + getObjects: function() { + if (arguments.length === 0) { + return this._objects.concat(); } - } - var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], - minX = fabric.util.array.min(xPoints), - maxX = fabric.util.array.max(xPoints), - width = maxX - minX, - yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], - minY = fabric.util.array.min(yPoints), - maxY = fabric.util.array.max(yPoints), - height = maxY - minY; + var types = Array.from(arguments); + return this._objects.filter(function (o) { + return types.indexOf(o.type) > -1; + }); + }, - return { - left: minX, - top: minY, - width: width, - height: height - }; - }, + /** + * Returns object at specified index + * @param {Number} index + * @return {Self} thisArg + */ + item: function (index) { + return this._objects[index]; + }, - /** - * Invert transformation t - * @static - * @memberOf fabric.util - * @param {Array} t The transform - * @return {Array} The inverted transform - */ - invertTransform: function(t) { - var a = 1 / (t[0] * t[3] - t[1] * t[2]), - r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], - o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); - r[4] = -o.x; - r[5] = -o.y; - return r; - }, + /** + * Returns true if collection contains no objects + * @return {Boolean} true if collection is empty + */ + isEmpty: function () { + return this._objects.length === 0; + }, - /** - * A wrapper around Number#toFixed, which contrary to native method returns number, not string. - * @static - * @memberOf fabric.util - * @param {Number|String} number number to operate on - * @param {Number} fractionDigits number of fraction digits to "leave" - * @return {Number} - */ - toFixed: function(number, fractionDigits) { - return parseFloat(Number(number).toFixed(fractionDigits)); - }, + /** + * Returns a size of a collection (i.e: length of an array containing its objects) + * @return {Number} Collection size + */ + size: function() { + return this._objects.length; + }, + + /** + * Returns true if collection contains an object.\ + * **Prefer using {@link `fabric.Object#isDescendantOf`} for performance reasons** + * instead of a.contains(b) use b.isDescendantOf(a) + * @param {Object} object Object to check against + * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects` + * @return {Boolean} `true` if collection contains an object + */ + contains: function (object, deep) { + if (this._objects.indexOf(object) > -1) { + return true; + } + else if (deep) { + return this._objects.some(function (obj) { + return typeof obj.contains === 'function' && obj.contains(object, true); + }); + } + return false; + }, + + /** + * Returns number representation of a collection complexity + * @return {Number} complexity + */ + complexity: function () { + return this._objects.reduce(function (memo, current) { + memo += current.complexity ? current.complexity() : 0; + return memo; + }, 0); + } + }; + })(typeof exports !== 'undefined' ? exports : window); + (function(global){ + var fabric = global.fabric; /** - * Converts from attribute value to pixel value if applicable. - * Returns converted pixels or original value not converted. - * @param {Number|String} value number to operate on - * @param {Number} fontSize - * @return {Number|String} + * @namespace fabric.CommonMethods */ - parseUnit: function(value, fontSize) { - var unit = /\D{0,2}$/.exec(value), - number = parseFloat(value); - if (!fontSize) { - fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; - } - switch (unit[0]) { - case 'mm': - return number * fabric.DPI / 25.4; + fabric.CommonMethods = { - case 'cm': - return number * fabric.DPI / 2.54; + /** + * Sets object's properties from options + * @param {Object} [options] Options object + */ + _setOptions: function(options) { + for (var prop in options) { + this.set(prop, options[prop]); + } + }, - case 'in': - return number * fabric.DPI; + /** + * @private + */ + _setObject: function(obj) { + for (var prop in obj) { + this._set(prop, obj[prop]); + } + }, - case 'pt': - return number * fabric.DPI / 72; // or * 4 / 3 + /** + * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. + * @param {String|Object} key Property name or object (if object, iterate over the object properties) + * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) + * @return {fabric.Object} thisArg + * @chainable + */ + set: function(key, value) { + if (typeof key === 'object') { + this._setObject(key); + } + else { + this._set(key, value); + } + return this; + }, - case 'pc': - return number * fabric.DPI / 72 * 12; // or * 16 + _set: function(key, value) { + this[key] = value; + }, - case 'em': - return number * fontSize; + /** + * Toggles specified property from `true` to `false` or from `false` to `true` + * @param {String} property Property to toggle + * @return {fabric.Object} thisArg + * @chainable + */ + toggle: function(property) { + var value = this.get(property); + if (typeof value === 'boolean') { + this.set(property, !value); + } + return this; + }, - default: - return number; + /** + * Basic getter + * @param {String} property Property name + * @return {*} value of a property + */ + get: function(property) { + return this[property]; } - }, + }; + })(typeof exports !== 'undefined' ? exports : window); - /** - * Function which always returns `false`. - * @static - * @memberOf fabric.util - * @return {Boolean} - */ - falseFunction: function() { - return false; - }, + (function(global) { - /** - * Returns klass "Class" object of given namespace - * @memberOf fabric.util - * @param {String} type Type of object (eg. 'circle') - * @param {String} namespace Namespace to get klass "Class" object from - * @return {Object} klass "Class" - */ - getKlass: function(type, namespace) { - // capitalize first letter only - type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); - return fabric.util.resolveNamespace(namespace)[type]; - }, + var fabric = global.fabric, sqrt = Math.sqrt, + atan2 = Math.atan2, + pow = Math.pow, + PiBy180 = Math.PI / 180, + PiBy2 = Math.PI / 2; /** - * Returns array of attributes for given svg that fabric parses - * @memberOf fabric.util - * @param {String} type Type of svg element (eg. 'circle') - * @return {Array} string names of supported attributes - */ - getSvgAttributes: function(type) { - var attributes = [ - 'instantiated_by_use', - 'style', - 'id', - 'class' - ]; - switch (type) { - case 'linearGradient': - attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); - break; - case 'radialGradient': - attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); - break; - case 'stop': - attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); - break; - } - return attributes; - }, + * @typedef {[number,number,number,number,number,number]} Matrix + */ /** - * Returns object of given namespace - * @memberOf fabric.util - * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric' - * @return {Object} Object for given namespace (default fabric) + * @namespace fabric.util */ - resolveNamespace: function(namespace) { - if (!namespace) { - return fabric; - } + fabric.util = { - var parts = namespace.split('.'), - len = parts.length, i, - obj = global || fabric.window; + /** + * Calculate the cos of an angle, avoiding returning floats for known results + * @static + * @memberOf fabric.util + * @param {Number} angle the angle in radians or in degree + * @return {Number} + */ + cos: function(angle) { + if (angle === 0) { return 1; } + if (angle < 0) { + // cos(a) = cos(-a) + angle = -angle; + } + var angleSlice = angle / PiBy2; + switch (angleSlice) { + case 1: case 3: return 0; + case 2: return -1; + } + return Math.cos(angle); + }, - for (i = 0; i < len; ++i) { - obj = obj[parts[i]]; - } + /** + * Calculate the sin of an angle, avoiding returning floats for known results + * @static + * @memberOf fabric.util + * @param {Number} angle the angle in radians or in degree + * @return {Number} + */ + sin: function(angle) { + if (angle === 0) { return 0; } + var angleSlice = angle / PiBy2, sign = 1; + if (angle < 0) { + // sin(-a) = -sin(a) + sign = -1; + } + switch (angleSlice) { + case 1: return sign; + case 2: return 0; + case 3: return -sign; + } + return Math.sin(angle); + }, - return obj; - }, + /** + * Removes value from an array. + * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` + * @static + * @memberOf fabric.util + * @param {Array} array + * @param {*} value + * @return {Array} original array + */ + removeFromArray: function(array, value) { + var idx = array.indexOf(value); + if (idx !== -1) { + array.splice(idx, 1); + } + return array; + }, - /** - * Loads image element from given url and passes it to a callback - * @memberOf fabric.util - * @param {String} url URL representing an image - * @param {Function} callback Callback; invoked with loaded image - * @param {*} [context] Context to invoke callback in - * @param {Object} [crossOrigin] crossOrigin value to set image element to - */ - loadImage: function(url, callback, context, crossOrigin) { - if (!url) { - callback && callback.call(context, url); - return; - } + /** + * Returns random number between 2 specified ones. + * @static + * @memberOf fabric.util + * @param {Number} min lower limit + * @param {Number} max upper limit + * @return {Number} random value (between min and max) + */ + getRandomInt: function(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, - var img = fabric.util.createImage(); + /** + * Transforms degrees to radians. + * @static + * @memberOf fabric.util + * @param {Number} degrees value in degrees + * @return {Number} value in radians + */ + degreesToRadians: function(degrees) { + return degrees * PiBy180; + }, - /** @ignore */ - var onLoadCallback = function () { - callback && callback.call(context, img, false); - img = img.onload = img.onerror = null; - }; + /** + * Transforms radians to degrees. + * @static + * @memberOf fabric.util + * @param {Number} radians value in radians + * @return {Number} value in degrees + */ + radiansToDegrees: function(radians) { + return radians / PiBy180; + }, - img.onload = onLoadCallback; - /** @ignore */ - img.onerror = function() { - fabric.log('Error loading ' + img.src); - callback && callback.call(context, null, true); - img = img.onload = img.onerror = null; - }; + /** + * Rotates `point` around `origin` with `radians` + * @static + * @memberOf fabric.util + * @param {fabric.Point} point The point to rotate + * @param {fabric.Point} origin The origin of the rotation + * @param {Number} radians The radians of the angle for the rotation + * @return {fabric.Point} The new rotated point + */ + rotatePoint: function(point, origin, radians) { + var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), + v = fabric.util.rotateVector(newPoint, radians); + return v.addEquals(origin); + }, - // data-urls appear to be buggy with crossOrigin - // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767 - // see https://code.google.com/p/chromium/issues/detail?id=315152 - // https://bugzilla.mozilla.org/show_bug.cgi?id=935069 - // crossOrigin null is the same as not set. - if (url.indexOf('data') !== 0 && - crossOrigin !== undefined && - crossOrigin !== null) { - img.crossOrigin = crossOrigin; - } + /** + * Rotates `vector` with `radians` + * @static + * @memberOf fabric.util + * @param {Object} vector The vector to rotate (x and y) + * @param {Number} radians The radians of the angle for the rotation + * @return {fabric.Point} The new rotated point + */ + rotateVector: function(vector, radians) { + var sin = fabric.util.sin(radians), + cos = fabric.util.cos(radians), + rx = vector.x * cos - vector.y * sin, + ry = vector.x * sin + vector.y * cos; + return new fabric.Point(rx, ry); + }, - // IE10 / IE11-Fix: SVG contents from data: URI - // will only be available if the IMG is present - // in the DOM (and visible) - if (url.substring(0,14) === 'data:image/svg') { - img.onload = null; - fabric.util.loadImageInDom(img, onLoadCallback); - } + /** + * Creates a vetor from points represented as a point + * @static + * @memberOf fabric.util + * + * @typedef {Object} Point + * @property {number} x + * @property {number} y + * + * @param {Point} from + * @param {Point} to + * @returns {Point} vector + */ + createVector: function (from, to) { + return new fabric.Point(to.x - from.x, to.y - from.y); + }, - img.src = url; - }, + /** + * Calculates angle between 2 vectors using dot product + * @static + * @memberOf fabric.util + * @param {Point} a + * @param {Point} b + * @returns the angle in radian between the vectors + */ + calcAngleBetweenVectors: function (a, b) { + return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); + }, - /** - * Attaches SVG image with data: URL to the dom - * @memberOf fabric.util - * @param {Object} img Image object with data:image/svg src - * @param {Function} callback Callback; invoked with loaded image - * @return {Object} DOM element (div containing the SVG image) - */ - loadImageInDom: function(img, onLoadCallback) { - var div = fabric.document.createElement('div'); - div.style.width = div.style.height = '1px'; - div.style.left = div.style.top = '-100%'; - div.style.position = 'absolute'; - div.appendChild(img); - fabric.document.querySelector('body').appendChild(div); - /** - * Wrap in function to: - * 1. Call existing callback - * 2. Cleanup DOM - */ - img.onload = function () { - onLoadCallback(); - div.parentNode.removeChild(div); - div = null; - }; - }, + /** + * @static + * @memberOf fabric.util + * @param {Point} v + * @returns {Point} vector representing the unit vector of pointing to the direction of `v` + */ + getHatVector: function (v) { + return new fabric.Point(v.x, v.y).scalarMultiply(1 / Math.hypot(v.x, v.y)); + }, - /** - * Creates corresponding fabric instances from their object representations - * @static - * @memberOf fabric.util - * @param {Array} objects Objects to enliven - * @param {Function} callback Callback to invoke when all objects are created - * @param {String} namespace Namespace to get klass "Class" object from - * @param {Function} reviver Method for further parsing of object elements, - * called after each fabric object created. - */ - enlivenObjects: function(objects, callback, namespace, reviver) { - objects = objects || []; + /** + * @static + * @memberOf fabric.util + * @param {Point} A + * @param {Point} B + * @param {Point} C + * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle + */ + getBisector: function (A, B, C) { + var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); + var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); + // check if alpha is relative to AB->BC + var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); + var phi = alpha * (ro === 0 ? 1 : -1) / 2; + return { + vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), + angle: alpha + }; + }, - var enlivenedObjects = [], - numLoadedObjects = 0, - numTotalObjects = objects.length; + /** + * Project stroke width on points returning 2 projections for each point as follows: + * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke. + * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector. + * - `round`: same as `bevel` + * Used to calculate object's bounding box + * @static + * @memberOf fabric.util + * @param {Point[]} points + * @param {Object} options + * @param {number} options.strokeWidth + * @param {'miter'|'bevel'|'round'} options.strokeLineJoin + * @param {number} options.strokeMiterLimit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit + * @param {boolean} options.strokeUniform + * @param {number} options.scaleX + * @param {number} options.scaleY + * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points + * @returns {fabric.Point[]} array of size 2n/4n of all suspected points + */ + projectStrokeOnPoints: function (points, options, openPath) { + var coords = [], s = options.strokeWidth / 2, + strokeUniformScalar = options.strokeUniform ? + new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), + getStrokeHatVector = function (v) { + var scalar = s / (Math.hypot(v.x, v.y)); + return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); + }; + if (points.length <= 1) {return coords;} + points.forEach(function (p, index) { + var A = new fabric.Point(p.x, p.y), B, C; + if (index === 0) { + C = points[index + 1]; + B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; + } + else if (index === points.length - 1) { + B = points[index - 1]; + C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; + } + else { + B = points[index - 1]; + C = points[index + 1]; + } + var bisector = fabric.util.getBisector(A, B, C), + bisectorVector = bisector.vector, + alpha = bisector.angle, + scalar, + miterVector; + if (options.strokeLineJoin === 'miter') { + scalar = -s / Math.sin(alpha / 2); + miterVector = new fabric.Point( + bisectorVector.x * scalar * strokeUniformScalar.x, + bisectorVector.y * scalar * strokeUniformScalar.y + ); + if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + return; + } + } + scalar = -s * Math.SQRT2; + miterVector = new fabric.Point( + bisectorVector.x * scalar * strokeUniformScalar.x, + bisectorVector.y * scalar * strokeUniformScalar.y + ); + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + }); + return coords; + }, - function onLoaded() { - if (++numLoadedObjects === numTotalObjects) { - callback && callback(enlivenedObjects.filter(function(obj) { - // filter out undefined objects (objects that gave error) - return obj; - })); + /** + * Apply transform t to point p + * @static + * @memberOf fabric.util + * @param {fabric.Point} p The point to transform + * @param {Array} t The transform + * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied + * @return {fabric.Point} The transformed point + */ + transformPoint: function(p, t, ignoreOffset) { + if (ignoreOffset) { + return new fabric.Point( + t[0] * p.x + t[2] * p.y, + t[1] * p.x + t[3] * p.y + ); } - } + return new fabric.Point( + t[0] * p.x + t[2] * p.y + t[4], + t[1] * p.x + t[3] * p.y + t[5] + ); + }, - if (!numTotalObjects) { - callback && callback(enlivenedObjects); - return; - } + /** + * Sends a point from the source coordinate plane to the destination coordinate plane.\ + * From the canvas/viewer's perspective the point remains unchanged. + * + * @example Send point from canvas plane to group plane + * var obj = new fabric.Rect({ left: 20, top: 20, width: 60, height: 60, strokeWidth: 0 }); + * var group = new fabric.Group([obj], { strokeWidth: 0 }); + * var sentPoint1 = fabric.util.sendPointToPlane(new fabric.Point(50, 50), null, group.calcTransformMatrix()); + * var sentPoint2 = fabric.util.sendPointToPlane(new fabric.Point(50, 50), fabric.iMatrix, group.calcTransformMatrix()); + * console.log(sentPoint1, sentPoint2) // both points print (0,0) which is the center of group + * + * @static + * @memberOf fabric.util + * @see {fabric.util.transformPointRelativeToCanvas} for transforming relative to canvas + * @param {fabric.Point} point + * @param {Matrix} [from] plane matrix containing object. Passing `null` is equivalent to passing the identity matrix, which means `point` exists in the canvas coordinate plane. + * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `point` should be sent to the canvas coordinate plane. + * @returns {fabric.Point} transformed point + */ + sendPointToPlane: function (point, from, to) { + // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) + // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) + var inv = fabric.util.invertTransform(to || fabric.iMatrix); + var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); + return fabric.util.transformPoint(point, t); + }, - objects.forEach(function (o, index) { - // if sparse array - if (!o || !o.type) { - onLoaded(); - return; + /** + * Transform point relative to canvas. + * From the viewport/viewer's perspective the point remains unchanged. + * + * `child` relation means `point` exists in the coordinate plane created by `canvas`. + * In other words point is measured acoording to canvas' top left corner + * meaning that if `point` is equal to (0,0) it is positioned at canvas' top left corner. + * + * `sibling` relation means `point` exists in the same coordinate plane as canvas. + * In other words they both relate to the same (0,0) and agree on every point, which is how an event relates to canvas. + * + * @static + * @memberOf fabric.util + * @param {fabric.Point} point + * @param {fabric.StaticCanvas} canvas + * @param {'sibling'|'child'} relationBefore current relation of point to canvas + * @param {'sibling'|'child'} relationAfter desired relation of point to canvas + * @returns {fabric.Point} transformed point + */ + transformPointRelativeToCanvas: function (point, canvas, relationBefore, relationAfter) { + if (relationBefore !== 'child' && relationBefore !== 'sibling') { + throw new Error('fabric.js: received bad argument ' + relationBefore); } - var klass = fabric.util.getKlass(o.type, namespace); - klass.fromObject(o, function (obj, error) { - error || (enlivenedObjects[index] = obj); - reviver && reviver(o, obj, error); - onLoaded(); - }); - }); - }, - - /** - * Creates corresponding fabric instances residing in an object, e.g. `clipPath` - * @see {@link fabric.Object.ENLIVEN_PROPS} - * @param {Object} object - * @param {Object} [context] assign enlived props to this object (pass null to skip this) - * @param {(objects:fabric.Object[]) => void} callback - */ - enlivenObjectEnlivables: function (object, context, callback) { - var enlivenProps = fabric.Object.ENLIVEN_PROPS.filter(function (key) { return !!object[key]; }); - fabric.util.enlivenObjects(enlivenProps.map(function (key) { return object[key]; }), function (enlivedProps) { - var objects = {}; - enlivenProps.forEach(function (key, index) { - objects[key] = enlivedProps[index]; - context && (context[key] = enlivedProps[index]); - }); - callback && callback(objects); - }); - }, - - /** - * Create and wait for loading of patterns - * @static - * @memberOf fabric.util - * @param {Array} patterns Objects to enliven - * @param {Function} callback Callback to invoke when all objects are created - * called after each fabric object created. - */ - enlivenPatterns: function(patterns, callback) { - patterns = patterns || []; + if (relationAfter !== 'child' && relationAfter !== 'sibling') { + throw new Error('fabric.js: received bad argument ' + relationAfter); + } + if (relationBefore === relationAfter) { + return point; + } + var t = canvas.viewportTransform; + return fabric.util.transformPoint(point, relationAfter === 'child' ? fabric.util.invertTransform(t) : t); + }, - function onLoaded() { - if (++numLoadedPatterns === numPatterns) { - callback && callback(enlivenedPatterns); + /** + * Returns coordinates of points's bounding rectangle (left, top, width, height) + * @static + * @memberOf fabric.util + * @param {Array} points 4 points array + * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix + * @return {Object} Object with left, top, width, height properties + */ + makeBoundingBoxFromPoints: function(points, transform) { + if (transform) { + for (var i = 0; i < points.length; i++) { + points[i] = fabric.util.transformPoint(points[i], transform); + } } - } + var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], + minX = fabric.util.array.min(xPoints), + maxX = fabric.util.array.max(xPoints), + width = maxX - minX, + yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], + minY = fabric.util.array.min(yPoints), + maxY = fabric.util.array.max(yPoints), + height = maxY - minY; - var enlivenedPatterns = [], - numLoadedPatterns = 0, - numPatterns = patterns.length; + return { + left: minX, + top: minY, + width: width, + height: height + }; + }, - if (!numPatterns) { - callback && callback(enlivenedPatterns); - return; - } + /** + * Invert transformation t + * @static + * @memberOf fabric.util + * @param {Array} t The transform + * @return {Array} The inverted transform + */ + invertTransform: function(t) { + var a = 1 / (t[0] * t[3] - t[1] * t[2]), + r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], + o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); + r[4] = -o.x; + r[5] = -o.y; + return r; + }, - patterns.forEach(function (p, index) { - if (p && p.source) { - new fabric.Pattern(p, function(pattern) { - enlivenedPatterns[index] = pattern; - onLoaded(); - }); - } - else { - enlivenedPatterns[index] = p; - onLoaded(); - } - }); - }, + /** + * A wrapper around Number#toFixed, which contrary to native method returns number, not string. + * @static + * @memberOf fabric.util + * @param {Number|String} number number to operate on + * @param {Number} fractionDigits number of fraction digits to "leave" + * @return {Number} + */ + toFixed: function(number, fractionDigits) { + return parseFloat(Number(number).toFixed(fractionDigits)); + }, - /** - * Groups SVG elements (usually those retrieved from SVG document) - * @static - * @memberOf fabric.util - * @param {Array} elements SVG elements to group - * @param {Object} [options] Options object - * @param {String} path Value to set sourcePath to - * @return {fabric.Object|fabric.Group} - */ - groupSVGElements: function(elements, options, path) { - var object; - if (elements && elements.length === 1) { - return elements[0]; - } - if (options) { - if (options.width && options.height) { - options.centerPoint = { - x: options.width / 2, - y: options.height / 2 - }; - } - else { - delete options.width; - delete options.height; + /** + * Converts from attribute value to pixel value if applicable. + * Returns converted pixels or original value not converted. + * @param {Number|String} value number to operate on + * @param {Number} fontSize + * @return {Number|String} + */ + parseUnit: function(value, fontSize) { + var unit = /\D{0,2}$/.exec(value), + number = parseFloat(value); + if (!fontSize) { + fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; } - } - object = new fabric.Group(elements, options); - if (typeof path !== 'undefined') { - object.sourcePath = path; - } - return object; - }, + switch (unit[0]) { + case 'mm': + return number * fabric.DPI / 25.4; - /** - * Populates an object with properties of another object - * @static - * @memberOf fabric.util - * @param {Object} source Source object - * @param {Object} destination Destination object - * @return {Array} properties Properties names to include - */ - populateWithProperties: function(source, destination, properties) { - if (properties && Object.prototype.toString.call(properties) === '[object Array]') { - for (var i = 0, len = properties.length; i < len; i++) { - if (properties[i] in source) { - destination[properties[i]] = source[properties[i]]; - } - } - } - }, + case 'cm': + return number * fabric.DPI / 2.54; - /** - * Creates canvas element - * @static - * @memberOf fabric.util - * @return {CanvasElement} initialized canvas element - */ - createCanvasElement: function() { - return fabric.document.createElement('canvas'); - }, + case 'in': + return number * fabric.DPI; - /** - * Creates a canvas element that is a copy of another and is also painted - * @param {CanvasElement} canvas to copy size and content of - * @static - * @memberOf fabric.util - * @return {CanvasElement} initialized canvas element - */ - copyCanvasElement: function(canvas) { - var newCanvas = fabric.util.createCanvasElement(); - newCanvas.width = canvas.width; - newCanvas.height = canvas.height; - newCanvas.getContext('2d').drawImage(canvas, 0, 0); - return newCanvas; - }, + case 'pt': + return number * fabric.DPI / 72; // or * 4 / 3 - /** - * since 2.6.0 moved from canvas instance to utility. - * @param {CanvasElement} canvasEl to copy size and content of - * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too - * @param {Number} quality <= 1 and > 0 - * @static - * @memberOf fabric.util - * @return {String} data url - */ - toDataURL: function(canvasEl, format, quality) { - return canvasEl.toDataURL('image/' + format, quality); - }, + case 'pc': + return number * fabric.DPI / 72 * 12; // or * 16 - /** - * Creates image element (works on client and node) - * @static - * @memberOf fabric.util - * @return {HTMLImageElement} HTML image element - */ - createImage: function() { - return fabric.document.createElement('img'); - }, + case 'em': + return number * fontSize; - /** - * Multiply matrix A by matrix B to nest transformations - * @static - * @memberOf fabric.util - * @param {Array} a First transformMatrix - * @param {Array} b Second transformMatrix - * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices - * @return {Array} The product of the two transform matrices - */ - multiplyTransformMatrices: function(a, b, is2x2) { - // Matrix multiply a * b - return [ - a[0] * b[0] + a[2] * b[1], - a[1] * b[0] + a[3] * b[1], - a[0] * b[2] + a[2] * b[3], - a[1] * b[2] + a[3] * b[3], - is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], - is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] - ]; - }, + default: + return number; + } + }, - /** - * Decomposes standard 2x3 matrix into transform components - * @static - * @memberOf fabric.util - * @param {Array} a transformMatrix - * @return {Object} Components of transform - */ - qrDecompose: function(a) { - var angle = atan2(a[1], a[0]), - denom = pow(a[0], 2) + pow(a[1], 2), - scaleX = sqrt(denom), - scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, - skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); - return { - angle: angle / PiBy180, - scaleX: scaleX, - scaleY: scaleY, - skewX: skewX / PiBy180, - skewY: 0, - translateX: a[4], - translateY: a[5] - }; - }, + /** + * Function which always returns `false`. + * @static + * @memberOf fabric.util + * @return {Boolean} + */ + falseFunction: function() { + return false; + }, - /** - * Returns a transform matrix starting from an object of the same kind of - * the one returned from qrDecompose, useful also if you want to calculate some - * transformations from an object that is not enlived yet - * @static - * @memberOf fabric.util - * @param {Object} options - * @param {Number} [options.angle] angle in degrees - * @return {Number[]} transform matrix - */ - calcRotateMatrix: function(options) { - if (!options.angle) { - return fabric.iMatrix.concat(); - } - var theta = fabric.util.degreesToRadians(options.angle), - cos = fabric.util.cos(theta), - sin = fabric.util.sin(theta); - return [cos, sin, -sin, cos, 0, 0]; - }, + /** + * Returns klass "Class" object of given namespace + * @memberOf fabric.util + * @param {String} type Type of object (eg. 'circle') + * @param {String} namespace Namespace to get klass "Class" object from + * @return {Object} klass "Class" + */ + getKlass: function(type, namespace) { + // capitalize first letter only + type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); + return fabric.util.resolveNamespace(namespace)[type]; + }, - /** - * Returns a transform matrix starting from an object of the same kind of - * the one returned from qrDecompose, useful also if you want to calculate some - * transformations from an object that is not enlived yet. - * is called DimensionsTransformMatrix because those properties are the one that influence - * the size of the resulting box of the object. - * @static - * @memberOf fabric.util - * @param {Object} options - * @param {Number} [options.scaleX] - * @param {Number} [options.scaleY] - * @param {Boolean} [options.flipX] - * @param {Boolean} [options.flipY] - * @param {Number} [options.skewX] - * @param {Number} [options.skewY] - * @return {Number[]} transform matrix - */ - calcDimensionsMatrix: function(options) { - var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, - scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, - scaleMatrix = [ - options.flipX ? -scaleX : scaleX, - 0, - 0, - options.flipY ? -scaleY : scaleY, - 0, - 0], - multiply = fabric.util.multiplyTransformMatrices, - degreesToRadians = fabric.util.degreesToRadians; - if (options.skewX) { - scaleMatrix = multiply( - scaleMatrix, - [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], - true); - } - if (options.skewY) { - scaleMatrix = multiply( - scaleMatrix, - [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], - true); - } - return scaleMatrix; - }, - - /** - * Returns a transform matrix starting from an object of the same kind of - * the one returned from qrDecompose, useful also if you want to calculate some - * transformations from an object that is not enlived yet - * @static - * @memberOf fabric.util - * @param {Object} options - * @param {Number} [options.angle] - * @param {Number} [options.scaleX] - * @param {Number} [options.scaleY] - * @param {Boolean} [options.flipX] - * @param {Boolean} [options.flipY] - * @param {Number} [options.skewX] - * @param {Number} [options.skewX] - * @param {Number} [options.translateX] - * @param {Number} [options.translateY] - * @return {Number[]} transform matrix - */ - composeMatrix: function(options) { - var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], - multiply = fabric.util.multiplyTransformMatrices; - if (options.angle) { - matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); - } - if (options.scaleX !== 1 || options.scaleY !== 1 || - options.skewX || options.skewY || options.flipX || options.flipY) { - matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); - } - return matrix; - }, - - /** - * reset an object transform state to neutral. Top and left are not accounted for - * @static - * @memberOf fabric.util - * @param {fabric.Object} target object to transform - */ - resetObjectTransform: function (target) { - target.scaleX = 1; - target.scaleY = 1; - target.skewX = 0; - target.skewY = 0; - target.flipX = false; - target.flipY = false; - target.rotate(0); - }, + /** + * Returns array of attributes for given svg that fabric parses + * @memberOf fabric.util + * @param {String} type Type of svg element (eg. 'circle') + * @return {Array} string names of supported attributes + */ + getSvgAttributes: function(type) { + var attributes = [ + 'instantiated_by_use', + 'style', + 'id', + 'class' + ]; + switch (type) { + case 'linearGradient': + attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); + break; + case 'radialGradient': + attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); + break; + case 'stop': + attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); + break; + } + return attributes; + }, - /** - * Extract Object transform values - * @static - * @memberOf fabric.util - * @param {fabric.Object} target object to read from - * @return {Object} Components of transform - */ - saveObjectTransform: function (target) { - return { - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - angle: target.angle, - left: target.left, - flipX: target.flipX, - flipY: target.flipY, - top: target.top - }; - }, + /** + * Returns object of given namespace + * @memberOf fabric.util + * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric' + * @return {Object} Object for given namespace (default fabric) + */ + resolveNamespace: function(namespace) { + if (!namespace) { + return fabric; + } - /** - * Returns true if context has transparent pixel - * at specified location (taking tolerance into account) - * @param {CanvasRenderingContext2D} ctx context - * @param {Number} x x coordinate - * @param {Number} y y coordinate - * @param {Number} tolerance Tolerance - */ - isTransparent: function(ctx, x, y, tolerance) { + var parts = namespace.split('.'), + len = parts.length, i, + obj = global || fabric.window; - // If tolerance is > 0 adjust start coords to take into account. - // If moves off Canvas fix to 0 - if (tolerance > 0) { - if (x > tolerance) { - x -= tolerance; - } - else { - x = 0; + for (i = 0; i < len; ++i) { + obj = obj[parts[i]]; } - if (y > tolerance) { - y -= tolerance; - } - else { - y = 0; - } - } - var _isTransparent = true, i, temp, - imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), - l = imageData.data.length; + return obj; + }, - // Split image data - for tolerance > 1, pixelDataSize = 4; - for (i = 3; i < l; i += 4) { - temp = imageData.data[i]; - _isTransparent = temp <= 0; - if (_isTransparent === false) { - break; // Stop if colour found - } - } + /** + * Loads image element from given url and resolve it, or catch. + * @memberOf fabric.util + * @param {String} url URL representing an image + * @param {Object} [options] image loading options + * @param {string} [options.crossOrigin] cors value for the image loading, default to anonymous + * @param {Promise} img the loaded image. + */ + loadImage: function(url, options) { + return new Promise(function(resolve, reject) { + var img = fabric.util.createImage(); + var done = function() { + img.onload = img.onerror = null; + resolve(img); + }; + if (!url) { + done(); + } + else { + img.onload = done; + img.onerror = function () { + reject(new Error('Error loading ' + img.src)); + }; + options && options.crossOrigin && (img.crossOrigin = options.crossOrigin); + img.src = url; + } + }); + }, - imageData = null; + /** + * Creates corresponding fabric instances from their object representations + * @static + * @memberOf fabric.util + * @param {Object[]} objects Objects to enliven + * @param {String} namespace Namespace to get klass "Class" object from + * @param {Function} reviver Method for further parsing of object elements, + * called after each fabric object created. + */ + enlivenObjects: function(objects, namespace, reviver) { + return Promise.all(objects.map(function(obj) { + var klass = fabric.util.getKlass(obj.type, namespace); + return klass.fromObject(obj).then(function(fabricInstance) { + reviver && reviver(obj, fabricInstance); + return fabricInstance; + }); + })); + }, - return _isTransparent; - }, + /** + * Creates corresponding fabric instances residing in an object, e.g. `clipPath` + * @param {Object} object with properties to enlive ( fill, stroke, clipPath, path ) + * @returns {Promise} the input object with enlived values + */ - /** - * Parse preserveAspectRatio attribute from element - * @param {string} attribute to be parsed - * @return {Object} an object containing align and meetOrSlice attribute - */ - parsePreserveAspectRatioAttribute: function(attribute) { - var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', - aspectRatioAttrs = attribute.split(' '), align; + enlivenObjectEnlivables: function (serializedObject) { + // enlive every possible property + var promises = Object.values(serializedObject).map(function(value) { + if (!value) { + return value; + } + if (value.colorStops) { + return new fabric.Gradient(value); + } + if (value.type) { + return fabric.util.enlivenObjects([value]).then(function (enlived) { + return enlived[0]; + }); + } + if (value.source) { + return fabric.Pattern.fromObject(value); + } + return value; + }); + var keys = Object.keys(serializedObject); + return Promise.all(promises).then(function(enlived) { + return enlived.reduce(function(acc, instance, index) { + acc[keys[index]] = instance; + return acc; + }, {}); + }); + }, - if (aspectRatioAttrs && aspectRatioAttrs.length) { - meetOrSlice = aspectRatioAttrs.pop(); - if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { - align = meetOrSlice; - meetOrSlice = 'meet'; + /** + * Groups SVG elements (usually those retrieved from SVG document) + * @static + * @memberOf fabric.util + * @param {Array} elements SVG elements to group + * @return {fabric.Object|fabric.Group} + */ + groupSVGElements: function(elements) { + if (elements && elements.length === 1) { + return elements[0]; } - else if (aspectRatioAttrs.length) { - align = aspectRatioAttrs.pop(); + return new fabric.Group(elements); + }, + + /** + * Populates an object with properties of another object + * @static + * @memberOf fabric.util + * @param {Object} source Source object + * @param {Object} destination Destination object + * @return {Array} properties Properties names to include + */ + populateWithProperties: function(source, destination, properties) { + if (properties && Array.isArray(properties)) { + for (var i = 0, len = properties.length; i < len; i++) { + if (properties[i] in source) { + destination[properties[i]] = source[properties[i]]; + } + } } - } - //divide align in alignX and alignY - alignX = align !== 'none' ? align.slice(1, 4) : 'none'; - alignY = align !== 'none' ? align.slice(5, 8) : 'none'; - return { - meetOrSlice: meetOrSlice, - alignX: alignX, - alignY: alignY - }; - }, + }, - /** - * Clear char widths cache for the given font family or all the cache if no - * fontFamily is specified. - * Use it if you know you are loading fonts in a lazy way and you are not waiting - * for custom fonts to load properly when adding text objects to the canvas. - * If a text object is added when its own font is not loaded yet, you will get wrong - * measurement and so wrong bounding boxes. - * After the font cache is cleared, either change the textObject text content or call - * initDimensions() to trigger a recalculation - * @memberOf fabric.util - * @param {String} [fontFamily] font family to clear - */ - clearFabricFontCache: function(fontFamily) { - fontFamily = (fontFamily || '').toLowerCase(); - if (!fontFamily) { - fabric.charWidthsCache = { }; - } - else if (fabric.charWidthsCache[fontFamily]) { - delete fabric.charWidthsCache[fontFamily]; - } - }, + /** + * Creates canvas element + * @static + * @memberOf fabric.util + * @return {CanvasElement} initialized canvas element + */ + createCanvasElement: function() { + return fabric.document.createElement('canvas'); + }, - /** - * Given current aspect ratio, determines the max width and height that can - * respect the total allowed area for the cache. - * @memberOf fabric.util - * @param {Number} ar aspect ratio - * @param {Number} maximumArea Maximum area you want to achieve - * @return {Object.x} Limited dimensions by X - * @return {Object.y} Limited dimensions by Y - */ - limitDimsByArea: function(ar, maximumArea) { - var roughWidth = Math.sqrt(maximumArea * ar), - perfLimitSizeY = Math.floor(maximumArea / roughWidth); - return { x: Math.floor(roughWidth), y: perfLimitSizeY }; - }, + /** + * Creates a canvas element that is a copy of another and is also painted + * @param {CanvasElement} canvas to copy size and content of + * @static + * @memberOf fabric.util + * @return {CanvasElement} initialized canvas element + */ + copyCanvasElement: function(canvas) { + var newCanvas = fabric.util.createCanvasElement(); + newCanvas.width = canvas.width; + newCanvas.height = canvas.height; + newCanvas.getContext('2d').drawImage(canvas, 0, 0); + return newCanvas; + }, - capValue: function(min, value, max) { - return Math.max(min, Math.min(value, max)); - }, + /** + * since 2.6.0 moved from canvas instance to utility. + * @param {CanvasElement} canvasEl to copy size and content of + * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too + * @param {Number} quality <= 1 and > 0 + * @static + * @memberOf fabric.util + * @return {String} data url + */ + toDataURL: function(canvasEl, format, quality) { + return canvasEl.toDataURL('image/' + format, quality); + }, - /** - * Finds the scale for the object source to fit inside the object destination, - * keeping aspect ratio intact. - * respect the total allowed area for the cache. - * @memberOf fabric.util - * @param {Object | fabric.Object} source - * @param {Number} source.height natural unscaled height of the object - * @param {Number} source.width natural unscaled width of the object - * @param {Object | fabric.Object} destination - * @param {Number} destination.height natural unscaled height of the object - * @param {Number} destination.width natural unscaled width of the object - * @return {Number} scale factor to apply to source to fit into destination - */ - findScaleToFit: function(source, destination) { - return Math.min(destination.width / source.width, destination.height / source.height); - }, - - /** - * Finds the scale for the object source to cover entirely the object destination, - * keeping aspect ratio intact. - * respect the total allowed area for the cache. - * @memberOf fabric.util - * @param {Object | fabric.Object} source - * @param {Number} source.height natural unscaled height of the object - * @param {Number} source.width natural unscaled width of the object - * @param {Object | fabric.Object} destination - * @param {Number} destination.height natural unscaled height of the object - * @param {Number} destination.width natural unscaled width of the object - * @return {Number} scale factor to apply to source to cover destination - */ - findScaleToCover: function(source, destination) { - return Math.max(destination.width / source.width, destination.height / source.height); - }, + /** + * Creates image element (works on client and node) + * @static + * @memberOf fabric.util + * @return {HTMLImageElement} HTML image element + */ + createImage: function() { + return fabric.document.createElement('img'); + }, - /** - * given an array of 6 number returns something like `"matrix(...numbers)"` - * @memberOf fabric.util - * @param {Array} transform an array with 6 numbers - * @return {String} transform matrix for svg - * @return {Object.y} Limited dimensions by Y - */ - matrixToSVG: function(transform) { - return 'matrix(' + transform.map(function(value) { - return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); - }).join(' ') + ')'; - }, - - /** - * given an object and a transform, apply the inverse transform to the object, - * this is equivalent to remove from that object that transformation, so that - * added in a space with the removed transform, the object will be the same as before. - * Removing from an object a transform that scale by 2 is like scaling it by 1/2. - * Removing from an object a transfrom that rotate by 30deg is like rotating by 30deg - * in the opposite direction. - * This util is used to add objects inside transformed groups or nested groups. - * @memberOf fabric.util - * @param {fabric.Object} object the object you want to transform - * @param {Array} transform the destination transform - */ - removeTransformFromObject: function(object, transform) { - var inverted = fabric.util.invertTransform(transform), - finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); - fabric.util.applyTransformToObject(object, finalTransform); - }, + /** + * Multiply matrix A by matrix B to nest transformations + * @static + * @memberOf fabric.util + * @param {Array} a First transformMatrix + * @param {Array} b Second transformMatrix + * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices + * @return {Array} The product of the two transform matrices + */ + multiplyTransformMatrices: function(a, b, is2x2) { + // Matrix multiply a * b + return [ + a[0] * b[0] + a[2] * b[1], + a[1] * b[0] + a[3] * b[1], + a[0] * b[2] + a[2] * b[3], + a[1] * b[2] + a[3] * b[3], + is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], + is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] + ]; + }, - /** - * given an object and a transform, apply the transform to the object. - * this is equivalent to change the space where the object is drawn. - * Adding to an object a transform that scale by 2 is like scaling it by 2. - * This is used when removing an object from an active selection for example. - * @memberOf fabric.util - * @param {fabric.Object} object the object you want to transform - * @param {Array} transform the destination transform - */ - addTransformToObject: function(object, transform) { - fabric.util.applyTransformToObject( - object, - fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) - ); - }, + /** + * Decomposes standard 2x3 matrix into transform components + * @static + * @memberOf fabric.util + * @param {Array} a transformMatrix + * @return {Object} Components of transform + */ + qrDecompose: function(a) { + var angle = atan2(a[1], a[0]), + denom = pow(a[0], 2) + pow(a[1], 2), + scaleX = sqrt(denom), + scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, + skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); + return { + angle: angle / PiBy180, + scaleX: scaleX, + scaleY: scaleY, + skewX: skewX / PiBy180, + skewY: 0, + translateX: a[4], + translateY: a[5] + }; + }, - /** - * discard an object transform state and apply the one from the matrix. - * @memberOf fabric.util - * @param {fabric.Object} object the object you want to transform - * @param {Array} transform the destination transform - */ - applyTransformToObject: function(object, transform) { - var options = fabric.util.qrDecompose(transform), - center = new fabric.Point(options.translateX, options.translateY); - object.flipX = false; - object.flipY = false; - object.set('scaleX', options.scaleX); - object.set('scaleY', options.scaleY); - object.skewX = options.skewX; - object.skewY = options.skewY; - object.angle = options.angle; - object.setPositionByOrigin(center, 'center', 'center'); - }, - - /** - * given a width and height, return the size of the bounding box - * that can contains the box with width/height with applied transform - * described in options. - * Use to calculate the boxes around objects for controls. - * @memberOf fabric.util - * @param {Number} width - * @param {Number} height - * @param {Object} options - * @param {Number} options.scaleX - * @param {Number} options.scaleY - * @param {Number} options.skewX - * @param {Number} options.skewY - * @return {Object.x} width of containing - * @return {Object.y} height of containing - */ - sizeAfterTransform: function(width, height, options) { - var dimX = width / 2, dimY = height / 2, - points = [ - { - x: -dimX, - y: -dimY - }, - { - x: dimX, - y: -dimY - }, - { - x: -dimX, - y: dimY - }, - { - x: dimX, - y: dimY - }], - transformMatrix = fabric.util.calcDimensionsMatrix(options), - bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); - return { - x: bbox.width, - y: bbox.height, - }; - }, + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.angle] angle in degrees + * @return {Number[]} transform matrix + */ + calcRotateMatrix: function(options) { + if (!options.angle) { + return fabric.iMatrix.concat(); + } + var theta = fabric.util.degreesToRadians(options.angle), + cos = fabric.util.cos(theta), + sin = fabric.util.sin(theta); + return [cos, sin, -sin, cos, 0, 0]; + }, - /** - * Merges 2 clip paths into one visually equal clip path - * - * **IMPORTANT**:\ - * Does **NOT** clone the arguments, clone them proir if necessary. - * - * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap. - * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible. - * - * In order to handle the `inverted` property we follow logic described in the following cases:\ - * **(1)** both clip paths are inverted - the clip paths pass the inverted prop to the wrapper and loose it themselves.\ - * **(2)** one is inverted and the other isn't - the wrapper shouldn't become inverted and the inverted clip path must clip the non inverted one to produce an identical visual effect.\ - * **(3)** both clip paths are not inverted - wrapper and clip paths remain unchanged. - * - * @memberOf fabric.util - * @param {fabric.Object} c1 - * @param {fabric.Object} c2 - * @returns {fabric.Object} merged clip path - */ - mergeClipPaths: function (c1, c2) { - var a = c1, b = c2; - if (a.inverted && !b.inverted) { - // case (2) - a = c2; - b = c1; - } - // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane - fabric.util.applyTransformToObject( - b, - fabric.util.multiplyTransformMatrices( - fabric.util.invertTransform(a.calcTransformMatrix()), - b.calcTransformMatrix() - ) - ); - // assign the `inverted` prop to the wrapping group - var inverted = a.inverted && b.inverted; - if (inverted) { - // case (1) - a.inverted = b.inverted = false; - } - return new fabric.Group([a], { clipPath: b, inverted: inverted }); - }, - }; -})(typeof exports !== 'undefined' ? exports : this); - - -(function() { - var _join = Array.prototype.join, - commandLengths = { - m: 2, - l: 2, - h: 1, - v: 1, - c: 6, - s: 4, - q: 4, - t: 2, - a: 7 - }, - repeatedCommands = { - m: 'l', - M: 'L' - }; - function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { - var costh2 = fabric.util.cos(th2), - sinth2 = fabric.util.sin(th2), - costh3 = fabric.util.cos(th3), - sinth3 = fabric.util.sin(th3), - toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, - toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, - cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), - cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), - cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), - cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); - - return ['C', - cp1X, cp1Y, - cp2X, cp2Y, - toX, toY - ]; - } + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet. + * is called DimensionsTransformMatrix because those properties are the one that influence + * the size of the resulting box of the object. + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.scaleX] + * @param {Number} [options.scaleY] + * @param {Boolean} [options.flipX] + * @param {Boolean} [options.flipY] + * @param {Number} [options.skewX] + * @param {Number} [options.skewY] + * @return {Number[]} transform matrix + */ + calcDimensionsMatrix: function(options) { + var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, + scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, + scaleMatrix = [ + options.flipX ? -scaleX : scaleX, + 0, + 0, + options.flipY ? -scaleY : scaleY, + 0, + 0], + multiply = fabric.util.multiplyTransformMatrices, + degreesToRadians = fabric.util.degreesToRadians; + if (options.skewX) { + scaleMatrix = multiply( + scaleMatrix, + [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], + true); + } + if (options.skewY) { + scaleMatrix = multiply( + scaleMatrix, + [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], + true); + } + return scaleMatrix; + }, - /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp - * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here - * http://mozilla.org/MPL/2.0/ - */ - function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { - var PI = Math.PI, th = rotateX * PI / 180, - sinTh = fabric.util.sin(th), - cosTh = fabric.util.cos(th), - fromX = 0, fromY = 0; - - rx = Math.abs(rx); - ry = Math.abs(ry); - - var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, - py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, - rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, - pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, - root = 0; - - if (pl < 0) { - var s = Math.sqrt(1 - pl / (rx2 * ry2)); - rx *= s; - ry *= s; - } - else { - root = (large === sweep ? -1.0 : 1.0) * - Math.sqrt( pl / (rx2 * py2 + ry2 * px2)); - } + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.angle] + * @param {Number} [options.scaleX] + * @param {Number} [options.scaleY] + * @param {Boolean} [options.flipX] + * @param {Boolean} [options.flipY] + * @param {Number} [options.skewX] + * @param {Number} [options.skewX] + * @param {Number} [options.translateX] + * @param {Number} [options.translateY] + * @return {Number[]} transform matrix + */ + composeMatrix: function(options) { + var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], + multiply = fabric.util.multiplyTransformMatrices; + if (options.angle) { + matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); + } + if (options.scaleX !== 1 || options.scaleY !== 1 || + options.skewX || options.skewY || options.flipX || options.flipY) { + matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); + } + return matrix; + }, + + /** + * reset an object transform state to neutral. Top and left are not accounted for + * @static + * @memberOf fabric.util + * @param {fabric.Object} target object to transform + */ + resetObjectTransform: function (target) { + target.scaleX = 1; + target.scaleY = 1; + target.skewX = 0; + target.skewY = 0; + target.flipX = false; + target.flipY = false; + target.rotate(0); + }, - var cx = root * rx * py / ry, - cy = -root * ry * px / rx, - cx1 = cosTh * cx - sinTh * cy + toX * 0.5, - cy1 = sinTh * cx + cosTh * cy + toY * 0.5, - mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), - dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); + /** + * Extract Object transform values + * @static + * @memberOf fabric.util + * @param {fabric.Object} target object to read from + * @return {Object} Components of transform + */ + saveObjectTransform: function (target) { + return { + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + angle: target.angle, + left: target.left, + flipX: target.flipX, + flipY: target.flipY, + top: target.top + }; + }, - if (sweep === 0 && dtheta > 0) { - dtheta -= 2 * PI; - } - else if (sweep === 1 && dtheta < 0) { - dtheta += 2 * PI; - } + /** + * Returns true if context has transparent pixel + * at specified location (taking tolerance into account) + * @param {CanvasRenderingContext2D} ctx context + * @param {Number} x x coordinate + * @param {Number} y y coordinate + * @param {Number} tolerance Tolerance + */ + isTransparent: function(ctx, x, y, tolerance) { - // Convert into cubic bezier segments <= 90deg - var segments = Math.ceil(Math.abs(dtheta / PI * 2)), - result = [], mDelta = dtheta / segments, - mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), - th3 = mTheta + mDelta; - - for (var i = 0; i < segments; i++) { - result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); - fromX = result[i][5]; - fromY = result[i][6]; - mTheta = th3; - th3 += mDelta; - } - return result; - } + // If tolerance is > 0 adjust start coords to take into account. + // If moves off Canvas fix to 0 + if (tolerance > 0) { + if (x > tolerance) { + x -= tolerance; + } + else { + x = 0; + } + if (y > tolerance) { + y -= tolerance; + } + else { + y = 0; + } + } - /* - * Private - */ - function calcVectorAngle(ux, uy, vx, vy) { - var ta = Math.atan2(uy, ux), - tb = Math.atan2(vy, vx); - if (tb >= ta) { - return tb - ta; - } - else { - return 2 * Math.PI - (ta - tb); - } - } + var _isTransparent = true, i, temp, + imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), + l = imageData.data.length; - /** - * Calculate bounding box of a beziercurve - * @param {Number} x0 starting point - * @param {Number} y0 - * @param {Number} x1 first control point - * @param {Number} y1 - * @param {Number} x2 secondo control point - * @param {Number} y2 - * @param {Number} x3 end of bezier - * @param {Number} y3 - */ - // taken from http://jsbin.com/ivomiq/56/edit no credits available for that. - // TODO: can we normalize this with the starting points set at 0 and then translated the bbox? - function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { - var argsString; - if (fabric.cachesBoundsOfCurve) { - argsString = _join.call(arguments); - if (fabric.boundsOfCurveCache[argsString]) { - return fabric.boundsOfCurveCache[argsString]; - } - } + // Split image data - for tolerance > 1, pixelDataSize = 4; + for (i = 3; i < l; i += 4) { + temp = imageData.data[i]; + _isTransparent = temp <= 0; + if (_isTransparent === false) { + break; // Stop if colour found + } + } - var sqrt = Math.sqrt, - min = Math.min, max = Math.max, - abs = Math.abs, tvalues = [], - bounds = [[], []], - a, b, c, t, t1, t2, b2ac, sqrtb2ac; + imageData = null; - b = 6 * x0 - 12 * x1 + 6 * x2; - a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; - c = 3 * x1 - 3 * x0; + return _isTransparent; + }, - for (var i = 0; i < 2; ++i) { - if (i > 0) { - b = 6 * y0 - 12 * y1 + 6 * y2; - a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; - c = 3 * y1 - 3 * y0; - } + /** + * Parse preserveAspectRatio attribute from element + * @param {string} attribute to be parsed + * @return {Object} an object containing align and meetOrSlice attribute + */ + parsePreserveAspectRatioAttribute: function(attribute) { + var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', + aspectRatioAttrs = attribute.split(' '), align; + + if (aspectRatioAttrs && aspectRatioAttrs.length) { + meetOrSlice = aspectRatioAttrs.pop(); + if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { + align = meetOrSlice; + meetOrSlice = 'meet'; + } + else if (aspectRatioAttrs.length) { + align = aspectRatioAttrs.pop(); + } + } + //divide align in alignX and alignY + alignX = align !== 'none' ? align.slice(1, 4) : 'none'; + alignY = align !== 'none' ? align.slice(5, 8) : 'none'; + return { + meetOrSlice: meetOrSlice, + alignX: alignX, + alignY: alignY + }; + }, - if (abs(a) < 1e-12) { - if (abs(b) < 1e-12) { - continue; + /** + * Clear char widths cache for the given font family or all the cache if no + * fontFamily is specified. + * Use it if you know you are loading fonts in a lazy way and you are not waiting + * for custom fonts to load properly when adding text objects to the canvas. + * If a text object is added when its own font is not loaded yet, you will get wrong + * measurement and so wrong bounding boxes. + * After the font cache is cleared, either change the textObject text content or call + * initDimensions() to trigger a recalculation + * @memberOf fabric.util + * @param {String} [fontFamily] font family to clear + */ + clearFabricFontCache: function(fontFamily) { + fontFamily = (fontFamily || '').toLowerCase(); + if (!fontFamily) { + fabric.charWidthsCache = { }; } - t = -c / b; - if (0 < t && t < 1) { - tvalues.push(t); + else if (fabric.charWidthsCache[fontFamily]) { + delete fabric.charWidthsCache[fontFamily]; } - continue; - } - b2ac = b * b - 4 * c * a; - if (b2ac < 0) { - continue; - } - sqrtb2ac = sqrt(b2ac); - t1 = (-b + sqrtb2ac) / (2 * a); - if (0 < t1 && t1 < 1) { - tvalues.push(t1); - } - t2 = (-b - sqrtb2ac) / (2 * a); - if (0 < t2 && t2 < 1) { - tvalues.push(t2); - } - } + }, - var x, y, j = tvalues.length, jlen = j, mt; - while (j--) { - t = tvalues[j]; - mt = 1 - t; - x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); - bounds[0][j] = x; + /** + * Given current aspect ratio, determines the max width and height that can + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Number} ar aspect ratio + * @param {Number} maximumArea Maximum area you want to achieve + * @return {Object.x} Limited dimensions by X + * @return {Object.y} Limited dimensions by Y + */ + limitDimsByArea: function(ar, maximumArea) { + var roughWidth = Math.sqrt(maximumArea * ar), + perfLimitSizeY = Math.floor(maximumArea / roughWidth); + return { x: Math.floor(roughWidth), y: perfLimitSizeY }; + }, - y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); - bounds[1][j] = y; - } + capValue: function(min, value, max) { + return Math.max(min, Math.min(value, max)); + }, - bounds[0][jlen] = x0; - bounds[1][jlen] = y0; - bounds[0][jlen + 1] = x3; - bounds[1][jlen + 1] = y3; - var result = [ - { - x: min.apply(null, bounds[0]), - y: min.apply(null, bounds[1]) + /** + * Finds the scale for the object source to fit inside the object destination, + * keeping aspect ratio intact. + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Object | fabric.Object} source + * @param {Number} source.height natural unscaled height of the object + * @param {Number} source.width natural unscaled width of the object + * @param {Object | fabric.Object} destination + * @param {Number} destination.height natural unscaled height of the object + * @param {Number} destination.width natural unscaled width of the object + * @return {Number} scale factor to apply to source to fit into destination + */ + findScaleToFit: function(source, destination) { + return Math.min(destination.width / source.width, destination.height / source.height); }, - { - x: max.apply(null, bounds[0]), - y: max.apply(null, bounds[1]) - } - ]; - if (fabric.cachesBoundsOfCurve) { - fabric.boundsOfCurveCache[argsString] = result; - } - return result; - } - - /** - * Converts arc to a bunch of bezier curves - * @param {Number} fx starting point x - * @param {Number} fy starting point y - * @param {Array} coords Arc command - */ - function fromArcToBeziers(fx, fy, coords) { - var rx = coords[1], - ry = coords[2], - rot = coords[3], - large = coords[4], - sweep = coords[5], - tx = coords[6], - ty = coords[7], - segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); - - for (var i = 0, len = segsNorm.length; i < len; i++) { - segsNorm[i][1] += fx; - segsNorm[i][2] += fy; - segsNorm[i][3] += fx; - segsNorm[i][4] += fy; - segsNorm[i][5] += fx; - segsNorm[i][6] += fy; - } - return segsNorm; - }; - - /** - * This function take a parsed SVG path and make it simpler for fabricJS logic. - * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute ) - * S converted in C, T converted in Q, A converted in C. - * @param {Array} path the array of commands of a parsed svg path for fabric.Path - * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path - */ - function makePathSimpler(path) { - // x and y represent the last point of the path. the previous command point. - // we add them to each relative command to make it an absolute comment. - // we also swap the v V h H with L, because are easier to transform. - var x = 0, y = 0, len = path.length, - // x1 and y1 represent the last point of the subpath. the subpath is started with - // m or M command. When a z or Z command is drawn, x and y need to be resetted to - // the last x1 and y1. - x1 = 0, y1 = 0, current, i, converted, - // previous will host the letter of the previous command, to handle S and T. - // controlX and controlY will host the previous reflected control point - destinationPath = [], previous, controlX, controlY; - for (i = 0; i < len; ++i) { - converted = false; - current = path[i].slice(0); - switch (current[0]) { // first letter - case 'l': // lineto, relative - current[0] = 'L'; - current[1] += x; - current[2] += y; - // falls through - case 'L': - x = current[1]; - y = current[2]; - break; - case 'h': // horizontal lineto, relative - current[1] += x; - // falls through - case 'H': - current[0] = 'L'; - current[2] = y; - x = current[1]; - break; - case 'v': // vertical lineto, relative - current[1] += y; - // falls through - case 'V': - current[0] = 'L'; - y = current[1]; - current[1] = x; - current[2] = y; - break; - case 'm': // moveTo, relative - current[0] = 'M'; - current[1] += x; - current[2] += y; - // falls through - case 'M': - x = current[1]; - y = current[2]; - x1 = current[1]; - y1 = current[2]; - break; - case 'c': // bezierCurveTo, relative - current[0] = 'C'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - current[5] += x; - current[6] += y; - // falls through - case 'C': - controlX = current[3]; - controlY = current[4]; - x = current[5]; - y = current[6]; - break; - case 's': // shorthand cubic bezierCurveTo, relative - current[0] = 'S'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'S': - // would be sScC but since we are swapping sSc for C, we check just that. - if (previous === 'C') { - // calculate reflection of previous control points - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a C, c, S, or s, - // the control point is coincident with the current point - controlX = x; - controlY = y; - } - x = current[3]; - y = current[4]; - current[0] = 'C'; - current[5] = current[3]; - current[6] = current[4]; - current[3] = current[1]; - current[4] = current[2]; - current[1] = controlX; - current[2] = controlY; - // current[3] and current[4] are NOW the second control point. - // we keep it for the next reflection. - controlX = current[3]; - controlY = current[4]; - break; - case 'q': // quadraticCurveTo, relative - current[0] = 'Q'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'Q': - controlX = current[1]; - controlY = current[2]; - x = current[3]; - y = current[4]; - break; - case 't': // shorthand quadraticCurveTo, relative - current[0] = 'T'; - current[1] += x; - current[2] += y; - // falls through - case 'T': - if (previous === 'Q') { - // calculate reflection of previous control point - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a Q, q, T or t, - // assume the control point is coincident with the current point - controlX = x; - controlY = y; - } - current[0] = 'Q'; - x = current[1]; - y = current[2]; - current[1] = controlX; - current[2] = controlY; - current[3] = x; - current[4] = y; - break; - case 'a': - current[0] = 'A'; - current[6] += x; - current[7] += y; - // falls through - case 'A': - converted = true; - destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); - x = current[6]; - y = current[7]; - break; - case 'z': - case 'Z': - x = x1; - y = y1; - break; - default: - } - if (!converted) { - destinationPath.push(current); - } - previous = current[0]; - } - return destinationPath; - }; - /** - * Calc length from point x1,y1 to x2,y2 - * @param {Number} x1 starting point x - * @param {Number} y1 starting point y - * @param {Number} x2 starting point x - * @param {Number} y2 starting point y - * @return {Number} length of segment - */ - function calcLineLength(x1, y1, x2, y2) { - return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); - } + /** + * Finds the scale for the object source to cover entirely the object destination, + * keeping aspect ratio intact. + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Object | fabric.Object} source + * @param {Number} source.height natural unscaled height of the object + * @param {Number} source.width natural unscaled width of the object + * @param {Object | fabric.Object} destination + * @param {Number} destination.height natural unscaled height of the object + * @param {Number} destination.width natural unscaled width of the object + * @return {Number} scale factor to apply to source to cover destination + */ + findScaleToCover: function(source, destination) { + return Math.max(destination.width / source.width, destination.height / source.height); + }, - // functions for the Cubic beizer - // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 - function CB1(t) { - return t * t * t; - } - function CB2(t) { - return 3 * t * t * (1 - t); - } - function CB3(t) { - return 3 * t * (1 - t) * (1 - t); - } - function CB4(t) { - return (1 - t) * (1 - t) * (1 - t); - } + /** + * given an array of 6 number returns something like `"matrix(...numbers)"` + * @memberOf fabric.util + * @param {Array} transform an array with 6 numbers + * @return {String} transform matrix for svg + * @return {Object.y} Limited dimensions by Y + */ + matrixToSVG: function(transform) { + return 'matrix(' + transform.map(function(value) { + return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); + }).join(' ') + ')'; + }, - function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function(pct) { - var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); - return { - x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, - y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 - }; - }; - } + /** + * given an object and a transform, apply the inverse transform to the object, + * this is equivalent to remove from that object that transformation, so that + * added in a space with the removed transform, the object will be the same as before. + * Removing from an object a transform that scale by 2 is like scaling it by 1/2. + * Removing from an object a transform that rotate by 30deg is like rotating by 30deg + * in the opposite direction. + * This util is used to add objects inside transformed groups or nested groups. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + removeTransformFromObject: function(object, transform) { + var inverted = fabric.util.invertTransform(transform), + finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); + fabric.util.applyTransformToObject(object, finalTransform); + }, - function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + - (3 * pct * pct * (p4x - p3x)), - tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + - (3 * pct * pct * (p4y - p3y)); - return Math.atan2(tangentY, tangentX); - }; - } + /** + * given an object and a transform, apply the transform to the object. + * this is equivalent to change the space where the object is drawn. + * Adding to an object a transform that scale by 2 is like scaling it by 2. + * This is used when removing an object from an active selection for example. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + addTransformToObject: function(object, transform) { + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) + ); + }, - function QB1(t) { - return t * t; - } + /** + * discard an object transform state and apply the one from the matrix. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + applyTransformToObject: function(object, transform) { + var options = fabric.util.qrDecompose(transform), + center = new fabric.Point(options.translateX, options.translateY); + object.flipX = false; + object.flipY = false; + object.set('scaleX', options.scaleX); + object.set('scaleY', options.scaleY); + object.skewX = options.skewX; + object.skewY = options.skewY; + object.angle = options.angle; + object.setPositionByOrigin(center, 'center', 'center'); + }, - function QB2(t) { - return 2 * t * (1 - t); - } + /** + * + * A util that abstracts applying transform to objects.\ + * Sends `object` to the destination coordinate plane by applying the relevant transformations.\ + * Changes the space/plane where `object` is drawn.\ + * From the canvas/viewer's perspective `object` remains unchanged. + * + * @example Move clip path from one object to another while preserving it's appearance as viewed by canvas/viewer + * let obj, obj2; + * let clipPath = new fabric.Circle({ radius: 50 }); + * obj.clipPath = clipPath; + * // render + * fabric.util.sendObjectToPlane(clipPath, obj.calcTransformMatrix(), obj2.calcTransformMatrix()); + * obj.clipPath = undefined; + * obj2.clipPath = clipPath; + * // render, clipPath now clips obj2 but seems unchanged from the eyes of the viewer + * + * @example Clip an object's clip path with an existing object + * let obj, existingObj; + * let clipPath = new fabric.Circle({ radius: 50 }); + * obj.clipPath = clipPath; + * let transformTo = fabric.util.multiplyTransformMatrices(obj.calcTransformMatrix(), clipPath.calcTransformMatrix()); + * fabric.util.sendObjectToPlane(existingObj, existingObj.group?.calcTransformMatrix(), transformTo); + * clipPath.clipPath = existingObj; + * + * @static + * @memberof fabric.util + * @param {fabric.Object} object + * @param {Matrix} [from] plane matrix containing object. Passing `null` is equivalent to passing the identity matrix, which means `object` is a direct child of canvas. + * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `object` should be sent to the canvas coordinate plane. + * @returns {Matrix} the transform matrix that was applied to `object` + */ + sendObjectToPlane: function (object, from, to) { + // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) + // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) + var inv = fabric.util.invertTransform(to || fabric.iMatrix); + var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(t, object.calcOwnMatrix()) + ); + return t; + }, - function QB3(t) { - return (1 - t) * (1 - t); - } + /** + * given a width and height, return the size of the bounding box + * that can contains the box with width/height with applied transform + * described in options. + * Use to calculate the boxes around objects for controls. + * @memberOf fabric.util + * @param {Number} width + * @param {Number} height + * @param {Object} options + * @param {Number} options.scaleX + * @param {Number} options.scaleY + * @param {Number} options.skewX + * @param {Number} options.skewY + * @returns {fabric.Point} size + */ + sizeAfterTransform: function(width, height, options) { + var dimX = width / 2, dimY = height / 2, + points = [ + { + x: -dimX, + y: -dimY + }, + { + x: dimX, + y: -dimY + }, + { + x: -dimX, + y: dimY + }, + { + x: dimX, + y: dimY + }], + transformMatrix = fabric.util.calcDimensionsMatrix(options), + bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); + return new fabric.Point(bbox.width, bbox.height); + }, - function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function(pct) { - var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); - return { - x: p3x * c1 + p2x * c2 + p1x * c3, - y: p3y * c1 + p2y * c2 + p1y * c3 - }; + /** + * Merges 2 clip paths into one visually equal clip path + * + * **IMPORTANT**:\ + * Does **NOT** clone the arguments, clone them proir if necessary. + * + * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap. + * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible. + * + * In order to handle the `inverted` property we follow logic described in the following cases:\ + * **(1)** both clip paths are inverted - the clip paths pass the inverted prop to the wrapper and loose it themselves.\ + * **(2)** one is inverted and the other isn't - the wrapper shouldn't become inverted and the inverted clip path must clip the non inverted one to produce an identical visual effect.\ + * **(3)** both clip paths are not inverted - wrapper and clip paths remain unchanged. + * + * @memberOf fabric.util + * @param {fabric.Object} c1 + * @param {fabric.Object} c2 + * @returns {fabric.Object} merged clip path + */ + mergeClipPaths: function (c1, c2) { + var a = c1, b = c2; + if (a.inverted && !b.inverted) { + // case (2) + a = c2; + b = c1; + } + // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane + fabric.util.applyTransformToObject( + b, + fabric.util.multiplyTransformMatrices( + fabric.util.invertTransform(a.calcTransformMatrix()), + b.calcTransformMatrix() + ) + ); + // assign the `inverted` prop to the wrapping group + var inverted = a.inverted && b.inverted; + if (inverted) { + // case (1) + a.inverted = b.inverted = false; + } + return new fabric.Group([a], { clipPath: b, inverted: inverted }); + }, }; - } + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + var fabric = global.fabric, + _join = Array.prototype.join, + commandLengths = { + m: 2, + l: 2, + h: 1, + v: 1, + c: 6, + s: 4, + q: 4, + t: 2, + a: 7 + }, + repeatedCommands = { + m: 'l', + M: 'L' + }; + function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { + var costh2 = fabric.util.cos(th2), + sinth2 = fabric.util.sin(th2), + costh3 = fabric.util.cos(th3), + sinth3 = fabric.util.sin(th3), + toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, + toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, + cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), + cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), + cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), + cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); + + return ['C', + cp1X, cp1Y, + cp2X, cp2Y, + toX, toY + ]; + } - function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), - tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); - return Math.atan2(tangentY, tangentX); - }; - } + /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp + * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here + * http://mozilla.org/MPL/2.0/ + */ + function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { + var PI = Math.PI, th = rotateX * PI / 180, + sinTh = fabric.util.sin(th), + cosTh = fabric.util.cos(th), + fromX = 0, fromY = 0; + rx = Math.abs(rx); + ry = Math.abs(ry); - // this will run over a path segment ( a cubic or quadratic segment) and approximate it - // with 100 segemnts. This will good enough to calculate the length of the curve - function pathIterator(iterator, x1, y1) { - var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; - for (perc = 1; perc <= 100; perc += 1) { - p = iterator(perc / 100); - tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); - tempP = p; - } - return tmpLen; - } + var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, + py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, + rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, + pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, + root = 0; - /** - * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1 - * that correspond to that pixels run over the path. - * The percentage will be then used to find the correct point on the canvas for the path. - * @param {Array} segInfo fabricJS collection of information on a parsed path - * @param {Number} distance from starting point, in pixels. - * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point; - */ - function findPercentageForDistance(segInfo, distance) { - var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, - p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; - // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 - // the path - while (tmpLen < distance && nextStep > 0.0001) { - p = iterator(perc); - lastPerc = perc; - nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); - // compare tmpLen each cycle with distance, decide next perc to test. - if ((nextLen + tmpLen) > distance) { - // we discard this step and we make smaller steps. - perc -= nextStep; - nextStep /= 2; + if (pl < 0) { + var s = Math.sqrt(1 - pl / (rx2 * ry2)); + rx *= s; + ry *= s; } else { - tempP = p; - perc += nextStep; - tmpLen += nextLen; + root = (large === sweep ? -1.0 : 1.0) * + Math.sqrt( pl / (rx2 * py2 + ry2 * px2)); } - } - p.angle = angleFinder(lastPerc); - return p; - } - /** - * Run over a parsed and simplifed path and extrac some informations. - * informations are length of each command and starting point - * @param {Array} path fabricJS parsed path commands - * @return {Array} path commands informations - */ - function getPathSegmentsInfo(path) { - var totalLength = 0, len = path.length, current, - //x2 and y2 are the coords of segment start - //x1 and y1 are the coords of the current point - x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; - for (var i = 0; i < len; i++) { - current = path[i]; - tempInfo = { - x: x1, - y: y1, - command: current[0], - }; - switch (current[0]) { //first letter - case 'M': - tempInfo.length = 0; - x2 = x1 = current[1]; - y2 = y1 = current[2]; - break; - case 'L': - tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); - x1 = current[1]; - y1 = current[2]; - break; - case 'C': - iterator = getPointOnCubicBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - angleFinder = getTangentCubicIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[5]; - y1 = current[6]; - break; - case 'Q': - iterator = getPointOnQuadraticBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - angleFinder = getTangentQuadraticIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[3]; - y1 = current[4]; - break; - case 'Z': - case 'z': - // we add those in order to ease calculations later - tempInfo.destX = x2; - tempInfo.destY = y2; - tempInfo.length = calcLineLength(x1, y1, x2, y2); - x1 = x2; - y1 = y2; - break; + var cx = root * rx * py / ry, + cy = -root * ry * px / rx, + cx1 = cosTh * cx - sinTh * cy + toX * 0.5, + cy1 = sinTh * cx + cosTh * cy + toY * 0.5, + mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), + dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); + + if (sweep === 0 && dtheta > 0) { + dtheta -= 2 * PI; + } + else if (sweep === 1 && dtheta < 0) { + dtheta += 2 * PI; } - totalLength += tempInfo.length; - info.push(tempInfo); - } - info.push({ length: totalLength, x: x1, y: y1 }); - return info; - } - function getPointOnPath(path, distance, infos) { - if (!infos) { - infos = getPathSegmentsInfo(path); - } - var i = 0; - while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { - distance -= infos[i].length; - i++; - } - // var distance = infos[infos.length - 1] * perc; - var segInfo = infos[i], segPercent = distance / segInfo.length, - command = segInfo.command, segment = path[i], info; - - switch (command) { - case 'M': - return { x: segInfo.x, y: segInfo.y, angle: 0 }; - case 'Z': - case 'z': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segInfo.destX, segInfo.destY), - segPercent - ); - info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); - return info; - case 'L': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segment[1], segment[2]), - segPercent - ); - info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); - return info; - case 'C': - return findPercentageForDistance(segInfo, distance); - case 'Q': - return findPercentageForDistance(segInfo, distance); - } - } + // Convert into cubic bezier segments <= 90deg + var segments = Math.ceil(Math.abs(dtheta / PI * 2)), + result = [], mDelta = dtheta / segments, + mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), + th3 = mTheta + mDelta; - /** - * - * @param {string} pathString - * @return {(string|number)[][]} An array of SVG path commands - * @example Usage - * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [ - * ['M', 3, 4], - * ['Q', 3, 5, 2, 1, 4, 0], - * ['Q', 9, 12, 2, 1, 4, 0], - * ]; - * - */ - function parsePath(pathString) { - var result = [], - coords = [], - currentPath, - parsed, - re = fabric.rePathCommand, - rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', - rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, - rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', - rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + - rNumberCommaWsp + '?(' + rNumber + ')', - regArcArgumentSequence = new RegExp(rArcSeq, 'g'), - match, - coordsStr, - // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) - path; - if (!pathString || !pathString.match) { + for (var i = 0; i < segments; i++) { + result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); + fromX = result[i][5]; + fromY = result[i][6]; + mTheta = th3; + th3 += mDelta; + } return result; } - path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); - for (var i = 0, coordsParsed, len = path.length; i < len; i++) { - currentPath = path[i]; + /* + * Private + */ + function calcVectorAngle(ux, uy, vx, vy) { + var ta = Math.atan2(uy, ux), + tb = Math.atan2(vy, vx); + if (tb >= ta) { + return tb - ta; + } + else { + return 2 * Math.PI - (ta - tb); + } + } + + /** + * Calculate bounding box of a beziercurve + * @param {Number} x0 starting point + * @param {Number} y0 + * @param {Number} x1 first control point + * @param {Number} y1 + * @param {Number} x2 secondo control point + * @param {Number} y2 + * @param {Number} x3 end of bezier + * @param {Number} y3 + */ + // taken from http://jsbin.com/ivomiq/56/edit no credits available for that. + // TODO: can we normalize this with the starting points set at 0 and then translated the bbox? + function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { + var argsString; + if (fabric.cachesBoundsOfCurve) { + argsString = _join.call(arguments); + if (fabric.boundsOfCurveCache[argsString]) { + return fabric.boundsOfCurveCache[argsString]; + } + } - coordsStr = currentPath.slice(1).trim(); - coords.length = 0; + var sqrt = Math.sqrt, + min = Math.min, max = Math.max, + abs = Math.abs, tvalues = [], + bounds = [[], []], + a, b, c, t, t1, t2, b2ac, sqrtb2ac; - var command = currentPath.charAt(0); - coordsParsed = [command]; + b = 6 * x0 - 12 * x1 + 6 * x2; + a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; + c = 3 * x1 - 3 * x0; - if (command.toLowerCase() === 'a') { - // arcs have special flags that apparently don't require spaces so handle special - for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { - for (var j = 1; j < args.length; j++) { - coords.push(args[j]); + for (var i = 0; i < 2; ++i) { + if (i > 0) { + b = 6 * y0 - 12 * y1 + 6 * y2; + a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; + c = 3 * y1 - 3 * y0; + } + + if (abs(a) < 1e-12) { + if (abs(b) < 1e-12) { + continue; } + t = -c / b; + if (0 < t && t < 1) { + tvalues.push(t); + } + continue; } - } - else { - while ((match = re.exec(coordsStr))) { - coords.push(match[0]); + b2ac = b * b - 4 * c * a; + if (b2ac < 0) { + continue; + } + sqrtb2ac = sqrt(b2ac); + t1 = (-b + sqrtb2ac) / (2 * a); + if (0 < t1 && t1 < 1) { + tvalues.push(t1); + } + t2 = (-b - sqrtb2ac) / (2 * a); + if (0 < t2 && t2 < 1) { + tvalues.push(t2); } } - for (var j = 0, jlen = coords.length; j < jlen; j++) { - parsed = parseFloat(coords[j]); - if (!isNaN(parsed)) { - coordsParsed.push(parsed); + var x, y, j = tvalues.length, jlen = j, mt; + while (j--) { + t = tvalues[j]; + mt = 1 - t; + x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); + bounds[0][j] = x; + + y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); + bounds[1][j] = y; + } + + bounds[0][jlen] = x0; + bounds[1][jlen] = y0; + bounds[0][jlen + 1] = x3; + bounds[1][jlen + 1] = y3; + var result = [ + { + x: min.apply(null, bounds[0]), + y: min.apply(null, bounds[1]) + }, + { + x: max.apply(null, bounds[0]), + y: max.apply(null, bounds[1]) } + ]; + if (fabric.cachesBoundsOfCurve) { + fabric.boundsOfCurveCache[argsString] = result; } + return result; + } - var commandLength = commandLengths[command.toLowerCase()], - repeatedCommand = repeatedCommands[command] || command; - - if (coordsParsed.length - 1 > commandLength) { - for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { - result.push([command].concat(coordsParsed.slice(k, k + commandLength))); - command = repeatedCommand; + /** + * Converts arc to a bunch of bezier curves + * @param {Number} fx starting point x + * @param {Number} fy starting point y + * @param {Array} coords Arc command + */ + function fromArcToBeziers(fx, fy, coords) { + var rx = coords[1], + ry = coords[2], + rot = coords[3], + large = coords[4], + sweep = coords[5], + tx = coords[6], + ty = coords[7], + segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); + + for (var i = 0, len = segsNorm.length; i < len; i++) { + segsNorm[i][1] += fx; + segsNorm[i][2] += fy; + segsNorm[i][3] += fx; + segsNorm[i][4] += fy; + segsNorm[i][5] += fx; + segsNorm[i][6] += fy; + } + return segsNorm; + } + /** + * This function take a parsed SVG path and make it simpler for fabricJS logic. + * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute ) + * S converted in C, T converted in Q, A converted in C. + * @param {Array} path the array of commands of a parsed svg path for fabric.Path + * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path + */ + function makePathSimpler(path) { + // x and y represent the last point of the path. the previous command point. + // we add them to each relative command to make it an absolute comment. + // we also swap the v V h H with L, because are easier to transform. + var x = 0, y = 0, len = path.length, + // x1 and y1 represent the last point of the subpath. the subpath is started with + // m or M command. When a z or Z command is drawn, x and y need to be resetted to + // the last x1 and y1. + x1 = 0, y1 = 0, current, i, converted, + // previous will host the letter of the previous command, to handle S and T. + // controlX and controlY will host the previous reflected control point + destinationPath = [], previous, controlX, controlY; + for (i = 0; i < len; ++i) { + converted = false; + current = path[i].slice(0); + switch (current[0]) { // first letter + case 'l': // lineto, relative + current[0] = 'L'; + current[1] += x; + current[2] += y; + // falls through + case 'L': + x = current[1]; + y = current[2]; + break; + case 'h': // horizontal lineto, relative + current[1] += x; + // falls through + case 'H': + current[0] = 'L'; + current[2] = y; + x = current[1]; + break; + case 'v': // vertical lineto, relative + current[1] += y; + // falls through + case 'V': + current[0] = 'L'; + y = current[1]; + current[1] = x; + current[2] = y; + break; + case 'm': // moveTo, relative + current[0] = 'M'; + current[1] += x; + current[2] += y; + // falls through + case 'M': + x = current[1]; + y = current[2]; + x1 = current[1]; + y1 = current[2]; + break; + case 'c': // bezierCurveTo, relative + current[0] = 'C'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + current[5] += x; + current[6] += y; + // falls through + case 'C': + controlX = current[3]; + controlY = current[4]; + x = current[5]; + y = current[6]; + break; + case 's': // shorthand cubic bezierCurveTo, relative + current[0] = 'S'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'S': + // would be sScC but since we are swapping sSc for C, we check just that. + if (previous === 'C') { + // calculate reflection of previous control points + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a C, c, S, or s, + // the control point is coincident with the current point + controlX = x; + controlY = y; + } + x = current[3]; + y = current[4]; + current[0] = 'C'; + current[5] = current[3]; + current[6] = current[4]; + current[3] = current[1]; + current[4] = current[2]; + current[1] = controlX; + current[2] = controlY; + // current[3] and current[4] are NOW the second control point. + // we keep it for the next reflection. + controlX = current[3]; + controlY = current[4]; + break; + case 'q': // quadraticCurveTo, relative + current[0] = 'Q'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'Q': + controlX = current[1]; + controlY = current[2]; + x = current[3]; + y = current[4]; + break; + case 't': // shorthand quadraticCurveTo, relative + current[0] = 'T'; + current[1] += x; + current[2] += y; + // falls through + case 'T': + if (previous === 'Q') { + // calculate reflection of previous control point + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a Q, q, T or t, + // assume the control point is coincident with the current point + controlX = x; + controlY = y; + } + current[0] = 'Q'; + x = current[1]; + y = current[2]; + current[1] = controlX; + current[2] = controlY; + current[3] = x; + current[4] = y; + break; + case 'a': + current[0] = 'A'; + current[6] += x; + current[7] += y; + // falls through + case 'A': + converted = true; + destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); + x = current[6]; + y = current[7]; + break; + case 'z': + case 'Z': + x = x1; + y = y1; + break; } + if (!converted) { + destinationPath.push(current); + } + previous = current[0]; } - else { - result.push(coordsParsed); - } + return destinationPath; + } + /** + * Calc length from point x1,y1 to x2,y2 + * @param {Number} x1 starting point x + * @param {Number} y1 starting point y + * @param {Number} x2 starting point x + * @param {Number} y2 starting point y + * @return {Number} length of segment + */ + function calcLineLength(x1, y1, x2, y2) { + return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); } - return result; - }; - - /** - * - * Converts points to a smooth SVG path - * @param {{ x: number,y: number }[]} points Array of points - * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value. - * @return {(string|number)[][]} An array of SVG path commands - */ - function getSmoothPathFromPoints(points, correction) { - var path = [], i, - p1 = new fabric.Point(points[0].x, points[0].y), - p2 = new fabric.Point(points[1].x, points[1].y), - len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; - correction = correction || 0; - - if (manyPoints) { - multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; - multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; + // functions for the Cubic beizer + // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 + function CB1(t) { + return t * t * t; } - path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); - for (i = 1; i < len; i++) { - if (!p1.eq(p2)) { - var midPoint = p1.midPointFrom(p2); - // p1 is our bezier control point - // midpoint is our endpoint - // start point is p(i-1) value. - path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); - } - p1 = points[i]; - if ((i + 1) < points.length) { - p2 = points[i + 1]; - } + function CB2(t) { + return 3 * t * t * (1 - t); } - if (manyPoints) { - multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; - multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; + function CB3(t) { + return 3 * t * (1 - t) * (1 - t); } - path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); - return path; - } - /** - * Transform a path by transforming each segment. - * it has to be a simplified path or it won't work. - * WARNING: this depends from pathOffset for correct operation - * @param {Array} path fabricJS parsed and simplified path commands - * @param {Array} transform matrix that represent the transformation - * @param {Object} [pathOffset] the fabric.Path pathOffset - * @param {Number} pathOffset.x - * @param {Number} pathOffset.y - * @returns {Array} the transformed path - */ - function transformPath(path, transform, pathOffset) { - if (pathOffset) { - transform = fabric.util.multiplyTransformMatrices( - transform, - [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] - ); + function CB4(t) { + return (1 - t) * (1 - t) * (1 - t); } - return path.map(function(pathSegment) { - var newSegment = pathSegment.slice(0), point = {}; - for (var i = 1; i < pathSegment.length - 1; i += 2) { - point.x = pathSegment[i]; - point.y = pathSegment[i + 1]; - point = fabric.util.transformPoint(point, transform); - newSegment[i] = point.x; - newSegment[i + 1] = point.y; - } - return newSegment; - }); - } - /** - * Join path commands to go back to svg format - * @param {Array} pathData fabricJS parsed path commands - * @return {String} joined path 'M 0 0 L 20 30' - */ - fabric.util.joinPath = function(pathData) { - return pathData.map(function (segment) { return segment.join(' '); }).join(' '); - }; - fabric.util.parsePath = parsePath; - fabric.util.makePathSimpler = makePathSimpler; - fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; - fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; - fabric.util.getBoundsOfCurve = getBoundsOfCurve; - fabric.util.getPointOnPath = getPointOnPath; - fabric.util.transformPath = transformPath; -})(); + function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function(pct) { + var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); + return { + x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, + y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 + }; + }; + } + function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + + (3 * pct * pct * (p4x - p3x)), + tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + + (3 * pct * pct * (p4y - p3y)); + return Math.atan2(tangentY, tangentX); + }; + } -(function() { + function QB1(t) { + return t * t; + } - var slice = Array.prototype.slice; + function QB2(t) { + return 2 * t * (1 - t); + } - /** - * Invokes method on all items in a given array - * @memberOf fabric.util.array - * @param {Array} array Array to iterate over - * @param {String} method Name of a method to invoke - * @return {Array} - */ - function invoke(array, method) { - var args = slice.call(arguments, 2), result = []; - for (var i = 0, len = array.length; i < len; i++) { - result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); + function QB3(t) { + return (1 - t) * (1 - t); } - return result; - } - /** - * Finds maximum value in array (not necessarily "first" one) - * @memberOf fabric.util.array - * @param {Array} array Array to iterate over - * @param {String} byProperty - * @return {*} - */ - function max(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 >= value2; - }); - } + function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function(pct) { + var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); + return { + x: p3x * c1 + p2x * c2 + p1x * c3, + y: p3y * c1 + p2y * c2 + p1y * c3 + }; + }; + } - /** - * Finds minimum value in array (not necessarily "first" one) - * @memberOf fabric.util.array - * @param {Array} array Array to iterate over - * @param {String} byProperty - * @return {*} - */ - function min(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 < value2; - }); - } - - /** - * @private - */ - function fill(array, value) { - var k = array.length; - while (k--) { - array[k] = value; + function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), + tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); + return Math.atan2(tangentY, tangentX); + }; } - return array; - } - /** - * @private - */ - function find(array, byProperty, condition) { - if (!array || array.length === 0) { - return; + + // this will run over a path segment ( a cubic or quadratic segment) and approximate it + // with 100 segemnts. This will good enough to calculate the length of the curve + function pathIterator(iterator, x1, y1) { + var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; + for (perc = 1; perc <= 100; perc += 1) { + p = iterator(perc / 100); + tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); + tempP = p; + } + return tmpLen; } - var i = array.length - 1, - result = byProperty ? array[i][byProperty] : array[i]; - if (byProperty) { - while (i--) { - if (condition(array[i][byProperty], result)) { - result = array[i][byProperty]; + /** + * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1 + * that correspond to that pixels run over the path. + * The percentage will be then used to find the correct point on the canvas for the path. + * @param {Array} segInfo fabricJS collection of information on a parsed path + * @param {Number} distance from starting point, in pixels. + * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point; + */ + function findPercentageForDistance(segInfo, distance) { + var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, + p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; + // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 + // the path + while (tmpLen < distance && nextStep > 0.0001) { + p = iterator(perc); + lastPerc = perc; + nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); + // compare tmpLen each cycle with distance, decide next perc to test. + if ((nextLen + tmpLen) > distance) { + // we discard this step and we make smaller steps. + perc -= nextStep; + nextStep /= 2; + } + else { + tempP = p; + perc += nextStep; + tmpLen += nextLen; } } + p.angle = angleFinder(lastPerc); + return p; } - else { - while (i--) { - if (condition(array[i], result)) { - result = array[i]; + + /** + * Run over a parsed and simplifed path and extract some informations. + * informations are length of each command and starting point + * @param {Array} path fabricJS parsed path commands + * @return {Array} path commands informations + */ + function getPathSegmentsInfo(path) { + var totalLength = 0, len = path.length, current, + //x2 and y2 are the coords of segment start + //x1 and y1 are the coords of the current point + x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; + for (var i = 0; i < len; i++) { + current = path[i]; + tempInfo = { + x: x1, + y: y1, + command: current[0], + }; + switch (current[0]) { //first letter + case 'M': + tempInfo.length = 0; + x2 = x1 = current[1]; + y2 = y1 = current[2]; + break; + case 'L': + tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); + x1 = current[1]; + y1 = current[2]; + break; + case 'C': + iterator = getPointOnCubicBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + angleFinder = getTangentCubicIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[5]; + y1 = current[6]; + break; + case 'Q': + iterator = getPointOnQuadraticBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + angleFinder = getTangentQuadraticIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[3]; + y1 = current[4]; + break; + case 'Z': + case 'z': + // we add those in order to ease calculations later + tempInfo.destX = x2; + tempInfo.destY = y2; + tempInfo.length = calcLineLength(x1, y1, x2, y2); + x1 = x2; + y1 = y2; + break; } + totalLength += tempInfo.length; + info.push(tempInfo); } + info.push({ length: totalLength, x: x1, y: y1 }); + return info; } - return result; - } - - /** - * @namespace fabric.util.array - */ - fabric.util.array = { - fill: fill, - invoke: invoke, - min: min, - max: max - }; - -})(); - -(function() { - /** - * Copies all enumerable properties of one js object to another - * this does not and cannot compete with generic utils. - * Does not clone or extend fabric.Object subclasses. - * This is mostly for internal use and has extra handling for fabricJS objects - * it skips the canvas and group properties in deep cloning. - * @memberOf fabric.util.object - * @param {Object} destination Where to copy to - * @param {Object} source Where to copy from - * @param {Boolean} [deep] Whether to extend nested objects - * @return {Object} - */ + function getPointOnPath(path, distance, infos) { + if (!infos) { + infos = getPathSegmentsInfo(path); + } + var i = 0; + while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { + distance -= infos[i].length; + i++; + } + // var distance = infos[infos.length - 1] * perc; + var segInfo = infos[i], segPercent = distance / segInfo.length, + command = segInfo.command, segment = path[i], info; - function extend(destination, source, deep) { - // JScript DontEnum bug is not taken care of - // the deep clone is for internal use, is not meant to avoid - // javascript traps or cloning html element or self referenced objects. - if (deep) { - if (!fabric.isLikelyNode && source instanceof Element) { - // avoid cloning deep images, canvases, - destination = source; + switch (command) { + case 'M': + return { x: segInfo.x, y: segInfo.y, angle: 0 }; + case 'Z': + case 'z': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segInfo.destX, segInfo.destY), + segPercent + ); + info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); + return info; + case 'L': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segment[1], segment[2]), + segPercent + ); + info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); + return info; + case 'C': + return findPercentageForDistance(segInfo, distance); + case 'Q': + return findPercentageForDistance(segInfo, distance); } - else if (source instanceof Array) { - destination = []; - for (var i = 0, len = source.length; i < len; i++) { - destination[i] = extend({ }, source[i], deep); + } + + /** + * + * @param {string} pathString + * @return {(string|number)[][]} An array of SVG path commands + * @example Usage + * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [ + * ['M', 3, 4], + * ['Q', 3, 5, 2, 1, 4, 0], + * ['Q', 9, 12, 2, 1, 4, 0], + * ]; + * + */ + function parsePath(pathString) { + var result = [], + coords = [], + currentPath, + parsed, + re = fabric.rePathCommand, + rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', + rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, + rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', + rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + + rNumberCommaWsp + '?(' + rNumber + ')', + regArcArgumentSequence = new RegExp(rArcSeq, 'g'), + match, + coordsStr, + // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) + path; + if (!pathString || !pathString.match) { + return result; + } + path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); + + for (var i = 0, coordsParsed, len = path.length; i < len; i++) { + currentPath = path[i]; + + coordsStr = currentPath.slice(1).trim(); + coords.length = 0; + + var command = currentPath.charAt(0); + coordsParsed = [command]; + + if (command.toLowerCase() === 'a') { + // arcs have special flags that apparently don't require spaces so handle special + for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { + for (var j = 1; j < args.length; j++) { + coords.push(args[j]); + } + } } - } - else if (source && typeof source === 'object') { - for (var property in source) { - if (property === 'canvas' || property === 'group') { - // we do not want to clone this props at all. - // we want to keep the keys in the copy - destination[property] = null; + else { + while ((match = re.exec(coordsStr))) { + coords.push(match[0]); + } + } + + for (var j = 0, jlen = coords.length; j < jlen; j++) { + parsed = parseFloat(coords[j]); + if (!isNaN(parsed)) { + coordsParsed.push(parsed); } - else if (source.hasOwnProperty(property)) { - destination[property] = extend({ }, source[property], deep); + } + + var commandLength = commandLengths[command.toLowerCase()], + repeatedCommand = repeatedCommands[command] || command; + + if (coordsParsed.length - 1 > commandLength) { + for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { + result.push([command].concat(coordsParsed.slice(k, k + commandLength))); + command = repeatedCommand; } } + else { + result.push(coordsParsed); + } } - else { - // this sounds odd for an extend but is ok for recursive use - destination = source; + + return result; + } + /** + * + * Converts points to a smooth SVG path + * @param {{ x: number,y: number }[]} points Array of points + * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value. + * @return {(string|number)[][]} An array of SVG path commands + */ + function getSmoothPathFromPoints(points, correction) { + var path = [], i, + p1 = new fabric.Point(points[0].x, points[0].y), + p2 = new fabric.Point(points[1].x, points[1].y), + len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; + correction = correction || 0; + + if (manyPoints) { + multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; + multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; + } + path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); + for (i = 1; i < len; i++) { + if (!p1.eq(p2)) { + var midPoint = p1.midPointFrom(p2); + // p1 is our bezier control point + // midpoint is our endpoint + // start point is p(i-1) value. + path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); + } + p1 = points[i]; + if ((i + 1) < points.length) { + p2 = points[i + 1]; + } + } + if (manyPoints) { + multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; + multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; + } + path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); + return path; + } + /** + * Transform a path by transforming each segment. + * it has to be a simplified path or it won't work. + * WARNING: this depends from pathOffset for correct operation + * @param {Array} path fabricJS parsed and simplified path commands + * @param {Array} transform matrix that represent the transformation + * @param {Object} [pathOffset] the fabric.Path pathOffset + * @param {Number} pathOffset.x + * @param {Number} pathOffset.y + * @returns {Array} the transformed path + */ + function transformPath(path, transform, pathOffset) { + if (pathOffset) { + transform = fabric.util.multiplyTransformMatrices( + transform, + [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] + ); } + return path.map(function(pathSegment) { + var newSegment = pathSegment.slice(0), point = {}; + for (var i = 1; i < pathSegment.length - 1; i += 2) { + point.x = pathSegment[i]; + point.y = pathSegment[i + 1]; + point = fabric.util.transformPoint(point, transform); + newSegment[i] = point.x; + newSegment[i + 1] = point.y; + } + return newSegment; + }); } - else { - for (var property in source) { - destination[property] = source[property]; + + /** + * Returns an array of path commands to create a regular polygon + * @param {number} radius + * @param {number} numVertexes + * @returns {(string|number)[][]} An array of SVG path commands + */ + function getRegularPolygonPath(numVertexes, radius) { + var interiorAngle = Math.PI * 2 / numVertexes; + // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom + // This isn't strictly necessary, but it's how we tend to think of and expect polygons to be drawn + var rotationAdjustment = -Math.PI / 2; + if (numVertexes % 2 === 0) { + rotationAdjustment += interiorAngle / 2; + } + var d = []; + for (var i = 0, rad, coord; i < numVertexes; i++) { + rad = i * interiorAngle + rotationAdjustment; + coord = new fabric.Point(Math.cos(rad), Math.sin(rad)).scalarMultiplyEquals(radius); + d.push([i === 0 ? 'M' : 'L', coord.x, coord.y]); } + d.push(['Z']); + return d; } - return destination; - } - /** - * Creates an empty object and copies all enumerable properties of another object to it - * This method is mostly for internal use, and not intended for duplicating shapes in canvas. - * @memberOf fabric.util.object - * @param {Object} object Object to clone - * @param {Boolean} [deep] Whether to clone nested objects - * @return {Object} - */ + /** + * Join path commands to go back to svg format + * @param {Array} pathData fabricJS parsed path commands + * @return {String} joined path 'M 0 0 L 20 30' + */ + fabric.util.joinPath = function(pathData) { + return pathData.map(function (segment) { return segment.join(' '); }).join(' '); + }; + fabric.util.parsePath = parsePath; + fabric.util.makePathSimpler = makePathSimpler; + fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; + fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; + fabric.util.getBoundsOfCurve = getBoundsOfCurve; + fabric.util.getPointOnPath = getPointOnPath; + fabric.util.transformPath = transformPath; + fabric.util.getRegularPolygonPath = getRegularPolygonPath; + })(typeof exports !== 'undefined' ? exports : window); - //TODO: this function return an empty object if you try to clone null - function clone(object, deep) { - return extend({ }, object, deep); - } + (function(global) { - /** @namespace fabric.util.object */ - fabric.util.object = { - extend: extend, - clone: clone - }; - fabric.util.object.extend(fabric.util, fabric.Observable); -})(); + var fabric = global.fabric, slice = Array.prototype.slice; + /** + * Invokes method on all items in a given array + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} method Name of a method to invoke + * @return {Array} + */ + function invoke(array, method) { + var args = slice.call(arguments, 2), result = []; + for (var i = 0, len = array.length; i < len; i++) { + result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); + } + return result; + } -(function() { + /** + * Finds maximum value in array (not necessarily "first" one) + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} byProperty + * @return {*} + */ + function max(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 >= value2; + }); + } - /** - * Camelizes a string - * @memberOf fabric.util.string - * @param {String} string String to camelize - * @return {String} Camelized version of a string - */ - function camelize(string) { - return string.replace(/-+(.)?/g, function(match, character) { - return character ? character.toUpperCase() : ''; - }); - } + /** + * Finds minimum value in array (not necessarily "first" one) + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} byProperty + * @return {*} + */ + function min(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 < value2; + }); + } - /** - * Capitalizes a string - * @memberOf fabric.util.string - * @param {String} string String to capitalize - * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized - * and other letters stay untouched, if false first letter is capitalized - * and other letters are converted to lowercase. - * @return {String} Capitalized version of a string - */ - function capitalize(string, firstLetterOnly) { - return string.charAt(0).toUpperCase() + - (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()); - } + /** + * @private + */ + function fill(array, value) { + var k = array.length; + while (k--) { + array[k] = value; + } + return array; + } - /** - * Escapes XML in a string - * @memberOf fabric.util.string - * @param {String} string String to escape - * @return {String} Escaped version of a string - */ - function escapeXml(string) { - return string.replace(/&/g, '&') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(//g, '>'); - } + /** + * @private + */ + function find(array, byProperty, condition) { + if (!array || array.length === 0) { + return; + } - /** - * Divide a string in the user perceived single units - * @memberOf fabric.util.string - * @param {String} textstring String to escape - * @return {Array} array containing the graphemes - */ - function graphemeSplit(textstring) { - var i = 0, chr, graphemes = []; - for (i = 0, chr; i < textstring.length; i++) { - if ((chr = getWholeChar(textstring, i)) === false) { - continue; + var i = array.length - 1, + result = byProperty ? array[i][byProperty] : array[i]; + if (byProperty) { + while (i--) { + if (condition(array[i][byProperty], result)) { + result = array[i][byProperty]; + } + } + } + else { + while (i--) { + if (condition(array[i], result)) { + result = array[i]; + } + } } - graphemes.push(chr); + return result; } - return graphemes; - } - // taken from mdn in the charAt doc page. - function getWholeChar(str, i) { - var code = str.charCodeAt(i); + /** + * @namespace fabric.util.array + */ + fabric.util.array = { + fill: fill, + invoke: invoke, + min: min, + max: max + }; + + })(typeof exports !== 'undefined' ? exports : window); - if (isNaN(code)) { - return ''; // Position not found - } - if (code < 0xD800 || code > 0xDFFF) { - return str.charAt(i); - } + (function(global) { + var fabric = global.fabric; + /** + * Copies all enumerable properties of one js object to another + * this does not and cannot compete with generic utils. + * Does not clone or extend fabric.Object subclasses. + * This is mostly for internal use and has extra handling for fabricJS objects + * it skips the canvas and group properties in deep cloning. + * @memberOf fabric.util.object + * @param {Object} destination Where to copy to + * @param {Object} source Where to copy from + * @param {Boolean} [deep] Whether to extend nested objects + * @return {Object} + */ - // High surrogate (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 <= code && code <= 0xDBFF) { - if (str.length <= (i + 1)) { - throw 'High surrogate without following low surrogate'; + function extend(destination, source, deep) { + // JScript DontEnum bug is not taken care of + // the deep clone is for internal use, is not meant to avoid + // javascript traps or cloning html element or self referenced objects. + if (deep) { + if (!fabric.isLikelyNode && source instanceof Element) { + // avoid cloning deep images, canvases, + destination = source; + } + else if (source instanceof Array) { + destination = []; + for (var i = 0, len = source.length; i < len; i++) { + destination[i] = extend({ }, source[i], deep); + } + } + else if (source && typeof source === 'object') { + for (var property in source) { + if (property === 'canvas' || property === 'group') { + // we do not want to clone this props at all. + // we want to keep the keys in the copy + destination[property] = null; + } + else if (source.hasOwnProperty(property)) { + destination[property] = extend({ }, source[property], deep); + } + } + } + else { + // this sounds odd for an extend but is ok for recursive use + destination = source; + } } - var next = str.charCodeAt(i + 1); - if (0xDC00 > next || next > 0xDFFF) { - throw 'High surrogate without following low surrogate'; + else { + for (var property in source) { + destination[property] = source[property]; + } } - return str.charAt(i) + str.charAt(i + 1); + return destination; } - // Low surrogate (0xDC00 <= code && code <= 0xDFFF) - if (i === 0) { - throw 'Low surrogate without preceding high surrogate'; + + /** + * Creates an empty object and copies all enumerable properties of another object to it + * This method is mostly for internal use, and not intended for duplicating shapes in canvas. + * @memberOf fabric.util.object + * @param {Object} object Object to clone + * @param {Boolean} [deep] Whether to clone nested objects + * @return {Object} + */ + + //TODO: this function return an empty object if you try to clone null + function clone(object, deep) { + return deep ? extend({ }, object, deep) : Object.assign({}, object); } - var prev = str.charCodeAt(i - 1); - // (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 > prev || prev > 0xDBFF) { - throw 'Low surrogate without preceding high surrogate'; + /** @namespace fabric.util.object */ + fabric.util.object = { + extend: extend, + clone: clone + }; + fabric.util.object.extend(fabric.util, fabric.Observable); + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + var fabric = global.fabric; + /** + * Camelizes a string + * @memberOf fabric.util.string + * @param {String} string String to camelize + * @return {String} Camelized version of a string + */ + function camelize(string) { + return string.replace(/-+(.)?/g, function(match, character) { + return character ? character.toUpperCase() : ''; + }); } - // We can pass over low surrogates now as the second component - // in a pair which we have already processed - return false; - } + /** + * Capitalizes a string + * @memberOf fabric.util.string + * @param {String} string String to capitalize + * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized + * and other letters stay untouched, if false first letter is capitalized + * and other letters are converted to lowercase. + * @return {String} Capitalized version of a string + */ + function capitalize(string, firstLetterOnly) { + return string.charAt(0).toUpperCase() + + (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()); + } - /** - * String utilities - * @namespace fabric.util.string - */ - fabric.util.string = { - camelize: camelize, - capitalize: capitalize, - escapeXml: escapeXml, - graphemeSplit: graphemeSplit - }; -})(); + /** + * Escapes XML in a string + * @memberOf fabric.util.string + * @param {String} string String to escape + * @return {String} Escaped version of a string + */ + function escapeXml(string) { + return string.replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); + } + /** + * Divide a string in the user perceived single units + * @memberOf fabric.util.string + * @param {String} textstring String to escape + * @return {Array} array containing the graphemes + */ + function graphemeSplit(textstring) { + var i = 0, chr, graphemes = []; + for (i = 0, chr; i < textstring.length; i++) { + if ((chr = getWholeChar(textstring, i)) === false) { + continue; + } + graphemes.push(chr); + } + return graphemes; + } -(function() { + // taken from mdn in the charAt doc page. + function getWholeChar(str, i) { + var code = str.charCodeAt(i); - var slice = Array.prototype.slice, emptyFunction = function() { }, + if (isNaN(code)) { + return ''; // Position not found + } + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); + } - IS_DONTENUM_BUGGY = (function() { - for (var p in { toString: 1 }) { - if (p === 'toString') { - return false; - } + // High surrogate (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; } - return true; - })(), + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + return str.charAt(i) + str.charAt(i + 1); + } + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; + } + var prev = str.charCodeAt(i - 1); + + // (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; + } + // We can pass over low surrogates now as the second component + // in a pair which we have already processed + return false; + } - /** @ignore */ - addMethods = function(klass, source, parent) { - for (var property in source) { - if (property in klass.prototype && - typeof klass.prototype[property] === 'function' && - (source[property] + '').indexOf('callSuper') > -1) { + /** + * String utilities + * @namespace fabric.util.string + */ + fabric.util.string = { + camelize: camelize, + capitalize: capitalize, + escapeXml: escapeXml, + graphemeSplit: graphemeSplit + }; + })(typeof exports !== 'undefined' ? exports : window); - klass.prototype[property] = (function(property) { - return function() { + (function(global) { - var superclass = this.constructor.superclass; - this.constructor.superclass = parent; - var returnValue = source[property].apply(this, arguments); - this.constructor.superclass = superclass; + var fabric = global.fabric, slice = Array.prototype.slice, emptyFunction = function() { }, + /** @ignore */ + addMethods = function(klass, source, parent) { + for (var property in source) { - if (property !== 'initialize') { - return returnValue; - } - }; - })(property); - } - else { - klass.prototype[property] = source[property]; - } + if (property in klass.prototype && + typeof klass.prototype[property] === 'function' && + (source[property] + '').indexOf('callSuper') > -1) { - if (IS_DONTENUM_BUGGY) { - if (source.toString !== Object.prototype.toString) { - klass.prototype.toString = source.toString; + klass.prototype[property] = (function(property) { + return function() { + + var superclass = this.constructor.superclass; + this.constructor.superclass = parent; + var returnValue = source[property].apply(this, arguments); + this.constructor.superclass = superclass; + + if (property !== 'initialize') { + return returnValue; + } + }; + })(property); } - if (source.valueOf !== Object.prototype.valueOf) { - klass.prototype.valueOf = source.valueOf; + else { + klass.prototype[property] = source[property]; } } - } - }; + }; - function Subclass() { } + function Subclass() { } - function callSuper(methodName) { - var parentMethod = null, - _this = this; + function callSuper(methodName) { + var parentMethod = null, + _this = this; + + // climb prototype chain to find method not equal to callee's method + while (_this.constructor.superclass) { + var superClassMethod = _this.constructor.superclass.prototype[methodName]; + if (_this[methodName] !== superClassMethod) { + parentMethod = superClassMethod; + break; + } + // eslint-disable-next-line + _this = _this.constructor.superclass.prototype; + } - // climb prototype chain to find method not equal to callee's method - while (_this.constructor.superclass) { - var superClassMethod = _this.constructor.superclass.prototype[methodName]; - if (_this[methodName] !== superClassMethod) { - parentMethod = superClassMethod; - break; + if (!parentMethod) { + return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); } - // eslint-disable-next-line - _this = _this.constructor.superclass.prototype; - } - if (!parentMethod) { - return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); + return (arguments.length > 1) + ? parentMethod.apply(this, slice.call(arguments, 1)) + : parentMethod.call(this); } - return (arguments.length > 1) - ? parentMethod.apply(this, slice.call(arguments, 1)) - : parentMethod.call(this); - } - - /** - * Helper for creation of "classes". - * @memberOf fabric.util - * @param {Function} [parent] optional "Class" to inherit from - * @param {Object} [properties] Properties shared by all instances of this class - * (be careful modifying objects defined here as this would affect all instances) - */ - function createClass() { - var parent = null, - properties = slice.call(arguments, 0); - - if (typeof properties[0] === 'function') { - parent = properties.shift(); - } - function klass() { - this.initialize.apply(this, arguments); - } - - klass.superclass = parent; - klass.subclasses = []; - - if (parent) { - Subclass.prototype = parent.prototype; - klass.prototype = new Subclass(); - parent.subclasses.push(klass); - } - for (var i = 0, length = properties.length; i < length; i++) { - addMethods(klass, properties[i], parent); - } - if (!klass.prototype.initialize) { - klass.prototype.initialize = emptyFunction; - } - klass.prototype.constructor = klass; - klass.prototype.callSuper = callSuper; - return klass; - } - - fabric.util.createClass = createClass; -})(); - - -(function () { - // since ie11 can use addEventListener but they do not support options, i need to check - var couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent, - touchEvents = ['touchstart', 'touchmove', 'touchend']; - /** - * Adds an event listener to an element - * @function - * @memberOf fabric.util - * @param {HTMLElement} element - * @param {String} eventName - * @param {Function} handler - */ - fabric.util.addListener = function(element, eventName, handler, options) { - element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options); - }; - - /** - * Removes an event listener from an element - * @function - * @memberOf fabric.util - * @param {HTMLElement} element - * @param {String} eventName - * @param {Function} handler - */ - fabric.util.removeListener = function(element, eventName, handler, options) { - element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options); - }; - - function getTouchInfo(event) { - var touchProp = event.changedTouches; - if (touchProp && touchProp[0]) { - return touchProp[0]; - } - return event; - } - - fabric.util.getPointer = function(event) { - var element = event.target, - scroll = fabric.util.getScrollLeftTop(element), - _evt = getTouchInfo(event); - return { - x: _evt.clientX + scroll.left, - y: _evt.clientY + scroll.top - }; - }; - - fabric.util.isTouchEvent = function(event) { - return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch'; - }; -})(); - - -(function () { + /** + * Helper for creation of "classes". + * @memberOf fabric.util + * @param {Function} [parent] optional "Class" to inherit from + * @param {Object} [properties] Properties shared by all instances of this class + * (be careful modifying objects defined here as this would affect all instances) + */ + function createClass() { + var parent = null, + properties = slice.call(arguments, 0); - /** - * Cross-browser wrapper for setting element's style - * @memberOf fabric.util - * @param {HTMLElement} element - * @param {Object} styles - * @return {HTMLElement} Element that was passed as a first argument - */ - function setStyle(element, styles) { - var elementStyle = element.style; - if (!elementStyle) { - return element; - } - if (typeof styles === 'string') { - element.style.cssText += ';' + styles; - return styles.indexOf('opacity') > -1 - ? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) - : element; - } - for (var property in styles) { - if (property === 'opacity') { - setOpacity(element, styles[property]); + if (typeof properties[0] === 'function') { + parent = properties.shift(); } - else { - var normalizedProperty = (property === 'float' || property === 'cssFloat') - ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat') - : property; - elementStyle[normalizedProperty] = styles[property]; + function klass() { + this.initialize.apply(this, arguments); } - } - return element; - } - - var parseEl = fabric.document.createElement('div'), - supportsOpacity = typeof parseEl.style.opacity === 'string', - supportsFilters = typeof parseEl.style.filter === 'string', - reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/, - /** @ignore */ - setOpacity = function (element) { return element; }; + klass.superclass = parent; + klass.subclasses = []; - if (supportsOpacity) { - /** @ignore */ - setOpacity = function(element, value) { - element.style.opacity = value; - return element; - }; - } - else if (supportsFilters) { - /** @ignore */ - setOpacity = function(element, value) { - var es = element.style; - if (element.currentStyle && !element.currentStyle.hasLayout) { - es.zoom = 1; + if (parent) { + Subclass.prototype = parent.prototype; + klass.prototype = new Subclass(); + parent.subclasses.push(klass); } - if (reOpacity.test(es.filter)) { - value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')'); - es.filter = es.filter.replace(reOpacity, value); + for (var i = 0, length = properties.length; i < length; i++) { + addMethods(klass, properties[i], parent); } - else { - es.filter += ' alpha(opacity=' + (value * 100) + ')'; + if (!klass.prototype.initialize) { + klass.prototype.initialize = emptyFunction; } - return element; - }; - } - - fabric.util.setStyle = setStyle; - -})(); + klass.prototype.constructor = klass; + klass.prototype.callSuper = callSuper; + return klass; + } + fabric.util.createClass = createClass; + })(typeof exports !== 'undefined' ? exports : window); -(function() { + (function (global) { + // since ie11 can use addEventListener but they do not support options, i need to check + var fabric = global.fabric, couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent, + touchEvents = ['touchstart', 'touchmove', 'touchend']; + /** + * Adds an event listener to an element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {String} eventName + * @param {Function} handler + */ + fabric.util.addListener = function(element, eventName, handler, options) { + element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options); + }; - var _slice = Array.prototype.slice; + /** + * Removes an event listener from an element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {String} eventName + * @param {Function} handler + */ + fabric.util.removeListener = function(element, eventName, handler, options) { + element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options); + }; - /** - * Takes id and returns an element with that id (if one exists in a document) - * @memberOf fabric.util - * @param {String|HTMLElement} id - * @return {HTMLElement|null} - */ - function getById(id) { - return typeof id === 'string' ? fabric.document.getElementById(id) : id; - } + function getTouchInfo(event) { + var touchProp = event.changedTouches; + if (touchProp && touchProp[0]) { + return touchProp[0]; + } + return event; + } - var sliceCanConvertNodelists, - /** - * Converts an array-like object (e.g. arguments or NodeList) to an array - * @memberOf fabric.util - * @param {Object} arrayLike - * @return {Array} - */ - toArray = function(arrayLike) { - return _slice.call(arrayLike, 0); + fabric.util.getPointer = function(event) { + var element = event.target, + scroll = fabric.util.getScrollLeftTop(element), + _evt = getTouchInfo(event); + return { + x: _evt.clientX + scroll.left, + y: _evt.clientY + scroll.top }; + }; - try { - sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; - } - catch (err) { } - - if (!sliceCanConvertNodelists) { - toArray = function(arrayLike) { - var arr = new Array(arrayLike.length), i = arrayLike.length; - while (i--) { - arr[i] = arrayLike[i]; - } - return arr; + fabric.util.isTouchEvent = function(event) { + return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch'; }; - } + })(typeof exports !== 'undefined' ? exports : window); - /** - * Creates specified element with specified attributes - * @memberOf fabric.util - * @param {String} tagName Type of an element to create - * @param {Object} [attributes] Attributes to set on an element - * @return {HTMLElement} Newly created element - */ - function makeElement(tagName, attributes) { - var el = fabric.document.createElement(tagName); - for (var prop in attributes) { - if (prop === 'class') { - el.className = attributes[prop]; + (function (global) { + var fabric = global.fabric; + /** + * Cross-browser wrapper for setting element's style + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {Object} styles + * @return {HTMLElement} Element that was passed as a first argument + */ + function setStyle(element, styles) { + var elementStyle = element.style; + if (!elementStyle) { + return element; } - else if (prop === 'for') { - el.htmlFor = attributes[prop]; + if (typeof styles === 'string') { + element.style.cssText += ';' + styles; + return styles.indexOf('opacity') > -1 + ? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) + : element; } - else { - el.setAttribute(prop, attributes[prop]); + for (var property in styles) { + if (property === 'opacity') { + setOpacity(element, styles[property]); + } + else { + var normalizedProperty = (property === 'float' || property === 'cssFloat') + ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat') + : property; + elementStyle.setProperty(normalizedProperty, styles[property]); + } } + return element; } - return el; - } - /** - * Adds class to an element - * @memberOf fabric.util - * @param {HTMLElement} element Element to add class to - * @param {String} className Class to add to an element - */ - function addClass(element, className) { - if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { - element.className += (element.className ? ' ' : '') + className; - } - } + var parseEl = fabric.document.createElement('div'), + supportsOpacity = typeof parseEl.style.opacity === 'string', + supportsFilters = typeof parseEl.style.filter === 'string', + reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/, - /** - * Wraps element with another element - * @memberOf fabric.util - * @param {HTMLElement} element Element to wrap - * @param {HTMLElement|String} wrapper Element to wrap with - * @param {Object} [attributes] Attributes to set on a wrapper - * @return {HTMLElement} wrapper - */ - function wrapElement(element, wrapper, attributes) { - if (typeof wrapper === 'string') { - wrapper = makeElement(wrapper, attributes); + /** @ignore */ + setOpacity = function (element) { return element; }; + + if (supportsOpacity) { + /** @ignore */ + setOpacity = function(element, value) { + element.style.opacity = value; + return element; + }; } - if (element.parentNode) { - element.parentNode.replaceChild(wrapper, element); + else if (supportsFilters) { + /** @ignore */ + setOpacity = function(element, value) { + var es = element.style; + if (element.currentStyle && !element.currentStyle.hasLayout) { + es.zoom = 1; + } + if (reOpacity.test(es.filter)) { + value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')'); + es.filter = es.filter.replace(reOpacity, value); + } + else { + es.filter += ' alpha(opacity=' + (value * 100) + ')'; + } + return element; + }; } - wrapper.appendChild(element); - return wrapper; - } - - /** - * Returns element scroll offsets - * @memberOf fabric.util - * @param {HTMLElement} element Element to operate on - * @return {Object} Object with left/top values - */ - function getScrollLeftTop(element) { - - var left = 0, - top = 0, - docElement = fabric.document.documentElement, - body = fabric.document.body || { - scrollLeft: 0, scrollTop: 0 - }; - // While loop checks (and then sets element to) .parentNode OR .host - // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, - // but the .parentNode of a root ShadowDOM node will always be null, instead - // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 - while (element && (element.parentNode || element.host)) { + fabric.util.setStyle = setStyle; - // Set element to element parent, or 'host' in case of ShadowDOM - element = element.parentNode || element.host; - - if (element === fabric.document) { - left = body.scrollLeft || docElement.scrollLeft || 0; - top = body.scrollTop || docElement.scrollTop || 0; - } - else { - left += element.scrollLeft || 0; - top += element.scrollTop || 0; - } + })(typeof exports !== 'undefined' ? exports : window); - if (element.nodeType === 1 && element.style.position === 'fixed') { - break; - } - } + (function(global) { - return { left: left, top: top }; - } + var fabric = global.fabric, _slice = Array.prototype.slice; - /** - * Returns offset for a given element - * @function - * @memberOf fabric.util - * @param {HTMLElement} element Element to get offset for - * @return {Object} Object with "left" and "top" properties - */ - function getElementOffset(element) { - var docElem, - doc = element && element.ownerDocument, - box = { left: 0, top: 0 }, - offset = { left: 0, top: 0 }, - scrollLeftTop, - offsetAttributes = { - borderLeftWidth: 'left', - borderTopWidth: 'top', - paddingLeft: 'left', - paddingTop: 'top' + /** + * Takes id and returns an element with that id (if one exists in a document) + * @memberOf fabric.util + * @param {String|HTMLElement} id + * @return {HTMLElement|null} + */ + function getById(id) { + return typeof id === 'string' ? fabric.document.getElementById(id) : id; + } + + var sliceCanConvertNodelists, + /** + * Converts an array-like object (e.g. arguments or NodeList) to an array + * @memberOf fabric.util + * @param {Object} arrayLike + * @return {Array} + */ + toArray = function(arrayLike) { + return _slice.call(arrayLike, 0); }; - if (!doc) { - return offset; - } - - for (var attr in offsetAttributes) { - offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; + try { + sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; } + catch (err) { } - docElem = doc.documentElement; - if ( typeof element.getBoundingClientRect !== 'undefined' ) { - box = element.getBoundingClientRect(); + if (!sliceCanConvertNodelists) { + toArray = function(arrayLike) { + var arr = new Array(arrayLike.length), i = arrayLike.length; + while (i--) { + arr[i] = arrayLike[i]; + } + return arr; + }; } - scrollLeftTop = getScrollLeftTop(element); - - return { - left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, - top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top - }; - } - - /** - * Returns style attribute value of a given element - * @memberOf fabric.util - * @param {HTMLElement} element Element to get style attribute for - * @param {String} attr Style attribute to get for element - * @return {String} Style attribute value of the given element. - */ - var getElementStyle; - if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { - getElementStyle = function(element, attr) { - var style = fabric.document.defaultView.getComputedStyle(element, null); - return style ? style[attr] : undefined; - }; - } - else { - getElementStyle = function(element, attr) { - var value = element.style[attr]; - if (!value && element.currentStyle) { - value = element.currentStyle[attr]; + /** + * Creates specified element with specified attributes + * @memberOf fabric.util + * @param {String} tagName Type of an element to create + * @param {Object} [attributes] Attributes to set on an element + * @return {HTMLElement} Newly created element + */ + function makeElement(tagName, attributes) { + var el = fabric.document.createElement(tagName); + for (var prop in attributes) { + if (prop === 'class') { + el.className = attributes[prop]; + } + else if (prop === 'for') { + el.htmlFor = attributes[prop]; + } + else { + el.setAttribute(prop, attributes[prop]); + } } - return value; - }; - } - - (function () { - var style = fabric.document.documentElement.style, - selectProp = 'userSelect' in style - ? 'userSelect' - : 'MozUserSelect' in style - ? 'MozUserSelect' - : 'WebkitUserSelect' in style - ? 'WebkitUserSelect' - : 'KhtmlUserSelect' in style - ? 'KhtmlUserSelect' - : ''; + return el; + } /** - * Makes element unselectable + * Adds class to an element * @memberOf fabric.util - * @param {HTMLElement} element Element to make unselectable - * @return {HTMLElement} Element that was passed in + * @param {HTMLElement} element Element to add class to + * @param {String} className Class to add to an element */ - function makeElementUnselectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = fabric.util.falseFunction; - } - if (selectProp) { - element.style[selectProp] = 'none'; - } - else if (typeof element.unselectable === 'string') { - element.unselectable = 'on'; + function addClass(element, className) { + if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { + element.className += (element.className ? ' ' : '') + className; } - return element; } /** - * Makes element selectable + * Wraps element with another element * @memberOf fabric.util - * @param {HTMLElement} element Element to make selectable - * @return {HTMLElement} Element that was passed in + * @param {HTMLElement} element Element to wrap + * @param {HTMLElement|String} wrapper Element to wrap with + * @param {Object} [attributes] Attributes to set on a wrapper + * @return {HTMLElement} wrapper */ - function makeElementSelectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = null; - } - if (selectProp) { - element.style[selectProp] = ''; + function wrapElement(element, wrapper, attributes) { + if (typeof wrapper === 'string') { + wrapper = makeElement(wrapper, attributes); } - else if (typeof element.unselectable === 'string') { - element.unselectable = ''; + if (element.parentNode) { + element.parentNode.replaceChild(wrapper, element); } - return element; + wrapper.appendChild(element); + return wrapper; } - fabric.util.makeElementUnselectable = makeElementUnselectable; - fabric.util.makeElementSelectable = makeElementSelectable; - })(); + /** + * Returns element scroll offsets + * @memberOf fabric.util + * @param {HTMLElement} element Element to operate on + * @return {Object} Object with left/top values + */ + function getScrollLeftTop(element) { + + var left = 0, + top = 0, + docElement = fabric.document.documentElement, + body = fabric.document.body || { + scrollLeft: 0, scrollTop: 0 + }; + + // While loop checks (and then sets element to) .parentNode OR .host + // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, + // but the .parentNode of a root ShadowDOM node will always be null, instead + // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 + while (element && (element.parentNode || element.host)) { - function getNodeCanvas(element) { - var impl = fabric.jsdomImplForWrapper(element); - return impl._canvas || impl._image; - }; + // Set element to element parent, or 'host' in case of ShadowDOM + element = element.parentNode || element.host; - function cleanUpJsdomNode(element) { - if (!fabric.isLikelyNode) { - return; - } - var impl = fabric.jsdomImplForWrapper(element); - if (impl) { - impl._image = null; - impl._canvas = null; - // unsure if necessary - impl._currentSrc = null; - impl._attributes = null; - impl._classList = null; + if (element === fabric.document) { + left = body.scrollLeft || docElement.scrollLeft || 0; + top = body.scrollTop || docElement.scrollTop || 0; + } + else { + left += element.scrollLeft || 0; + top += element.scrollTop || 0; + } + + if (element.nodeType === 1 && element.style.position === 'fixed') { + break; + } + } + + return { left: left, top: top }; } - } - function setImageSmoothing(ctx, value) { - ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled - || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled; - ctx.imageSmoothingEnabled = value; - } + /** + * Returns offset for a given element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element Element to get offset for + * @return {Object} Object with "left" and "top" properties + */ + function getElementOffset(element) { + var docElem, + doc = element && element.ownerDocument, + box = { left: 0, top: 0 }, + offset = { left: 0, top: 0 }, + scrollLeftTop, + offsetAttributes = { + borderLeftWidth: 'left', + borderTopWidth: 'top', + paddingLeft: 'left', + paddingTop: 'top' + }; - /** - * setImageSmoothing sets the context imageSmoothingEnabled property. - * Used by canvas and by ImageObject. - * @memberOf fabric.util - * @since 4.0.0 - * @param {HTMLRenderingContext2D} ctx to set on - * @param {Boolean} value true or false - */ - fabric.util.setImageSmoothing = setImageSmoothing; - fabric.util.getById = getById; - fabric.util.toArray = toArray; - fabric.util.addClass = addClass; - fabric.util.makeElement = makeElement; - fabric.util.wrapElement = wrapElement; - fabric.util.getScrollLeftTop = getScrollLeftTop; - fabric.util.getElementOffset = getElementOffset; - fabric.util.getNodeCanvas = getNodeCanvas; - fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; + if (!doc) { + return offset; + } -})(); + for (var attr in offsetAttributes) { + offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; + } + docElem = doc.documentElement; + if ( typeof element.getBoundingClientRect !== 'undefined' ) { + box = element.getBoundingClientRect(); + } -(function() { + scrollLeftTop = getScrollLeftTop(element); - function addParamToUrl(url, param) { - return url + (/\?/.test(url) ? '&' : '?') + param; - } + return { + left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, + top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top + }; + } - function emptyFn() { } + /** + * Returns style attribute value of a given element + * @memberOf fabric.util + * @param {HTMLElement} element Element to get style attribute for + * @param {String} attr Style attribute to get for element + * @return {String} Style attribute value of the given element. + */ + var getElementStyle; + if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { + getElementStyle = function(element, attr) { + var style = fabric.document.defaultView.getComputedStyle(element, null); + return style ? style[attr] : undefined; + }; + } + else { + getElementStyle = function(element, attr) { + var value = element.style[attr]; + if (!value && element.currentStyle) { + value = element.currentStyle[attr]; + } + return value; + }; + } - /** - * Cross-browser abstraction for sending XMLHttpRequest - * @memberOf fabric.util - * @param {String} url URL to send XMLHttpRequest to - * @param {Object} [options] Options object - * @param {String} [options.method="GET"] - * @param {String} [options.parameters] parameters to append to url in GET or in body - * @param {String} [options.body] body to send with POST or PUT request - * @param {Function} options.onComplete Callback to invoke when request is completed - * @return {XMLHttpRequest} request - */ - function request(url, options) { - options || (options = { }); + (function () { + var style = fabric.document.documentElement.style, + selectProp = 'userSelect' in style + ? 'userSelect' + : 'MozUserSelect' in style + ? 'MozUserSelect' + : 'WebkitUserSelect' in style + ? 'WebkitUserSelect' + : 'KhtmlUserSelect' in style + ? 'KhtmlUserSelect' + : ''; - var method = options.method ? options.method.toUpperCase() : 'GET', - onComplete = options.onComplete || function() { }, - xhr = new fabric.window.XMLHttpRequest(), - body = options.body || options.parameters; + /** + * Makes element unselectable + * @memberOf fabric.util + * @param {HTMLElement} element Element to make unselectable + * @return {HTMLElement} Element that was passed in + */ + function makeElementUnselectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = fabric.util.falseFunction; + } + if (selectProp) { + element.style[selectProp] = 'none'; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = 'on'; + } + return element; + } - /** @ignore */ - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - onComplete(xhr); - xhr.onreadystatechange = emptyFn; + /** + * Makes element selectable + * @memberOf fabric.util + * @param {HTMLElement} element Element to make selectable + * @return {HTMLElement} Element that was passed in + */ + function makeElementSelectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = null; + } + if (selectProp) { + element.style[selectProp] = ''; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = ''; + } + return element; } - }; - if (method === 'GET') { - body = null; - if (typeof options.parameters === 'string') { - url = addParamToUrl(url, options.parameters); + fabric.util.makeElementUnselectable = makeElementUnselectable; + fabric.util.makeElementSelectable = makeElementSelectable; + })(typeof exports !== 'undefined' ? exports : window); + + function getNodeCanvas(element) { + var impl = fabric.jsdomImplForWrapper(element); + return impl._canvas || impl._image; + } + function cleanUpJsdomNode(element) { + if (!fabric.isLikelyNode) { + return; + } + var impl = fabric.jsdomImplForWrapper(element); + if (impl) { + impl._image = null; + impl._canvas = null; + // unsure if necessary + impl._currentSrc = null; + impl._attributes = null; + impl._classList = null; } } - xhr.open(method, url, true); - - if (method === 'POST' || method === 'PUT') { - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + function setImageSmoothing(ctx, value) { + ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled + || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled; + ctx.imageSmoothingEnabled = value; } - xhr.send(body); - return xhr; - } + /** + * setImageSmoothing sets the context imageSmoothingEnabled property. + * Used by canvas and by ImageObject. + * @memberOf fabric.util + * @since 4.0.0 + * @param {HTMLRenderingContext2D} ctx to set on + * @param {Boolean} value true or false + */ + fabric.util.setImageSmoothing = setImageSmoothing; + fabric.util.getById = getById; + fabric.util.toArray = toArray; + fabric.util.addClass = addClass; + fabric.util.makeElement = makeElement; + fabric.util.wrapElement = wrapElement; + fabric.util.getScrollLeftTop = getScrollLeftTop; + fabric.util.getElementOffset = getElementOffset; + fabric.util.getNodeCanvas = getNodeCanvas; + fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; - fabric.util.request = request; -})(); + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric; + function addParamToUrl(url, param) { + return url + (/\?/.test(url) ? '&' : '?') + param; + } -/** - * Wrapper around `console.log` (when available) - * @param {*} [values] Values to log - */ -fabric.log = console.log; + function emptyFn() { } -/** - * Wrapper around `console.warn` (when available) - * @param {*} [values] Values to log as a warning - */ -fabric.warn = console.warn; + /** + * Cross-browser abstraction for sending XMLHttpRequest + * @memberOf fabric.util + * @deprecated this has to go away, we can use a modern browser method to do the same. + * @param {String} url URL to send XMLHttpRequest to + * @param {Object} [options] Options object + * @param {String} [options.method="GET"] + * @param {String} [options.parameters] parameters to append to url in GET or in body + * @param {String} [options.body] body to send with POST or PUT request + * @param {Function} options.onComplete Callback to invoke when request is completed + * @return {XMLHttpRequest} request + */ + function request(url, options) { + options || (options = { }); + var method = options.method ? options.method.toUpperCase() : 'GET', + onComplete = options.onComplete || function() { }, + xhr = new fabric.window.XMLHttpRequest(), + body = options.body || options.parameters; -(function () { + /** @ignore */ + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + onComplete(xhr); + xhr.onreadystatechange = emptyFn; + } + }; - var extend = fabric.util.object.extend, - clone = fabric.util.object.clone; + if (method === 'GET') { + body = null; + if (typeof options.parameters === 'string') { + url = addParamToUrl(url, options.parameters); + } + } - /** - * @typedef {Object} AnimationOptions - * Animation of a value or list of values. - * When using lists, think of something like this: - * fabric.util.animate({ - * startValue: [1, 2, 3], - * endValue: [2, 4, 6], - * onChange: function([a, b, c]) { - * canvas.zoomToPoint({x: b, y: c}, a) - * canvas.renderAll() - * } - * }); - * @example - * @property {Function} [onChange] Callback; invoked on every value change - * @property {Function} [onComplete] Callback; invoked when value change is completed - * @example - * // Note: startValue, endValue, and byValue must match the type - * var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 } - * var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] } - * @property {number | number[]} [startValue=0] Starting value - * @property {number | number[]} [endValue=100] Ending value - * @property {number | number[]} [byValue=100] Value to modify the property by - * @property {Function} [easing] Easing function - * @property {Number} [duration=500] Duration of change (in ms) - * @property {Function} [abort] Additional function with logic. If returns true, animation aborts. - * - * @typedef {() => void} CancelFunction - * - * @typedef {Object} AnimationCurrentState - * @property {number | number[]} currentValue value in range [`startValue`, `endValue`] - * @property {number} completionRate value in range [0, 1] - * @property {number} durationRate value in range [0, 1] - * - * @typedef {(AnimationOptions & AnimationCurrentState & { cancel: CancelFunction }} AnimationContext - */ + xhr.open(method, url, true); - /** - * Array holding all running animations - * @memberof fabric - * @type {AnimationContext[]} - */ - var RUNNING_ANIMATIONS = []; - fabric.util.object.extend(RUNNING_ANIMATIONS, { + if (method === 'POST' || method === 'PUT') { + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + } - /** - * cancel all running animations at the next requestAnimFrame - * @returns {AnimationContext[]} - */ - cancelAll: function () { - var animations = this.splice(0); - animations.forEach(function (animation) { - animation.cancel(); - }); - return animations; - }, + xhr.send(body); + return xhr; + } + + fabric.util.request = request; + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric || (global.fabric = { }); /** - * cancel all running animations attached to canvas at the next requestAnimFrame - * @param {fabric.Canvas} canvas - * @returns {AnimationContext[]} + * Wrapper around `console.log` (when available) + * @param {*} [values] Values to log */ - cancelByCanvas: function (canvas) { - if (!canvas) { - return []; - } - var cancelled = this.filter(function (animation) { - return typeof animation.target === 'object' && animation.target.canvas === canvas; - }); - cancelled.forEach(function (animation) { - animation.cancel(); - }); - return cancelled; - }, + fabric.log = console.log; /** - * cancel all running animations for target at the next requestAnimFrame - * @param {*} target - * @returns {AnimationContext[]} + * Wrapper around `console.warn` (when available) + * @param {*} [values] Values to log as a warning */ - cancelByTarget: function (target) { - var cancelled = this.findAnimationsByTarget(target); - cancelled.forEach(function (animation) { - animation.cancel(); - }); - return cancelled; - }, + fabric.warn = console.warn; + })(typeof exports !== 'undefined' ? exports : window); + (function (global) { /** * - * @param {CancelFunction} cancelFunc the function returned by animate - * @returns {number} - */ - findAnimationIndex: function (cancelFunc) { - return this.indexOf(this.findAnimation(cancelFunc)); - }, - - /** + * @typedef {Object} AnimationOptions + * Animation of a value or list of values. + * @property {Function} [onChange] Callback; invoked on every value change + * @property {Function} [onComplete] Callback; invoked when value change is completed + * @property {number | number[]} [startValue=0] Starting value + * @property {number | number[]} [endValue=100] Ending value + * @property {number | number[]} [byValue=100] Value to modify the property by + * @property {Function} [easing] Easing function + * @property {number} [duration=500] Duration of change (in ms) + * @property {Function} [abort] Additional function with logic. If returns true, animation aborts. + * @property {number} [delay] Delay of animation start (in ms) + * + * @typedef {() => void} CancelFunction + * + * @typedef {Object} AnimationCurrentState + * @property {number | number[]} currentValue value in range [`startValue`, `endValue`] + * @property {number} completionRate value in range [0, 1] + * @property {number} durationRate value in range [0, 1] * - * @param {CancelFunction} cancelFunc the function returned by animate - * @returns {AnimationContext | undefined} animation's options object + * @typedef {(AnimationOptions & AnimationCurrentState & { cancel: CancelFunction }} AnimationContext */ - findAnimation: function (cancelFunc) { - return this.find(function (animation) { - return animation.cancel === cancelFunc; - }); - }, /** - * - * @param {*} target the object that is assigned to the target property of the animation context - * @returns {AnimationContext[]} array of animation options object associated with target + * Array holding all running animations + * @memberof fabric + * @type {AnimationContext[]} */ - findAnimationsByTarget: function (target) { - if (!target) { - return []; - } - return this.filter(function (animation) { - return animation.target === target; - }); - } - }); - - function noop() { - return false; - } - - function defaultEasing(t, b, c, d) { - return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; - } - - /** - * Changes value from one to another within certain period of time, invoking callbacks as value is being changed. - * @memberOf fabric.util - * @param {AnimationOptions} [options] Animation options - * @example - * // Note: startValue, endValue, and byValue must match the type - * fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 }) - * fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }) - * @returns {CancelFunction} cancel function - */ - function animate(options) { - options || (options = {}); - var cancel = false, - context, - removeFromRegistry = function () { - var index = fabric.runningAnimations.indexOf(context); - return index > -1 && fabric.runningAnimations.splice(index, 1)[0]; - }; + var fabric = global.fabric, RUNNING_ANIMATIONS = []; + fabric.util.object.extend(RUNNING_ANIMATIONS, { - context = extend(clone(options), { - cancel: function () { - cancel = true; - return removeFromRegistry(); + /** + * cancel all running animations at the next requestAnimFrame + * @returns {AnimationContext[]} + */ + cancelAll: function () { + var animations = this.splice(0); + animations.forEach(function (animation) { + animation.cancel(); + }); + return animations; }, - currentValue: 'startValue' in options ? options.startValue : 0, - completionRate: 0, - durationRate: 0 - }); - fabric.runningAnimations.push(context); - - requestAnimFrame(function(timestamp) { - var start = timestamp || +new Date(), - duration = options.duration || 500, - finish = start + duration, time, - onChange = options.onChange || noop, - abort = options.abort || noop, - onComplete = options.onComplete || noop, - easing = options.easing || defaultEasing, - isMany = 'startValue' in options ? options.startValue.length > 0 : false, - startValue = 'startValue' in options ? options.startValue : 0, - endValue = 'endValue' in options ? options.endValue : 100, - byValue = options.byValue || (isMany ? startValue.map(function(value, i) { - return endValue[i] - startValue[i]; - }) : endValue - startValue); - - options.onStart && options.onStart(); - - (function tick(ticktime) { - time = ticktime || +new Date(); - var currentTime = time > finish ? duration : (time - start), - timePerc = currentTime / duration, - current = isMany ? startValue.map(function(_value, i) { - return easing(currentTime, startValue[i], byValue[i], duration); - }) : easing(currentTime, startValue, byValue, duration), - valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0]) - : Math.abs((current - startValue) / byValue); - // update context - context.currentValue = isMany ? current.slice() : current; - context.completionRate = valuePerc; - context.durationRate = timePerc; - if (cancel) { - return; - } - if (abort(current, valuePerc, timePerc)) { - removeFromRegistry(); - return; - } - if (time > finish) { - // update context - context.currentValue = isMany ? endValue.slice() : endValue; - context.completionRate = 1; - context.durationRate = 1; - // execute callbacks - onChange(isMany ? endValue.slice() : endValue, 1, 1); - onComplete(endValue, 1, 1); - removeFromRegistry(); - return; - } - else { - onChange(current, valuePerc, timePerc); - requestAnimFrame(tick); - } - })(start); - }); - - return context.cancel; - } - - var _requestAnimFrame = fabric.window.requestAnimationFrame || - fabric.window.webkitRequestAnimationFrame || - fabric.window.mozRequestAnimationFrame || - fabric.window.oRequestAnimationFrame || - fabric.window.msRequestAnimationFrame || - function(callback) { - return fabric.window.setTimeout(callback, 1000 / 60); - }; - - var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout; - - /** - * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/ - * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method - * @memberOf fabric.util - * @param {Function} callback Callback to invoke - * @param {DOMElement} element optional Element to associate with animation - */ - function requestAnimFrame() { - return _requestAnimFrame.apply(fabric.window, arguments); - } - - function cancelAnimFrame() { - return _cancelAnimFrame.apply(fabric.window, arguments); - } - - fabric.util.animate = animate; - fabric.util.requestAnimFrame = requestAnimFrame; - fabric.util.cancelAnimFrame = cancelAnimFrame; - fabric.runningAnimations = RUNNING_ANIMATIONS; -})(); + /** + * cancel all running animations attached to canvas at the next requestAnimFrame + * @param {fabric.Canvas} canvas + * @returns {AnimationContext[]} + */ + cancelByCanvas: function (canvas) { + if (!canvas) { + return []; + } + var cancelled = this.filter(function (animation) { + return typeof animation.target === 'object' && animation.target.canvas === canvas; + }); + cancelled.forEach(function (animation) { + animation.cancel(); + }); + return cancelled; + }, -(function() { - // Calculate an in-between color. Returns a "rgba()" string. - // Credit: Edwin Martin - // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js - function calculateColor(begin, end, pos) { - var color = 'rgba(' - + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' - + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' - + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); + /** + * cancel all running animations for target at the next requestAnimFrame + * @param {*} target + * @returns {AnimationContext[]} + */ + cancelByTarget: function (target) { + var cancelled = this.findAnimationsByTarget(target); + cancelled.forEach(function (animation) { + animation.cancel(); + }); + return cancelled; + }, - color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); - color += ')'; - return color; - } + /** + * + * @param {CancelFunction} cancelFunc the function returned by animate + * @returns {number} + */ + findAnimationIndex: function (cancelFunc) { + return this.indexOf(this.findAnimation(cancelFunc)); + }, - /** - * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. - * @memberOf fabric.util - * @param {String} fromColor The starting color in hex or rgb(a) format. - * @param {String} toColor The starting color in hex or rgb(a) format. - * @param {Number} [duration] Duration of change (in ms). - * @param {Object} [options] Animation options - * @param {Function} [options.onChange] Callback; invoked on every value change - * @param {Function} [options.onComplete] Callback; invoked when value change is completed - * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used. - * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. - * @returns {Function} abort function - */ - function animateColor(fromColor, toColor, duration, options) { - var startColor = new fabric.Color(fromColor).getSource(), - endColor = new fabric.Color(toColor).getSource(), - originalOnComplete = options.onComplete, - originalOnChange = options.onChange; - options = options || {}; - - return fabric.util.animate(fabric.util.object.extend(options, { - duration: duration || 500, - startValue: startColor, - endValue: endColor, - byValue: endColor, - easing: function (currentTime, startValue, byValue, duration) { - var posValue = options.colorEasing - ? options.colorEasing(currentTime, duration) - : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); - return calculateColor(startValue, byValue, posValue); - }, - // has to take in account for color restoring; - onComplete: function(current, valuePerc, timePerc) { - if (originalOnComplete) { - return originalOnComplete( - calculateColor(endColor, endColor, 0), - valuePerc, - timePerc - ); - } + /** + * + * @param {CancelFunction} cancelFunc the function returned by animate + * @returns {AnimationContext | undefined} animation's options object + */ + findAnimation: function (cancelFunc) { + return this.find(function (animation) { + return animation.cancel === cancelFunc; + }); }, - onChange: function(current, valuePerc, timePerc) { - if (originalOnChange) { - if (Array.isArray(current)) { - return originalOnChange( - calculateColor(current, current, 0), - valuePerc, - timePerc - ); - } - originalOnChange(current, valuePerc, timePerc); + + /** + * + * @param {*} target the object that is assigned to the target property of the animation context + * @returns {AnimationContext[]} array of animation options object associated with target + */ + findAnimationsByTarget: function (target) { + if (!target) { + return []; } + return this.filter(function (animation) { + return animation.target === target; + }); } - })); - } + }); - fabric.util.animateColor = animateColor; + function noop() { + return false; + } -})(); + function defaultEasing(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; + } + /** + * Changes value from one to another within certain period of time, invoking callbacks as value is being changed. + * @memberOf fabric.util + * @param {AnimationOptions} [options] Animation options + * When using lists, think of something like this: + * @example + * fabric.util.animate({ + * startValue: [1, 2, 3], + * endValue: [2, 4, 6], + * onChange: function([x, y, zoom]) { + * canvas.zoomToPoint(new fabric.Point(x, y), zoom); + * canvas.requestRenderAll(); + * } + * }); + * + * @example + * fabric.util.animate({ + * startValue: 1, + * endValue: 0, + * onChange: function(v) { + * obj.set('opacity', v); + * canvas.requestRenderAll(); + * } + * }); + * + * @returns {CancelFunction} cancel function + */ + function animate(options) { + options || (options = {}); + var cancel = false, + context, + removeFromRegistry = function () { + var index = fabric.runningAnimations.indexOf(context); + return index > -1 && fabric.runningAnimations.splice(index, 1)[0]; + }; -(function() { + context = Object.assign({}, options, { + cancel: function () { + cancel = true; + return removeFromRegistry(); + }, + currentValue: 'startValue' in options ? options.startValue : 0, + completionRate: 0, + durationRate: 0 + }); + fabric.runningAnimations.push(context); + + var runner = function (timestamp) { + var start = timestamp || +new Date(), + duration = options.duration || 500, + finish = start + duration, time, + onChange = options.onChange || noop, + abort = options.abort || noop, + onComplete = options.onComplete || noop, + easing = options.easing || defaultEasing, + isMany = 'startValue' in options ? options.startValue.length > 0 : false, + startValue = 'startValue' in options ? options.startValue : 0, + endValue = 'endValue' in options ? options.endValue : 100, + byValue = options.byValue || (isMany ? startValue.map(function(value, i) { + return endValue[i] - startValue[i]; + }) : endValue - startValue); + + options.onStart && options.onStart(); + + (function tick(ticktime) { + time = ticktime || +new Date(); + var currentTime = time > finish ? duration : (time - start), + timePerc = currentTime / duration, + current = isMany ? startValue.map(function(_value, i) { + return easing(currentTime, startValue[i], byValue[i], duration); + }) : easing(currentTime, startValue, byValue, duration), + valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0]) + : Math.abs((current - startValue) / byValue); + // update context + context.currentValue = isMany ? current.slice() : current; + context.completionRate = valuePerc; + context.durationRate = timePerc; + if (cancel) { + return; + } + if (abort(current, valuePerc, timePerc)) { + removeFromRegistry(); + return; + } + if (time > finish) { + // update context + context.currentValue = isMany ? endValue.slice() : endValue; + context.completionRate = 1; + context.durationRate = 1; + // execute callbacks + onChange(isMany ? endValue.slice() : endValue, 1, 1); + onComplete(endValue, 1, 1); + removeFromRegistry(); + return; + } + else { + onChange(current, valuePerc, timePerc); + requestAnimFrame(tick); + } + })(start); + }; - function normalize(a, c, p, s) { - if (a < Math.abs(c)) { - a = c; - s = p / 4; - } - else { - //handle the 0/0 case: - if (c === 0 && a === 0) { - s = p / (2 * Math.PI) * Math.asin(1); + if (options.delay) { + setTimeout(function () { + requestAnimFrame(runner); + }, options.delay); } else { - s = p / (2 * Math.PI) * Math.asin(c / a); + requestAnimFrame(runner); } - } - return { a: a, c: c, p: p, s: s }; - } - - function elastic(opts, t, d) { - return opts.a * - Math.pow(2, 10 * (t -= 1)) * - Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p ); - } - - /** - * Cubic easing out - * @memberOf fabric.util.ease - */ - function easeOutCubic(t, b, c, d) { - return c * ((t = t / d - 1) * t * t + 1) + b; - } - - /** - * Cubic easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutCubic(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t + b; - } - return c / 2 * ((t -= 2) * t * t + 2) + b; - } - - /** - * Quartic easing in - * @memberOf fabric.util.ease - */ - function easeInQuart(t, b, c, d) { - return c * (t /= d) * t * t * t + b; - } - - /** - * Quartic easing out - * @memberOf fabric.util.ease - */ - function easeOutQuart(t, b, c, d) { - return -c * ((t = t / d - 1) * t * t * t - 1) + b; - } - /** - * Quartic easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutQuart(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t * t + b; + return context.cancel; } - return -c / 2 * ((t -= 2) * t * t * t - 2) + b; - } - /** - * Quintic easing in - * @memberOf fabric.util.ease - */ - function easeInQuint(t, b, c, d) { - return c * (t /= d) * t * t * t * t + b; - } + var _requestAnimFrame = fabric.window.requestAnimationFrame || + fabric.window.webkitRequestAnimationFrame || + fabric.window.mozRequestAnimationFrame || + fabric.window.oRequestAnimationFrame || + fabric.window.msRequestAnimationFrame || + function(callback) { + return fabric.window.setTimeout(callback, 1000 / 60); + }; - /** - * Quintic easing out - * @memberOf fabric.util.ease - */ - function easeOutQuint(t, b, c, d) { - return c * ((t = t / d - 1) * t * t * t * t + 1) + b; - } + var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout; - /** - * Quintic easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutQuint(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t * t * t + b; + /** + * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method + * @memberOf fabric.util + * @param {Function} callback Callback to invoke + * @param {DOMElement} element optional Element to associate with animation + */ + function requestAnimFrame() { + return _requestAnimFrame.apply(fabric.window, arguments); } - return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; - } - - /** - * Sinusoidal easing in - * @memberOf fabric.util.ease - */ - function easeInSine(t, b, c, d) { - return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; - } - - /** - * Sinusoidal easing out - * @memberOf fabric.util.ease - */ - function easeOutSine(t, b, c, d) { - return c * Math.sin(t / d * (Math.PI / 2)) + b; - } - - /** - * Sinusoidal easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutSine(t, b, c, d) { - return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; - } - - /** - * Exponential easing in - * @memberOf fabric.util.ease - */ - function easeInExpo(t, b, c, d) { - return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; - } - - /** - * Exponential easing out - * @memberOf fabric.util.ease - */ - function easeOutExpo(t, b, c, d) { - return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; - } - /** - * Exponential easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutExpo(t, b, c, d) { - if (t === 0) { - return b; - } - if (t === d) { - return b + c; + function cancelAnimFrame() { + return _cancelAnimFrame.apply(fabric.window, arguments); } - t /= d / 2; - if (t < 1) { - return c / 2 * Math.pow(2, 10 * (t - 1)) + b; - } - return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; - } - /** - * Circular easing in - * @memberOf fabric.util.ease - */ - function easeInCirc(t, b, c, d) { - return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; - } + fabric.util.animate = animate; + fabric.util.requestAnimFrame = requestAnimFrame; + fabric.util.cancelAnimFrame = cancelAnimFrame; + fabric.runningAnimations = RUNNING_ANIMATIONS; + })(typeof exports !== 'undefined' ? exports : window); - /** - * Circular easing out - * @memberOf fabric.util.ease - */ - function easeOutCirc(t, b, c, d) { - return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; - } + (function(global) { + var fabric = global.fabric; + // Calculate an in-between color. Returns a "rgba()" string. + // Credit: Edwin Martin + // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js + function calculateColor(begin, end, pos) { + var color = 'rgba(' + + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' + + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' + + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); - /** - * Circular easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutCirc(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; + color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); + color += ')'; + return color; } - return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; - } - /** - * Elastic easing in - * @memberOf fabric.util.ease - */ - function easeInElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; - } - var opts = normalize(a, c, p, s); - return -elastic(opts, t, d) + b; - } + /** + * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. + * @memberOf fabric.util + * @param {String} fromColor The starting color in hex or rgb(a) format. + * @param {String} toColor The starting color in hex or rgb(a) format. + * @param {Number} [duration] Duration of change (in ms). + * @param {Object} [options] Animation options + * @param {Function} [options.onChange] Callback; invoked on every value change + * @param {Function} [options.onComplete] Callback; invoked when value change is completed + * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used. + * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. + * @returns {Function} abort function + */ + function animateColor(fromColor, toColor, duration, options) { + var startColor = new fabric.Color(fromColor).getSource(), + endColor = new fabric.Color(toColor).getSource(), + originalOnComplete = options.onComplete, + originalOnChange = options.onChange; + options = options || {}; - /** - * Elastic easing out - * @memberOf fabric.util.ease - */ - function easeOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; + return fabric.util.animate(Object.assign(options, { + duration: duration || 500, + startValue: startColor, + endValue: endColor, + byValue: endColor, + easing: function (currentTime, startValue, byValue, duration) { + var posValue = options.colorEasing + ? options.colorEasing(currentTime, duration) + : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); + return calculateColor(startValue, byValue, posValue); + }, + // has to take in account for color restoring; + onComplete: function(current, valuePerc, timePerc) { + if (originalOnComplete) { + return originalOnComplete( + calculateColor(endColor, endColor, 0), + valuePerc, + timePerc + ); + } + }, + onChange: function(current, valuePerc, timePerc) { + if (originalOnChange) { + if (Array.isArray(current)) { + return originalOnChange( + calculateColor(current, current, 0), + valuePerc, + timePerc + ); + } + originalOnChange(current, valuePerc, timePerc); + } + } + })); } - var opts = normalize(a, c, p, s); - return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; - } - /** - * Elastic easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d / 2; - if (t === 2) { - return b + c; - } - if (!p) { - p = d * (0.3 * 1.5); - } - var opts = normalize(a, c, p, s); - if (t < 1) { - return -0.5 * elastic(opts, t, d) + b; - } - return opts.a * Math.pow(2, -10 * (t -= 1)) * - Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; - } + fabric.util.animateColor = animateColor; - /** - * Backwards easing in - * @memberOf fabric.util.ease - */ - function easeInBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; - } - return c * (t /= d) * t * ((s + 1) * t - s) + b; - } + })(typeof exports !== 'undefined' ? exports : window); - /** - * Backwards easing out - * @memberOf fabric.util.ease - */ - function easeOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; + (function(global) { + var fabric = global.fabric; + function normalize(a, c, p, s) { + if (a < Math.abs(c)) { + a = c; + s = p / 4; + } + else { + //handle the 0/0 case: + if (c === 0 && a === 0) { + s = p / (2 * Math.PI) * Math.asin(1); + } + else { + s = p / (2 * Math.PI) * Math.asin(c / a); + } + } + return { a: a, c: c, p: p, s: s }; } - return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; - } - /** - * Backwards easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; - } - t /= d / 2; - if (t < 1) { - return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; + function elastic(opts, t, d) { + return opts.a * + Math.pow(2, 10 * (t -= 1)) * + Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p ); } - return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; - } - - /** - * Bouncing easing in - * @memberOf fabric.util.ease - */ - function easeInBounce(t, b, c, d) { - return c - easeOutBounce (d - t, 0, c, d) + b; - } - /** - * Bouncing easing out - * @memberOf fabric.util.ease - */ - function easeOutBounce(t, b, c, d) { - if ((t /= d) < (1 / 2.75)) { - return c * (7.5625 * t * t) + b; - } - else if (t < (2 / 2.75)) { - return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; - } - else if (t < (2.5 / 2.75)) { - return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; - } - else { - return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; + /** + * Cubic easing out + * @memberOf fabric.util.ease + */ + function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; } - } - /** - * Bouncing easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutBounce(t, b, c, d) { - if (t < d / 2) { - return easeInBounce (t * 2, 0, c, d) * 0.5 + b; + /** + * Cubic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutCubic(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t + b; + } + return c / 2 * ((t -= 2) * t * t + 2) + b; } - return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; - } - - /** - * Easing functions - * See Easing Equations by Robert Penner - * @namespace fabric.util.ease - */ - fabric.util.ease = { /** - * Quadratic easing in + * Quartic easing in * @memberOf fabric.util.ease */ - easeInQuad: function(t, b, c, d) { - return c * (t /= d) * t + b; - }, + function easeInQuart(t, b, c, d) { + return c * (t /= d) * t * t * t + b; + } /** - * Quadratic easing out + * Quartic easing out * @memberOf fabric.util.ease */ - easeOutQuad: function(t, b, c, d) { - return -c * (t /= d) * (t - 2) + b; - }, + function easeOutQuart(t, b, c, d) { + return -c * ((t = t / d - 1) * t * t * t - 1) + b; + } /** - * Quadratic easing in and out + * Quartic easing in and out * @memberOf fabric.util.ease */ - easeInOutQuad: function(t, b, c, d) { - t /= (d / 2); + function easeInOutQuart(t, b, c, d) { + t /= d / 2; if (t < 1) { - return c / 2 * t * t + b; + return c / 2 * t * t * t * t + b; } - return -c / 2 * ((--t) * (t - 2) - 1) + b; - }, + return -c / 2 * ((t -= 2) * t * t * t - 2) + b; + } /** - * Cubic easing in + * Quintic easing in * @memberOf fabric.util.ease */ - easeInCubic: function(t, b, c, d) { - return c * (t /= d) * t * t + b; - }, - - easeOutCubic: easeOutCubic, - easeInOutCubic: easeInOutCubic, - easeInQuart: easeInQuart, - easeOutQuart: easeOutQuart, - easeInOutQuart: easeInOutQuart, - easeInQuint: easeInQuint, - easeOutQuint: easeOutQuint, - easeInOutQuint: easeInOutQuint, - easeInSine: easeInSine, - easeOutSine: easeOutSine, - easeInOutSine: easeInOutSine, - easeInExpo: easeInExpo, - easeOutExpo: easeOutExpo, - easeInOutExpo: easeInOutExpo, - easeInCirc: easeInCirc, - easeOutCirc: easeOutCirc, - easeInOutCirc: easeInOutCirc, - easeInElastic: easeInElastic, - easeOutElastic: easeOutElastic, - easeInOutElastic: easeInOutElastic, - easeInBack: easeInBack, - easeOutBack: easeOutBack, - easeInOutBack: easeInOutBack, - easeInBounce: easeInBounce, - easeOutBounce: easeOutBounce, - easeInOutBounce: easeInOutBounce - }; + function easeInQuint(t, b, c, d) { + return c * (t /= d) * t * t * t * t + b; + } -})(); + /** + * Quintic easing out + * @memberOf fabric.util.ease + */ + function easeOutQuint(t, b, c, d) { + return c * ((t = t / d - 1) * t * t * t * t + 1) + b; + } + /** + * Quintic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutQuint(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t * t + b; + } + return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; + } -(function(global) { + /** + * Sinusoidal easing in + * @memberOf fabric.util.ease + */ + function easeInSine(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; + } - 'use strict'; + /** + * Sinusoidal easing out + * @memberOf fabric.util.ease + */ + function easeOutSine(t, b, c, d) { + return c * Math.sin(t / d * (Math.PI / 2)) + b; + } - /** - * @name fabric - * @namespace - */ + /** + * Sinusoidal easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutSine(t, b, c, d) { + return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; + } - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed, - parseUnit = fabric.util.parseUnit, - multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, - - svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', - 'image', 'text'], - svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], - svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], - svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], - - attributesMap = { - cx: 'left', - x: 'left', - r: 'radius', - cy: 'top', - y: 'top', - display: 'visible', - visibility: 'visible', - transform: 'transformMatrix', - 'fill-opacity': 'fillOpacity', - 'fill-rule': 'fillRule', - 'font-family': 'fontFamily', - 'font-size': 'fontSize', - 'font-style': 'fontStyle', - 'font-weight': 'fontWeight', - 'letter-spacing': 'charSpacing', - 'paint-order': 'paintFirst', - 'stroke-dasharray': 'strokeDashArray', - 'stroke-dashoffset': 'strokeDashOffset', - 'stroke-linecap': 'strokeLineCap', - 'stroke-linejoin': 'strokeLineJoin', - 'stroke-miterlimit': 'strokeMiterLimit', - 'stroke-opacity': 'strokeOpacity', - 'stroke-width': 'strokeWidth', - 'text-decoration': 'textDecoration', - 'text-anchor': 'textAnchor', - opacity: 'opacity', - 'clip-path': 'clipPath', - 'clip-rule': 'clipRule', - 'vector-effect': 'strokeUniform', - 'image-rendering': 'imageSmoothing', - }, - - colorAttributes = { - stroke: 'strokeOpacity', - fill: 'fillOpacity' - }, - - fSize = 'font-size', cPath = 'clip-path'; - - fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); - fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); - fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); - fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); - - fabric.cssRules = { }; - fabric.gradientDefs = { }; - fabric.clipPaths = { }; - - function normalizeAttr(attr) { - // transform attribute names - if (attr in attributesMap) { - return attributesMap[attr]; + /** + * Exponential easing in + * @memberOf fabric.util.ease + */ + function easeInExpo(t, b, c, d) { + return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; + } + + /** + * Exponential easing out + * @memberOf fabric.util.ease + */ + function easeOutExpo(t, b, c, d) { + return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; } - return attr; - } - function normalizeValue(attr, value, parentAttributes, fontSize) { - var isArray = Object.prototype.toString.call(value) === '[object Array]', - parsed; + /** + * Exponential easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutExpo(t, b, c, d) { + if (t === 0) { + return b; + } + if (t === d) { + return b + c; + } + t /= d / 2; + if (t < 1) { + return c / 2 * Math.pow(2, 10 * (t - 1)) + b; + } + return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; + } - if ((attr === 'fill' || attr === 'stroke') && value === 'none') { - value = ''; + /** + * Circular easing in + * @memberOf fabric.util.ease + */ + function easeInCirc(t, b, c, d) { + return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; } - else if (attr === 'strokeUniform') { - return (value === 'non-scaling-stroke'); + + /** + * Circular easing out + * @memberOf fabric.util.ease + */ + function easeOutCirc(t, b, c, d) { + return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; } - else if (attr === 'strokeDashArray') { - if (value === 'none') { - value = null; - } - else { - value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); + + /** + * Circular easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutCirc(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; } + return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; } - else if (attr === 'transformMatrix') { - if (parentAttributes && parentAttributes.transformMatrix) { - value = multiplyTransformMatrices( - parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); + + /** + * Elastic easing in + * @memberOf fabric.util.ease + */ + function easeInElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; } - else { - value = fabric.parseTransformAttribute(value); + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; } + var opts = normalize(a, c, p, s); + return -elastic(opts, t, d) + b; } - else if (attr === 'visible') { - value = value !== 'none' && value !== 'hidden'; - // display=none on parent element always takes precedence over child element - if (parentAttributes && parentAttributes.visible === false) { - value = false; + + /** + * Elastic easing out + * @memberOf fabric.util.ease + */ + function easeOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; } + var opts = normalize(a, c, p, s); + return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; } - else if (attr === 'opacity') { - value = parseFloat(value); - if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { - value *= parentAttributes.opacity; + + /** + * Elastic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; } + t /= d / 2; + if (t === 2) { + return b + c; + } + if (!p) { + p = d * (0.3 * 1.5); + } + var opts = normalize(a, c, p, s); + if (t < 1) { + return -0.5 * elastic(opts, t, d) + b; + } + return opts.a * Math.pow(2, -10 * (t -= 1)) * + Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; } - else if (attr === 'textAnchor' /* text-anchor */) { - value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; + + /** + * Backwards easing in + * @memberOf fabric.util.ease + */ + function easeInBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + return c * (t /= d) * t * ((s + 1) * t - s) + b; } - else if (attr === 'charSpacing') { - // parseUnit returns px and we convert it to em - parsed = parseUnit(value, fontSize) / fontSize * 1000; + + /** + * Backwards easing out + * @memberOf fabric.util.ease + */ + function easeOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; } - else if (attr === 'paintFirst') { - var fillIndex = value.indexOf('fill'); - var strokeIndex = value.indexOf('stroke'); - var value = 'fill'; - if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { - value = 'stroke'; + + /** + * Backwards easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; } - else if (fillIndex === -1 && strokeIndex > -1) { - value = 'stroke'; + t /= d / 2; + if (t < 1) { + return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; } + return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; } - else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { - return value; + + /** + * Bouncing easing in + * @memberOf fabric.util.ease + */ + function easeInBounce(t, b, c, d) { + return c - easeOutBounce (d - t, 0, c, d) + b; } - else if (attr === 'imageSmoothing') { - return (value === 'optimizeQuality'); + + /** + * Bouncing easing out + * @memberOf fabric.util.ease + */ + function easeOutBounce(t, b, c, d) { + if ((t /= d) < (1 / 2.75)) { + return c * (7.5625 * t * t) + b; + } + else if (t < (2 / 2.75)) { + return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; + } + else if (t < (2.5 / 2.75)) { + return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; + } + else { + return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; + } } - else { - parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); + + /** + * Bouncing easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutBounce(t, b, c, d) { + if (t < d / 2) { + return easeInBounce (t * 2, 0, c, d) * 0.5 + b; + } + return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; } - return (!isArray && isNaN(parsed) ? value : parsed); - } + /** + * Easing functions + * See Easing Equations by Robert Penner + * @namespace fabric.util.ease + */ + fabric.util.ease = { - /** - * @private - */ - function getSvgRegex(arr) { - return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); - } + /** + * Quadratic easing in + * @memberOf fabric.util.ease + */ + easeInQuad: function(t, b, c, d) { + return c * (t /= d) * t + b; + }, - /** - * @private - * @param {Object} attributes Array of attributes to parse - */ - function _setStrokeFillOpacity(attributes) { - for (var attr in colorAttributes) { + /** + * Quadratic easing out + * @memberOf fabric.util.ease + */ + easeOutQuad: function(t, b, c, d) { + return -c * (t /= d) * (t - 2) + b; + }, + + /** + * Quadratic easing in and out + * @memberOf fabric.util.ease + */ + easeInOutQuad: function(t, b, c, d) { + t /= (d / 2); + if (t < 1) { + return c / 2 * t * t + b; + } + return -c / 2 * ((--t) * (t - 2) - 1) + b; + }, + + /** + * Cubic easing in + * @memberOf fabric.util.ease + */ + easeInCubic: function(t, b, c, d) { + return c * (t /= d) * t * t + b; + }, + + easeOutCubic: easeOutCubic, + easeInOutCubic: easeInOutCubic, + easeInQuart: easeInQuart, + easeOutQuart: easeOutQuart, + easeInOutQuart: easeInOutQuart, + easeInQuint: easeInQuint, + easeOutQuint: easeOutQuint, + easeInOutQuint: easeInOutQuint, + easeInSine: easeInSine, + easeOutSine: easeOutSine, + easeInOutSine: easeInOutSine, + easeInExpo: easeInExpo, + easeOutExpo: easeOutExpo, + easeInOutExpo: easeInOutExpo, + easeInCirc: easeInCirc, + easeOutCirc: easeOutCirc, + easeInOutCirc: easeInOutCirc, + easeInElastic: easeInElastic, + easeOutElastic: easeOutElastic, + easeInOutElastic: easeInOutElastic, + easeInBack: easeInBack, + easeOutBack: easeOutBack, + easeInOutBack: easeInOutBack, + easeInBounce: easeInBounce, + easeOutBounce: easeOutBounce, + easeInOutBounce: easeInOutBounce + }; + + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + /** + * @name fabric + * @namespace + */ + + var fabric = global.fabric || (global.fabric = { }), + toFixed = fabric.util.toFixed, + parseUnit = fabric.util.parseUnit, + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + + svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', + 'image', 'text'], + svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], + svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], + svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], + + attributesMap = { + cx: 'left', + x: 'left', + r: 'radius', + cy: 'top', + y: 'top', + display: 'visible', + visibility: 'visible', + transform: 'transformMatrix', + 'fill-opacity': 'fillOpacity', + 'fill-rule': 'fillRule', + 'font-family': 'fontFamily', + 'font-size': 'fontSize', + 'font-style': 'fontStyle', + 'font-weight': 'fontWeight', + 'letter-spacing': 'charSpacing', + 'paint-order': 'paintFirst', + 'stroke-dasharray': 'strokeDashArray', + 'stroke-dashoffset': 'strokeDashOffset', + 'stroke-linecap': 'strokeLineCap', + 'stroke-linejoin': 'strokeLineJoin', + 'stroke-miterlimit': 'strokeMiterLimit', + 'stroke-opacity': 'strokeOpacity', + 'stroke-width': 'strokeWidth', + 'text-decoration': 'textDecoration', + 'text-anchor': 'textAnchor', + opacity: 'opacity', + 'clip-path': 'clipPath', + 'clip-rule': 'clipRule', + 'vector-effect': 'strokeUniform', + 'image-rendering': 'imageSmoothing', + }, + + colorAttributes = { + stroke: 'strokeOpacity', + fill: 'fillOpacity' + }, + + fSize = 'font-size', cPath = 'clip-path'; - if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { - continue; + fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); + fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); + fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); + fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); + + fabric.cssRules = { }; + fabric.gradientDefs = { }; + fabric.clipPaths = { }; + + function normalizeAttr(attr) { + // transform attribute names + if (attr in attributesMap) { + return attributesMap[attr]; } + return attr; + } - if (typeof attributes[attr] === 'undefined') { - if (!fabric.Object.prototype[attr]) { - continue; + function normalizeValue(attr, value, parentAttributes, fontSize) { + var isArray = Array.isArray(value), parsed; + + if ((attr === 'fill' || attr === 'stroke') && value === 'none') { + value = ''; + } + else if (attr === 'strokeUniform') { + return (value === 'non-scaling-stroke'); + } + else if (attr === 'strokeDashArray') { + if (value === 'none') { + value = null; + } + else { + value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); } - attributes[attr] = fabric.Object.prototype[attr]; } - - if (attributes[attr].indexOf('url(') === 0) { - continue; + else if (attr === 'transformMatrix') { + if (parentAttributes && parentAttributes.transformMatrix) { + value = multiplyTransformMatrices( + parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); + } + else { + value = fabric.parseTransformAttribute(value); + } + } + else if (attr === 'visible') { + value = value !== 'none' && value !== 'hidden'; + // display=none on parent element always takes precedence over child element + if (parentAttributes && parentAttributes.visible === false) { + value = false; + } + } + else if (attr === 'opacity') { + value = parseFloat(value); + if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { + value *= parentAttributes.opacity; + } + } + else if (attr === 'textAnchor' /* text-anchor */) { + value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; + } + else if (attr === 'charSpacing') { + // parseUnit returns px and we convert it to em + parsed = parseUnit(value, fontSize) / fontSize * 1000; + } + else if (attr === 'paintFirst') { + var fillIndex = value.indexOf('fill'); + var strokeIndex = value.indexOf('stroke'); + var value = 'fill'; + if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { + value = 'stroke'; + } + else if (fillIndex === -1 && strokeIndex > -1) { + value = 'stroke'; + } + } + else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { + return value; + } + else if (attr === 'imageSmoothing') { + return (value === 'optimizeQuality'); + } + else { + parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); } - var color = new fabric.Color(attributes[attr]); - attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); + return (!isArray && isNaN(parsed) ? value : parsed); } - return attributes; - } - /** - * @private - */ - function _getMultipleNodes(doc, nodeNames) { - var nodeName, nodeArray = [], nodeList, i, len; - for (i = 0, len = nodeNames.length; i < len; i++) { - nodeName = nodeNames[i]; - nodeList = doc.getElementsByTagName(nodeName); - nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); + /** + * @private + */ + function getSvgRegex(arr) { + return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); } - return nodeArray; - } - /** - * Parses "transform" attribute, returning an array of values - * @static - * @function - * @memberOf fabric - * @param {String} attributeValue String containing attribute value - * @return {Array} Array of 6 elements representing transformation matrix - */ - fabric.parseTransformAttribute = (function() { - function rotateMatrix(matrix, args) { - var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), - x = 0, y = 0; - if (args.length === 3) { - x = args[1]; - y = args[2]; - } - - matrix[0] = cos; - matrix[1] = sin; - matrix[2] = -sin; - matrix[3] = cos; - matrix[4] = x - (cos * x - sin * y); - matrix[5] = y - (sin * x + cos * y); - } + /** + * @private + * @param {Object} attributes Array of attributes to parse + */ + function _setStrokeFillOpacity(attributes) { + for (var attr in colorAttributes) { - function scaleMatrix(matrix, args) { - var multiplierX = args[0], - multiplierY = (args.length === 2) ? args[1] : args[0]; + if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { + continue; + } - matrix[0] = multiplierX; - matrix[3] = multiplierY; - } + if (typeof attributes[attr] === 'undefined') { + if (!fabric.Object.prototype[attr]) { + continue; + } + attributes[attr] = fabric.Object.prototype[attr]; + } - function skewMatrix(matrix, args, pos) { - matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); + if (attributes[attr].indexOf('url(') === 0) { + continue; + } + + var color = new fabric.Color(attributes[attr]); + attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); + } + return attributes; } - function translateMatrix(matrix, args) { - matrix[4] = args[0]; - if (args.length === 2) { - matrix[5] = args[1]; + /** + * @private + */ + function _getMultipleNodes(doc, nodeNames) { + var nodeName, nodeArray = [], nodeList, i, len; + for (i = 0, len = nodeNames.length; i < len; i++) { + nodeName = nodeNames[i]; + nodeList = doc.getElementsByTagName(nodeName); + nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); } + return nodeArray; } - // identity matrix - var iMatrix = fabric.iMatrix, + /** + * Parses "transform" attribute, returning an array of values + * @static + * @function + * @memberOf fabric + * @param {String} attributeValue String containing attribute value + * @return {Array} Array of 6 elements representing transformation matrix + */ + fabric.parseTransformAttribute = (function() { + function rotateMatrix(matrix, args) { + var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), + x = 0, y = 0; + if (args.length === 3) { + x = args[1]; + y = args[2]; + } - // == begin transform regexp - number = fabric.reNum, + matrix[0] = cos; + matrix[1] = sin; + matrix[2] = -sin; + matrix[3] = cos; + matrix[4] = x - (cos * x - sin * y); + matrix[5] = y - (sin * x + cos * y); + } - commaWsp = fabric.commaWsp, + function scaleMatrix(matrix, args) { + var multiplierX = args[0], + multiplierY = (args.length === 2) ? args[1] : args[0]; - skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', + matrix[0] = multiplierX; + matrix[3] = multiplierY; + } - skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', + function skewMatrix(matrix, args, pos) { + matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); + } - rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + - commaWsp + '(' + number + ')' + - commaWsp + '(' + number + '))?\\s*\\))', + function translateMatrix(matrix, args) { + matrix[4] = args[0]; + if (args.length === 2) { + matrix[5] = args[1]; + } + } - scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + - commaWsp + '(' + number + '))?\\s*\\))', + // identity matrix + var iMatrix = fabric.iMatrix, - translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + - commaWsp + '(' + number + '))?\\s*\\))', + // == begin transform regexp + number = fabric.reNum, - matrix = '(?:(matrix)\\s*\\(\\s*' + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + - '\\s*\\))', + commaWsp = fabric.commaWsp, - transform = '(?:' + - matrix + '|' + - translate + '|' + - scale + '|' + - rotate + '|' + - skewX + '|' + - skewY + - ')', + skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', - transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', + skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', - transformList = '^\\s*(?:' + transforms + '?)\\s*$', + rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + ')' + + commaWsp + '(' + number + '))?\\s*\\))', - // http://www.w3.org/TR/SVG/coords.html#TransformAttribute - reTransformList = new RegExp(transformList), - // == end transform regexp + scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + '))?\\s*\\))', - reTransform = new RegExp(transform, 'g'); + translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + '))?\\s*\\))', - return function(attributeValue) { + matrix = '(?:(matrix)\\s*\\(\\s*' + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + + '\\s*\\))', - // start with identity matrix - var matrix = iMatrix.concat(), - matrices = []; + transform = '(?:' + + matrix + '|' + + translate + '|' + + scale + '|' + + rotate + '|' + + skewX + '|' + + skewY + + ')', - // return if no argument was given or - // an argument does not match transform attribute regexp - if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { - return matrix; - } + transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', - attributeValue.replace(reTransform, function(match) { + transformList = '^\\s*(?:' + transforms + '?)\\s*$', - var m = new RegExp(transform).exec(match).filter(function (match) { - // match !== '' && match != null - return (!!match); - }), - operation = m[1], - args = m.slice(2).map(parseFloat); + // http://www.w3.org/TR/SVG/coords.html#TransformAttribute + reTransformList = new RegExp(transformList), + // == end transform regexp - switch (operation) { - case 'translate': - translateMatrix(matrix, args); - break; - case 'rotate': - args[0] = fabric.util.degreesToRadians(args[0]); - rotateMatrix(matrix, args); - break; - case 'scale': - scaleMatrix(matrix, args); - break; - case 'skewX': - skewMatrix(matrix, args, 2); - break; - case 'skewY': - skewMatrix(matrix, args, 1); - break; - case 'matrix': - matrix = args; - break; + reTransform = new RegExp(transform, 'g'); + + return function(attributeValue) { + + // start with identity matrix + var matrix = iMatrix.concat(), + matrices = []; + + // return if no argument was given or + // an argument does not match transform attribute regexp + if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { + return matrix; } - // snapshot current matrix into matrices array - matrices.push(matrix.concat()); - // reset - matrix = iMatrix.concat(); - }); + attributeValue.replace(reTransform, function(match) { - var combinedMatrix = matrices[0]; - while (matrices.length > 1) { - matrices.shift(); - combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); - } - return combinedMatrix; - }; - })(); + var m = new RegExp(transform).exec(match).filter(function (match) { + // match !== '' && match != null + return (!!match); + }), + operation = m[1], + args = m.slice(2).map(parseFloat); - /** - * @private - */ - function parseStyleString(style, oStyle) { - var attr, value; - style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { - var pair = chunk.split(':'); + switch (operation) { + case 'translate': + translateMatrix(matrix, args); + break; + case 'rotate': + args[0] = fabric.util.degreesToRadians(args[0]); + rotateMatrix(matrix, args); + break; + case 'scale': + scaleMatrix(matrix, args); + break; + case 'skewX': + skewMatrix(matrix, args, 2); + break; + case 'skewY': + skewMatrix(matrix, args, 1); + break; + case 'matrix': + matrix = args; + break; + } - attr = pair[0].trim().toLowerCase(); - value = pair[1].trim(); + // snapshot current matrix into matrices array + matrices.push(matrix.concat()); + // reset + matrix = iMatrix.concat(); + }); - oStyle[attr] = value; - }); - } + var combinedMatrix = matrices[0]; + while (matrices.length > 1) { + matrices.shift(); + combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); + } + return combinedMatrix; + }; + })(typeof exports !== 'undefined' ? exports : window); - /** - * @private - */ - function parseStyleObject(style, oStyle) { - var attr, value; - for (var prop in style) { - if (typeof style[prop] === 'undefined') { - continue; - } + /** + * @private + */ + function parseStyleString(style, oStyle) { + var attr, value; + style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { + var pair = chunk.split(':'); - attr = prop.toLowerCase(); - value = style[prop]; + attr = pair[0].trim().toLowerCase(); + value = pair[1].trim(); - oStyle[attr] = value; + oStyle[attr] = value; + }); } - } - /** - * @private - */ - function getGlobalStylesForElement(element, svgUid) { - var styles = { }; - for (var rule in fabric.cssRules[svgUid]) { - if (elementMatchesRule(element, rule.split(' '))) { - for (var property in fabric.cssRules[svgUid][rule]) { - styles[property] = fabric.cssRules[svgUid][rule][property]; + /** + * @private + */ + function parseStyleObject(style, oStyle) { + var attr, value; + for (var prop in style) { + if (typeof style[prop] === 'undefined') { + continue; } + + attr = prop.toLowerCase(); + value = style[prop]; + + oStyle[attr] = value; } } - return styles; - } - /** - * @private - */ - function elementMatchesRule(element, selectors) { - var firstMatching, parentMatching = true; - //start from rightmost selector. - firstMatching = selectorMatches(element, selectors.pop()); - if (firstMatching && selectors.length) { - parentMatching = doesSomeParentMatch(element, selectors); + /** + * @private + */ + function getGlobalStylesForElement(element, svgUid) { + var styles = { }; + for (var rule in fabric.cssRules[svgUid]) { + if (elementMatchesRule(element, rule.split(' '))) { + for (var property in fabric.cssRules[svgUid][rule]) { + styles[property] = fabric.cssRules[svgUid][rule][property]; + } + } + } + return styles; } - return firstMatching && parentMatching && (selectors.length === 0); - } - function doesSomeParentMatch(element, selectors) { - var selector, parentMatching = true; - while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { - if (parentMatching) { - selector = selectors.pop(); + /** + * @private + */ + function elementMatchesRule(element, selectors) { + var firstMatching, parentMatching = true; + //start from rightmost selector. + firstMatching = selectorMatches(element, selectors.pop()); + if (firstMatching && selectors.length) { + parentMatching = doesSomeParentMatch(element, selectors); } - element = element.parentNode; - parentMatching = selectorMatches(element, selector); + return firstMatching && parentMatching && (selectors.length === 0); } - return selectors.length === 0; - } - /** - * @private - */ - function selectorMatches(element, selector) { - var nodeName = element.nodeName, - classNames = element.getAttribute('class'), - id = element.getAttribute('id'), matcher, i; - // i check if a selector matches slicing away part from it. - // if i get empty string i should match - matcher = new RegExp('^' + nodeName, 'i'); - selector = selector.replace(matcher, ''); - if (id && selector.length) { - matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); - selector = selector.replace(matcher, ''); - } - if (classNames && selector.length) { - classNames = classNames.split(' '); - for (i = classNames.length; i--;) { - matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); - selector = selector.replace(matcher, ''); + function doesSomeParentMatch(element, selectors) { + var selector, parentMatching = true; + while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { + if (parentMatching) { + selector = selectors.pop(); + } + element = element.parentNode; + parentMatching = selectorMatches(element, selector); } + return selectors.length === 0; } - return selector.length === 0; - } - /** - * @private - * to support IE8 missing getElementById on SVGdocument and on node xmlDOM - */ - function elementById(doc, id) { - var el; - doc.getElementById && (el = doc.getElementById(id)); - if (el) { - return el; - } - var node, i, len, nodelist = doc.getElementsByTagName('*'); - for (i = 0, len = nodelist.length; i < len; i++) { - node = nodelist[i]; - if (id === node.getAttribute('id')) { - return node; + /** + * @private + */ + function selectorMatches(element, selector) { + var nodeName = element.nodeName, + classNames = element.getAttribute('class'), + id = element.getAttribute('id'), matcher, i; + // i check if a selector matches slicing away part from it. + // if i get empty string i should match + matcher = new RegExp('^' + nodeName, 'i'); + selector = selector.replace(matcher, ''); + if (id && selector.length) { + matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); + selector = selector.replace(matcher, ''); + } + if (classNames && selector.length) { + classNames = classNames.split(' '); + for (i = classNames.length; i--;) { + matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); + selector = selector.replace(matcher, ''); + } } + return selector.length === 0; } - } - /** - * @private - */ - function parseUseDirectives(doc) { - var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; - while (nodelist.length && i < nodelist.length) { - var el = nodelist[i], - xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); - - if (xlinkAttribute === null) { - return; + /** + * @private + * to support IE8 missing getElementById on SVGdocument and on node xmlDOM + */ + function elementById(doc, id) { + var el; + doc.getElementById && (el = doc.getElementById(id)); + if (el) { + return el; } - - var xlink = xlinkAttribute.substr(1), - x = el.getAttribute('x') || 0, - y = el.getAttribute('y') || 0, - el2 = elementById(doc, xlink).cloneNode(true), - currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', - parentNode, - oldLength = nodelist.length, attr, - j, - attrs, - len, - namespace = fabric.svgNS; - - applyViewboxTransform(el2); - if (/^svg$/i.test(el2.nodeName)) { - var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); - for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { - attr = attrs.item(j); - el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); - } - // el2.firstChild != null - while (el2.firstChild) { - el3.appendChild(el2.firstChild); + var node, i, len, nodelist = doc.getElementsByTagName('*'); + for (i = 0, len = nodelist.length; i < len; i++) { + node = nodelist[i]; + if (id === node.getAttribute('id')) { + return node; } - el2 = el3; } + } - for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { - attr = attrs.item(j); - if (attr.nodeName === 'x' || attr.nodeName === 'y' || - attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { - continue; - } + /** + * @private + */ + function parseUseDirectives(doc) { + var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; + while (nodelist.length && i < nodelist.length) { + var el = nodelist[i], + xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); - if (attr.nodeName === 'transform') { - currentTrans = attr.nodeValue + ' ' + currentTrans; + if (xlinkAttribute === null) { + return; } - else { - el2.setAttribute(attr.nodeName, attr.nodeValue); + + var xlink = xlinkAttribute.slice(1), + x = el.getAttribute('x') || 0, + y = el.getAttribute('y') || 0, + el2 = elementById(doc, xlink).cloneNode(true), + currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', + parentNode, + oldLength = nodelist.length, attr, + j, + attrs, + len, + namespace = fabric.svgNS; + + applyViewboxTransform(el2); + if (/^svg$/i.test(el2.nodeName)) { + var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); + for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); + } + // el2.firstChild != null + while (el2.firstChild) { + el3.appendChild(el2.firstChild); + } + el2 = el3; } - } - el2.setAttribute('transform', currentTrans); - el2.setAttribute('instantiated_by_use', '1'); - el2.removeAttribute('id'); - parentNode = el.parentNode; - parentNode.replaceChild(el2, el); - // some browsers do not shorten nodelist after replaceChild (IE8) - if (nodelist.length === oldLength) { - i++; - } - } - } + for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + if (attr.nodeName === 'x' || attr.nodeName === 'y' || + attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { + continue; + } - // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute - // matches, e.g.: +14.56e-12, etc. - var reViewBoxAttrValue = new RegExp( - '^' + - '\\s*(' + fabric.reNum + '+)\\s*,?' + - '\\s*(' + fabric.reNum + '+)\\s*,?' + - '\\s*(' + fabric.reNum + '+)\\s*,?' + - '\\s*(' + fabric.reNum + '+)\\s*' + - '$' - ); + if (attr.nodeName === 'transform') { + currentTrans = attr.nodeValue + ' ' + currentTrans; + } + else { + el2.setAttribute(attr.nodeName, attr.nodeValue); + } + } - /** - * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements - */ - function applyViewboxTransform(element) { - if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { - return {}; - } - var viewBoxAttr = element.getAttribute('viewBox'), - scaleX = 1, - scaleY = 1, - minX = 0, - minY = 0, - viewBoxWidth, viewBoxHeight, matrix, el, - widthAttr = element.getAttribute('width'), - heightAttr = element.getAttribute('height'), - x = element.getAttribute('x') || 0, - y = element.getAttribute('y') || 0, - preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', - missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), - missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), - toBeParsed = missingViewBox && missingDimAttr, - parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; - - parsedDim.width = 0; - parsedDim.height = 0; - parsedDim.toBeParsed = toBeParsed; - - if (missingViewBox) { - if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; - matrix = (element.getAttribute('transform') || '') + translateMatrix; - element.setAttribute('transform', matrix); - element.removeAttribute('x'); - element.removeAttribute('y'); + el2.setAttribute('transform', currentTrans); + el2.setAttribute('instantiated_by_use', '1'); + el2.removeAttribute('id'); + parentNode = el.parentNode; + parentNode.replaceChild(el2, el); + // some browsers do not shorten nodelist after replaceChild (IE8) + if (nodelist.length === oldLength) { + i++; + } } } - if (toBeParsed) { - return parsedDim; - } - - if (missingViewBox) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - // set a transform for elements that have x y and are inner(only) SVGs - return parsedDim; - } - minX = -parseFloat(viewBoxAttr[1]); - minY = -parseFloat(viewBoxAttr[2]); - viewBoxWidth = parseFloat(viewBoxAttr[3]); - viewBoxHeight = parseFloat(viewBoxAttr[4]); - parsedDim.minX = minX; - parsedDim.minY = minY; - parsedDim.viewBoxWidth = viewBoxWidth; - parsedDim.viewBoxHeight = viewBoxHeight; - if (!missingDimAttr) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - scaleX = parsedDim.width / viewBoxWidth; - scaleY = parsedDim.height / viewBoxHeight; - } - else { - parsedDim.width = viewBoxWidth; - parsedDim.height = viewBoxHeight; - } + // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute + // matches, e.g.: +14.56e-12, etc. + var reViewBoxAttrValue = new RegExp( + '^' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*' + + '$' + ); - // default is to preserve aspect ratio - preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); - if (preserveAspectRatio.alignX !== 'none') { - //translate all container for the effect of Mid, Min, Max - if (preserveAspectRatio.meetOrSlice === 'meet') { - scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); - // calculate additional translation to move the viewbox - } - if (preserveAspectRatio.meetOrSlice === 'slice') { - scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); - // calculate additional translation to move the viewbox + /** + * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements + */ + function applyViewboxTransform(element) { + if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { + return {}; + } + var viewBoxAttr = element.getAttribute('viewBox'), + scaleX = 1, + scaleY = 1, + minX = 0, + minY = 0, + viewBoxWidth, viewBoxHeight, matrix, el, + widthAttr = element.getAttribute('width'), + heightAttr = element.getAttribute('height'), + x = element.getAttribute('x') || 0, + y = element.getAttribute('y') || 0, + preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', + missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), + missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), + toBeParsed = missingViewBox && missingDimAttr, + parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; + + parsedDim.width = 0; + parsedDim.height = 0; + parsedDim.toBeParsed = toBeParsed; + + if (missingViewBox) { + if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + matrix = (element.getAttribute('transform') || '') + translateMatrix; + element.setAttribute('transform', matrix); + element.removeAttribute('x'); + element.removeAttribute('y'); + } + } + + if (toBeParsed) { + return parsedDim; + } + + if (missingViewBox) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + // set a transform for elements that have x y and are inner(only) SVGs + return parsedDim; + } + minX = -parseFloat(viewBoxAttr[1]); + minY = -parseFloat(viewBoxAttr[2]); + viewBoxWidth = parseFloat(viewBoxAttr[3]); + viewBoxHeight = parseFloat(viewBoxAttr[4]); + parsedDim.minX = minX; + parsedDim.minY = minY; + parsedDim.viewBoxWidth = viewBoxWidth; + parsedDim.viewBoxHeight = viewBoxHeight; + if (!missingDimAttr) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + scaleX = parsedDim.width / viewBoxWidth; + scaleY = parsedDim.height / viewBoxHeight; } - widthDiff = parsedDim.width - viewBoxWidth * scaleX; - heightDiff = parsedDim.height - viewBoxHeight * scaleX; - if (preserveAspectRatio.alignX === 'Mid') { - widthDiff /= 2; + else { + parsedDim.width = viewBoxWidth; + parsedDim.height = viewBoxHeight; } - if (preserveAspectRatio.alignY === 'Mid') { - heightDiff /= 2; + + // default is to preserve aspect ratio + preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); + if (preserveAspectRatio.alignX !== 'none') { + //translate all container for the effect of Mid, Min, Max + if (preserveAspectRatio.meetOrSlice === 'meet') { + scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); + // calculate additional translation to move the viewbox + } + if (preserveAspectRatio.meetOrSlice === 'slice') { + scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); + // calculate additional translation to move the viewbox + } + widthDiff = parsedDim.width - viewBoxWidth * scaleX; + heightDiff = parsedDim.height - viewBoxHeight * scaleX; + if (preserveAspectRatio.alignX === 'Mid') { + widthDiff /= 2; + } + if (preserveAspectRatio.alignY === 'Mid') { + heightDiff /= 2; + } + if (preserveAspectRatio.alignX === 'Min') { + widthDiff = 0; + } + if (preserveAspectRatio.alignY === 'Min') { + heightDiff = 0; + } } - if (preserveAspectRatio.alignX === 'Min') { - widthDiff = 0; + + if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { + return parsedDim; } - if (preserveAspectRatio.alignY === 'Min') { - heightDiff = 0; + if ((x || y) && element.parentNode.nodeName !== '#document') { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; } - } - if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { - return parsedDim; - } - if ((x || y) && element.parentNode.nodeName !== '#document') { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; - } - - matrix = translateMatrix + ' matrix(' + scaleX + - ' 0' + - ' 0 ' + - scaleY + ' ' + - (minX * scaleX + widthDiff) + ' ' + - (minY * scaleY + heightDiff) + ') '; - // seems unused. - // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); - if (element.nodeName === 'svg') { - el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); - // element.firstChild != null - while (element.firstChild) { - el.appendChild(element.firstChild); - } - element.appendChild(el); - } - else { - el = element; - el.removeAttribute('x'); - el.removeAttribute('y'); - matrix = el.getAttribute('transform') + matrix; - } - el.setAttribute('transform', matrix); - return parsedDim; - } - - function hasAncestorWithNodeName(element, nodeName) { - while (element && (element = element.parentNode)) { - if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) - && !element.getAttribute('instantiated_by_use')) { - return true; + matrix = translateMatrix + ' matrix(' + scaleX + + ' 0' + + ' 0 ' + + scaleY + ' ' + + (minX * scaleX + widthDiff) + ' ' + + (minY * scaleY + heightDiff) + ') '; + // seems unused. + // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); + if (element.nodeName === 'svg') { + el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); + // element.firstChild != null + while (element.firstChild) { + el.appendChild(element.firstChild); + } + element.appendChild(el); } - } - return false; - } - - /** - * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback - * @static - * @function - * @memberOf fabric - * @param {SVGDocument} doc SVG document to parse - * @param {Function} callback Callback to call when parsing is finished; - * It's being passed an array of elements (parsed from a document). - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - * @param {Object} [parsingOptions] options for parsing document - * @param {String} [parsingOptions.crossOrigin] crossOrigin settings - */ - fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { - if (!doc) { - return; - } - - parseUseDirectives(doc); - - var svgUid = fabric.Object.__uid++, i, len, - options = applyViewboxTransform(doc), - descendants = fabric.util.toArray(doc.getElementsByTagName('*')); - options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; - options.svgUid = svgUid; - - if (descendants.length === 0 && fabric.isLikelyNode) { - // we're likely in node, where "o3-xml" library fails to gEBTN("*") - // https://github.com/ajaxorg/node-o3-xml/issues/21 - descendants = doc.selectNodes('//*[name(.)!="svg"]'); - var arr = []; - for (i = 0, len = descendants.length; i < len; i++) { - arr[i] = descendants[i]; + else { + el = element; + el.removeAttribute('x'); + el.removeAttribute('y'); + matrix = el.getAttribute('transform') + matrix; } - descendants = arr; - } - - var elements = descendants.filter(function(el) { - applyViewboxTransform(el); - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && - !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement - }); - if (!elements || (elements && !elements.length)) { - callback && callback([], {}); - return; + el.setAttribute('transform', matrix); + return parsedDim; } - var clipPaths = { }; - descendants.filter(function(el) { - return el.nodeName.replace('svg:', '') === 'clipPath'; - }).forEach(function(el) { - var id = el.getAttribute('id'); - clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); - }); - }); - fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); - fabric.cssRules[svgUid] = fabric.getCSSRules(doc); - fabric.clipPaths[svgUid] = clipPaths; - // Precedence of rules: style > class > attribute - fabric.parseElements(elements, function(instances, elements) { - if (callback) { - callback(instances, options, elements, descendants); - delete fabric.gradientDefs[svgUid]; - delete fabric.cssRules[svgUid]; - delete fabric.clipPaths[svgUid]; - } - }, clone(options), reviver, parsingOptions); - }; - function recursivelyParseGradientsXlink(doc, gradient) { - var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], - xlinkAttr = 'xlink:href', - xLink = gradient.getAttribute(xlinkAttr).substr(1), - referencedGradient = elementById(doc, xLink); - if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { - recursivelyParseGradientsXlink(doc, referencedGradient); - } - gradientsAttrs.forEach(function(attr) { - if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { - gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); - } - }); - if (!gradient.children.length) { - var referenceClone = referencedGradient.cloneNode(true); - while (referenceClone.firstChild) { - gradient.appendChild(referenceClone.firstChild); + function hasAncestorWithNodeName(element, nodeName) { + while (element && (element = element.parentNode)) { + if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) + && !element.getAttribute('instantiated_by_use')) { + return true; + } } + return false; } - gradient.removeAttribute(xlinkAttr); - } - - var reFontDeclaration = new RegExp( - '(normal|italic)?\\s*(normal|small-caps)?\\s*' + - '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + - fabric.reNum + - '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)'); - extend(fabric, { /** - * Parses a short font declaration, building adding its properties to a style object + * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback * @static * @function * @memberOf fabric - * @param {String} value font declaration - * @param {Object} oStyle definition + * @param {SVGDocument} doc SVG document to parse + * @param {Function} callback Callback to call when parsing is finished; + * It's being passed an array of elements (parsed from a document). + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [parsingOptions] options for parsing document + * @param {String} [parsingOptions.crossOrigin] crossOrigin settings */ - parseFontDeclaration: function(value, oStyle) { - var match = value.match(reFontDeclaration); - - if (!match) { + fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { + if (!doc) { return; } - var fontStyle = match[1], - // font variant is not used - // fontVariant = match[2], - fontWeight = match[3], - fontSize = match[4], - lineHeight = match[5], - fontFamily = match[6]; - if (fontStyle) { - oStyle.fontStyle = fontStyle; - } - if (fontWeight) { - oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); - } - if (fontSize) { - oStyle.fontSize = parseUnit(fontSize); - } - if (fontFamily) { - oStyle.fontFamily = fontFamily; - } - if (lineHeight) { - oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; - } - }, + parseUseDirectives(doc); - /** - * Parses an SVG document, returning all of the gradient declarations found in it - * @static - * @function - * @memberOf fabric - * @param {SVGDocument} doc SVG document to parse - * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element - */ - getGradientDefs: function(doc) { - var tagArray = [ - 'linearGradient', - 'radialGradient', - 'svg:linearGradient', - 'svg:radialGradient'], - elList = _getMultipleNodes(doc, tagArray), - el, j = 0, gradientDefs = { }; - j = elList.length; - while (j--) { - el = elList[j]; - if (el.getAttribute('xlink:href')) { - recursivelyParseGradientsXlink(doc, el); + var svgUid = fabric.Object.__uid++, i, len, + options = applyViewboxTransform(doc), + descendants = fabric.util.toArray(doc.getElementsByTagName('*')); + options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; + options.svgUid = svgUid; + + if (descendants.length === 0 && fabric.isLikelyNode) { + // we're likely in node, where "o3-xml" library fails to gEBTN("*") + // https://github.com/ajaxorg/node-o3-xml/issues/21 + descendants = doc.selectNodes('//*[name(.)!="svg"]'); + var arr = []; + for (i = 0, len = descendants.length; i < len; i++) { + arr[i] = descendants[i]; } - gradientDefs[el.getAttribute('id')] = el; + descendants = arr; } - return gradientDefs; - }, - - /** - * Returns an object of attributes' name/value, given element and an array of attribute names; - * Parses parent "g" nodes recursively upwards. - * @static - * @memberOf fabric - * @param {DOMElement} element Element to parse - * @param {Array} attributes Array of attributes to parse - * @return {Object} object containing parsed attributes' names/values - */ - parseAttributes: function(element, attributes, svgUid) { - if (!element) { + var elements = descendants.filter(function(el) { + applyViewboxTransform(el); + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && + !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement + }); + if (!elements || (elements && !elements.length)) { + callback && callback([], {}); return; } + var clipPaths = { }; + descendants.filter(function(el) { + return el.nodeName.replace('svg:', '') === 'clipPath'; + }).forEach(function(el) { + var id = el.getAttribute('id'); + clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); + }); + }); + fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); + fabric.cssRules[svgUid] = fabric.getCSSRules(doc); + fabric.clipPaths[svgUid] = clipPaths; + // Precedence of rules: style > class > attribute + fabric.parseElements(elements, function(instances, elements) { + if (callback) { + callback(instances, options, elements, descendants); + delete fabric.gradientDefs[svgUid]; + delete fabric.cssRules[svgUid]; + delete fabric.clipPaths[svgUid]; + } + }, Object.assign({}, options), reviver, parsingOptions); + }; - var value, - parentAttributes = { }, - fontSize, parentFontSize; - - if (typeof svgUid === 'undefined') { - svgUid = element.getAttribute('svgUid'); - } - // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards - if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { - parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); + function recursivelyParseGradientsXlink(doc, gradient) { + var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], + xlinkAttr = 'xlink:href', + xLink = gradient.getAttribute(xlinkAttr).slice(1), + referencedGradient = elementById(doc, xLink); + if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { + recursivelyParseGradientsXlink(doc, referencedGradient); } - - var ownAttributes = attributes.reduce(function(memo, attr) { - value = element.getAttribute(attr); - if (value) { // eslint-disable-line - memo[attr] = value; + gradientsAttrs.forEach(function(attr) { + if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { + gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); + } + }); + if (!gradient.children.length) { + var referenceClone = referencedGradient.cloneNode(true); + while (referenceClone.firstChild) { + gradient.appendChild(referenceClone.firstChild); } - return memo; - }, { }); - // add values parsed from style, which take precedence over attributes - // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) - var cssAttrs = extend( - getGlobalStylesForElement(element, svgUid), - fabric.parseStyleAttribute(element) - ); - ownAttributes = extend( - ownAttributes, - cssAttrs - ); - if (cssAttrs[cPath]) { - element.setAttribute(cPath, cssAttrs[cPath]); - } - fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; - if (ownAttributes[fSize]) { - // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. - ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); - } - - var normalizedAttr, normalizedValue, normalizedStyle = {}; - for (var attr in ownAttributes) { - normalizedAttr = normalizeAttr(attr); - normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); - normalizedStyle[normalizedAttr] = normalizedValue; - } - if (normalizedStyle && normalizedStyle.font) { - fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); } - var mergedAttrs = extend(parentAttributes, normalizedStyle); - return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); - }, - - /** - * Transforms an array of svg elements to corresponding fabric.* instances - * @static - * @memberOf fabric - * @param {Array} elements Array of elements to parse - * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements) - * @param {Object} [options] Options object - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - */ - parseElements: function(elements, callback, options, reviver, parsingOptions) { - new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); - }, + gradient.removeAttribute(xlinkAttr); + } - /** - * Parses "style" attribute, retuning an object with values - * @static - * @memberOf fabric - * @param {SVGElement} element Element to parse - * @return {Object} Objects with values parsed from style attribute of an element - */ - parseStyleAttribute: function(element) { - var oStyle = { }, - style = element.getAttribute('style'); + var reFontDeclaration = new RegExp( + '(normal|italic)?\\s*(normal|small-caps)?\\s*' + + '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + + fabric.reNum + + '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)'); - if (!style) { - return oStyle; - } + fabric.util.object.extend(fabric, { + /** + * Parses a short font declaration, building adding its properties to a style object + * @static + * @function + * @memberOf fabric + * @param {String} value font declaration + * @param {Object} oStyle definition + */ + parseFontDeclaration: function(value, oStyle) { + var match = value.match(reFontDeclaration); - if (typeof style === 'string') { - parseStyleString(style, oStyle); - } - else { - parseStyleObject(style, oStyle); - } + if (!match) { + return; + } + var fontStyle = match[1], + // font variant is not used + // fontVariant = match[2], + fontWeight = match[3], + fontSize = match[4], + lineHeight = match[5], + fontFamily = match[6]; - return oStyle; - }, + if (fontStyle) { + oStyle.fontStyle = fontStyle; + } + if (fontWeight) { + oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); + } + if (fontSize) { + oStyle.fontSize = parseUnit(fontSize); + } + if (fontFamily) { + oStyle.fontFamily = fontFamily; + } + if (lineHeight) { + oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; + } + }, - /** - * Parses "points" attribute, returning an array of values - * @static - * @memberOf fabric - * @param {String} points points attribute string - * @return {Array} array of points - */ - parsePointsAttribute: function(points) { + /** + * Parses an SVG document, returning all of the gradient declarations found in it + * @static + * @function + * @memberOf fabric + * @param {SVGDocument} doc SVG document to parse + * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element + */ + getGradientDefs: function(doc) { + var tagArray = [ + 'linearGradient', + 'radialGradient', + 'svg:linearGradient', + 'svg:radialGradient'], + elList = _getMultipleNodes(doc, tagArray), + el, j = 0, gradientDefs = { }; + j = elList.length; + while (j--) { + el = elList[j]; + if (el.getAttribute('xlink:href')) { + recursivelyParseGradientsXlink(doc, el); + } + gradientDefs[el.getAttribute('id')] = el; + } + return gradientDefs; + }, - // points attribute is required and must not be empty - if (!points) { - return null; - } + /** + * Returns an object of attributes' name/value, given element and an array of attribute names; + * Parses parent "g" nodes recursively upwards. + * @static + * @memberOf fabric + * @param {DOMElement} element Element to parse + * @param {Array} attributes Array of attributes to parse + * @return {Object} object containing parsed attributes' names/values + */ + parseAttributes: function(element, attributes, svgUid) { - // replace commas with whitespace and remove bookending whitespace - points = points.replace(/,/g, ' ').trim(); + if (!element) { + return; + } - points = points.split(/\s+/); - var parsedPoints = [], i, len; + var value, + parentAttributes = { }, + fontSize, parentFontSize; - for (i = 0, len = points.length; i < len; i += 2) { - parsedPoints.push({ - x: parseFloat(points[i]), - y: parseFloat(points[i + 1]) - }); - } + if (typeof svgUid === 'undefined') { + svgUid = element.getAttribute('svgUid'); + } + // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards + if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { + parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); + } - // odd number of points is an error - // if (parsedPoints.length % 2 !== 0) { - // return null; - // } + var ownAttributes = attributes.reduce(function(memo, attr) { + value = element.getAttribute(attr); + if (value) { // eslint-disable-line + memo[attr] = value; + } + return memo; + }, { }); + // add values parsed from style, which take precedence over attributes + // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) + var cssAttrs = Object.assign( + getGlobalStylesForElement(element, svgUid), + fabric.parseStyleAttribute(element) + ); + ownAttributes = Object.assign( + ownAttributes, + cssAttrs + ); + if (cssAttrs[cPath]) { + element.setAttribute(cPath, cssAttrs[cPath]); + } + fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; + if (ownAttributes[fSize]) { + // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. + ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); + } - return parsedPoints; - }, + var normalizedAttr, normalizedValue, normalizedStyle = {}; + for (var attr in ownAttributes) { + normalizedAttr = normalizeAttr(attr); + normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); + normalizedStyle[normalizedAttr] = normalizedValue; + } + if (normalizedStyle && normalizedStyle.font) { + fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); + } + var mergedAttrs = Object.assign(parentAttributes, normalizedStyle); + return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); + }, - /** - * Returns CSS rules for a given SVG document - * @static - * @function - * @memberOf fabric - * @param {SVGDocument} doc SVG document to parse - * @return {Object} CSS rules of this document - */ - getCSSRules: function(doc) { - var styles = doc.getElementsByTagName('style'), i, len, - allRules = { }, rules; + /** + * Transforms an array of svg elements to corresponding fabric.* instances + * @static + * @memberOf fabric + * @param {Array} elements Array of elements to parse + * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements) + * @param {Object} [options] Options object + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + */ + parseElements: function(elements, callback, options, reviver, parsingOptions) { + new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); + }, - // very crude parsing of style contents - for (i = 0, len = styles.length; i < len; i++) { - var styleContents = styles[i].textContent; + /** + * Parses "style" attribute, retuning an object with values + * @static + * @memberOf fabric + * @param {SVGElement} element Element to parse + * @return {Object} Objects with values parsed from style attribute of an element + */ + parseStyleAttribute: function(element) { + var oStyle = { }, + style = element.getAttribute('style'); - // remove comments - styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); - if (styleContents.trim() === '') { - continue; + if (!style) { + return oStyle; } - // recovers all the rule in this form `body { style code... }` - // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); - rules = styleContents.split('}'); - // remove empty rules. - rules = rules.filter(function(rule) { return rule.trim(); }); - // at this point we have hopefully an array of rules `body { style code... ` - // eslint-disable-next-line no-loop-func - rules.forEach(function(rule) { - - var match = rule.split('{'), - ruleObj = { }, declaration = match[1].trim(), - propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); - - for (i = 0, len = propertyValuePairs.length; i < len; i++) { - var pair = propertyValuePairs[i].split(':'), - property = pair[0].trim(), - value = pair[1].trim(); - ruleObj[property] = value; - } - rule = match[0].trim(); - rule.split(',').forEach(function(_rule) { - _rule = _rule.replace(/^svg/i, '').trim(); - if (_rule === '') { - return; - } - if (allRules[_rule]) { - fabric.util.object.extend(allRules[_rule], ruleObj); - } - else { - allRules[_rule] = fabric.util.object.clone(ruleObj); - } - }); - }); - } - return allRules; - }, - /** - * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. - * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy) - * @memberOf fabric - * @param {String} url - * @param {Function} callback - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - * @param {Object} [options] Object containing options for parsing - * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources - */ - loadSVGFromURL: function(url, callback, reviver, options) { + if (typeof style === 'string') { + parseStyleString(style, oStyle); + } + else { + parseStyleObject(style, oStyle); + } - url = url.replace(/^\n\s*/, '').trim(); - new fabric.util.request(url, { - method: 'get', - onComplete: onComplete - }); + return oStyle; + }, - function onComplete(r) { + /** + * Parses "points" attribute, returning an array of values + * @static + * @memberOf fabric + * @param {String} points points attribute string + * @return {Array} array of points + */ + parsePointsAttribute: function(points) { - var xml = r.responseXML; - if (!xml || !xml.documentElement) { - callback && callback(null); - return false; + // points attribute is required and must not be empty + if (!points) { + return null; } - fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { - callback && callback(results, _options, elements, allElements); - }, reviver, options); - } - }, + // replace commas with whitespace and remove bookending whitespace + points = points.replace(/,/g, ' ').trim(); - /** - * Takes string corresponding to an SVG document, and parses it into a set of fabric objects - * @memberOf fabric - * @param {String} string - * @param {Function} callback - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - * @param {Object} [options] Object containing options for parsing - * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources - */ - loadSVGFromString: function(string, callback, reviver, options) { - var parser = new fabric.window.DOMParser(), - doc = parser.parseFromString(string.trim(), 'text/xml'); - fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { - callback(results, _options, elements, allElements); - }, reviver, options); - } - }); - -})(typeof exports !== 'undefined' ? exports : this); - - -fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) { - this.elements = elements; - this.callback = callback; - this.options = options; - this.reviver = reviver; - this.svgUid = (options && options.svgUid) || 0; - this.parsingOptions = parsingOptions; - this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g; - this.doc = doc; -}; - -(function(proto) { - proto.parse = function() { - this.instances = new Array(this.elements.length); - this.numElements = this.elements.length; - this.createObjects(); - }; + points = points.split(/\s+/); + var parsedPoints = [], i, len; - proto.createObjects = function() { - var _this = this; - this.elements.forEach(function(element, i) { - element.setAttribute('svgUid', _this.svgUid); - _this.createObject(element, i); - }); - }; + for (i = 0, len = points.length; i < len; i += 2) { + parsedPoints.push({ + x: parseFloat(points[i]), + y: parseFloat(points[i + 1]) + }); + } - proto.findTag = function(el) { - return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))]; - }; + // odd number of points is an error + // if (parsedPoints.length % 2 !== 0) { + // return null; + // } - proto.createObject = function(el, index) { - var klass = this.findTag(el); - if (klass && klass.fromElement) { - try { - klass.fromElement(el, this.createCallback(index, el), this.options); - } - catch (err) { - fabric.log(err); - } - } - else { - this.checkIfDone(); - } - }; - - proto.createCallback = function(index, el) { - var _this = this; - return function(obj) { - var _options; - _this.resolveGradient(obj, el, 'fill'); - _this.resolveGradient(obj, el, 'stroke'); - if (obj instanceof fabric.Image && obj._originalElement) { - _options = obj.parsePreserveAspectRatioAttribute(el); - } - obj._removeTransformMatrix(_options); - _this.resolveClipPath(obj, el); - _this.reviver && _this.reviver(el, obj); - _this.instances[index] = obj; - _this.checkIfDone(); - }; - }; + return parsedPoints; + }, - proto.extractPropertyDefinition = function(obj, property, storage) { - var value = obj[property], regex = this.regexUrl; - if (!regex.test(value)) { - return; - } - regex.lastIndex = 0; - var id = regex.exec(value)[1]; - regex.lastIndex = 0; - return fabric[storage][this.svgUid][id]; - }; + /** + * Returns CSS rules for a given SVG document + * @static + * @function + * @memberOf fabric + * @param {SVGDocument} doc SVG document to parse + * @return {Object} CSS rules of this document + */ + getCSSRules: function(doc) { + var styles = doc.getElementsByTagName('style'), i, len, + allRules = { }, rules; - proto.resolveGradient = function(obj, el, property) { - var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs'); - if (gradientDef) { - var opacityAttr = el.getAttribute(property + '-opacity'); - var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options); - obj.set(property, gradient); - } - }; + // very crude parsing of style contents + for (i = 0, len = styles.length; i < len; i++) { + var styleContents = styles[i].textContent; - proto.createClipPathCallback = function(obj, container) { - return function(_newObj) { - _newObj._removeTransformMatrix(); - _newObj.fillRule = _newObj.clipRule; - container.push(_newObj); - }; - }; + // remove comments + styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); + if (styleContents.trim() === '') { + continue; + } + // recovers all the rule in this form `body { style code... }` + // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); + rules = styleContents.split('}'); + // remove empty rules. + rules = rules.filter(function(rule) { return rule.trim(); }); + // at this point we have hopefully an array of rules `body { style code... ` + // eslint-disable-next-line no-loop-func + rules.forEach(function(rule) { + + var match = rule.split('{'), + ruleObj = { }, declaration = match[1].trim(), + propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); + + for (i = 0, len = propertyValuePairs.length; i < len; i++) { + var pair = propertyValuePairs[i].split(':'), + property = pair[0].trim(), + value = pair[1].trim(); + ruleObj[property] = value; + } + rule = match[0].trim(); + rule.split(',').forEach(function(_rule) { + _rule = _rule.replace(/^svg/i, '').trim(); + if (_rule === '') { + return; + } + if (allRules[_rule]) { + Object.assign(allRules[_rule], ruleObj); + } + else { + allRules[_rule] = Object.assign({}, ruleObj); + } + }); + }); + } + return allRules; + }, - proto.resolveClipPath = function(obj, usingElement) { - var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'), - element, klass, objTransformInv, container, gTransform, options; - if (clipPath) { - container = []; - objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); - // move the clipPath tag as sibling to the real element that is using it - var clipPathTag = clipPath[0].parentNode; - var clipPathOwner = usingElement; - while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) { - clipPathOwner = clipPathOwner.parentNode; - } - clipPathOwner.parentNode.appendChild(clipPathTag); - for (var i = 0; i < clipPath.length; i++) { - element = clipPath[i]; - klass = this.findTag(element); - klass.fromElement( - element, - this.createClipPathCallback(obj, container), - this.options - ); - } - if (container.length === 1) { - clipPath = container[0]; - } - else { - clipPath = new fabric.Group(container); - } - gTransform = fabric.util.multiplyTransformMatrices( - objTransformInv, - clipPath.calcTransformMatrix() - ); - if (clipPath.clipPath) { - this.resolveClipPath(clipPath, clipPathOwner); - } - var options = fabric.util.qrDecompose(gTransform); - clipPath.flipX = false; - clipPath.flipY = false; - clipPath.set('scaleX', options.scaleX); - clipPath.set('scaleY', options.scaleY); - clipPath.angle = options.angle; - clipPath.skewX = options.skewX; - clipPath.skewY = 0; - clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center'); - obj.clipPath = clipPath; - } - else { - // if clip-path does not resolve to any element, delete the property. - delete obj.clipPath; - } - }; + /** + * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. + * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy) + * @memberOf fabric + * @param {String} url + * @param {Function} callback + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [options] Object containing options for parsing + * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources + */ + loadSVGFromURL: function(url, callback, reviver, options) { - proto.checkIfDone = function() { - if (--this.numElements === 0) { - this.instances = this.instances.filter(function(el) { - // eslint-disable-next-line no-eq-null, eqeqeq - return el != null; - }); - this.callback(this.instances, this.elements); - } - }; -})(fabric.ElementsParser.prototype); + url = url.replace(/^\n\s*/, '').trim(); + new fabric.util.request(url, { + method: 'get', + onComplete: onComplete + }); + function onComplete(r) { -(function(global) { + var xml = r.responseXML; + if (!xml || !xml.documentElement) { + callback && callback(null); + return false; + } - 'use strict'; + fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { + callback && callback(results, _options, elements, allElements); + }, reviver, options); + } + }, - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ + /** + * Takes string corresponding to an SVG document, and parses it into a set of fabric objects + * @memberOf fabric + * @param {String} string + * @param {Function} callback + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [options] Object containing options for parsing + * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources + */ + loadSVGFromString: function(string, callback, reviver, options) { + var parser = new fabric.window.DOMParser(), + doc = parser.parseFromString(string.trim(), 'text/xml'); + fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { + callback(results, _options, elements, allElements); + }, reviver, options); + } + }); - var fabric = global.fabric || (global.fabric = { }); + })(typeof exports !== 'undefined' ? exports : window); - if (fabric.Point) { - fabric.warn('fabric.Point is already defined'); - return; - } + (function(global) { + var fabric = global.fabric; - fabric.Point = Point; + fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) { + this.elements = elements; + this.callback = callback; + this.options = options; + this.reviver = reviver; + this.svgUid = (options && options.svgUid) || 0; + this.parsingOptions = parsingOptions; + this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g; + this.doc = doc; + }; - /** - * Point class - * @class fabric.Point - * @memberOf fabric - * @constructor - * @param {Number} x - * @param {Number} y - * @return {fabric.Point} thisArg - */ - function Point(x, y) { - this.x = x; - this.y = y; - } + (function(proto) { + proto.parse = function() { + this.instances = new Array(this.elements.length); + this.numElements = this.elements.length; + this.createObjects(); + }; - Point.prototype = /** @lends fabric.Point.prototype */ { + proto.createObjects = function() { + var _this = this; + this.elements.forEach(function(element, i) { + element.setAttribute('svgUid', _this.svgUid); + _this.createObject(element, i); + }); + }; - type: 'point', + proto.findTag = function(el) { + return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))]; + }; - constructor: Point, + proto.createObject = function(el, index) { + var klass = this.findTag(el); + if (klass && klass.fromElement) { + try { + klass.fromElement(el, this.createCallback(index, el), this.options); + } + catch (err) { + fabric.log(err); + } + } + else { + this.checkIfDone(); + } + }; - /** - * Adds another point to this one and returns another one - * @param {fabric.Point} that - * @return {fabric.Point} new Point instance with added values - */ - add: function (that) { - return new Point(this.x + that.x, this.y + that.y); - }, + proto.createCallback = function(index, el) { + var _this = this; + return function(obj) { + var _options; + _this.resolveGradient(obj, el, 'fill'); + _this.resolveGradient(obj, el, 'stroke'); + if (obj instanceof fabric.Image && obj._originalElement) { + _options = obj.parsePreserveAspectRatioAttribute(el); + } + obj._removeTransformMatrix(_options); + _this.resolveClipPath(obj, el); + _this.reviver && _this.reviver(el, obj); + _this.instances[index] = obj; + _this.checkIfDone(); + }; + }; - /** - * Adds another point to this one - * @param {fabric.Point} that - * @return {fabric.Point} thisArg - * @chainable - */ - addEquals: function (that) { - this.x += that.x; - this.y += that.y; - return this; - }, + proto.extractPropertyDefinition = function(obj, property, storage) { + var value = obj[property], regex = this.regexUrl; + if (!regex.test(value)) { + return; + } + regex.lastIndex = 0; + var id = regex.exec(value)[1]; + regex.lastIndex = 0; + return fabric[storage][this.svgUid][id]; + }; - /** - * Adds value to this point and returns a new one - * @param {Number} scalar - * @return {fabric.Point} new Point with added value - */ - scalarAdd: function (scalar) { - return new Point(this.x + scalar, this.y + scalar); - }, + proto.resolveGradient = function(obj, el, property) { + var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs'); + if (gradientDef) { + var opacityAttr = el.getAttribute(property + '-opacity'); + var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options); + obj.set(property, gradient); + } + }; - /** - * Adds value to this point - * @param {Number} scalar - * @return {fabric.Point} thisArg - * @chainable - */ - scalarAddEquals: function (scalar) { - this.x += scalar; - this.y += scalar; - return this; - }, + proto.createClipPathCallback = function(obj, container) { + return function(_newObj) { + _newObj._removeTransformMatrix(); + _newObj.fillRule = _newObj.clipRule; + container.push(_newObj); + }; + }; - /** - * Subtracts another point from this point and returns a new one - * @param {fabric.Point} that - * @return {fabric.Point} new Point object with subtracted values - */ - subtract: function (that) { - return new Point(this.x - that.x, this.y - that.y); - }, + proto.resolveClipPath = function(obj, usingElement) { + var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'), + element, klass, objTransformInv, container, gTransform, options; + if (clipPath) { + container = []; + objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); + // move the clipPath tag as sibling to the real element that is using it + var clipPathTag = clipPath[0].parentNode; + var clipPathOwner = usingElement; + while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) { + clipPathOwner = clipPathOwner.parentNode; + } + clipPathOwner.parentNode.appendChild(clipPathTag); + for (var i = 0; i < clipPath.length; i++) { + element = clipPath[i]; + klass = this.findTag(element); + klass.fromElement( + element, + this.createClipPathCallback(obj, container), + this.options + ); + } + if (container.length === 1) { + clipPath = container[0]; + } + else { + clipPath = new fabric.Group(container); + } + gTransform = fabric.util.multiplyTransformMatrices( + objTransformInv, + clipPath.calcTransformMatrix() + ); + if (clipPath.clipPath) { + this.resolveClipPath(clipPath, clipPathOwner); + } + var options = fabric.util.qrDecompose(gTransform); + clipPath.flipX = false; + clipPath.flipY = false; + clipPath.set('scaleX', options.scaleX); + clipPath.set('scaleY', options.scaleY); + clipPath.angle = options.angle; + clipPath.skewX = options.skewX; + clipPath.skewY = 0; + clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center'); + obj.clipPath = clipPath; + } + else { + // if clip-path does not resolve to any element, delete the property. + delete obj.clipPath; + } + }; - /** - * Subtracts another point from this point - * @param {fabric.Point} that - * @return {fabric.Point} thisArg - * @chainable - */ - subtractEquals: function (that) { - this.x -= that.x; - this.y -= that.y; - return this; - }, + proto.checkIfDone = function() { + if (--this.numElements === 0) { + this.instances = this.instances.filter(function(el) { + // eslint-disable-next-line no-eq-null, eqeqeq + return el != null; + }); + this.callback(this.instances, this.elements); + } + }; + })(fabric.ElementsParser.prototype); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Subtracts value from this point and returns a new one - * @param {Number} scalar - * @return {fabric.Point} - */ - scalarSubtract: function (scalar) { - return new Point(this.x - scalar, this.y - scalar); - }, + (function(global) { + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - /** - * Subtracts value from this point - * @param {Number} scalar - * @return {fabric.Point} thisArg - * @chainable - */ - scalarSubtractEquals: function (scalar) { - this.x -= scalar; - this.y -= scalar; - return this; - }, + var fabric = global.fabric || (global.fabric = { }); - /** - * Multiplies this point by a value and returns a new one - * TODO: rename in scalarMultiply in 2.0 - * @param {Number} scalar - * @return {fabric.Point} - */ - multiply: function (scalar) { - return new Point(this.x * scalar, this.y * scalar); - }, + fabric.Point = Point; /** - * Multiplies this point by a value - * TODO: rename in scalarMultiplyEquals in 2.0 - * @param {Number} scalar + * Point class + * @class fabric.Point + * @memberOf fabric + * @constructor + * @param {Number} x + * @param {Number} y * @return {fabric.Point} thisArg - * @chainable - */ - multiplyEquals: function (scalar) { - this.x *= scalar; - this.y *= scalar; - return this; - }, - - /** - * Divides this point by a value and returns a new one - * TODO: rename in scalarDivide in 2.0 - * @param {Number} scalar - * @return {fabric.Point} */ - divide: function (scalar) { - return new Point(this.x / scalar, this.y / scalar); - }, + function Point(x, y) { + this.x = x || 0; + this.y = y || 0; + } - /** - * Divides this point by a value - * TODO: rename in scalarDivideEquals in 2.0 - * @param {Number} scalar - * @return {fabric.Point} thisArg - * @chainable - */ - divideEquals: function (scalar) { - this.x /= scalar; - this.y /= scalar; - return this; - }, + Point.prototype = /** @lends fabric.Point.prototype */ { - /** - * Returns true if this point is equal to another one - * @param {fabric.Point} that - * @return {Boolean} - */ - eq: function (that) { - return (this.x === that.x && this.y === that.y); - }, + type: 'point', - /** - * Returns true if this point is less than another one - * @param {fabric.Point} that - * @return {Boolean} - */ - lt: function (that) { - return (this.x < that.x && this.y < that.y); - }, + constructor: Point, - /** - * Returns true if this point is less than or equal to another one - * @param {fabric.Point} that - * @return {Boolean} - */ - lte: function (that) { - return (this.x <= that.x && this.y <= that.y); - }, + /** + * Adds another point to this one and returns another one + * @param {fabric.Point} that + * @return {fabric.Point} new Point instance with added values + */ + add: function (that) { + return new Point(this.x + that.x, this.y + that.y); + }, - /** + /** + * Adds another point to this one + * @param {fabric.Point} that + * @return {fabric.Point} thisArg + * @chainable + */ + addEquals: function (that) { + this.x += that.x; + this.y += that.y; + return this; + }, - * Returns true if this point is greater another one - * @param {fabric.Point} that - * @return {Boolean} - */ - gt: function (that) { - return (this.x > that.x && this.y > that.y); - }, + /** + * Adds value to this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} new Point with added value + */ + scalarAdd: function (scalar) { + return new Point(this.x + scalar, this.y + scalar); + }, - /** - * Returns true if this point is greater than or equal to another one - * @param {fabric.Point} that - * @return {Boolean} - */ - gte: function (that) { - return (this.x >= that.x && this.y >= that.y); - }, + /** + * Adds value to this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarAddEquals: function (scalar) { + this.x += scalar; + this.y += scalar; + return this; + }, - /** - * Returns new point which is the result of linear interpolation with this one and another one - * @param {fabric.Point} that - * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 - * @return {fabric.Point} - */ - lerp: function (that, t) { - if (typeof t === 'undefined') { - t = 0.5; - } - t = Math.max(Math.min(1, t), 0); - return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); - }, + /** + * Subtracts another point from this point and returns a new one + * @param {fabric.Point} that + * @return {fabric.Point} new Point object with subtracted values + */ + subtract: function (that) { + return new Point(this.x - that.x, this.y - that.y); + }, - /** - * Returns distance from this point and another one - * @param {fabric.Point} that - * @return {Number} - */ - distanceFrom: function (that) { - var dx = this.x - that.x, - dy = this.y - that.y; - return Math.sqrt(dx * dx + dy * dy); - }, + /** + * Subtracts another point from this point + * @param {fabric.Point} that + * @return {fabric.Point} thisArg + * @chainable + */ + subtractEquals: function (that) { + this.x -= that.x; + this.y -= that.y; + return this; + }, - /** - * Returns the point between this point and another one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - midPointFrom: function (that) { - return this.lerp(that); - }, + /** + * Subtracts value from this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} + */ + scalarSubtract: function (scalar) { + return new Point(this.x - scalar, this.y - scalar); + }, - /** - * Returns a new point which is the min of this and another one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - min: function (that) { - return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); - }, + /** + * Subtracts value from this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarSubtractEquals: function (scalar) { + this.x -= scalar; + this.y -= scalar; + return this; + }, - /** - * Returns a new point which is the max of this and another one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - max: function (that) { - return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); - }, + /** + * Multiplies this point by another value and returns a new one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + multiply: function (that) { + return new Point(this.x * that.x, this.y * that.y); + }, - /** - * Returns string representation of this point - * @return {String} - */ - toString: function () { - return this.x + ',' + this.y; - }, + /** + * Multiplies this point by a value and returns a new one + * @param {Number} scalar + * @return {fabric.Point} + */ + scalarMultiply: function (scalar) { + return new Point(this.x * scalar, this.y * scalar); + }, - /** - * Sets x/y of this point - * @param {Number} x - * @param {Number} y - * @chainable - */ - setXY: function (x, y) { - this.x = x; - this.y = y; - return this; - }, + /** + * Multiplies this point by a value + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarMultiplyEquals: function (scalar) { + this.x *= scalar; + this.y *= scalar; + return this; + }, - /** - * Sets x of this point - * @param {Number} x - * @chainable - */ - setX: function (x) { - this.x = x; - return this; - }, + /** + * Divides this point by another and returns a new one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + divide: function (that) { + return new Point(this.x / that.x, this.y / that.y); + }, - /** - * Sets y of this point - * @param {Number} y - * @chainable - */ - setY: function (y) { - this.y = y; - return this; - }, + /** + * Divides this point by a value and returns a new one + * @param {Number} scalar + * @return {fabric.Point} + */ + scalarDivide: function (scalar) { + return new Point(this.x / scalar, this.y / scalar); + }, - /** - * Sets x/y of this point from another point - * @param {fabric.Point} that - * @chainable - */ - setFromPoint: function (that) { - this.x = that.x; - this.y = that.y; - return this; - }, + /** + * Divides this point by a value + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarDivideEquals: function (scalar) { + this.x /= scalar; + this.y /= scalar; + return this; + }, - /** - * Swaps x/y of this point and another point - * @param {fabric.Point} that - */ - swap: function (that) { - var x = this.x, - y = this.y; - this.x = that.x; - this.y = that.y; - that.x = x; - that.y = y; - }, + /** + * Returns true if this point is equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + eq: function (that) { + return (this.x === that.x && this.y === that.y); + }, - /** - * return a cloned instance of the point - * @return {fabric.Point} - */ - clone: function () { - return new Point(this.x, this.y); - } - }; + /** + * Returns true if this point is less than another one + * @param {fabric.Point} that + * @return {Boolean} + */ + lt: function (that) { + return (this.x < that.x && this.y < that.y); + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * Returns true if this point is less than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + lte: function (that) { + return (this.x <= that.x && this.y <= that.y); + }, + /** -(function(global) { + * Returns true if this point is greater another one + * @param {fabric.Point} that + * @return {Boolean} + */ + gt: function (that) { + return (this.x > that.x && this.y > that.y); + }, - 'use strict'; + /** + * Returns true if this point is greater than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + gte: function (that) { + return (this.x >= that.x && this.y >= that.y); + }, - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - var fabric = global.fabric || (global.fabric = { }); + /** + * Returns new point which is the result of linear interpolation with this one and another one + * @param {fabric.Point} that + * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 + * @return {fabric.Point} + */ + lerp: function (that, t) { + if (typeof t === 'undefined') { + t = 0.5; + } + t = Math.max(Math.min(1, t), 0); + return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); + }, - if (fabric.Intersection) { - fabric.warn('fabric.Intersection is already defined'); - return; - } + /** + * Returns distance from this point and another one + * @param {fabric.Point} that + * @return {Number} + */ + distanceFrom: function (that) { + var dx = this.x - that.x, + dy = this.y - that.y; + return Math.sqrt(dx * dx + dy * dy); + }, - /** - * Intersection class - * @class fabric.Intersection - * @memberOf fabric - * @constructor - */ - function Intersection(status) { - this.status = status; - this.points = []; - } + /** + * Returns the point between this point and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + midPointFrom: function (that) { + return this.lerp(that); + }, - fabric.Intersection = Intersection; + /** + * Returns a new point which is the min of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + min: function (that) { + return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); + }, - fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { + /** + * Returns a new point which is the max of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + max: function (that) { + return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); + }, - constructor: Intersection, + /** + * Returns string representation of this point + * @return {String} + */ + toString: function () { + return this.x + ',' + this.y; + }, - /** - * Appends a point to intersection - * @param {fabric.Point} point - * @return {fabric.Intersection} thisArg - * @chainable - */ - appendPoint: function (point) { - this.points.push(point); - return this; - }, + /** + * Sets x/y of this point + * @param {Number} x + * @param {Number} y + * @chainable + */ + setXY: function (x, y) { + this.x = x; + this.y = y; + return this; + }, + + /** + * Sets x of this point + * @param {Number} x + * @chainable + */ + setX: function (x) { + this.x = x; + return this; + }, + + /** + * Sets y of this point + * @param {Number} y + * @chainable + */ + setY: function (y) { + this.y = y; + return this; + }, + + /** + * Sets x/y of this point from another point + * @param {fabric.Point} that + * @chainable + */ + setFromPoint: function (that) { + this.x = that.x; + this.y = that.y; + return this; + }, + + /** + * Swaps x/y of this point and another point + * @param {fabric.Point} that + */ + swap: function (that) { + var x = this.x, + y = this.y; + this.x = that.x; + this.y = that.y; + that.x = x; + that.y = y; + }, + + /** + * return a cloned instance of the point + * @return {fabric.Point} + */ + clone: function () { + return new Point(this.x, this.y); + } + }; + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ + var fabric = global.fabric || (global.fabric = { }); /** - * Appends points to intersection - * @param {Array} points - * @return {fabric.Intersection} thisArg - * @chainable + * Intersection class + * @class fabric.Intersection + * @memberOf fabric + * @constructor */ - appendPoints: function (points) { - this.points = this.points.concat(points); - return this; + function Intersection(status) { + this.status = status; + this.points = []; } - }; - /** - * Checks if one line intersects another - * TODO: rename in intersectSegmentSegment - * @static - * @param {fabric.Point} a1 - * @param {fabric.Point} a2 - * @param {fabric.Point} b1 - * @param {fabric.Point} b2 - * @return {fabric.Intersection} - */ - fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { - var result, - uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), - ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), - uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); - if (uB !== 0) { - var ua = uaT / uB, - ub = ubT / uB; - if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { - result = new Intersection('Intersection'); - result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); + fabric.Intersection = Intersection; + + fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { + + constructor: Intersection, + + /** + * Appends a point to intersection + * @param {fabric.Point} point + * @return {fabric.Intersection} thisArg + * @chainable + */ + appendPoint: function (point) { + this.points.push(point); + return this; + }, + + /** + * Appends points to intersection + * @param {Array} points + * @return {fabric.Intersection} thisArg + * @chainable + */ + appendPoints: function (points) { + this.points = this.points.concat(points); + return this; + } + }; + + /** + * Checks if one line intersects another + * TODO: rename in intersectSegmentSegment + * @static + * @param {fabric.Point} a1 + * @param {fabric.Point} a2 + * @param {fabric.Point} b1 + * @param {fabric.Point} b2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { + var result, + uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), + ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), + uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); + if (uB !== 0) { + var ua = uaT / uB, + ub = ubT / uB; + if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { + result = new Intersection('Intersection'); + result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); + } + else { + result = new Intersection(); + } } else { - result = new Intersection(); + if (uaT === 0 || ubT === 0) { + result = new Intersection('Coincident'); + } + else { + result = new Intersection('Parallel'); + } } - } - else { - if (uaT === 0 || ubT === 0) { - result = new Intersection('Coincident'); + return result; + }; + + /** + * Checks if line intersects polygon + * TODO: rename in intersectSegmentPolygon + * fix detection of coincident + * @static + * @param {fabric.Point} a1 + * @param {fabric.Point} a2 + * @param {Array} points + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { + var result = new Intersection(), + length = points.length, + b1, b2, inter, i; + + for (i = 0; i < length; i++) { + b1 = points[i]; + b2 = points[(i + 1) % length]; + inter = Intersection.intersectLineLine(a1, a2, b1, b2); + + result.appendPoints(inter.points); } - else { - result = new Intersection('Parallel'); + if (result.points.length > 0) { + result.status = 'Intersection'; } - } - return result; - }; + return result; + }; - /** - * Checks if line intersects polygon - * TODO: rename in intersectSegmentPolygon - * fix detection of coincident - * @static - * @param {fabric.Point} a1 - * @param {fabric.Point} a2 - * @param {Array} points - * @return {fabric.Intersection} - */ - fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { - var result = new Intersection(), - length = points.length, - b1, b2, inter, i; + /** + * Checks if polygon intersects another polygon + * @static + * @param {Array} points1 + * @param {Array} points2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { + var result = new Intersection(), + length = points1.length, i; - for (i = 0; i < length; i++) { - b1 = points[i]; - b2 = points[(i + 1) % length]; - inter = Intersection.intersectLineLine(a1, a2, b1, b2); + for (i = 0; i < length; i++) { + var a1 = points1[i], + a2 = points1[(i + 1) % length], + inter = Intersection.intersectLinePolygon(a1, a2, points2); - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; - }; + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; - /** - * Checks if polygon intersects another polygon - * @static - * @param {Array} points1 - * @param {Array} points2 - * @return {fabric.Intersection} - */ - fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { - var result = new Intersection(), - length = points1.length, i; + /** + * Checks if polygon intersects rectangle + * @static + * @param {Array} points + * @param {fabric.Point} r1 + * @param {fabric.Point} r2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { + var min = r1.min(r2), + max = r1.max(r2), + topRight = new fabric.Point(max.x, min.y), + bottomLeft = new fabric.Point(min.x, max.y), + inter1 = Intersection.intersectLinePolygon(min, topRight, points), + inter2 = Intersection.intersectLinePolygon(topRight, max, points), + inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), + inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), + result = new Intersection(); + + result.appendPoints(inter1.points); + result.appendPoints(inter2.points); + result.appendPoints(inter3.points); + result.appendPoints(inter4.points); + + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; - for (i = 0; i < length; i++) { - var a1 = points1[i], - a2 = points1[(i + 1) % length], - inter = Intersection.intersectLinePolygon(a1, a2, points2); + })(typeof exports !== 'undefined' ? exports : window); - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; + (function(global) { + var fabric = global.fabric || (global.fabric = { }); + /** + * Color class + * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; + * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. + * + * @class fabric.Color + * @param {String} color optional in hex or rgb(a) or hsl format or from known color list + * @return {fabric.Color} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} + */ + function Color(color) { + if (!color) { + this.setSource([0, 0, 0, 1]); + } + else { + this._tryParsingColor(color); + } } - return result; - }; - /** - * Checks if polygon intersects rectangle - * @static - * @param {Array} points - * @param {fabric.Point} r1 - * @param {fabric.Point} r2 - * @return {fabric.Intersection} - */ - fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { - var min = r1.min(r2), - max = r1.max(r2), - topRight = new fabric.Point(max.x, min.y), - bottomLeft = new fabric.Point(min.x, max.y), - inter1 = Intersection.intersectLinePolygon(min, topRight, points), - inter2 = Intersection.intersectLinePolygon(topRight, max, points), - inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), - inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), - result = new Intersection(); - - result.appendPoints(inter1.points); - result.appendPoints(inter2.points); - result.appendPoints(inter3.points); - result.appendPoints(inter4.points); - - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; - }; + fabric.Color = Color; + + fabric.Color.prototype = /** @lends fabric.Color.prototype */ { -})(typeof exports !== 'undefined' ? exports : this); + /** + * @private + * @param {String|Array} color Color value to parse + */ + _tryParsingColor: function(color) { + var source; + if (color in Color.colorNameMap) { + color = Color.colorNameMap[color]; + } -(function(global) { + if (color === 'transparent') { + source = [255, 255, 255, 0]; + } - 'use strict'; + if (!source) { + source = Color.sourceFromHex(color); + } + if (!source) { + source = Color.sourceFromRgb(color); + } + if (!source) { + source = Color.sourceFromHsl(color); + } + if (!source) { + //if color is not recognize let's make black as canvas does + source = [0, 0, 0, 1]; + } + if (source) { + this.setSource(source); + } + }, - var fabric = global.fabric || (global.fabric = { }); + /** + * Adapted from https://github.com/mjijackson + * @private + * @param {Number} r Red color value + * @param {Number} g Green color value + * @param {Number} b Blue color value + * @return {Array} Hsl color + */ + _rgbToHsl: function(r, g, b) { + r /= 255; g /= 255; b /= 255; - if (fabric.Color) { - fabric.warn('fabric.Color is already defined.'); - return; - } + var h, s, l, + max = fabric.util.array.max([r, g, b]), + min = fabric.util.array.min([r, g, b]); - /** - * Color class - * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; - * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. - * - * @class fabric.Color - * @param {String} color optional in hex or rgb(a) or hsl format or from known color list - * @return {fabric.Color} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} - */ - function Color(color) { - if (!color) { - this.setSource([0, 0, 0, 1]); - } - else { - this._tryParsingColor(color); - } - } + l = (max + min) / 2; + + if (max === min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } - fabric.Color = Color; + return [ + Math.round(h * 360), + Math.round(s * 100), + Math.round(l * 100) + ]; + }, - fabric.Color.prototype = /** @lends fabric.Color.prototype */ { + /** + * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @return {Array} + */ + getSource: function() { + return this._source; + }, - /** - * @private - * @param {String|Array} color Color value to parse - */ - _tryParsingColor: function(color) { - var source; + /** + * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @param {Array} source + */ + setSource: function(source) { + this._source = source; + }, - if (color in Color.colorNameMap) { - color = Color.colorNameMap[color]; - } + /** + * Returns color representation in RGB format + * @return {String} ex: rgb(0-255,0-255,0-255) + */ + toRgb: function() { + var source = this.getSource(); + return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; + }, - if (color === 'transparent') { - source = [255, 255, 255, 0]; - } + /** + * Returns color representation in RGBA format + * @return {String} ex: rgba(0-255,0-255,0-255,0-1) + */ + toRgba: function() { + var source = this.getSource(); + return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; + }, - if (!source) { - source = Color.sourceFromHex(color); - } - if (!source) { - source = Color.sourceFromRgb(color); - } - if (!source) { - source = Color.sourceFromHsl(color); - } - if (!source) { - //if color is not recognize let's make black as canvas does - source = [0, 0, 0, 1]; - } - if (source) { - this.setSource(source); - } - }, + /** + * Returns color representation in HSL format + * @return {String} ex: hsl(0-360,0%-100%,0%-100%) + */ + toHsl: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); - /** - * Adapted from https://github.com/mjijackson - * @private - * @param {Number} r Red color value - * @param {Number} g Green color value - * @param {Number} b Blue color value - * @return {Array} Hsl color - */ - _rgbToHsl: function(r, g, b) { - r /= 255; g /= 255; b /= 255; + return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; + }, - var h, s, l, - max = fabric.util.array.max([r, g, b]), - min = fabric.util.array.min([r, g, b]); + /** + * Returns color representation in HSLA format + * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) + */ + toHsla: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); - l = (max + min) / 2; + return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; + }, - if (max === min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - } - h /= 6; - } + /** + * Returns color representation in HEX format + * @return {String} ex: FF5555 + */ + toHex: function() { + var source = this.getSource(), r, g, b; - return [ - Math.round(h * 360), - Math.round(s * 100), - Math.round(l * 100) - ]; - }, + r = source[0].toString(16); + r = (r.length === 1) ? ('0' + r) : r; - /** - * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @return {Array} - */ - getSource: function() { - return this._source; - }, + g = source[1].toString(16); + g = (g.length === 1) ? ('0' + g) : g; - /** - * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @param {Array} source - */ - setSource: function(source) { - this._source = source; - }, + b = source[2].toString(16); + b = (b.length === 1) ? ('0' + b) : b; - /** - * Returns color representation in RGB format - * @return {String} ex: rgb(0-255,0-255,0-255) - */ - toRgb: function() { - var source = this.getSource(); - return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; - }, + return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); + }, - /** - * Returns color representation in RGBA format - * @return {String} ex: rgba(0-255,0-255,0-255,0-1) - */ - toRgba: function() { - var source = this.getSource(); - return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; - }, + /** + * Returns color representation in HEXA format + * @return {String} ex: FF5555CC + */ + toHexa: function() { + var source = this.getSource(), a; - /** - * Returns color representation in HSL format - * @return {String} ex: hsl(0-360,0%-100%,0%-100%) - */ - toHsl: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); + a = Math.round(source[3] * 255); + a = a.toString(16); + a = (a.length === 1) ? ('0' + a) : a; - return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; - }, + return this.toHex() + a.toUpperCase(); + }, - /** - * Returns color representation in HSLA format - * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) - */ - toHsla: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); + /** + * Gets value of alpha channel for this color + * @return {Number} 0-1 + */ + getAlpha: function() { + return this.getSource()[3]; + }, - return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; - }, + /** + * Sets value of alpha channel for this color + * @param {Number} alpha Alpha value 0-1 + * @return {fabric.Color} thisArg + */ + setAlpha: function(alpha) { + var source = this.getSource(); + source[3] = alpha; + this.setSource(source); + return this; + }, - /** - * Returns color representation in HEX format - * @return {String} ex: FF5555 - */ - toHex: function() { - var source = this.getSource(), r, g, b; + /** + * Transforms color to its grayscale representation + * @return {fabric.Color} thisArg + */ + toGrayscale: function() { + var source = this.getSource(), + average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), + currentAlpha = source[3]; + this.setSource([average, average, average, currentAlpha]); + return this; + }, - r = source[0].toString(16); - r = (r.length === 1) ? ('0' + r) : r; + /** + * Transforms color to its black and white representation + * @param {Number} threshold + * @return {fabric.Color} thisArg + */ + toBlackWhite: function(threshold) { + var source = this.getSource(), + average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), + currentAlpha = source[3]; - g = source[1].toString(16); - g = (g.length === 1) ? ('0' + g) : g; + threshold = threshold || 127; - b = source[2].toString(16); - b = (b.length === 1) ? ('0' + b) : b; + average = (Number(average) < Number(threshold)) ? 0 : 255; + this.setSource([average, average, average, currentAlpha]); + return this; + }, - return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); - }, + /** + * Overlays color with another color + * @param {String|fabric.Color} otherColor + * @return {fabric.Color} thisArg + */ + overlayWith: function(otherColor) { + if (!(otherColor instanceof Color)) { + otherColor = new Color(otherColor); + } - /** - * Returns color representation in HEXA format - * @return {String} ex: FF5555CC - */ - toHexa: function() { - var source = this.getSource(), a; + var result = [], + alpha = this.getAlpha(), + otherAlpha = 0.5, + source = this.getSource(), + otherSource = otherColor.getSource(), i; - a = Math.round(source[3] * 255); - a = a.toString(16); - a = (a.length === 1) ? ('0' + a) : a; + for (i = 0; i < 3; i++) { + result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); + } - return this.toHex() + a.toUpperCase(); - }, + result[3] = alpha; + this.setSource(result); + return this; + } + }; /** - * Gets value of alpha channel for this color - * @return {Number} 0-1 + * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) + * @static + * @field + * @memberOf fabric.Color */ - getAlpha: function() { - return this.getSource()[3]; - }, + // eslint-disable-next-line max-len + fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; /** - * Sets value of alpha channel for this color - * @param {Number} alpha Alpha value 0-1 - * @return {fabric.Color} thisArg + * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) + * @static + * @field + * @memberOf fabric.Color */ - setAlpha: function(alpha) { - var source = this.getSource(); - source[3] = alpha; - this.setSource(source); - return this; - }, + fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; /** - * Transforms color to its grayscale representation - * @return {fabric.Color} thisArg + * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) + * @static + * @field + * @memberOf fabric.Color */ - toGrayscale: function() { - var source = this.getSource(), - average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), - currentAlpha = source[3]; - this.setSource([average, average, average, currentAlpha]); - return this; - }, + fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; /** - * Transforms color to its black and white representation - * @param {Number} threshold - * @return {fabric.Color} thisArg - */ - toBlackWhite: function(threshold) { - var source = this.getSource(), - average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), - currentAlpha = source[3]; - - threshold = threshold || 127; - - average = (Number(average) < Number(threshold)) ? 0 : 255; - this.setSource([average, average, average, currentAlpha]); - return this; - }, + * Map of the 148 color names with HEX code + * @static + * @field + * @memberOf fabric.Color + * @see: https://www.w3.org/TR/css3-color/#svg-color + */ + fabric.Color.colorNameMap = { + aliceblue: '#F0F8FF', + antiquewhite: '#FAEBD7', + aqua: '#00FFFF', + aquamarine: '#7FFFD4', + azure: '#F0FFFF', + beige: '#F5F5DC', + bisque: '#FFE4C4', + black: '#000000', + blanchedalmond: '#FFEBCD', + blue: '#0000FF', + blueviolet: '#8A2BE2', + brown: '#A52A2A', + burlywood: '#DEB887', + cadetblue: '#5F9EA0', + chartreuse: '#7FFF00', + chocolate: '#D2691E', + coral: '#FF7F50', + cornflowerblue: '#6495ED', + cornsilk: '#FFF8DC', + crimson: '#DC143C', + cyan: '#00FFFF', + darkblue: '#00008B', + darkcyan: '#008B8B', + darkgoldenrod: '#B8860B', + darkgray: '#A9A9A9', + darkgrey: '#A9A9A9', + darkgreen: '#006400', + darkkhaki: '#BDB76B', + darkmagenta: '#8B008B', + darkolivegreen: '#556B2F', + darkorange: '#FF8C00', + darkorchid: '#9932CC', + darkred: '#8B0000', + darksalmon: '#E9967A', + darkseagreen: '#8FBC8F', + darkslateblue: '#483D8B', + darkslategray: '#2F4F4F', + darkslategrey: '#2F4F4F', + darkturquoise: '#00CED1', + darkviolet: '#9400D3', + deeppink: '#FF1493', + deepskyblue: '#00BFFF', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1E90FF', + firebrick: '#B22222', + floralwhite: '#FFFAF0', + forestgreen: '#228B22', + fuchsia: '#FF00FF', + gainsboro: '#DCDCDC', + ghostwhite: '#F8F8FF', + gold: '#FFD700', + goldenrod: '#DAA520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#ADFF2F', + honeydew: '#F0FFF0', + hotpink: '#FF69B4', + indianred: '#CD5C5C', + indigo: '#4B0082', + ivory: '#FFFFF0', + khaki: '#F0E68C', + lavender: '#E6E6FA', + lavenderblush: '#FFF0F5', + lawngreen: '#7CFC00', + lemonchiffon: '#FFFACD', + lightblue: '#ADD8E6', + lightcoral: '#F08080', + lightcyan: '#E0FFFF', + lightgoldenrodyellow: '#FAFAD2', + lightgray: '#D3D3D3', + lightgrey: '#D3D3D3', + lightgreen: '#90EE90', + lightpink: '#FFB6C1', + lightsalmon: '#FFA07A', + lightseagreen: '#20B2AA', + lightskyblue: '#87CEFA', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#B0C4DE', + lightyellow: '#FFFFE0', + lime: '#00FF00', + limegreen: '#32CD32', + linen: '#FAF0E6', + magenta: '#FF00FF', + maroon: '#800000', + mediumaquamarine: '#66CDAA', + mediumblue: '#0000CD', + mediumorchid: '#BA55D3', + mediumpurple: '#9370DB', + mediumseagreen: '#3CB371', + mediumslateblue: '#7B68EE', + mediumspringgreen: '#00FA9A', + mediumturquoise: '#48D1CC', + mediumvioletred: '#C71585', + midnightblue: '#191970', + mintcream: '#F5FFFA', + mistyrose: '#FFE4E1', + moccasin: '#FFE4B5', + navajowhite: '#FFDEAD', + navy: '#000080', + oldlace: '#FDF5E6', + olive: '#808000', + olivedrab: '#6B8E23', + orange: '#FFA500', + orangered: '#FF4500', + orchid: '#DA70D6', + palegoldenrod: '#EEE8AA', + palegreen: '#98FB98', + paleturquoise: '#AFEEEE', + palevioletred: '#DB7093', + papayawhip: '#FFEFD5', + peachpuff: '#FFDAB9', + peru: '#CD853F', + pink: '#FFC0CB', + plum: '#DDA0DD', + powderblue: '#B0E0E6', + purple: '#800080', + rebeccapurple: '#663399', + red: '#FF0000', + rosybrown: '#BC8F8F', + royalblue: '#4169E1', + saddlebrown: '#8B4513', + salmon: '#FA8072', + sandybrown: '#F4A460', + seagreen: '#2E8B57', + seashell: '#FFF5EE', + sienna: '#A0522D', + silver: '#C0C0C0', + skyblue: '#87CEEB', + slateblue: '#6A5ACD', + slategray: '#708090', + slategrey: '#708090', + snow: '#FFFAFA', + springgreen: '#00FF7F', + steelblue: '#4682B4', + tan: '#D2B48C', + teal: '#008080', + thistle: '#D8BFD8', + tomato: '#FF6347', + turquoise: '#40E0D0', + violet: '#EE82EE', + wheat: '#F5DEB3', + white: '#FFFFFF', + whitesmoke: '#F5F5F5', + yellow: '#FFFF00', + yellowgreen: '#9ACD32' + }; /** - * Overlays color with another color - * @param {String|fabric.Color} otherColor - * @return {fabric.Color} thisArg + * @private + * @param {Number} p + * @param {Number} q + * @param {Number} t + * @return {Number} */ - overlayWith: function(otherColor) { - if (!(otherColor instanceof Color)) { - otherColor = new Color(otherColor); + function hue2rgb(p, q, t) { + if (t < 0) { + t += 1; } - - var result = [], - alpha = this.getAlpha(), - otherAlpha = 0.5, - source = this.getSource(), - otherSource = otherColor.getSource(), i; - - for (i = 0; i < 3; i++) { - result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); + if (t > 1) { + t -= 1; } - - result[3] = alpha; - this.setSource(result); - return this; + if (t < 1 / 6) { + return p + (q - p) * 6 * t; + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + return p; } - }; - /** - * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) - * @static - * @field - * @memberOf fabric.Color - */ - // eslint-disable-next-line max-len - fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; + /** + * Returns new color object, when given a color in RGB format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255) + * @return {fabric.Color} + */ + fabric.Color.fromRgb = function(color) { + return Color.fromSource(Color.sourceFromRgb(color)); + }; - /** - * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) - * @static - * @field - * @memberOf fabric.Color - */ - fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) + * @return {Array} source + */ + fabric.Color.sourceFromRgb = function(color) { + var match = color.match(Color.reRGBa); + if (match) { + var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), + g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), + b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); - /** - * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) - * @static - * @field - * @memberOf fabric.Color - */ - fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; - - /** - * Map of the 148 color names with HEX code - * @static - * @field - * @memberOf fabric.Color - * @see: https://www.w3.org/TR/css3-color/#svg-color - */ - fabric.Color.colorNameMap = { - aliceblue: '#F0F8FF', - antiquewhite: '#FAEBD7', - aqua: '#00FFFF', - aquamarine: '#7FFFD4', - azure: '#F0FFFF', - beige: '#F5F5DC', - bisque: '#FFE4C4', - black: '#000000', - blanchedalmond: '#FFEBCD', - blue: '#0000FF', - blueviolet: '#8A2BE2', - brown: '#A52A2A', - burlywood: '#DEB887', - cadetblue: '#5F9EA0', - chartreuse: '#7FFF00', - chocolate: '#D2691E', - coral: '#FF7F50', - cornflowerblue: '#6495ED', - cornsilk: '#FFF8DC', - crimson: '#DC143C', - cyan: '#00FFFF', - darkblue: '#00008B', - darkcyan: '#008B8B', - darkgoldenrod: '#B8860B', - darkgray: '#A9A9A9', - darkgrey: '#A9A9A9', - darkgreen: '#006400', - darkkhaki: '#BDB76B', - darkmagenta: '#8B008B', - darkolivegreen: '#556B2F', - darkorange: '#FF8C00', - darkorchid: '#9932CC', - darkred: '#8B0000', - darksalmon: '#E9967A', - darkseagreen: '#8FBC8F', - darkslateblue: '#483D8B', - darkslategray: '#2F4F4F', - darkslategrey: '#2F4F4F', - darkturquoise: '#00CED1', - darkviolet: '#9400D3', - deeppink: '#FF1493', - deepskyblue: '#00BFFF', - dimgray: '#696969', - dimgrey: '#696969', - dodgerblue: '#1E90FF', - firebrick: '#B22222', - floralwhite: '#FFFAF0', - forestgreen: '#228B22', - fuchsia: '#FF00FF', - gainsboro: '#DCDCDC', - ghostwhite: '#F8F8FF', - gold: '#FFD700', - goldenrod: '#DAA520', - gray: '#808080', - grey: '#808080', - green: '#008000', - greenyellow: '#ADFF2F', - honeydew: '#F0FFF0', - hotpink: '#FF69B4', - indianred: '#CD5C5C', - indigo: '#4B0082', - ivory: '#FFFFF0', - khaki: '#F0E68C', - lavender: '#E6E6FA', - lavenderblush: '#FFF0F5', - lawngreen: '#7CFC00', - lemonchiffon: '#FFFACD', - lightblue: '#ADD8E6', - lightcoral: '#F08080', - lightcyan: '#E0FFFF', - lightgoldenrodyellow: '#FAFAD2', - lightgray: '#D3D3D3', - lightgrey: '#D3D3D3', - lightgreen: '#90EE90', - lightpink: '#FFB6C1', - lightsalmon: '#FFA07A', - lightseagreen: '#20B2AA', - lightskyblue: '#87CEFA', - lightslategray: '#778899', - lightslategrey: '#778899', - lightsteelblue: '#B0C4DE', - lightyellow: '#FFFFE0', - lime: '#00FF00', - limegreen: '#32CD32', - linen: '#FAF0E6', - magenta: '#FF00FF', - maroon: '#800000', - mediumaquamarine: '#66CDAA', - mediumblue: '#0000CD', - mediumorchid: '#BA55D3', - mediumpurple: '#9370DB', - mediumseagreen: '#3CB371', - mediumslateblue: '#7B68EE', - mediumspringgreen: '#00FA9A', - mediumturquoise: '#48D1CC', - mediumvioletred: '#C71585', - midnightblue: '#191970', - mintcream: '#F5FFFA', - mistyrose: '#FFE4E1', - moccasin: '#FFE4B5', - navajowhite: '#FFDEAD', - navy: '#000080', - oldlace: '#FDF5E6', - olive: '#808000', - olivedrab: '#6B8E23', - orange: '#FFA500', - orangered: '#FF4500', - orchid: '#DA70D6', - palegoldenrod: '#EEE8AA', - palegreen: '#98FB98', - paleturquoise: '#AFEEEE', - palevioletred: '#DB7093', - papayawhip: '#FFEFD5', - peachpuff: '#FFDAB9', - peru: '#CD853F', - pink: '#FFC0CB', - plum: '#DDA0DD', - powderblue: '#B0E0E6', - purple: '#800080', - rebeccapurple: '#663399', - red: '#FF0000', - rosybrown: '#BC8F8F', - royalblue: '#4169E1', - saddlebrown: '#8B4513', - salmon: '#FA8072', - sandybrown: '#F4A460', - seagreen: '#2E8B57', - seashell: '#FFF5EE', - sienna: '#A0522D', - silver: '#C0C0C0', - skyblue: '#87CEEB', - slateblue: '#6A5ACD', - slategray: '#708090', - slategrey: '#708090', - snow: '#FFFAFA', - springgreen: '#00FF7F', - steelblue: '#4682B4', - tan: '#D2B48C', - teal: '#008080', - thistle: '#D8BFD8', - tomato: '#FF6347', - turquoise: '#40E0D0', - violet: '#EE82EE', - wheat: '#F5DEB3', - white: '#FFFFFF', - whitesmoke: '#F5F5F5', - yellow: '#FFFF00', - yellowgreen: '#9ACD32' - }; - - /** - * @private - * @param {Number} p - * @param {Number} q - * @param {Number} t - * @return {Number} - */ - function hue2rgb(p, q, t) { - if (t < 0) { - t += 1; - } - if (t > 1) { - t -= 1; - } - if (t < 1 / 6) { - return p + (q - p) * 6 * t; - } - if (t < 1 / 2) { - return q; - } - if (t < 2 / 3) { - return p + (q - p) * (2 / 3 - t) * 6; - } - return p; - } - - /** - * Returns new color object, when given a color in RGB format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255) - * @return {fabric.Color} - */ - fabric.Color.fromRgb = function(color) { - return Color.fromSource(Color.sourceFromRgb(color)); - }; - - /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) - * @return {Array} source - */ - fabric.Color.sourceFromRgb = function(color) { - var match = color.match(Color.reRGBa); - if (match) { - var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), - g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), - b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); - - return [ - parseInt(r, 10), - parseInt(g, 10), - parseInt(b, 10), - match[4] ? parseFloat(match[4]) : 1 - ]; - } - }; - - /** - * Returns new color object, when given a color in RGBA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} - */ - fabric.Color.fromRgba = Color.fromRgb; - - /** - * Returns new color object, when given a color in HSL format - * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) - * @memberOf fabric.Color - * @return {fabric.Color} - */ - fabric.Color.fromHsl = function(color) { - return Color.fromSource(Color.sourceFromHsl(color)); - }; - - /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. - * Adapted from https://github.com/mjijackson - * @memberOf fabric.Color - * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) - * @return {Array} source - * @see http://http://www.w3.org/TR/css3-color/#hsl-color - */ - fabric.Color.sourceFromHsl = function(color) { - var match = color.match(Color.reHSLa); - if (!match) { - return; - } - - var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, - s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), - l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), - r, g, b; + return [ + parseInt(r, 10), + parseInt(g, 10), + parseInt(b, 10), + match[4] ? parseFloat(match[4]) : 1 + ]; + } + }; - if (s === 0) { - r = g = b = l; - } - else { - var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, - p = l * 2 - q; + /** + * Returns new color object, when given a color in RGBA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ + fabric.Color.fromRgba = Color.fromRgb; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); - } + /** + * Returns new color object, when given a color in HSL format + * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) + * @memberOf fabric.Color + * @return {fabric.Color} + */ + fabric.Color.fromHsl = function(color) { + return Color.fromSource(Color.sourceFromHsl(color)); + }; - return [ - Math.round(r * 255), - Math.round(g * 255), - Math.round(b * 255), - match[4] ? parseFloat(match[4]) : 1 - ]; - }; + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. + * Adapted from https://github.com/mjijackson + * @memberOf fabric.Color + * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) + * @return {Array} source + * @see http://http://www.w3.org/TR/css3-color/#hsl-color + */ + fabric.Color.sourceFromHsl = function(color) { + var match = color.match(Color.reHSLa); + if (!match) { + return; + } - /** - * Returns new color object, when given a color in HSLA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} - */ - fabric.Color.fromHsla = Color.fromHsl; + var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, + s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), + l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), + r, g, b; - /** - * Returns new color object, when given a color in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color Color value ex: FF5555 - * @return {fabric.Color} - */ - fabric.Color.fromHex = function(color) { - return Color.fromSource(Color.sourceFromHex(color)); - }; + if (s === 0) { + r = g = b = l; + } + else { + var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, + p = l * 2 - q; - /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color ex: FF5555 or FF5544CC (RGBa) - * @return {Array} source - */ - fabric.Color.sourceFromHex = function(color) { - if (color.match(Color.reHex)) { - var value = color.slice(color.indexOf('#') + 1), - isShortNotation = (value.length === 3 || value.length === 4), - isRGBa = (value.length === 8 || value.length === 4), - r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), - g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), - b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), - a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } return [ - parseInt(r, 16), - parseInt(g, 16), - parseInt(b, 16), - parseFloat((parseInt(a, 16) / 255).toFixed(2)) + Math.round(r * 255), + Math.round(g * 255), + Math.round(b * 255), + match[4] ? parseFloat(match[4]) : 1 ]; - } - }; - - /** - * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) - * @static - * @memberOf fabric.Color - * @param {Array} source - * @return {fabric.Color} - */ - fabric.Color.fromSource = function(source) { - var oColor = new Color(); - oColor.setSource(source); - return oColor; - }; - -})(typeof exports !== 'undefined' ? exports : this); - - -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], - skewMap = ['ns', 'nesw', 'ew', 'nwse'], - controls = {}, - LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', - opposite = { - top: BOTTOM, - bottom: TOP, - left: RIGHT, - right: LEFT, - center: CENTER, - }, radiansToDegrees = fabric.util.radiansToDegrees, - sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); + }; - /** - * Combine control position and object angle to find the control direction compared - * to the object center. - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - * @param {fabric.Control} control the control class - * @return {Number} 0 - 7 a quadrant number - */ - function findCornerQuadrant(fabricObject, control) { - var cornerAngle = fabricObject.angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; - return Math.round((cornerAngle % 360) / 45); - } + /** + * Returns new color object, when given a color in HSLA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ + fabric.Color.fromHsla = Color.fromHsl; - function fireEvent(eventName, options) { - var target = options.transform.target, - canvas = target.canvas, - canvasOptions = fabric.util.object.clone(options); - canvasOptions.target = target; - canvas && canvas.fire('object:' + eventName, canvasOptions); - target.fire(eventName, options); - } + /** + * Returns new color object, when given a color in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color Color value ex: FF5555 + * @return {fabric.Color} + */ + fabric.Color.fromHex = function(color) { + return Color.fromSource(Color.sourceFromHex(color)); + }; - /** - * Inspect event and fabricObject properties to understand if the scaling action - * @param {Event} eventData from the user action - * @param {fabric.Object} fabricObject the fabric object about to scale - * @return {Boolean} true if scale is proportional - */ - function scaleIsProportional(eventData, fabricObject) { - var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, - uniformIsToggled = eventData[uniScaleKey]; - return (canvas.uniformScaling && !uniformIsToggled) || - (!canvas.uniformScaling && uniformIsToggled); - } + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color ex: FF5555 or FF5544CC (RGBa) + * @return {Array} source + */ + fabric.Color.sourceFromHex = function(color) { + if (color.match(Color.reHex)) { + var value = color.slice(color.indexOf('#') + 1), + isShortNotation = (value.length === 3 || value.length === 4), + isRGBa = (value.length === 8 || value.length === 4), + r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), + g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), + b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), + a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; + + return [ + parseInt(r, 16), + parseInt(g, 16), + parseInt(b, 16), + parseFloat((parseInt(a, 16) / 255).toFixed(2)) + ]; + } + }; - /** - * Checks if transform is centered - * @param {Object} transform transform data - * @return {Boolean} true if transform is centered - */ - function isTransformCentered(transform) { - return transform.originX === CENTER && transform.originY === CENTER; - } + /** + * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) + * @static + * @memberOf fabric.Color + * @param {Array} source + * @return {fabric.Color} + */ + fabric.Color.fromSource = function(source) { + var oColor = new Color(); + oColor.setSource(source); + return oColor; + }; - /** - * Inspect fabricObject to understand if the current scaling action is allowed - * @param {fabric.Object} fabricObject the fabric object about to scale - * @param {String} by 'x' or 'y' or '' - * @param {Boolean} scaleProportionally true if we are trying to scale proportionally - * @return {Boolean} true if scaling is not allowed at current conditions - */ - function scalingIsForbidden(fabricObject, by, scaleProportionally) { - var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; - if (lockX && lockY) { - return true; - } - if (!by && (lockX || lockY) && scaleProportionally) { - return true; - } - if (lockX && by === 'x') { - return true; - } - if (lockY && by === 'y') { - return true; - } - return false; - } + })(typeof exports !== 'undefined' ? exports : window); - /** - * return the correct cursor style for the scale action - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function scaleCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed', - scaleProportionally = scaleIsProportional(eventData, fabricObject), - by = ''; - if (control.x !== 0 && control.y === 0) { - by = 'x'; - } - else if (control.x === 0 && control.y !== 0) { - by = 'y'; - } - if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { - return notAllowed; - } - var n = findCornerQuadrant(fabricObject, control); - return scaleMap[n] + '-resize'; - } + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], + skewMap = ['ns', 'nesw', 'ew', 'nwse'], + controls = {}, + LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', + opposite = { + top: BOTTOM, + bottom: TOP, + left: RIGHT, + right: LEFT, + center: CENTER, + }, radiansToDegrees = fabric.util.radiansToDegrees, + sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); - /** - * return the correct cursor style for the skew action - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function skewCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed'; - if (control.x !== 0 && fabricObject.lockSkewingY) { - return notAllowed; - } - if (control.y !== 0 && fabricObject.lockSkewingX) { - return notAllowed; + /** + * Combine control position and object angle to find the control direction compared + * to the object center. + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + * @param {fabric.Control} control the control class + * @return {Number} 0 - 7 a quadrant number + */ + function findCornerQuadrant(fabricObject, control) { + // angle is relative to canvas plane + var angle = fabricObject.getTotalAngle(); + var cornerAngle = angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; + return Math.round((cornerAngle % 360) / 45); } - var n = findCornerQuadrant(fabricObject, control) % 4; - return skewMap[n] + '-resize'; - } - /** - * Combine skew and scale style handlers to cover fabric standard use case - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { - if (eventData[fabricObject.canvas.altActionKey]) { - return controls.skewCursorStyleHandler(eventData, control, fabricObject); + function fireEvent(eventName, options) { + var target = options.transform.target, + canvas = target.canvas; + canvas && canvas.fire('object:' + eventName, Object.assign({}, options, { target: target })); + target.fire(eventName, options); } - return controls.scaleCursorStyleHandler(eventData, control, fabricObject); - } - /** - * Inspect event, control and fabricObject to return the correct action name - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} an action name - */ - function scaleOrSkewActionName(eventData, control, fabricObject) { - var isAlternative = eventData[fabricObject.canvas.altActionKey]; - if (control.x === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewX' : 'scaleY'; - } - if (control.y === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewY' : 'scaleX'; + /** + * Inspect event and fabricObject properties to understand if the scaling action + * @param {Event} eventData from the user action + * @param {fabric.Object} fabricObject the fabric object about to scale + * @return {Boolean} true if scale is proportional + */ + function scaleIsProportional(eventData, fabricObject) { + var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, + uniformIsToggled = eventData[uniScaleKey]; + return (canvas.uniformScaling && !uniformIsToggled) || + (!canvas.uniformScaling && uniformIsToggled); } - } - /** - * Find the correct style for the control that is used for rotation. - * this function is very simple and it just take care of not-allowed or standard cursor - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function rotationStyleHandler(eventData, control, fabricObject) { - if (fabricObject.lockRotation) { - return 'not-allowed'; + /** + * Checks if transform is centered + * @param {Object} transform transform data + * @return {Boolean} true if transform is centered + */ + function isTransformCentered(transform) { + return transform.originX === CENTER && transform.originY === CENTER; } - return control.cursorStyle; - } - - function commonEventInfo(eventData, transform, x, y) { - return { - e: eventData, - transform: transform, - pointer: { - x: x, - y: y, - } - }; - } - - /** - * Wrap an action handler with saving/restoring object position on the transform. - * this is the code that permits to objects to keep their position while transforming. - * @param {Function} actionHandler the function to wrap - * @return {Function} a function with an action handler signature - */ - function wrapWithFixedAnchor(actionHandler) { - return function(eventData, transform, x, y) { - var target = transform.target, centerPoint = target.getCenterPoint(), - constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), - actionPerformed = actionHandler(eventData, transform, x, y); - target.setPositionByOrigin(constraint, transform.originX, transform.originY); - return actionPerformed; - }; - } - /** - * Wrap an action handler with firing an event if the action is performed - * @param {Function} actionHandler the function to wrap - * @return {Function} a function with an action handler signature - */ - function wrapWithFireEvent(eventName, actionHandler) { - return function(eventData, transform, x, y) { - var actionPerformed = actionHandler(eventData, transform, x, y); - if (actionPerformed) { - fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); + /** + * Inspect fabricObject to understand if the current scaling action is allowed + * @param {fabric.Object} fabricObject the fabric object about to scale + * @param {String} by 'x' or 'y' or '' + * @param {Boolean} scaleProportionally true if we are trying to scale proportionally + * @return {Boolean} true if scaling is not allowed at current conditions + */ + function scalingIsForbidden(fabricObject, by, scaleProportionally) { + var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; + if (lockX && lockY) { + return true; } - return actionPerformed; - }; - } - - /** - * Transforms a point described by x and y in a distance from the top left corner of the object - * bounding box. - * @param {Object} transform - * @param {String} originX - * @param {String} originY - * @param {number} x - * @param {number} y - * @return {Fabric.Point} the normalized point - */ - function getLocalPoint(transform, originX, originY, x, y) { - var target = transform.target, - control = target.controls[transform.corner], - zoom = target.canvas.getZoom(), - padding = target.padding / zoom, - localPoint = target.toLocalPoint(new fabric.Point(x, y), originX, originY); - if (localPoint.x >= padding) { - localPoint.x -= padding; - } - if (localPoint.x <= -padding) { - localPoint.x += padding; - } - if (localPoint.y >= padding) { - localPoint.y -= padding; - } - if (localPoint.y <= padding) { - localPoint.y += padding; - } - localPoint.x -= control.offsetX; - localPoint.y -= control.offsetY; - return localPoint; - } - - /** - * Detect if the fabric object is flipped on one side. - * @param {fabric.Object} target - * @return {Boolean} true if one flip, but not two. - */ - function targetHasOneFlip(target) { - return target.flipX !== target.flipY; - } - - /** - * Utility function to compensate the scale factor when skew is applied on both axes - * @private - */ - function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { - if (target[oppositeSkew] !== 0) { - var newDim = target._getTransformedDimensions()[axis]; - var newValue = reference / newDim * target[scaleToCompensate]; - target.set(scaleToCompensate, newValue); - } - } - - /** - * Action handler for skewing on the X axis - * @private - */ - function skewObjectX(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions(0, target.skewY), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, - currentSkew = target.skewX, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; - } - else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; + if (!by && (lockX || lockY) && scaleProportionally) { + return true; } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; + if (lockX && by === 'x') { + return true; } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; + if (lockY && by === 'y') { + return true; } + return false; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().y; - target.set('skewX', newSkew); - compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); - } - return hasSkewed; - } - /** - * Action handler for skewing on the Y axis - * @private - */ - function skewObjectY(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions(target.skewX, 0), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, - currentSkew = target.skewY, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; - } - else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; + /** + * return the correct cursor style for the scale action + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function scaleCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed', + scaleProportionally = scaleIsProportional(eventData, fabricObject), + by = ''; + if (control.x !== 0 && control.y === 0) { + by = 'x'; } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; + else if (control.x === 0 && control.y !== 0) { + by = 'y'; } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; + if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { + return notAllowed; } + var n = findCornerQuadrant(fabricObject, control); + return scaleMap[n] + '-resize'; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().x; - target.set('skewY', newSkew); - compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); - } - return hasSkewed; - } - /** - * Wrapped Action handler for skewing on the Y axis, takes care of the - * skew direction and determine the correct transform origin for the anchor point - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function skewHandlerX(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewX > 0 and originY bottom we anchor on right - // if skewX > 0 and originY top we anchor on left - // if skewX < 0 and originY bottom we anchor on left - // if skewX < 0 and originY top we anchor on right - // if skewX is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; - if (target.lockSkewingX) { - return false; - } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.x > 0) { - // we are pulling right, anchor left; - originX = LEFT; + /** + * return the correct cursor style for the skew action + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function skewCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed'; + if (control.x !== 0 && fabricObject.lockSkewingY) { + return notAllowed; } - else { - // we are pulling right, anchor right - originX = RIGHT; + if (control.y !== 0 && fabricObject.lockSkewingX) { + return notAllowed; } + var n = findCornerQuadrant(fabricObject, control) % 4; + return skewMap[n] + '-resize'; } - else { - if (currentSkew > 0) { - originX = originY === TOP ? LEFT : RIGHT; - } - if (currentSkew < 0) { - originX = originY === TOP ? RIGHT : LEFT; - } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originX = originX === LEFT ? RIGHT : LEFT; + + /** + * Combine skew and scale style handlers to cover fabric standard use case + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { + if (eventData[fabricObject.canvas.altActionKey]) { + return controls.skewCursorStyleHandler(eventData, control, fabricObject); } + return controls.scaleCursorStyleHandler(eventData, control, fabricObject); } - // once we have the origin, we find the anchor point - transform.originX = originX; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); - return finalHandler(eventData, transform, x, y); - } - - /** - * Wrapped Action handler for skewing on the Y axis, takes care of the - * skew direction and determine the correct transform origin for the anchor point - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function skewHandlerY(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewY > 0 and originX left we anchor on top - // if skewY > 0 and originX right we anchor on bottom - // if skewY < 0 and originX left we anchor on bottom - // if skewY < 0 and originX right we anchor on top - // if skewY is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; - if (target.lockSkewingY) { - return false; - } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.y > 0) { - // we are pulling down, anchor up; - originY = TOP; + /** + * Inspect event, control and fabricObject to return the correct action name + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} an action name + */ + function scaleOrSkewActionName(eventData, control, fabricObject) { + var isAlternative = eventData[fabricObject.canvas.altActionKey]; + if (control.x === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewX' : 'scaleY'; } - else { - // we are pulling up, anchor down - originY = BOTTOM; + if (control.y === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewY' : 'scaleX'; } } - else { - if (currentSkew > 0) { - originY = originX === LEFT ? TOP : BOTTOM; - } - if (currentSkew < 0) { - originY = originX === LEFT ? BOTTOM : TOP; - } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originY = originY === TOP ? BOTTOM : TOP; + + /** + * Find the correct style for the control that is used for rotation. + * this function is very simple and it just take care of not-allowed or standard cursor + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function rotationStyleHandler(eventData, control, fabricObject) { + if (fabricObject.lockRotation) { + return 'not-allowed'; } + return control.cursorStyle; } - // once we have the origin, we find the anchor point - transform.originY = originY; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); - return finalHandler(eventData, transform, x, y); - } - - /** - * Action handler for rotation and snapping, without anchor point. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - * @private - */ - function rotationWithSnapping(eventData, transform, x, y) { - var t = transform, - target = t.target, - pivotPoint = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY); - - if (target.lockRotation) { - return false; + function commonEventInfo(eventData, transform, x, y) { + return { + e: eventData, + transform: transform, + pointer: { + x: x, + y: y, + } + }; } - var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), - curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), - angle = radiansToDegrees(curAngle - lastAngle + t.theta), - hasRotated = true; + /** + * Wrap an action handler with saving/restoring object position on the transform. + * this is the code that permits to objects to keep their position while transforming. + * @param {Function} actionHandler the function to wrap + * @return {Function} a function with an action handler signature + */ + function wrapWithFixedAnchor(actionHandler) { + return function(eventData, transform, x, y) { + var target = transform.target, centerPoint = target.getRelativeCenterPoint(), + constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), + actionPerformed = actionHandler(eventData, transform, x, y); + target.setPositionByOrigin(constraint, transform.originX, transform.originY); + return actionPerformed; + }; + } - if (target.snapAngle > 0) { - var snapAngle = target.snapAngle, - snapThreshold = target.snapThreshold || snapAngle, - rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, - leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; + /** + * Wrap an action handler with firing an event if the action is performed + * @param {Function} actionHandler the function to wrap + * @return {Function} a function with an action handler signature + */ + function wrapWithFireEvent(eventName, actionHandler) { + return function(eventData, transform, x, y) { + var actionPerformed = actionHandler(eventData, transform, x, y); + if (actionPerformed) { + fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); + } + return actionPerformed; + }; + } - if (Math.abs(angle - leftAngleLocked) < snapThreshold) { - angle = leftAngleLocked; + /** + * Transforms a point described by x and y in a distance from the top left corner of the object + * bounding box. + * @param {Object} transform + * @param {String} originX + * @param {String} originY + * @param {number} x + * @param {number} y + * @return {Fabric.Point} the normalized point + */ + function getLocalPoint(transform, originX, originY, x, y) { + var target = transform.target, + control = target.controls[transform.corner], + zoom = target.canvas.getZoom(), + padding = target.padding / zoom, + localPoint = target.normalizePoint(new fabric.Point(x, y), originX, originY); + if (localPoint.x >= padding) { + localPoint.x -= padding; } - else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { - angle = rightAngleLocked; + if (localPoint.x <= -padding) { + localPoint.x += padding; } + if (localPoint.y >= padding) { + localPoint.y -= padding; + } + if (localPoint.y <= padding) { + localPoint.y += padding; + } + localPoint.x -= control.offsetX; + localPoint.y -= control.offsetY; + return localPoint; } - // normalize angle to positive value - if (angle < 0) { - angle = 360 + angle; - } - angle %= 360; - - hasRotated = target.angle !== angle; - target.angle = angle; - return hasRotated; - } - - /** - * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @param {Object} options additional information for scaling - * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling - * @return {Boolean} true if some change happened - * @private - */ - function scaleObject(eventData, transform, x, y, options) { - options = options || {}; - var target = transform.target, - lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, - by = options.by, newPoint, scaleX, scaleY, dim, - scaleProportionally = scaleIsProportional(eventData, target), - forbidScaling = scalingIsForbidden(target, by, scaleProportionally), - signX, signY, gestureScale = transform.gestureScale; - - if (forbidScaling) { - return false; - } - if (gestureScale) { - scaleX = transform.scaleX * gestureScale; - scaleY = transform.scaleY * gestureScale; + /** + * Detect if the fabric object is flipped on one side. + * @param {fabric.Object} target + * @return {Boolean} true if one flip, but not two. + */ + function targetHasOneFlip(target) { + return target.flipX !== target.flipY; } - else { - newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); - // use of sign: We use sign to detect change of direction of an action. sign usually change when - // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling - // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily - // cross many time the origin point and flip the object. so we need a way to filter out the noise. - // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. - signX = by !== 'y' ? sign(newPoint.x) : 1; - signY = by !== 'x' ? sign(newPoint.y) : 1; - if (!transform.signX) { - transform.signX = signX; - } - if (!transform.signY) { - transform.signY = signY; - } - - if (target.lockScalingFlip && - (transform.signX !== signX || transform.signY !== signY) - ) { - return false; + + /** + * Utility function to compensate the scale factor when skew is applied on both axes + * @private + */ + function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { + if (target[oppositeSkew] !== 0) { + var newDim = target._getTransformedDimensions()[axis]; + var newValue = reference / newDim * target[scaleToCompensate]; + target.set(scaleToCompensate, newValue); } + } - dim = target._getTransformedDimensions(); - // missing detection of flip and logic to switch the origin - if (scaleProportionally && !by) { - // uniform scaling - var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), - original = transform.original, - originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + - Math.abs(dim.y * original.scaleY / target.scaleY), - scale = distance / originalDistance; - scaleX = original.scaleX * scale; - scaleY = original.scaleY * scale; + /** + * Action handler for skewing on the X axis + * @private + */ + function skewObjectX(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions({ skewX: 0, skewY: target.skewY }), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, + currentSkew = target.skewX, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; } else { - scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); - scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); - } - // if we are scaling by center, we need to double the scale - if (isTransformCentered(transform)) { - scaleX *= 2; - scaleY *= 2; - } - if (transform.signX !== signX && by !== 'y') { - transform.originX = opposite[transform.originX]; - scaleX *= -1; - transform.signX = signX; + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; + } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; + } + if (targetHasOneFlip(target)) { + newSkew = -newSkew; + } } - if (transform.signY !== signY && by !== 'x') { - transform.originY = opposite[transform.originY]; - scaleY *= -1; - transform.signY = signY; + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().y; + target.set('skewX', newSkew); + compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); } + return hasSkewed; } - // minScale is taken are in the setter. - var oldScaleX = target.scaleX, oldScaleY = target.scaleY; - if (!by) { - !lockScalingX && target.set('scaleX', scaleX); - !lockScalingY && target.set('scaleY', scaleY); - } - else { - // forbidden cases already handled on top here. - by === 'x' && target.set('scaleX', scaleX); - by === 'y' && target.set('scaleY', scaleY); - } - return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; - } - - /** - * Generic scaling logic, to scale from corners either equally or freely. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function scaleObjectFromCorner(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y); - } - - /** - * Scaling logic for the X axis. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function scaleObjectX(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'x' }); - } - - /** - * Scaling logic for the Y axis. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function scaleObjectY(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'y' }); - } - - /** - * Composed action handler to either scale Y or skew X - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function scalingYOrSkewingX(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerX(eventData, transform, x, y); - } - return controls.scalingY(eventData, transform, x, y); - } - - /** - * Composed action handler to either scale X or skew Y - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function scalingXOrSkewingY(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerY(eventData, transform, x, y); - } - return controls.scalingX(eventData, transform, x, y); - } - - /** - * Action handler to change textbox width - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function changeWidth(eventData, transform, x, y) { - var target = transform.target, localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), - multiplier = isTransformCentered(transform) ? 2 : 1, - oldWidth = target.width, - newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding; - target.set('width', Math.max(newWidth, 0)); - return oldWidth !== newWidth; - } - - /** - * Action handler - * @private - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if the translation occurred - */ - function dragHandler(eventData, transform, x, y) { - var target = transform.target, - newLeft = x - transform.offsetX, - newTop = y - transform.offsetY, - moveX = !target.get('lockMovementX') && target.left !== newLeft, - moveY = !target.get('lockMovementY') && target.top !== newTop; - moveX && target.set('left', newLeft); - moveY && target.set('top', newTop); - if (moveX || moveY) { - fireEvent('moving', commonEventInfo(eventData, transform, x, y)); - } - return moveX || moveY; - } - - controls.scaleCursorStyleHandler = scaleCursorStyleHandler; - controls.skewCursorStyleHandler = skewCursorStyleHandler; - controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; - controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); - controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); - controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); - controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); - controls.scalingYOrSkewingX = scalingYOrSkewingX; - controls.scalingXOrSkewingY = scalingXOrSkewingY; - controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); - controls.skewHandlerX = skewHandlerX; - controls.skewHandlerY = skewHandlerY; - controls.dragHandler = dragHandler; - controls.scaleOrSkewActionName = scaleOrSkewActionName; - controls.rotationStyleHandler = rotationStyleHandler; - controls.fireEvent = fireEvent; - controls.wrapWithFixedAnchor = wrapWithFixedAnchor; - controls.wrapWithFireEvent = wrapWithFireEvent; - controls.getLocalPoint = getLocalPoint; - fabric.controlsUtils = controls; - -})(typeof exports !== 'undefined' ? exports : this); - - -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians, - controls = fabric.controlsUtils; - - /** - * Render a round control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - */ - function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), - myLeft = left, - myTop = top, size; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // as soon as fabric react v5, remove ie11, use proper ellipse code. - if (xSize > ySize) { - size = xSize; - ctx.scale(1.0, ySize / xSize); - myTop = top * xSize / ySize; - } - else if (ySize > xSize) { - size = ySize; - ctx.scale(xSize / ySize, 1.0); - myLeft = left * ySize / xSize; - } - else { - size = xSize; - } - // this is still wrong - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); - ctx[methodName](); - if (stroke) { - ctx.stroke(); - } - ctx.restore(); - } - - /** - * Render a square control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - */ - function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && ( - styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor - ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // this is still wrong - ctx.lineWidth = 1; - ctx.translate(left, top); - ctx.rotate(degreesToRadians(fabricObject.angle)); - // this does not work, and fixed with ( && ) does not make sense. - // to have real transparent corners we need the controls on upperCanvas - // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); - ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); - if (stroke) { - ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); - } - ctx.restore(); - } - - controls.renderCircleControl = renderCircleControl; - controls.renderSquareControl = renderSquareControl; - -})(typeof exports !== 'undefined' ? exports : this); - - -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }); - - function Control(options) { - for (var i in options) { - this[i] = options[i]; - } - } - - fabric.Control = Control; - - fabric.Control.prototype = /** @lends fabric.Control.prototype */ { /** - * keep track of control visibility. - * mainly for backward compatibility. - * if you do not want to see a control, you can remove it - * from the controlset. - * @type {Boolean} - * @default true + * Action handler for skewing on the Y axis + * @private */ - visible: true, + function skewObjectY(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions({ skewX: target.skewX, skewY: 0 }), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, + currentSkew = target.skewY, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; + } + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; + } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; + } + if (targetHasOneFlip(target)) { + newSkew = -newSkew; + } + } + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().x; + target.set('skewY', newSkew); + compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); + } + return hasSkewed; + } /** - * Name of the action that the control will likely execute. - * This is optional. FabricJS uses to identify what the user is doing for some - * extra optimizations. If you are writing a custom control and you want to know - * somewhere else in the code what is going on, you can use this string here. - * you can also provide a custom getActionName if your control run multiple actions - * depending on some external state. - * default to scale since is the most common, used on 4 corners by default - * @type {String} - * @default 'scale' + * Wrapped Action handler for skewing on the Y axis, takes care of the + * skew direction and determine the correct transform origin for the anchor point + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - actionName: 'scale', + function skewHandlerX(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewX > 0 and originY bottom we anchor on right + // if skewX > 0 and originY top we anchor on left + // if skewX < 0 and originY bottom we anchor on left + // if skewX < 0 and originY top we anchor on right + // if skewX is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; + if (target.lockSkewingX) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.x > 0) { + // we are pulling right, anchor left; + originX = LEFT; + } + else { + // we are pulling right, anchor right + originX = RIGHT; + } + } + else { + if (currentSkew > 0) { + originX = originY === TOP ? LEFT : RIGHT; + } + if (currentSkew < 0) { + originX = originY === TOP ? RIGHT : LEFT; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originX = originX === LEFT ? RIGHT : LEFT; + } + } - /** - * Drawing angle of the control. - * NOT used for now, but name marked as needed for internal logic - * example: to reuse the same drawing function for different rotated controls - * @type {Number} - * @default 0 - */ - angle: 0, + // once we have the origin, we find the anchor point + transform.originX = originX; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); + return finalHandler(eventData, transform, x, y); + } /** - * Relative position of the control. X - * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 + * Wrapped Action handler for skewing on the Y axis, takes care of the + * skew direction and determine the correct transform origin for the anchor point + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - x: 0, + function skewHandlerY(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewY > 0 and originX left we anchor on top + // if skewY > 0 and originX right we anchor on bottom + // if skewY < 0 and originX left we anchor on bottom + // if skewY < 0 and originX right we anchor on top + // if skewY is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; + if (target.lockSkewingY) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.y > 0) { + // we are pulling down, anchor up; + originY = TOP; + } + else { + // we are pulling up, anchor down + originY = BOTTOM; + } + } + else { + if (currentSkew > 0) { + originY = originX === LEFT ? TOP : BOTTOM; + } + if (currentSkew < 0) { + originY = originX === LEFT ? BOTTOM : TOP; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originY = originY === TOP ? BOTTOM : TOP; + } + } - /** - * Relative position of the control. Y - * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 - */ - y: 0, + // once we have the origin, we find the anchor point + transform.originY = originY; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); + return finalHandler(eventData, transform, x, y); + } /** - * Horizontal offset of the control from the defined position. In pixels - * Positive offset moves the control to the right, negative to the left. - * It used when you want to have position of control that does not scale with - * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on - * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will - * stay 30 pixels no matter how the object is big. Another example is having 2 - * controls in the corner, that stay in the same position when the object scale. - * of the bounding box. - * @type {Number} - * @default 0 + * Action handler for rotation and snapping, without anchor point. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + * @private */ - offsetX: 0, + function rotationWithSnapping(eventData, transform, x, y) { + var t = transform, + target = t.target, + pivotPoint = target.translateToOriginPoint(target.getRelativeCenterPoint(), t.originX, t.originY); - /** - * Vertical offset of the control from the defined position. In pixels - * Positive offset moves the control to the bottom, negative to the top. - * @type {Number} - * @default 0 - */ - offsetY: 0, + if (target.lockRotation) { + return false; + } - /** - * Sets the length of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeX: null, + var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), + curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), + angle = radiansToDegrees(curAngle - lastAngle + t.theta), + hasRotated = true; - /** - * Sets the height of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeY: null, + if (target.snapAngle > 0) { + var snapAngle = target.snapAngle, + snapThreshold = target.snapThreshold || snapAngle, + rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, + leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; - /** - * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeX: null, + if (Math.abs(angle - leftAngleLocked) < snapThreshold) { + angle = leftAngleLocked; + } + else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { + angle = rightAngleLocked; + } + } - /** - * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeY: null, + // normalize angle to positive value + if (angle < 0) { + angle = 360 + angle; + } + angle %= 360; - /** - * Css cursor style to display when the control is hovered. - * if the method `cursorStyleHandler` is provided, this property is ignored. - * @type {String} - * @default 'crosshair' - */ - cursorStyle: 'crosshair', + hasRotated = target.angle !== angle; + target.angle = angle; + return hasRotated; + } /** - * If controls has an offsetY or offsetX, draw a line that connects - * the control to the bounding box - * @type {Boolean} - * @default false + * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @param {Object} options additional information for scaling + * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling + * @return {Boolean} true if some change happened + * @private */ - withConnection: false, + function scaleObject(eventData, transform, x, y, options) { + options = options || {}; + var target = transform.target, + lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, + by = options.by, newPoint, scaleX, scaleY, dim, + scaleProportionally = scaleIsProportional(eventData, target), + forbidScaling = scalingIsForbidden(target, by, scaleProportionally), + signX, signY, gestureScale = transform.gestureScale; + + if (forbidScaling) { + return false; + } + if (gestureScale) { + scaleX = transform.scaleX * gestureScale; + scaleY = transform.scaleY * gestureScale; + } + else { + newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // use of sign: We use sign to detect change of direction of an action. sign usually change when + // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling + // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily + // cross many time the origin point and flip the object. so we need a way to filter out the noise. + // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. + signX = by !== 'y' ? sign(newPoint.x) : 1; + signY = by !== 'x' ? sign(newPoint.y) : 1; + if (!transform.signX) { + transform.signX = signX; + } + if (!transform.signY) { + transform.signY = signY; + } + + if (target.lockScalingFlip && + (transform.signX !== signX || transform.signY !== signY) + ) { + return false; + } + + dim = target._getTransformedDimensions(); + // missing detection of flip and logic to switch the origin + if (scaleProportionally && !by) { + // uniform scaling + var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), + original = transform.original, + originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + + Math.abs(dim.y * original.scaleY / target.scaleY), + scale = distance / originalDistance; + scaleX = original.scaleX * scale; + scaleY = original.scaleY * scale; + } + else { + scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); + scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); + } + // if we are scaling by center, we need to double the scale + if (isTransformCentered(transform)) { + scaleX *= 2; + scaleY *= 2; + } + if (transform.signX !== signX && by !== 'y') { + transform.originX = opposite[transform.originX]; + scaleX *= -1; + transform.signX = signX; + } + if (transform.signY !== signY && by !== 'x') { + transform.originY = opposite[transform.originY]; + scaleY *= -1; + transform.signY = signY; + } + } + // minScale is taken are in the setter. + var oldScaleX = target.scaleX, oldScaleY = target.scaleY; + if (!by) { + !lockScalingX && target.set('scaleX', scaleX); + !lockScalingY && target.set('scaleY', scaleY); + } + else { + // forbidden cases already handled on top here. + by === 'x' && target.set('scaleX', scaleX); + by === 'y' && target.set('scaleY', scaleY); + } + return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; + } /** - * The control actionHandler, provide one to handle action ( control being moved ) - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object + * Generic scaling logic, to scale from corners either equally or freely. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - actionHandler: function(/* eventData, transformData, x, y */) { }, + function scaleObjectFromCorner(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y); + } /** - * The control handler for mouse down, provide one to handle mouse down on control - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object + * Scaling logic for the X axis. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - mouseDownHandler: function(/* eventData, transformData, x, y */) { }, + function scaleObjectX(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'x' }); + } /** - * The control mouseUpHandler, provide one to handle an effect on mouse up. - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object + * Scaling logic for the Y axis. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - mouseUpHandler: function(/* eventData, transformData, x, y */) { }, + function scaleObjectY(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'y' }); + } /** - * Returns control actionHandler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler + * Composed action handler to either scale Y or skew X + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - getActionHandler: function(/* eventData, fabricObject, control */) { - return this.actionHandler; - }, + function scalingYOrSkewingX(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerX(eventData, transform, x, y); + } + return controls.scalingY(eventData, transform, x, y); + } /** - * Returns control mouseDown handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler + * Composed action handler to either scale X or skew Y + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - getMouseDownHandler: function(/* eventData, fabricObject, control */) { - return this.mouseDownHandler; - }, + function scalingXOrSkewingY(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerY(eventData, transform, x, y); + } + return controls.scalingX(eventData, transform, x, y); + } /** - * Returns control mouseUp handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler + * Action handler to change textbox width + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened */ - getMouseUpHandler: function(/* eventData, fabricObject, control */) { - return this.mouseUpHandler; - }, + function changeWidth(eventData, transform, x, y) { + var localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // make sure the control changes width ONLY from it's side of target + if (transform.originX === 'center' || + (transform.originX === 'right' && localPoint.x < 0) || + (transform.originX === 'left' && localPoint.x > 0)) { + var target = transform.target, + strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), + multiplier = isTransformCentered(transform) ? 2 : 1, + oldWidth = target.width, + newWidth = Math.ceil(Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding); + target.set('width', Math.max(newWidth, 0)); + // check against actual target width in case `newWidth` was rejected + return oldWidth !== target.width; + } + return false; + } /** - * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate - * function you can pass one in the constructor - * the cursorStyle property - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} + * Action handler + * @private + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if the translation occurred + */ + function dragHandler(eventData, transform, x, y) { + var target = transform.target, + newLeft = x - transform.offsetX, + newTop = y - transform.offsetY, + moveX = !target.get('lockMovementX') && target.left !== newLeft, + moveY = !target.get('lockMovementY') && target.top !== newTop; + moveX && target.set('left', newLeft); + moveY && target.set('top', newTop); + if (moveX || moveY) { + fireEvent('moving', commonEventInfo(eventData, transform, x, y)); + } + return moveX || moveY; + } + + controls.scaleCursorStyleHandler = scaleCursorStyleHandler; + controls.skewCursorStyleHandler = skewCursorStyleHandler; + controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; + controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); + controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); + controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); + controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); + controls.scalingYOrSkewingX = scalingYOrSkewingX; + controls.scalingXOrSkewingY = scalingXOrSkewingY; + controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); + controls.skewHandlerX = skewHandlerX; + controls.skewHandlerY = skewHandlerY; + controls.dragHandler = dragHandler; + controls.scaleOrSkewActionName = scaleOrSkewActionName; + controls.rotationStyleHandler = rotationStyleHandler; + controls.fireEvent = fireEvent; + controls.wrapWithFixedAnchor = wrapWithFixedAnchor; + controls.wrapWithFireEvent = wrapWithFireEvent; + controls.getLocalPoint = getLocalPoint; + fabric.controlsUtils = controls; + + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians, + controls = fabric.controlsUtils; + + /** + * Render a round control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls */ - cursorStyleHandler: function(eventData, control /* fabricObject */) { - return control.cursorStyle; - }, - - /** - * Returns the action name. The basic implementation just return the actionName property. - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} - */ - getActionName: function(eventData, control /* fabricObject */) { - return control.actionName; - }, - - /** - * Returns controls visibility - * @param {fabric.Object} object on which the control is displayed - * @param {String} controlKey key where the control is memorized on the - * @return {Boolean} - */ - getVisibility: function(fabricObject, controlKey) { - var objectVisibility = fabricObject._controlsVisibility; - if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { - return objectVisibility[controlKey]; - } - return this.visible; - }, - - /** - * Sets controls visibility - * @param {Boolean} visibility for the object - * @return {Void} - */ - setVisibility: function(visibility /* name, fabricObject */) { - this.visible = visibility; - }, - - - positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { - var point = fabric.util.transformPoint({ - x: this.x * dim.x + this.offsetX, - y: this.y * dim.y + this.offsetY }, finalMatrix); - return point; - }, - - /** - * Returns the coords for this control based on object values. - * @param {Number} objectAngle angle from the fabric object holding the control - * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if - * isTouch is true) - * @param {Number} centerX x coordinate where the control center should be - * @param {Number} centerY y coordinate where the control center should be - * @param {boolean} isTouch true if touch corner, false if normal corner - */ - calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { - var cosHalfOffset, - sinHalfOffset, - cosHalfOffsetComp, - sinHalfOffsetComp, - xSize = (isTouch) ? this.touchSizeX : this.sizeX, - ySize = (isTouch) ? this.touchSizeY : this.sizeY; - if (xSize && ySize && xSize !== ySize) { - // handle rectangular corners - var controlTriangleAngle = Math.atan2(ySize, xSize); - var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; - var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); - // use complementary angle for two corners - cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); - sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); + function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), + myLeft = left, + myTop = top, size; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // as soon as fabric react v5, remove ie11, use proper ellipse code. + if (xSize > ySize) { + size = xSize; + ctx.scale(1.0, ySize / xSize); + myTop = top * xSize / ySize; + } + else if (ySize > xSize) { + size = ySize; + ctx.scale(xSize / ySize, 1.0); + myLeft = left * ySize / xSize; } else { - // handle square corners - // use default object corner size unless size is defined - var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; - /* 0.7071067812 stands for sqrt(2)/2 */ - cornerHypotenuse = cornerSize * 0.7071067812; - // complementary angles are equal since they're both 45 degrees - var newTheta = fabric.util.degreesToRadians(45 - objectAngle); - cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); + size = xSize; + } + // this is still wrong + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); + ctx[methodName](); + if (stroke) { + ctx.stroke(); } + ctx.restore(); + } - return { - tl: { - x: centerX - sinHalfOffsetComp, - y: centerY - cosHalfOffsetComp, - }, - tr: { - x: centerX + cosHalfOffset, - y: centerY - sinHalfOffset, - }, - bl: { - x: centerX - cosHalfOffset, - y: centerY + sinHalfOffset, - }, - br: { - x: centerX + sinHalfOffsetComp, - y: centerY + cosHalfOffsetComp, - }, - }; - }, - - /** - * Render function for the control. - * When this function runs the context is unscaled. unrotate. Just retina scaled. - * all the functions will have to translate to the point left,top before starting Drawing - * if they want to draw a control where the position is detected. - * left and top are the result of the positionHandler function - * @param {RenderingContext2D} ctx the context where the control will be drawn - * @param {Number} left position of the canvas where we are about to render the control. - * @param {Number} top position of the canvas where we are about to render the control. - * @param {Object} styleOverride - * @param {fabric.Object} fabricObject the object where the control is about to be rendered - */ - render: function(ctx, left, top, styleOverride, fabricObject) { + /** + * Render a square control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ + function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { styleOverride = styleOverride || {}; - switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { - case 'circle': - fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); - break; - default: - fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && ( + styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor + ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // this is still wrong + ctx.lineWidth = 1; + ctx.translate(left, top); + // angle is relative to canvas plane + var angle = fabricObject.getTotalAngle(); + ctx.rotate(degreesToRadians(angle)); + // this does not work, and fixed with ( && ) does not make sense. + // to have real transparent corners we need the controls on upperCanvas + // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); + if (stroke) { + ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); } - }, - }; - -})(typeof exports !== 'undefined' ? exports : this); + ctx.restore(); + } + controls.renderCircleControl = renderCircleControl; + controls.renderSquareControl = renderSquareControl; -(function() { + })(typeof exports !== 'undefined' ? exports : window); - /* _FROM_SVG_START_ */ - function getColorStop(el, multiplier) { - var style = el.getAttribute('style'), - offset = el.getAttribute('offset') || 0, - color, colorAlpha, opacity, i; + (function(global) { - // convert percents to absolute values - offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); - offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; - if (style) { - var keyValuePairs = style.split(/\s*;\s*/); + var fabric = global.fabric || (global.fabric = { }); - if (keyValuePairs[keyValuePairs.length - 1] === '') { - keyValuePairs.pop(); + function Control(options) { + for (var i in options) { + this[i] = options[i]; } + } - for (i = keyValuePairs.length; i--; ) { - - var split = keyValuePairs[i].split(/\s*:\s*/), - key = split[0].trim(), - value = split[1].trim(); + fabric.Control = Control; - if (key === 'stop-color') { - color = value; - } - else if (key === 'stop-opacity') { - opacity = value; - } - } - } + fabric.Control.prototype = /** @lends fabric.Control.prototype */ { - if (!color) { - color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; - } - if (!opacity) { - opacity = el.getAttribute('stop-opacity'); - } + /** + * keep track of control visibility. + * mainly for backward compatibility. + * if you do not want to see a control, you can remove it + * from the controlset. + * @type {Boolean} + * @default true + */ + visible: true, - color = new fabric.Color(color); - colorAlpha = color.getAlpha(); - opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); - opacity *= colorAlpha * multiplier; + /** + * Name of the action that the control will likely execute. + * This is optional. FabricJS uses to identify what the user is doing for some + * extra optimizations. If you are writing a custom control and you want to know + * somewhere else in the code what is going on, you can use this string here. + * you can also provide a custom getActionName if your control run multiple actions + * depending on some external state. + * default to scale since is the most common, used on 4 corners by default + * @type {String} + * @default 'scale' + */ + actionName: 'scale', - return { - offset: offset, - color: color.toRgb(), - opacity: opacity - }; - } + /** + * Drawing angle of the control. + * NOT used for now, but name marked as needed for internal logic + * example: to reuse the same drawing function for different rotated controls + * @type {Number} + * @default 0 + */ + angle: 0, - function getLinearCoords(el) { - return { - x1: el.getAttribute('x1') || 0, - y1: el.getAttribute('y1') || 0, - x2: el.getAttribute('x2') || '100%', - y2: el.getAttribute('y2') || 0 - }; - } + /** + * Relative position of the control. X + * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + x: 0, - function getRadialCoords(el) { - return { - x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', - y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', - r1: 0, - x2: el.getAttribute('cx') || '50%', - y2: el.getAttribute('cy') || '50%', - r2: el.getAttribute('r') || '50%' - }; - } - /* _FROM_SVG_END_ */ + /** + * Relative position of the control. Y + * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + y: 0, - var clone = fabric.util.object.clone; + /** + * Horizontal offset of the control from the defined position. In pixels + * Positive offset moves the control to the right, negative to the left. + * It used when you want to have position of control that does not scale with + * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on + * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will + * stay 30 pixels no matter how the object is big. Another example is having 2 + * controls in the corner, that stay in the same position when the object scale. + * of the bounding box. + * @type {Number} + * @default 0 + */ + offsetX: 0, - /** - * Gradient class - * @class fabric.Gradient - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients} - * @see {@link fabric.Gradient#initialize} for constructor definition - */ - fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { + /** + * Vertical offset of the control from the defined position. In pixels + * Positive offset moves the control to the bottom, negative to the top. + * @type {Number} + * @default 0 + */ + offsetY: 0, - /** - * Horizontal offset for aligning gradients coming from SVG when outside pathgroups - * @type Number - * @default 0 - */ - offsetX: 0, + /** + * Sets the length of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeX: null, - /** - * Vertical offset for aligning gradients coming from SVG when outside pathgroups - * @type Number - * @default 0 - */ - offsetY: 0, + /** + * Sets the height of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeY: null, - /** - * A transform matrix to apply to the gradient before painting. - * Imported from svg gradients, is not applied with the current transform in the center. - * Before this transform is applied, the origin point is at the top left corner of the object - * plus the addition of offsetY and offsetX. - * @type Number[] - * @default null - */ - gradientTransform: null, + /** + * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeX: null, - /** - * coordinates units for coords. - * If `pixels`, the number of coords are in the same unit of width / height. - * If set as `percentage` the coords are still a number, but 1 means 100% of width - * for the X and 100% of the height for the y. It can be bigger than 1 and negative. - * allowed values pixels or percentage. - * @type String - * @default 'pixels' - */ - gradientUnits: 'pixels', + /** + * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeY: null, - /** - * Gradient type linear or radial - * @type String - * @default 'pixels' - */ - type: 'linear', - - /** - * Constructor - * @param {Object} options Options object with type, coords, gradientUnits and colorStops - * @param {Object} [options.type] gradient type linear or radial - * @param {Object} [options.gradientUnits] gradient units - * @param {Object} [options.offsetX] SVG import compatibility - * @param {Object} [options.offsetY] SVG import compatibility - * @param {Object[]} options.colorStops contains the colorstops. - * @param {Object} options.coords contains the coords of the gradient - * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial - * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial - * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial - * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial - * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle - * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle - * @return {fabric.Gradient} thisArg - */ - initialize: function(options) { - options || (options = { }); - options.coords || (options.coords = { }); + /** + * Css cursor style to display when the control is hovered. + * if the method `cursorStyleHandler` is provided, this property is ignored. + * @type {String} + * @default 'crosshair' + */ + cursorStyle: 'crosshair', - var coords, _this = this; + /** + * If controls has an offsetY or offsetX, draw a line that connects + * the control to the bounding box + * @type {Boolean} + * @default false + */ + withConnection: false, - // sets everything, then coords and colorstops get sets again - Object.keys(options).forEach(function(option) { - _this[option] = options[option]; - }); + /** + * The control actionHandler, provide one to handle action ( control being moved ) + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + actionHandler: function(/* eventData, transformData, x, y */) { }, - if (this.id) { - this.id += '_' + fabric.Object.__uid++; - } - else { - this.id = fabric.Object.__uid++; - } + /** + * The control handler for mouse down, provide one to handle mouse down on control + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseDownHandler: function(/* eventData, transformData, x, y */) { }, - coords = { - x1: options.coords.x1 || 0, - y1: options.coords.y1 || 0, - x2: options.coords.x2 || 0, - y2: options.coords.y2 || 0 - }; + /** + * The control mouseUpHandler, provide one to handle an effect on mouse up. + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseUpHandler: function(/* eventData, transformData, x, y */) { }, - if (this.type === 'radial') { - coords.r1 = options.coords.r1 || 0; - coords.r2 = options.coords.r2 || 0; - } + /** + * Returns control actionHandler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getActionHandler: function(/* eventData, fabricObject, control */) { + return this.actionHandler; + }, - this.coords = coords; - this.colorStops = options.colorStops.slice(); - }, + /** + * Returns control mouseDown handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseDownHandler: function(/* eventData, fabricObject, control */) { + return this.mouseDownHandler; + }, - /** - * Adds another colorStop - * @param {Object} colorStop Object with offset and color - * @return {fabric.Gradient} thisArg - */ - addColorStop: function(colorStops) { - for (var position in colorStops) { - var color = new fabric.Color(colorStops[position]); - this.colorStops.push({ - offset: parseFloat(position), - color: color.toRgb(), - opacity: color.getAlpha() - }); - } - return this; - }, + /** + * Returns control mouseUp handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseUpHandler: function(/* eventData, fabricObject, control */) { + return this.mouseUpHandler; + }, - /** - * Returns object representation of a gradient - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} - */ - toObject: function(propertiesToInclude) { - var object = { - type: this.type, - coords: this.coords, - colorStops: this.colorStops, - offsetX: this.offsetX, - offsetY: this.offsetY, - gradientUnits: this.gradientUnits, - gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); - - return object; - }, - - /* _TO_SVG_START_ */ - /** - * Returns SVG representation of an gradient - * @param {Object} object Object to create a gradient for - * @return {String} SVG representation of an gradient (linear/radial) - */ - toSVG: function(object, options) { - var coords = clone(this.coords, true), i, len, options = options || {}, - markup, commonAttributes, colorStops = clone(this.colorStops, true), - needsSwap = coords.r1 > coords.r2, - transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), - offsetX = -this.offsetX, offsetY = -this.offsetY, - withViewport = !!options.additionalTransform, - gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; - // colorStops must be sorted ascending - colorStops.sort(function(a, b) { - return a.offset - b.offset; - }); + /** + * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate + * function you can pass one in the constructor + * the cursorStyle property + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + cursorStyleHandler: function(eventData, control /* fabricObject */) { + return control.cursorStyle; + }, - if (gradientUnits === 'objectBoundingBox') { - offsetX /= object.width; - offsetY /= object.height; - } - else { - offsetX += object.width / 2; - offsetY += object.height / 2; - } - if (object.type === 'path' && this.gradientUnits !== 'percentage') { - offsetX -= object.pathOffset.x; - offsetY -= object.pathOffset.y; - } + /** + * Returns the action name. The basic implementation just return the actionName property. + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + getActionName: function(eventData, control /* fabricObject */) { + return control.actionName; + }, + /** + * Returns controls visibility + * @param {fabric.Object} object on which the control is displayed + * @param {String} controlKey key where the control is memorized on the + * @return {Boolean} + */ + getVisibility: function(fabricObject, controlKey) { + var objectVisibility = fabricObject._controlsVisibility; + if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { + return objectVisibility[controlKey]; + } + return this.visible; + }, - transform[4] -= offsetX; - transform[5] -= offsetY; + /** + * Sets controls visibility + * @param {Boolean} visibility for the object + * @return {Void} + */ + setVisibility: function(visibility /* name, fabricObject */) { + this.visible = visibility; + }, - commonAttributes = 'id="SVGID_' + this.id + - '" gradientUnits="' + gradientUnits + '"'; - commonAttributes += ' gradientTransform="' + (withViewport ? - options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; - if (this.type === 'linear') { - markup = [ - '\n' - ]; - } - else if (this.type === 'radial') { - // svg radial gradient has just 1 radius. the biggest. - markup = [ - '\n' - ]; - } + positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { + var point = fabric.util.transformPoint({ + x: this.x * dim.x + this.offsetX, + y: this.y * dim.y + this.offsetY }, finalMatrix); + return point; + }, - if (this.type === 'radial') { - if (needsSwap) { - // svg goes from internal to external radius. if radius are inverted, swap color stops. - colorStops = colorStops.concat(); - colorStops.reverse(); - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset = 1 - colorStops[i].offset; - } + /** + * Returns the coords for this control based on object values. + * @param {Number} objectAngle angle from the fabric object holding the control + * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if + * isTouch is true) + * @param {Number} centerX x coordinate where the control center should be + * @param {Number} centerY y coordinate where the control center should be + * @param {boolean} isTouch true if touch corner, false if normal corner + */ + calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { + var cosHalfOffset, + sinHalfOffset, + cosHalfOffsetComp, + sinHalfOffsetComp, + xSize = (isTouch) ? this.touchSizeX : this.sizeX, + ySize = (isTouch) ? this.touchSizeY : this.sizeY; + if (xSize && ySize && xSize !== ySize) { + // handle rectangular corners + var controlTriangleAngle = Math.atan2(ySize, xSize); + var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; + var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); + // use complementary angle for two corners + cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); + sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); } - var minRadius = Math.min(coords.r1, coords.r2); - if (minRadius > 0) { - // i have to shift all colorStops and add new one in 0. - var maxRadius = Math.max(coords.r1, coords.r2), - percentageShift = minRadius / maxRadius; - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); - } + else { + // handle square corners + // use default object corner size unless size is defined + var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; + /* 0.7071067812 stands for sqrt(2)/2 */ + cornerHypotenuse = cornerSize * 0.7071067812; + // complementary angles are equal since they're both 45 degrees + var newTheta = fabric.util.degreesToRadians(45 - objectAngle); + cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); } - } - for (i = 0, len = colorStops.length; i < len; i++) { - var colorStop = colorStops[i]; - markup.push( - '\n' - ); - } + return { + tl: { + x: centerX - sinHalfOffsetComp, + y: centerY - cosHalfOffsetComp, + }, + tr: { + x: centerX + cosHalfOffset, + y: centerY - sinHalfOffset, + }, + bl: { + x: centerX - cosHalfOffset, + y: centerY + sinHalfOffset, + }, + br: { + x: centerX + sinHalfOffsetComp, + y: centerY + cosHalfOffsetComp, + }, + }; + }, + + /** + * Render function for the control. + * When this function runs the context is unscaled. unrotate. Just retina scaled. + * all the functions will have to translate to the point left,top before starting Drawing + * if they want to draw a control where the position is detected. + * left and top are the result of the positionHandler function + * @param {RenderingContext2D} ctx the context where the control will be drawn + * @param {Number} left position of the canvas where we are about to render the control. + * @param {Number} top position of the canvas where we are about to render the control. + * @param {Object} styleOverride + * @param {fabric.Object} fabricObject the object where the control is about to be rendered + */ + render: function(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { + case 'circle': + fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); + break; + default: + fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); + } + }, + }; - markup.push((this.type === 'linear' ? '\n' : '\n')); + })(typeof exports !== 'undefined' ? exports : window); - return markup.join(''); - }, - /* _TO_SVG_END_ */ + (function(global) { + var fabric = global.fabric; + /* _FROM_SVG_START_ */ + function getColorStop(el, multiplier) { + var style = el.getAttribute('style'), + offset = el.getAttribute('offset') || 0, + color, colorAlpha, opacity, i; - /** - * Returns an instance of CanvasGradient - * @param {CanvasRenderingContext2D} ctx Context to render on - * @return {CanvasGradient} - */ - toLive: function(ctx) { - var gradient, coords = fabric.util.object.clone(this.coords), i, len; + // convert percents to absolute values + offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); + offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; + if (style) { + var keyValuePairs = style.split(/\s*;\s*/); - if (!this.type) { - return; + if (keyValuePairs[keyValuePairs.length - 1] === '') { + keyValuePairs.pop(); + } + + for (i = keyValuePairs.length; i--; ) { + + var split = keyValuePairs[i].split(/\s*:\s*/), + key = split[0].trim(), + value = split[1].trim(); + + if (key === 'stop-color') { + color = value; + } + else if (key === 'stop-opacity') { + opacity = value; + } + } } - if (this.type === 'linear') { - gradient = ctx.createLinearGradient( - coords.x1, coords.y1, coords.x2, coords.y2); + if (!color) { + color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; } - else if (this.type === 'radial') { - gradient = ctx.createRadialGradient( - coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); + if (!opacity) { + opacity = el.getAttribute('stop-opacity'); } - for (i = 0, len = this.colorStops.length; i < len; i++) { - var color = this.colorStops[i].color, - opacity = this.colorStops[i].opacity, - offset = this.colorStops[i].offset; + color = new fabric.Color(color); + colorAlpha = color.getAlpha(); + opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); + opacity *= colorAlpha * multiplier; - if (typeof opacity !== 'undefined') { - color = new fabric.Color(color).setAlpha(opacity).toRgba(); - } - gradient.addColorStop(offset, color); - } + return { + offset: offset, + color: color.toRgb(), + opacity: opacity + }; + } - return gradient; + function getLinearCoords(el) { + return { + x1: el.getAttribute('x1') || 0, + y1: el.getAttribute('y1') || 0, + x2: el.getAttribute('x2') || '100%', + y2: el.getAttribute('y2') || 0 + }; } - }); - fabric.util.object.extend(fabric.Gradient, { + function getRadialCoords(el) { + return { + x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', + y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', + r1: 0, + x2: el.getAttribute('cx') || '50%', + y2: el.getAttribute('cy') || '50%', + r2: el.getAttribute('r') || '50%' + }; + } + /* _FROM_SVG_END_ */ - /* _FROM_SVG_START_ */ /** - * Returns {@link fabric.Gradient} instance from an SVG element - * @static - * @memberOf fabric.Gradient - * @param {SVGGradientElement} el SVG gradient element - * @param {fabric.Object} instance - * @param {String} opacityAttr A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity. - * @param {Object} svgOptions an object containing the size of the SVG in order to parse correctly gradients - * that uses gradientUnits as 'userSpaceOnUse' and percentages. - * @param {Object.number} viewBoxWidth width part of the viewBox attribute on svg - * @param {Object.number} viewBoxHeight height part of the viewBox attribute on svg - * @param {Object.number} width width part of the svg tag if viewBox is not specified - * @param {Object.number} height height part of the svg tag if viewBox is not specified - * @return {fabric.Gradient} Gradient instance - * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement - * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement - */ - fromElement: function(el, instance, opacityAttr, svgOptions) { - /** - * @example: - * - * - * - * - * - * - * OR - * - * - * - * - * - * - * OR - * - * - * - * - * - * - * - * OR - * - * - * - * - * - * - * - */ + * Gradient class + * @class fabric.Gradient + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients} + * @see {@link fabric.Gradient#initialize} for constructor definition + */ + fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { - var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); - multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; - if (isNaN(multiplier)) { - multiplier = 1; - } + /** + * Horizontal offset for aligning gradients coming from SVG when outside pathgroups + * @type Number + * @default 0 + */ + offsetX: 0, - var colorStopEls = el.getElementsByTagName('stop'), - type, - gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? - 'pixels' : 'percentage', - gradientTransform = el.getAttribute('gradientTransform') || '', - colorStops = [], - coords, i, offsetX = 0, offsetY = 0, - transformMatrix; - if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { - type = 'linear'; - coords = getLinearCoords(el); - } - else { - type = 'radial'; - coords = getRadialCoords(el); - } + /** + * Vertical offset for aligning gradients coming from SVG when outside pathgroups + * @type Number + * @default 0 + */ + offsetY: 0, - for (i = colorStopEls.length; i--; ) { - colorStops.push(getColorStop(colorStopEls[i], multiplier)); - } + /** + * A transform matrix to apply to the gradient before painting. + * Imported from svg gradients, is not applied with the current transform in the center. + * Before this transform is applied, the origin point is at the top left corner of the object + * plus the addition of offsetY and offsetX. + * @type Number[] + * @default null + */ + gradientTransform: null, - transformMatrix = fabric.parseTransformAttribute(gradientTransform); + /** + * coordinates units for coords. + * If `pixels`, the number of coords are in the same unit of width / height. + * If set as `percentage` the coords are still a number, but 1 means 100% of width + * for the X and 100% of the height for the y. It can be bigger than 1 and negative. + * allowed values pixels or percentage. + * @type String + * @default 'pixels' + */ + gradientUnits: 'pixels', - __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); + /** + * Gradient type linear or radial + * @type String + * @default 'pixels' + */ + type: 'linear', - if (gradientUnits === 'pixels') { - offsetX = -instance.left; - offsetY = -instance.top; - } + /** + * Constructor + * @param {Object} options Options object with type, coords, gradientUnits and colorStops + * @param {Object} [options.type] gradient type linear or radial + * @param {Object} [options.gradientUnits] gradient units + * @param {Object} [options.offsetX] SVG import compatibility + * @param {Object} [options.offsetY] SVG import compatibility + * @param {Object[]} options.colorStops contains the colorstops. + * @param {Object} options.coords contains the coords of the gradient + * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial + * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial + * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial + * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial + * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle + * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle + * @return {fabric.Gradient} thisArg + */ + initialize: function(options) { + options || (options = { }); + options.coords || (options.coords = { }); - var gradient = new fabric.Gradient({ - id: el.getAttribute('id'), - type: type, - coords: coords, - colorStops: colorStops, - gradientUnits: gradientUnits, - gradientTransform: transformMatrix, - offsetX: offsetX, - offsetY: offsetY, - }); + var coords, _this = this; - return gradient; - } - /* _FROM_SVG_END_ */ - }); + // sets everything, then coords and colorstops get sets again + Object.keys(options).forEach(function(option) { + _this[option] = options[option]; + }); - /** - * @private - */ - function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { - var propValue, finalValue; - Object.keys(options).forEach(function(prop) { - propValue = options[prop]; - if (propValue === 'Infinity') { - finalValue = 1; - } - else if (propValue === '-Infinity') { - finalValue = 0; - } - else { - finalValue = parseFloat(options[prop], 10); - if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { - finalValue *= 0.01; - if (gradientUnits === 'pixels') { - // then we need to fix those percentages here in svg parsing - if (prop === 'x1' || prop === 'x2' || prop === 'r2') { - finalValue *= svgOptions.viewBoxWidth || svgOptions.width; - } - if (prop === 'y1' || prop === 'y2') { - finalValue *= svgOptions.viewBoxHeight || svgOptions.height; - } - } + if (this.id) { + this.id += '_' + fabric.Object.__uid++; + } + else { + this.id = fabric.Object.__uid++; } - } - options[prop] = finalValue; - }); - } -})(); + coords = { + x1: options.coords.x1 || 0, + y1: options.coords.y1 || 0, + x2: options.coords.x2 || 0, + y2: options.coords.y2 || 0 + }; -(function() { + if (this.type === 'radial') { + coords.r1 = options.coords.r1 || 0; + coords.r2 = options.coords.r2 || 0; + } - 'use strict'; + this.coords = coords; + this.colorStops = options.colorStops.slice(); + }, - var toFixed = fabric.util.toFixed; + /** + * Adds another colorStop + * @param {Object} colorStop Object with offset and color + * @return {fabric.Gradient} thisArg + */ + addColorStop: function(colorStops) { + for (var position in colorStops) { + var color = new fabric.Color(colorStops[position]); + this.colorStops.push({ + offset: parseFloat(position), + color: color.toRgb(), + opacity: color.getAlpha() + }); + } + return this; + }, - /** - * Pattern class - * @class fabric.Pattern - * @see {@link http://fabricjs.com/patterns|Pattern demo} - * @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo} - * @see {@link fabric.Pattern#initialize} for constructor definition - */ + /** + * Returns object representation of a gradient + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} + */ + toObject: function(propertiesToInclude) { + var object = { + type: this.type, + coords: this.coords, + colorStops: this.colorStops, + offsetX: this.offsetX, + offsetY: this.offsetY, + gradientUnits: this.gradientUnits, + gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); + return object; + }, - fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of an gradient + * @param {Object} object Object to create a gradient for + * @return {String} SVG representation of an gradient (linear/radial) + */ + toSVG: function(object, options) { + var coords = this.coords, i, len, options = options || {}, + markup, commonAttributes, colorStops = this.colorStops, + needsSwap = coords.r1 > coords.r2, + transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), + offsetX = -this.offsetX, offsetY = -this.offsetY, + withViewport = !!options.additionalTransform, + gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; + // colorStops must be sorted ascending + colorStops.sort(function(a, b) { + return a.offset - b.offset; + }); - /** - * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) - * @type String - * @default - */ - repeat: 'repeat', + if (gradientUnits === 'objectBoundingBox') { + offsetX /= object.width; + offsetY /= object.height; + } + else { + offsetX += object.width / 2; + offsetY += object.height / 2; + } + if (object.type === 'path' && this.gradientUnits !== 'percentage') { + offsetX -= object.pathOffset.x; + offsetY -= object.pathOffset.y; + } - /** - * Pattern horizontal offset from object's left/top corner - * @type Number - * @default - */ - offsetX: 0, - /** - * Pattern vertical offset from object's left/top corner - * @type Number - * @default - */ - offsetY: 0, + transform[4] -= offsetX; + transform[5] -= offsetY; - /** - * crossOrigin value (one of "", "anonymous", "use-credentials") - * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes - * @type String - * @default - */ - crossOrigin: '', + commonAttributes = 'id="SVGID_' + this.id + + '" gradientUnits="' + gradientUnits + '"'; + commonAttributes += ' gradientTransform="' + (withViewport ? + options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; - /** - * transform matrix to change the pattern, imported from svgs. - * @type Array - * @default - */ - patternTransform: null, + if (this.type === 'linear') { + markup = [ + '\n' + ]; + } + else if (this.type === 'radial') { + // svg radial gradient has just 1 radius. the biggest. + markup = [ + '\n' + ]; + } - /** - * Constructor - * @param {Object} [options] Options object - * @param {Function} [callback] function to invoke after callback init. - * @return {fabric.Pattern} thisArg - */ - initialize: function(options, callback) { - options || (options = { }); + if (this.type === 'radial') { + if (needsSwap) { + // svg goes from internal to external radius. if radius are inverted, swap color stops. + colorStops = colorStops.concat(); + colorStops.reverse(); + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset = 1 - colorStops[i].offset; + } + } + var minRadius = Math.min(coords.r1, coords.r2); + if (minRadius > 0) { + // i have to shift all colorStops and add new one in 0. + var maxRadius = Math.max(coords.r1, coords.r2), + percentageShift = minRadius / maxRadius; + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); + } + } + } - this.id = fabric.Object.__uid++; - this.setOptions(options); - if (!options.source || (options.source && typeof options.source !== 'string')) { - callback && callback(this); - return; - } - else { - // img src string - var _this = this; - this.source = fabric.util.createImage(); - fabric.util.loadImage(options.source, function(img, isError) { - _this.source = img; - callback && callback(_this, isError); - }, null, this.crossOrigin); - } - }, + for (i = 0, len = colorStops.length; i < len; i++) { + var colorStop = colorStops[i]; + markup.push( + '\n' + ); + } - /** - * Returns object representation of a pattern - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of a pattern instance - */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - source, object; + markup.push((this.type === 'linear' ? '\n' : '\n')); - // element - if (typeof this.source.src === 'string') { - source = this.source.src; - } - // element - else if (typeof this.source === 'object' && this.source.toDataURL) { - source = this.source.toDataURL(); - } + return markup.join(''); + }, + /* _TO_SVG_END_ */ - object = { - type: 'pattern', - source: source, - repeat: this.repeat, - crossOrigin: this.crossOrigin, - offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), - offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), - patternTransform: this.patternTransform ? this.patternTransform.concat() : null - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); + /** + * Returns an instance of CanvasGradient + * @param {CanvasRenderingContext2D} ctx Context to render on + * @return {CanvasGradient} + */ + toLive: function(ctx) { + var gradient, coords = this.coords, i, len; - return object; - }, + if (!this.type) { + return; + } - /* _TO_SVG_START_ */ - /** - * Returns SVG representation of a pattern - * @param {fabric.Object} object - * @return {String} SVG representation of a pattern - */ - toSVG: function(object) { - var patternSource = typeof this.source === 'function' ? this.source() : this.source, - patternWidth = patternSource.width / object.width, - patternHeight = patternSource.height / object.height, - patternOffsetX = this.offsetX / object.width, - patternOffsetY = this.offsetY / object.height, - patternImgSrc = ''; - if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { - patternHeight = 1; - if (patternOffsetY) { - patternHeight += Math.abs(patternOffsetY); + if (this.type === 'linear') { + gradient = ctx.createLinearGradient( + coords.x1, coords.y1, coords.x2, coords.y2); } - } - if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { - patternWidth = 1; - if (patternOffsetX) { - patternWidth += Math.abs(patternOffsetX); + else if (this.type === 'radial') { + gradient = ctx.createRadialGradient( + coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); } - } - if (patternSource.src) { - patternImgSrc = patternSource.src; - } - else if (patternSource.toDataURL) { - patternImgSrc = patternSource.toDataURL(); - } + for (i = 0, len = this.colorStops.length; i < len; i++) { + var color = this.colorStops[i].color, + opacity = this.colorStops[i].opacity, + offset = this.colorStops[i].offset; - return '\n' + - '\n' + - '\n'; - }, - /* _TO_SVG_END_ */ + if (typeof opacity !== 'undefined') { + color = new fabric.Color(color).setAlpha(opacity).toRgba(); + } + gradient.addColorStop(offset, color); + } - setOptions: function(options) { - for (var prop in options) { - this[prop] = options[prop]; + return gradient; } - }, + }); - /** - * Returns an instance of CanvasPattern - * @param {CanvasRenderingContext2D} ctx Context to create pattern - * @return {CanvasPattern} - */ - toLive: function(ctx) { - var source = this.source; - // if the image failed to load, return, and allow rest to continue loading - if (!source) { - return ''; - } + fabric.util.object.extend(fabric.Gradient, { - // if an image - if (typeof source.src !== 'undefined') { - if (!source.complete) { - return ''; + /* _FROM_SVG_START_ */ + /** + * Returns {@link fabric.Gradient} instance from an SVG element + * @static + * @memberOf fabric.Gradient + * @param {SVGGradientElement} el SVG gradient element + * @param {fabric.Object} instance + * @param {String} opacityAttr A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity. + * @param {Object} svgOptions an object containing the size of the SVG in order to parse correctly gradients + * that uses gradientUnits as 'userSpaceOnUse' and percentages. + * @param {Object.number} viewBoxWidth width part of the viewBox attribute on svg + * @param {Object.number} viewBoxHeight height part of the viewBox attribute on svg + * @param {Object.number} width width part of the svg tag if viewBox is not specified + * @param {Object.number} height height part of the svg tag if viewBox is not specified + * @return {fabric.Gradient} Gradient instance + * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement + * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement + */ + fromElement: function(el, instance, opacityAttr, svgOptions) { + /** + * @example: + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * + */ + + var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); + multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; + if (isNaN(multiplier)) { + multiplier = 1; + } + + var colorStopEls = el.getElementsByTagName('stop'), + type, + gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? + 'pixels' : 'percentage', + gradientTransform = el.getAttribute('gradientTransform') || '', + colorStops = [], + coords, i, offsetX = 0, offsetY = 0, + transformMatrix; + if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { + type = 'linear'; + coords = getLinearCoords(el); } - if (source.naturalWidth === 0 || source.naturalHeight === 0) { - return ''; + else { + type = 'radial'; + coords = getRadialCoords(el); } - } - return ctx.createPattern(source, this.repeat); - } - }); -})(); + for (i = colorStopEls.length; i--; ) { + colorStops.push(getColorStop(colorStopEls[i], multiplier)); + } -(function(global) { + transformMatrix = fabric.parseTransformAttribute(gradientTransform); - 'use strict'; + __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); - var fabric = global.fabric || (global.fabric = { }), - toFixed = fabric.util.toFixed; + if (gradientUnits === 'pixels') { + offsetX = -instance.left; + offsetY = -instance.top; + } - if (fabric.Shadow) { - fabric.warn('fabric.Shadow is already defined.'); - return; - } + var gradient = new fabric.Gradient({ + id: el.getAttribute('id'), + type: type, + coords: coords, + colorStops: colorStops, + gradientUnits: gradientUnits, + gradientTransform: transformMatrix, + offsetX: offsetX, + offsetY: offsetY, + }); - /** - * Shadow class - * @class fabric.Shadow - * @see {@link http://fabricjs.com/shadows|Shadow demo} - * @see {@link fabric.Shadow#initialize} for constructor definition - */ - fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { + return gradient; + } + /* _FROM_SVG_END_ */ + }); /** - * Shadow color - * @type String - * @default + * @private */ - color: 'rgb(0,0,0)', + function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { + var propValue, finalValue; + Object.keys(options).forEach(function(prop) { + propValue = options[prop]; + if (propValue === 'Infinity') { + finalValue = 1; + } + else if (propValue === '-Infinity') { + finalValue = 0; + } + else { + finalValue = parseFloat(options[prop], 10); + if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { + finalValue *= 0.01; + if (gradientUnits === 'pixels') { + // then we need to fix those percentages here in svg parsing + if (prop === 'x1' || prop === 'x2' || prop === 'r2') { + finalValue *= svgOptions.viewBoxWidth || svgOptions.width; + } + if (prop === 'y1' || prop === 'y2') { + finalValue *= svgOptions.viewBoxHeight || svgOptions.height; + } + } + } + } + options[prop] = finalValue; + }); + } + })(typeof exports !== 'undefined' ? exports : window); - /** - * Shadow blur - * @type Number - */ - blur: 0, + (function(global) { + var fabric = global.fabric, toFixed = fabric.util.toFixed; /** - * Shadow horizontal offset - * @type Number - * @default + * Pattern class + * @class fabric.Pattern + * @see {@link http://fabricjs.com/patterns|Pattern demo} + * @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo} + * @see {@link fabric.Pattern#initialize} for constructor definition */ - offsetX: 0, - /** - * Shadow vertical offset - * @type Number - * @default - */ - offsetY: 0, - /** - * Whether the shadow should affect stroke operations - * @type Boolean - * @default - */ - affectStroke: false, + fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { - /** - * Indicates whether toObject should include default values - * @type Boolean - * @default - */ - includeDefaultValues: true, + /** + * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) + * @type String + * @default + */ + repeat: 'repeat', - /** - * When `false`, the shadow will scale with the object. - * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale. - * default to false - * @type Boolean - * @default - */ - nonScaling: false, + /** + * Pattern horizontal offset from object's left/top corner + * @type Number + * @default + */ + offsetX: 0, - /** - * Constructor - * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px") - * @return {fabric.Shadow} thisArg - */ - initialize: function(options) { + /** + * Pattern vertical offset from object's left/top corner + * @type Number + * @default + */ + offsetY: 0, - if (typeof options === 'string') { - options = this._parseShadow(options); - } + /** + * crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @type String + * @default + */ + crossOrigin: '', - for (var prop in options) { - this[prop] = options[prop]; - } + /** + * transform matrix to change the pattern, imported from svgs. + * @type Array + * @default + */ + patternTransform: null, - this.id = fabric.Object.__uid++; - }, + type: 'pattern', - /** - * @private - * @param {String} shadow Shadow value to parse - * @return {Object} Shadow object with color, offsetX, offsetY and blur - */ - _parseShadow: function(shadow) { - var shadowStr = shadow.trim(), - offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], - color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; + /** + * Constructor + * @param {Object} [options] Options object + * @param {option.source} [source] the pattern source, eventually empty or a drawable + * @return {fabric.Pattern} thisArg + */ + initialize: function(options) { + options || (options = { }); + this.id = fabric.Object.__uid++; + this.setOptions(options); + }, - return { - color: color.trim(), - offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, - offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, - blur: parseFloat(offsetsAndBlur[3], 10) || 0 - }; - }, - - /** - * Returns a string representation of an instance - * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow - * @return {String} Returns CSS3 text-shadow declaration - */ - toString: function() { - return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); - }, - - /* _TO_SVG_START_ */ - /** - * Returns SVG representation of a shadow - * @param {fabric.Object} object - * @return {String} SVG representation of a shadow - */ - toSVG: function(object) { - var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - offset = fabric.util.rotateVector( - { x: this.offsetX, y: this.offsetY }, - fabric.util.degreesToRadians(-object.angle)), - BLUR_BOX = 20, color = new fabric.Color(this.color); - - if (object.width && object.height) { - //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion - // we add some extra space to filter box to contain the blur ( 20 ) - fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - } - if (object.flipX) { - offset.x *= -1; - } - if (object.flipY) { - offset.y *= -1; - } - - return ( - '\n' + - '\t\n' + - '\t\n' + - '\t\n' + - '\t\n' + - '\t\n' + - '\t\t\n' + - '\t\t\n' + - '\t\n' + - '\n'); - }, - /* _TO_SVG_END_ */ - - /** - * Returns object representation of a shadow - * @return {Object} Object representation of a shadow instance - */ - toObject: function() { - if (this.includeDefaultValues) { - return { - color: this.color, - blur: this.blur, - offsetX: this.offsetX, - offsetY: this.offsetY, - affectStroke: this.affectStroke, - nonScaling: this.nonScaling + /** + * Returns object representation of a pattern + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of a pattern instance + */ + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + source, object; + + // element + if (typeof this.source.src === 'string') { + source = this.source.src; + } + // element + else if (typeof this.source === 'object' && this.source.toDataURL) { + source = this.source.toDataURL(); + } + + object = { + type: 'pattern', + source: source, + repeat: this.repeat, + crossOrigin: this.crossOrigin, + offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), + offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), + patternTransform: this.patternTransform ? this.patternTransform.concat() : null }; - } - var obj = { }, proto = fabric.Shadow.prototype; - - ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { - if (this[prop] !== proto[prop]) { - obj[prop] = this[prop]; - } - }, this); - - return obj; - } - }); - - /** - * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") - * @static - * @field - * @memberOf fabric.Shadow - */ - // eslint-disable-next-line max-len - fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; + fabric.util.populateWithProperties(this, object, propertiesToInclude); -})(typeof exports !== 'undefined' ? exports : this); + return object; + }, + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of a pattern + * @param {fabric.Object} object + * @return {String} SVG representation of a pattern + */ + toSVG: function(object) { + var patternSource = typeof this.source === 'function' ? this.source() : this.source, + patternWidth = patternSource.width / object.width, + patternHeight = patternSource.height / object.height, + patternOffsetX = this.offsetX / object.width, + patternOffsetY = this.offsetY / object.height, + patternImgSrc = ''; + if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { + patternHeight = 1; + if (patternOffsetY) { + patternHeight += Math.abs(patternOffsetY); + } + } + if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { + patternWidth = 1; + if (patternOffsetX) { + patternWidth += Math.abs(patternOffsetX); + } -(function () { + } + if (patternSource.src) { + patternImgSrc = patternSource.src; + } + else if (patternSource.toDataURL) { + patternImgSrc = patternSource.toDataURL(); + } - 'use strict'; + return '\n' + + '\n' + + '\n'; + }, + /* _TO_SVG_END_ */ - if (fabric.StaticCanvas) { - fabric.warn('fabric.StaticCanvas is already defined.'); - return; - } + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, - // aliases for faster resolution - var extend = fabric.util.object.extend, - getElementOffset = fabric.util.getElementOffset, - removeFromArray = fabric.util.removeFromArray, - toFixed = fabric.util.toFixed, - transformPoint = fabric.util.transformPoint, - invertTransform = fabric.util.invertTransform, - getNodeCanvas = fabric.util.getNodeCanvas, - createCanvasElement = fabric.util.createCanvasElement, + /** + * Returns an instance of CanvasPattern + * @param {CanvasRenderingContext2D} ctx Context to create pattern + * @return {CanvasPattern} + */ + toLive: function(ctx) { + var source = this.source; + // if the image failed to load, return, and allow rest to continue loading + if (!source) { + return ''; + } - CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element'); + // if an image + if (typeof source.src !== 'undefined') { + if (!source.complete) { + return ''; + } + if (source.naturalWidth === 0 || source.naturalHeight === 0) { + return ''; + } + } + return ctx.createPattern(source, this.repeat); + } + }); - /** - * Static canvas class - * @class fabric.StaticCanvas - * @mixes fabric.Collection - * @mixes fabric.Observable - * @see {@link http://fabricjs.com/static_canvas|StaticCanvas demo} - * @see {@link fabric.StaticCanvas#initialize} for constructor definition - * @fires before:render - * @fires after:render - * @fires canvas:cleared - * @fires object:added - * @fires object:removed - */ - fabric.StaticCanvas = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.StaticCanvas.prototype */ { + fabric.Pattern.fromObject = function(object) { + var patternOptions = Object.assign({}, object); + return fabric.util.loadImage(object.source, { crossOrigin: object.crossOrigin }) + .then(function(img) { + patternOptions.source = img; + return new fabric.Pattern(patternOptions); + }); + }; + })(typeof exports !== 'undefined' ? exports : window); - /** - * Constructor - * @param {HTMLElement | String} el <canvas> element to initialize instance on - * @param {Object} [options] Options object - * @return {Object} thisArg - */ - initialize: function(el, options) { - options || (options = { }); - this.renderAndResetBound = this.renderAndReset.bind(this); - this.requestRenderAllBound = this.requestRenderAll.bind(this); - this._initStatic(el, options); - }, + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + toFixed = fabric.util.toFixed; /** - * Background color of canvas instance. - * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}. - * @type {(String|fabric.Pattern)} - * @default + * Shadow class + * @class fabric.Shadow + * @see {@link http://fabricjs.com/shadows|Shadow demo} + * @see {@link fabric.Shadow#initialize} for constructor definition */ - backgroundColor: '', + fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { - /** - * Background image of canvas instance. - * since 2.4.0 image caching is active, please when putting an image as background, add to the - * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom - * vale. As an alternative you can disable image objectCaching - * @type fabric.Image - * @default - */ - backgroundImage: null, + /** + * Shadow color + * @type String + * @default + */ + color: 'rgb(0,0,0)', - /** - * Overlay color of canvas instance. - * Should be set via {@link fabric.StaticCanvas#setOverlayColor} - * @since 1.3.9 - * @type {(String|fabric.Pattern)} - * @default - */ - overlayColor: '', + /** + * Shadow blur + * @type Number + */ + blur: 0, - /** - * Overlay image of canvas instance. - * since 2.4.0 image caching is active, please when putting an image as overlay, add to the - * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom - * vale. As an alternative you can disable image objectCaching - * @type fabric.Image - * @default - */ - overlayImage: null, + /** + * Shadow horizontal offset + * @type Number + * @default + */ + offsetX: 0, - /** - * Indicates whether toObject/toDatalessObject should include default values - * if set to false, takes precedence over the object value. - * @type Boolean - * @default - */ - includeDefaultValues: true, + /** + * Shadow vertical offset + * @type Number + * @default + */ + offsetY: 0, - /** - * Indicates whether objects' state should be saved - * @type Boolean - * @default - */ - stateful: false, + /** + * Whether the shadow should affect stroke operations + * @type Boolean + * @default + */ + affectStroke: false, - /** - * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, - * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. - * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once - * since the renders are quequed and executed one per frame. - * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) - * Left default to true to do not break documentation and old app, fiddles. - * @type Boolean - * @default - */ - renderOnAddRemove: true, + /** + * Indicates whether toObject should include default values + * @type Boolean + * @default + */ + includeDefaultValues: true, - /** - * Indicates whether object controls (borders/controls) are rendered above overlay image - * @type Boolean - * @default - */ - controlsAboveOverlay: false, + /** + * When `false`, the shadow will scale with the object. + * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale. + * default to false + * @type Boolean + * @default + */ + nonScaling: false, - /** - * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas - * @type Boolean - * @default - */ - allowTouchScrolling: false, + /** + * Constructor + * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px") + * @return {fabric.Shadow} thisArg + */ + initialize: function(options) { - /** - * Indicates whether this canvas will use image smoothing, this is on by default in browsers - * @type Boolean - * @default - */ - imageSmoothingEnabled: true, + if (typeof options === 'string') { + options = this._parseShadow(options); + } - /** - * The transformation (a Canvas 2D API transform matrix) which focuses the viewport - * @type Array - * @example Default transform - * canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; - * @example Scale by 70% and translate toward bottom-right by 50, without skewing - * canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50]; - * @default - */ - viewportTransform: fabric.iMatrix.concat(), + for (var prop in options) { + this[prop] = options[prop]; + } - /** - * if set to false background image is not affected by viewport transform - * @since 1.6.3 - * @type Boolean - * @default - */ - backgroundVpt: true, + this.id = fabric.Object.__uid++; + }, - /** - * if set to false overlya image is not affected by viewport transform - * @since 1.6.3 - * @type Boolean - * @default - */ - overlayVpt: true, + /** + * @private + * @param {String} shadow Shadow value to parse + * @return {Object} Shadow object with color, offsetX, offsetY and blur + */ + _parseShadow: function(shadow) { + var shadowStr = shadow.trim(), + offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], + color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; - /** - * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens - * @type Boolean - * @default - */ - enableRetinaScaling: true, + return { + color: color.trim(), + offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, + offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, + blur: parseFloat(offsetsAndBlur[3], 10) || 0 + }; + }, - /** - * Describe canvas element extension over design - * properties are tl,tr,bl,br. - * if canvas is not zoomed/panned those points are the four corner of canvas - * if canvas is viewportTransformed you those points indicate the extension - * of canvas element in plain untrasformed coordinates - * The coordinates get updated with @method calcViewportBoundaries. - * @memberOf fabric.StaticCanvas.prototype - */ - vptCoords: { }, + /** + * Returns a string representation of an instance + * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow + * @return {String} Returns CSS3 text-shadow declaration + */ + toString: function() { + return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); + }, - /** - * Based on vptCoords and object.aCoords, skip rendering of objects that - * are not included in current viewport. - * May greatly help in applications with crowded canvas and use of zoom/pan - * If One of the corner of the bounding box of the object is on the canvas - * the objects get rendered. - * @memberOf fabric.StaticCanvas.prototype - * @type Boolean - * @default - */ - skipOffscreen: true, + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of a shadow + * @param {fabric.Object} object + * @return {String} SVG representation of a shadow + */ + toSVG: function(object) { + var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + offset = fabric.util.rotateVector( + { x: this.offsetX, y: this.offsetY }, + fabric.util.degreesToRadians(-object.angle)), + BLUR_BOX = 20, color = new fabric.Color(this.color); + + if (object.width && object.height) { + //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion + // we add some extra space to filter box to contain the blur ( 20 ) + fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + } + if (object.flipX) { + offset.x *= -1; + } + if (object.flipY) { + offset.y *= -1; + } + + return ( + '\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\t\n' + + '\t\t\n' + + '\t\n' + + '\n'); + }, + /* _TO_SVG_END_ */ - /** - * a fabricObject that, without stroke define a clipping area with their shape. filled in black - * the clipPath object gets used when the canvas has rendered, and the context is placed in the - * top left corner of the canvas. - * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true - * @type fabric.Object - */ - clipPath: undefined, + /** + * Returns object representation of a shadow + * @return {Object} Object representation of a shadow instance + */ + toObject: function() { + if (this.includeDefaultValues) { + return { + color: this.color, + blur: this.blur, + offsetX: this.offsetX, + offsetY: this.offsetY, + affectStroke: this.affectStroke, + nonScaling: this.nonScaling + }; + } + var obj = { }, proto = fabric.Shadow.prototype; - /** - * @private - * @param {HTMLElement | String} el <canvas> element to initialize instance on - * @param {Object} [options] Options object - */ - _initStatic: function(el, options) { - var cb = this.requestRenderAllBound; - this._objects = []; - this._createLowerCanvas(el); - this._initOptions(options); - // only initialize retina scaling once - if (!this.interactive) { - this._initRetinaScaling(); - } + ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { + if (this[prop] !== proto[prop]) { + obj[prop] = this[prop]; + } + }, this); - if (options.overlayImage) { - this.setOverlayImage(options.overlayImage, cb); - } - if (options.backgroundImage) { - this.setBackgroundImage(options.backgroundImage, cb); - } - if (options.backgroundColor) { - this.setBackgroundColor(options.backgroundColor, cb); + return obj; } - if (options.overlayColor) { - this.setOverlayColor(options.overlayColor, cb); - } - this.calcOffset(); - }, + }); /** - * @private - */ - _isRetinaScaling: function() { - return (fabric.devicePixelRatio > 1 && this.enableRetinaScaling); - }, + * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") + * @static + * @field + * @memberOf fabric.Shadow + */ + // eslint-disable-next-line max-len + fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; + + })(typeof exports !== 'undefined' ? exports : window); + + (function (global) { + // aliases for faster resolution + var fabric = global.fabric, extend = fabric.util.object.extend, + getElementOffset = fabric.util.getElementOffset, + removeFromArray = fabric.util.removeFromArray, + toFixed = fabric.util.toFixed, + transformPoint = fabric.util.transformPoint, + invertTransform = fabric.util.invertTransform, + getNodeCanvas = fabric.util.getNodeCanvas, + createCanvasElement = fabric.util.createCanvasElement, + + CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element'); + + /** + * Static canvas class + * @class fabric.StaticCanvas + * @mixes fabric.Collection + * @mixes fabric.Observable + * @see {@link http://fabricjs.com/static_canvas|StaticCanvas demo} + * @see {@link fabric.StaticCanvas#initialize} for constructor definition + * @fires before:render + * @fires after:render + * @fires canvas:cleared + * @fires object:added + * @fires object:removed + */ + // eslint-disable-next-line max-len + fabric.StaticCanvas = fabric.util.createClass(fabric.CommonMethods, fabric.Collection, /** @lends fabric.StaticCanvas.prototype */ { - /** - * @private - * @return {Number} retinaScaling if applied, otherwise 1; - */ - getRetinaScaling: function() { - return this._isRetinaScaling() ? Math.max(1, fabric.devicePixelRatio) : 1; - }, + /** + * Constructor + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + }, - /** - * @private - */ - _initRetinaScaling: function() { - if (!this._isRetinaScaling()) { - return; - } - var scaleRatio = fabric.devicePixelRatio; - this.__initRetinaScaling(scaleRatio, this.lowerCanvasEl, this.contextContainer); - if (this.upperCanvasEl) { - this.__initRetinaScaling(scaleRatio, this.upperCanvasEl, this.contextTop); - } - }, + /** + * Background color of canvas instance. + * @type {(String|fabric.Pattern)} + * @default + */ + backgroundColor: '', - __initRetinaScaling: function(scaleRatio, canvas, context) { - canvas.setAttribute('width', this.width * scaleRatio); - canvas.setAttribute('height', this.height * scaleRatio); - context.scale(scaleRatio, scaleRatio); - }, + /** + * Background image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as background, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image + * @default + */ + backgroundImage: null, + /** + * Overlay color of canvas instance. + * @since 1.3.9 + * @type {(String|fabric.Pattern)} + * @default + */ + overlayColor: '', - /** - * Calculates canvas element offset relative to the document - * This method is also attached as "resize" event handler of window - * @return {fabric.Canvas} instance - * @chainable - */ - calcOffset: function () { - this._offset = getElementOffset(this.lowerCanvasEl); - return this; - }, + /** + * Overlay image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as overlay, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image + * @default + */ + overlayImage: null, - /** - * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas - * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to - * @param {Function} callback callback to invoke when image is loaded and set as an overlay - * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}. - * @return {fabric.Canvas} thisArg - * @chainable - * @see {@link http://jsfiddle.net/fabricjs/MnzHT/|jsFiddle demo} - * @example Normal overlayImage with left/top = 0 - * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { - * // Needed to position overlayImage at 0/0 - * originX: 'left', - * originY: 'top' - * }); - * @example overlayImage with different properties - * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { - * opacity: 0.5, - * angle: 45, - * left: 400, - * top: 400, - * originX: 'left', - * originY: 'top' - * }); - * @example Stretched overlayImage #1 - width/height correspond to canvas width/height - * fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img, isError) { - * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); - * canvas.setOverlayImage(img, canvas.renderAll.bind(canvas)); - * }); - * @example Stretched overlayImage #2 - width/height correspond to canvas width/height - * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { - * width: canvas.width, - * height: canvas.height, - * // Needed to position overlayImage at 0/0 - * originX: 'left', - * originY: 'top' - * }); - * @example overlayImage loaded from cross-origin - * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { - * opacity: 0.5, - * angle: 45, - * left: 400, - * top: 400, - * originX: 'left', - * originY: 'top', - * crossOrigin: 'anonymous' - * }); - */ - setOverlayImage: function (image, callback, options) { - return this.__setBgOverlayImage('overlayImage', image, callback, options); - }, - - /** - * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas - * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to - * @param {Function} callback Callback to invoke when image is loaded and set as background - * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}. - * @return {fabric.Canvas} thisArg - * @chainable - * @see {@link http://jsfiddle.net/djnr8o7a/28/|jsFiddle demo} - * @example Normal backgroundImage with left/top = 0 - * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { - * // Needed to position backgroundImage at 0/0 - * originX: 'left', - * originY: 'top' - * }); - * @example backgroundImage with different properties - * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { - * opacity: 0.5, - * angle: 45, - * left: 400, - * top: 400, - * originX: 'left', - * originY: 'top' - * }); - * @example Stretched backgroundImage #1 - width/height correspond to canvas width/height - * fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img, isError) { - * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); - * canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas)); - * }); - * @example Stretched backgroundImage #2 - width/height correspond to canvas width/height - * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { - * width: canvas.width, - * height: canvas.height, - * // Needed to position backgroundImage at 0/0 - * originX: 'left', - * originY: 'top' - * }); - * @example backgroundImage loaded from cross-origin - * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { - * opacity: 0.5, - * angle: 45, - * left: 400, - * top: 400, - * originX: 'left', - * originY: 'top', - * crossOrigin: 'anonymous' - * }); - */ - // TODO: fix stretched examples - setBackgroundImage: function (image, callback, options) { - return this.__setBgOverlayImage('backgroundImage', image, callback, options); - }, - - /** - * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas - * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set foreground color to - * @param {Function} callback Callback to invoke when foreground color is set - * @return {fabric.Canvas} thisArg - * @chainable - * @see {@link http://jsfiddle.net/fabricjs/pB55h/|jsFiddle demo} - * @example Normal overlayColor - color value - * canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); - * @example fabric.Pattern used as overlayColor - * canvas.setOverlayColor({ - * source: 'http://fabricjs.com/assets/escheresque_ste.png' - * }, canvas.renderAll.bind(canvas)); - * @example fabric.Pattern used as overlayColor with repeat and offset - * canvas.setOverlayColor({ - * source: 'http://fabricjs.com/assets/escheresque_ste.png', - * repeat: 'repeat', - * offsetX: 200, - * offsetY: 100 - * }, canvas.renderAll.bind(canvas)); - */ - setOverlayColor: function(overlayColor, callback) { - return this.__setBgOverlayColor('overlayColor', overlayColor, callback); - }, - - /** - * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas - * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to - * @param {Function} callback Callback to invoke when background color is set - * @return {fabric.Canvas} thisArg - * @chainable - * @see {@link http://jsfiddle.net/fabricjs/hXzvk/|jsFiddle demo} - * @example Normal backgroundColor - color value - * canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); - * @example fabric.Pattern used as backgroundColor - * canvas.setBackgroundColor({ - * source: 'http://fabricjs.com/assets/escheresque_ste.png' - * }, canvas.renderAll.bind(canvas)); - * @example fabric.Pattern used as backgroundColor with repeat and offset - * canvas.setBackgroundColor({ - * source: 'http://fabricjs.com/assets/escheresque_ste.png', - * repeat: 'repeat', - * offsetX: 200, - * offsetY: 100 - * }, canvas.renderAll.bind(canvas)); - */ - setBackgroundColor: function(backgroundColor, callback) { - return this.__setBgOverlayColor('backgroundColor', backgroundColor, callback); - }, - - /** - * @private - * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundImage|backgroundImage} - * or {@link fabric.StaticCanvas#overlayImage|overlayImage}) - * @param {(fabric.Image|String|null)} image fabric.Image instance, URL of an image or null to set background or overlay to - * @param {Function} callback Callback to invoke when image is loaded and set as background or overlay. The first argument is the created image, the second argument is a flag indicating whether an error occurred or not. - * @param {Object} [options] Optional options to set for the {@link fabric.Image|image}. - */ - __setBgOverlayImage: function(property, image, callback, options) { - if (typeof image === 'string') { - fabric.util.loadImage(image, function(img, isError) { - if (img) { - var instance = new fabric.Image(img, options); - this[property] = instance; - instance.canvas = this; - } - callback && callback(img, isError); - }, this, options && options.crossOrigin); - } - else { - options && image.setOptions(options); - this[property] = image; - image && (image.canvas = this); - callback && callback(image, false); - } + /** + * Indicates whether toObject/toDatalessObject should include default values + * if set to false, takes precedence over the object value. + * @type Boolean + * @default + */ + includeDefaultValues: true, - return this; - }, + /** + * Indicates whether objects' state should be saved + * @type Boolean + * @default + */ + stateful: false, - /** - * @private - * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundColor|backgroundColor} - * or {@link fabric.StaticCanvas#overlayColor|overlayColor}) - * @param {(Object|String|null)} color Object with pattern information, color value or null - * @param {Function} [callback] Callback is invoked when color is set - */ - __setBgOverlayColor: function(property, color, callback) { - this[property] = color; - this._initGradient(color, property); - this._initPattern(color, property, callback); - return this; - }, + /** + * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, + * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. + * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once + * since the renders are quequed and executed one per frame. + * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) + * Left default to true to do not break documentation and old app, fiddles. + * @type Boolean + * @default + */ + renderOnAddRemove: true, - /** - * @private - */ - _createCanvasElement: function() { - var element = createCanvasElement(); - if (!element) { - throw CANVAS_INIT_ERROR; - } - if (!element.style) { - element.style = { }; - } - if (typeof element.getContext === 'undefined') { - throw CANVAS_INIT_ERROR; - } - return element; - }, + /** + * Indicates whether object controls (borders/controls) are rendered above overlay image + * @type Boolean + * @default + */ + controlsAboveOverlay: false, - /** - * @private - * @param {Object} [options] Options object - */ - _initOptions: function (options) { - var lowerCanvasEl = this.lowerCanvasEl; - this._setOptions(options); + /** + * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas + * @type Boolean + * @default + */ + allowTouchScrolling: false, - this.width = this.width || parseInt(lowerCanvasEl.width, 10) || 0; - this.height = this.height || parseInt(lowerCanvasEl.height, 10) || 0; + /** + * Indicates whether this canvas will use image smoothing, this is on by default in browsers + * @type Boolean + * @default + */ + imageSmoothingEnabled: true, - if (!this.lowerCanvasEl.style) { - return; - } + /** + * The transformation (a Canvas 2D API transform matrix) which focuses the viewport + * @type Array + * @example Default transform + * canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; + * @example Scale by 70% and translate toward bottom-right by 50, without skewing + * canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50]; + * @default + */ + viewportTransform: fabric.iMatrix.concat(), - lowerCanvasEl.width = this.width; - lowerCanvasEl.height = this.height; + /** + * if set to false background image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @default + */ + backgroundVpt: true, - lowerCanvasEl.style.width = this.width + 'px'; - lowerCanvasEl.style.height = this.height + 'px'; + /** + * if set to false overlya image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @default + */ + overlayVpt: true, - this.viewportTransform = this.viewportTransform.slice(); - }, + /** + * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens + * @type Boolean + * @default + */ + enableRetinaScaling: true, - /** - * Creates a bottom canvas - * @private - * @param {HTMLElement} [canvasEl] - */ - _createLowerCanvas: function (canvasEl) { - // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node - if (canvasEl && canvasEl.getContext) { - this.lowerCanvasEl = canvasEl; - } - else { - this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement(); - } + /** + * Describe canvas element extension over design + * properties are tl,tr,bl,br. + * if canvas is not zoomed/panned those points are the four corner of canvas + * if canvas is viewportTransformed you those points indicate the extension + * of canvas element in plain untrasformed coordinates + * The coordinates get updated with @method calcViewportBoundaries. + * @memberOf fabric.StaticCanvas.prototype + */ + vptCoords: { }, - fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas'); - this._originalCanvasStyle = this.lowerCanvasEl.style; - if (this.interactive) { - this._applyCanvasStyle(this.lowerCanvasEl); - } + /** + * Based on vptCoords and object.aCoords, skip rendering of objects that + * are not included in current viewport. + * May greatly help in applications with crowded canvas and use of zoom/pan + * If One of the corner of the bounding box of the object is on the canvas + * the objects get rendered. + * @memberOf fabric.StaticCanvas.prototype + * @type Boolean + * @default + */ + skipOffscreen: true, - this.contextContainer = this.lowerCanvasEl.getContext('2d'); - }, + /** + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the canvas has rendered, and the context is placed in the + * top left corner of the canvas. + * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true + * @type fabric.Object + */ + clipPath: undefined, - /** - * Returns canvas width (in px) - * @return {Number} - */ - getWidth: function () { - return this.width; - }, + /** + * @private + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + */ + _initStatic: function(el, options) { + this._objects = []; + this._createLowerCanvas(el); + this._initOptions(options); + // only initialize retina scaling once + if (!this.interactive) { + this._initRetinaScaling(); + } + this.calcOffset(); + }, - /** - * Returns canvas height (in px) - * @return {Number} - */ - getHeight: function () { - return this.height; - }, + /** + * @private + */ + _isRetinaScaling: function() { + return (fabric.devicePixelRatio > 1 && this.enableRetinaScaling); + }, - /** - * Sets width of this canvas instance - * @param {Number|String} value Value to set width to - * @param {Object} [options] Options object - * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions - * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions - * @return {fabric.Canvas} instance - * @chainable true - */ - setWidth: function (value, options) { - return this.setDimensions({ width: value }, options); - }, + /** + * @private + * @return {Number} retinaScaling if applied, otherwise 1; + */ + getRetinaScaling: function() { + return this._isRetinaScaling() ? Math.max(1, fabric.devicePixelRatio) : 1; + }, - /** - * Sets height of this canvas instance - * @param {Number|String} value Value to set height to - * @param {Object} [options] Options object - * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions - * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions - * @return {fabric.Canvas} instance - * @chainable true - */ - setHeight: function (value, options) { - return this.setDimensions({ height: value }, options); - }, + /** + * @private + */ + _initRetinaScaling: function() { + if (!this._isRetinaScaling()) { + return; + } + var scaleRatio = fabric.devicePixelRatio; + this.__initRetinaScaling(scaleRatio, this.lowerCanvasEl, this.contextContainer); + if (this.upperCanvasEl) { + this.__initRetinaScaling(scaleRatio, this.upperCanvasEl, this.contextTop); + } + }, - /** - * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) - * @param {Object} dimensions Object with width/height properties - * @param {Number|String} [dimensions.width] Width of canvas element - * @param {Number|String} [dimensions.height] Height of canvas element - * @param {Object} [options] Options object - * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions - * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions - * @return {fabric.Canvas} thisArg - * @chainable - */ - setDimensions: function (dimensions, options) { - var cssValue; + __initRetinaScaling: function(scaleRatio, canvas, context) { + canvas.setAttribute('width', this.width * scaleRatio); + canvas.setAttribute('height', this.height * scaleRatio); + context.scale(scaleRatio, scaleRatio); + }, - options = options || {}; - for (var prop in dimensions) { - cssValue = dimensions[prop]; + /** + * Calculates canvas element offset relative to the document + * This method is also attached as "resize" event handler of window + * @return {fabric.Canvas} instance + * @chainable + */ + calcOffset: function () { + this._offset = getElementOffset(this.lowerCanvasEl); + return this; + }, - if (!options.cssOnly) { - this._setBackstoreDimension(prop, dimensions[prop]); - cssValue += 'px'; - this.hasLostContext = true; + /** + * @private + */ + _createCanvasElement: function() { + var element = createCanvasElement(); + if (!element) { + throw CANVAS_INIT_ERROR; } - - if (!options.backstoreOnly) { - this._setCssDimension(prop, cssValue); + if (!element.style) { + element.style = { }; } - } - if (this._isCurrentlyDrawing) { - this.freeDrawingBrush && this.freeDrawingBrush._setBrushStyles(this.contextTop); - } - this._initRetinaScaling(); - this.calcOffset(); + if (typeof element.getContext === 'undefined') { + throw CANVAS_INIT_ERROR; + } + return element; + }, - if (!options.cssOnly) { - this.requestRenderAll(); - } + /** + * @private + * @param {Object} [options] Options object + */ + _initOptions: function (options) { + var lowerCanvasEl = this.lowerCanvasEl; + this._setOptions(options); - return this; - }, + this.width = this.width || parseInt(lowerCanvasEl.width, 10) || 0; + this.height = this.height || parseInt(lowerCanvasEl.height, 10) || 0; - /** - * Helper for setting width/height - * @private - * @param {String} prop property (width|height) - * @param {Number} value value to set property to - * @return {fabric.Canvas} instance - * @chainable true - */ - _setBackstoreDimension: function (prop, value) { - this.lowerCanvasEl[prop] = value; + if (!this.lowerCanvasEl.style) { + return; + } - if (this.upperCanvasEl) { - this.upperCanvasEl[prop] = value; - } + lowerCanvasEl.width = this.width; + lowerCanvasEl.height = this.height; - if (this.cacheCanvasEl) { - this.cacheCanvasEl[prop] = value; - } + lowerCanvasEl.style.width = this.width + 'px'; + lowerCanvasEl.style.height = this.height + 'px'; - this[prop] = value; + this.viewportTransform = this.viewportTransform.slice(); + }, - return this; - }, + /** + * Creates a bottom canvas + * @private + * @param {HTMLElement} [canvasEl] + */ + _createLowerCanvas: function (canvasEl) { + // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node + if (canvasEl && canvasEl.getContext) { + this.lowerCanvasEl = canvasEl; + } + else { + this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement(); + } + if (this.lowerCanvasEl.hasAttribute('data-fabric')) { + /* _DEV_MODE_START_ */ + throw new Error('fabric.js: trying to initialize a canvas that has already been initialized'); + /* _DEV_MODE_END_ */ + } + fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas'); + this.lowerCanvasEl.setAttribute('data-fabric', 'main'); + if (this.interactive) { + this._originalCanvasStyle = this.lowerCanvasEl.style.cssText; + this._applyCanvasStyle(this.lowerCanvasEl); + } - /** - * Helper for setting css width/height - * @private - * @param {String} prop property (width|height) - * @param {String} value value to set property to - * @return {fabric.Canvas} instance - * @chainable true - */ - _setCssDimension: function (prop, value) { - this.lowerCanvasEl.style[prop] = value; + this.contextContainer = this.lowerCanvasEl.getContext('2d'); + }, - if (this.upperCanvasEl) { - this.upperCanvasEl.style[prop] = value; - } + /** + * Returns canvas width (in px) + * @return {Number} + */ + getWidth: function () { + return this.width; + }, - if (this.wrapperEl) { - this.wrapperEl.style[prop] = value; - } + /** + * Returns canvas height (in px) + * @return {Number} + */ + getHeight: function () { + return this.height; + }, - return this; - }, + /** + * Sets width of this canvas instance + * @param {Number|String} value Value to set width to + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} instance + * @chainable true + */ + setWidth: function (value, options) { + return this.setDimensions({ width: value }, options); + }, - /** - * Returns canvas zoom level - * @return {Number} - */ - getZoom: function () { - return this.viewportTransform[0]; - }, + /** + * Sets height of this canvas instance + * @param {Number|String} value Value to set height to + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} instance + * @chainable true + */ + setHeight: function (value, options) { + return this.setDimensions({ height: value }, options); + }, - /** - * Sets viewport transformation of this canvas instance - * @param {Array} vpt a Canvas 2D API transform matrix - * @return {fabric.Canvas} instance - * @chainable true - */ - setViewportTransform: function (vpt) { - var activeObject = this._activeObject, - backgroundObject = this.backgroundImage, - overlayObject = this.overlayImage, - object, i, len; - this.viewportTransform = vpt; - for (i = 0, len = this._objects.length; i < len; i++) { - object = this._objects[i]; - object.group || object.setCoords(true); - } - if (activeObject) { - activeObject.setCoords(); - } - if (backgroundObject) { - backgroundObject.setCoords(true); - } - if (overlayObject) { - overlayObject.setCoords(true); - } - this.calcViewportBoundaries(); - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + /** + * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) + * @param {Object} dimensions Object with width/height properties + * @param {Number|String} [dimensions.width] Width of canvas element + * @param {Number|String} [dimensions.height] Height of canvas element + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} thisArg + * @chainable + */ + setDimensions: function (dimensions, options) { + var cssValue; - /** - * Sets zoom level of this canvas instance, the zoom centered around point - * meaning that following zoom to point with the same point will have the visual - * effect of the zoom originating from that point. The point won't move. - * It has nothing to do with canvas center or visual center of the viewport. - * @param {fabric.Point} point to zoom with respect to - * @param {Number} value to set zoom to, less than 1 zooms out - * @return {fabric.Canvas} instance - * @chainable true - */ - zoomToPoint: function (point, value) { - // TODO: just change the scale, preserve other transformations - var before = point, vpt = this.viewportTransform.slice(0); - point = transformPoint(point, invertTransform(this.viewportTransform)); - vpt[0] = value; - vpt[3] = value; - var after = transformPoint(point, vpt); - vpt[4] += before.x - after.x; - vpt[5] += before.y - after.y; - return this.setViewportTransform(vpt); - }, + options = options || {}; - /** - * Sets zoom level of this canvas instance - * @param {Number} value to set zoom to, less than 1 zooms out - * @return {fabric.Canvas} instance - * @chainable true - */ - setZoom: function (value) { - this.zoomToPoint(new fabric.Point(0, 0), value); - return this; - }, + for (var prop in dimensions) { + cssValue = dimensions[prop]; - /** - * Pan viewport so as to place point at top left corner of canvas - * @param {fabric.Point} point to move to - * @return {fabric.Canvas} instance - * @chainable true - */ - absolutePan: function (point) { - var vpt = this.viewportTransform.slice(0); - vpt[4] = -point.x; - vpt[5] = -point.y; - return this.setViewportTransform(vpt); - }, + if (!options.cssOnly) { + this._setBackstoreDimension(prop, dimensions[prop]); + cssValue += 'px'; + this.hasLostContext = true; + } - /** - * Pans viewpoint relatively - * @param {fabric.Point} point (position vector) to move by - * @return {fabric.Canvas} instance - * @chainable true - */ - relativePan: function (point) { - return this.absolutePan(new fabric.Point( - -point.x - this.viewportTransform[4], - -point.y - this.viewportTransform[5] - )); - }, + if (!options.backstoreOnly) { + this._setCssDimension(prop, cssValue); + } + } + if (this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._setBrushStyles(this.contextTop); + } + this._initRetinaScaling(); + this.calcOffset(); - /** - * Returns <canvas> element corresponding to this instance - * @return {HTMLCanvasElement} - */ - getElement: function () { - return this.lowerCanvasEl; - }, + if (!options.cssOnly) { + this.requestRenderAll(); + } - /** - * @private - * @param {fabric.Object} obj Object that was added - */ - _onObjectAdded: function(obj) { - this.stateful && obj.setupState(); - obj._set('canvas', this); - obj.setCoords(); - this.fire('object:added', { target: obj }); - obj.fire('added'); - }, + return this; + }, - /** - * @private - * @param {fabric.Object} obj Object that was removed - */ - _onObjectRemoved: function(obj) { - this.fire('object:removed', { target: obj }); - obj.fire('removed'); - delete obj.canvas; - }, + /** + * Helper for setting width/height + * @private + * @param {String} prop property (width|height) + * @param {Number} value value to set property to + * @return {fabric.Canvas} instance + * @chainable true + */ + _setBackstoreDimension: function (prop, value) { + this.lowerCanvasEl[prop] = value; - /** - * Clears specified context of canvas element - * @param {CanvasRenderingContext2D} ctx Context to clear - * @return {fabric.Canvas} thisArg - * @chainable - */ - clearContext: function(ctx) { - ctx.clearRect(0, 0, this.width, this.height); - return this; - }, + if (this.upperCanvasEl) { + this.upperCanvasEl[prop] = value; + } - /** - * Returns context of canvas where objects are drawn - * @return {CanvasRenderingContext2D} - */ - getContext: function () { - return this.contextContainer; - }, + if (this.cacheCanvasEl) { + this.cacheCanvasEl[prop] = value; + } - /** - * Clears all contexts (background, main, top) of an instance - * @return {fabric.Canvas} thisArg - * @chainable - */ - clear: function () { - this.remove.apply(this, this.getObjects()); - this.backgroundImage = null; - this.overlayImage = null; - this.backgroundColor = ''; - this.overlayColor = ''; - if (this._hasITextHandlers) { - this.off('mouse:up', this._mouseUpITextHandler); - this._iTextInstances = null; - this._hasITextHandlers = false; - } - this.clearContext(this.contextContainer); - this.fire('canvas:cleared'); - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + this[prop] = value; - /** - * Renders the canvas - * @return {fabric.Canvas} instance - * @chainable - */ - renderAll: function () { - var canvasToDrawOn = this.contextContainer; - this.renderCanvas(canvasToDrawOn, this._objects); - return this; - }, + return this; + }, - /** - * Function created to be instance bound at initialization - * used in requestAnimationFrame rendering - * Let the fabricJS call it. If you call it manually you could have more - * animationFrame stacking on to of each other - * for an imperative rendering, use canvas.renderAll - * @private - * @return {fabric.Canvas} instance - * @chainable - */ - renderAndReset: function() { - this.isRendering = 0; - this.renderAll(); - }, - - /** - * Append a renderAll request to next animation frame. - * unless one is already in progress, in that case nothing is done - * a boolean flag will avoid appending more. - * @return {fabric.Canvas} instance - * @chainable - */ - requestRenderAll: function () { - if (!this.isRendering) { - this.isRendering = fabric.util.requestAnimFrame(this.renderAndResetBound); - } - return this; - }, - - /** - * Calculate the position of the 4 corner of canvas with current viewportTransform. - * helps to determinate when an object is in the current rendering viewport using - * object absolute coordinates ( aCoords ) - * @return {Object} points.tl - * @chainable - */ - calcViewportBoundaries: function() { - var points = { }, width = this.width, height = this.height, - iVpt = invertTransform(this.viewportTransform); - points.tl = transformPoint({ x: 0, y: 0 }, iVpt); - points.br = transformPoint({ x: width, y: height }, iVpt); - points.tr = new fabric.Point(points.br.x, points.tl.y); - points.bl = new fabric.Point(points.tl.x, points.br.y); - this.vptCoords = points; - return points; - }, - - cancelRequestedRender: function() { - if (this.isRendering) { - fabric.util.cancelAnimFrame(this.isRendering); - this.isRendering = 0; - } - }, + /** + * Helper for setting css width/height + * @private + * @param {String} prop property (width|height) + * @param {String} value value to set property to + * @return {fabric.Canvas} instance + * @chainable true + */ + _setCssDimension: function (prop, value) { + this.lowerCanvasEl.style[prop] = value; - /** - * Renders background, objects, overlay and controls. - * @param {CanvasRenderingContext2D} ctx - * @param {Array} objects to render - * @return {fabric.Canvas} instance - * @chainable - */ - renderCanvas: function(ctx, objects) { - var v = this.viewportTransform, path = this.clipPath; - this.cancelRequestedRender(); - this.calcViewportBoundaries(); - this.clearContext(ctx); - fabric.util.setImageSmoothing(ctx, this.imageSmoothingEnabled); - this.fire('before:render', { ctx: ctx, }); - this._renderBackground(ctx); + if (this.upperCanvasEl) { + this.upperCanvasEl.style[prop] = value; + } - ctx.save(); - //apply viewport transform once for all rendering process - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - this._renderObjects(ctx, objects); - ctx.restore(); - if (!this.controlsAboveOverlay && this.interactive) { - this.drawControls(ctx); - } - if (path) { - path.canvas = this; - // needed to setup a couple of variables - path.shouldCache(); - path._transformDone = true; - path.renderCache({ forClipping: true }); - this.drawClipPathOnCanvas(ctx); - } - this._renderOverlay(ctx); - if (this.controlsAboveOverlay && this.interactive) { - this.drawControls(ctx); - } - this.fire('after:render', { ctx: ctx, }); - }, + if (this.wrapperEl) { + this.wrapperEl.style[prop] = value; + } - /** - * Paint the cached clipPath on the lowerCanvasEl - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawClipPathOnCanvas: function(ctx) { - var v = this.viewportTransform, path = this.clipPath; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - // DEBUG: uncomment this line, comment the following - // ctx.globalAlpha = 0.4; - ctx.globalCompositeOperation = 'destination-in'; - path.transform(ctx); - ctx.scale(1 / path.zoomX, 1 / path.zoomY); - ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY); - ctx.restore(); - }, + return this; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Array} objects to render - */ - _renderObjects: function(ctx, objects) { - var i, len; - for (i = 0, len = objects.length; i < len; ++i) { - objects[i] && objects[i].render(ctx); - } - }, + /** + * Returns canvas zoom level + * @return {Number} + */ + getZoom: function () { + return this.viewportTransform[0]; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {string} property 'background' or 'overlay' - */ - _renderBackgroundOrOverlay: function(ctx, property) { - var fill = this[property + 'Color'], object = this[property + 'Image'], - v = this.viewportTransform, needsVpt = this[property + 'Vpt']; - if (!fill && !object) { - return; - } - if (fill) { - ctx.save(); - ctx.beginPath(); - ctx.moveTo(0, 0); - ctx.lineTo(this.width, 0); - ctx.lineTo(this.width, this.height); - ctx.lineTo(0, this.height); - ctx.closePath(); - ctx.fillStyle = fill.toLive - ? fill.toLive(ctx, this) - : fill; - if (needsVpt) { - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - } - ctx.transform(1, 0, 0, 1, fill.offsetX || 0, fill.offsetY || 0); - var m = fill.gradientTransform || fill.patternTransform; - m && ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - ctx.fill(); - ctx.restore(); - } - if (object) { - ctx.save(); - if (needsVpt) { - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + /** + * Sets viewport transformation of this canvas instance + * @param {Array} vpt a Canvas 2D API transform matrix + * @return {fabric.Canvas} instance + * @chainable true + */ + setViewportTransform: function (vpt) { + var activeObject = this._activeObject, + backgroundObject = this.backgroundImage, + overlayObject = this.overlayImage, + object, i, len; + this.viewportTransform = vpt; + for (i = 0, len = this._objects.length; i < len; i++) { + object = this._objects[i]; + object.group || object.setCoords(true); } - object.render(ctx); - ctx.restore(); - } - }, + if (activeObject) { + activeObject.setCoords(); + } + if (backgroundObject) { + backgroundObject.setCoords(true); + } + if (overlayObject) { + overlayObject.setCoords(true); + } + this.calcViewportBoundaries(); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderBackground: function(ctx) { - this._renderBackgroundOrOverlay(ctx, 'background'); - }, + /** + * Sets zoom level of this canvas instance, the zoom centered around point + * meaning that following zoom to point with the same point will have the visual + * effect of the zoom originating from that point. The point won't move. + * It has nothing to do with canvas center or visual center of the viewport. + * @param {fabric.Point} point to zoom with respect to + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable true + */ + zoomToPoint: function (point, value) { + // TODO: just change the scale, preserve other transformations + var before = point, vpt = this.viewportTransform.slice(0); + point = transformPoint(point, invertTransform(this.viewportTransform)); + vpt[0] = value; + vpt[3] = value; + var after = transformPoint(point, vpt); + vpt[4] += before.x - after.x; + vpt[5] += before.y - after.y; + return this.setViewportTransform(vpt); + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderOverlay: function(ctx) { - this._renderBackgroundOrOverlay(ctx, 'overlay'); - }, + /** + * Sets zoom level of this canvas instance + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable true + */ + setZoom: function (value) { + this.zoomToPoint(new fabric.Point(0, 0), value); + return this; + }, - /** - * Returns coordinates of a center of canvas. - * Returned value is an object with top and left properties - * @return {Object} object with "top" and "left" number values - */ - getCenter: function () { - return { - top: this.height / 2, - left: this.width / 2 - }; - }, + /** + * Pan viewport so as to place point at top left corner of canvas + * @param {fabric.Point} point to move to + * @return {fabric.Canvas} instance + * @chainable true + */ + absolutePan: function (point) { + var vpt = this.viewportTransform.slice(0); + vpt[4] = -point.x; + vpt[5] = -point.y; + return this.setViewportTransform(vpt); + }, - /** - * Centers object horizontally in the canvas - * @param {fabric.Object} object Object to center horizontally - * @return {fabric.Canvas} thisArg - */ - centerObjectH: function (object) { - return this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y)); - }, + /** + * Pans viewpoint relatively + * @param {fabric.Point} point (position vector) to move by + * @return {fabric.Canvas} instance + * @chainable true + */ + relativePan: function (point) { + return this.absolutePan(new fabric.Point( + -point.x - this.viewportTransform[4], + -point.y - this.viewportTransform[5] + )); + }, - /** - * Centers object vertically in the canvas - * @param {fabric.Object} object Object to center vertically - * @return {fabric.Canvas} thisArg - * @chainable - */ - centerObjectV: function (object) { - return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top)); - }, + /** + * Returns <canvas> element corresponding to this instance + * @return {HTMLCanvasElement} + */ + getElement: function () { + return this.lowerCanvasEl; + }, - /** - * Centers object vertically and horizontally in the canvas - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - centerObject: function(object) { - var center = this.getCenter(); + /** + * @param {...fabric.Object} objects to add + * @return {Self} thisArg + * @chainable + */ + add: function () { + fabric.Collection.add.call(this, arguments, this._onObjectAdded); + arguments.length > 0 && this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - return this._centerObject(object, new fabric.Point(center.left, center.top)); - }, + /** + * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) + * An object should be an instance of (or inherit from) fabric.Object + * @param {fabric.Object|fabric.Object[]} objects Object(s) to insert + * @param {Number} index Index to insert object at + * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs + * @return {Self} thisArg + * @chainable + */ + insertAt: function (objects, index) { + fabric.Collection.insertAt.call(this, objects, index, this._onObjectAdded); + (Array.isArray(objects) ? objects.length > 0 : !!objects) && this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - /** - * Centers object vertically and horizontally in the viewport - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - viewportCenterObject: function(object) { - var vpCenter = this.getVpCenter(); + /** + * @param {...fabric.Object} objects to remove + * @return {Self} thisArg + * @chainable + */ + remove: function () { + var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); + removed.length > 0 && this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - return this._centerObject(object, vpCenter); - }, + /** + * @private + * @param {fabric.Object} obj Object that was added + */ + _onObjectAdded: function(obj) { + this.stateful && obj.setupState(); + if (obj.canvas && obj.canvas !== this) { + /* _DEV_MODE_START_ */ + console.warn('fabric.Canvas: trying to add an object that belongs to a different canvas.\n' + + 'Resulting to default behavior: removing object from previous canvas and adding to new canvas'); + /* _DEV_MODE_END_ */ + obj.canvas.remove(obj); + } + obj._set('canvas', this); + obj.setCoords(); + this.fire('object:added', { target: obj }); + obj.fire('added', { target: this }); + }, - /** - * Centers object horizontally in the viewport, object.top is unchanged - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - viewportCenterObjectH: function(object) { - var vpCenter = this.getVpCenter(); - this._centerObject(object, new fabric.Point(vpCenter.x, object.getCenterPoint().y)); - return this; - }, + /** + * @private + * @param {fabric.Object} obj Object that was removed + */ + _onObjectRemoved: function(obj) { + obj._set('canvas', undefined); + this.fire('object:removed', { target: obj }); + obj.fire('removed', { target: this }); + }, - /** - * Centers object Vertically in the viewport, object.top is unchanged - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - viewportCenterObjectV: function(object) { - var vpCenter = this.getVpCenter(); + /** + * Clears specified context of canvas element + * @param {CanvasRenderingContext2D} ctx Context to clear + * @return {fabric.Canvas} thisArg + * @chainable + */ + clearContext: function(ctx) { + ctx.clearRect(0, 0, this.width, this.height); + return this; + }, - return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, vpCenter.y)); - }, + /** + * Returns context of canvas where objects are drawn + * @return {CanvasRenderingContext2D} + */ + getContext: function () { + return this.contextContainer; + }, - /** - * Calculate the point in canvas that correspond to the center of actual viewport. - * @return {fabric.Point} vpCenter, viewport center - * @chainable - */ - getVpCenter: function() { - var center = this.getCenter(), - iVpt = invertTransform(this.viewportTransform); - return transformPoint({ x: center.left, y: center.top }, iVpt); - }, + /** + * Clears all contexts (background, main, top) of an instance + * @return {fabric.Canvas} thisArg + * @chainable + */ + clear: function () { + this.remove.apply(this, this.getObjects()); + this.backgroundImage = null; + this.overlayImage = null; + this.backgroundColor = ''; + this.overlayColor = ''; + if (this._hasITextHandlers) { + this.off('mouse:up', this._mouseUpITextHandler); + this._iTextInstances = null; + this._hasITextHandlers = false; + } + this.clearContext(this.contextContainer); + this.fire('canvas:cleared'); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - /** - * @private - * @param {fabric.Object} object Object to center - * @param {fabric.Point} center Center point - * @return {fabric.Canvas} thisArg - * @chainable - */ - _centerObject: function(object, center) { - object.setPositionByOrigin(center, 'center', 'center'); - object.setCoords(); - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + /** + * Renders the canvas + * @return {fabric.Canvas} instance + * @chainable + */ + renderAll: function () { + var canvasToDrawOn = this.contextContainer; + this.renderCanvas(canvasToDrawOn, this._objects); + return this; + }, - /** - * Returns dataless JSON representation of canvas - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {String} json string - */ - toDatalessJSON: function (propertiesToInclude) { - return this.toDatalessObject(propertiesToInclude); - }, + /** + * Function created to be instance bound at initialization + * used in requestAnimationFrame rendering + * Let the fabricJS call it. If you call it manually you could have more + * animationFrame stacking on to of each other + * for an imperative rendering, use canvas.renderAll + * @private + * @return {fabric.Canvas} instance + * @chainable + */ + renderAndReset: function() { + this.isRendering = 0; + this.renderAll(); + }, - /** - * Returns object representation of canvas - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function (propertiesToInclude) { - return this._toObjectMethod('toObject', propertiesToInclude); - }, + /** + * Append a renderAll request to next animation frame. + * unless one is already in progress, in that case nothing is done + * a boolean flag will avoid appending more. + * @return {fabric.Canvas} instance + * @chainable + */ + requestRenderAll: function () { + if (!this.isRendering) { + this.isRendering = fabric.util.requestAnimFrame(this.renderAndResetBound); + } + return this; + }, - /** - * Returns dataless object representation of canvas - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toDatalessObject: function (propertiesToInclude) { - return this._toObjectMethod('toDatalessObject', propertiesToInclude); - }, + /** + * Calculate the position of the 4 corner of canvas with current viewportTransform. + * helps to determinate when an object is in the current rendering viewport using + * object absolute coordinates ( aCoords ) + * @return {Object} points.tl + * @chainable + */ + calcViewportBoundaries: function() { + var width = this.width, height = this.height, + iVpt = invertTransform(this.viewportTransform), + a = transformPoint({ x: 0, y: 0 }, iVpt), + b = transformPoint({ x: width, y: height }, iVpt), + // we don't support vpt flipping + // but the code is robust enough to mostly work with flipping + min = a.min(b), + max = a.max(b); + return this.vptCoords = { + tl: min, + tr: new fabric.Point(max.x, min.y), + bl: new fabric.Point(min.x, max.y), + br: max, + }; + }, - /** - * @private - */ - _toObjectMethod: function (methodName, propertiesToInclude) { + cancelRequestedRender: function() { + if (this.isRendering) { + fabric.util.cancelAnimFrame(this.isRendering); + this.isRendering = 0; + } + }, - var clipPath = this.clipPath, data = { - version: fabric.version, - objects: this._toObjects(methodName, propertiesToInclude), - }; - if (clipPath && !clipPath.excludeFromExport) { - data.clipPath = this._toObject(this.clipPath, methodName, propertiesToInclude); - } - extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude)); + /** + * Renders background, objects, overlay and controls. + * @param {CanvasRenderingContext2D} ctx + * @param {Array} objects to render + * @return {fabric.Canvas} instance + * @chainable + */ + renderCanvas: function(ctx, objects) { + var v = this.viewportTransform, path = this.clipPath; + this.cancelRequestedRender(); + this.calcViewportBoundaries(); + this.clearContext(ctx); + fabric.util.setImageSmoothing(ctx, this.imageSmoothingEnabled); + this.fire('before:render', { ctx: ctx, }); + this._renderBackground(ctx); - fabric.util.populateWithProperties(this, data, propertiesToInclude); + ctx.save(); + //apply viewport transform once for all rendering process + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this._renderObjects(ctx, objects); + ctx.restore(); + if (!this.controlsAboveOverlay && this.interactive) { + this.drawControls(ctx); + } + if (path) { + path._set('canvas', this); + // needed to setup a couple of variables + path.shouldCache(); + path._transformDone = true; + path.renderCache({ forClipping: true }); + this.drawClipPathOnCanvas(ctx); + } + this._renderOverlay(ctx); + if (this.controlsAboveOverlay && this.interactive) { + this.drawControls(ctx); + } + this.fire('after:render', { ctx: ctx, }); + }, - return data; - }, + /** + * Paint the cached clipPath on the lowerCanvasEl + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawClipPathOnCanvas: function(ctx) { + var v = this.viewportTransform, path = this.clipPath; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4; + ctx.globalCompositeOperation = 'destination-in'; + path.transform(ctx); + ctx.scale(1 / path.zoomX, 1 / path.zoomY); + ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY); + ctx.restore(); + }, - /** - * @private - */ - _toObjects: function(methodName, propertiesToInclude) { - return this._objects.filter(function(object) { - return !object.excludeFromExport; - }).map(function(instance) { - return this._toObject(instance, methodName, propertiesToInclude); - }, this); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Array} objects to render + */ + _renderObjects: function(ctx, objects) { + var i, len; + for (i = 0, len = objects.length; i < len; ++i) { + objects[i] && objects[i].render(ctx); + } + }, - /** - * @private - */ - _toObject: function(instance, methodName, propertiesToInclude) { - var originalValue; + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {string} property 'background' or 'overlay' + */ + _renderBackgroundOrOverlay: function(ctx, property) { + var fill = this[property + 'Color'], object = this[property + 'Image'], + v = this.viewportTransform, needsVpt = this[property + 'Vpt']; + if (!fill && !object) { + return; + } + if (fill) { + ctx.save(); + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(this.width, 0); + ctx.lineTo(this.width, this.height); + ctx.lineTo(0, this.height); + ctx.closePath(); + ctx.fillStyle = fill.toLive + ? fill.toLive(ctx, this) + : fill; + if (needsVpt) { + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + } + ctx.transform(1, 0, 0, 1, fill.offsetX || 0, fill.offsetY || 0); + var m = fill.gradientTransform || fill.patternTransform; + m && ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + ctx.fill(); + ctx.restore(); + } + if (object) { + ctx.save(); + if (needsVpt) { + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + } + object.render(ctx); + ctx.restore(); + } + }, - if (!this.includeDefaultValues) { - originalValue = instance.includeDefaultValues; - instance.includeDefaultValues = false; - } + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderBackground: function(ctx) { + this._renderBackgroundOrOverlay(ctx, 'background'); + }, - var object = instance[methodName](propertiesToInclude); - if (!this.includeDefaultValues) { - instance.includeDefaultValues = originalValue; - } - return object; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderOverlay: function(ctx) { + this._renderBackgroundOrOverlay(ctx, 'overlay'); + }, - /** - * @private - */ - __serializeBgOverlay: function(methodName, propertiesToInclude) { - var data = {}, bgImage = this.backgroundImage, overlayImage = this.overlayImage, - bgColor = this.backgroundColor, overlayColor = this.overlayColor; + /** + * Returns coordinates of a center of canvas. + * Returned value is an object with top and left properties + * @return {Object} object with "top" and "left" number values + * @deprecated migrate to `getCenterPoint` + */ + getCenter: function () { + return { + top: this.height / 2, + left: this.width / 2 + }; + }, - if (bgColor && bgColor.toObject) { - if (!bgColor.excludeFromExport) { - data.background = bgColor.toObject(propertiesToInclude); - } - } - else if (bgColor) { - data.background = bgColor; - } + /** + * Returns coordinates of a center of canvas. + * @return {fabric.Point} + */ + getCenterPoint: function () { + return new fabric.Point(this.width / 2, this.height / 2); + }, - if (overlayColor && overlayColor.toObject) { - if (!overlayColor.excludeFromExport) { - data.overlay = overlayColor.toObject(propertiesToInclude); - } - } - else if (overlayColor) { - data.overlay = overlayColor; - } + /** + * Centers object horizontally in the canvas + * @param {fabric.Object} object Object to center horizontally + * @return {fabric.Canvas} thisArg + */ + centerObjectH: function (object) { + return this._centerObject(object, new fabric.Point(this.getCenterPoint().x, object.getCenterPoint().y)); + }, - if (bgImage && !bgImage.excludeFromExport) { - data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude); - } - if (overlayImage && !overlayImage.excludeFromExport) { - data.overlayImage = this._toObject(overlayImage, methodName, propertiesToInclude); - } + /** + * Centers object vertically in the canvas + * @param {fabric.Object} object Object to center vertically + * @return {fabric.Canvas} thisArg + * @chainable + */ + centerObjectV: function (object) { + return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenterPoint().y)); + }, - return data; - }, + /** + * Centers object vertically and horizontally in the canvas + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + centerObject: function(object) { + var center = this.getCenterPoint(); + return this._centerObject(object, center); + }, - /* _TO_SVG_START_ */ - /** - * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, - * a zoomed canvas will then produce zoomed SVG output. - * @type Boolean - * @default - */ - svgViewportTransformation: true, + /** + * Centers object vertically and horizontally in the viewport + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObject: function(object) { + var vpCenter = this.getVpCenter(); + return this._centerObject(object, vpCenter); + }, - /** - * Returns SVG representation of canvas - * @function - * @param {Object} [options] Options object for SVG output - * @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included - * @param {Object} [options.viewBox] SVG viewbox object - * @param {Number} [options.viewBox.x] x-coordinate of viewbox - * @param {Number} [options.viewBox.y] y-coordinate of viewbox - * @param {Number} [options.viewBox.width] Width of viewbox - * @param {Number} [options.viewBox.height] Height of viewbox - * @param {String} [options.encoding=UTF-8] Encoding of SVG output - * @param {String} [options.width] desired width of svg with or without units - * @param {String} [options.height] desired height of svg with or without units - * @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation. - * @return {String} SVG string - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} - * @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo} - * @example Normal SVG output - * var svg = canvas.toSVG(); - * @example SVG output without preamble (without <?xml ../>) - * var svg = canvas.toSVG({suppressPreamble: true}); - * @example SVG output with viewBox attribute - * var svg = canvas.toSVG({ - * viewBox: { - * x: 100, - * y: 100, - * width: 200, - * height: 300 - * } - * }); - * @example SVG output with different encoding (default: UTF-8) - * var svg = canvas.toSVG({encoding: 'ISO-8859-1'}); - * @example Modify SVG output with reviver function - * var svg = canvas.toSVG(null, function(svg) { - * return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', ''); - * }); - */ - toSVG: function(options, reviver) { - options || (options = { }); - options.reviver = reviver; - var markup = []; - - this._setSVGPreamble(markup, options); - this._setSVGHeader(markup, options); - if (this.clipPath) { - markup.push('\n'); - } - this._setSVGBgOverlayColor(markup, 'background'); - this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver); - this._setSVGObjects(markup, reviver); - if (this.clipPath) { - markup.push('\n'); - } - this._setSVGBgOverlayColor(markup, 'overlay'); - this._setSVGBgOverlayImage(markup, 'overlayImage', reviver); + /** + * Centers object horizontally in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectH: function(object) { + var vpCenter = this.getVpCenter(); + this._centerObject(object, new fabric.Point(vpCenter.x, object.getCenterPoint().y)); + return this; + }, - markup.push(''); + /** + * Centers object Vertically in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectV: function(object) { + var vpCenter = this.getVpCenter(); - return markup.join(''); - }, + return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, vpCenter.y)); + }, - /** - * @private - */ - _setSVGPreamble: function(markup, options) { - if (options.suppressPreamble) { - return; - } - markup.push( - '\n', - '\n' - ); - }, + /** + * Calculate the point in canvas that correspond to the center of actual viewport. + * @return {fabric.Point} vpCenter, viewport center + * @chainable + */ + getVpCenter: function() { + var center = this.getCenterPoint(), + iVpt = invertTransform(this.viewportTransform); + return transformPoint(center, iVpt); + }, - /** - * @private - */ - _setSVGHeader: function(markup, options) { - var width = options.width || this.width, - height = options.height || this.height, - vpt, viewBox = 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ', - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + /** + * @private + * @param {fabric.Object} object Object to center + * @param {fabric.Point} center Center point + * @return {fabric.Canvas} thisArg + * @chainable + */ + _centerObject: function(object, center) { + object.setXY(center, 'center', 'center'); + object.setCoords(); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - if (options.viewBox) { - viewBox = 'viewBox="' + - options.viewBox.x + ' ' + - options.viewBox.y + ' ' + - options.viewBox.width + ' ' + - options.viewBox.height + '" '; - } - else { - if (this.svgViewportTransformation) { - vpt = this.viewportTransform; - viewBox = 'viewBox="' + - toFixed(-vpt[4] / vpt[0], NUM_FRACTION_DIGITS) + ' ' + - toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS) + ' ' + - toFixed(this.width / vpt[0], NUM_FRACTION_DIGITS) + ' ' + - toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS) + '" '; - } - } - - markup.push( - '\n', - 'Created with Fabric.js ', fabric.version, '\n', - '\n', - this.createSVGFontFacesMarkup(), - this.createSVGRefElementsMarkup(), - this.createSVGClipPathMarkup(options), - '\n' - ); - }, - - createSVGClipPathMarkup: function(options) { - var clipPath = this.clipPath; - if (clipPath) { - clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; - return '\n' + - this.clipPath.toClipPathSVG(options.reviver) + - '\n'; - } - return ''; - }, - - /** - * Creates markup containing SVG referenced elements like patterns, gradients etc. - * @return {String} - */ - createSVGRefElementsMarkup: function() { - var _this = this, - markup = ['background', 'overlay'].map(function(prop) { - var fill = _this[prop + 'Color']; - if (fill && fill.toLive) { - var shouldTransform = _this[prop + 'Vpt'], vpt = _this.viewportTransform, - object = { - width: _this.width / (shouldTransform ? vpt[0] : 1), - height: _this.height / (shouldTransform ? vpt[3] : 1) - }; - return fill.toSVG( - object, - { additionalTransform: shouldTransform ? fabric.util.matrixToSVG(vpt) : '' } - ); - } - }); - return markup.join(''); - }, + /** + * Returns dataless JSON representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {String} json string + */ + toDatalessJSON: function (propertiesToInclude) { + return this.toDatalessObject(propertiesToInclude); + }, - /** - * Creates markup containing SVG font faces, - * font URLs for font faces must be collected by developers - * and are not extracted from the DOM by fabricjs - * @param {Array} objects Array of fabric objects - * @return {String} - */ - createSVGFontFacesMarkup: function() { - var markup = '', fontList = { }, obj, fontFamily, - style, row, rowIndex, _char, charIndex, i, len, - fontPaths = fabric.fontPaths, objects = []; + /** + * Returns object representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function (propertiesToInclude) { + return this._toObjectMethod('toObject', propertiesToInclude); + }, - this._objects.forEach(function add(object) { - objects.push(object); - if (object._objects) { - object._objects.forEach(add); - } - }); + /** + * Returns dataless object representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function (propertiesToInclude) { + return this._toObjectMethod('toDatalessObject', propertiesToInclude); + }, - for (i = 0, len = objects.length; i < len; i++) { - obj = objects[i]; - fontFamily = obj.fontFamily; - if (obj.type.indexOf('text') === -1 || fontList[fontFamily] || !fontPaths[fontFamily]) { - continue; - } - fontList[fontFamily] = true; - if (!obj.styles) { - continue; - } - style = obj.styles; - for (rowIndex in style) { - row = style[rowIndex]; - for (charIndex in row) { - _char = row[charIndex]; - fontFamily = _char.fontFamily; - if (!fontList[fontFamily] && fontPaths[fontFamily]) { - fontList[fontFamily] = true; - } - } + /** + * @private + */ + _toObjectMethod: function (methodName, propertiesToInclude) { + + var clipPath = this.clipPath, data = { + version: fabric.version, + objects: this._toObjects(methodName, propertiesToInclude), + }; + if (clipPath && !clipPath.excludeFromExport) { + data.clipPath = this._toObject(this.clipPath, methodName, propertiesToInclude); } - } + extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude)); - for (var j in fontList) { - markup += [ - '\t\t@font-face {\n', - '\t\t\tfont-family: \'', j, '\';\n', - '\t\t\tsrc: url(\'', fontPaths[j], '\');\n', - '\t\t}\n' - ].join(''); - } + fabric.util.populateWithProperties(this, data, propertiesToInclude); - if (markup) { - markup = [ - '\t\n' - ].join(''); - } + return data; + }, - return markup; - }, + /** + * @private + */ + _toObjects: function(methodName, propertiesToInclude) { + return this._objects.filter(function(object) { + return !object.excludeFromExport; + }).map(function(instance) { + return this._toObject(instance, methodName, propertiesToInclude); + }, this); + }, - /** - * @private - */ - _setSVGObjects: function(markup, reviver) { - var instance, i, len, objects = this._objects; - for (i = 0, len = objects.length; i < len; i++) { - instance = objects[i]; - if (instance.excludeFromExport) { - continue; + /** + * @private + */ + _toObject: function(instance, methodName, propertiesToInclude) { + var originalValue; + + if (!this.includeDefaultValues) { + originalValue = instance.includeDefaultValues; + instance.includeDefaultValues = false; } - this._setSVGObject(markup, instance, reviver); - } - }, - /** - * @private - */ - _setSVGObject: function(markup, instance, reviver) { - markup.push(instance.toSVG(reviver)); - }, + var object = instance[methodName](propertiesToInclude); + if (!this.includeDefaultValues) { + instance.includeDefaultValues = originalValue; + } + return object; + }, - /** - * @private - */ - _setSVGBgOverlayImage: function(markup, property, reviver) { - if (this[property] && !this[property].excludeFromExport && this[property].toSVG) { - markup.push(this[property].toSVG(reviver)); - } - }, + /** + * @private + */ + __serializeBgOverlay: function(methodName, propertiesToInclude) { + var data = {}, bgImage = this.backgroundImage, overlayImage = this.overlayImage, + bgColor = this.backgroundColor, overlayColor = this.overlayColor; - /** - * @private - */ - _setSVGBgOverlayColor: function(markup, property) { - var filler = this[property + 'Color'], vpt = this.viewportTransform, finalWidth = this.width, - finalHeight = this.height; - if (!filler) { - return; - } - if (filler.toLive) { - var repeat = filler.repeat, iVpt = fabric.util.invertTransform(vpt), shouldInvert = this[property + 'Vpt'], - additionalTransform = shouldInvert ? fabric.util.matrixToSVG(iVpt) : ''; + if (bgColor && bgColor.toObject) { + if (!bgColor.excludeFromExport) { + data.background = bgColor.toObject(propertiesToInclude); + } + } + else if (bgColor) { + data.background = bgColor; + } + + if (overlayColor && overlayColor.toObject) { + if (!overlayColor.excludeFromExport) { + data.overlay = overlayColor.toObject(propertiesToInclude); + } + } + else if (overlayColor) { + data.overlay = overlayColor; + } + + if (bgImage && !bgImage.excludeFromExport) { + data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude); + } + if (overlayImage && !overlayImage.excludeFromExport) { + data.overlayImage = this._toObject(overlayImage, methodName, propertiesToInclude); + } + + return data; + }, + + /* _TO_SVG_START_ */ + /** + * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, + * a zoomed canvas will then produce zoomed SVG output. + * @type Boolean + * @default + */ + svgViewportTransformation: true, + + /** + * Returns SVG representation of canvas + * @function + * @param {Object} [options] Options object for SVG output + * @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included + * @param {Object} [options.viewBox] SVG viewbox object + * @param {Number} [options.viewBox.x] x-coordinate of viewbox + * @param {Number} [options.viewBox.y] y-coordinate of viewbox + * @param {Number} [options.viewBox.width] Width of viewbox + * @param {Number} [options.viewBox.height] Height of viewbox + * @param {String} [options.encoding=UTF-8] Encoding of SVG output + * @param {String} [options.width] desired width of svg with or without units + * @param {String} [options.height] desired height of svg with or without units + * @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation. + * @return {String} SVG string + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} + * @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo} + * @example Normal SVG output + * var svg = canvas.toSVG(); + * @example SVG output without preamble (without <?xml ../>) + * var svg = canvas.toSVG({suppressPreamble: true}); + * @example SVG output with viewBox attribute + * var svg = canvas.toSVG({ + * viewBox: { + * x: 100, + * y: 100, + * width: 200, + * height: 300 + * } + * }); + * @example SVG output with different encoding (default: UTF-8) + * var svg = canvas.toSVG({encoding: 'ISO-8859-1'}); + * @example Modify SVG output with reviver function + * var svg = canvas.toSVG(null, function(svg) { + * return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', ''); + * }); + */ + toSVG: function(options, reviver) { + options || (options = { }); + options.reviver = reviver; + var markup = []; + + this._setSVGPreamble(markup, options); + this._setSVGHeader(markup, options); + if (this.clipPath) { + markup.push('\n'); + } + this._setSVGBgOverlayColor(markup, 'background'); + this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver); + this._setSVGObjects(markup, reviver); + if (this.clipPath) { + markup.push('\n'); + } + this._setSVGBgOverlayColor(markup, 'overlay'); + this._setSVGBgOverlayImage(markup, 'overlayImage', reviver); + + markup.push(''); + + return markup.join(''); + }, + + /** + * @private + */ + _setSVGPreamble: function(markup, options) { + if (options.suppressPreamble) { + return; + } markup.push( - '\n' + '\n', + '\n' ); - } - else { + }, + + /** + * @private + */ + _setSVGHeader: function(markup, options) { + var width = options.width || this.width, + height = options.height || this.height, + vpt, viewBox = 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + + if (options.viewBox) { + viewBox = 'viewBox="' + + options.viewBox.x + ' ' + + options.viewBox.y + ' ' + + options.viewBox.width + ' ' + + options.viewBox.height + '" '; + } + else { + if (this.svgViewportTransformation) { + vpt = this.viewportTransform; + viewBox = 'viewBox="' + + toFixed(-vpt[4] / vpt[0], NUM_FRACTION_DIGITS) + ' ' + + toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS) + ' ' + + toFixed(this.width / vpt[0], NUM_FRACTION_DIGITS) + ' ' + + toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS) + '" '; + } + } + markup.push( - '\n' + '\n', + 'Created with Fabric.js ', fabric.version, '\n', + '\n', + this.createSVGFontFacesMarkup(), + this.createSVGRefElementsMarkup(), + this.createSVGClipPathMarkup(options), + '\n' ); - } - }, - /* _TO_SVG_END_ */ + }, - /** - * Moves an object or the objects of a multiple selection - * to the bottom of the stack of drawn objects - * @param {fabric.Object} object Object to send to back - * @return {fabric.Canvas} thisArg - * @chainable - */ - sendToBack: function (object) { - if (!object) { - return this; - } - var activeSelection = this._activeObject, - i, obj, objs; - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = objs.length; i--;) { - obj = objs[i]; - removeFromArray(this._objects, obj); - this._objects.unshift(obj); + createSVGClipPathMarkup: function(options) { + var clipPath = this.clipPath; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + return '\n' + + this.clipPath.toClipPathSVG(options.reviver) + + '\n'; } - } - else { - removeFromArray(this._objects, object); - this._objects.unshift(object); - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + return ''; + }, - /** - * Moves an object or the objects of a multiple selection - * to the top of the stack of drawn objects - * @param {fabric.Object} object Object to send - * @return {fabric.Canvas} thisArg - * @chainable - */ - bringToFront: function (object) { - if (!object) { - return this; - } - var activeSelection = this._activeObject, - i, obj, objs; - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = 0; i < objs.length; i++) { - obj = objs[i]; - removeFromArray(this._objects, obj); - this._objects.push(obj); - } - } - else { - removeFromArray(this._objects, object); - this._objects.push(object); - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + /** + * Creates markup containing SVG referenced elements like patterns, gradients etc. + * @return {String} + */ + createSVGRefElementsMarkup: function() { + var _this = this, + markup = ['background', 'overlay'].map(function(prop) { + var fill = _this[prop + 'Color']; + if (fill && fill.toLive) { + var shouldTransform = _this[prop + 'Vpt'], vpt = _this.viewportTransform, + object = { + width: _this.width / (shouldTransform ? vpt[0] : 1), + height: _this.height / (shouldTransform ? vpt[3] : 1) + }; + return fill.toSVG( + object, + { additionalTransform: shouldTransform ? fabric.util.matrixToSVG(vpt) : '' } + ); + } + }); + return markup.join(''); + }, - /** - * Moves an object or a selection down in stack of drawn objects - * An optional parameter, intersecting allows to move the object in behind - * the first intersecting object. Where intersection is calculated with - * bounding box. If no intersection is found, there will not be change in the - * stack. - * @param {fabric.Object} object Object to send - * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object - * @return {fabric.Canvas} thisArg - * @chainable - */ - sendBackwards: function (object, intersecting) { - if (!object) { - return this; - } - var activeSelection = this._activeObject, - i, obj, idx, newIdx, objs, objsMoved = 0; + /** + * Creates markup containing SVG font faces, + * font URLs for font faces must be collected by developers + * and are not extracted from the DOM by fabricjs + * @param {Array} objects Array of fabric objects + * @return {String} + */ + createSVGFontFacesMarkup: function() { + var markup = '', fontList = { }, obj, fontFamily, + style, row, rowIndex, _char, charIndex, i, len, + fontPaths = fabric.fontPaths, objects = []; + + this._objects.forEach(function add(object) { + objects.push(object); + if (object._objects) { + object._objects.forEach(add); + } + }); - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = 0; i < objs.length; i++) { - obj = objs[i]; - idx = this._objects.indexOf(obj); - if (idx > 0 + objsMoved) { - newIdx = idx - 1; - removeFromArray(this._objects, obj); - this._objects.splice(newIdx, 0, obj); + for (i = 0, len = objects.length; i < len; i++) { + obj = objects[i]; + fontFamily = obj.fontFamily; + if (obj.type.indexOf('text') === -1 || fontList[fontFamily] || !fontPaths[fontFamily]) { + continue; + } + fontList[fontFamily] = true; + if (!obj.styles) { + continue; + } + style = obj.styles; + for (rowIndex in style) { + row = style[rowIndex]; + for (charIndex in row) { + _char = row[charIndex]; + fontFamily = _char.fontFamily; + if (!fontList[fontFamily] && fontPaths[fontFamily]) { + fontList[fontFamily] = true; + } + } } - objsMoved++; } - } - else { - idx = this._objects.indexOf(object); - if (idx !== 0) { - // if object is not on the bottom of stack - newIdx = this._findNewLowerIndex(object, idx, intersecting); - removeFromArray(this._objects, object); - this._objects.splice(newIdx, 0, object); + + for (var j in fontList) { + markup += [ + '\t\t@font-face {\n', + '\t\t\tfont-family: \'', j, '\';\n', + '\t\t\tsrc: url(\'', fontPaths[j], '\');\n', + '\t\t}\n' + ].join(''); } - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, - /** - * @private - */ - _findNewLowerIndex: function(object, idx, intersecting) { - var newIdx, i; + if (markup) { + markup = [ + '\t\n' + ].join(''); + } - if (intersecting) { - newIdx = idx; + return markup; + }, - // traverse down the stack looking for the nearest intersecting object - for (i = idx - 1; i >= 0; --i) { + /** + * @private + */ + _setSVGObjects: function(markup, reviver) { + var instance, i, len, objects = this._objects; + for (i = 0, len = objects.length; i < len; i++) { + instance = objects[i]; + if (instance.excludeFromExport) { + continue; + } + this._setSVGObject(markup, instance, reviver); + } + }, - var isIntersecting = object.intersectsWithObject(this._objects[i]) || - object.isContainedWithinObject(this._objects[i]) || - this._objects[i].isContainedWithinObject(object); + /** + * @private + */ + _setSVGObject: function(markup, instance, reviver) { + markup.push(instance.toSVG(reviver)); + }, - if (isIntersecting) { - newIdx = i; - break; - } + /** + * @private + */ + _setSVGBgOverlayImage: function(markup, property, reviver) { + if (this[property] && !this[property].excludeFromExport && this[property].toSVG) { + markup.push(this[property].toSVG(reviver)); } - } - else { - newIdx = idx - 1; - } + }, - return newIdx; - }, + /** + * @private + */ + _setSVGBgOverlayColor: function(markup, property) { + var filler = this[property + 'Color'], vpt = this.viewportTransform, finalWidth = this.width, + finalHeight = this.height; + if (!filler) { + return; + } + if (filler.toLive) { + var repeat = filler.repeat, iVpt = fabric.util.invertTransform(vpt), shouldInvert = this[property + 'Vpt'], + additionalTransform = shouldInvert ? fabric.util.matrixToSVG(iVpt) : ''; + markup.push( + '\n' + ); + } + else { + markup.push( + '\n' + ); + } + }, + /* _TO_SVG_END_ */ - /** - * Moves an object or a selection up in stack of drawn objects - * An optional parameter, intersecting allows to move the object in front - * of the first intersecting object. Where intersection is calculated with - * bounding box. If no intersection is found, there will not be change in the - * stack. - * @param {fabric.Object} object Object to send - * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object - * @return {fabric.Canvas} thisArg - * @chainable - */ - bringForward: function (object, intersecting) { - if (!object) { + /** + * Moves an object or the objects of a multiple selection + * to the bottom of the stack of drawn objects + * @param {fabric.Object} object Object to send to back + * @return {fabric.Canvas} thisArg + * @chainable + */ + sendToBack: function (object) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, objs; + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = objs.length; i--;) { + obj = objs[i]; + removeFromArray(this._objects, obj); + this._objects.unshift(obj); + } + } + else { + removeFromArray(this._objects, object); + this._objects.unshift(object); + } + this.renderOnAddRemove && this.requestRenderAll(); return this; - } - var activeSelection = this._activeObject, - i, obj, idx, newIdx, objs, objsMoved = 0; + }, - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = objs.length; i--;) { - obj = objs[i]; - idx = this._objects.indexOf(obj); - if (idx < this._objects.length - 1 - objsMoved) { - newIdx = idx + 1; + /** + * Moves an object or the objects of a multiple selection + * to the top of the stack of drawn objects + * @param {fabric.Object} object Object to send + * @return {fabric.Canvas} thisArg + * @chainable + */ + bringToFront: function (object) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, objs; + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = 0; i < objs.length; i++) { + obj = objs[i]; removeFromArray(this._objects, obj); - this._objects.splice(newIdx, 0, obj); + this._objects.push(obj); } - objsMoved++; } - } - else { - idx = this._objects.indexOf(object); - if (idx !== this._objects.length - 1) { - // if object is not on top of stack (last item in an array) - newIdx = this._findNewUpperIndex(object, idx, intersecting); + else { removeFromArray(this._objects, object); - this._objects.splice(newIdx, 0, object); + this._objects.push(object); } - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - /** - * @private - */ - _findNewUpperIndex: function(object, idx, intersecting) { - var newIdx, i, len; + /** + * Moves an object or a selection down in stack of drawn objects + * An optional parameter, intersecting allows to move the object in behind + * the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Canvas} thisArg + * @chainable + */ + sendBackwards: function (object, intersecting) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, idx, newIdx, objs, objsMoved = 0; + + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = 0; i < objs.length; i++) { + obj = objs[i]; + idx = this._objects.indexOf(obj); + if (idx > 0 + objsMoved) { + newIdx = idx - 1; + removeFromArray(this._objects, obj); + this._objects.splice(newIdx, 0, obj); + } + objsMoved++; + } + } + else { + idx = this._objects.indexOf(object); + if (idx !== 0) { + // if object is not on the bottom of stack + newIdx = this._findNewLowerIndex(object, idx, intersecting); + removeFromArray(this._objects, object); + this._objects.splice(newIdx, 0, object); + } + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - if (intersecting) { - newIdx = idx; + /** + * @private + */ + _findNewLowerIndex: function(object, idx, intersecting) { + var newIdx, i; - // traverse up the stack looking for the nearest intersecting object - for (i = idx + 1, len = this._objects.length; i < len; ++i) { + if (intersecting) { + newIdx = idx; - var isIntersecting = object.intersectsWithObject(this._objects[i]) || - object.isContainedWithinObject(this._objects[i]) || - this._objects[i].isContainedWithinObject(object); + // traverse down the stack looking for the nearest intersecting object + for (i = idx - 1; i >= 0; --i) { - if (isIntersecting) { - newIdx = i; - break; + var isIntersecting = object.intersectsWithObject(this._objects[i]) || + object.isContainedWithinObject(this._objects[i]) || + this._objects[i].isContainedWithinObject(object); + + if (isIntersecting) { + newIdx = i; + break; + } } } - } - else { - newIdx = idx + 1; - } - - return newIdx; - }, + else { + newIdx = idx - 1; + } - /** - * Moves an object to specified level in stack of drawn objects - * @param {fabric.Object} object Object to send - * @param {Number} index Position to move to - * @return {fabric.Canvas} thisArg - * @chainable - */ - moveTo: function (object, index) { - removeFromArray(this._objects, object); - this._objects.splice(index, 0, object); - return this.renderOnAddRemove && this.requestRenderAll(); - }, + return newIdx; + }, - /** - * Clears a canvas element and dispose objects - * @return {fabric.Canvas} thisArg - * @chainable - */ - dispose: function () { - // cancel eventually ongoing renders - if (this.isRendering) { - fabric.util.cancelAnimFrame(this.isRendering); - this.isRendering = 0; - } - this.forEachObject(function(object) { - object.dispose && object.dispose(); - }); - this._objects = []; - if (this.backgroundImage && this.backgroundImage.dispose) { - this.backgroundImage.dispose(); - } - this.backgroundImage = null; - if (this.overlayImage && this.overlayImage.dispose) { - this.overlayImage.dispose(); - } - this.overlayImage = null; - this._iTextInstances = null; - this.contextContainer = null; - // restore canvas style - this.lowerCanvasEl.classList.remove('lower-canvas'); - fabric.util.setStyle(this.lowerCanvasEl, this._originalCanvasStyle); - delete this._originalCanvasStyle; - // restore canvas size to original size in case retina scaling was applied - this.lowerCanvasEl.setAttribute('width', this.width); - this.lowerCanvasEl.setAttribute('height', this.height); - fabric.util.cleanUpJsdomNode(this.lowerCanvasEl); - this.lowerCanvasEl = undefined; - return this; - }, - - /** - * Returns a string representation of an instance - * @return {String} string representation of an instance - */ - toString: function () { - return '#'; - } - }); + /** + * Moves an object or a selection up in stack of drawn objects + * An optional parameter, intersecting allows to move the object in front + * of the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Canvas} thisArg + * @chainable + */ + bringForward: function (object, intersecting) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, idx, newIdx, objs, objsMoved = 0; + + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = objs.length; i--;) { + obj = objs[i]; + idx = this._objects.indexOf(obj); + if (idx < this._objects.length - 1 - objsMoved) { + newIdx = idx + 1; + removeFromArray(this._objects, obj); + this._objects.splice(newIdx, 0, obj); + } + objsMoved++; + } + } + else { + idx = this._objects.indexOf(object); + if (idx !== this._objects.length - 1) { + // if object is not on top of stack (last item in an array) + newIdx = this._findNewUpperIndex(object, idx, intersecting); + removeFromArray(this._objects, object); + this._objects.splice(newIdx, 0, object); + } + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - extend(fabric.StaticCanvas.prototype, fabric.Observable); - extend(fabric.StaticCanvas.prototype, fabric.Collection); - extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter); + /** + * @private + */ + _findNewUpperIndex: function(object, idx, intersecting) { + var newIdx, i, len; - extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ { + if (intersecting) { + newIdx = idx; - /** - * @static - * @type String - * @default - */ - EMPTY_JSON: '{"objects": [], "background": "white"}', + // traverse up the stack looking for the nearest intersecting object + for (i = idx + 1, len = this._objects.length; i < len; ++i) { - /** - * Provides a way to check support of some of the canvas methods - * (either those of HTMLCanvasElement itself, or rendering context) - * - * @param {String} methodName Method to check support for; - * Could be one of "setLineDash" - * @return {Boolean | null} `true` if method is supported (or at least exists), - * `null` if canvas element or context can not be initialized - */ - supports: function (methodName) { - var el = createCanvasElement(); + var isIntersecting = object.intersectsWithObject(this._objects[i]) || + object.isContainedWithinObject(this._objects[i]) || + this._objects[i].isContainedWithinObject(object); - if (!el || !el.getContext) { - return null; - } + if (isIntersecting) { + newIdx = i; + break; + } + } + } + else { + newIdx = idx + 1; + } - var ctx = el.getContext('2d'); - if (!ctx) { - return null; - } + return newIdx; + }, - switch (methodName) { + /** + * Moves an object to specified level in stack of drawn objects + * @param {fabric.Object} object Object to send + * @param {Number} index Position to move to + * @return {fabric.Canvas} thisArg + * @chainable + */ + moveTo: function (object, index) { + removeFromArray(this._objects, object); + this._objects.splice(index, 0, object); + return this.renderOnAddRemove && this.requestRenderAll(); + }, - case 'setLineDash': - return typeof ctx.setLineDash !== 'undefined'; + /** + * Clears a canvas element and dispose objects + * @return {fabric.Canvas} thisArg + * @chainable + */ + dispose: function () { + // cancel eventually ongoing renders + if (this.isRendering) { + fabric.util.cancelAnimFrame(this.isRendering); + this.isRendering = 0; + } + this.forEachObject(function(object) { + object.dispose && object.dispose(); + }); + this._objects = []; + if (this.backgroundImage && this.backgroundImage.dispose) { + this.backgroundImage.dispose(); + } + this.backgroundImage = null; + if (this.overlayImage && this.overlayImage.dispose) { + this.overlayImage.dispose(); + } + this.overlayImage = null; + this._iTextInstances = null; + this.contextContainer = null; + // restore canvas style and attributes + this.lowerCanvasEl.classList.remove('lower-canvas'); + this.lowerCanvasEl.removeAttribute('data-fabric'); + if (this.interactive) { + this.lowerCanvasEl.style.cssText = this._originalCanvasStyle; + delete this._originalCanvasStyle; + } + // restore canvas size to original size in case retina scaling was applied + this.lowerCanvasEl.setAttribute('width', this.width); + this.lowerCanvasEl.setAttribute('height', this.height); + fabric.util.cleanUpJsdomNode(this.lowerCanvasEl); + this.lowerCanvasEl = undefined; + return this; + }, - default: - return null; + /** + * Returns a string representation of an instance + * @return {String} string representation of an instance + */ + toString: function () { + return '#'; } - } - }); + }); - /** - * Returns Object representation of canvas - * this alias is provided because if you call JSON.stringify on an instance, - * the toJSON object will be invoked if it exists. - * Having a toJSON method means you can do JSON.stringify(myCanvas) - * @function - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} JSON compatible object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} - * @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo} - * @example JSON without additional properties - * var json = canvas.toJSON(); - * @example JSON with additional properties included - * var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']); - * @example JSON without default values - * canvas.includeDefaultValues = false; - * var json = canvas.toJSON(); - */ - fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject; + extend(fabric.StaticCanvas.prototype, fabric.Observable); + extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter); - if (fabric.isLikelyNode) { - fabric.StaticCanvas.prototype.createPNGStream = function() { - var impl = getNodeCanvas(this.lowerCanvasEl); - return impl && impl.createPNGStream(); - }; - fabric.StaticCanvas.prototype.createJPEGStream = function(opts) { - var impl = getNodeCanvas(this.lowerCanvasEl); - return impl && impl.createJPEGStream(opts); - }; - } -})(); + extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ { + /** + * @static + * @type String + * @default + */ + EMPTY_JSON: '{"objects": [], "background": "white"}', -/** - * BaseBrush class - * @class fabric.BaseBrush - * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo} - */ -fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ { + /** + * Provides a way to check support of some of the canvas methods + * (either those of HTMLCanvasElement itself, or rendering context) + * + * @param {String} methodName Method to check support for; + * Could be one of "setLineDash" + * @return {Boolean | null} `true` if method is supported (or at least exists), + * `null` if canvas element or context can not be initialized + */ + supports: function (methodName) { + var el = createCanvasElement(); - /** - * Color of a brush - * @type String - * @default - */ - color: 'rgb(0, 0, 0)', + if (!el || !el.getContext) { + return null; + } - /** - * Width of a brush, has to be a Number, no string literals - * @type Number - * @default - */ - width: 1, + var ctx = el.getContext('2d'); + if (!ctx) { + return null; + } - /** - * Shadow object representing shadow of this shape. - * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), - * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 - * @type fabric.Shadow - * @default - */ - shadow: null, - - /** - * Line endings style of a brush (one of "butt", "round", "square") - * @type String - * @default - */ - strokeLineCap: 'round', + switch (methodName) { - /** - * Corner style of a brush (one of "bevel", "round", "miter") - * @type String - * @default - */ - strokeLineJoin: 'round', + case 'setLineDash': + return typeof ctx.setLineDash !== 'undefined'; - /** - * Maximum miter length (used for strokeLineJoin = "miter") of a brush's - * @type Number - * @default - */ - strokeMiterLimit: 10, + default: + return null; + } + } + }); - /** - * Stroke Dash Array. - * @type Array - * @default - */ - strokeDashArray: null, + /** + * Returns Object representation of canvas + * this alias is provided because if you call JSON.stringify on an instance, + * the toJSON object will be invoked if it exists. + * Having a toJSON method means you can do JSON.stringify(myCanvas) + * @function + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} JSON compatible object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} + * @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo} + * @example JSON without additional properties + * var json = canvas.toJSON(); + * @example JSON with additional properties included + * var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']); + * @example JSON without default values + * canvas.includeDefaultValues = false; + * var json = canvas.toJSON(); + */ + fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject; - /** - * When `true`, the free drawing is limited to the whiteboard size. Default to false. - * @type Boolean - * @default false - */ + if (fabric.isLikelyNode) { + fabric.StaticCanvas.prototype.createPNGStream = function() { + var impl = getNodeCanvas(this.lowerCanvasEl); + return impl && impl.createPNGStream(); + }; + fabric.StaticCanvas.prototype.createJPEGStream = function(opts) { + var impl = getNodeCanvas(this.lowerCanvasEl); + return impl && impl.createJPEGStream(opts); + }; + } + })(typeof exports !== 'undefined' ? exports : window); - limitedToCanvasSize: false, + (function(global) { + var fabric = global.fabric; + /** + * BaseBrush class + * @class fabric.BaseBrush + * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo} + */ + fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ { + /** + * Color of a brush + * @type String + * @default + */ + color: 'rgb(0, 0, 0)', - /** - * Sets brush styles - * @private - * @param {CanvasRenderingContext2D} ctx - */ - _setBrushStyles: function (ctx) { - ctx.strokeStyle = this.color; - ctx.lineWidth = this.width; - ctx.lineCap = this.strokeLineCap; - ctx.miterLimit = this.strokeMiterLimit; - ctx.lineJoin = this.strokeLineJoin; - ctx.setLineDash(this.strokeDashArray || []); - }, + /** + * Width of a brush, has to be a Number, no string literals + * @type Number + * @default + */ + width: 1, - /** - * Sets the transformation on given context - * @param {RenderingContext2d} ctx context to render on - * @private - */ - _saveAndTransform: function(ctx) { - var v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - }, + /** + * Shadow object representing shadow of this shape. + * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), + * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 + * @type fabric.Shadow + * @default + */ + shadow: null, - /** - * Sets brush shadow styles - * @private - */ - _setShadow: function() { - if (!this.shadow) { - return; - } + /** + * Line endings style of a brush (one of "butt", "round", "square") + * @type String + * @default + */ + strokeLineCap: 'round', - var canvas = this.canvas, - shadow = this.shadow, - ctx = canvas.contextTop, - zoom = canvas.getZoom(); - if (canvas && canvas._isRetinaScaling()) { - zoom *= fabric.devicePixelRatio; - } + /** + * Corner style of a brush (one of "bevel", "round", "miter") + * @type String + * @default + */ + strokeLineJoin: 'round', - ctx.shadowColor = shadow.color; - ctx.shadowBlur = shadow.blur * zoom; - ctx.shadowOffsetX = shadow.offsetX * zoom; - ctx.shadowOffsetY = shadow.offsetY * zoom; - }, + /** + * Maximum miter length (used for strokeLineJoin = "miter") of a brush's + * @type Number + * @default + */ + strokeMiterLimit: 10, - needsFullRender: function() { - var color = new fabric.Color(this.color); - return color.getAlpha() < 1 || !!this.shadow; - }, + /** + * Stroke Dash Array. + * @type Array + * @default + */ + strokeDashArray: null, - /** - * Removes brush shadow styles - * @private - */ - _resetShadow: function() { - var ctx = this.canvas.contextTop; + /** + * When `true`, the free drawing is limited to the whiteboard size. Default to false. + * @type Boolean + * @default false + */ - ctx.shadowColor = ''; - ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; - }, + limitedToCanvasSize: false, - /** - * Check is pointer is outside canvas boundaries - * @param {Object} pointer - * @private - */ - _isOutSideCanvas: function(pointer) { - return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); - } -}); + /** + * Sets brush styles + * @private + * @param {CanvasRenderingContext2D} ctx + */ + _setBrushStyles: function (ctx) { + ctx.strokeStyle = this.color; + ctx.lineWidth = this.width; + ctx.lineCap = this.strokeLineCap; + ctx.miterLimit = this.strokeMiterLimit; + ctx.lineJoin = this.strokeLineJoin; + ctx.setLineDash(this.strokeDashArray || []); + }, -(function() { - /** - * PencilBrush class - * @class fabric.PencilBrush - * @extends fabric.BaseBrush - */ - fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { + /** + * Sets the transformation on given context + * @param {RenderingContext2d} ctx context to render on + * @private + */ + _saveAndTransform: function(ctx) { + var v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + }, - /** - * Discard points that are less than `decimate` pixel distant from each other - * @type Number - * @default 0.4 - */ - decimate: 0.4, + /** + * Sets brush shadow styles + * @private + */ + _setShadow: function() { + if (!this.shadow) { + return; + } - /** - * Draws a straight line between last recorded point to current pointer - * Used for `shift` functionality - * - * @type boolean - * @default false - */ - drawStraightLine: false, + var canvas = this.canvas, + shadow = this.shadow, + ctx = canvas.contextTop, + zoom = canvas.getZoom(); + if (canvas && canvas._isRetinaScaling()) { + zoom *= fabric.devicePixelRatio; + } - /** - * The event modifier key that makes the brush draw a straight line. - * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. - * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} - */ - straightLineKey: 'shiftKey', + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * zoom; + ctx.shadowOffsetX = shadow.offsetX * zoom; + ctx.shadowOffsetY = shadow.offsetY * zoom; + }, - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.PencilBrush} Instance of a pencil brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this._points = []; - }, + needsFullRender: function() { + var color = new fabric.Color(this.color); + return color.getAlpha() < 1 || !!this.shadow; + }, - needsFullRender: function () { - return this.callSuper('needsFullRender') || this._hasStraightLine; - }, + /** + * Removes brush shadow styles + * @private + */ + _resetShadow: function() { + var ctx = this.canvas.contextTop; - /** - * Invoked inside on mouse down and mouse move - * @param {Object} pointer - */ - _drawSegment: function (ctx, p1, p2) { - var midPoint = p1.midPointFrom(p2); - ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); - return midPoint; - }, + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, - /** - * Invoked on mouse down - * @param {Object} pointer - */ - onMouseDown: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; + /** + * Check is pointer is outside canvas boundaries + * @param {Object} pointer + * @private + */ + _isOutSideCanvas: function(pointer) { + return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); } - this.drawStraightLine = options.e[this.straightLineKey]; - this._prepareForDrawing(pointer); - // capture coordinates immediately - // this allows to draw dots (when movement never occurs) - this._captureDrawingPath(pointer); - this._render(); - }, + }); + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric; /** - * Invoked on mouse move - * @param {Object} pointer + * PencilBrush class + * @class fabric.PencilBrush + * @extends fabric.BaseBrush */ - onMouseMove: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this.drawStraightLine = options.e[this.straightLineKey]; - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - if (this._captureDrawingPath(pointer) && this._points.length > 1) { - if (this.needsFullRender()) { - // redraw curve - // clear top canvas - this.canvas.clearContext(this.canvas.contextTop); - this._render(); - } - else { - var points = this._points, length = points.length, ctx = this.canvas.contextTop; - // draw the curve update - this._saveAndTransform(ctx); - if (this.oldEnd) { - ctx.beginPath(); - ctx.moveTo(this.oldEnd.x, this.oldEnd.y); - } - this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); - ctx.stroke(); - ctx.restore(); - } - } - }, + fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { - /** - * Invoked on mouse up - */ - onMouseUp: function(options) { - if (!this.canvas._isMainEvent(options.e)) { - return true; - } - this.drawStraightLine = false; - this.oldEnd = undefined; - this._finalizeAndAddPath(); - return false; - }, + /** + * Discard points that are less than `decimate` pixel distant from each other + * @type Number + * @default 0.4 + */ + decimate: 0.4, - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _prepareForDrawing: function(pointer) { + /** + * Draws a straight line between last recorded point to current pointer + * Used for `shift` functionality + * + * @type boolean + * @default false + */ + drawStraightLine: false, - var p = new fabric.Point(pointer.x, pointer.y); + /** + * The event modifier key that makes the brush draw a straight line. + * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. + * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} + */ + straightLineKey: 'shiftKey', - this._reset(); - this._addPoint(p); - this.canvas.contextTop.moveTo(p.x, p.y); - }, + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.PencilBrush} Instance of a pencil brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this._points = []; + }, - /** - * @private - * @param {fabric.Point} point Point to be added to points array - */ - _addPoint: function(point) { - if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { - return false; - } - if (this.drawStraightLine && this._points.length > 1) { - this._hasStraightLine = true; - this._points.pop(); - } - this._points.push(point); - return true; - }, + needsFullRender: function () { + return this.callSuper('needsFullRender') || this._hasStraightLine; + }, - /** - * Clear points array and set contextTop canvas style. - * @private - */ - _reset: function() { - this._points = []; - this._setBrushStyles(this.canvas.contextTop); - this._setShadow(); - this._hasStraightLine = false; - }, + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + _drawSegment: function (ctx, p1, p2) { + var midPoint = p1.midPointFrom(p2); + ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); + return midPoint; + }, - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _captureDrawingPath: function(pointer) { - var pointerPoint = new fabric.Point(pointer.x, pointer.y); - return this._addPoint(pointerPoint); - }, + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this.drawStraightLine = options.e[this.straightLineKey]; + this._prepareForDrawing(pointer); + // capture coordinates immediately + // this allows to draw dots (when movement never occurs) + this._captureDrawingPath(pointer); + this._render(); + }, - /** - * Draw a smooth path on the topCanvas using quadraticCurveTo - * @private - * @param {CanvasRenderingContext2D} [ctx] - */ - _render: function(ctx) { - var i, len, - p1 = this._points[0], - p2 = this._points[1]; - ctx = ctx || this.canvas.contextTop; - this._saveAndTransform(ctx); - ctx.beginPath(); - //if we only have 2 points in the path and they are the same - //it means that the user only clicked the canvas without moving the mouse - //then we should be drawing a dot. A path isn't drawn between two identical dots - //that's why we set them apart a bit - if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { - var width = this.width / 1000; - p1 = new fabric.Point(p1.x, p1.y); - p2 = new fabric.Point(p2.x, p2.y); - p1.x -= width; - p2.x += width; - } - ctx.moveTo(p1.x, p1.y); - - for (i = 1, len = this._points.length; i < len; i++) { - // we pick the point between pi + 1 & pi + 2 as the - // end point and p1 as our control point. - this._drawSegment(ctx, p1, p2); - p1 = this._points[i]; - p2 = this._points[i + 1]; - } - // Draw last line as a straight line while - // we wait for the next point to be able to calculate - // the bezier control point - ctx.lineTo(p1.x, p1.y); - ctx.stroke(); - ctx.restore(); - }, + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this.drawStraightLine = options.e[this.straightLineKey]; + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this._captureDrawingPath(pointer) && this._points.length > 1) { + if (this.needsFullRender()) { + // redraw curve + // clear top canvas + this.canvas.clearContext(this.canvas.contextTop); + this._render(); + } + else { + var points = this._points, length = points.length, ctx = this.canvas.contextTop; + // draw the curve update + this._saveAndTransform(ctx); + if (this.oldEnd) { + ctx.beginPath(); + ctx.moveTo(this.oldEnd.x, this.oldEnd.y); + } + this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); + ctx.stroke(); + ctx.restore(); + } + } + }, - /** - * Converts points to SVG path - * @param {Array} points Array of points - * @return {(string|number)[][]} SVG path commands - */ - convertPointsToSVGPath: function (points) { - var correction = this.width / 1000; - return fabric.util.getSmoothPathFromPoints(points, correction); - }, + /** + * Invoked on mouse up + */ + onMouseUp: function(options) { + if (!this.canvas._isMainEvent(options.e)) { + return true; + } + this.drawStraightLine = false; + this.oldEnd = undefined; + this._finalizeAndAddPath(); + return false; + }, - /** - * @private - * @param {(string|number)[][]} pathData SVG path commands - * @returns {boolean} - */ - _isEmptySVGPath: function (pathData) { - var pathString = fabric.util.joinPath(pathData); - return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; - }, - - /** - * Creates fabric.Path object to add on canvas - * @param {(string|number)[][]} pathData Path data - * @return {fabric.Path} Path to add on canvas - */ - createPath: function(pathData) { - var path = new fabric.Path(pathData, { - fill: null, - stroke: this.color, - strokeWidth: this.width, - strokeLineCap: this.strokeLineCap, - strokeMiterLimit: this.strokeMiterLimit, - strokeLineJoin: this.strokeLineJoin, - strokeDashArray: this.strokeDashArray, - }); - if (this.shadow) { - this.shadow.affectStroke = true; - path.shadow = new fabric.Shadow(this.shadow); - } + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _prepareForDrawing: function(pointer) { - return path; - }, + var p = new fabric.Point(pointer.x, pointer.y); - /** - * Decimate points array with the decimate value - */ - decimatePoints: function(points, distance) { - if (points.length <= 2) { - return points; - } - var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), - i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], - cDistance; - for (i = 1; i < l - 1; i++) { - cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); - if (cDistance >= adjustedDistance) { - lastPoint = points[i]; - newPoints.push(lastPoint); + this._reset(); + this._addPoint(p); + this.canvas.contextTop.moveTo(p.x, p.y); + }, + + /** + * @private + * @param {fabric.Point} point Point to be added to points array + */ + _addPoint: function(point) { + if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { + return false; } - } + if (this.drawStraightLine && this._points.length > 1) { + this._hasStraightLine = true; + this._points.pop(); + } + this._points.push(point); + return true; + }, + /** - * Add the last point from the original line to the end of the array. - * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. + * Clear points array and set contextTop canvas style. + * @private */ - newPoints.push(points[l]); - return newPoints; - }, + _reset: function() { + this._points = []; + this._setBrushStyles(this.canvas.contextTop); + this._setShadow(); + this._hasStraightLine = false; + }, - /** - * On mouseup after drawing the path on contextTop canvas - * we use the points captured to create an new fabric path object - * and add it to the fabric canvas. - */ - _finalizeAndAddPath: function() { - var ctx = this.canvas.contextTop; - ctx.closePath(); - if (this.decimate) { - this._points = this.decimatePoints(this._points, this.decimate); - } - var pathData = this.convertPointsToSVGPath(this._points); - if (this._isEmptySVGPath(pathData)) { - // do not create 0 width/height paths, as they are - // rendered inconsistently across browsers - // Firefox 4, for example, renders a dot, - // whereas Chrome 10 renders nothing - this.canvas.requestRenderAll(); - return; - } + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _captureDrawingPath: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y); + return this._addPoint(pointerPoint); + }, - var path = this.createPath(pathData); - this.canvas.clearContext(this.canvas.contextTop); - this.canvas.fire('before:path:created', { path: path }); - this.canvas.add(path); - this.canvas.requestRenderAll(); - path.setCoords(); - this._resetShadow(); + /** + * Draw a smooth path on the topCanvas using quadraticCurveTo + * @private + * @param {CanvasRenderingContext2D} [ctx] + */ + _render: function(ctx) { + var i, len, + p1 = this._points[0], + p2 = this._points[1]; + ctx = ctx || this.canvas.contextTop; + this._saveAndTransform(ctx); + ctx.beginPath(); + //if we only have 2 points in the path and they are the same + //it means that the user only clicked the canvas without moving the mouse + //then we should be drawing a dot. A path isn't drawn between two identical dots + //that's why we set them apart a bit + if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { + var width = this.width / 1000; + p1 = new fabric.Point(p1.x, p1.y); + p2 = new fabric.Point(p2.x, p2.y); + p1.x -= width; + p2.x += width; + } + ctx.moveTo(p1.x, p1.y); + + for (i = 1, len = this._points.length; i < len; i++) { + // we pick the point between pi + 1 & pi + 2 as the + // end point and p1 as our control point. + this._drawSegment(ctx, p1, p2); + p1 = this._points[i]; + p2 = this._points[i + 1]; + } + // Draw last line as a straight line while + // we wait for the next point to be able to calculate + // the bezier control point + ctx.lineTo(p1.x, p1.y); + ctx.stroke(); + ctx.restore(); + }, + /** + * Converts points to SVG path + * @param {Array} points Array of points + * @return {(string|number)[][]} SVG path commands + */ + convertPointsToSVGPath: function (points) { + var correction = this.width / 1000; + return fabric.util.getSmoothPathFromPoints(points, correction); + }, - // fire event 'path' created - this.canvas.fire('path:created', { path: path }); - } - }); -})(); + /** + * @private + * @param {(string|number)[][]} pathData SVG path commands + * @returns {boolean} + */ + _isEmptySVGPath: function (pathData) { + var pathString = fabric.util.joinPath(pathData); + return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; + }, + /** + * Creates fabric.Path object to add on canvas + * @param {(string|number)[][]} pathData Path data + * @return {fabric.Path} Path to add on canvas + */ + createPath: function(pathData) { + var path = new fabric.Path(pathData, { + fill: null, + stroke: this.color, + strokeWidth: this.width, + strokeLineCap: this.strokeLineCap, + strokeMiterLimit: this.strokeMiterLimit, + strokeLineJoin: this.strokeLineJoin, + strokeDashArray: this.strokeDashArray, + }); + if (this.shadow) { + this.shadow.affectStroke = true; + path.shadow = new fabric.Shadow(this.shadow); + } -/** - * CircleBrush class - * @class fabric.CircleBrush - */ -fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ { + return path; + }, - /** - * Width of a brush - * @type Number - * @default - */ - width: 10, + /** + * Decimate points array with the decimate value + */ + decimatePoints: function(points, distance) { + if (points.length <= 2) { + return points; + } + var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), + i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], + cDistance; + for (i = 1; i < l - 1; i++) { + cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); + if (cDistance >= adjustedDistance) { + lastPoint = points[i]; + newPoints.push(lastPoint); + } + } + /** + * Add the last point from the original line to the end of the array. + * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. + */ + newPoints.push(points[l]); + return newPoints; + }, - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.CircleBrush} Instance of a circle brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this.points = []; - }, + /** + * On mouseup after drawing the path on contextTop canvas + * we use the points captured to create an new fabric path object + * and add it to the fabric canvas. + */ + _finalizeAndAddPath: function() { + var ctx = this.canvas.contextTop; + ctx.closePath(); + if (this.decimate) { + this._points = this.decimatePoints(this._points, this.decimate); + } + var pathData = this.convertPointsToSVGPath(this._points); + if (this._isEmptySVGPath(pathData)) { + // do not create 0 width/height paths, as they are + // rendered inconsistently across browsers + // Firefox 4, for example, renders a dot, + // whereas Chrome 10 renders nothing + this.canvas.requestRenderAll(); + return; + } - /** - * Invoked inside on mouse down and mouse move - * @param {Object} pointer - */ - drawDot: function(pointer) { - var point = this.addPoint(pointer), - ctx = this.canvas.contextTop; - this._saveAndTransform(ctx); - this.dot(ctx, point); - ctx.restore(); - }, - - dot: function(ctx, point) { - ctx.fillStyle = point.fill; - ctx.beginPath(); - ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); - ctx.closePath(); - ctx.fill(); - }, + var path = this.createPath(pathData); + this.canvas.clearContext(this.canvas.contextTop); + this.canvas.fire('before:path:created', { path: path }); + this.canvas.add(path); + this.canvas.requestRenderAll(); + path.setCoords(); + this._resetShadow(); - /** - * Invoked on mouse down - */ - onMouseDown: function(pointer) { - this.points.length = 0; - this.canvas.clearContext(this.canvas.contextTop); - this._setShadow(); - this.drawDot(pointer); - }, - /** - * Render the full state of the brush - * @private - */ - _render: function() { - var ctx = this.canvas.contextTop, i, len, - points = this.points; - this._saveAndTransform(ctx); - for (i = 0, len = points.length; i < len; i++) { - this.dot(ctx, points[i]); - } - ctx.restore(); - }, - - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer) { - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - if (this.needsFullRender()) { - this.canvas.clearContext(this.canvas.contextTop); - this.addPoint(pointer); - this._render(); - } - else { - this.drawDot(pointer); - } - }, + // fire event 'path' created + this.canvas.fire('path:created', { path: path }); + } + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Invoked on mouse up - */ - onMouseUp: function() { - var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len; - this.canvas.renderOnAddRemove = false; - - var circles = []; - - for (i = 0, len = this.points.length; i < len; i++) { - var point = this.points[i], - circle = new fabric.Circle({ - radius: point.radius, - left: point.x, - top: point.y, - originX: 'center', - originY: 'center', - fill: point.fill - }); + (function(global) { + var fabric = global.fabric; + /** + * CircleBrush class + * @class fabric.CircleBrush + */ + fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ { - this.shadow && (circle.shadow = new fabric.Shadow(this.shadow)); + /** + * Width of a brush + * @type Number + * @default + */ + width: 10, - circles.push(circle); - } - var group = new fabric.Group(circles); - group.canvas = this.canvas; + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.CircleBrush} Instance of a circle brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.points = []; + }, - this.canvas.fire('before:path:created', { path: group }); - this.canvas.add(group); - this.canvas.fire('path:created', { path: group }); + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + drawDot: function(pointer) { + var point = this.addPoint(pointer), + ctx = this.canvas.contextTop; + this._saveAndTransform(ctx); + this.dot(ctx, point); + ctx.restore(); + }, - this.canvas.clearContext(this.canvas.contextTop); - this._resetShadow(); - this.canvas.renderOnAddRemove = originalRenderOnAddRemove; - this.canvas.requestRenderAll(); - }, + dot: function(ctx, point) { + ctx.fillStyle = point.fill; + ctx.beginPath(); + ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); + ctx.closePath(); + ctx.fill(); + }, - /** - * @param {Object} pointer - * @return {fabric.Point} Just added pointer point - */ - addPoint: function(pointer) { - var pointerPoint = new fabric.Point(pointer.x, pointer.y), + /** + * Invoked on mouse down + */ + onMouseDown: function(pointer) { + this.points.length = 0; + this.canvas.clearContext(this.canvas.contextTop); + this._setShadow(); + this.drawDot(pointer); + }, - circleRadius = fabric.util.getRandomInt( - Math.max(0, this.width - 20), this.width + 20) / 2, + /** + * Render the full state of the brush + * @private + */ + _render: function() { + var ctx = this.canvas.contextTop, i, len, + points = this.points; + this._saveAndTransform(ctx); + for (i = 0, len = points.length; i < len; i++) { + this.dot(ctx, points[i]); + } + ctx.restore(); + }, - circleColor = new fabric.Color(this.color) - .setAlpha(fabric.util.getRandomInt(0, 100) / 100) - .toRgba(); + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this.needsFullRender()) { + this.canvas.clearContext(this.canvas.contextTop); + this.addPoint(pointer); + this._render(); + } + else { + this.drawDot(pointer); + } + }, - pointerPoint.radius = circleRadius; - pointerPoint.fill = circleColor; + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len; + this.canvas.renderOnAddRemove = false; - this.points.push(pointerPoint); + var circles = []; - return pointerPoint; - } -}); + for (i = 0, len = this.points.length; i < len; i++) { + var point = this.points[i], + circle = new fabric.Circle({ + radius: point.radius, + left: point.x, + top: point.y, + originX: 'center', + originY: 'center', + fill: point.fill + }); + this.shadow && (circle.shadow = new fabric.Shadow(this.shadow)); -/** - * SprayBrush class - * @class fabric.SprayBrush - */ -fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ { + circles.push(circle); + } + var group = new fabric.Group(circles); + group.canvas = this.canvas; - /** - * Width of a spray - * @type Number - * @default - */ - width: 10, + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); - /** - * Density of a spray (number of dots per chunk) - * @type Number - * @default - */ - density: 20, + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, - /** - * Width of spray dots - * @type Number - * @default - */ - dotWidth: 1, + /** + * @param {Object} pointer + * @return {fabric.Point} Just added pointer point + */ + addPoint: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y), - /** - * Width variance of spray dots - * @type Number - * @default - */ - dotWidthVariance: 1, + circleRadius = fabric.util.getRandomInt( + Math.max(0, this.width - 20), this.width + 20) / 2, - /** - * Whether opacity of a dot should be random - * @type Boolean - * @default - */ - randomOpacity: false, + circleColor = new fabric.Color(this.color) + .setAlpha(fabric.util.getRandomInt(0, 100) / 100) + .toRgba(); - /** - * Whether overlapping dots (rectangles) should be removed (for performance reasons) - * @type Boolean - * @default - */ - optimizeOverlapping: true, + pointerPoint.radius = circleRadius; + pointerPoint.fill = circleColor; - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.SprayBrush} Instance of a spray brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this.sprayChunks = []; - }, + this.points.push(pointerPoint); - /** - * Invoked on mouse down - * @param {Object} pointer - */ - onMouseDown: function(pointer) { - this.sprayChunks.length = 0; - this.canvas.clearContext(this.canvas.contextTop); - this._setShadow(); + return pointerPoint; + } + }); + })(typeof exports !== 'undefined' ? exports : window); - this.addSprayChunk(pointer); - this.render(this.sprayChunkPoints); - }, + (function(global) { + var fabric = global.fabric; + /** + * SprayBrush class + * @class fabric.SprayBrush + */ + fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ { - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer) { - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - this.addSprayChunk(pointer); - this.render(this.sprayChunkPoints); - }, + /** + * Width of a spray + * @type Number + * @default + */ + width: 10, - /** - * Invoked on mouse up - */ - onMouseUp: function() { - var originalRenderOnAddRemove = this.canvas.renderOnAddRemove; - this.canvas.renderOnAddRemove = false; + /** + * Density of a spray (number of dots per chunk) + * @type Number + * @default + */ + density: 20, - var rects = []; + /** + * Width of spray dots + * @type Number + * @default + */ + dotWidth: 1, - for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { - var sprayChunk = this.sprayChunks[i]; + /** + * Width variance of spray dots + * @type Number + * @default + */ + dotWidthVariance: 1, - for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) { + /** + * Whether opacity of a dot should be random + * @type Boolean + * @default + */ + randomOpacity: false, - var rect = new fabric.Rect({ - width: sprayChunk[j].width, - height: sprayChunk[j].width, - left: sprayChunk[j].x + 1, - top: sprayChunk[j].y + 1, - originX: 'center', - originY: 'center', - fill: this.color - }); - rects.push(rect); - } - } + /** + * Whether overlapping dots (rectangles) should be removed (for performance reasons) + * @type Boolean + * @default + */ + optimizeOverlapping: true, - if (this.optimizeOverlapping) { - rects = this._getOptimizedRects(rects); - } + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.SprayBrush} Instance of a spray brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.sprayChunks = []; + }, - var group = new fabric.Group(rects); - this.shadow && group.set('shadow', new fabric.Shadow(this.shadow)); - this.canvas.fire('before:path:created', { path: group }); - this.canvas.add(group); - this.canvas.fire('path:created', { path: group }); + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer) { + this.sprayChunks.length = 0; + this.canvas.clearContext(this.canvas.contextTop); + this._setShadow(); - this.canvas.clearContext(this.canvas.contextTop); - this._resetShadow(); - this.canvas.renderOnAddRemove = originalRenderOnAddRemove; - this.canvas.requestRenderAll(); - }, + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, - /** - * @private - * @param {Array} rects - */ - _getOptimizedRects: function(rects) { + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, - // avoid creating duplicate rects at the same coordinates - var uniqueRects = { }, key, i, len; + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove; + this.canvas.renderOnAddRemove = false; + + var rects = []; + + for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + var sprayChunk = this.sprayChunks[i]; + + for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) { + + var rect = new fabric.Rect({ + width: sprayChunk[j].width, + height: sprayChunk[j].width, + left: sprayChunk[j].x + 1, + top: sprayChunk[j].y + 1, + originX: 'center', + originY: 'center', + fill: this.color + }); + rects.push(rect); + } + } - for (i = 0, len = rects.length; i < len; i++) { - key = rects[i].left + '' + rects[i].top; - if (!uniqueRects[key]) { - uniqueRects[key] = rects[i]; - } - } - var uniqueRectsArray = []; - for (key in uniqueRects) { - uniqueRectsArray.push(uniqueRects[key]); - } + if (this.optimizeOverlapping) { + rects = this._getOptimizedRects(rects); + } - return uniqueRectsArray; - }, + var group = new fabric.Group(rects, { + objectCaching: true, + layout: 'fixed', + subTargetCheck: false, + interactive: false + }); + this.shadow && group.set('shadow', new fabric.Shadow(this.shadow)); + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); + + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, - /** - * Render new chunk of spray brush - */ - render: function(sprayChunk) { - var ctx = this.canvas.contextTop, i, len; - ctx.fillStyle = this.color; + /** + * @private + * @param {Array} rects + */ + _getOptimizedRects: function(rects) { - this._saveAndTransform(ctx); + // avoid creating duplicate rects at the same coordinates + var uniqueRects = { }, key, i, len; - for (i = 0, len = sprayChunk.length; i < len; i++) { - var point = sprayChunk[i]; - if (typeof point.opacity !== 'undefined') { - ctx.globalAlpha = point.opacity; - } - ctx.fillRect(point.x, point.y, point.width, point.width); - } - ctx.restore(); - }, + for (i = 0, len = rects.length; i < len; i++) { + key = rects[i].left + '' + rects[i].top; + if (!uniqueRects[key]) { + uniqueRects[key] = rects[i]; + } + } + var uniqueRectsArray = []; + for (key in uniqueRects) { + uniqueRectsArray.push(uniqueRects[key]); + } - /** - * Render all spray chunks - */ - _render: function() { - var ctx = this.canvas.contextTop, i, ilen; - ctx.fillStyle = this.color; + return uniqueRectsArray; + }, - this._saveAndTransform(ctx); + /** + * Render new chunk of spray brush + */ + render: function(sprayChunk) { + var ctx = this.canvas.contextTop, i, len; + ctx.fillStyle = this.color; - for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { - this.render(this.sprayChunks[i]); - } - ctx.restore(); - }, + this._saveAndTransform(ctx); - /** - * @param {Object} pointer - */ - addSprayChunk: function(pointer) { - this.sprayChunkPoints = []; + for (i = 0, len = sprayChunk.length; i < len; i++) { + var point = sprayChunk[i]; + if (typeof point.opacity !== 'undefined') { + ctx.globalAlpha = point.opacity; + } + ctx.fillRect(point.x, point.y, point.width, point.width); + } + ctx.restore(); + }, - var x, y, width, radius = this.width / 2, i; + /** + * Render all spray chunks + */ + _render: function() { + var ctx = this.canvas.contextTop, i, ilen; + ctx.fillStyle = this.color; - for (i = 0; i < this.density; i++) { + this._saveAndTransform(ctx); - x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius); - y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius); + for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + this.render(this.sprayChunks[i]); + } + ctx.restore(); + }, - if (this.dotWidthVariance) { - width = fabric.util.getRandomInt( - // bottom clamp width to 1 - Math.max(1, this.dotWidth - this.dotWidthVariance), - this.dotWidth + this.dotWidthVariance); - } - else { - width = this.dotWidth; - } + /** + * @param {Object} pointer + */ + addSprayChunk: function(pointer) { + this.sprayChunkPoints = []; - var point = new fabric.Point(x, y); - point.width = width; + var x, y, width, radius = this.width / 2, i; - if (this.randomOpacity) { - point.opacity = fabric.util.getRandomInt(0, 100) / 100; - } + for (i = 0; i < this.density; i++) { - this.sprayChunkPoints.push(point); - } + x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius); + y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius); - this.sprayChunks.push(this.sprayChunkPoints); - } -}); + if (this.dotWidthVariance) { + width = fabric.util.getRandomInt( + // bottom clamp width to 1 + Math.max(1, this.dotWidth - this.dotWidthVariance), + this.dotWidth + this.dotWidthVariance); + } + else { + width = this.dotWidth; + } + var point = new fabric.Point(x, y); + point.width = width; -/** - * PatternBrush class - * @class fabric.PatternBrush - * @extends fabric.BaseBrush - */ -fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ { + if (this.randomOpacity) { + point.opacity = fabric.util.getRandomInt(0, 100) / 100; + } - getPatternSrc: function() { + this.sprayChunkPoints.push(point); + } - var dotWidth = 20, - dotDistance = 5, - patternCanvas = fabric.util.createCanvasElement(), - patternCtx = patternCanvas.getContext('2d'); + this.sprayChunks.push(this.sprayChunkPoints); + } + }); + })(typeof exports !== 'undefined' ? exports : window); - patternCanvas.width = patternCanvas.height = dotWidth + dotDistance; + (function(global) { + var fabric = global.fabric; + /** + * PatternBrush class + * @class fabric.PatternBrush + * @extends fabric.BaseBrush + */ + fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ { - patternCtx.fillStyle = this.color; - patternCtx.beginPath(); - patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false); - patternCtx.closePath(); - patternCtx.fill(); + getPatternSrc: function() { - return patternCanvas; - }, + var dotWidth = 20, + dotDistance = 5, + patternCanvas = fabric.util.createCanvasElement(), + patternCtx = patternCanvas.getContext('2d'); - getPatternSrcFunction: function() { - return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"'); - }, + patternCanvas.width = patternCanvas.height = dotWidth + dotDistance; - /** - * Creates "pattern" instance property - * @param {CanvasRenderingContext2D} ctx - */ - getPattern: function(ctx) { - return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat'); - }, + patternCtx.fillStyle = this.color; + patternCtx.beginPath(); + patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false); + patternCtx.closePath(); + patternCtx.fill(); - /** - * Sets brush styles - * @param {CanvasRenderingContext2D} ctx - */ - _setBrushStyles: function(ctx) { - this.callSuper('_setBrushStyles', ctx); - ctx.strokeStyle = this.getPattern(ctx); - }, + return patternCanvas; + }, - /** - * Creates path - */ - createPath: function(pathData) { - var path = this.callSuper('createPath', pathData), - topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2); - - path.stroke = new fabric.Pattern({ - source: this.source || this.getPatternSrcFunction(), - offsetX: -topLeft.x, - offsetY: -topLeft.y - }); - return path; - } -}); + getPatternSrcFunction: function() { + return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"'); + }, + /** + * Creates "pattern" instance property + * @param {CanvasRenderingContext2D} ctx + */ + getPattern: function(ctx) { + return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat'); + }, -(function() { + /** + * Sets brush styles + * @param {CanvasRenderingContext2D} ctx + */ + _setBrushStyles: function(ctx) { + this.callSuper('_setBrushStyles', ctx); + ctx.strokeStyle = this.getPattern(ctx); + }, - var getPointer = fabric.util.getPointer, - degreesToRadians = fabric.util.degreesToRadians, - isTouchEvent = fabric.util.isTouchEvent; + /** + * Creates path + */ + createPath: function(pathData) { + var path = this.callSuper('createPath', pathData), + topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2); + + path.stroke = new fabric.Pattern({ + source: this.source || this.getPatternSrcFunction(), + offsetX: -topLeft.x, + offsetY: -topLeft.y + }); + return path; + } + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Canvas class - * @class fabric.Canvas - * @extends fabric.StaticCanvas - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas} - * @see {@link fabric.Canvas#initialize} for constructor definition - * - * @fires object:modified at the end of a transform or any change when statefull is true - * @fires object:rotating while an object is being rotated from the control - * @fires object:scaling while an object is being scaled by controls - * @fires object:moving while an object is being dragged - * @fires object:skewing while an object is being skewed from the controls - * - * @fires before:transform before a transform is is started - * @fires before:selection:cleared - * @fires selection:cleared - * @fires selection:updated - * @fires selection:created - * - * @fires path:created after a drawing operation ends and the path is added - * @fires mouse:down - * @fires mouse:move - * @fires mouse:up - * @fires mouse:down:before on mouse down, before the inner fabric logic runs - * @fires mouse:move:before on mouse move, before the inner fabric logic runs - * @fires mouse:up:before on mouse up, before the inner fabric logic runs - * @fires mouse:over - * @fires mouse:out - * @fires mouse:dblclick whenever a native dbl click event fires on the canvas. - * - * @fires dragover - * @fires dragenter - * @fires dragleave - * @fires drop:before before drop event. same native event. This is added to handle edge cases - * @fires drop - * @fires after:render at the end of the render process, receives the context in the callback - * @fires before:render at start the render process, receives the context in the callback - * - */ - fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { + (function(global) { - /** - * Constructor - * @param {HTMLElement | String} el <canvas> element to initialize instance on - * @param {Object} [options] Options object - * @return {Object} thisArg - */ - initialize: function(el, options) { - options || (options = { }); - this.renderAndResetBound = this.renderAndReset.bind(this); - this.requestRenderAllBound = this.requestRenderAll.bind(this); - this._initStatic(el, options); - this._initInteractive(); - this._createCacheCanvas(); - }, + var fabric = global.fabric, getPointer = fabric.util.getPointer, + degreesToRadians = fabric.util.degreesToRadians, + isTouchEvent = fabric.util.isTouchEvent; /** - * When true, objects can be transformed by one side (unproportionally) - * when dragged on the corners that normally would not do that. - * @type Boolean - * @default - * @since fabric 4.0 // changed name and default value + * Canvas class + * @class fabric.Canvas + * @extends fabric.StaticCanvas + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas} + * @see {@link fabric.Canvas#initialize} for constructor definition + * + * @fires object:modified at the end of a transform or any change when statefull is true + * @fires object:rotating while an object is being rotated from the control + * @fires object:scaling while an object is being scaled by controls + * @fires object:moving while an object is being dragged + * @fires object:skewing while an object is being skewed from the controls + * + * @fires before:transform before a transform is is started + * @fires before:selection:cleared + * @fires selection:cleared + * @fires selection:updated + * @fires selection:created + * + * @fires path:created after a drawing operation ends and the path is added + * @fires mouse:down + * @fires mouse:move + * @fires mouse:up + * @fires mouse:down:before on mouse down, before the inner fabric logic runs + * @fires mouse:move:before on mouse move, before the inner fabric logic runs + * @fires mouse:up:before on mouse up, before the inner fabric logic runs + * @fires mouse:over + * @fires mouse:out + * @fires mouse:dblclick whenever a native dbl click event fires on the canvas. + * + * @fires dragover + * @fires dragenter + * @fires dragleave + * @fires drop:before before drop event. same native event. This is added to handle edge cases + * @fires drop + * @fires after:render at the end of the render process, receives the context in the callback + * @fires before:render at start the render process, receives the context in the callback + * + * @fires contextmenu:before + * @fires contextmenu + * @example + * let handler; + * targets.forEach(target => { + * target.on('contextmenu:before', opt => { + * // decide which target should handle the event before canvas hijacks it + * if (someCaseHappens && opt.targets.includes(target)) { + * handler = target; + * } + * }); + * target.on('contextmenu', opt => { + * // do something fantastic + * }); + * }); + * canvas.on('contextmenu', opt => { + * if (!handler) { + * // no one takes responsibility, it's always left to me + * // let's show them how it's done! + * } + * }); + * */ - uniformScaling: true, + fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { - /** - * Indicates which key switches uniform scaling. - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled. - * totally wrong named. this sounds like `uniform scaling` - * if Canvas.uniformScaling is true, pressing this will set it to false - * and viceversa. - * @since 1.6.2 - * @type String - * @default - */ - uniScaleKey: 'shiftKey', + /** + * Constructor + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + this._initInteractive(); + this._createCacheCanvas(); + }, - /** - * When true, objects use center point as the origin of scale transformation. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredScaling: false, + /** + * When true, objects can be transformed by one side (unproportionally) + * when dragged on the corners that normally would not do that. + * @type Boolean + * @default + * @since fabric 4.0 // changed name and default value + */ + uniformScaling: true, - /** - * When true, objects use center point as the origin of rotate transformation. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredRotation: false, + /** + * Indicates which key switches uniform scaling. + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled. + * totally wrong named. this sounds like `uniform scaling` + * if Canvas.uniformScaling is true, pressing this will set it to false + * and viceversa. + * @since 1.6.2 + * @type String + * @default + */ + uniScaleKey: 'shiftKey', - /** - * Indicates which key enable centered Transform - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled feature disabled. - * @since 1.6.2 - * @type String - * @default - */ - centeredKey: 'altKey', + /** + * When true, objects use center point as the origin of scale transformation. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredScaling: false, - /** - * Indicates which key enable alternate action on corner - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled feature disabled. - * @since 1.6.2 - * @type String - * @default - */ - altActionKey: 'shiftKey', + /** + * When true, objects use center point as the origin of rotate transformation. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredRotation: false, - /** - * Indicates that canvas is interactive. This property should not be changed. - * @type Boolean - * @default - */ - interactive: true, + /** + * Indicates which key enable centered Transform + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + centeredKey: 'altKey', - /** - * Indicates whether group selection should be enabled - * @type Boolean - * @default - */ - selection: true, + /** + * Indicates which key enable alternate action on corner + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + altActionKey: 'shiftKey', - /** - * Indicates which key or keys enable multiple click selection - * Pass value as a string or array of strings - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or empty or containing any other string that is not a modifier key - * feature is disabled. - * @since 1.6.2 - * @type String|Array - * @default - */ - selectionKey: 'shiftKey', + /** + * Indicates that canvas is interactive. This property should not be changed. + * @type Boolean + * @default + */ + interactive: true, - /** - * Indicates which key enable alternative selection - * in case of target overlapping with active object - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * For a series of reason that come from the general expectations on how - * things should work, this feature works only for preserveObjectStacking true. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled. - * @since 1.6.5 - * @type null|String - * @default - */ - altSelectionKey: null, + /** + * Indicates whether group selection should be enabled + * @type Boolean + * @default + */ + selection: true, - /** - * Color of selection - * @type String - * @default - */ - selectionColor: 'rgba(100, 100, 255, 0.3)', // blue + /** + * Indicates which key or keys enable multiple click selection + * Pass value as a string or array of strings + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or empty or containing any other string that is not a modifier key + * feature is disabled. + * @since 1.6.2 + * @type String|Array + * @default + */ + selectionKey: 'shiftKey', - /** - * Default dash array pattern - * If not empty the selection border is dashed - * @type Array - */ - selectionDashArray: [], + /** + * Indicates which key enable alternative selection + * in case of target overlapping with active object + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * For a series of reason that come from the general expectations on how + * things should work, this feature works only for preserveObjectStacking true. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled. + * @since 1.6.5 + * @type null|String + * @default + */ + altSelectionKey: null, - /** - * Color of the border of selection (usually slightly darker than color of selection itself) - * @type String - * @default - */ - selectionBorderColor: 'rgba(255, 255, 255, 0.3)', + /** + * Color of selection + * @type String + * @default + */ + selectionColor: 'rgba(100, 100, 255, 0.3)', // blue - /** - * Width of a line used in object/group selection - * @type Number - * @default - */ - selectionLineWidth: 1, + /** + * Default dash array pattern + * If not empty the selection border is dashed + * @type Array + */ + selectionDashArray: [], - /** - * Select only shapes that are fully contained in the dragged selection rectangle. - * @type Boolean - * @default - */ - selectionFullyContained: false, + /** + * Color of the border of selection (usually slightly darker than color of selection itself) + * @type String + * @default + */ + selectionBorderColor: 'rgba(255, 255, 255, 0.3)', - /** - * Default cursor value used when hovering over an object on canvas - * @type String - * @default - */ - hoverCursor: 'move', + /** + * Width of a line used in object/group selection + * @type Number + * @default + */ + selectionLineWidth: 1, - /** - * Default cursor value used when moving an object on canvas - * @type String - * @default - */ - moveCursor: 'move', + /** + * Select only shapes that are fully contained in the dragged selection rectangle. + * @type Boolean + * @default + */ + selectionFullyContained: false, - /** - * Default cursor value used for the entire canvas - * @type String - * @default - */ - defaultCursor: 'default', + /** + * Default cursor value used when hovering over an object on canvas + * @type String + * @default + */ + hoverCursor: 'move', - /** - * Cursor value used during free drawing - * @type String - * @default - */ - freeDrawingCursor: 'crosshair', + /** + * Default cursor value used when moving an object on canvas + * @type String + * @default + */ + moveCursor: 'move', - /** - * Cursor value used for disabled elements ( corners with disabled action ) - * @type String - * @since 2.0.0 - * @default - */ - notAllowedCursor: 'not-allowed', + /** + * Default cursor value used for the entire canvas + * @type String + * @default + */ + defaultCursor: 'default', - /** - * Default element class that's given to wrapper (div) element of canvas - * @type String - * @default - */ - containerClass: 'canvas-container', + /** + * Cursor value used during free drawing + * @type String + * @default + */ + freeDrawingCursor: 'crosshair', - /** - * When true, object detection happens on per-pixel basis rather than on per-bounding-box - * @type Boolean - * @default - */ - perPixelTargetFind: false, + /** + * Cursor value used for disabled elements ( corners with disabled action ) + * @type String + * @since 2.0.0 + * @default + */ + notAllowedCursor: 'not-allowed', - /** - * Number of pixels around target pixel to tolerate (consider active) during object detection - * @type Number - * @default - */ - targetFindTolerance: 0, + /** + * Default element class that's given to wrapper (div) element of canvas + * @type String + * @default + */ + containerClass: 'canvas-container', - /** - * When true, target detection is skipped. Target detection will return always undefined. - * click selection won't work anymore, events will fire with no targets. - * if something is selected before setting it to true, it will be deselected at the first click. - * area selection will still work. check the `selection` property too. - * if you deactivate both, you should look into staticCanvas. - * @type Boolean - * @default - */ - skipTargetFind: false, + /** + * When true, object detection happens on per-pixel basis rather than on per-bounding-box + * @type Boolean + * @default + */ + perPixelTargetFind: false, - /** - * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. - * After mousedown, mousemove creates a shape, - * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. - * @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing} - * @type Boolean - * @default - */ - isDrawingMode: false, + /** + * Number of pixels around target pixel to tolerate (consider active) during object detection + * @type Number + * @default + */ + targetFindTolerance: 0, - /** - * Indicates whether objects should remain in current stack position when selected. - * When false objects are brought to top and rendered as part of the selection group - * @type Boolean - * @default - */ - preserveObjectStacking: false, + /** + * When true, target detection is skipped. Target detection will return always undefined. + * click selection won't work anymore, events will fire with no targets. + * if something is selected before setting it to true, it will be deselected at the first click. + * area selection will still work. check the `selection` property too. + * if you deactivate both, you should look into staticCanvas. + * @type Boolean + * @default + */ + skipTargetFind: false, - /** - * Indicates the angle that an object will lock to while rotating. - * @type Number - * @since 1.6.7 - * @default - */ - snapAngle: 0, + /** + * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. + * After mousedown, mousemove creates a shape, + * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. + * @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing} + * @type Boolean + * @default + */ + isDrawingMode: false, - /** - * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. - * When `null`, the snapThreshold will default to the snapAngle. - * @type null|Number - * @since 1.6.7 - * @default - */ - snapThreshold: null, + /** + * Indicates whether objects should remain in current stack position when selected. + * When false objects are brought to top and rendered as part of the selection group + * @type Boolean + * @default + */ + preserveObjectStacking: false, - /** - * Indicates if the right click on canvas can output the context menu or not - * @type Boolean - * @since 1.6.5 - * @default - */ - stopContextMenu: false, + /** + * Indicates the angle that an object will lock to while rotating. + * @type Number + * @since 1.6.7 + * @default + */ + snapAngle: 0, - /** - * Indicates if the canvas can fire right click events - * @type Boolean - * @since 1.6.5 - * @default - */ - fireRightClick: false, + /** + * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. + * When `null`, the snapThreshold will default to the snapAngle. + * @type null|Number + * @since 1.6.7 + * @default + */ + snapThreshold: null, - /** - * Indicates if the canvas can fire middle click events - * @type Boolean - * @since 1.7.8 - * @default - */ - fireMiddleClick: false, + /** + * Indicates if the right click on canvas can output the context menu or not + * @type Boolean + * @since 1.6.5 + * @default + */ + stopContextMenu: false, - /** - * Keep track of the subTargets for Mouse Events - * @type fabric.Object[] - */ - targets: [], + /** + * Indicates if the canvas can fire right click events + * @type Boolean + * @since 1.6.5 + * @default + */ + fireRightClick: false, - /** - * When the option is enabled, PointerEvent is used instead of MouseEvent. - * @type Boolean - * @default - */ - enablePointerEvents: false, + /** + * Indicates if the canvas can fire middle click events + * @type Boolean + * @since 1.7.8 + * @default + */ + fireMiddleClick: false, - /** - * Keep track of the hovered target - * @type fabric.Object - * @private - */ - _hoveredTarget: null, + /** + * Keep track of the subTargets for Mouse Events + * @type fabric.Object[] + */ + targets: [], - /** - * hold the list of nested targets hovered - * @type fabric.Object[] - * @private - */ - _hoveredTargets: [], + /** + * When the option is enabled, PointerEvent is used instead of MouseEvent. + * @type Boolean + * @default + */ + enablePointerEvents: false, - /** - * @private - */ - _initInteractive: function() { - this._currentTransform = null; - this._groupSelector = null; - this._initWrapperElement(); - this._createUpperCanvas(); - this._initEventListeners(); + /** + * Keep track of the hovered target + * @type fabric.Object + * @private + */ + _hoveredTarget: null, - this._initRetinaScaling(); + /** + * hold the list of nested targets hovered + * @type fabric.Object[] + * @private + */ + _hoveredTargets: [], - this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); + /** + * hold the list of objects to render + * @type fabric.Object[] + * @private + */ + _objectsToRender: undefined, - this.calcOffset(); - }, + /** + * @private + */ + _initInteractive: function() { + this._currentTransform = null; + this._groupSelector = null; + this._initWrapperElement(); + this._createUpperCanvas(); + this._initEventListeners(); - /** - * Divides objects in two groups, one to render immediately - * and one to render as activeGroup. - * @return {Array} objects to render immediately and pushes the other in the activeGroup. - */ - _chooseObjectsToRender: function() { - var activeObjects = this.getActiveObjects(), - object, objsToRender, activeGroupObjects; + this._initRetinaScaling(); - if (activeObjects.length > 0 && !this.preserveObjectStacking) { - objsToRender = []; - activeGroupObjects = []; - for (var i = 0, length = this._objects.length; i < length; i++) { - object = this._objects[i]; - if (activeObjects.indexOf(object) === -1 ) { - objsToRender.push(object); + this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); + + this.calcOffset(); + }, + + /** + * @private + * @param {fabric.Object} obj Object that was added + */ + _onObjectAdded: function (obj) { + this._objectsToRender = undefined; + this.callSuper('_onObjectAdded', obj); + }, + + /** + * @private + * @param {fabric.Object} obj Object that was removed + */ + _onObjectRemoved: function (obj) { + this._objectsToRender = undefined; + // removing active object should fire "selection:cleared" events + if (obj === this._activeObject) { + this.fire('before:selection:cleared', { target: obj }); + this._discardActiveObject(); + this.fire('selection:cleared', { target: obj }); + obj.fire('deselected'); + } + if (obj === this._hoveredTarget) { + this._hoveredTarget = null; + this._hoveredTargets = []; + } + this.callSuper('_onObjectRemoved', obj); + }, + + /** + * Divides objects in two groups, one to render immediately + * and one to render as activeGroup. + * @return {Array} objects to render immediately and pushes the other in the activeGroup. + */ + _chooseObjectsToRender: function() { + var activeObjects = this.getActiveObjects(), + object, objsToRender, activeGroupObjects; + + if (!this.preserveObjectStacking && activeObjects.length > 1) { + objsToRender = []; + activeGroupObjects = []; + for (var i = 0, length = this._objects.length; i < length; i++) { + object = this._objects[i]; + if (activeObjects.indexOf(object) === -1 ) { + objsToRender.push(object); + } + else { + activeGroupObjects.push(object); + } } - else { - activeGroupObjects.push(object); + if (activeObjects.length > 1) { + this._activeObject._objects = activeGroupObjects; } + objsToRender.push.apply(objsToRender, activeGroupObjects); } - if (activeObjects.length > 1) { - this._activeObject._objects = activeGroupObjects; + // in case a single object is selected render it's entire parent above the other objects + else if (!this.preserveObjectStacking && activeObjects.length === 1) { + var target = activeObjects[0], ancestors = target.getAncestors(true); + var topAncestor = ancestors.length === 0 ? target : ancestors.pop(); + objsToRender = this._objects.slice(); + var index = objsToRender.indexOf(topAncestor); + index > -1 && objsToRender.splice(objsToRender.indexOf(topAncestor), 1); + objsToRender.push(topAncestor); } - objsToRender.push.apply(objsToRender, activeGroupObjects); - } - else { - objsToRender = this._objects; - } - return objsToRender; - }, + else { + objsToRender = this._objects; + } + return objsToRender; + }, - /** - * Renders both the top canvas and the secondary container canvas. - * @return {fabric.Canvas} instance - * @chainable - */ - renderAll: function () { - if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { - this.clearContext(this.contextTop); - this.contextTopDirty = false; - } - if (this.hasLostContext) { - this.renderTopLayer(this.contextTop); - this.hasLostContext = false; - } - var canvasToDrawOn = this.contextContainer; - this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender()); - return this; - }, + /** + * Renders both the top canvas and the secondary container canvas. + * @return {fabric.Canvas} instance + * @chainable + */ + renderAll: function () { + if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { + this.clearContext(this.contextTop); + this.contextTopDirty = false; + } + if (this.hasLostContext) { + this.renderTopLayer(this.contextTop); + this.hasLostContext = false; + } + var canvasToDrawOn = this.contextContainer; + !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender()); + this.renderCanvas(canvasToDrawOn, this._objectsToRender); + return this; + }, - renderTopLayer: function(ctx) { - ctx.save(); - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this.freeDrawingBrush && this.freeDrawingBrush._render(); - this.contextTopDirty = true; - } - // we render the top context - last object - if (this.selection && this._groupSelector) { - this._drawSelection(ctx); - this.contextTopDirty = true; - } - ctx.restore(); - }, + renderTopLayer: function(ctx) { + ctx.save(); + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._render(); + this.contextTopDirty = true; + } + // we render the top context - last object + if (this.selection && this._groupSelector) { + this._drawSelection(ctx); + this.contextTopDirty = true; + } + ctx.restore(); + }, - /** - * Method to render only the top canvas. - * Also used to render the group selection box. - * @return {fabric.Canvas} thisArg - * @chainable - */ - renderTop: function () { - var ctx = this.contextTop; - this.clearContext(ctx); - this.renderTopLayer(ctx); - this.fire('after:render'); - return this; - }, + /** + * Method to render only the top canvas. + * Also used to render the group selection box. + * @return {fabric.Canvas} thisArg + * @chainable + */ + renderTop: function () { + var ctx = this.contextTop; + this.clearContext(ctx); + this.renderTopLayer(ctx); + this.fire('after:render'); + return this; + }, - /** - * @private - */ - _normalizePointer: function (object, pointer) { - var m = object.calcTransformMatrix(), - invertedM = fabric.util.invertTransform(m), - vptPointer = this.restorePointerVpt(pointer); - return fabric.util.transformPoint(vptPointer, invertedM); - }, + /** + * @private + */ + _normalizePointer: function (object, pointer) { + var m = object.calcTransformMatrix(), + invertedM = fabric.util.invertTransform(m), + vptPointer = this.restorePointerVpt(pointer); + return fabric.util.transformPoint(vptPointer, invertedM); + }, - /** - * Returns true if object is transparent at a certain location - * @param {fabric.Object} target Object to check - * @param {Number} x Left coordinate - * @param {Number} y Top coordinate - * @return {Boolean} - */ - isTargetTransparent: function (target, x, y) { - // in case the target is the activeObject, we cannot execute this optimization - // because we need to draw controls too. - if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { - var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), - targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), - targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); + /** + * Returns true if object is transparent at a certain location + * @param {fabric.Object} target Object to check + * @param {Number} x Left coordinate + * @param {Number} y Top coordinate + * @return {Boolean} + */ + isTargetTransparent: function (target, x, y) { + // in case the target is the activeObject, we cannot execute this optimization + // because we need to draw controls too. + if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { + var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), + targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), + targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); - var isTransparent = fabric.util.isTransparent( - target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); + var isTransparent = fabric.util.isTransparent( + target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); - return isTransparent; - } + return isTransparent; + } - var ctx = this.contextCache, - originalColor = target.selectionBackgroundColor, v = this.viewportTransform; + var ctx = this.contextCache, + originalColor = target.selectionBackgroundColor, v = this.viewportTransform; - target.selectionBackgroundColor = ''; + target.selectionBackgroundColor = ''; - this.clearContext(ctx); + this.clearContext(ctx); - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - target.render(ctx); - ctx.restore(); + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + target.render(ctx); + ctx.restore(); - target.selectionBackgroundColor = originalColor; + target.selectionBackgroundColor = originalColor; - var isTransparent = fabric.util.isTransparent( - ctx, x, y, this.targetFindTolerance); + var isTransparent = fabric.util.isTransparent( + ctx, x, y, this.targetFindTolerance); - return isTransparent; - }, + return isTransparent; + }, - /** - * takes an event and determines if selection key has been pressed - * @private - * @param {Event} e Event object - */ - _isSelectionKeyPressed: function(e) { - var selectionKeyPressed = false; + /** + * takes an event and determines if selection key has been pressed + * @private + * @param {Event} e Event object + */ + _isSelectionKeyPressed: function(e) { + var selectionKeyPressed = false; - if (Object.prototype.toString.call(this.selectionKey) === '[object Array]') { - selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); - } - else { - selectionKeyPressed = e[this.selectionKey]; - } + if (Array.isArray(this.selectionKey)) { + selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); + } + else { + selectionKeyPressed = e[this.selectionKey]; + } - return selectionKeyPressed; - }, + return selectionKeyPressed; + }, - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - */ - _shouldClearSelection: function (e, target) { - var activeObjects = this.getActiveObjects(), - activeObject = this._activeObject; - - return ( - !target - || - (target && - activeObject && - activeObjects.length > 1 && - activeObjects.indexOf(target) === -1 && - activeObject !== target && - !this._isSelectionKeyPressed(e)) - || - (target && !target.evented) - || - (target && - !target.selectable && - activeObject && - activeObject !== target) - ); - }, + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _shouldClearSelection: function (e, target) { + var activeObjects = this.getActiveObjects(), + activeObject = this._activeObject; + + return ( + !target + || + (target && + activeObject && + activeObjects.length > 1 && + activeObjects.indexOf(target) === -1 && + activeObject !== target && + !this._isSelectionKeyPressed(e)) + || + (target && !target.evented) + || + (target && + !target.selectable && + activeObject && + activeObject !== target) + ); + }, - /** - * centeredScaling from object can't override centeredScaling from canvas. - * this should be fixed, since object setting should take precedence over canvas. - * also this should be something that will be migrated in the control properties. - * as ability to define the origin of the transformation that the control provide. - * @private - * @param {fabric.Object} target - * @param {String} action - * @param {Boolean} altKey - */ - _shouldCenterTransform: function (target, action, altKey) { - if (!target) { - return; - } + /** + * centeredScaling from object can't override centeredScaling from canvas. + * this should be fixed, since object setting should take precedence over canvas. + * also this should be something that will be migrated in the control properties. + * as ability to define the origin of the transformation that the control provide. + * @private + * @param {fabric.Object} target + * @param {String} action + * @param {Boolean} altKey + */ + _shouldCenterTransform: function (target, action, altKey) { + if (!target) { + return; + } - var centerTransform; + var centerTransform; - if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { - centerTransform = this.centeredScaling || target.centeredScaling; - } - else if (action === 'rotate') { - centerTransform = this.centeredRotation || target.centeredRotation; - } + if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { + centerTransform = this.centeredScaling || target.centeredScaling; + } + else if (action === 'rotate') { + centerTransform = this.centeredRotation || target.centeredRotation; + } - return centerTransform ? !altKey : altKey; - }, + return centerTransform ? !altKey : altKey; + }, - /** - * should disappear before release 4.0 - * @private - */ - _getOriginFromCorner: function(target, corner) { - var origin = { - x: target.originX, - y: target.originY - }; + /** + * should disappear before release 4.0 + * @private + */ + _getOriginFromCorner: function(target, corner) { + var origin = { + x: target.originX, + y: target.originY + }; - if (corner === 'ml' || corner === 'tl' || corner === 'bl') { - origin.x = 'right'; - } - else if (corner === 'mr' || corner === 'tr' || corner === 'br') { - origin.x = 'left'; - } + if (corner === 'ml' || corner === 'tl' || corner === 'bl') { + origin.x = 'right'; + } + else if (corner === 'mr' || corner === 'tr' || corner === 'br') { + origin.x = 'left'; + } - if (corner === 'tl' || corner === 'mt' || corner === 'tr') { - origin.y = 'bottom'; - } - else if (corner === 'bl' || corner === 'mb' || corner === 'br') { - origin.y = 'top'; - } - return origin; - }, + if (corner === 'tl' || corner === 'mt' || corner === 'tr') { + origin.y = 'bottom'; + } + else if (corner === 'bl' || corner === 'mb' || corner === 'br') { + origin.y = 'top'; + } + return origin; + }, - /** - * @private - * @param {Boolean} alreadySelected true if target is already selected - * @param {String} corner a string representing the corner ml, mr, tl ... - * @param {Event} e Event object - * @param {fabric.Object} [target] inserted back to help overriding. Unused - */ - _getActionFromCorner: function(alreadySelected, corner, e, target) { - if (!corner || !alreadySelected) { - return 'drag'; - } - var control = target.controls[corner]; - return control.getActionName(e, control, target); - }, + /** + * @private + * @param {Boolean} alreadySelected true if target is already selected + * @param {String} corner a string representing the corner ml, mr, tl ... + * @param {Event} e Event object + * @param {fabric.Object} [target] inserted back to help overriding. Unused + */ + _getActionFromCorner: function(alreadySelected, corner, e, target) { + if (!corner || !alreadySelected) { + return 'drag'; + } + var control = target.controls[corner]; + return control.getActionName(e, control, target); + }, - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - */ - _setupCurrentTransform: function (e, target, alreadySelected) { - if (!target) { - return; - } + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _setupCurrentTransform: function (e, target, alreadySelected) { + if (!target) { + return; + } + var pointer = this.getPointer(e); + if (target.group) { + // transform pointer to target's containing coordinate plane + pointer = fabric.util.transformPoint(pointer, fabric.util.invertTransform(target.group.calcTransformMatrix())); + } + var corner = target.__corner, + control = target.controls[corner], + actionHandler = (alreadySelected && corner) ? + control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, + action = this._getActionFromCorner(alreadySelected, corner, e, target), + origin = this._getOriginFromCorner(target, corner), + altKey = e[this.centeredKey], + /** + * relative to target's containing coordinate plane + * both agree on every point + **/ + transform = { + target: target, + action: action, + actionHandler: actionHandler, + corner: corner, + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + offsetX: pointer.x - target.left, + offsetY: pointer.y - target.top, + originX: origin.x, + originY: origin.y, + ex: pointer.x, + ey: pointer.y, + lastX: pointer.x, + lastY: pointer.y, + theta: degreesToRadians(target.angle), + width: target.width * target.scaleX, + shiftKey: e.shiftKey, + altKey: altKey, + original: fabric.util.saveObjectTransform(target), + }; + + if (this._shouldCenterTransform(target, action, altKey)) { + transform.originX = 'center'; + transform.originY = 'center'; + } + transform.original.originX = origin.x; + transform.original.originY = origin.y; + this._currentTransform = transform; + this._beforeTransform(e); + }, - var pointer = this.getPointer(e), corner = target.__corner, - control = target.controls[corner], - actionHandler = (alreadySelected && corner) ? - control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, - action = this._getActionFromCorner(alreadySelected, corner, e, target), - origin = this._getOriginFromCorner(target, corner), - altKey = e[this.centeredKey], - transform = { - target: target, - action: action, - actionHandler: actionHandler, - corner: corner, - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - // used by transation - offsetX: pointer.x - target.left, - offsetY: pointer.y - target.top, - originX: origin.x, - originY: origin.y, - ex: pointer.x, - ey: pointer.y, - lastX: pointer.x, - lastY: pointer.y, - // unsure they are useful anymore. - // left: target.left, - // top: target.top, - theta: degreesToRadians(target.angle), - // end of unsure - width: target.width * target.scaleX, - shiftKey: e.shiftKey, - altKey: altKey, - original: fabric.util.saveObjectTransform(target), - }; + /** + * Set the cursor type of the canvas element + * @param {String} value Cursor type of the canvas element. + * @see http://www.w3.org/TR/css3-ui/#cursor + */ + setCursor: function (value) { + this.upperCanvasEl.style.cursor = value; + }, - if (this._shouldCenterTransform(target, action, altKey)) { - transform.originX = 'center'; - transform.originY = 'center'; - } - transform.original.originX = origin.x; - transform.original.originY = origin.y; - this._currentTransform = transform; - this._beforeTransform(e); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx to draw the selection on + */ + _drawSelection: function (ctx) { + var selector = this._groupSelector, + viewportStart = new fabric.Point(selector.ex, selector.ey), + start = fabric.util.transformPoint(viewportStart, this.viewportTransform), + viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), + extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), + minX = Math.min(start.x, extent.x), + minY = Math.min(start.y, extent.y), + maxX = Math.max(start.x, extent.x), + maxY = Math.max(start.y, extent.y), + strokeOffset = this.selectionLineWidth / 2; + + if (this.selectionColor) { + ctx.fillStyle = this.selectionColor; + ctx.fillRect(minX, minY, maxX - minX, maxY - minY); + } - /** - * Set the cursor type of the canvas element - * @param {String} value Cursor type of the canvas element. - * @see http://www.w3.org/TR/css3-ui/#cursor - */ - setCursor: function (value) { - this.upperCanvasEl.style.cursor = value; - }, + if (!this.selectionLineWidth || !this.selectionBorderColor) { + return; + } + ctx.lineWidth = this.selectionLineWidth; + ctx.strokeStyle = this.selectionBorderColor; - /** - * @private - * @param {CanvasRenderingContext2D} ctx to draw the selection on - */ - _drawSelection: function (ctx) { - var selector = this._groupSelector, - viewportStart = new fabric.Point(selector.ex, selector.ey), - start = fabric.util.transformPoint(viewportStart, this.viewportTransform), - viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), - extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), - minX = Math.min(start.x, extent.x), - minY = Math.min(start.y, extent.y), - maxX = Math.max(start.x, extent.x), - maxY = Math.max(start.y, extent.y), - strokeOffset = this.selectionLineWidth / 2; - - if (this.selectionColor) { - ctx.fillStyle = this.selectionColor; - ctx.fillRect(minX, minY, maxX - minX, maxY - minY); - } - - if (!this.selectionLineWidth || !this.selectionBorderColor) { - return; - } - ctx.lineWidth = this.selectionLineWidth; - ctx.strokeStyle = this.selectionBorderColor; - - minX += strokeOffset; - minY += strokeOffset; - maxX -= strokeOffset; - maxY -= strokeOffset; - // selection border - fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); - ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); - }, - - /** - * Method that determines what object we are clicking on - * the skipGroup parameter is for internal use, is needed for shift+click action - * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target - * or the outside part of the corner. - * @param {Event} e mouse event - * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through - * @return {fabric.Object} the target found - */ - findTarget: function (e, skipGroup) { - if (this.skipTargetFind) { - return; - } + minX += strokeOffset; + minY += strokeOffset; + maxX -= strokeOffset; + maxY -= strokeOffset; + // selection border + fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); + ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); + }, - var ignoreZoom = true, - pointer = this.getPointer(e, ignoreZoom), - activeObject = this._activeObject, - aObjects = this.getActiveObjects(), - activeTarget, activeTargetSubs, - isTouch = isTouchEvent(e), - shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; + /** + * Method that determines what object we are clicking on + * the skipGroup parameter is for internal use, is needed for shift+click action + * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target + * or the outside part of the corner. + * @param {Event} e mouse event + * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through + * @return {fabric.Object} the target found + */ + findTarget: function (e, skipGroup) { + if (this.skipTargetFind) { + return; + } - // first check current group (if one exists) - // active group does not check sub targets like normal groups. - // if active group just exits. - this.targets = []; + var ignoreZoom = true, + pointer = this.getPointer(e, ignoreZoom), + activeObject = this._activeObject, + aObjects = this.getActiveObjects(), + activeTarget, activeTargetSubs, + isTouch = isTouchEvent(e), + shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; - // if we hit the corner of an activeObject, let's return that. - if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { - return activeObject; - } - if (aObjects.length > 1 && !skipGroup && activeObject === this._searchPossibleTargets([activeObject], pointer)) { - return activeObject; - } - if (aObjects.length === 1 && - activeObject === this._searchPossibleTargets([activeObject], pointer)) { - if (!this.preserveObjectStacking) { + // first check current group (if one exists) + // active group does not check sub targets like normal groups. + // if active group just exits. + this.targets = []; + + // if we hit the corner of an activeObject, let's return that. + if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { return activeObject; } - else { - activeTarget = activeObject; - activeTargetSubs = this.targets; - this.targets = []; + if (aObjects.length > 1 && activeObject.type === 'activeSelection' + && !skipGroup && this.searchPossibleTargets([activeObject], pointer)) { + return activeObject; } - } - var target = this._searchPossibleTargets(this._objects, pointer); - if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { - target = activeTarget; - this.targets = activeTargetSubs; - } - return target; - }, - - /** - * Checks point is inside the object. - * @param {Object} [pointer] x,y object of point coordinates we want to check. - * @param {fabric.Object} obj Object to test against - * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target. - * @return {Boolean} true if point is contained within an area of given object - * @private - */ - _checkTarget: function(pointer, obj, globalPointer) { - if (obj && - obj.visible && - obj.evented && - // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html - // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html - obj.containsPoint(pointer) - ) { - if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { - var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); - if (!isTransparent) { - return true; + if (aObjects.length === 1 && + activeObject === this.searchPossibleTargets([activeObject], pointer)) { + if (!this.preserveObjectStacking) { + return activeObject; + } + else { + activeTarget = activeObject; + activeTargetSubs = this.targets; + this.targets = []; } } - else { - return true; + var target = this.searchPossibleTargets(this._objects, pointer); + if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { + target = activeTarget; + this.targets = activeTargetSubs; } - } - }, + return target; + }, - /** - * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted - * @param {Array} [objects] objects array to look into - * @param {Object} [pointer] x,y object of point coordinates we want to check. - * @return {fabric.Object} object that contains pointer - * @private - */ - _searchPossibleTargets: function(objects, pointer) { - // Cache all targets where their bounding box contains point. - var target, i = objects.length, subTarget; - // Do not check for currently grouped objects, since we check the parent group itself. - // until we call this function specifically to search inside the activeGroup - while (i--) { - var objToCheck = objects[i]; - var pointerToUse = objToCheck.group ? - this._normalizePointer(objToCheck.group, pointer) : pointer; - if (this._checkTarget(pointerToUse, objToCheck, pointer)) { - target = objects[i]; - if (target.subTargetCheck && target instanceof fabric.Group) { - subTarget = this._searchPossibleTargets(target._objects, pointer); - subTarget && this.targets.push(subTarget); + /** + * Checks point is inside the object. + * @param {Object} [pointer] x,y object of point coordinates we want to check. + * @param {fabric.Object} obj Object to test against + * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target. + * @return {Boolean} true if point is contained within an area of given object + * @private + */ + _checkTarget: function(pointer, obj, globalPointer) { + if (obj && + obj.visible && + obj.evented && + // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html + // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html + obj.containsPoint(pointer) + ) { + if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { + var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); + if (!isTransparent) { + return true; + } + } + else { + return true; } - break; } - } - return target; - }, + }, - /** - * Returns pointer coordinates without the effect of the viewport - * @param {Object} pointer with "x" and "y" number values - * @return {Object} object with "x" and "y" number values - */ - restorePointerVpt: function(pointer) { - return fabric.util.transformPoint( - pointer, - fabric.util.invertTransform(this.viewportTransform) - ); - }, + /** + * Internal Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted + * @param {Array} [objects] objects array to look into + * @param {Object} [pointer] x,y object of point coordinates we want to check. + * @return {fabric.Object} **top most object from given `objects`** that contains pointer + * @private + */ + _searchPossibleTargets: function(objects, pointer) { + // Cache all targets where their bounding box contains point. + var target, i = objects.length, subTarget; + // Do not check for currently grouped objects, since we check the parent group itself. + // until we call this function specifically to search inside the activeGroup + while (i--) { + var objToCheck = objects[i]; + var pointerToUse = objToCheck.group ? + this._normalizePointer(objToCheck.group, pointer) : pointer; + if (this._checkTarget(pointerToUse, objToCheck, pointer)) { + target = objects[i]; + if (target.subTargetCheck && Array.isArray(target._objects)) { + subTarget = this._searchPossibleTargets(target._objects, pointer); + subTarget && this.targets.push(subTarget); + } + break; + } + } + return target; + }, - /** - * Returns pointer coordinates relative to canvas. - * Can return coordinates with or without viewportTransform. - * ignoreZoom false gives back coordinates that represent - * the point clicked on canvas element. - * ignoreZoom true gives back coordinates after being processed - * by the viewportTransform ( sort of coordinates of what is displayed - * on the canvas where you are clicking. - * ignoreZoom true = HTMLElement coordinates relative to top,left - * ignoreZoom false, default = fabric space coordinates, the same used for shape position - * To interact with your shapes top and left you want to use ignoreZoom true - * most of the time, while ignoreZoom false will give you coordinates - * compatible with the object.oCoords system. - * of the time. - * @param {Event} e - * @param {Boolean} ignoreZoom - * @return {Object} object with "x" and "y" number values - */ - getPointer: function (e, ignoreZoom) { - // return cached values if we are in the event processing chain - if (this._absolutePointer && !ignoreZoom) { - return this._absolutePointer; - } - if (this._pointer && ignoreZoom) { - return this._pointer; - } + /** + * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted + * @see {@link fabric.Canvas#_searchPossibleTargets} + * @param {Array} [objects] objects array to look into + * @param {Object} [pointer] x,y object of point coordinates we want to check. + * @return {fabric.Object} **top most object on screen** that contains pointer + */ + searchPossibleTargets: function (objects, pointer) { + var target = this._searchPossibleTargets(objects, pointer); + return target && target.interactive && this.targets[0] ? this.targets[0] : target; + }, - var pointer = getPointer(e), - upperCanvasEl = this.upperCanvasEl, - bounds = upperCanvasEl.getBoundingClientRect(), - boundsWidth = bounds.width || 0, - boundsHeight = bounds.height || 0, - cssScale; + /** + * Returns pointer coordinates without the effect of the viewport + * @param {Object} pointer with "x" and "y" number values + * @return {Object} object with "x" and "y" number values + */ + restorePointerVpt: function(pointer) { + return fabric.util.transformPoint( + pointer, + fabric.util.invertTransform(this.viewportTransform) + ); + }, - if (!boundsWidth || !boundsHeight ) { - if ('top' in bounds && 'bottom' in bounds) { - boundsHeight = Math.abs( bounds.top - bounds.bottom ); + /** + * Returns pointer coordinates relative to canvas. + * Can return coordinates with or without viewportTransform. + * ignoreVpt false gives back coordinates that represent + * the point clicked on canvas element. + * ignoreVpt true gives back coordinates after being processed + * by the viewportTransform ( sort of coordinates of what is displayed + * on the canvas where you are clicking. + * ignoreVpt true = HTMLElement coordinates relative to top,left + * ignoreVpt false, default = fabric space coordinates, the same used for shape position + * To interact with your shapes top and left you want to use ignoreVpt true + * most of the time, while ignoreVpt false will give you coordinates + * compatible with the object.oCoords system. + * of the time. + * @param {Event} e + * @param {Boolean} ignoreVpt + * @return {Object} object with "x" and "y" number values + */ + getPointer: function (e, ignoreVpt) { + // return cached values if we are in the event processing chain + if (this._absolutePointer && !ignoreVpt) { + return this._absolutePointer; } - if ('right' in bounds && 'left' in bounds) { - boundsWidth = Math.abs( bounds.right - bounds.left ); + if (this._pointer && ignoreVpt) { + return this._pointer; } - } - this.calcOffset(); - pointer.x = pointer.x - this._offset.left; - pointer.y = pointer.y - this._offset.top; - if (!ignoreZoom) { - pointer = this.restorePointerVpt(pointer); - } + var pointer = getPointer(e), + upperCanvasEl = this.upperCanvasEl, + bounds = upperCanvasEl.getBoundingClientRect(), + boundsWidth = bounds.width || 0, + boundsHeight = bounds.height || 0, + cssScale; - var retinaScaling = this.getRetinaScaling(); - if (retinaScaling !== 1) { - pointer.x /= retinaScaling; - pointer.y /= retinaScaling; - } + if (!boundsWidth || !boundsHeight ) { + if ('top' in bounds && 'bottom' in bounds) { + boundsHeight = Math.abs( bounds.top - bounds.bottom ); + } + if ('right' in bounds && 'left' in bounds) { + boundsWidth = Math.abs( bounds.right - bounds.left ); + } + } - if (boundsWidth === 0 || boundsHeight === 0) { - // If bounds are not available (i.e. not visible), do not apply scale. - cssScale = { width: 1, height: 1 }; - } - else { - cssScale = { - width: upperCanvasEl.width / boundsWidth, - height: upperCanvasEl.height / boundsHeight - }; - } + this.calcOffset(); + pointer.x = pointer.x - this._offset.left; + pointer.y = pointer.y - this._offset.top; + if (!ignoreVpt) { + pointer = this.restorePointerVpt(pointer); + } - return { - x: pointer.x * cssScale.width, - y: pointer.y * cssScale.height - }; - }, + var retinaScaling = this.getRetinaScaling(); + if (retinaScaling !== 1) { + pointer.x /= retinaScaling; + pointer.y /= retinaScaling; + } - /** - * @private - * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized - */ - _createUpperCanvas: function () { - var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), - lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; + if (boundsWidth === 0 || boundsHeight === 0) { + // If bounds are not available (i.e. not visible), do not apply scale. + cssScale = { width: 1, height: 1 }; + } + else { + cssScale = { + width: upperCanvasEl.width / boundsWidth, + height: upperCanvasEl.height / boundsHeight + }; + } - // there is no need to create a new upperCanvas element if we have already one. - if (upperCanvasEl) { - upperCanvasEl.className = ''; - } - else { - upperCanvasEl = this._createCanvasElement(); - this.upperCanvasEl = upperCanvasEl; - } - fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); + return { + x: pointer.x * cssScale.width, + y: pointer.y * cssScale.height + }; + }, - this.wrapperEl.appendChild(upperCanvasEl); + /** + * @private + * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized + */ + _createUpperCanvas: function () { + var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), + lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; - this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); - this._applyCanvasStyle(upperCanvasEl); - this.contextTop = upperCanvasEl.getContext('2d'); - }, + // there is no need to create a new upperCanvas element if we have already one. + if (upperCanvasEl) { + upperCanvasEl.className = ''; + } + else { + upperCanvasEl = this._createCanvasElement(); + this.upperCanvasEl = upperCanvasEl; + } + fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); + this.upperCanvasEl.setAttribute('data-fabric', 'top'); + this.wrapperEl.appendChild(upperCanvasEl); - /** - * @private - */ - _createCacheCanvas: function () { - this.cacheCanvasEl = this._createCanvasElement(); - this.cacheCanvasEl.setAttribute('width', this.width); - this.cacheCanvasEl.setAttribute('height', this.height); - this.contextCache = this.cacheCanvasEl.getContext('2d'); - }, + this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); + this._applyCanvasStyle(upperCanvasEl); + this.contextTop = upperCanvasEl.getContext('2d'); + }, - /** - * @private - */ - _initWrapperElement: function () { - this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { - 'class': this.containerClass - }); - fabric.util.setStyle(this.wrapperEl, { - width: this.width + 'px', - height: this.height + 'px', - position: 'relative' - }); - fabric.util.makeElementUnselectable(this.wrapperEl); - }, + /** + * @private + */ + _createCacheCanvas: function () { + this.cacheCanvasEl = this._createCanvasElement(); + this.cacheCanvasEl.setAttribute('width', this.width); + this.cacheCanvasEl.setAttribute('height', this.height); + this.contextCache = this.cacheCanvasEl.getContext('2d'); + }, - /** - * @private - * @param {HTMLElement} element canvas element to apply styles on - */ - _applyCanvasStyle: function (element) { - var width = this.width || element.width, - height = this.height || element.height; - - fabric.util.setStyle(element, { - position: 'absolute', - width: width + 'px', - height: height + 'px', - left: 0, - top: 0, - 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', - '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' - }); - element.width = width; - element.height = height; - fabric.util.makeElementUnselectable(element); - }, + /** + * @private + */ + _initWrapperElement: function () { + if (this.wrapperEl) { + return; + } + this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { + 'class': this.containerClass + }); + this.wrapperEl.setAttribute('data-fabric', 'wrapper'); + fabric.util.setStyle(this.wrapperEl, { + width: this.width + 'px', + height: this.height + 'px', + position: 'relative' + }); + fabric.util.makeElementUnselectable(this.wrapperEl); + }, - /** - * Copy the entire inline style from one element (fromEl) to another (toEl) - * @private - * @param {Element} fromEl Element style is copied from - * @param {Element} toEl Element copied style is applied to - */ - _copyCanvasStyle: function (fromEl, toEl) { - toEl.style.cssText = fromEl.style.cssText; - }, + /** + * @private + * @param {HTMLElement} element canvas element to apply styles on + */ + _applyCanvasStyle: function (element) { + var width = this.width || element.width, + height = this.height || element.height; + + fabric.util.setStyle(element, { + position: 'absolute', + width: width + 'px', + height: height + 'px', + left: 0, + top: 0, + 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', + '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' + }); + element.width = width; + element.height = height; + fabric.util.makeElementUnselectable(element); + }, - /** - * Returns context of canvas where object selection is drawn - * @return {CanvasRenderingContext2D} - */ - getSelectionContext: function() { - return this.contextTop; - }, + /** + * Copy the entire inline style from one element (fromEl) to another (toEl) + * @private + * @param {Element} fromEl Element style is copied from + * @param {Element} toEl Element copied style is applied to + */ + _copyCanvasStyle: function (fromEl, toEl) { + toEl.style.cssText = fromEl.style.cssText; + }, - /** - * Returns <canvas> element on which object selection is drawn - * @return {HTMLCanvasElement} - */ - getSelectionElement: function () { - return this.upperCanvasEl; - }, + /** + * Returns context of top canvas where interactions are drawn + * @returns {CanvasRenderingContext2D} + */ + getTopContext: function () { + return this.contextTop; + }, - /** - * Returns currently active object - * @return {fabric.Object} active object - */ - getActiveObject: function () { - return this._activeObject; - }, + /** + * Returns context of canvas where object selection is drawn + * @alias + * @return {CanvasRenderingContext2D} + */ + getSelectionContext: function() { + return this.contextTop; + }, - /** - * Returns an array with the current selected objects - * @return {fabric.Object} active object - */ - getActiveObjects: function () { - var active = this._activeObject; - if (active) { - if (active.type === 'activeSelection' && active._objects) { - return active._objects.slice(0); - } - else { - return [active]; - } - } - return []; - }, + /** + * Returns <canvas> element on which object selection is drawn + * @return {HTMLCanvasElement} + */ + getSelectionElement: function () { + return this.upperCanvasEl; + }, - /** - * @private - * @param {fabric.Object} obj Object that was removed - */ - _onObjectRemoved: function(obj) { - // removing active object should fire "selection:cleared" events - if (obj === this._activeObject) { - this.fire('before:selection:cleared', { target: obj }); - this._discardActiveObject(); - this.fire('selection:cleared', { target: obj }); - obj.fire('deselected'); - } - if (obj === this._hoveredTarget){ - this._hoveredTarget = null; - this._hoveredTargets = []; - } - this.callSuper('_onObjectRemoved', obj); - }, + /** + * Returns currently active object + * @return {fabric.Object} active object + */ + getActiveObject: function () { + return this._activeObject; + }, - /** - * @private - * Compares the old activeObject with the current one and fires correct events - * @param {fabric.Object} obj old activeObject - */ - _fireSelectionEvents: function(oldObjects, e) { - var somethingChanged = false, objects = this.getActiveObjects(), - added = [], removed = []; - oldObjects.forEach(function(oldObject) { - if (objects.indexOf(oldObject) === -1) { - somethingChanged = true; - oldObject.fire('deselected', { + /** + * Returns an array with the current selected objects + * @return {fabric.Object} active object + */ + getActiveObjects: function () { + var active = this._activeObject; + if (active) { + if (active.type === 'activeSelection' && active._objects) { + return active._objects.slice(0); + } + else { + return [active]; + } + } + return []; + }, + + /** + * @private + * Compares the old activeObject with the current one and fires correct events + * @param {fabric.Object} obj old activeObject + */ + _fireSelectionEvents: function(oldObjects, e) { + var somethingChanged = false, objects = this.getActiveObjects(), + added = [], removed = [], invalidate = false; + oldObjects.forEach(function(oldObject) { + if (objects.indexOf(oldObject) === -1) { + somethingChanged = true; + oldObject.fire('deselected', { + e: e, + target: oldObject + }); + removed.push(oldObject); + } + }); + objects.forEach(function(object) { + if (oldObjects.indexOf(object) === -1) { + somethingChanged = true; + object.fire('selected', { + e: e, + target: object + }); + added.push(object); + } + }); + if (oldObjects.length > 0 && objects.length > 0) { + invalidate = true; + somethingChanged && this.fire('selection:updated', { e: e, - target: oldObject + selected: added, + deselected: removed, }); - removed.push(oldObject); } - }); - objects.forEach(function(object) { - if (oldObjects.indexOf(object) === -1) { - somethingChanged = true; - object.fire('selected', { + else if (objects.length > 0) { + invalidate = true; + this.fire('selection:created', { e: e, - target: object + selected: added, }); - added.push(object); } - }); - if (oldObjects.length > 0 && objects.length > 0) { - somethingChanged && this.fire('selection:updated', { - e: e, - selected: added, - deselected: removed, - }); - } - else if (objects.length > 0) { - this.fire('selection:created', { - e: e, - selected: added, - }); - } - else if (oldObjects.length > 0) { - this.fire('selection:cleared', { - e: e, - deselected: removed, - }); - } - }, - - /** - * Sets given object as the only active object on canvas - * @param {fabric.Object} object Object to set as an active one - * @param {Event} [e] Event (passed along when firing "object:selected") - * @return {fabric.Canvas} thisArg - * @chainable - */ - setActiveObject: function (object, e) { - var currentActives = this.getActiveObjects(); - this._setActiveObject(object, e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + else if (oldObjects.length > 0) { + invalidate = true; + this.fire('selection:cleared', { + e: e, + deselected: removed, + }); + } + invalidate && (this._objectsToRender = undefined); + }, - /** - * This is a private method for now. - * This is supposed to be equivalent to setActiveObject but without firing - * any event. There is commitment to have this stay this way. - * This is the functional part of setActiveObject. - * @private - * @param {Object} object to set as active - * @param {Event} [e] Event (passed along when firing "object:selected") - * @return {Boolean} true if the selection happened - */ - _setActiveObject: function(object, e) { - if (this._activeObject === object) { - return false; - } - if (!this._discardActiveObject(e, object)) { - return false; - } - if (object.onSelect({ e: e })) { - return false; - } - this._activeObject = object; - return true; - }, + /** + * Sets given object as the only active object on canvas + * @param {fabric.Object} object Object to set as an active one + * @param {Event} [e] Event (passed along when firing "object:selected") + * @return {fabric.Canvas} thisArg + * @chainable + */ + setActiveObject: function (object, e) { + var currentActives = this.getActiveObjects(); + this._setActiveObject(object, e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** - * This is a private method for now. - * This is supposed to be equivalent to discardActiveObject but without firing - * any events. There is commitment to have this stay this way. - * This is the functional part of discardActiveObject. - * @param {Event} [e] Event (passed along when firing "object:deselected") - * @param {Object} object to set as active - * @return {Boolean} true if the selection happened - * @private - */ - _discardActiveObject: function(e, object) { - var obj = this._activeObject; - if (obj) { - // onDeselect return TRUE to cancel selection; - if (obj.onDeselect({ e: e, object: object })) { + /** + * This is a private method for now. + * This is supposed to be equivalent to setActiveObject but without firing + * any event. There is commitment to have this stay this way. + * This is the functional part of setActiveObject. + * @private + * @param {Object} object to set as active + * @param {Event} [e] Event (passed along when firing "object:selected") + * @return {Boolean} true if the selection happened + */ + _setActiveObject: function(object, e) { + if (this._activeObject === object) { return false; } - this._activeObject = null; - } - return true; - }, + if (!this._discardActiveObject(e, object)) { + return false; + } + if (object.onSelect({ e: e })) { + return false; + } + this._activeObject = object; + return true; + }, - /** - * Discards currently active object and fire events. If the function is called by fabric - * as a consequence of a mouse event, the event is passed as a parameter and - * sent to the fire function for the custom events. When used as a method the - * e param does not have any application. - * @param {event} e - * @return {fabric.Canvas} thisArg - * @chainable - */ - discardActiveObject: function (e) { - var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); - if (currentActives.length) { - this.fire('before:selection:cleared', { target: activeObject, e: e }); - } - this._discardActiveObject(e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + /** + * This is a private method for now. + * This is supposed to be equivalent to discardActiveObject but without firing + * any events. There is commitment to have this stay this way. + * This is the functional part of discardActiveObject. + * @param {Event} [e] Event (passed along when firing "object:deselected") + * @param {Object} object to set as active + * @return {Boolean} true if the selection happened + * @private + */ + _discardActiveObject: function(e, object) { + var obj = this._activeObject; + if (obj) { + // onDeselect return TRUE to cancel selection; + if (obj.onDeselect({ e: e, object: object })) { + return false; + } + this._activeObject = null; + } + return true; + }, - /** - * Clears a canvas element and removes all event listeners - * @return {fabric.Canvas} thisArg - * @chainable - */ - dispose: function () { - var wrapper = this.wrapperEl; - this.removeListeners(); - wrapper.removeChild(this.upperCanvasEl); - wrapper.removeChild(this.lowerCanvasEl); - this.contextCache = null; - this.contextTop = null; - ['upperCanvasEl', 'cacheCanvasEl'].forEach((function(element) { - fabric.util.cleanUpJsdomNode(this[element]); - this[element] = undefined; - }).bind(this)); - if (wrapper.parentNode) { - wrapper.parentNode.replaceChild(this.lowerCanvasEl, this.wrapperEl); - } - delete this.wrapperEl; - fabric.StaticCanvas.prototype.dispose.call(this); - return this; - }, + /** + * Discards currently active object and fire events. If the function is called by fabric + * as a consequence of a mouse event, the event is passed as a parameter and + * sent to the fire function for the custom events. When used as a method the + * e param does not have any application. + * @param {event} e + * @return {fabric.Canvas} thisArg + * @chainable + */ + discardActiveObject: function (e) { + var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); + if (currentActives.length) { + this.fire('before:selection:cleared', { target: activeObject, e: e }); + } + this._discardActiveObject(e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** - * Clears all contexts (background, main, top) of an instance - * @return {fabric.Canvas} thisArg - * @chainable - */ - clear: function () { - // this.discardActiveGroup(); - this.discardActiveObject(); - this.clearContext(this.contextTop); - return this.callSuper('clear'); - }, + /** + * Clears a canvas element and removes all event listeners + * @return {fabric.Canvas} thisArg + * @chainable + */ + dispose: function () { + var wrapperEl = this.wrapperEl, + lowerCanvasEl = this.lowerCanvasEl, + upperCanvasEl = this.upperCanvasEl, + cacheCanvasEl = this.cacheCanvasEl; + this.removeListeners(); + this.callSuper('dispose'); + wrapperEl.removeChild(upperCanvasEl); + wrapperEl.removeChild(lowerCanvasEl); + this.contextCache = null; + this.contextTop = null; + fabric.util.cleanUpJsdomNode(upperCanvasEl); + this.upperCanvasEl = undefined; + fabric.util.cleanUpJsdomNode(cacheCanvasEl); + this.cacheCanvasEl = undefined; + if (wrapperEl.parentNode) { + wrapperEl.parentNode.replaceChild(lowerCanvasEl, wrapperEl); + } + delete this.wrapperEl; + return this; + }, - /** - * Draws objects' controls (borders/controls) - * @param {CanvasRenderingContext2D} ctx Context to render controls on - */ - drawControls: function(ctx) { - var activeObject = this._activeObject; + /** + * Clears all contexts (background, main, top) of an instance + * @return {fabric.Canvas} thisArg + * @chainable + */ + clear: function () { + // this.discardActiveGroup(); + this.discardActiveObject(); + this.clearContext(this.contextTop); + return this.callSuper('clear'); + }, - if (activeObject) { - activeObject._renderControls(ctx); - } - }, + /** + * Draws objects' controls (borders/controls) + * @param {CanvasRenderingContext2D} ctx Context to render controls on + */ + drawControls: function(ctx) { + var activeObject = this._activeObject; - /** - * @private - */ - _toObject: function(instance, methodName, propertiesToInclude) { - //If the object is part of the current selection group, it should - //be transformed appropriately - //i.e. it should be serialised as it would appear if the selection group - //were to be destroyed. - var originalProperties = this._realizeGroupTransformOnObject(instance), - object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); - //Undo the damage we did by changing all of its properties - this._unwindGroupTransformOnObject(instance, originalProperties); - return object; - }, + if (activeObject) { + activeObject._renderControls(ctx); + } + }, - /** - * Realises an object's group transformation on it - * @private - * @param {fabric.Object} [instance] the object to transform (gets mutated) - * @returns the original values of instance which were changed - */ - _realizeGroupTransformOnObject: function(instance) { - if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { - var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; - //Copy all the positionally relevant properties across now - var originalValues = {}; - layoutProps.forEach(function(prop) { - originalValues[prop] = instance[prop]; - }); - fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); - return originalValues; - } - else { - return null; - } - }, + /** + * @private + */ + _toObject: function(instance, methodName, propertiesToInclude) { + //If the object is part of the current selection group, it should + //be transformed appropriately + //i.e. it should be serialised as it would appear if the selection group + //were to be destroyed. + var originalProperties = this._realizeGroupTransformOnObject(instance), + object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); + //Undo the damage we did by changing all of its properties + originalProperties && instance.set(originalProperties); + return object; + }, - /** - * Restores the changed properties of instance - * @private - * @param {fabric.Object} [instance] the object to un-transform (gets mutated) - * @param {Object} [originalValues] the original values of instance, as returned by _realizeGroupTransformOnObject - */ - _unwindGroupTransformOnObject: function(instance, originalValues) { - if (originalValues) { - instance.set(originalValues); - } - }, + /** + * Realises an object's group transformation on it + * @private + * @param {fabric.Object} [instance] the object to transform (gets mutated) + * @returns the original values of instance which were changed + */ + _realizeGroupTransformOnObject: function(instance) { + if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { + var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; + //Copy all the positionally relevant properties across now + var originalValues = {}; + layoutProps.forEach(function(prop) { + originalValues[prop] = instance[prop]; + }); + fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); + return originalValues; + } + else { + return null; + } + }, - /** - * @private - */ - _setSVGObject: function(markup, instance, reviver) { - //If the object is in a selection group, simulate what would happen to that - //object when the group is deselected - var originalProperties = this._realizeGroupTransformOnObject(instance); - this.callSuper('_setSVGObject', markup, instance, reviver); - this._unwindGroupTransformOnObject(instance, originalProperties); - }, + /** + * @private + */ + _setSVGObject: function(markup, instance, reviver) { + //If the object is in a selection group, simulate what would happen to that + //object when the group is deselected + var originalProperties = this._realizeGroupTransformOnObject(instance); + this.callSuper('_setSVGObject', markup, instance, reviver); + originalProperties && instance.set(originalProperties); + }, - setViewportTransform: function (vpt) { - if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { - this._activeObject.clearContextTop(); + setViewportTransform: function (vpt) { + if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { + this._activeObject.clearContextTop(); + } + fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); } - fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); - } - }); + }); - // copying static properties manually to work around Opera's bug, - // where "prototype" property is enumerable and overrides existing prototype - for (var prop in fabric.StaticCanvas) { - if (prop !== 'prototype') { - fabric.Canvas[prop] = fabric.StaticCanvas[prop]; + // copying static properties manually to work around Opera's bug, + // where "prototype" property is enumerable and overrides existing prototype + for (var prop in fabric.StaticCanvas) { + if (prop !== 'prototype') { + fabric.Canvas[prop] = fabric.StaticCanvas[prop]; + } } - } -})(); - + })(typeof exports !== 'undefined' ? exports : window); -(function() { + (function(global) { - var addListener = fabric.util.addListener, - removeListener = fabric.util.removeListener, - RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, - addEventOptions = { passive: false }; + var fabric = global.fabric, + addListener = fabric.util.addListener, + removeListener = fabric.util.removeListener, + RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, + addEventOptions = { passive: false }; - function checkClick(e, value) { - return e.button && (e.button === value - 1); - } + function checkClick(e, value) { + return e.button && (e.button === value - 1); + } - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** - * Contains the id of the touch event that owns the fabric transform - * @type Number - * @private - */ - mainTouchId: null, + /** + * Contains the id of the touch event that owns the fabric transform + * @type Number + * @private + */ + mainTouchId: null, - /** - * Adds mouse listeners to canvas - * @private - */ - _initEventListeners: function () { - // in case we initialized the class twice. This should not happen normally - // but in some kind of applications where the canvas element may be changed - // this is a workaround to having double listeners. - this.removeListeners(); - this._bindEvents(); - this.addOrRemove(addListener, 'add'); - }, + /** + * Adds mouse listeners to canvas + * @private + */ + _initEventListeners: function () { + // in case we initialized the class twice. This should not happen normally + // but in some kind of applications where the canvas element may be changed + // this is a workaround to having double listeners. + this.removeListeners(); + this._bindEvents(); + this.addOrRemove(addListener, 'add'); + }, - /** - * return an event prefix pointer or mouse. - * @private - */ - _getEventPrefix: function () { - return this.enablePointerEvents ? 'pointer' : 'mouse'; - }, - - addOrRemove: function(functor, eventjsFunctor) { - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - functor(fabric.window, 'resize', this._onResize); - functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); - functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); - functor(canvasElement, 'wheel', this._onMouseWheel); - functor(canvasElement, 'contextmenu', this._onContextMenu); - functor(canvasElement, 'dblclick', this._onDoubleClick); - functor(canvasElement, 'dragover', this._onDragOver); - functor(canvasElement, 'dragenter', this._onDragEnter); - functor(canvasElement, 'dragleave', this._onDragLeave); - functor(canvasElement, 'drop', this._onDrop); - if (!this.enablePointerEvents) { - functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); - } - if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { - eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); - eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); - eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); - eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); - eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); - } - }, - - /** - * Removes all event listeners - */ - removeListeners: function() { - this.addOrRemove(removeListener, 'remove'); - // if you dispose on a mouseDown, before mouse up, you need to clean document to... - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - }, + /** + * return an event prefix pointer or mouse. + * @private + */ + _getEventPrefix: function () { + return this.enablePointerEvents ? 'pointer' : 'mouse'; + }, - /** - * @private - */ - _bindEvents: function() { - if (this.eventsBound) { - // for any reason we pass here twice we do not want to bind events twice. - return; - } - this._onMouseDown = this._onMouseDown.bind(this); - this._onTouchStart = this._onTouchStart.bind(this); - this._onMouseMove = this._onMouseMove.bind(this); - this._onMouseUp = this._onMouseUp.bind(this); - this._onTouchEnd = this._onTouchEnd.bind(this); - this._onResize = this._onResize.bind(this); - this._onGesture = this._onGesture.bind(this); - this._onDrag = this._onDrag.bind(this); - this._onShake = this._onShake.bind(this); - this._onLongPress = this._onLongPress.bind(this); - this._onOrientationChange = this._onOrientationChange.bind(this); - this._onMouseWheel = this._onMouseWheel.bind(this); - this._onMouseOut = this._onMouseOut.bind(this); - this._onMouseEnter = this._onMouseEnter.bind(this); - this._onContextMenu = this._onContextMenu.bind(this); - this._onDoubleClick = this._onDoubleClick.bind(this); - this._onDragOver = this._onDragOver.bind(this); - this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); - this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); - this._onDrop = this._onDrop.bind(this); - this.eventsBound = true; - }, + addOrRemove: function(functor, eventjsFunctor) { + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + functor(fabric.window, 'resize', this._onResize); + functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); + functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); + functor(canvasElement, 'wheel', this._onMouseWheel); + functor(canvasElement, 'contextmenu', this._onContextMenu); + functor(canvasElement, 'dblclick', this._onDoubleClick); + functor(canvasElement, 'dragover', this._onDragOver); + functor(canvasElement, 'dragenter', this._onDragEnter); + functor(canvasElement, 'dragleave', this._onDragLeave); + functor(canvasElement, 'drop', this._onDrop); + if (!this.enablePointerEvents) { + functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); + } + if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { + eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); + eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); + eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); + eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); + eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); + } + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js gesture - * @param {Event} [self] Inner Event object - */ - _onGesture: function(e, self) { - this.__onTransformGesture && this.__onTransformGesture(e, self); - }, + /** + * Removes all event listeners + */ + removeListeners: function() { + this.addOrRemove(removeListener, 'remove'); + // if you dispose on a mouseDown, before mouse up, you need to clean document to... + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js drag - * @param {Event} [self] Inner Event object - */ - _onDrag: function(e, self) { - this.__onDrag && this.__onDrag(e, self); - }, + /** + * @private + */ + _bindEvents: function() { + if (this.eventsBound) { + // for any reason we pass here twice we do not want to bind events twice. + return; + } + this._onMouseDown = this._onMouseDown.bind(this); + this._onTouchStart = this._onTouchStart.bind(this); + this._onMouseMove = this._onMouseMove.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); + this._onTouchEnd = this._onTouchEnd.bind(this); + this._onResize = this._onResize.bind(this); + this._onGesture = this._onGesture.bind(this); + this._onDrag = this._onDrag.bind(this); + this._onShake = this._onShake.bind(this); + this._onLongPress = this._onLongPress.bind(this); + this._onOrientationChange = this._onOrientationChange.bind(this); + this._onMouseWheel = this._onMouseWheel.bind(this); + this._onMouseOut = this._onMouseOut.bind(this); + this._onMouseEnter = this._onMouseEnter.bind(this); + this._onContextMenu = this._onContextMenu.bind(this); + this._onDoubleClick = this._onDoubleClick.bind(this); + this._onDragOver = this._onDragOver.bind(this); + this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); + this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); + this._onDrop = this._onDrop.bind(this); + this.eventsBound = true; + }, - /** - * @private - * @param {Event} [e] Event object fired on wheel event - */ - _onMouseWheel: function(e) { - this.__onMouseWheel(e); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js gesture + * @param {Event} [self] Inner Event object + */ + _onGesture: function(e, self) { + this.__onTransformGesture && this.__onTransformGesture(e, self); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onMouseOut: function(e) { - var target = this._hoveredTarget; - this.fire('mouse:out', { target: target, e: e }); - this._hoveredTarget = null; - target && target.fire('mouseout', { e: e }); - - var _this = this; - this._hoveredTargets.forEach(function(_target){ - _this.fire('mouse:out', { target: target, e: e }); - _target && target.fire('mouseout', { e: e }); - }); - this._hoveredTargets = []; + /** + * @private + * @param {Event} [e] Event object fired on Event.js drag + * @param {Event} [self] Inner Event object + */ + _onDrag: function(e, self) { + this.__onDrag && this.__onDrag(e, self); + }, - if (this._iTextInstances) { - this._iTextInstances.forEach(function(obj) { - if (obj.isEditing) { - obj.hiddenTextarea.focus(); - } - }); - } - }, + /** + * @private + * @param {Event} [e] Event object fired on wheel event + */ + _onMouseWheel: function(e) { + this.__onMouseWheel(e); + }, - /** - * @private - * @param {Event} e Event object fired on mouseenter - */ - _onMouseEnter: function(e) { - // This find target and consequent 'mouse:over' is used to - // clear old instances on hovered target. - // calling findTarget has the side effect of killing target.__corner. - // as a short term fix we are not firing this if we are currently transforming. - // as a long term fix we need to separate the action of finding a target with the - // side effects we added to it. - if (!this._currentTransform && !this.findTarget(e)) { - this.fire('mouse:over', { target: null, e: e }); + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseOut: function(e) { + var target = this._hoveredTarget; + this.fire('mouse:out', { target: target, e: e }); this._hoveredTarget = null; + target && target.fire('mouseout', { e: e }); + + var _this = this; + this._hoveredTargets.forEach(function(_target){ + _this.fire('mouse:out', { target: target, e: e }); + _target && target.fire('mouseout', { e: e }); + }); this._hoveredTargets = []; - } - }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js orientation change - * @param {Event} [self] Inner Event object - */ - _onOrientationChange: function(e, self) { - this.__onOrientationChange && this.__onOrientationChange(e, self); - }, + if (this._iTextInstances) { + this._iTextInstances.forEach(function(obj) { + if (obj.isEditing) { + obj.hiddenTextarea.focus(); + } + }); + } + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js shake - * @param {Event} [self] Inner Event object - */ - _onShake: function(e, self) { - this.__onShake && this.__onShake(e, self); - }, + /** + * @private + * @param {Event} e Event object fired on mouseenter + */ + _onMouseEnter: function(e) { + // This find target and consequent 'mouse:over' is used to + // clear old instances on hovered target. + // calling findTarget has the side effect of killing target.__corner. + // as a short term fix we are not firing this if we are currently transforming. + // as a long term fix we need to separate the action of finding a target with the + // side effects we added to it. + if (!this._currentTransform && !this.findTarget(e)) { + this.fire('mouse:over', { target: null, e: e }); + this._hoveredTarget = null; + this._hoveredTargets = []; + } + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js shake - * @param {Event} [self] Inner Event object - */ - _onLongPress: function(e, self) { - this.__onLongPress && this.__onLongPress(e, self); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js orientation change + * @param {Event} [self] Inner Event object + */ + _onOrientationChange: function(e, self) { + this.__onOrientationChange && this.__onOrientationChange(e, self); + }, - /** - * prevent default to allow drop event to be fired - * @private - * @param {Event} [e] Event object fired on Event.js shake - */ - _onDragOver: function(e) { - e.preventDefault(); - var target = this._simpleEventHandler('dragover', e); - this._fireEnterLeaveEvents(target, e); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js shake + * @param {Event} [self] Inner Event object + */ + _onShake: function(e, self) { + this.__onShake && this.__onShake(e, self); + }, - /** - * `drop:before` is a an event that allow you to schedule logic - * before the `drop` event. Prefer `drop` event always, but if you need - * to run some drop-disabling logic on an event, since there is no way - * to handle event handlers ordering, use `drop:before` - * @param {Event} e - */ - _onDrop: function (e) { - this._simpleEventHandler('drop:before', e); - return this._simpleEventHandler('drop', e); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js shake + * @param {Event} [self] Inner Event object + */ + _onLongPress: function(e, self) { + this.__onLongPress && this.__onLongPress(e, self); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onContextMenu: function (e) { - if (this.stopContextMenu) { - e.stopPropagation(); + /** + * prevent default to allow drop event to be fired + * @private + * @param {Event} [e] Event object fired on Event.js shake + */ + _onDragOver: function(e) { e.preventDefault(); - } - return false; - }, + var target = this._simpleEventHandler('dragover', e); + this._fireEnterLeaveEvents(target, e); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onDoubleClick: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'dblclick'); - this._resetTransformEventData(e); - }, + /** + * `drop:before` is a an event that allow you to schedule logic + * before the `drop` event. Prefer `drop` event always, but if you need + * to run some drop-disabling logic on an event, since there is no way + * to handle event handlers ordering, use `drop:before` + * @param {Event} e + */ + _onDrop: function (e) { + this._simpleEventHandler('drop:before', e); + return this._simpleEventHandler('drop', e); + }, - /** - * Return a the id of an event. - * returns either the pointerId or the identifier or 0 for the mouse event - * @private - * @param {Event} evt Event object - */ - getPointerId: function(evt) { - var changedTouches = evt.changedTouches; + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onContextMenu: function (e) { + this._simpleEventHandler('contextmenu:before', e); + if (this.stopContextMenu) { + e.stopPropagation(); + e.preventDefault(); + } + this._simpleEventHandler('contextmenu', e); + return false; + }, - if (changedTouches) { - return changedTouches[0] && changedTouches[0].identifier; - } + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onDoubleClick: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'dblclick'); + this._resetTransformEventData(e); + }, - if (this.enablePointerEvents) { - return evt.pointerId; - } + /** + * Return a the id of an event. + * returns either the pointerId or the identifier or 0 for the mouse event + * @private + * @param {Event} evt Event object + */ + getPointerId: function(evt) { + var changedTouches = evt.changedTouches; + + if (changedTouches) { + return changedTouches[0] && changedTouches[0].identifier; + } - return -1; - }, + if (this.enablePointerEvents) { + return evt.pointerId; + } - /** - * Determines if an event has the id of the event that is considered main - * @private - * @param {evt} event Event object - */ - _isMainEvent: function(evt) { - if (evt.isPrimary === true) { - return true; - } - if (evt.isPrimary === false) { - return false; - } - if (evt.type === 'touchend' && evt.touches.length === 0) { + return -1; + }, + + /** + * Determines if an event has the id of the event that is considered main + * @private + * @param {evt} event Event object + */ + _isMainEvent: function(evt) { + if (evt.isPrimary === true) { + return true; + } + if (evt.isPrimary === false) { + return false; + } + if (evt.type === 'touchend' && evt.touches.length === 0) { + return true; + } + if (evt.changedTouches) { + return evt.changedTouches[0].identifier === this.mainTouchId; + } return true; - } - if (evt.changedTouches) { - return evt.changedTouches[0].identifier === this.mainTouchId; - } - return true; - }, + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onTouchStart: function(e) { - e.preventDefault(); - if (this.mainTouchId === null) { - this.mainTouchId = this.getPointerId(e); - } - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - // Unbind mousedown to prevent double triggers from touch devices - removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onTouchStart: function(e) { + e.preventDefault(); + if (this.mainTouchId === null) { + this.mainTouchId = this.getPointerId(e); + } + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + // Unbind mousedown to prevent double triggers from touch devices + removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onMouseDown: function (e) { - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseDown: function (e) { + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onTouchEnd: function(e) { - if (e.touches.length > 0) { - // if there are still touches stop here - return; - } - this.__onMouseUp(e); - this._resetTransformEventData(); - this.mainTouchId = null; - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - var _this = this; - if (this._willAddMouseDown) { - clearTimeout(this._willAddMouseDown); - } - this._willAddMouseDown = setTimeout(function() { - // Wait 400ms before rebinding mousedown to prevent double triggers - // from touch devices - addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); - _this._willAddMouseDown = 0; - }, 400); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onTouchEnd: function(e) { + if (e.touches.length > 0) { + // if there are still touches stop here + return; + } + this.__onMouseUp(e); + this._resetTransformEventData(); + this.mainTouchId = null; + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + var _this = this; + if (this._willAddMouseDown) { + clearTimeout(this._willAddMouseDown); + } + this._willAddMouseDown = setTimeout(function() { + // Wait 400ms before rebinding mousedown to prevent double triggers + // from touch devices + addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); + _this._willAddMouseDown = 0; + }, 400); + }, - /** - * @private - * @param {Event} e Event object fired on mouseup - */ - _onMouseUp: function (e) { - this.__onMouseUp(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - if (this._isMainEvent(e)) { - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - } - }, + /** + * @private + * @param {Event} e Event object fired on mouseup + */ + _onMouseUp: function (e) { + this.__onMouseUp(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + if (this._isMainEvent(e)) { + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + } + }, - /** - * @private - * @param {Event} e Event object fired on mousemove - */ - _onMouseMove: function (e) { - !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); - this.__onMouseMove(e); - }, + /** + * @private + * @param {Event} e Event object fired on mousemove + */ + _onMouseMove: function (e) { + !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); + this.__onMouseMove(e); + }, - /** - * @private - */ - _onResize: function () { - this.calcOffset(); - }, + /** + * @private + */ + _onResize: function () { + this.calcOffset(); + }, - /** - * Decides whether the canvas should be redrawn in mouseup and mousedown events. - * @private - * @param {Object} target - */ - _shouldRender: function(target) { - var activeObject = this._activeObject; + /** + * Decides whether the canvas should be redrawn in mouseup and mousedown events. + * @private + * @param {Object} target + */ + _shouldRender: function(target) { + var activeObject = this._activeObject; - if ( - !!activeObject !== !!target || - (activeObject && target && (activeObject !== target)) - ) { - // this covers: switch of target, from target to no target, selection of target - // multiSelection with key and mouse - return true; - } - else if (activeObject && activeObject.isEditing) { - // if we mouse up/down over a editing textbox a cursor change, - // there is no need to re render + if ( + !!activeObject !== !!target || + (activeObject && target && (activeObject !== target)) + ) { + // this covers: switch of target, from target to no target, selection of target + // multiSelection with key and mouse + return true; + } + else if (activeObject && activeObject.isEditing) { + // if we mouse up/down over a editing textbox a cursor change, + // there is no need to re render + return false; + } return false; - } - return false; - }, + }, - /** - * Method that defines the actions when mouse is released on canvas. - * The method resets the currentTransform parameters, store the image corner - * position in the image object and render the canvas on top. - * @private - * @param {Event} e Event object fired on mouseup - */ - __onMouseUp: function (e) { - var target, transform = this._currentTransform, - groupSelector = this._groupSelector, shouldRender = false, - isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); - this._cacheTransformEventData(e); - target = this._target; - this._handleEvent(e, 'up:before'); - // if right/middle click just fire events and return - // target undefined will make the _handleEvent search the target - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'up', RIGHT_CLICK, isClick); + /** + * Method that defines the actions when mouse is released on canvas. + * The method resets the currentTransform parameters, store the image corner + * position in the image object and render the canvas on top. + * @private + * @param {Event} e Event object fired on mouseup + */ + __onMouseUp: function (e) { + var target, transform = this._currentTransform, + groupSelector = this._groupSelector, shouldRender = false, + isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); + this._cacheTransformEventData(e); + target = this._target; + this._handleEvent(e, 'up:before'); + // if right/middle click just fire events and return + // target undefined will make the _handleEvent search the target + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'up', RIGHT_CLICK, isClick); + } + return; } - return; - } - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); + } + this._resetTransformEventData(); + return; } - this._resetTransformEventData(); - return; - } - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this._onMouseUpInDrawingMode(e); - return; - } + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this._onMouseUpInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } - if (transform) { - this._finalizeCurrentTransform(e); - shouldRender = transform.actionPerformed; - } - if (!isClick) { - var targetWasActive = target === this._activeObject; - this._maybeGroupObjects(e); - if (!shouldRender) { - shouldRender = ( - this._shouldRender(target) || - (!targetWasActive && target === this._activeObject) + if (!this._isMainEvent(e)) { + return; + } + if (transform) { + this._finalizeCurrentTransform(e); + shouldRender = transform.actionPerformed; + } + if (!isClick) { + var targetWasActive = target === this._activeObject; + this._maybeGroupObjects(e); + if (!shouldRender) { + shouldRender = ( + this._shouldRender(target) || + (!targetWasActive && target === this._activeObject) + ); + } + } + var corner, pointer; + if (target) { + corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) ); + if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { + this.setActiveObject(target, e); + shouldRender = true; + } + else { + var control = target.controls[corner], + mouseUpHandler = control && control.getMouseUpHandler(e, target, control); + if (mouseUpHandler) { + pointer = this.getPointer(e); + mouseUpHandler(e, transform, pointer.x, pointer.y); + } + } + target.isMoving = false; } - } - var corner, pointer; - if (target) { - corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) - ); - if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { - this.setActiveObject(target, e); - shouldRender = true; + // if we are ending up a transform on a different control or a new object + // fire the original mouse up from the corner that started the transform + if (transform && (transform.target !== target || transform.corner !== corner)) { + var originalControl = transform.target && transform.target.controls[transform.corner], + originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); + pointer = pointer || this.getPointer(e); + originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); } - else { - var control = target.controls[corner], - mouseUpHandler = control && control.getMouseUpHandler(e, target, control); - if (mouseUpHandler) { - pointer = this.getPointer(e); - mouseUpHandler(e, transform, pointer.x, pointer.y); - } - } - target.isMoving = false; - } - // if we are ending up a transform on a different control or a new object - // fire the original mouse up from the corner that started the transform - if (transform && (transform.target !== target || transform.corner !== corner)) { - var originalControl = transform.target && transform.target.controls[transform.corner], - originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); - pointer = pointer || this.getPointer(e); - originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); - } - this._setCursorFromEvent(e, target); - this._handleEvent(e, 'up', LEFT_CLICK, isClick); - this._groupSelector = null; - this._currentTransform = null; - // reset the target information about which corner is selected - target && (target.__corner = 0); - if (shouldRender) { - this.requestRenderAll(); - } - else if (!isClick) { - this.renderTop(); - } - }, + this._setCursorFromEvent(e, target); + this._handleEvent(e, 'up', LEFT_CLICK, isClick); + this._groupSelector = null; + this._currentTransform = null; + // reset the target information about which corner is selected + target && (target.__corner = 0); + if (shouldRender) { + this.requestRenderAll(); + } + else if (!isClick) { + this.renderTop(); + } + }, - /** - * @private - * Handle event firing for target and subtargets - * @param {Event} e event from mouse - * @param {String} eventType event to fire (up, down or move) - * @return {Fabric.Object} target return the the target found, for internal reasons. - */ - _simpleEventHandler: function(eventType, e) { - var target = this.findTarget(e), - targets = this.targets, - options = { - e: e, - target: target, - subTargets: targets, - }; - this.fire(eventType, options); - target && target.fire(eventType, options); - if (!targets) { + /** + * @private + * Handle event firing for target and subtargets + * @param {Event} e event from mouse + * @param {String} eventType event to fire (up, down or move) + * @return {Fabric.Object} target return the the target found, for internal reasons. + */ + _simpleEventHandler: function(eventType, e) { + var target = this.findTarget(e), + targets = this.targets, + options = { + e: e, + target: target, + subTargets: targets, + }; + this.fire(eventType, options); + target && target.fire(eventType, options); + if (!targets) { + return target; + } + for (var i = 0; i < targets.length; i++) { + targets[i].fire(eventType, options); + } return target; - } - for (var i = 0; i < targets.length; i++) { - targets[i].fire(eventType, options); - } - return target; - }, - - /** - * @private - * Handle event firing for target and subtargets - * @param {Event} e event from mouse - * @param {String} eventType event to fire (up, down or move) - * @param {fabric.Object} targetObj receiving event - * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right - * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. - */ - _handleEvent: function(e, eventType, button, isClick) { - var target = this._target, - targets = this.targets || [], - options = { - e: e, - target: target, - subTargets: targets, - button: button || LEFT_CLICK, - isClick: isClick || false, - pointer: this._pointer, - absolutePointer: this._absolutePointer, - transform: this._currentTransform - }; - if (eventType === 'up') { - options.currentTarget = this.findTarget(e); - options.currentSubTargets = this.targets; - } - this.fire('mouse:' + eventType, options); - target && target.fire('mouse' + eventType, options); - for (var i = 0; i < targets.length; i++) { - targets[i].fire('mouse' + eventType, options); - } - }, + }, - /** - * @private - * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event - */ - _finalizeCurrentTransform: function(e) { + /** + * @private + * Handle event firing for target and subtargets + * @param {Event} e event from mouse + * @param {String} eventType event to fire (up, down or move) + * @param {fabric.Object} targetObj receiving event + * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right + * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. + */ + _handleEvent: function(e, eventType, button, isClick) { + var target = this._target, + targets = this.targets || [], + options = { + e: e, + target: target, + subTargets: targets, + button: button || LEFT_CLICK, + isClick: isClick || false, + pointer: this._pointer, + absolutePointer: this._absolutePointer, + transform: this._currentTransform + }; + if (eventType === 'up') { + options.currentTarget = this.findTarget(e); + options.currentSubTargets = this.targets; + } + this.fire('mouse:' + eventType, options); + target && target.fire('mouse' + eventType, options); + for (var i = 0; i < targets.length; i++) { + targets[i].fire('mouse' + eventType, options); + } + }, - var transform = this._currentTransform, - target = transform.target, - options = { - e: e, - target: target, - transform: transform, - action: transform.action, - }; + /** + * @private + * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event + */ + _finalizeCurrentTransform: function(e) { - if (target._scaling) { - target._scaling = false; - } + var transform = this._currentTransform, + target = transform.target, + options = { + e: e, + target: target, + transform: transform, + action: transform.action, + }; - target.setCoords(); + if (target._scaling) { + target._scaling = false; + } - if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { - this._fire('modified', options); - } - }, + target.setCoords(); - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onMouseDownInDrawingMode: function(e) { - this._isCurrentlyDrawing = true; - if (this.getActiveObject()) { - this.discardActiveObject(e).requestRenderAll(); - } - var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); - this._handleEvent(e, 'down'); - }, + if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { + this._fire('modified', options); + } + }, - /** - * @private - * @param {Event} e Event object fired on mousemove - */ - _onMouseMoveInDrawingMode: function(e) { - if (this._isCurrentlyDrawing) { + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseDownInDrawingMode: function(e) { + this._isCurrentlyDrawing = true; + if (this.getActiveObject()) { + this.discardActiveObject(e).requestRenderAll(); + } var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); - } - this.setCursor(this.freeDrawingCursor); - this._handleEvent(e, 'move'); - }, - - /** - * @private - * @param {Event} e Event object fired on mouseup - */ - _onMouseUpInDrawingMode: function(e) { - var pointer = this.getPointer(e); - this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); - this._handleEvent(e, 'up'); - }, + this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); + this._handleEvent(e, 'down'); + }, - /** - * Method that defines the actions when mouse is clicked on canvas. - * The method inits the currentTransform parameters and renders all the - * canvas so the current image can be placed on the top canvas and the rest - * in on the container one. - * @private - * @param {Event} e Event object fired on mousedown - */ - __onMouseDown: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'down:before'); - var target = this._target; - // if right click just fire events - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'down', RIGHT_CLICK); + /** + * @private + * @param {Event} e Event object fired on mousemove + */ + _onMouseMoveInDrawingMode: function(e) { + if (this._isCurrentlyDrawing) { + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); } - return; - } + this.setCursor(this.freeDrawingCursor); + this._handleEvent(e, 'move'); + }, + + /** + * @private + * @param {Event} e Event object fired on mouseup + */ + _onMouseUpInDrawingMode: function(e) { + var pointer = this.getPointer(e); + this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); + this._handleEvent(e, 'up'); + }, - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'down', MIDDLE_CLICK); + /** + * Method that defines the actions when mouse is clicked on canvas. + * The method inits the currentTransform parameters and renders all the + * canvas so the current image can be placed on the top canvas and the rest + * in on the container one. + * @private + * @param {Event} e Event object fired on mousedown + */ + __onMouseDown: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'down:before'); + var target = this._target; + // if right click just fire events + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'down', RIGHT_CLICK); + } + return; } - return; - } - if (this.isDrawingMode) { - this._onMouseDownInDrawingMode(e); - return; - } + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'down', MIDDLE_CLICK); + } + return; + } - if (!this._isMainEvent(e)) { - return; - } + if (this.isDrawingMode) { + this._onMouseDownInDrawingMode(e); + return; + } - // ignore if some object is being transformed at this moment - if (this._currentTransform) { - return; - } + if (!this._isMainEvent(e)) { + return; + } - var pointer = this._pointer; - // save pointer for check in __onMouseUp event - this._previousPointer = pointer; - var shouldRender = this._shouldRender(target), - shouldGroup = this._shouldGroup(e, target); - if (this._shouldClearSelection(e, target)) { - this.discardActiveObject(e); - } - else if (shouldGroup) { - this._handleGrouping(e, target); - target = this._activeObject; - } + // ignore if some object is being transformed at this moment + if (this._currentTransform) { + return; + } - if (this.selection && (!target || - (!target.selectable && !target.isEditing && target !== this._activeObject))) { - this._groupSelector = { - ex: this._absolutePointer.x, - ey: this._absolutePointer.y, - top: 0, - left: 0 - }; - } + var pointer = this._pointer; + // save pointer for check in __onMouseUp event + this._previousPointer = pointer; + var shouldRender = this._shouldRender(target), + shouldGroup = this._shouldGroup(e, target); + if (this._shouldClearSelection(e, target)) { + this.discardActiveObject(e); + } + else if (shouldGroup) { + this._handleGrouping(e, target); + target = this._activeObject; + } - if (target) { - var alreadySelected = target === this._activeObject; - if (target.selectable && target.activeOn === 'down') { - this.setActiveObject(target, e); + if (this.selection && (!target || + (!target.selectable && !target.isEditing && target !== this._activeObject))) { + this._groupSelector = { + ex: this._absolutePointer.x, + ey: this._absolutePointer.y, + top: 0, + left: 0 + }; } - var corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) - ); - target.__corner = corner; - if (target === this._activeObject && (corner || !shouldGroup)) { - this._setupCurrentTransform(e, target, alreadySelected); - var control = target.controls[corner], - pointer = this.getPointer(e), - mouseDownHandler = control && control.getMouseDownHandler(e, target, control); - if (mouseDownHandler) { - mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); + + if (target) { + var alreadySelected = target === this._activeObject; + if (target.selectable && target.activeOn === 'down') { + this.setActiveObject(target, e); + } + var corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + target.__corner = corner; + if (target === this._activeObject && (corner || !shouldGroup)) { + this._setupCurrentTransform(e, target, alreadySelected); + var control = target.controls[corner], + pointer = this.getPointer(e), + mouseDownHandler = control && control.getMouseDownHandler(e, target, control); + if (mouseDownHandler) { + mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); + } } } - } - this._handleEvent(e, 'down'); - // we must renderAll so that we update the visuals - (shouldRender || shouldGroup) && this.requestRenderAll(); - }, + var invalidate = shouldRender || shouldGroup; + // we clear `_objectsToRender` in case of a change in order to repopulate it at rendering + // run before firing the `down` event to give the dev a chance to populate it themselves + invalidate && (this._objectsToRender = undefined); + this._handleEvent(e, 'down'); + // we must renderAll so that we update the visuals + invalidate && this.requestRenderAll(); + }, - /** - * reset cache form common information needed during event processing - * @private - */ - _resetTransformEventData: function() { - this._target = null; - this._pointer = null; - this._absolutePointer = null; - }, + /** + * reset cache form common information needed during event processing + * @private + */ + _resetTransformEventData: function() { + this._target = null; + this._pointer = null; + this._absolutePointer = null; + }, - /** - * Cache common information needed during event processing - * @private - * @param {Event} e Event object fired on event - */ - _cacheTransformEventData: function(e) { - // reset in order to avoid stale caching - this._resetTransformEventData(); - this._pointer = this.getPointer(e, true); - this._absolutePointer = this.restorePointerVpt(this._pointer); - this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; - }, + /** + * Cache common information needed during event processing + * @private + * @param {Event} e Event object fired on event + */ + _cacheTransformEventData: function(e) { + // reset in order to avoid stale caching + this._resetTransformEventData(); + this._pointer = this.getPointer(e, true); + this._absolutePointer = this.restorePointerVpt(this._pointer); + this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; + }, - /** - * @private - */ - _beforeTransform: function(e) { - var t = this._currentTransform; - this.stateful && t.target.saveState(); - this.fire('before:transform', { - e: e, - transform: t, - }); - }, + /** + * @private + */ + _beforeTransform: function(e) { + var t = this._currentTransform; + this.stateful && t.target.saveState(); + this.fire('before:transform', { + e: e, + transform: t, + }); + }, - /** - * Method that defines the actions when mouse is hovering the canvas. - * The currentTransform parameter will define whether the user is rotating/scaling/translating - * an image or neither of them (only hovering). A group selection is also possible and would cancel - * all any other type of action. - * In case of an image transformation only the top canvas will be rendered. - * @private - * @param {Event} e Event object fired on mousemove - */ - __onMouseMove: function (e) { - this._handleEvent(e, 'move:before'); - this._cacheTransformEventData(e); - var target, pointer; + /** + * Method that defines the actions when mouse is hovering the canvas. + * The currentTransform parameter will define whether the user is rotating/scaling/translating + * an image or neither of them (only hovering). A group selection is also possible and would cancel + * all any other type of action. + * In case of an image transformation only the top canvas will be rendered. + * @private + * @param {Event} e Event object fired on mousemove + */ + __onMouseMove: function (e) { + this._handleEvent(e, 'move:before'); + this._cacheTransformEventData(e); + var target, pointer; - if (this.isDrawingMode) { - this._onMouseMoveInDrawingMode(e); - return; - } + if (this.isDrawingMode) { + this._onMouseMoveInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } + if (!this._isMainEvent(e)) { + return; + } - var groupSelector = this._groupSelector; + var groupSelector = this._groupSelector; - // We initially clicked in an empty area, so we draw a box for multiple selection - if (groupSelector) { - pointer = this._absolutePointer; + // We initially clicked in an empty area, so we draw a box for multiple selection + if (groupSelector) { + pointer = this._absolutePointer; - groupSelector.left = pointer.x - groupSelector.ex; - groupSelector.top = pointer.y - groupSelector.ey; + groupSelector.left = pointer.x - groupSelector.ex; + groupSelector.top = pointer.y - groupSelector.ey; - this.renderTop(); - } - else if (!this._currentTransform) { - target = this.findTarget(e) || null; - this._setCursorFromEvent(e, target); - this._fireOverOutEvents(target, e); - } - else { - this._transformObject(e); - } - this._handleEvent(e, 'move'); - this._resetTransformEventData(); - }, + this.renderTop(); + } + else if (!this._currentTransform) { + target = this.findTarget(e) || null; + this._setCursorFromEvent(e, target); + this._fireOverOutEvents(target, e); + } + else { + this._transformObject(e); + } + this._handleEvent(e, 'move'); + this._resetTransformEventData(); + }, - /** - * Manage the mouseout, mouseover events for the fabric object on the canvas - * @param {Fabric.Object} target the target where the target from the mousemove event - * @param {Event} e Event object fired on mousemove - * @private - */ - _fireOverOutEvents: function(target, e) { - var _hoveredTarget = this._hoveredTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); - - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _hoveredTarget, - evtOut: 'mouseout', - canvasEvtOut: 'mouse:out', - evtIn: 'mouseover', - canvasEvtIn: 'mouse:over', - }); - for (var i = 0; i < length; i++){ - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], + /** + * Manage the mouseout, mouseover events for the fabric object on the canvas + * @param {Fabric.Object} target the target where the target from the mousemove event + * @param {Event} e Event object fired on mousemove + * @private + */ + _fireOverOutEvents: function(target, e) { + var _hoveredTarget = this._hoveredTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); + + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _hoveredTarget, evtOut: 'mouseout', + canvasEvtOut: 'mouse:out', evtIn: 'mouseover', + canvasEvtIn: 'mouse:over', }); - } - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - }, + for (var i = 0; i < length; i++){ + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], + evtOut: 'mouseout', + evtIn: 'mouseover', + }); + } + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + }, - /** - * Manage the dragEnter, dragLeave events for the fabric objects on the canvas - * @param {Fabric.Object} target the target where the target from the onDrag event - * @param {Event} e Event object fired on ondrag - * @private - */ - _fireEnterLeaveEvents: function(target, e) { - var _draggedoverTarget = this._draggedoverTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); + /** + * Manage the dragEnter, dragLeave events for the fabric objects on the canvas + * @param {Fabric.Object} target the target where the target from the onDrag event + * @param {Event} e Event object fired on ondrag + * @private + */ + _fireEnterLeaveEvents: function(target, e) { + var _draggedoverTarget = this._draggedoverTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _draggedoverTarget, - evtOut: 'dragleave', - evtIn: 'dragenter', - }); - for (var i = 0; i < length; i++) { - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _draggedoverTarget, evtOut: 'dragleave', evtIn: 'dragenter', }); - } - this._draggedoverTarget = target; - }, - - /** - * Manage the synthetic in/out events for the fabric objects on the canvas - * @param {Fabric.Object} target the target where the target from the supported events - * @param {Event} e Event object fired - * @param {Object} config configuration for the function to work - * @param {String} config.targetName property on the canvas where the old target is stored - * @param {String} [config.canvasEvtOut] name of the event to fire at canvas level for out - * @param {String} config.evtOut name of the event to fire for out - * @param {String} [config.canvasEvtIn] name of the event to fire at canvas level for in - * @param {String} config.evtIn name of the event to fire for in - * @private - */ - fireSyntheticInOutEvents: function(target, e, config) { - var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, - targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; - if (targetChanged) { - inOpt = { e: e, target: target, previousTarget: oldTarget }; - outOpt = { e: e, target: oldTarget, nextTarget: target }; - } - inFires = target && targetChanged; - outFires = oldTarget && targetChanged; - if (outFires) { - canvasEvtOut && this.fire(canvasEvtOut, outOpt); - oldTarget.fire(config.evtOut, outOpt); - } - if (inFires) { - canvasEvtIn && this.fire(canvasEvtIn, inOpt); - target.fire(config.evtIn, inOpt); - } - }, - - /** - * Method that defines actions when an Event Mouse Wheel - * @param {Event} e Event object fired on mouseup - */ - __onMouseWheel: function(e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'wheel'); - this._resetTransformEventData(); - }, + for (var i = 0; i < length; i++) { + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], + evtOut: 'dragleave', + evtIn: 'dragenter', + }); + } + this._draggedoverTarget = target; + }, - /** - * @private - * @param {Event} e Event fired on mousemove - */ - _transformObject: function(e) { - var pointer = this.getPointer(e), - transform = this._currentTransform; + /** + * Manage the synthetic in/out events for the fabric objects on the canvas + * @param {Fabric.Object} target the target where the target from the supported events + * @param {Event} e Event object fired + * @param {Object} config configuration for the function to work + * @param {String} config.targetName property on the canvas where the old target is stored + * @param {String} [config.canvasEvtOut] name of the event to fire at canvas level for out + * @param {String} config.evtOut name of the event to fire for out + * @param {String} [config.canvasEvtIn] name of the event to fire at canvas level for in + * @param {String} config.evtIn name of the event to fire for in + * @private + */ + fireSyntheticInOutEvents: function(target, e, config) { + var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, + targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; + if (targetChanged) { + inOpt = { e: e, target: target, previousTarget: oldTarget }; + outOpt = { e: e, target: oldTarget, nextTarget: target }; + } + inFires = target && targetChanged; + outFires = oldTarget && targetChanged; + if (outFires) { + canvasEvtOut && this.fire(canvasEvtOut, outOpt); + oldTarget.fire(config.evtOut, outOpt); + } + if (inFires) { + canvasEvtIn && this.fire(canvasEvtIn, inOpt); + target.fire(config.evtIn, inOpt); + } + }, - transform.reset = false; - transform.shiftKey = e.shiftKey; - transform.altKey = e[this.centeredKey]; + /** + * Method that defines actions when an Event Mouse Wheel + * @param {Event} e Event object fired on mouseup + */ + __onMouseWheel: function(e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'wheel'); + this._resetTransformEventData(); + }, - this._performTransformAction(e, transform, pointer); - transform.actionPerformed && this.requestRenderAll(); - }, + /** + * @private + * @param {Event} e Event fired on mousemove + */ + _transformObject: function(e) { + var pointer = this.getPointer(e), + transform = this._currentTransform, + target = transform.target, + // transform pointer to target's containing coordinate plane + // both pointer and object should agree on every point + localPointer = target.group ? + fabric.util.sendPointToPlane(pointer, null, target.group.calcTransformMatrix()) : + pointer; + + transform.reset = false; + transform.shiftKey = e.shiftKey; + transform.altKey = e[this.centeredKey]; + + this._performTransformAction(e, transform, localPointer); + transform.actionPerformed && this.requestRenderAll(); + }, - /** - * @private - */ - _performTransformAction: function(e, transform, pointer) { - var x = pointer.x, - y = pointer.y, - action = transform.action, - actionPerformed = false, - actionHandler = transform.actionHandler; - // this object could be created from the function in the control handlers + /** + * @private + */ + _performTransformAction: function(e, transform, pointer) { + var x = pointer.x, + y = pointer.y, + action = transform.action, + actionPerformed = false, + actionHandler = transform.actionHandler; + // this object could be created from the function in the control handlers - if (actionHandler) { - actionPerformed = actionHandler(e, transform, x, y); - } - if (action === 'drag' && actionPerformed) { - transform.target.isMoving = true; - this.setCursor(transform.target.moveCursor || this.moveCursor); - } - transform.actionPerformed = transform.actionPerformed || actionPerformed; - }, + if (actionHandler) { + actionPerformed = actionHandler(e, transform, x, y); + } + if (action === 'drag' && actionPerformed) { + transform.target.isMoving = true; + this.setCursor(transform.target.moveCursor || this.moveCursor); + } + transform.actionPerformed = transform.actionPerformed || actionPerformed; + }, - /** - * @private - */ - _fire: fabric.controlsUtils.fireEvent, + /** + * @private + */ + _fire: fabric.controlsUtils.fireEvent, - /** - * Sets the cursor depending on where the canvas is being hovered. - * Note: very buggy in Opera - * @param {Event} e Event object - * @param {Object} target Object that the mouse is hovering, if so. - */ - _setCursorFromEvent: function (e, target) { - if (!target) { - this.setCursor(this.defaultCursor); - return false; - } - var hoverCursor = target.hoverCursor || this.hoverCursor, - activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? - this._activeObject : null, - // only show proper corner when group selection is not active - corner = (!activeSelection || !activeSelection.contains(target)) - // here we call findTargetCorner always with undefined for the touch parameter. - // we assume that if you are using a cursor you do not need to interact with - // the bigger touch area. - && target._findTargetCorner(this.getPointer(e, true)); - - if (!corner) { - if (target.subTargetCheck){ - // hoverCursor should come from top-most subTarget, - // so we walk the array backwards - this.targets.concat().reverse().map(function(_target){ - hoverCursor = _target.hoverCursor || hoverCursor; - }); + /** + * Sets the cursor depending on where the canvas is being hovered. + * Note: very buggy in Opera + * @param {Event} e Event object + * @param {Object} target Object that the mouse is hovering, if so. + */ + _setCursorFromEvent: function (e, target) { + if (!target) { + this.setCursor(this.defaultCursor); + return false; } - this.setCursor(hoverCursor); - } - else { - this.setCursor(this.getCornerCursor(corner, target, e)); - } - }, - - /** - * @private - */ - getCornerCursor: function(corner, target, e) { - var control = target.controls[corner]; - return control.cursorStyleHandler(e, control, target); - } - }); -})(); + var hoverCursor = target.hoverCursor || this.hoverCursor, + activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? + this._activeObject : null, + // only show proper corner when group selection is not active + corner = (!activeSelection || !activeSelection.contains(target)) + // here we call findTargetCorner always with undefined for the touch parameter. + // we assume that if you are using a cursor you do not need to interact with + // the bigger touch area. + && target._findTargetCorner(this.getPointer(e, true)); + + if (!corner) { + if (target.subTargetCheck){ + // hoverCursor should come from top-most subTarget, + // so we walk the array backwards + this.targets.concat().reverse().map(function(_target){ + hoverCursor = _target.hoverCursor || hoverCursor; + }); + } + this.setCursor(hoverCursor); + } + else { + this.setCursor(this.getCornerCursor(corner, target, e)); + } + }, + /** + * @private + */ + getCornerCursor: function(corner, target, e) { + var control = target.controls[corner]; + return control.cursorStyleHandler(e, control, target); + } + }); + })(typeof exports !== 'undefined' ? exports : window); -(function() { + (function(global) { - var min = Math.min, - max = Math.max; + var fabric = global.fabric, + min = Math.min, + max = Math.max; - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - * @return {Boolean} - */ - _shouldGroup: function(e, target) { - var activeObject = this._activeObject; - return activeObject && this._isSelectionKeyPressed(e) && target && target.selectable && this.selection && - (activeObject !== target || activeObject.type === 'activeSelection') && !target.onSelect({ e: e }); - }, + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + * @return {Boolean} + */ + _shouldGroup: function(e, target) { + var activeObject = this._activeObject; + // check if an active object exists on canvas and if the user is pressing the `selectionKey` while canvas supports multi selection. + return !!activeObject && this._isSelectionKeyPressed(e) && this.selection + // on top of that the user also has to hit a target that is selectable. + && !!target && target.selectable + // if all pre-requisite pass, the target is either something different from the current + // activeObject or if an activeSelection already exists + // TODO at time of writing why `activeObject.type === 'activeSelection'` matter is unclear. + // is a very old condition uncertain if still valid. + && (activeObject !== target || activeObject.type === 'activeSelection') + // make sure `activeObject` and `target` aren't ancestors of each other + && !target.isDescendantOf(activeObject) && !activeObject.isDescendantOf(target) + // target accepts selection + && !target.onSelect({ e: e }); + }, - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - */ - _handleGrouping: function (e, target) { - var activeObject = this._activeObject; - // avoid multi select when shift click on a corner - if (activeObject.__corner) { - return; - } - if (target === activeObject) { - // if it's a group, find target again, using activeGroup objects - target = this.findTarget(e, true); - // if even object is not found or we are on activeObjectCorner, bail out - if (!target || !target.selectable) { + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _handleGrouping: function (e, target) { + var activeObject = this._activeObject; + // avoid multi select when shift click on a corner + if (activeObject.__corner) { return; } - } - if (activeObject && activeObject.type === 'activeSelection') { - this._updateActiveSelection(target, e); - } - else { - this._createActiveSelection(target, e); - } - }, - - /** - * @private - */ - _updateActiveSelection: function(target, e) { - var activeSelection = this._activeObject, - currentActiveObjects = activeSelection._objects.slice(0); - if (activeSelection.contains(target)) { - activeSelection.removeWithUpdate(target); - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - if (activeSelection.size() === 1) { - // activate last remaining object - this._setActiveObject(activeSelection.item(0), e); + if (target === activeObject) { + // if it's a group, find target again, using activeGroup objects + target = this.findTarget(e, true); + // if even object is not found or we are on activeObjectCorner, bail out + if (!target || !target.selectable) { + return; + } } - } - else { - activeSelection.addWithUpdate(target); - this._hoveredTarget = activeSelection; - this._hoveredTargets = this.targets.concat(); - } - this._fireSelectionEvents(currentActiveObjects, e); - }, - - /** - * @private - */ - _createActiveSelection: function(target, e) { - var currentActives = this.getActiveObjects(), group = this._createGroup(target); - this._hoveredTarget = group; - // ISSUE 4115: should we consider subTargets here? - // this._hoveredTargets = []; - // this._hoveredTargets = this.targets.concat(); - this._setActiveObject(group, e); - this._fireSelectionEvents(currentActives, e); - }, + if (activeObject && activeObject.type === 'activeSelection') { + this._updateActiveSelection(target, e); + } + else { + this._createActiveSelection(target, e); + } + }, - /** - * @private - * @param {Object} target - */ - _createGroup: function(target) { - var objects = this._objects, - isActiveLower = objects.indexOf(this._activeObject) < objects.indexOf(target), - groupObjects = isActiveLower - ? [this._activeObject, target] - : [target, this._activeObject]; - this._activeObject.isEditing && this._activeObject.exitEditing(); - return new fabric.ActiveSelection(groupObjects, { - canvas: this - }); - }, + /** + * @private + */ + _updateActiveSelection: function(target, e) { + var activeSelection = this._activeObject, + currentActiveObjects = activeSelection._objects.slice(0); + if (target.group === activeSelection) { + activeSelection.remove(target); + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + if (activeSelection.size() === 1) { + // activate last remaining object + this._setActiveObject(activeSelection.item(0), e); + } + } + else { + activeSelection.add(target); + this._hoveredTarget = activeSelection; + this._hoveredTargets = this.targets.concat(); + } + this._fireSelectionEvents(currentActiveObjects, e); + }, - /** - * @private - * @param {Event} e mouse event - */ - _groupSelectedObjects: function (e) { + /** + * @private + */ + _createActiveSelection: function(target, e) { + var currentActives = this.getActiveObjects(), group = this._createGroup(target); + this._hoveredTarget = group; + // ISSUE 4115: should we consider subTargets here? + // this._hoveredTargets = []; + // this._hoveredTargets = this.targets.concat(); + this._setActiveObject(group, e); + this._fireSelectionEvents(currentActives, e); + }, - var group = this._collectObjects(e), - aGroup; - // do not create group for 1 element only - if (group.length === 1) { - this.setActiveObject(group[0], e); - } - else if (group.length > 1) { - aGroup = new fabric.ActiveSelection(group.reverse(), { + /** + * @private + * @param {Object} target + * @returns {fabric.ActiveSelection} + */ + _createGroup: function(target) { + var activeObject = this._activeObject; + var groupObjects = target.isInFrontOf(activeObject) ? + [activeObject, target] : + [target, activeObject]; + activeObject.isEditing && activeObject.exitEditing(); + // handle case: target is nested + return new fabric.ActiveSelection(groupObjects, { canvas: this }); - this.setActiveObject(aGroup, e); - } - }, + }, - /** - * @private - */ - _collectObjects: function(e) { - var group = [], - currentObject, - x1 = this._groupSelector.ex, - y1 = this._groupSelector.ey, - x2 = x1 + this._groupSelector.left, - y2 = y1 + this._groupSelector.top, - selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), - selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), - allowIntersect = !this.selectionFullyContained, - isClick = x1 === x2 && y1 === y2; - // we iterate reverse order to collect top first in case of click. - for (var i = this._objects.length; i--; ) { - currentObject = this._objects[i]; - - if (!currentObject || !currentObject.selectable || !currentObject.visible) { - continue; + /** + * @private + * @param {Event} e mouse event + */ + _groupSelectedObjects: function (e) { + + var group = this._collectObjects(e), + aGroup; + + // do not create group for 1 element only + if (group.length === 1) { + this.setActiveObject(group[0], e); + } + else if (group.length > 1) { + aGroup = new fabric.ActiveSelection(group.reverse(), { + canvas: this + }); + this.setActiveObject(aGroup, e); } + }, - if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || - currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) || - (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) || - (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true)) - ) { - group.push(currentObject); - // only add one object if it's a click - if (isClick) { - break; + /** + * @private + */ + _collectObjects: function(e) { + var group = [], + currentObject, + x1 = this._groupSelector.ex, + y1 = this._groupSelector.ey, + x2 = x1 + this._groupSelector.left, + y2 = y1 + this._groupSelector.top, + selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), + selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), + allowIntersect = !this.selectionFullyContained, + isClick = x1 === x2 && y1 === y2; + // we iterate reverse order to collect top first in case of click. + for (var i = this._objects.length; i--; ) { + currentObject = this._objects[i]; + + if (!currentObject || !currentObject.selectable || !currentObject.visible) { + continue; + } + + if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || + currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) || + (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) || + (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true)) + ) { + group.push(currentObject); + // only add one object if it's a click + if (isClick) { + break; + } } } - } - if (group.length > 1) { - group = group.filter(function(object) { - return !object.onSelect({ e: e }); - }); - } + if (group.length > 1) { + group = group.filter(function(object) { + return !object.onSelect({ e: e }); + }); + } - return group; - }, + return group; + }, - /** - * @private - */ - _maybeGroupObjects: function(e) { - if (this.selection && this._groupSelector) { - this._groupSelectedObjects(e); + /** + * @private + */ + _maybeGroupObjects: function(e) { + if (this.selection && this._groupSelector) { + this._groupSelectedObjects(e); + } + this.setCursor(this.defaultCursor); + // clear selection and current transformation + this._groupSelector = null; } - this.setCursor(this.defaultCursor); - // clear selection and current transformation - this._groupSelector = null; - } - }); - -})(); - + }); -(function () { - fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + })(typeof exports !== 'undefined' ? exports : window); - /** - * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately - * @param {Object} [options] Options object - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 - * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format - * @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo} - * @example Generate jpeg dataURL with lower quality - * var dataURL = canvas.toDataURL({ - * format: 'jpeg', - * quality: 0.8 - * }); - * @example Generate cropped png dataURL (clipping of canvas) - * var dataURL = canvas.toDataURL({ - * format: 'png', - * left: 100, - * top: 100, - * width: 200, - * height: 200 - * }); - * @example Generate double scaled png dataURL - * var dataURL = canvas.toDataURL({ - * format: 'png', - * multiplier: 2 - * }); - */ - toDataURL: function (options) { - options || (options = { }); + (function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - var format = options.format || 'png', - quality = options.quality || 1, - multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), - canvasEl = this.toCanvasElement(multiplier, options); - return fabric.util.toDataURL(canvasEl, format, quality); - }, - - /** - * Create a new HTMLCanvas element painted with the current canvas content. - * No need to resize the actual one or repaint it. - * Will transfer object ownership to a new canvas, paint it, and set everything back. - * This is an intermediary step used to get to a dataUrl but also it is useful to - * create quick image copies of a canvas without passing for the dataUrl string - * @param {Number} [multiplier] a zoom factor. - * @param {Object} [cropping] Cropping informations - * @param {Number} [cropping.left] Cropping left offset. - * @param {Number} [cropping.top] Cropping top offset. - * @param {Number} [cropping.width] Cropping width. - * @param {Number} [cropping.height] Cropping height. - */ - toCanvasElement: function(multiplier, cropping) { - multiplier = multiplier || 1; - cropping = cropping || { }; - var scaledWidth = (cropping.width || this.width) * multiplier, - scaledHeight = (cropping.height || this.height) * multiplier, - zoom = this.getZoom(), - originalWidth = this.width, - originalHeight = this.height, - newZoom = zoom * multiplier, - vp = this.viewportTransform, - translateX = (vp[4] - (cropping.left || 0)) * multiplier, - translateY = (vp[5] - (cropping.top || 0)) * multiplier, - originalInteractive = this.interactive, - newVp = [newZoom, 0, 0, newZoom, translateX, translateY], - originalRetina = this.enableRetinaScaling, - canvasEl = fabric.util.createCanvasElement(), - originalContextTop = this.contextTop; - canvasEl.width = scaledWidth; - canvasEl.height = scaledHeight; - this.contextTop = null; - this.enableRetinaScaling = false; - this.interactive = false; - this.viewportTransform = newVp; - this.width = scaledWidth; - this.height = scaledHeight; - this.calcViewportBoundaries(); - this.renderCanvas(canvasEl.getContext('2d'), this._objects); - this.viewportTransform = vp; - this.width = originalWidth; - this.height = originalHeight; - this.calcViewportBoundaries(); - this.interactive = originalInteractive; - this.enableRetinaScaling = originalRetina; - this.contextTop = originalContextTop; - return canvasEl; - }, - }); + /** + * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately + * @param {Object} [options] Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 + * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + * @see {@link https://jsfiddle.net/xsjua1rd/ demo} + * @example Generate jpeg dataURL with lower quality + * var dataURL = canvas.toDataURL({ + * format: 'jpeg', + * quality: 0.8 + * }); + * @example Generate cropped png dataURL (clipping of canvas) + * var dataURL = canvas.toDataURL({ + * format: 'png', + * left: 100, + * top: 100, + * width: 200, + * height: 200 + * }); + * @example Generate double scaled png dataURL + * var dataURL = canvas.toDataURL({ + * format: 'png', + * multiplier: 2 + * }); + * @example Generate dataURL with objects that overlap a specified object + * var myObject; + * var dataURL = canvas.toDataURL({ + * filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject) + * }); + */ + toDataURL: function (options) { + options || (options = { }); + + var format = options.format || 'png', + quality = options.quality || 1, + multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), + canvasEl = this.toCanvasElement(multiplier, options); + return fabric.util.toDataURL(canvasEl, format, quality); + }, -})(); + /** + * Create a new HTMLCanvas element painted with the current canvas content. + * No need to resize the actual one or repaint it. + * Will transfer object ownership to a new canvas, paint it, and set everything back. + * This is an intermediary step used to get to a dataUrl but also it is useful to + * create quick image copies of a canvas without passing for the dataUrl string + * @param {Number} [multiplier] a zoom factor. + * @param {Object} [options] Cropping informations + * @param {Number} [options.left] Cropping left offset. + * @param {Number} [options.top] Cropping top offset. + * @param {Number} [options.width] Cropping width. + * @param {Number} [options.height] Cropping height. + * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. + */ + toCanvasElement: function (multiplier, options) { + multiplier = multiplier || 1; + options = options || { }; + var scaledWidth = (options.width || this.width) * multiplier, + scaledHeight = (options.height || this.height) * multiplier, + zoom = this.getZoom(), + originalWidth = this.width, + originalHeight = this.height, + newZoom = zoom * multiplier, + vp = this.viewportTransform, + translateX = (vp[4] - (options.left || 0)) * multiplier, + translateY = (vp[5] - (options.top || 0)) * multiplier, + originalInteractive = this.interactive, + newVp = [newZoom, 0, 0, newZoom, translateX, translateY], + originalRetina = this.enableRetinaScaling, + canvasEl = fabric.util.createCanvasElement(), + originalContextTop = this.contextTop, + objectsToRender = options.filter ? this._objects.filter(options.filter) : this._objects; + canvasEl.width = scaledWidth; + canvasEl.height = scaledHeight; + this.contextTop = null; + this.enableRetinaScaling = false; + this.interactive = false; + this.viewportTransform = newVp; + this.width = scaledWidth; + this.height = scaledHeight; + this.calcViewportBoundaries(); + this.renderCanvas(canvasEl.getContext('2d'), objectsToRender); + this.viewportTransform = vp; + this.width = originalWidth; + this.height = originalHeight; + this.calcViewportBoundaries(); + this.interactive = originalInteractive; + this.enableRetinaScaling = originalRetina; + this.contextTop = originalContextTop; + return canvasEl; + }, + }); + })(typeof exports !== 'undefined' ? exports : window); -fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Populates canvas with data from the specified JSON. - * JSON format must conform to the one of {@link fabric.Canvas#toJSON} - * @param {String|Object} json JSON string or object - * @param {Function} callback Callback, invoked when json is parsed - * and corresponding objects (e.g: {@link fabric.Image}) - * are initialized - * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. - * @return {fabric.Canvas} instance - * @chainable - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} - * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo} - * @example loadFromJSON - * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas)); - * @example loadFromJSON with reviver - * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) { - * // `o` = json object - * // `object` = fabric.Object instance - * // ... do some stuff ... - * }); - */ - loadFromJSON: function (json, callback, reviver) { - if (!json) { - return; - } + (function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + /** + * Populates canvas with data from the specified JSON. + * JSON format must conform to the one of {@link fabric.Canvas#toJSON} + * @param {String|Object} json JSON string or object + * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. + * @return {Promise} instance + * @chainable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} + * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo} + * @example loadFromJSON + * canvas.loadFromJSON(json).then((canvas) => canvas.requestRenderAll()); + * @example loadFromJSON with reviver + * canvas.loadFromJSON(json, function(o, object) { + * // `o` = json object + * // `object` = fabric.Object instance + * // ... do some stuff ... + * }).then((canvas) => { + * ... canvas is restored, add your code. + * }); + */ + loadFromJSON: function (json, reviver) { + if (!json) { + return; + } - // serialize if it wasn't already - var serialized = (typeof json === 'string') - ? JSON.parse(json) - : fabric.util.object.clone(json); + // serialize if it wasn't already + var serialized = (typeof json === 'string') + ? JSON.parse(json) + : Object.assign({}, json); + + var _this = this, + renderOnAddRemove = this.renderOnAddRemove; + + this.renderOnAddRemove = false; + + return fabric.util.enlivenObjects(serialized.objects || [], '', reviver) + .then(function(enlived) { + _this.clear(); + return fabric.util.enlivenObjectEnlivables({ + backgroundImage: serialized.backgroundImage, + backgroundColor: serialized.background, + overlayImage: serialized.overlayImage, + overlayColor: serialized.overlay, + clipPath: serialized.clipPath, + }) + .then(function(enlivedMap) { + _this.__setupCanvas(serialized, enlived, renderOnAddRemove); + _this.set(enlivedMap); + return _this; + }); + }); + }, - var _this = this, - clipPath = serialized.clipPath, - renderOnAddRemove = this.renderOnAddRemove; + /** + * @private + * @param {Object} serialized Object with background and overlay information + * @param {Array} enlivenedObjects canvas objects + * @param {boolean} renderOnAddRemove renderOnAddRemove setting for the canvas + */ + __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove) { + var _this = this; + enlivenedObjects.forEach(function(obj, index) { + // we splice the array just in case some custom classes restored from JSON + // will add more object to canvas at canvas init. + _this.insertAt(obj, index); + }); + this.renderOnAddRemove = renderOnAddRemove; + // remove parts i cannot set as options + delete serialized.objects; + delete serialized.backgroundImage; + delete serialized.overlayImage; + delete serialized.background; + delete serialized.overlay; + // this._initOptions does too many things to just + // call it. Normally loading an Object from JSON + // create the Object instance. Here the Canvas is + // already an instance and we are just loading things over it + this._setOptions(serialized); + }, - this.renderOnAddRemove = false; + /** + * Clones canvas instance + * @param {Array} [properties] Array of properties to include in the cloned canvas and children + * @returns {Promise} + */ + clone: function (properties) { + var data = JSON.stringify(this.toJSON(properties)); + return this.cloneWithoutData().then(function(clone) { + return clone.loadFromJSON(data); + }); + }, - delete serialized.clipPath; + /** + * Clones canvas instance without cloning existing data. + * This essentially copies canvas dimensions, clipping properties, etc. + * but leaves data empty (so that you can populate it with your own) + * @returns {Promise} + */ + cloneWithoutData: function() { + var el = fabric.util.createCanvasElement(); - this._enlivenObjects(serialized.objects, function (enlivenedObjects) { - _this.clear(); - _this._setBgOverlay(serialized, function () { - if (clipPath) { - _this._enlivenObjects([clipPath], function (enlivenedCanvasClip) { - _this.clipPath = enlivenedCanvasClip[0]; - _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback); - }); + el.width = this.width; + el.height = this.height; + // this seems wrong. either Canvas or StaticCanvas + var clone = new fabric.Canvas(el); + var data = {}; + if (this.backgroundImage) { + data.backgroundImage = this.backgroundImage.toObject(); } - else { - _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback); + if (this.backgroundColor) { + data.background = this.backgroundColor.toObject ? this.backgroundColor.toObject() : this.backgroundColor; } - }); - }, reviver); - return this; - }, - - /** - * @private - * @param {Object} serialized Object with background and overlay information - * @param {Array} restored canvas objects - * @param {Function} cached renderOnAddRemove callback - * @param {Function} callback Invoked after all background and overlay images/patterns loaded - */ - __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove, callback) { - var _this = this; - enlivenedObjects.forEach(function(obj, index) { - // we splice the array just in case some custom classes restored from JSON - // will add more object to canvas at canvas init. - _this.insertAt(obj, index); + return clone.loadFromJSON(data); + } }); - this.renderOnAddRemove = renderOnAddRemove; - // remove parts i cannot set as options - delete serialized.objects; - delete serialized.backgroundImage; - delete serialized.overlayImage; - delete serialized.background; - delete serialized.overlay; - // this._initOptions does too many things to just - // call it. Normally loading an Object from JSON - // create the Object instance. Here the Canvas is - // already an instance and we are just loading things over it - this._setOptions(serialized); - this.renderAll(); - callback && callback(); - }, + })(typeof exports !== 'undefined' ? exports : window); /** - * @private - * @param {Object} serialized Object with background and overlay information - * @param {Function} callback Invoked after all background and overlay images/patterns loaded + * Adds support for multi-touch gestures using the Event.js library. + * Fires the following custom events: + * - touch:gesture + * - touch:drag + * - touch:orientation + * - touch:shake + * - touch:longpress */ - _setBgOverlay: function(serialized, callback) { - var loaded = { - backgroundColor: false, - overlayColor: false, - backgroundImage: false, - overlayImage: false - }; + (function(global) { - if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background && !serialized.overlay) { - callback && callback(); - return; - } + var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians, + radiansToDegrees = fabric.util.radiansToDegrees; - var cbIfLoaded = function () { - if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) { - callback && callback(); - } - }; + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + /** + * Method that defines actions when an Event.js gesture is detected on an object. Currently only supports + * 2 finger gestures. + * @param {Event} e Event object by Event.js + * @param {Event} self Event proxy object by Event.js + */ + __onTransformGesture: function(e, self) { - this.__setBgOverlay('backgroundImage', serialized.backgroundImage, loaded, cbIfLoaded); - this.__setBgOverlay('overlayImage', serialized.overlayImage, loaded, cbIfLoaded); - this.__setBgOverlay('backgroundColor', serialized.background, loaded, cbIfLoaded); - this.__setBgOverlay('overlayColor', serialized.overlay, loaded, cbIfLoaded); - }, + if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) { + return; + } - /** - * @private - * @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor) - * @param {(Object|String)} value Value to set - * @param {Object} loaded Set loaded property to true if property is set - * @param {Object} callback Callback function to invoke after property is set - */ - __setBgOverlay: function(property, value, loaded, callback) { - var _this = this; + var target = this.findTarget(e); + if ('undefined' !== typeof target) { + this.__gesturesParams = { + e: e, + self: self, + target: target + }; - if (!value) { - loaded[property] = true; - callback && callback(); - return; - } + this.__gesturesRenderer(); + } - if (property === 'backgroundImage' || property === 'overlayImage') { - fabric.util.enlivenObjects([value], function(enlivedObject){ - _this[property] = enlivedObject[0]; - loaded[property] = true; - callback && callback(); - }); - } - else { - this['set' + fabric.util.string.capitalize(property, true)](value, function() { - loaded[property] = true; - callback && callback(); - }); - } - }, + this.fire('touch:gesture', { + target: target, e: e, self: self + }); + }, + __gesturesParams: null, + __gesturesRenderer: function() { - /** - * @private - * @param {Array} objects - * @param {Function} callback - * @param {Function} [reviver] - */ - _enlivenObjects: function (objects, callback, reviver) { - if (!objects || objects.length === 0) { - callback && callback([]); - return; - } + if (this.__gesturesParams === null || this._currentTransform === null) { + return; + } - fabric.util.enlivenObjects(objects, function(enlivenedObjects) { - callback && callback(enlivenedObjects); - }, null, reviver); - }, + var self = this.__gesturesParams.self, + t = this._currentTransform, + e = this.__gesturesParams.e; - /** - * @private - * @param {String} format - * @param {Function} callback - */ - _toDataURL: function (format, callback) { - this.clone(function (clone) { - callback(clone.toDataURL(format)); - }); - }, + t.action = 'scale'; + t.originX = t.originY = 'center'; - /** - * @private - * @param {String} format - * @param {Number} multiplier - * @param {Function} callback - */ - _toDataURLWithMultiplier: function (format, multiplier, callback) { - this.clone(function (clone) { - callback(clone.toDataURLWithMultiplier(format, multiplier)); - }); - }, + this._scaleObjectBy(self.scale, e); - /** - * Clones canvas instance - * @param {Object} [callback] Receives cloned instance as a first argument - * @param {Array} [properties] Array of properties to include in the cloned canvas and children - */ - clone: function (callback, properties) { - var data = JSON.stringify(this.toJSON(properties)); - this.cloneWithoutData(function(clone) { - clone.loadFromJSON(data, function() { - callback && callback(clone); - }); - }); - }, + if (self.rotation !== 0) { + t.action = 'rotate'; + this._rotateObjectByAngle(self.rotation, e); + } - /** - * Clones canvas instance without cloning existing data. - * This essentially copies canvas dimensions, clipping properties, etc. - * but leaves data empty (so that you can populate it with your own) - * @param {Object} [callback] Receives cloned instance as a first argument - */ - cloneWithoutData: function(callback) { - var el = fabric.util.createCanvasElement(); + this.requestRenderAll(); - el.width = this.width; - el.height = this.height; + t.action = 'drag'; + }, - var clone = new fabric.Canvas(el); - if (this.backgroundImage) { - clone.setBackgroundImage(this.backgroundImage.src, function() { - clone.renderAll(); - callback && callback(clone); - }); - clone.backgroundImageOpacity = this.backgroundImageOpacity; - clone.backgroundImageStretch = this.backgroundImageStretch; - } - else { - callback && callback(clone); - } - } -}); + /** + * Method that defines actions when an Event.js drag is detected. + * + * @param {Event} e Event object by Event.js + * @param {Event} self Event proxy object by Event.js + */ + __onDrag: function(e, self) { + this.fire('touch:drag', { + e: e, self: self + }); + }, + /** + * Method that defines actions when an Event.js orientation event is detected. + * + * @param {Event} e Event object by Event.js + * @param {Event} self Event proxy object by Event.js + */ + __onOrientationChange: function(e, self) { + this.fire('touch:orientation', { + e: e, self: self + }); + }, -(function(global) { + /** + * Method that defines actions when an Event.js shake event is detected. + * + * @param {Event} e Event object by Event.js + * @param {Event} self Event proxy object by Event.js + */ + __onShake: function(e, self) { + this.fire('touch:shake', { + e: e, self: self + }); + }, - 'use strict'; + /** + * Method that defines actions when an Event.js longpress event is detected. + * + * @param {Event} e Event object by Event.js + * @param {Event} self Event proxy object by Event.js + */ + __onLongPress: function(e, self) { + this.fire('touch:longpress', { + e: e, self: self + }); + }, - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed, - capitalize = fabric.util.string.capitalize, - degreesToRadians = fabric.util.degreesToRadians, - objectCaching = !fabric.isLikelyNode, - ALIASING_LIMIT = 2; - - if (fabric.Object) { - return; - } + /** + * Scales an object by a factor + * @param {Number} s The scale factor to apply to the current scale level + * @param {Event} e Event object by Event.js + */ + _scaleObjectBy: function(s, e) { + var t = this._currentTransform, + target = t.target; + t.gestureScale = s; + target._scaling = true; + return fabric.controlsUtils.scalingEqually(e, t, 0, 0); + }, - /** - * Root object class from which all 2d shape classes inherit from - * @class fabric.Object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#objects} - * @see {@link fabric.Object#initialize} for constructor definition - * - * @fires added - * @fires removed - * - * @fires selected - * @fires deselected - * @fires modified - * @fires modified - * @fires moved - * @fires scaled - * @fires rotated - * @fires skewed - * - * @fires rotating - * @fires scaling - * @fires moving - * @fires skewing - * - * @fires mousedown - * @fires mouseup - * @fires mouseover - * @fires mouseout - * @fires mousewheel - * @fires mousedblclick - * - * @fires dragover - * @fires dragenter - * @fires dragleave - * @fires drop - */ - fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { + /** + * Rotates object by an angle + * @param {Number} curAngle The angle of rotation in degrees + * @param {Event} e Event object by Event.js + */ + _rotateObjectByAngle: function(curAngle, e) { + var t = this._currentTransform; - /** - * Type of an object (rect, circle, path, etc.). - * Note that this property is meant to be read-only and not meant to be modified. - * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly. - * @type String - * @default + if (t.target.get('lockRotation')) { + return; + } + t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta)); + this._fire('rotating', { + target: t.target, + e: e, + transform: t, + }); + } + }); + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed, + capitalize = fabric.util.string.capitalize, + degreesToRadians = fabric.util.degreesToRadians, + objectCaching = !fabric.isLikelyNode, + ALIASING_LIMIT = 2; + /** + * Root object class from which all 2d shape classes inherit from + * @class fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#objects} + * @see {@link fabric.Object#initialize} for constructor definition + * + * @fires added + * @fires removed + * + * @fires selected + * @fires deselected + * @fires modified + * @fires modified + * @fires moved + * @fires scaled + * @fires rotated + * @fires skewed + * + * @fires rotating + * @fires scaling + * @fires moving + * @fires skewing + * + * @fires mousedown + * @fires mouseup + * @fires mouseover + * @fires mouseout + * @fires mousewheel + * @fires mousedblclick + * + * @fires dragover + * @fires dragenter + * @fires dragleave + * @fires drop */ - type: 'object', + fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { - /** - * Horizontal origin of transformation of an object (one of "left", "right", "center") - * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups - * @type String - * @default - */ - originX: 'left', + /** + * Type of an object (rect, circle, path, etc.). + * Note that this property is meant to be read-only and not meant to be modified. + * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly. + * @type String + * @default + */ + type: 'object', - /** - * Vertical origin of transformation of an object (one of "top", "bottom", "center") - * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups - * @type String - * @default - */ - originY: 'top', + /** + * Horizontal origin of transformation of an object (one of "left", "right", "center") + * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups + * @type String + * @default + */ + originX: 'left', - /** - * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom} - * @type Number - * @default - */ - top: 0, + /** + * Vertical origin of transformation of an object (one of "top", "bottom", "center") + * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups + * @type String + * @default + */ + originY: 'top', - /** - * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right} - * @type Number - * @default - */ - left: 0, + /** + * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom} + * @type Number + * @default + */ + top: 0, - /** - * Object width - * @type Number - * @default - */ - width: 0, + /** + * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right} + * @type Number + * @default + */ + left: 0, - /** - * Object height - * @type Number - * @default - */ - height: 0, + /** + * Object width + * @type Number + * @default + */ + width: 0, - /** - * Object scale factor (horizontal) - * @type Number - * @default - */ - scaleX: 1, + /** + * Object height + * @type Number + * @default + */ + height: 0, - /** - * Object scale factor (vertical) - * @type Number - * @default - */ - scaleY: 1, + /** + * Object scale factor (horizontal) + * @type Number + * @default + */ + scaleX: 1, - /** - * When true, an object is rendered as flipped horizontally - * @type Boolean - * @default - */ - flipX: false, + /** + * Object scale factor (vertical) + * @type Number + * @default + */ + scaleY: 1, - /** - * When true, an object is rendered as flipped vertically - * @type Boolean - * @default - */ - flipY: false, + /** + * When true, an object is rendered as flipped horizontally + * @type Boolean + * @default + */ + flipX: false, - /** - * Opacity of an object - * @type Number - * @default - */ - opacity: 1, + /** + * When true, an object is rendered as flipped vertically + * @type Boolean + * @default + */ + flipY: false, - /** - * Angle of rotation of an object (in degrees) - * @type Number - * @default - */ - angle: 0, + /** + * Opacity of an object + * @type Number + * @default + */ + opacity: 1, - /** - * Angle of skew on x axes of an object (in degrees) - * @type Number - * @default - */ - skewX: 0, + /** + * Angle of rotation of an object (in degrees) + * @type Number + * @default + */ + angle: 0, - /** - * Angle of skew on y axes of an object (in degrees) - * @type Number - * @default - */ - skewY: 0, + /** + * Angle of skew on x axes of an object (in degrees) + * @type Number + * @default + */ + skewX: 0, - /** - * Size of object's controlling corners (in pixels) - * @type Number - * @default - */ - cornerSize: 13, + /** + * Angle of skew on y axes of an object (in degrees) + * @type Number + * @default + */ + skewY: 0, - /** - * Size of object's controlling corners when touch interaction is detected - * @type Number - * @default - */ - touchCornerSize: 24, + /** + * Size of object's controlling corners (in pixels) + * @type Number + * @default + */ + cornerSize: 13, - /** - * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) - * @type Boolean - * @default - */ - transparentCorners: true, + /** + * Size of object's controlling corners when touch interaction is detected + * @type Number + * @default + */ + touchCornerSize: 24, - /** - * Default cursor value used when hovering over this object on canvas - * @type String - * @default - */ - hoverCursor: null, + /** + * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) + * @type Boolean + * @default + */ + transparentCorners: true, - /** - * Default cursor value used when moving this object on canvas - * @type String - * @default - */ - moveCursor: null, + /** + * Default cursor value used when hovering over this object on canvas + * @type String + * @default + */ + hoverCursor: null, - /** - * Padding between object and its controlling borders (in pixels) - * @type Number - * @default - */ - padding: 0, + /** + * Default cursor value used when moving this object on canvas + * @type String + * @default + */ + moveCursor: null, - /** - * Color of controlling borders of an object (when it's active) - * @type String - * @default - */ - borderColor: 'rgb(178,204,255)', + /** + * Padding between object and its controlling borders (in pixels) + * @type Number + * @default + */ + padding: 0, - /** - * Array specifying dash pattern of an object's borders (hasBorder must be true) - * @since 1.6.2 - * @type Array - */ - borderDashArray: null, + /** + * Color of controlling borders of an object (when it's active) + * @type String + * @default + */ + borderColor: 'rgb(178,204,255)', - /** - * Color of controlling corners of an object (when it's active) - * @type String - * @default - */ - cornerColor: 'rgb(178,204,255)', + /** + * Array specifying dash pattern of an object's borders (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + borderDashArray: null, - /** - * Color of controlling corners of an object (when it's active and transparentCorners false) - * @since 1.6.2 - * @type String - * @default - */ - cornerStrokeColor: null, - - /** - * Specify style of control, 'rect' or 'circle' - * @since 1.6.2 - * @type String - */ - cornerStyle: 'rect', + /** + * Color of controlling corners of an object (when it's active) + * @type String + * @default + */ + cornerColor: 'rgb(178,204,255)', - /** - * Array specifying dash pattern of an object's control (hasBorder must be true) - * @since 1.6.2 - * @type Array - */ - cornerDashArray: null, + /** + * Color of controlling corners of an object (when it's active and transparentCorners false) + * @since 1.6.2 + * @type String + * @default + */ + cornerStrokeColor: null, - /** - * When true, this object will use center point as the origin of transformation - * when being scaled via the controls. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredScaling: false, + /** + * Specify style of control, 'rect' or 'circle' + * @since 1.6.2 + * @type String + */ + cornerStyle: 'rect', - /** - * When true, this object will use center point as the origin of transformation - * when being rotated via the controls. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredRotation: true, + /** + * Array specifying dash pattern of an object's control (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + cornerDashArray: null, - /** - * Color of object's fill - * takes css colors https://www.w3.org/TR/css-color-3/ - * @type String - * @default - */ - fill: 'rgb(0,0,0)', + /** + * When true, this object will use center point as the origin of transformation + * when being scaled via the controls. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredScaling: false, - /** - * Fill rule used to fill an object - * accepted values are nonzero, evenodd - * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead) - * @type String - * @default - */ - fillRule: 'nonzero', + /** + * When true, this object will use center point as the origin of transformation + * when being rotated via the controls. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredRotation: true, - /** - * Composite rule used for canvas globalCompositeOperation - * @type String - * @default - */ - globalCompositeOperation: 'source-over', + /** + * Color of object's fill + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + fill: 'rgb(0,0,0)', - /** - * Background color of an object. - * takes css colors https://www.w3.org/TR/css-color-3/ - * @type String - * @default - */ - backgroundColor: '', + /** + * Fill rule used to fill an object + * accepted values are nonzero, evenodd + * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead) + * @type String + * @default + */ + fillRule: 'nonzero', - /** - * Selection Background color of an object. colored layer behind the object when it is active. - * does not mix good with globalCompositeOperation methods. - * @type String - * @default - */ - selectionBackgroundColor: '', + /** + * Composite rule used for canvas globalCompositeOperation + * @type String + * @default + */ + globalCompositeOperation: 'source-over', - /** - * When defined, an object is rendered via stroke and this property specifies its color - * takes css colors https://www.w3.org/TR/css-color-3/ - * @type String - * @default - */ - stroke: null, + /** + * Background color of an object. + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + backgroundColor: '', - /** - * Width of a stroke used to render this object - * @type Number - * @default - */ - strokeWidth: 1, + /** + * Selection Background color of an object. colored layer behind the object when it is active. + * does not mix good with globalCompositeOperation methods. + * @type String + * @default + */ + selectionBackgroundColor: '', - /** - * Array specifying dash pattern of an object's stroke (stroke must be defined) - * @type Array - */ - strokeDashArray: null, + /** + * When defined, an object is rendered via stroke and this property specifies its color + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + stroke: null, - /** - * Line offset of an object's stroke - * @type Number - * @default - */ - strokeDashOffset: 0, + /** + * Width of a stroke used to render this object + * @type Number + * @default + */ + strokeWidth: 1, - /** - * Line endings style of an object's stroke (one of "butt", "round", "square") - * @type String - * @default - */ - strokeLineCap: 'butt', + /** + * Array specifying dash pattern of an object's stroke (stroke must be defined) + * @type Array + */ + strokeDashArray: null, - /** - * Corner style of an object's stroke (one of "bevel", "round", "miter") - * @type String - * @default - */ - strokeLineJoin: 'miter', + /** + * Line offset of an object's stroke + * @type Number + * @default + */ + strokeDashOffset: 0, - /** - * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke - * @type Number - * @default - */ - strokeMiterLimit: 4, + /** + * Line endings style of an object's stroke (one of "butt", "round", "square") + * @type String + * @default + */ + strokeLineCap: 'butt', - /** - * Shadow object representing shadow of this shape - * @type fabric.Shadow - * @default - */ - shadow: null, + /** + * Corner style of an object's stroke (one of "bevel", "round", "miter") + * @type String + * @default + */ + strokeLineJoin: 'miter', - /** - * Opacity of object's controlling borders when object is active and moving - * @type Number - * @default - */ - borderOpacityWhenMoving: 0.4, + /** + * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke + * @type Number + * @default + */ + strokeMiterLimit: 4, - /** - * Scale factor of object's controlling borders - * bigger number will make a thicker border - * border is 1, so this is basically a border thickness - * since there is no way to change the border itself. - * @type Number - * @default - */ - borderScaleFactor: 1, + /** + * Shadow object representing shadow of this shape + * @type fabric.Shadow + * @default + */ + shadow: null, - /** - * Minimum allowed scale value of an object - * @type Number - * @default - */ - minScaleLimit: 0, + /** + * Opacity of object's controlling borders when object is active and moving + * @type Number + * @default + */ + borderOpacityWhenMoving: 0.4, - /** - * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection). - * But events still fire on it. - * @type Boolean - * @default - */ - selectable: true, + /** + * Scale factor of object's controlling borders + * bigger number will make a thicker border + * border is 1, so this is basically a border thickness + * since there is no way to change the border itself. + * @type Number + * @default + */ + borderScaleFactor: 1, - /** - * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4 - * @type Boolean - * @default - */ - evented: true, + /** + * Minimum allowed scale value of an object + * @type Number + * @default + */ + minScaleLimit: 0, - /** - * When set to `false`, an object is not rendered on canvas - * @type Boolean - * @default - */ - visible: true, + /** + * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection). + * But events still fire on it. + * @type Boolean + * @default + */ + selectable: true, - /** - * When set to `false`, object's controls are not displayed and can not be used to manipulate object - * @type Boolean - * @default - */ - hasControls: true, + /** + * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4 + * @type Boolean + * @default + */ + evented: true, - /** - * When set to `false`, object's controlling borders are not rendered - * @type Boolean - * @default - */ - hasBorders: true, + /** + * When set to `false`, an object is not rendered on canvas + * @type Boolean + * @default + */ + visible: true, - /** - * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box - * @type Boolean - * @default - */ - perPixelTargetFind: false, + /** + * When set to `false`, object's controls are not displayed and can not be used to manipulate object + * @type Boolean + * @default + */ + hasControls: true, - /** - * When `false`, default object's values are not included in its serialization - * @type Boolean - * @default - */ - includeDefaultValues: true, + /** + * When set to `false`, object's controlling borders are not rendered + * @type Boolean + * @default + */ + hasBorders: true, - /** - * When `true`, object horizontal movement is locked - * @type Boolean - * @default - */ - lockMovementX: false, + /** + * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box + * @type Boolean + * @default + */ + perPixelTargetFind: false, - /** - * When `true`, object vertical movement is locked - * @type Boolean - * @default - */ - lockMovementY: false, + /** + * When `false`, default object's values are not included in its serialization + * @type Boolean + * @default + */ + includeDefaultValues: true, - /** - * When `true`, object rotation is locked - * @type Boolean - * @default - */ - lockRotation: false, + /** + * When `true`, object horizontal movement is locked + * @type Boolean + * @default + */ + lockMovementX: false, - /** - * When `true`, object horizontal scaling is locked - * @type Boolean - * @default - */ - lockScalingX: false, + /** + * When `true`, object vertical movement is locked + * @type Boolean + * @default + */ + lockMovementY: false, - /** - * When `true`, object vertical scaling is locked - * @type Boolean - * @default - */ - lockScalingY: false, + /** + * When `true`, object rotation is locked + * @type Boolean + * @default + */ + lockRotation: false, - /** - * When `true`, object horizontal skewing is locked - * @type Boolean - * @default - */ - lockSkewingX: false, + /** + * When `true`, object horizontal scaling is locked + * @type Boolean + * @default + */ + lockScalingX: false, - /** - * When `true`, object vertical skewing is locked - * @type Boolean - * @default - */ - lockSkewingY: false, + /** + * When `true`, object vertical scaling is locked + * @type Boolean + * @default + */ + lockScalingY: false, - /** - * When `true`, object cannot be flipped by scaling into negative values - * @type Boolean - * @default - */ - lockScalingFlip: false, + /** + * When `true`, object horizontal skewing is locked + * @type Boolean + * @default + */ + lockSkewingX: false, - /** - * When `true`, object is not exported in OBJECT/JSON - * @since 1.6.3 - * @type Boolean - * @default - */ - excludeFromExport: false, + /** + * When `true`, object vertical skewing is locked + * @type Boolean + * @default + */ + lockSkewingY: false, - /** - * When `true`, object is cached on an additional canvas. - * When `false`, object is not cached unless necessary ( clipPath ) - * default to true - * @since 1.7.0 - * @type Boolean - * @default true - */ - objectCaching: objectCaching, + /** + * When `true`, object cannot be flipped by scaling into negative values + * @type Boolean + * @default + */ + lockScalingFlip: false, - /** - * When `true`, object properties are checked for cache invalidation. In some particular - * situation you may want this to be disabled ( spray brush, very big, groups) - * or if your application does not allow you to modify properties for groups child you want - * to disable it for groups. - * default to false - * since 1.7.0 - * @type Boolean - * @default false - */ - statefullCache: false, + /** + * When `true`, object is not exported in OBJECT/JSON + * @since 1.6.3 + * @type Boolean + * @default + */ + excludeFromExport: false, - /** - * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled - * too much and will be redrawn with correct details at the end of scaling. - * this setting is performance and application dependant. - * default to true - * since 1.7.0 - * @type Boolean - * @default true - */ - noScaleCache: true, + /** + * When `true`, object is cached on an additional canvas. + * When `false`, object is not cached unless necessary ( clipPath ) + * default to true + * @since 1.7.0 + * @type Boolean + * @default true + */ + objectCaching: objectCaching, - /** - * When `false`, the stoke width will scale with the object. - * When `true`, the stroke will always match the exact pixel size entered for stroke width. - * this Property does not work on Text classes or drawing call that uses strokeText,fillText methods - * default to false - * @since 2.6.0 - * @type Boolean - * @default false - * @type Boolean - * @default false - */ - strokeUniform: false, + /** + * When `true`, object properties are checked for cache invalidation. In some particular + * situation you may want this to be disabled ( spray brush, very big, groups) + * or if your application does not allow you to modify properties for groups child you want + * to disable it for groups. + * default to false + * since 1.7.0 + * @type Boolean + * @default false + */ + statefullCache: false, - /** - * When set to `true`, object's cache will be rerendered next render call. - * since 1.7.0 - * @type Boolean - * @default true - */ - dirty: true, + /** + * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled + * too much and will be redrawn with correct details at the end of scaling. + * this setting is performance and application dependant. + * default to true + * since 1.7.0 + * @type Boolean + * @default true + */ + noScaleCache: true, - /** - * keeps the value of the last hovered corner during mouse move. - * 0 is no corner, or 'mt', 'ml', 'mtr' etc.. - * It should be private, but there is no harm in using it as - * a read-only property. - * @type number|string|any - * @default 0 - */ - __corner: 0, + /** + * When `false`, the stoke width will scale with the object. + * When `true`, the stroke will always match the exact pixel size entered for stroke width. + * this Property does not work on Text classes or drawing call that uses strokeText,fillText methods + * default to false + * @since 2.6.0 + * @type Boolean + * @default false + * @type Boolean + * @default false + */ + strokeUniform: false, - /** - * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") - * @type String - * @default - */ - paintFirst: 'fill', + /** + * When set to `true`, object's cache will be rerendered next render call. + * since 1.7.0 + * @type Boolean + * @default true + */ + dirty: true, - /** - * When 'down', object is set to active on mousedown/touchstart - * When 'up', object is set to active on mouseup/touchend - * Experimental. Let's see if this breaks anything before supporting officially - * @private - * since 4.4.0 - * @type String - * @default 'down' - */ - activeOn: 'down', + /** + * keeps the value of the last hovered corner during mouse move. + * 0 is no corner, or 'mt', 'ml', 'mtr' etc.. + * It should be private, but there is no harm in using it as + * a read-only property. + * @type number|string|any + * @default 0 + */ + __corner: 0, - /** - * List of properties to consider when checking if state - * of an object is changed (fabric.Object#hasStateChanged) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: ( - 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + - 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + - 'angle opacity fill globalCompositeOperation shadow visible backgroundColor ' + - 'skewX skewY fillRule paintFirst clipPath strokeUniform' - ).split(' '), + /** + * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") + * @type String + * @default + */ + paintFirst: 'fill', - /** - * List of properties to consider when checking if cache needs refresh - * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single - * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty - * and refreshed at the next render - * @type Array - */ - cacheProperties: ( - 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + - ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath' - ).split(' '), + /** + * When 'down', object is set to active on mousedown/touchstart + * When 'up', object is set to active on mouseup/touchend + * Experimental. Let's see if this breaks anything before supporting officially + * @private + * since 4.4.0 + * @type String + * @default 'down' + */ + activeOn: 'down', - /** - * List of properties to consider for animating colors. - * @type Array - */ - colorProperties: ( - 'fill stroke backgroundColor' - ).split(' '), + /** + * List of properties to consider when checking if state + * of an object is changed (fabric.Object#hasStateChanged) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: ( + 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + + 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + + 'angle opacity fill globalCompositeOperation shadow visible backgroundColor ' + + 'skewX skewY fillRule paintFirst clipPath strokeUniform' + ).split(' '), - /** - * a fabricObject that, without stroke define a clipping area with their shape. filled in black - * the clipPath object gets used when the object has rendered, and the context is placed in the center - * of the object cacheCanvas. - * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' - * @type fabric.Object - */ - clipPath: undefined, + /** + * List of properties to consider when checking if cache needs refresh + * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single + * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * and refreshed at the next render + * @type Array + */ + cacheProperties: ( + 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + + ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath' + ).split(' '), - /** - * Meaningful ONLY when the object is used as clipPath. - * if true, the clipPath will make the object clip to the outside of the clipPath - * since 2.4.0 - * @type boolean - * @default false - */ - inverted: false, + /** + * List of properties to consider for animating colors. + * @type Array + */ + colorProperties: ( + 'fill stroke backgroundColor' + ).split(' '), - /** - * Meaningful ONLY when the object is used as clipPath. - * if true, the clipPath will have its top and left relative to canvas, and will - * not be influenced by the object transform. This will make the clipPath relative - * to the canvas, but clipping just a particular object. - * WARNING this is beta, this feature may change or be renamed. - * since 2.4.0 - * @type boolean - * @default false - */ - absolutePositioned: false, + /** + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the object has rendered, and the context is placed in the center + * of the object cacheCanvas. + * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' + * @type fabric.Object + */ + clipPath: undefined, - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - if (options) { - this.setOptions(options); - } - }, + /** + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will make the object clip to the outside of the clipPath + * since 2.4.0 + * @type boolean + * @default false + */ + inverted: false, - /** - * Create a the canvas used to keep the cached copy of the object - * @private - */ - _createCacheCanvas: function() { - this._cacheProperties = {}; - this._cacheCanvas = fabric.util.createCanvasElement(); - this._cacheContext = this._cacheCanvas.getContext('2d'); - this._updateCacheCanvas(); - // if canvas gets created, is empty, so dirty. - this.dirty = true; - }, - - /** - * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal - * and each side do not cross fabric.cacheSideLimit - * those numbers are configurable so that you can get as much detail as you want - * making bargain with performances. - * @param {Object} dims - * @param {Object} dims.width width of canvas - * @param {Object} dims.height height of canvas - * @param {Object} dims.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @param {Object} dims.zoomY zoomY zoom value to unscale the canvas before drawing cache - * @return {Object}.width width of canvas - * @return {Object}.height height of canvas - * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache - */ - _limitCacheSize: function(dims) { - var perfLimitSizeTotal = fabric.perfLimitSizeTotal, - width = dims.width, height = dims.height, - max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; - if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { - if (width < min) { - dims.width = min; - } - if (height < min) { - dims.height = min; + /** + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will have its top and left relative to canvas, and will + * not be influenced by the object transform. This will make the clipPath relative + * to the canvas, but clipping just a particular object. + * WARNING this is beta, this feature may change or be renamed. + * since 2.4.0 + * @type boolean + * @default false + */ + absolutePositioned: false, + + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, + + /** + * Create a the canvas used to keep the cached copy of the object + * @private + */ + _createCacheCanvas: function() { + this._cacheProperties = {}; + this._cacheCanvas = fabric.util.createCanvasElement(); + this._cacheContext = this._cacheCanvas.getContext('2d'); + this._updateCacheCanvas(); + // if canvas gets created, is empty, so dirty. + this.dirty = true; + }, + + /** + * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal + * and each side do not cross fabric.cacheSideLimit + * those numbers are configurable so that you can get as much detail as you want + * making bargain with performances. + * @param {Object} dims + * @param {Object} dims.width width of canvas + * @param {Object} dims.height height of canvas + * @param {Object} dims.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @param {Object} dims.zoomY zoomY zoom value to unscale the canvas before drawing cache + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _limitCacheSize: function(dims) { + var perfLimitSizeTotal = fabric.perfLimitSizeTotal, + width = dims.width, height = dims.height, + max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; + if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { + if (width < min) { + dims.width = min; + } + if (height < min) { + dims.height = min; + } + return dims; + } + var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), + capValue = fabric.util.capValue, + x = capValue(min, limitedDims.x, max), + y = capValue(min, limitedDims.y, max); + if (width > x) { + dims.zoomX /= width / x; + dims.width = x; + dims.capped = true; + } + if (height > y) { + dims.zoomY /= height / y; + dims.height = y; + dims.capped = true; } return dims; - } - var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), - capValue = fabric.util.capValue, - x = capValue(min, limitedDims.x, max), - y = capValue(min, limitedDims.y, max); - if (width > x) { - dims.zoomX /= width / x; - dims.width = x; - dims.capped = true; - } - if (height > y) { - dims.zoomY /= height / y; - dims.height = y; - dims.capped = true; - } - return dims; - }, + }, - /** - * Return the dimension and the zoom level needed to create a cache canvas - * big enough to host the object to be cached. - * @private - * @return {Object}.x width of object to be cached - * @return {Object}.y height of object to be cached - * @return {Object}.width width of canvas - * @return {Object}.height height of canvas - * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache - */ - _getCacheCanvasDimensions: function() { - var objectScale = this.getTotalObjectScaling(), - // caculate dimensions without skewing - dim = this._getTransformedDimensions(0, 0), - neededX = dim.x * objectScale.scaleX / this.scaleX, - neededY = dim.y * objectScale.scaleY / this.scaleY; - return { - // for sure this ALIASING_LIMIT is slightly creating problem - // in situation in which the cache canvas gets an upper limit - // also objectScale contains already scaleX and scaleY - width: neededX + ALIASING_LIMIT, - height: neededY + ALIASING_LIMIT, - zoomX: objectScale.scaleX, - zoomY: objectScale.scaleY, - x: neededX, - y: neededY - }; - }, + /** + * Return the dimension and the zoom level needed to create a cache canvas + * big enough to host the object to be cached. + * @private + * @return {Object}.x width of object to be cached + * @return {Object}.y height of object to be cached + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _getCacheCanvasDimensions: function() { + var objectScale = this.getTotalObjectScaling(), + // caculate dimensions without skewing + dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }), + neededX = dim.x * objectScale.x / this.scaleX, + neededY = dim.y * objectScale.y / this.scaleY; + return { + // for sure this ALIASING_LIMIT is slightly creating problem + // in situation in which the cache canvas gets an upper limit + // also objectScale contains already scaleX and scaleY + width: neededX + ALIASING_LIMIT, + height: neededY + ALIASING_LIMIT, + zoomX: objectScale.x, + zoomY: objectScale.y, + x: neededX, + y: neededY + }; + }, - /** - * Update width and height of the canvas for cache - * returns true or false if canvas needed resize. - * @private - * @return {Boolean} true if the canvas has been resized - */ - _updateCacheCanvas: function() { - var targetCanvas = this.canvas; - if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { - var target = targetCanvas._currentTransform.target, - action = targetCanvas._currentTransform.action; - if (this === target && action.slice && action.slice(0, 5) === 'scale') { - return false; + /** + * Update width and height of the canvas for cache + * returns true or false if canvas needed resize. + * @private + * @return {Boolean} true if the canvas has been resized + */ + _updateCacheCanvas: function() { + var targetCanvas = this.canvas; + if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { + var target = targetCanvas._currentTransform.target, + action = targetCanvas._currentTransform.action; + if (this === target && action.slice && action.slice(0, 5) === 'scale') { + return false; + } } - } - var canvas = this._cacheCanvas, - dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - minCacheSize = fabric.minCacheSideLimit, - width = dims.width, height = dims.height, drawingWidth, drawingHeight, - zoomX = dims.zoomX, zoomY = dims.zoomY, - dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, - zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, - shouldRedraw = dimensionsChanged || zoomChanged, - additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; - if (dimensionsChanged) { - var canvasWidth = this._cacheCanvas.width, - canvasHeight = this._cacheCanvas.height, - sizeGrowing = width > canvasWidth || height > canvasHeight, - sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && - canvasWidth > minCacheSize && canvasHeight > minCacheSize; - shouldResizeCanvas = sizeGrowing || sizeShrinking; - if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { - additionalWidth = width * 0.1; - additionalHeight = height * 0.1; - } - } - if (this instanceof fabric.Text && this.path) { - shouldRedraw = true; - shouldResizeCanvas = true; - additionalWidth += this.getHeightOfLine(0) * this.zoomX; - additionalHeight += this.getHeightOfLine(0) * this.zoomY; - } - if (shouldRedraw) { - if (shouldResizeCanvas) { - canvas.width = Math.ceil(width + additionalWidth); - canvas.height = Math.ceil(height + additionalHeight); + var canvas = this._cacheCanvas, + dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + minCacheSize = fabric.minCacheSideLimit, + width = dims.width, height = dims.height, drawingWidth, drawingHeight, + zoomX = dims.zoomX, zoomY = dims.zoomY, + dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, + zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, + shouldRedraw = dimensionsChanged || zoomChanged, + additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; + if (dimensionsChanged) { + var canvasWidth = this._cacheCanvas.width, + canvasHeight = this._cacheCanvas.height, + sizeGrowing = width > canvasWidth || height > canvasHeight, + sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && + canvasWidth > minCacheSize && canvasHeight > minCacheSize; + shouldResizeCanvas = sizeGrowing || sizeShrinking; + if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { + additionalWidth = width * 0.1; + additionalHeight = height * 0.1; + } } - else { - this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); - this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); - } - drawingWidth = dims.x / 2; - drawingHeight = dims.y / 2; - this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; - this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; - this.cacheWidth = width; - this.cacheHeight = height; - this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); - this._cacheContext.scale(zoomX, zoomY); - this.zoomX = zoomX; - this.zoomY = zoomY; - return true; - } - return false; - }, + if (this instanceof fabric.Text && this.path) { + shouldRedraw = true; + shouldResizeCanvas = true; + additionalWidth += this.getHeightOfLine(0) * this.zoomX; + additionalHeight += this.getHeightOfLine(0) * this.zoomY; + } + if (shouldRedraw) { + if (shouldResizeCanvas) { + canvas.width = Math.ceil(width + additionalWidth); + canvas.height = Math.ceil(height + additionalHeight); + } + else { + this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); + this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); + } + drawingWidth = dims.x / 2; + drawingHeight = dims.y / 2; + this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; + this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; + this.cacheWidth = width; + this.cacheHeight = height; + this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); + this._cacheContext.scale(zoomX, zoomY); + this.zoomX = zoomX; + this.zoomY = zoomY; + return true; + } + return false; + }, - /** - * Sets object's properties from options - * @param {Object} [options] Options object - */ - setOptions: function(options) { - this._setOptions(options); - this._initGradient(options.fill, 'fill'); - this._initGradient(options.stroke, 'stroke'); - this._initPattern(options.fill, 'fill'); - this._initPattern(options.stroke, 'stroke'); - }, + /** + * Sets object's properties from options + * @param {Object} [options] Options object + */ + setOptions: function(options) { + this._setOptions(options); + }, - /** - * Transforms context when rendering an object - * @param {CanvasRenderingContext2D} ctx Context - */ - transform: function(ctx) { - var needFullTransform = (this.group && !this.group._transformDone) || - (this.group && this.canvas && ctx === this.canvas.contextTop); - var m = this.calcTransformMatrix(!needFullTransform); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - }, + /** + * Transforms context when rendering an object + * @param {CanvasRenderingContext2D} ctx Context + */ + transform: function(ctx) { + var needFullTransform = (this.group && !this.group._transformDone) || + (this.group && this.canvas && ctx === this.canvas.contextTop); + var m = this.calcTransformMatrix(!needFullTransform); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + }, - /** - * Returns an object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - - object = { - type: this.type, - version: fabric.version, - originX: this.originX, - originY: this.originY, - left: toFixed(this.left, NUM_FRACTION_DIGITS), - top: toFixed(this.top, NUM_FRACTION_DIGITS), - width: toFixed(this.width, NUM_FRACTION_DIGITS), - height: toFixed(this.height, NUM_FRACTION_DIGITS), - fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, - stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, - strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), - strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, - strokeLineCap: this.strokeLineCap, - strokeDashOffset: this.strokeDashOffset, - strokeLineJoin: this.strokeLineJoin, - strokeUniform: this.strokeUniform, - strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), - scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), - scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), - angle: toFixed(this.angle, NUM_FRACTION_DIGITS), - flipX: this.flipX, - flipY: this.flipY, - opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), - shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, - visible: this.visible, - backgroundColor: this.backgroundColor, - fillRule: this.fillRule, - paintFirst: this.paintFirst, - globalCompositeOperation: this.globalCompositeOperation, - skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), - skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), - }; + /** + * Returns an object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + + object = { + type: this.type, + version: fabric.version, + originX: this.originX, + originY: this.originY, + left: toFixed(this.left, NUM_FRACTION_DIGITS), + top: toFixed(this.top, NUM_FRACTION_DIGITS), + width: toFixed(this.width, NUM_FRACTION_DIGITS), + height: toFixed(this.height, NUM_FRACTION_DIGITS), + fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, + stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, + strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), + strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, + strokeLineCap: this.strokeLineCap, + strokeDashOffset: this.strokeDashOffset, + strokeLineJoin: this.strokeLineJoin, + strokeUniform: this.strokeUniform, + strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), + scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), + scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), + angle: toFixed(this.angle, NUM_FRACTION_DIGITS), + flipX: this.flipX, + flipY: this.flipY, + opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), + shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, + visible: this.visible, + backgroundColor: this.backgroundColor, + fillRule: this.fillRule, + paintFirst: this.paintFirst, + globalCompositeOperation: this.globalCompositeOperation, + skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), + skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), + }; + + if (this.clipPath && !this.clipPath.excludeFromExport) { + object.clipPath = this.clipPath.toObject(propertiesToInclude); + object.clipPath.inverted = this.clipPath.inverted; + object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; + } + + fabric.util.populateWithProperties(this, object, propertiesToInclude); + if (!this.includeDefaultValues) { + object = this._removeDefaultValues(object); + } + + return object; + }, - if (this.clipPath && !this.clipPath.excludeFromExport) { - object.clipPath = this.clipPath.toObject(propertiesToInclude); - object.clipPath.inverted = this.clipPath.inverted; - object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; - } + /** + * Returns (dataless) object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + // will be overwritten by subclasses + return this.toObject(propertiesToInclude); + }, - fabric.util.populateWithProperties(this, object, propertiesToInclude); - if (!this.includeDefaultValues) { - object = this._removeDefaultValues(object); - } + /** + * @private + * @param {Object} object + */ + _removeDefaultValues: function(object) { + var prototype = fabric.util.getKlass(object.type).prototype; + Object.keys(object).forEach(function(prop) { + if (prop === 'left' || prop === 'top' || prop === 'type') { + return; + } + if (object[prop] === prototype[prop]) { + delete object[prop]; + } + // basically a check for [] === [] + if (Array.isArray(object[prop]) && Array.isArray(prototype[prop]) + && object[prop].length === 0 && prototype[prop].length === 0) { + delete object[prop]; + } + }); - return object; - }, + return object; + }, - /** - * Returns (dataless) object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toDatalessObject: function(propertiesToInclude) { - // will be overwritten by subclasses - return this.toObject(propertiesToInclude); - }, + /** + * Returns a string representation of an instance + * @return {String} + */ + toString: function() { + return '#'; + }, - /** - * @private - * @param {Object} object - */ - _removeDefaultValues: function(object) { - var prototype = fabric.util.getKlass(object.type).prototype, - stateProperties = prototype.stateProperties; - stateProperties.forEach(function(prop) { - if (prop === 'left' || prop === 'top') { - return; - } - if (object[prop] === prototype[prop]) { - delete object[prop]; - } - var isArray = Object.prototype.toString.call(object[prop]) === '[object Array]' && - Object.prototype.toString.call(prototype[prop]) === '[object Array]'; + /** + * Return the object scale factor counting also the group scaling + * @return {fabric.Point} + */ + getObjectScaling: function() { + // if the object is a top level one, on the canvas, we go for simple aritmetic + // otherwise the complex method with angles will return approximations and decimals + // and will likely kill the cache when not needed + // https://github.com/fabricjs/fabric.js/issues/7157 + if (!this.group) { + return new fabric.Point(Math.abs(this.scaleX), Math.abs(this.scaleY)); + } + // if we are inside a group total zoom calculation is complex, we defer to generic matrices + var options = fabric.util.qrDecompose(this.calcTransformMatrix()); + return new fabric.Point(Math.abs(options.scaleX), Math.abs(options.scaleY)); + }, + + /** + * Return the object scale factor counting also the group scaling, zoom and retina + * @return {Object} object with scaleX and scaleY properties + */ + getTotalObjectScaling: function() { + var scale = this.getObjectScaling(); + if (this.canvas) { + var zoom = this.canvas.getZoom(); + var retina = this.canvas.getRetinaScaling(); + scale.scalarMultiplyEquals(zoom * retina); + } + return scale; + }, - // basically a check for [] === [] - if (isArray && object[prop].length === 0 && prototype[prop].length === 0) { - delete object[prop]; + /** + * Return the object opacity counting also the group property + * @return {Number} + */ + getObjectOpacity: function() { + var opacity = this.opacity; + if (this.group) { + opacity *= this.group.getObjectOpacity(); } - }); + return opacity; + }, - return object; - }, + /** + * Returns the object angle relative to canvas counting also the group property + * @returns {number} + */ + getTotalAngle: function () { + return this.group ? + fabric.util.qrDecompose(this.calcTransformMatrix()).angle : + this.angle; + }, - /** - * Returns a string representation of an instance - * @return {String} - */ - toString: function() { - return '#'; - }, + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Object} thisArg + */ + _set: function(key, value) { + var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), + isChanged = this[key] !== value, groupNeedsUpdate = false; - /** - * Return the object scale factor counting also the group scaling - * @return {Object} object with scaleX and scaleY properties - */ - getObjectScaling: function() { - // if the object is a top level one, on the canvas, we go for simple aritmetic - // otherwise the complex method with angles will return approximations and decimals - // and will likely kill the cache when not needed - // https://github.com/fabricjs/fabric.js/issues/7157 - if (!this.group) { - return { - scaleX: this.scaleX, - scaleY: this.scaleY, - }; - } - // if we are inside a group total zoom calculation is complex, we defer to generic matrices - var options = fabric.util.qrDecompose(this.calcTransformMatrix()); - return { scaleX: Math.abs(options.scaleX), scaleY: Math.abs(options.scaleY) }; - }, + if (shouldConstrainValue) { + value = this._constrainScale(value); + } + if (key === 'scaleX' && value < 0) { + this.flipX = !this.flipX; + value *= -1; + } + else if (key === 'scaleY' && value < 0) { + this.flipY = !this.flipY; + value *= -1; + } + else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { + value = new fabric.Shadow(value); + } + else if (key === 'dirty' && this.group) { + this.group.set('dirty', value); + } - /** - * Return the object scale factor counting also the group scaling, zoom and retina - * @return {Object} object with scaleX and scaleY properties - */ - getTotalObjectScaling: function() { - var scale = this.getObjectScaling(), scaleX = scale.scaleX, scaleY = scale.scaleY; - if (this.canvas) { - var zoom = this.canvas.getZoom(); - var retina = this.canvas.getRetinaScaling(); - scaleX *= zoom * retina; - scaleY *= zoom * retina; - } - return { scaleX: scaleX, scaleY: scaleY }; - }, + this[key] = value; - /** - * Return the object opacity counting also the group property - * @return {Number} - */ - getObjectOpacity: function() { - var opacity = this.opacity; - if (this.group) { - opacity *= this.group.getObjectOpacity(); - } - return opacity; - }, + if (isChanged) { + groupNeedsUpdate = this.group && this.group.isOnACache(); + if (this.cacheProperties.indexOf(key) > -1) { + this.dirty = true; + groupNeedsUpdate && this.group.set('dirty', true); + } + else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { + this.group.set('dirty', true); + } + } + return this; + }, - /** - * @private - * @param {String} key - * @param {*} value - * @return {fabric.Object} thisArg - */ - _set: function(key, value) { - var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), - isChanged = this[key] !== value, groupNeedsUpdate = false; + /** + * Retrieves viewportTransform from Object's canvas if possible + * @method getViewportTransform + * @memberOf fabric.Object.prototype + * @return {Array} + */ + getViewportTransform: function() { + if (this.canvas && this.canvas.viewportTransform) { + return this.canvas.viewportTransform; + } + return fabric.iMatrix.concat(); + }, - if (shouldConstrainValue) { - value = this._constrainScale(value); - } - if (key === 'scaleX' && value < 0) { - this.flipX = !this.flipX; - value *= -1; - } - else if (key === 'scaleY' && value < 0) { - this.flipY = !this.flipY; - value *= -1; - } - else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { - value = new fabric.Shadow(value); - } - else if (key === 'dirty' && this.group) { - this.group.set('dirty', value); - } + /* + * @private + * return if the object would be visible in rendering + * @memberOf fabric.Object.prototype + * @return {Boolean} + */ + isNotVisible: function() { + return this.opacity === 0 || + (!this.width && !this.height && this.strokeWidth === 0) || + !this.visible; + }, - this[key] = value; + /** + * Renders an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + // do not render if width/height are zeros or object is not visible + if (this.isNotVisible()) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + ctx.save(); + this._setupCompositeOperation(ctx); + this.drawSelectionBackground(ctx); + this.transform(ctx); + this._setOpacity(ctx); + this._setShadow(ctx, this); + if (this.shouldCache()) { + this.renderCache(); + this.drawCacheOnCanvas(ctx); + } + else { + this._removeCacheCanvas(); + this.dirty = false; + this.drawObject(ctx); + if (this.objectCaching && this.statefullCache) { + this.saveState({ propertySet: 'cacheProperties' }); + } + } + ctx.restore(); + }, - if (isChanged) { - groupNeedsUpdate = this.group && this.group.isOnACache(); - if (this.cacheProperties.indexOf(key) > -1) { - this.dirty = true; - groupNeedsUpdate && this.group.set('dirty', true); + renderCache: function(options) { + options = options || {}; + if (!this._cacheCanvas || !this._cacheContext) { + this._createCacheCanvas(); } - else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { - this.group.set('dirty', true); + if (this.isCacheDirty()) { + this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); + this.drawObject(this._cacheContext, options.forClipping); + this.dirty = false; } - } - return this; - }, + }, - /** - * This callback function is called by the parent group of an object every - * time a non-delegated property changes on the group. It is passed the key - * and value as parameters. Not adding in this function's signature to avoid - * Travis build error about unused variables. - */ - setOnGroup: function() { - // implemented by sub-classes, as needed. - }, + /** + * Remove cacheCanvas and its dimensions from the objects + */ + _removeCacheCanvas: function() { + this._cacheCanvas = null; + this._cacheContext = null; + this.cacheWidth = 0; + this.cacheHeight = 0; + }, - /** - * Retrieves viewportTransform from Object's canvas if possible - * @method getViewportTransform - * @memberOf fabric.Object.prototype - * @return {Array} - */ - getViewportTransform: function() { - if (this.canvas && this.canvas.viewportTransform) { - return this.canvas.viewportTransform; - } - return fabric.iMatrix.concat(); - }, + /** + * return true if the object will draw a stroke + * Does not consider text styles. This is just a shortcut used at rendering time + * We want it to be an approximation and be fast. + * wrote to avoid extra caching, it has to return true when stroke happens, + * can guess when it will not happen at 100% chance, does not matter if it misses + * some use case where the stroke is invisible. + * @since 3.0.0 + * @returns Boolean + */ + hasStroke: function() { + return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; + }, - /* - * @private - * return if the object would be visible in rendering - * @memberOf fabric.Object.prototype - * @return {Boolean} - */ - isNotVisible: function() { - return this.opacity === 0 || - (!this.width && !this.height && this.strokeWidth === 0) || - !this.visible; - }, + /** + * return true if the object will draw a fill + * Does not consider text styles. This is just a shortcut used at rendering time + * We want it to be an approximation and be fast. + * wrote to avoid extra caching, it has to return true when fill happens, + * can guess when it will not happen at 100% chance, does not matter if it misses + * some use case where the fill is invisible. + * @since 3.0.0 + * @returns Boolean + */ + hasFill: function() { + return this.fill && this.fill !== 'transparent'; + }, - /** - * Renders an object on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - render: function(ctx) { - // do not render if width/height are zeros or object is not visible - if (this.isNotVisible()) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - ctx.save(); - this._setupCompositeOperation(ctx); - this.drawSelectionBackground(ctx); - this.transform(ctx); - this._setOpacity(ctx); - this._setShadow(ctx, this); - if (this.shouldCache()) { - this.renderCache(); - this.drawCacheOnCanvas(ctx); - } - else { - this._removeCacheCanvas(); - this.dirty = false; - this.drawObject(ctx); - if (this.objectCaching && this.statefullCache) { - this.saveState({ propertySet: 'cacheProperties' }); + /** + * When set to `true`, force the object to have its own cache, even if it is inside a group + * it may be needed when your object behave in a particular way on the cache and always needs + * its own isolated canvas to render correctly. + * Created to be overridden + * since 1.7.12 + * @returns Boolean + */ + needsItsOwnCache: function() { + if (this.paintFirst === 'stroke' && + this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') { + return true; } - } - ctx.restore(); - }, + if (this.clipPath) { + return true; + } + return false; + }, - renderCache: function(options) { - options = options || {}; - if (!this._cacheCanvas) { - this._createCacheCanvas(); - } - if (this.isCacheDirty()) { - this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); - this.drawObject(this._cacheContext, options.forClipping); - this.dirty = false; - } - }, - - /** - * Remove cacheCanvas and its dimensions from the objects - */ - _removeCacheCanvas: function() { - this._cacheCanvas = null; - this.cacheWidth = 0; - this.cacheHeight = 0; - }, + /** + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * Read as: cache if is needed, or if the feature is enabled but we are not already caching. + * @return {Boolean} + */ + shouldCache: function() { + this.ownCaching = this.needsItsOwnCache() || ( + this.objectCaching && + (!this.group || !this.group.isOnACache()) + ); + return this.ownCaching; + }, - /** - * return true if the object will draw a stroke - * Does not consider text styles. This is just a shortcut used at rendering time - * We want it to be an approximation and be fast. - * wrote to avoid extra caching, it has to return true when stroke happens, - * can guess when it will not happen at 100% chance, does not matter if it misses - * some use case where the stroke is invisible. - * @since 3.0.0 - * @returns Boolean - */ - hasStroke: function() { - return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; - }, + /** + * Check if this object or a child object will cast a shadow + * used by Group.shouldCache to know if child has a shadow recursively + * @return {Boolean} + * @deprecated + */ + willDrawShadow: function() { + return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); + }, - /** - * return true if the object will draw a fill - * Does not consider text styles. This is just a shortcut used at rendering time - * We want it to be an approximation and be fast. - * wrote to avoid extra caching, it has to return true when fill happens, - * can guess when it will not happen at 100% chance, does not matter if it misses - * some use case where the fill is invisible. - * @since 3.0.0 - * @returns Boolean - */ - hasFill: function() { - return this.fill && this.fill !== 'transparent'; - }, + /** + * Execute the drawing operation for an object clipPath + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {fabric.Object} clipPath + */ + drawClipPathOnCache: function(ctx, clipPath) { + ctx.save(); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4 + if (clipPath.inverted) { + ctx.globalCompositeOperation = 'destination-out'; + } + else { + ctx.globalCompositeOperation = 'destination-in'; + } + //ctx.scale(1 / 2, 1 / 2); + if (clipPath.absolutePositioned) { + var m = fabric.util.invertTransform(this.calcTransformMatrix()); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + } + clipPath.transform(ctx); + ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); + ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); + ctx.restore(); + }, - /** - * When set to `true`, force the object to have its own cache, even if it is inside a group - * it may be needed when your object behave in a particular way on the cache and always needs - * its own isolated canvas to render correctly. - * Created to be overridden - * since 1.7.12 - * @returns Boolean - */ - needsItsOwnCache: function() { - if (this.paintFirst === 'stroke' && - this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') { - return true; - } - if (this.clipPath) { - return true; - } - return false; - }, + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject: function(ctx, forClipping) { + var originalFill = this.fill, originalStroke = this.stroke; + if (forClipping) { + this.fill = 'black'; + this.stroke = ''; + this._setClippingProperties(ctx); + } + else { + this._renderBackground(ctx); + } + this._render(ctx); + this._drawClipPath(ctx, this.clipPath); + this.fill = originalFill; + this.stroke = originalStroke; + }, - /** - * Decide if the object should cache or not. Create its own cache level - * objectCaching is a global flag, wins over everything - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group outside is cached. - * Read as: cache if is needed, or if the feature is enabled but we are not already caching. - * @return {Boolean} - */ - shouldCache: function() { - this.ownCaching = this.needsItsOwnCache() || ( - this.objectCaching && - (!this.group || !this.group.isOnACache()) - ); - return this.ownCaching; - }, + /** + * Prepare clipPath state and cache and draw it on instance's cache + * @param {CanvasRenderingContext2D} ctx + * @param {fabric.Object} clipPath + */ + _drawClipPath: function (ctx, clipPath) { + if (!clipPath) { return; } + // needed to setup a couple of variables + // path canvas gets overridden with this one. + // TODO find a better solution? + clipPath._set('canvas', this.canvas); + clipPath.shouldCache(); + clipPath._transformDone = true; + clipPath.renderCache({ forClipping: true }); + this.drawClipPathOnCache(ctx, clipPath); + }, - /** - * Check if this object or a child object will cast a shadow - * used by Group.shouldCache to know if child has a shadow recursively - * @return {Boolean} - */ - willDrawShadow: function() { - return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); - }, + /** + * Paint the cached copy of the object on the target context. + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawCacheOnCanvas: function(ctx) { + ctx.scale(1 / this.zoomX, 1 / this.zoomY); + ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); + }, - /** - * Execute the drawing operation for an object clipPath - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {fabric.Object} clipPath - */ - drawClipPathOnCache: function(ctx, clipPath) { - ctx.save(); - // DEBUG: uncomment this line, comment the following - // ctx.globalAlpha = 0.4 - if (clipPath.inverted) { - ctx.globalCompositeOperation = 'destination-out'; - } - else { - ctx.globalCompositeOperation = 'destination-in'; - } - //ctx.scale(1 / 2, 1 / 2); - if (clipPath.absolutePositioned) { - var m = fabric.util.invertTransform(this.calcTransformMatrix()); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - } - clipPath.transform(ctx); - ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); - ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); - ctx.restore(); - }, + /** + * Check if cache is dirty + * @param {Boolean} skipCanvas skip canvas checks because this object is painted + * on parent canvas. + */ + isCacheDirty: function(skipCanvas) { + if (this.isNotVisible()) { + return false; + } + if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) { + // in this case the context is already cleared. + return true; + } + else { + if (this.dirty || + (this.clipPath && this.clipPath.absolutePositioned) || + (this.statefullCache && this.hasStateChanged('cacheProperties')) + ) { + if (this._cacheCanvas && this._cacheContext && !skipCanvas) { + var width = this.cacheWidth / this.zoomX; + var height = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-width / 2, -height / 2, width, height); + } + return true; + } + } + return false; + }, - /** - * Execute the drawing operation for an object on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawObject: function(ctx, forClipping) { - var originalFill = this.fill, originalStroke = this.stroke; - if (forClipping) { - this.fill = 'black'; - this.stroke = ''; - this._setClippingProperties(ctx); - } - else { - this._renderBackground(ctx); - } - this._render(ctx); - this._drawClipPath(ctx, this.clipPath); - this.fill = originalFill; - this.stroke = originalStroke; - }, + /** + * Draws a background for the object big as its untransformed dimensions + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderBackground: function(ctx) { + if (!this.backgroundColor) { + return; + } + var dim = this._getNonTransformedDimensions(); + ctx.fillStyle = this.backgroundColor; - /** - * Prepare clipPath state and cache and draw it on instance's cache - * @param {CanvasRenderingContext2D} ctx - * @param {fabric.Object} clipPath - */ - _drawClipPath: function (ctx, clipPath) { - if (!clipPath) { return; } - // needed to setup a couple of variables - // path canvas gets overridden with this one. - // TODO find a better solution? - clipPath.canvas = this.canvas; - clipPath.shouldCache(); - clipPath._transformDone = true; - clipPath.renderCache({ forClipping: true }); - this.drawClipPathOnCache(ctx, clipPath); - }, + ctx.fillRect( + -dim.x / 2, + -dim.y / 2, + dim.x, + dim.y + ); + // if there is background color no other shadows + // should be casted + this._removeShadow(ctx); + }, - /** - * Paint the cached copy of the object on the target context. - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawCacheOnCanvas: function(ctx) { - ctx.scale(1 / this.zoomX, 1 / this.zoomY); - ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _setOpacity: function(ctx) { + if (this.group && !this.group._transformDone) { + ctx.globalAlpha = this.getObjectOpacity(); + } + else { + ctx.globalAlpha *= this.opacity; + } + }, - /** - * Check if cache is dirty - * @param {Boolean} skipCanvas skip canvas checks because this object is painted - * on parent canvas. - */ - isCacheDirty: function(skipCanvas) { - if (this.isNotVisible()) { - return false; - } - if (this._cacheCanvas && !skipCanvas && this._updateCacheCanvas()) { - // in this case the context is already cleared. - return true; - } - else { - if (this.dirty || - (this.clipPath && this.clipPath.absolutePositioned) || - (this.statefullCache && this.hasStateChanged('cacheProperties')) - ) { - if (this._cacheCanvas && !skipCanvas) { - var width = this.cacheWidth / this.zoomX; - var height = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-width / 2, -height / 2, width, height); + _setStrokeStyles: function(ctx, decl) { + var stroke = decl.stroke; + if (stroke) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = decl.strokeLineCap; + ctx.lineDashOffset = decl.strokeDashOffset; + ctx.lineJoin = decl.strokeLineJoin; + ctx.miterLimit = decl.strokeMiterLimit; + if (stroke.toLive) { + if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + this._applyPatternForTransformedGradient(ctx, stroke); + } + else { + // is a simple gradient or pattern + ctx.strokeStyle = stroke.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, stroke); + } + } + else { + // is a color + ctx.strokeStyle = decl.stroke; } - return true; } - } - return false; - }, - - /** - * Draws a background for the object big as its untransformed dimensions - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderBackground: function(ctx) { - if (!this.backgroundColor) { - return; - } - var dim = this._getNonTransformedDimensions(); - ctx.fillStyle = this.backgroundColor; - - ctx.fillRect( - -dim.x / 2, - -dim.y / 2, - dim.x, - dim.y - ); - // if there is background color no other shadows - // should be casted - this._removeShadow(ctx); - }, - - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _setOpacity: function(ctx) { - if (this.group && !this.group._transformDone) { - ctx.globalAlpha = this.getObjectOpacity(); - } - else { - ctx.globalAlpha *= this.opacity; - } - }, + }, - _setStrokeStyles: function(ctx, decl) { - var stroke = decl.stroke; - if (stroke) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = decl.strokeLineCap; - ctx.lineDashOffset = decl.strokeDashOffset; - ctx.lineJoin = decl.strokeLineJoin; - ctx.miterLimit = decl.strokeMiterLimit; - if (stroke.toLive) { - if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - this._applyPatternForTransformedGradient(ctx, stroke); + _setFillStyles: function(ctx, decl) { + var fill = decl.fill; + if (fill) { + if (fill.toLive) { + ctx.fillStyle = fill.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, decl.fill); } else { - // is a simple gradient or pattern - ctx.strokeStyle = stroke.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, stroke); + ctx.fillStyle = fill; } } - else { - // is a color - ctx.strokeStyle = decl.stroke; + }, + + _setClippingProperties: function(ctx) { + ctx.globalAlpha = 1; + ctx.strokeStyle = 'transparent'; + ctx.fillStyle = '#000000'; + }, + + /** + * @private + * Sets line dash + * @param {CanvasRenderingContext2D} ctx Context to set the dash line on + * @param {Array} dashArray array representing dashes + */ + _setLineDash: function(ctx, dashArray) { + if (!dashArray || dashArray.length === 0) { + return; } - } - }, + // Spec requires the concatenation of two copies the dash list when the number of elements is odd + if (1 & dashArray.length) { + dashArray.push.apply(dashArray, dashArray); + } + ctx.setLineDash(dashArray); + }, - _setFillStyles: function(ctx, decl) { - var fill = decl.fill; - if (fill) { - if (fill.toLive) { - ctx.fillStyle = fill.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, decl.fill); + /** + * Renders controls and borders for the object + * the context here is not transformed + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [styleOverride] properties to override the object style + */ + _renderControls: function(ctx, styleOverride) { + var vpt = this.getViewportTransform(), + matrix = this.calcTransformMatrix(), + options, drawBorders, drawControls; + styleOverride = styleOverride || { }; + drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; + drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; + matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); + options = fabric.util.qrDecompose(matrix); + ctx.save(); + ctx.translate(options.translateX, options.translateY); + ctx.lineWidth = 1 * this.borderScaleFactor; + if (!this.group) { + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; } - else { - ctx.fillStyle = fill; + if (this.flipX) { + options.angle -= 180; } - } - }, + ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); + drawBorders && this.drawBorders(ctx, options, styleOverride); + drawControls && this.drawControls(ctx, styleOverride); + ctx.restore(); + }, - _setClippingProperties: function(ctx) { - ctx.globalAlpha = 1; - ctx.strokeStyle = 'transparent'; - ctx.fillStyle = '#000000'; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _setShadow: function(ctx) { + if (!this.shadow) { + return; + } - /** - * @private - * Sets line dash - * @param {CanvasRenderingContext2D} ctx Context to set the dash line on - * @param {Array} dashArray array representing dashes - */ - _setLineDash: function(ctx, dashArray) { - if (!dashArray || dashArray.length === 0) { - return; - } - // Spec requires the concatenation of two copies the dash list when the number of elements is odd - if (1 & dashArray.length) { - dashArray.push.apply(dashArray, dashArray); - } - ctx.setLineDash(dashArray); - }, + var shadow = this.shadow, canvas = this.canvas, + multX = (canvas && canvas.viewportTransform[0]) || 1, + multY = (canvas && canvas.viewportTransform[3]) || 1, + scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); + if (canvas && canvas._isRetinaScaling()) { + multX *= fabric.devicePixelRatio; + multY *= fabric.devicePixelRatio; + } + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * + (multX + multY) * (scaling.x + scaling.y) / 4; + ctx.shadowOffsetX = shadow.offsetX * multX * scaling.x; + ctx.shadowOffsetY = shadow.offsetY * multY * scaling.y; + }, - /** - * Renders controls and borders for the object - * the context here is not transformed - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} [styleOverride] properties to override the object style - */ - _renderControls: function(ctx, styleOverride) { - var vpt = this.getViewportTransform(), - matrix = this.calcTransformMatrix(), - options, drawBorders, drawControls; - styleOverride = styleOverride || { }; - drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; - drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; - matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); - options = fabric.util.qrDecompose(matrix); - ctx.save(); - ctx.translate(options.translateX, options.translateY); - ctx.lineWidth = 1 * this.borderScaleFactor; - if (!this.group) { - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; - } - if (this.flipX) { - options.angle -= 180; - } - ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); - if (styleOverride.forActiveSelection || this.group) { - drawBorders && this.drawBordersInGroup(ctx, options, styleOverride); - } - else { - drawBorders && this.drawBorders(ctx, styleOverride); - } - drawControls && this.drawControls(ctx, styleOverride); - ctx.restore(); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _removeShadow: function(ctx) { + if (!this.shadow) { + return; + } - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _setShadow: function(ctx) { - if (!this.shadow) { - return; - } + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, - var shadow = this.shadow, canvas = this.canvas, scaling, - multX = (canvas && canvas.viewportTransform[0]) || 1, - multY = (canvas && canvas.viewportTransform[3]) || 1; - if (shadow.nonScaling) { - scaling = { scaleX: 1, scaleY: 1 }; - } - else { - scaling = this.getObjectScaling(); - } - if (canvas && canvas._isRetinaScaling()) { - multX *= fabric.devicePixelRatio; - multY *= fabric.devicePixelRatio; - } - ctx.shadowColor = shadow.color; - ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * - (multX + multY) * (scaling.scaleX + scaling.scaleY) / 4; - ctx.shadowOffsetX = shadow.offsetX * multX * scaling.scaleX; - ctx.shadowOffsetY = shadow.offsetY * multY * scaling.scaleY; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} filler fabric.Pattern or fabric.Gradient + * @return {Object} offset.offsetX offset for text rendering + * @return {Object} offset.offsetY offset for text rendering + */ + _applyPatternGradientTransform: function(ctx, filler) { + if (!filler || !filler.toLive) { + return { offsetX: 0, offsetY: 0 }; + } + var t = filler.gradientTransform || filler.patternTransform; + var offsetX = -this.width / 2 + filler.offsetX || 0, + offsetY = -this.height / 2 + filler.offsetY || 0; - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _removeShadow: function(ctx) { - if (!this.shadow) { - return; - } + if (filler.gradientUnits === 'percentage') { + ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); + } + else { + ctx.transform(1, 0, 0, 1, offsetX, offsetY); + } + if (t) { + ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); + } + return { offsetX: offsetX, offsetY: offsetY }; + }, - ctx.shadowColor = ''; - ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderPaintInOrder: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderStroke(ctx); + this._renderFill(ctx); + } + else { + this._renderFill(ctx); + this._renderStroke(ctx); + } + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} filler fabric.Pattern or fabric.Gradient - * @return {Object} offset.offsetX offset for text rendering - * @return {Object} offset.offsetY offset for text rendering - */ - _applyPatternGradientTransform: function(ctx, filler) { - if (!filler || !filler.toLive) { - return { offsetX: 0, offsetY: 0 }; - } - var t = filler.gradientTransform || filler.patternTransform; - var offsetX = -this.width / 2 + filler.offsetX || 0, - offsetY = -this.height / 2 + filler.offsetY || 0; + /** + * @private + * function that actually render something on the context. + * empty here to allow Obects to work on tests to benchmark fabric functionalites + * not related to rendering + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(/* ctx */) { - if (filler.gradientUnits === 'percentage') { - ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); - } - else { - ctx.transform(1, 0, 0, 1, offsetX, offsetY); - } - if (t) { - ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); - } - return { offsetX: offsetX, offsetY: offsetY }; - }, + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderPaintInOrder: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderStroke(ctx); - this._renderFill(ctx); - } - else { - this._renderFill(ctx); - this._renderStroke(ctx); - } - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderFill: function(ctx) { + if (!this.fill) { + return; + } - /** - * @private - * function that actually render something on the context. - * empty here to allow Obects to work on tests to benchmark fabric functionalites - * not related to rendering - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(/* ctx */) { + ctx.save(); + this._setFillStyles(ctx, this); + if (this.fillRule === 'evenodd') { + ctx.fill('evenodd'); + } + else { + ctx.fill(); + } + ctx.restore(); + }, - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderStroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderFill: function(ctx) { - if (!this.fill) { - return; - } + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } - ctx.save(); - this._setFillStyles(ctx, this); - if (this.fillRule === 'evenodd') { - ctx.fill('evenodd'); - } - else { - ctx.fill(); - } - ctx.restore(); - }, + ctx.save(); + if (this.strokeUniform) { + var scaling = this.getObjectScaling(); + ctx.scale(1 / scaling.x, 1 / scaling.y); + } + this._setLineDash(ctx, this.strokeDashArray); + this._setStrokeStyles(ctx, this); + ctx.stroke(); + ctx.restore(); + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderStroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } + /** + * This function try to patch the missing gradientTransform on canvas gradients. + * transforming a context to transform the gradient, is going to transform the stroke too. + * we want to transform the gradient but not the stroke operation, so we create + * a transformed gradient on a pattern and then we use the pattern instead of the gradient. + * this method has drwabacks: is slow, is in low resolution, needs a patch for when the size + * is limited. + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {fabric.Gradient} filler a fabric gradient instance + */ + _applyPatternForTransformedGradient: function(ctx, filler) { + var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), + width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.scale( + dims.zoomX / this.scaleX / retinaScaling, + dims.zoomY / this.scaleY / retinaScaling + ); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fillStyle = filler.toLive(ctx); + pCtx.fill(); + ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); + ctx.scale( + retinaScaling * this.scaleX / dims.zoomX, + retinaScaling * this.scaleY / dims.zoomY + ); + ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); + }, - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); - } + /** + * This function is an helper for svg import. it returns the center of the object in the svg + * untransformed coordinates + * @private + * @return {Object} center point from element coordinates + */ + _findCenterFromElement: function() { + return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; + }, - ctx.save(); - if (this.strokeUniform && this.group) { - var scaling = this.getObjectScaling(); - ctx.scale(1 / scaling.scaleX, 1 / scaling.scaleY); - } - else if (this.strokeUniform) { - ctx.scale(1 / this.scaleX, 1 / this.scaleY); - } - this._setLineDash(ctx, this.strokeDashArray); - this._setStrokeStyles(ctx, this); - ctx.stroke(); - ctx.restore(); - }, + /** + * This function is an helper for svg import. it decompose the transformMatrix + * and assign properties to object. + * untransformed coordinates + * @private + * @chainable + */ + _assignTransformMatrixProps: function() { + if (this.transformMatrix) { + var options = fabric.util.qrDecompose(this.transformMatrix); + this.flipX = false; + this.flipY = false; + this.set('scaleX', options.scaleX); + this.set('scaleY', options.scaleY); + this.angle = options.angle; + this.skewX = options.skewX; + this.skewY = 0; + } + }, - /** - * This function try to patch the missing gradientTransform on canvas gradients. - * transforming a context to transform the gradient, is going to transform the stroke too. - * we want to transform the gradient but not the stroke operation, so we create - * a transformed gradient on a pattern and then we use the pattern instead of the gradient. - * this method has drwabacks: is slow, is in low resolution, needs a patch for when the size - * is limited. - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {fabric.Gradient} filler a fabric gradient instance - */ - _applyPatternForTransformedGradient: function(ctx, filler) { - var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), - width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.scale( - dims.zoomX / this.scaleX / retinaScaling, - dims.zoomY / this.scaleY / retinaScaling - ); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fillStyle = filler.toLive(ctx); - pCtx.fill(); - ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); - ctx.scale( - retinaScaling * this.scaleX / dims.zoomX, - retinaScaling * this.scaleY / dims.zoomY - ); - ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); - }, + /** + * This function is an helper for svg import. it removes the transform matrix + * and set to object properties that fabricjs can handle + * @private + * @param {Object} preserveAspectRatioOptions + * @return {thisArg} + */ + _removeTransformMatrix: function(preserveAspectRatioOptions) { + var center = this._findCenterFromElement(); + if (this.transformMatrix) { + this._assignTransformMatrixProps(); + center = fabric.util.transformPoint(center, this.transformMatrix); + } + this.transformMatrix = null; + if (preserveAspectRatioOptions) { + this.scaleX *= preserveAspectRatioOptions.scaleX; + this.scaleY *= preserveAspectRatioOptions.scaleY; + this.cropX = preserveAspectRatioOptions.cropX; + this.cropY = preserveAspectRatioOptions.cropY; + center.x += preserveAspectRatioOptions.offsetLeft; + center.y += preserveAspectRatioOptions.offsetTop; + this.width = preserveAspectRatioOptions.width; + this.height = preserveAspectRatioOptions.height; + } + this.setPositionByOrigin(center, 'center', 'center'); + }, - /** - * This function is an helper for svg import. it returns the center of the object in the svg - * untransformed coordinates - * @private - * @return {Object} center point from element coordinates - */ - _findCenterFromElement: function() { - return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; - }, + /** + * Clones an instance. + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @returns {Promise} + */ + clone: function(propertiesToInclude) { + var objectForm = this.toObject(propertiesToInclude); + return this.constructor.fromObject(objectForm); + }, - /** - * This function is an helper for svg import. it decompose the transformMatrix - * and assign properties to object. - * untransformed coordinates - * @private - * @chainable - */ - _assignTransformMatrixProps: function() { - if (this.transformMatrix) { - var options = fabric.util.qrDecompose(this.transformMatrix); - this.flipX = false; - this.flipY = false; - this.set('scaleX', options.scaleX); - this.set('scaleY', options.scaleY); - this.angle = options.angle; - this.skewX = options.skewX; - this.skewY = 0; - } - }, + /** + * Creates an instance of fabric.Image out of an object + * makes use of toCanvasElement. + * Once this method was based on toDataUrl and loadImage, so it also had a quality + * and format option. toCanvasElement is faster and produce no loss of quality. + * If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. + * toCanvasElement and then toBlob from the obtained canvas is also a good option. + * @param {Object} [options] for clone as image, passed to toDataURL + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {fabric.Image} Object cloned as image. + */ + cloneAsImage: function(options) { + var canvasEl = this.toCanvasElement(options); + return new fabric.Image(canvasEl); + }, - /** - * This function is an helper for svg import. it removes the transform matrix - * and set to object properties that fabricjs can handle - * @private - * @param {Object} preserveAspectRatioOptions - * @return {thisArg} - */ - _removeTransformMatrix: function(preserveAspectRatioOptions) { - var center = this._findCenterFromElement(); - if (this.transformMatrix) { - this._assignTransformMatrixProps(); - center = fabric.util.transformPoint(center, this.transformMatrix); - } - this.transformMatrix = null; - if (preserveAspectRatioOptions) { - this.scaleX *= preserveAspectRatioOptions.scaleX; - this.scaleY *= preserveAspectRatioOptions.scaleY; - this.cropX = preserveAspectRatioOptions.cropX; - this.cropY = preserveAspectRatioOptions.cropY; - center.x += preserveAspectRatioOptions.offsetLeft; - center.y += preserveAspectRatioOptions.offsetTop; - this.width = preserveAspectRatioOptions.width; - this.height = preserveAspectRatioOptions.height; - } - this.setPositionByOrigin(center, 'center', 'center'); - }, - - /** - * Clones an instance, using a callback method will work for every object. - * @param {Function} callback Callback is invoked with a clone as a first argument - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - */ - clone: function(callback, propertiesToInclude) { - var objectForm = this.toObject(propertiesToInclude); - if (this.constructor.fromObject) { - this.constructor.fromObject(objectForm, callback); - } - else { - fabric.Object._fromObject('Object', objectForm, callback); - } - }, - - /** - * Creates an instance of fabric.Image out of an object - * makes use of toCanvasElement. - * Once this method was based on toDataUrl and loadImage, so it also had a quality - * and format option. toCanvasElement is faster and produce no loss of quality. - * If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. - * toCanvasElement and then toBlob from the obtained canvas is also a good option. - * This method is sync now, but still support the callback because we did not want to break. - * When fabricJS 5.0 will be planned, this will probably be changed to not have a callback. - * @param {Function} callback callback, invoked with an instance as a first argument - * @param {Object} [options] for clone as image, passed to toDataURL - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 - * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 - * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 - * @return {fabric.Object} thisArg - */ - cloneAsImage: function(callback, options) { - var canvasEl = this.toCanvasElement(options); - if (callback) { - callback(new fabric.Image(canvasEl)); - } - return this; - }, - - /** - * Converts an object into a HTMLCanvas element - * @param {Object} options Options object - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 - * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 - * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 - * @return {HTMLCanvasElement} Returns DOM element with the fabric.Object - */ - toCanvasElement: function(options) { - options || (options = { }); + /** + * Converts an object into a HTMLCanvas element + * @param {Object} options Options object + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {HTMLCanvasElement} Returns DOM element with the fabric.Object + */ + toCanvasElement: function(options) { + options || (options = { }); + + var utils = fabric.util, origParams = utils.saveObjectTransform(this), + originalGroup = this.group, + originalShadow = this.shadow, abs = Math.abs, + retinaScaling = options.enableRetinaScaling ? Math.max(fabric.devicePixelRatio, 1) : 1, + multiplier = (options.multiplier || 1) * retinaScaling; + delete this.group; + if (options.withoutTransform) { + utils.resetObjectTransform(this); + } + if (options.withoutShadow) { + this.shadow = null; + } + + var el = fabric.util.createCanvasElement(), + // skip canvas zoom and calculate with setCoords now. + boundingRect = this.getBoundingRect(true, true), + shadow = this.shadow, shadowOffset = { x: 0, y: 0 }, + width, height; + + if (shadow) { + var shadowBlur = shadow.blur; + var scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); + // consider non scaling shadow. + shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.x)); + shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.y)); + } + width = boundingRect.width + shadowOffset.x; + height = boundingRect.height + shadowOffset.y; + // if the current width/height is not an integer + // we need to make it so. + el.width = Math.ceil(width); + el.height = Math.ceil(height); + var canvas = new fabric.StaticCanvas(el, { + enableRetinaScaling: false, + renderOnAddRemove: false, + skipOffscreen: false, + }); + if (options.format === 'jpeg') { + canvas.backgroundColor = '#fff'; + } + this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); + var originalCanvas = this.canvas; + canvas._objects = [this]; + this.set('canvas', canvas); + this.setCoords(); + var canvasEl = canvas.toCanvasElement(multiplier || 1, options); + this.set('canvas', originalCanvas); + this.shadow = originalShadow; + if (originalGroup) { + this.group = originalGroup; + } + this.set(origParams); + this.setCoords(); + // canvas.dispose will call image.dispose that will nullify the elements + // since this canvas is a simple element for the process, we remove references + // to objects in this way in order to avoid object trashing. + canvas._objects = []; + canvas.dispose(); + canvas = null; + + return canvasEl; + }, - var utils = fabric.util, origParams = utils.saveObjectTransform(this), - originalGroup = this.group, - originalShadow = this.shadow, abs = Math.abs, - multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? fabric.devicePixelRatio : 1); - delete this.group; - if (options.withoutTransform) { - utils.resetObjectTransform(this); - } - if (options.withoutShadow) { - this.shadow = null; - } + /** + * Converts an object into a data-url-like string + * @param {Object} options Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + */ + toDataURL: function(options) { + options || (options = { }); + return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); + }, + + /** + * Returns true if specified type is identical to the type of an instance + * @param {String} type Type to check against + * @return {Boolean} + */ + isType: function(type) { + return arguments.length > 1 ? Array.from(arguments).includes(this.type) : this.type === type; + }, + + /** + * Returns complexity of an instance + * @return {Number} complexity of this instance (is 1 unless subclassed) + */ + complexity: function() { + return 1; + }, + + /** + * Returns a JSON representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} JSON + */ + toJSON: function(propertiesToInclude) { + // delegate, not alias + return this.toObject(propertiesToInclude); + }, - var el = fabric.util.createCanvasElement(), - // skip canvas zoom and calculate with setCoords now. - boundingRect = this.getBoundingRect(true, true), - shadow = this.shadow, scaling, - shadowOffset = { x: 0, y: 0 }, shadowBlur, - width, height; + /** + * Sets "angle" of an instance with centered rotation + * @param {Number} angle Angle value (in degrees) + * @return {fabric.Object} thisArg + * @chainable + */ + rotate: function(angle) { + var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; - if (shadow) { - shadowBlur = shadow.blur; - if (shadow.nonScaling) { - scaling = { scaleX: 1, scaleY: 1 }; + if (shouldCenterOrigin) { + this._setOriginToCenter(); } - else { - scaling = this.getObjectScaling(); - } - // consider non scaling shadow. - shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.scaleX)); - shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.scaleY)); - } - width = boundingRect.width + shadowOffset.x; - height = boundingRect.height + shadowOffset.y; - // if the current width/height is not an integer - // we need to make it so. - el.width = Math.ceil(width); - el.height = Math.ceil(height); - var canvas = new fabric.StaticCanvas(el, { - enableRetinaScaling: false, - renderOnAddRemove: false, - skipOffscreen: false, - }); - if (options.format === 'jpeg') { - canvas.backgroundColor = '#fff'; - } - this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); - - var originalCanvas = this.canvas; - canvas.add(this); - var canvasEl = canvas.toCanvasElement(multiplier || 1, options); - this.shadow = originalShadow; - this.set('canvas', originalCanvas); - if (originalGroup) { - this.group = originalGroup; - } - this.set(origParams).setCoords(); - // canvas.dispose will call image.dispose that will nullify the elements - // since this canvas is a simple element for the process, we remove references - // to objects in this way in order to avoid object trashing. - canvas._objects = []; - canvas.dispose(); - canvas = null; - - return canvasEl; - }, - - /** - * Converts an object into a data-url-like string - * @param {Object} options Options object - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 - * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 - * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 - * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format - */ - toDataURL: function(options) { - options || (options = { }); - return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); - }, - /** - * Returns true if specified type is identical to the type of an instance - * @param {String} type Type to check against - * @return {Boolean} - */ - isType: function(type) { - return this.type === type; - }, + this.set('angle', angle); - /** - * Returns complexity of an instance - * @return {Number} complexity of this instance (is 1 unless subclassed) - */ - complexity: function() { - return 1; - }, + if (shouldCenterOrigin) { + this._resetOrigin(); + } - /** - * Returns a JSON representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} JSON - */ - toJSON: function(propertiesToInclude) { - // delegate, not alias - return this.toObject(propertiesToInclude); - }, + return this; + }, - /** - * Sets "angle" of an instance with centered rotation - * @param {Number} angle Angle value (in degrees) - * @return {fabric.Object} thisArg - * @chainable - */ - rotate: function(angle) { - var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; + /** + * Centers object horizontally on canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + centerH: function () { + this.canvas && this.canvas.centerObjectH(this); + return this; + }, - if (shouldCenterOrigin) { - this._setOriginToCenter(); - } + /** + * Centers object horizontally on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenterH: function () { + this.canvas && this.canvas.viewportCenterObjectH(this); + return this; + }, + + /** + * Centers object vertically on canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + centerV: function () { + this.canvas && this.canvas.centerObjectV(this); + return this; + }, + + /** + * Centers object vertically on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenterV: function () { + this.canvas && this.canvas.viewportCenterObjectV(this); + return this; + }, + + /** + * Centers object vertically and horizontally on canvas to which is was added last + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + center: function () { + this.canvas && this.canvas.centerObject(this); + return this; + }, + + /** + * Centers object on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenter: function () { + this.canvas && this.canvas.viewportCenterObject(this); + return this; + }, + + /** + * This callback function is called by the parent group of an object every + * time a non-delegated property changes on the group. It is passed the key + * and value as parameters. Not adding in this function's signature to avoid + * Travis build error about unused variables. + */ + setOnGroup: function() { + // implemented by sub-classes, as needed. + }, - this.set('angle', angle); + /** + * Sets canvas globalCompositeOperation for specific object + * custom composition operation for the particular object can be specified using globalCompositeOperation property + * @param {CanvasRenderingContext2D} ctx Rendering canvas context + */ + _setupCompositeOperation: function (ctx) { + if (this.globalCompositeOperation) { + ctx.globalCompositeOperation = this.globalCompositeOperation; + } + }, - if (shouldCenterOrigin) { - this._resetOrigin(); + /** + * cancel instance's running animations + * override if necessary to dispose artifacts such as `clipPath` + */ + dispose: function () { + if (fabric.runningAnimations) { + fabric.runningAnimations.cancelByTarget(this); + } } + }); - return this; - }, + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); - /** - * Centers object horizontally on canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - centerH: function () { - this.canvas && this.canvas.centerObjectH(this); - return this; - }, + extend(fabric.Object.prototype, fabric.Observable); /** - * Centers object horizontally on current viewport of canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable + * Defines the number of fraction digits to use when serializing object values. + * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc. + * @static + * @memberOf fabric.Object + * @constant + * @type Number */ - viewportCenterH: function () { - this.canvas && this.canvas.viewportCenterObjectH(this); - return this; - }, + fabric.Object.NUM_FRACTION_DIGITS = 2; /** - * Centers object vertically on canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable + * Defines which properties should be enlivened from the object passed to {@link fabric.Object._fromObject} + * @static + * @memberOf fabric.Object + * @constant + * @type string[] */ - centerV: function () { - this.canvas && this.canvas.centerObjectV(this); - return this; - }, - /** - * Centers object vertically on current viewport of canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - viewportCenterV: function () { - this.canvas && this.canvas.viewportCenterObjectV(this); - return this; - }, + fabric.Object._fromObject = function(klass, object, extraParam) { + var serializedObject = clone(object, true); + return fabric.util.enlivenObjectEnlivables(serializedObject).then(function(enlivedMap) { + var newObject = Object.assign(object, enlivedMap); + return extraParam ? new klass(object[extraParam], newObject) : new klass(newObject); + }); + }; - /** - * Centers object vertically and horizontally on canvas to which is was added last - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - center: function () { - this.canvas && this.canvas.centerObject(this); - return this; - }, + fabric.Object.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Object, object); + }; /** - * Centers object on current viewport of canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable + * Unique id used internally when creating SVG elements + * @static + * @memberOf fabric.Object + * @type Number */ - viewportCenter: function () { - this.canvas && this.canvas.viewportCenterObject(this); - return this; - }, + fabric.Object.__uid = 0; + })(typeof exports !== 'undefined' ? exports : window); - /** - * Returns coordinates of a pointer relative to an object - * @param {Event} e Event to operate upon - * @param {Object} [pointer] Pointer to operate upon (instead of event) - * @return {Object} Coordinates of a pointer (x, y) - */ - getLocalPointer: function(e, pointer) { - pointer = pointer || this.canvas.getPointer(e); - var pClicked = new fabric.Point(pointer.x, pointer.y), - objectLeftTop = this._getLeftTopCoords(); - if (this.angle) { - pClicked = fabric.util.rotatePoint( - pClicked, objectLeftTop, degreesToRadians(-this.angle)); - } - return { - x: pClicked.x - objectLeftTop.x, - y: pClicked.y - objectLeftTop.y - }; - }, + (function(global) { - /** - * Sets canvas globalCompositeOperation for specific object - * custom composition operation for the particular object can be specified using globalCompositeOperation property - * @param {CanvasRenderingContext2D} ctx Rendering canvas context - */ - _setupCompositeOperation: function (ctx) { - if (this.globalCompositeOperation) { - ctx.globalCompositeOperation = this.globalCompositeOperation; - } - }, + var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians, + originXOffset = { + left: -0.5, + center: 0, + right: 0.5 + }, + originYOffset = { + top: -0.5, + center: 0, + bottom: 0.5 + }; /** - * cancel instance's running animations - * override if necessary to dispose artifacts such as `clipPath` + * @typedef {number | 'left' | 'center' | 'right'} OriginX + * @typedef {number | 'top' | 'center' | 'bottom'} OriginY */ - dispose: function () { - if (fabric.runningAnimations) { - fabric.runningAnimations.cancelByTarget(this); - } - } - }); - fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - extend(fabric.Object.prototype, fabric.Observable); + /** + * Resolves origin value relative to center + * @private + * @param {OriginX} originX + * @returns number + */ + resolveOriginX: function (originX) { + return typeof originX === 'string' ? + originXOffset[originX] : + originX - 0.5; + }, - /** - * Defines the number of fraction digits to use when serializing object values. - * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc. - * @static - * @memberOf fabric.Object - * @constant - * @type Number - */ - fabric.Object.NUM_FRACTION_DIGITS = 2; + /** + * Resolves origin value relative to center + * @private + * @param {OriginY} originY + * @returns number + */ + resolveOriginY: function (originY) { + return typeof originY === 'string' ? + originYOffset[originY] : + originY - 0.5; + }, - /** - * Defines which properties should be enlivened from the object passed to {@link fabric.Object._fromObject} - * @static - * @memberOf fabric.Object - * @constant - * @type string[] - */ - fabric.Object.ENLIVEN_PROPS = ['clipPath']; + /** + * Translates the coordinates from a set of origin to another (based on the object's dimensions) + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @param {OriginX} fromOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {OriginY} fromOriginY Vertical origin: 'top', 'center' or 'bottom' + * @param {OriginX} toOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {OriginY} toOriginY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { + var x = point.x, + y = point.y, + dim, + offsetX = this.resolveOriginX(toOriginX) - this.resolveOriginX(fromOriginX), + offsetY = this.resolveOriginY(toOriginY) - this.resolveOriginY(fromOriginY); - fabric.Object._fromObject = function(className, object, callback, extraParam) { - var klass = fabric[className]; - object = clone(object, true); - fabric.util.enlivenPatterns([object.fill, object.stroke], function(patterns) { - if (typeof patterns[0] !== 'undefined') { - object.fill = patterns[0]; - } - if (typeof patterns[1] !== 'undefined') { - object.stroke = patterns[1]; - } - fabric.util.enlivenObjectEnlivables(object, object, function () { - var instance = extraParam ? new klass(object[extraParam], object) : new klass(object); - callback && callback(instance); - }); - }); - }; + if (offsetX || offsetY) { + dim = this._getTransformedDimensions(); + x = point.x + offsetX * dim.x; + y = point.y + offsetY * dim.y; + } - /** - * Unique id used internally when creating SVG elements - * @static - * @memberOf fabric.Object - * @type Number - */ - fabric.Object.__uid = 0; -})(typeof exports !== 'undefined' ? exports : this); + return new fabric.Point(x, y); + }, + /** + * Translates the coordinates from origin to center coordinates (based on the object's dimensions) + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' + * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToCenterPoint: function(point, originX, originY) { + var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); + if (this.angle) { + return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); + } + return p; + }, -(function() { + /** + * Translates the coordinates from center to origin coordinates (based on the object's dimensions) + * @param {fabric.Point} center The point which corresponds to center of the object + * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' + * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToOriginPoint: function(center, originX, originY) { + var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + if (this.angle) { + return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); + } + return p; + }, - var degreesToRadians = fabric.util.degreesToRadians, - originXOffset = { - left: -0.5, - center: 0, - right: 0.5 + /** + * Returns the center coordinates of the object relative to canvas + * @return {fabric.Point} + */ + getCenterPoint: function() { + var relCenter = this.getRelativeCenterPoint(); + return this.group ? + fabric.util.transformPoint(relCenter, this.group.calcTransformMatrix()) : + relCenter; }, - originYOffset = { - top: -0.5, - center: 0, - bottom: 0.5 - }; - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Returns the center coordinates of the object relative to it's containing group or null + * @return {fabric.Point|null} point or null of object has no parent group + */ + getCenterPointRelativeToParent: function () { + return this.group ? this.getRelativeCenterPoint() : null; + }, - /** - * Translates the coordinates from a set of origin to another (based on the object's dimensions) - * @param {fabric.Point} point The point which corresponds to the originX and originY params - * @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right' - * @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom' - * @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right' - * @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { - var x = point.x, - y = point.y, - offsetX, offsetY, dim; + /** + * Returns the center coordinates of the object relative to it's parent + * @return {fabric.Point} + */ + getRelativeCenterPoint: function () { + return this.translateToCenterPoint(new fabric.Point(this.left, this.top), this.originX, this.originY); + }, - if (typeof fromOriginX === 'string') { - fromOriginX = originXOffset[fromOriginX]; - } - else { - fromOriginX -= 0.5; - } + /** + * Returns the coordinates of the object based on center coordinates + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @return {fabric.Point} + */ + // getOriginPoint: function(center) { + // return this.translateToOriginPoint(center, this.originX, this.originY); + // }, - if (typeof toOriginX === 'string') { - toOriginX = originXOffset[toOriginX]; - } - else { - toOriginX -= 0.5; - } + /** + * Returns the coordinates of the object as if it has a different origin + * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' + * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + getPointByOrigin: function(originX, originY) { + var center = this.getRelativeCenterPoint(); + return this.translateToOriginPoint(center, originX, originY); + }, - offsetX = toOriginX - fromOriginX; + /** + * Returns the normalized point (rotated relative to center) in local coordinates + * @param {fabric.Point} point The point relative to instance coordinate system + * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' + * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + normalizePoint: function(point, originX, originY) { + var center = this.getRelativeCenterPoint(), p, p2; + if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { + p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + } + else { + p = new fabric.Point(this.left, this.top); + } - if (typeof fromOriginY === 'string') { - fromOriginY = originYOffset[fromOriginY]; - } - else { - fromOriginY -= 0.5; - } + p2 = new fabric.Point(point.x, point.y); + if (this.angle) { + p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); + } + return p2.subtractEquals(p); + }, - if (typeof toOriginY === 'string') { - toOriginY = originYOffset[toOriginY]; - } - else { - toOriginY -= 0.5; - } + /** + * Returns coordinates of a pointer relative to object's top left corner in object's plane + * @param {Event} e Event to operate upon + * @param {Object} [pointer] Pointer to operate upon (instead of event) + * @return {Object} Coordinates of a pointer (x, y) + */ + getLocalPointer: function (e, pointer) { + pointer = pointer || this.canvas.getPointer(e); + return fabric.util.transformPoint( + new fabric.Point(pointer.x, pointer.y), + fabric.util.invertTransform(this.calcTransformMatrix()) + ).addEquals(new fabric.Point(this.width / 2, this.height / 2)); + }, - offsetY = toOriginY - fromOriginY; + /** + * Returns the point in global coordinates + * @param {fabric.Point} The point relative to the local coordinate system + * @return {fabric.Point} + */ + // toGlobalPoint: function(point) { + // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); + // }, - if (offsetX || offsetY) { - dim = this._getTransformedDimensions(); - x = point.x + offsetX * dim.x; - y = point.y + offsetY * dim.y; - } + /** + * Sets the position of the object taking into consideration the object's origin + * @param {fabric.Point} pos The new position of the object + * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' + * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {void} + */ + setPositionByOrigin: function(pos, originX, originY) { + var center = this.translateToCenterPoint(pos, originX, originY), + position = this.translateToOriginPoint(center, this.originX, this.originY); + this.set('left', position.x); + this.set('top', position.y); + }, - return new fabric.Point(x, y); - }, + /** + * @param {String} to One of 'left', 'center', 'right' + */ + adjustPosition: function(to) { + var angle = degreesToRadians(this.angle), + hypotFull = this.getScaledWidth(), + xFull = fabric.util.cos(angle) * hypotFull, + yFull = fabric.util.sin(angle) * hypotFull, + offsetFrom, offsetTo; - /** - * Translates the coordinates from origin to center coordinates (based on the object's dimensions) - * @param {fabric.Point} point The point which corresponds to the originX and originY params - * @param {String} originX Horizontal origin: 'left', 'center' or 'right' - * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - translateToCenterPoint: function(point, originX, originY) { - var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); - if (this.angle) { - return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); - } - return p; - }, + //TODO: this function does not consider mixed situation like top, center. + if (typeof this.originX === 'string') { + offsetFrom = originXOffset[this.originX]; + } + else { + offsetFrom = this.originX - 0.5; + } + if (typeof to === 'string') { + offsetTo = originXOffset[to]; + } + else { + offsetTo = to - 0.5; + } + this.left += xFull * (offsetTo - offsetFrom); + this.top += yFull * (offsetTo - offsetFrom); + this.setCoords(); + this.originX = to; + }, - /** - * Translates the coordinates from center to origin coordinates (based on the object's dimensions) - * @param {fabric.Point} center The point which corresponds to center of the object - * @param {String} originX Horizontal origin: 'left', 'center' or 'right' - * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - translateToOriginPoint: function(center, originX, originY) { - var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - if (this.angle) { - return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); - } - return p; - }, - - /** - * Returns the real center coordinates of the object - * @return {fabric.Point} - */ - getCenterPoint: function() { - var leftTop = new fabric.Point(this.left, this.top); - return this.translateToCenterPoint(leftTop, this.originX, this.originY); - }, - - /** - * Returns the coordinates of the object based on center coordinates - * @param {fabric.Point} point The point which corresponds to the originX and originY params - * @return {fabric.Point} - */ - // getOriginPoint: function(center) { - // return this.translateToOriginPoint(center, this.originX, this.originY); - // }, - - /** - * Returns the coordinates of the object as if it has a different origin - * @param {String} originX Horizontal origin: 'left', 'center' or 'right' - * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - getPointByOrigin: function(originX, originY) { - var center = this.getCenterPoint(); - return this.translateToOriginPoint(center, originX, originY); - }, - - /** - * Returns the point in local coordinates - * @param {fabric.Point} point The point relative to the global coordinate system - * @param {String} originX Horizontal origin: 'left', 'center' or 'right' - * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - toLocalPoint: function(point, originX, originY) { - var center = this.getCenterPoint(), - p, p2; - - if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { - p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - } - else { - p = new fabric.Point(this.left, this.top); - } + /** + * Sets the origin/position of the object to it's center point + * @private + * @return {void} + */ + _setOriginToCenter: function() { + this._originalOriginX = this.originX; + this._originalOriginY = this.originY; - p2 = new fabric.Point(point.x, point.y); - if (this.angle) { - p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); - } - return p2.subtractEquals(p); - }, + var center = this.getRelativeCenterPoint(); - /** - * Returns the point in global coordinates - * @param {fabric.Point} The point relative to the local coordinate system - * @return {fabric.Point} - */ - // toGlobalPoint: function(point) { - // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); - // }, + this.originX = 'center'; + this.originY = 'center'; - /** - * Sets the position of the object taking into consideration the object's origin - * @param {fabric.Point} pos The new position of the object - * @param {String} originX Horizontal origin: 'left', 'center' or 'right' - * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {void} - */ - setPositionByOrigin: function(pos, originX, originY) { - var center = this.translateToCenterPoint(pos, originX, originY), - position = this.translateToOriginPoint(center, this.originX, this.originY); - this.set('left', position.x); - this.set('top', position.y); - }, + this.left = center.x; + this.top = center.y; + }, - /** - * @param {String} to One of 'left', 'center', 'right' - */ - adjustPosition: function(to) { - var angle = degreesToRadians(this.angle), - hypotFull = this.getScaledWidth(), - xFull = fabric.util.cos(angle) * hypotFull, - yFull = fabric.util.sin(angle) * hypotFull, - offsetFrom, offsetTo; + /** + * Resets the origin/position of the object to it's original origin + * @private + * @return {void} + */ + _resetOrigin: function() { + var originPoint = this.translateToOriginPoint( + this.getRelativeCenterPoint(), + this._originalOriginX, + this._originalOriginY); - //TODO: this function does not consider mixed situation like top, center. - if (typeof this.originX === 'string') { - offsetFrom = originXOffset[this.originX]; - } - else { - offsetFrom = this.originX - 0.5; - } - if (typeof to === 'string') { - offsetTo = originXOffset[to]; - } - else { - offsetTo = to - 0.5; - } - this.left += xFull * (offsetTo - offsetFrom); - this.top += yFull * (offsetTo - offsetFrom); - this.setCoords(); - this.originX = to; - }, + this.originX = this._originalOriginX; + this.originY = this._originalOriginY; - /** - * Sets the origin/position of the object to it's center point - * @private - * @return {void} - */ - _setOriginToCenter: function() { - this._originalOriginX = this.originX; - this._originalOriginY = this.originY; + this.left = originPoint.x; + this.top = originPoint.y; - var center = this.getCenterPoint(); + this._originalOriginX = null; + this._originalOriginY = null; + }, - this.originX = 'center'; - this.originY = 'center'; + /** + * @private + */ + _getLeftTopCoords: function() { + return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top'); + }, + }); - this.left = center.x; - this.top = center.y; - }, + })(typeof exports !== 'undefined' ? exports : window); - /** - * Resets the origin/position of the object to it's original origin - * @private - * @return {void} - */ - _resetOrigin: function() { - var originPoint = this.translateToOriginPoint( - this.getCenterPoint(), - this._originalOriginX, - this._originalOriginY); + (function(global) { - this.originX = this._originalOriginX; - this.originY = this._originalOriginY; + function arrayFromCoords(coords) { + return [ + new fabric.Point(coords.tl.x, coords.tl.y), + new fabric.Point(coords.tr.x, coords.tr.y), + new fabric.Point(coords.br.x, coords.br.y), + new fabric.Point(coords.bl.x, coords.bl.y) + ]; + } - this.left = originPoint.x; - this.top = originPoint.y; + var fabric = global.fabric, util = fabric.util, + degreesToRadians = util.degreesToRadians, + multiplyMatrices = util.multiplyTransformMatrices, + transformPoint = util.transformPoint; - this._originalOriginX = null; - this._originalOriginY = null; - }, + util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * @private - */ - _getLeftTopCoords: function() { - return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top'); - }, - }); + /** + * Describe object's corner position in canvas element coordinates. + * properties are depending on control keys and padding the main controls. + * each property is an object with x, y and corner. + * The `corner` property contains in a similar manner the 4 points of the + * interactive area of the corner. + * The coordinates depends from the controls positionHandler and are used + * to draw and locate controls + * @memberOf fabric.Object.prototype + */ + oCoords: null, -})(); + /** + * Describe object's corner position in canvas object absolute coordinates + * properties are tl,tr,bl,br and describe the four main corner. + * each property is an object with x, y, instance of Fabric.Point. + * The coordinates depends from this properties: width, height, scaleX, scaleY + * skewX, skewY, angle, strokeWidth, top, left. + * Those coordinates are useful to understand where an object is. They get updated + * with oCoords but they do not need to be updated when zoom or panning change. + * The coordinates get updated with @method setCoords. + * You can calculate them without updating with @method calcACoords(); + * @memberOf fabric.Object.prototype + */ + aCoords: null, + /** + * Describe object's corner position in canvas element coordinates. + * includes padding. Used of object detection. + * set and refreshed with setCoords. + * @memberOf fabric.Object.prototype + */ + lineCoords: null, -(function() { + /** + * storage for object transform matrix + */ + ownMatrixCache: null, - function arrayFromCoords(coords) { - return [ - new fabric.Point(coords.tl.x, coords.tl.y), - new fabric.Point(coords.tr.x, coords.tr.y), - new fabric.Point(coords.br.x, coords.br.y), - new fabric.Point(coords.bl.x, coords.bl.y) - ]; - } + /** + * storage for object full transform matrix + */ + matrixCache: null, - var util = fabric.util, - degreesToRadians = util.degreesToRadians, - multiplyMatrices = util.multiplyTransformMatrices, - transformPoint = util.transformPoint; + /** + * custom controls interface + * controls are added by default_controls.js + */ + controls: { }, - util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * @returns {number} x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane + */ + getX: function () { + return this.getXY().x; + }, - /** - * Describe object's corner position in canvas element coordinates. - * properties are depending on control keys and padding the main controls. - * each property is an object with x, y and corner. - * The `corner` property contains in a similar manner the 4 points of the - * interactive area of the corner. - * The coordinates depends from the controls positionHandler and are used - * to draw and locate controls - * @memberOf fabric.Object.prototype - */ - oCoords: null, + /** + * @param {number} value x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane + */ + setX: function (value) { + this.setXY(this.getXY().setX(value)); + }, - /** - * Describe object's corner position in canvas object absolute coordinates - * properties are tl,tr,bl,br and describe the four main corner. - * each property is an object with x, y, instance of Fabric.Point. - * The coordinates depends from this properties: width, height, scaleX, scaleY - * skewX, skewY, angle, strokeWidth, top, left. - * Those coordinates are useful to understand where an object is. They get updated - * with oCoords but they do not need to be updated when zoom or panning change. - * The coordinates get updated with @method setCoords. - * You can calculate them without updating with @method calcACoords(); - * @memberOf fabric.Object.prototype - */ - aCoords: null, + /** + * @returns {number} x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ + * if parent is canvas then this property is identical to {@link fabric.Object#getX} + */ + getRelativeX: function () { + return this.left; + }, - /** - * Describe object's corner position in canvas element coordinates. - * includes padding. Used of object detection. - * set and refreshed with setCoords. - * @memberOf fabric.Object.prototype - */ - lineCoords: null, + /** + * @param {number} value x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ + * if parent is canvas then this method is identical to {@link fabric.Object#setX} + */ + setRelativeX: function (value) { + this.left = value; + }, - /** - * storage for object transform matrix - */ - ownMatrixCache: null, + /** + * @returns {number} y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane + */ + getY: function () { + return this.getXY().y; + }, - /** - * storage for object full transform matrix - */ - matrixCache: null, + /** + * @param {number} value y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane + */ + setY: function (value) { + this.setXY(this.getXY().setY(value)); + }, - /** - * custom controls interface - * controls are added by default_controls.js - */ - controls: { }, + /** + * @returns {number} y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ + * if parent is canvas then this property is identical to {@link fabric.Object#getY} + */ + getRelativeY: function () { + return this.top; + }, - /** - * return correct set of coordinates for intersection - * this will return either aCoords or lineCoords. - * @param {Boolean} absolute will return aCoords if true or lineCoords - * @return {Object} {tl, tr, br, bl} points - */ - _getCoords: function(absolute, calculate) { - if (calculate) { - return (absolute ? this.calcACoords() : this.calcLineCoords()); - } - if (!this.aCoords || !this.lineCoords) { - this.setCoords(true); - } - return (absolute ? this.aCoords : this.lineCoords); - }, + /** + * @param {number} value y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ + * if parent is canvas then this property is identical to {@link fabric.Object#setY} + */ + setRelativeY: function (value) { + this.top = value; + }, - /** - * return correct set of coordinates for intersection - * this will return either aCoords or lineCoords. - * The coords are returned in an array. - * @return {Array} [tl, tr, br, bl] of points - */ - getCoords: function(absolute, calculate) { - return arrayFromCoords(this._getCoords(absolute, calculate)); - }, + /** + * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in canvas coordinate plane + */ + getXY: function () { + var relativePosition = this.getRelativeXY(); + return this.group ? + fabric.util.transformPoint(relativePosition, this.group.calcTransformMatrix()) : + relativePosition; + }, - /** - * Checks if object intersects with an area formed by 2 points - * @param {Object} pointTL top-left point of area - * @param {Object} pointBR bottom-right point of area - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object intersects with an area formed by 2 points - */ - intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { - var coords = this.getCoords(absolute, calculate), - intersection = fabric.Intersection.intersectPolygonRectangle( - coords, - pointTL, - pointBR + /** + * Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. + * You can specify {@link fabric.Object#originX} and {@link fabric.Object#originY} values, + * that otherwise are the object's current values. + * @example Set object's bottom left corner to point (5,5) on canvas + * object.setXY(new fabric.Point(5, 5), 'left', 'bottom'). + * @param {fabric.Point} point position in canvas coordinate plane + * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' + * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' + */ + setXY: function (point, originX, originY) { + if (this.group) { + point = fabric.util.transformPoint( + point, + fabric.util.invertTransform(this.group.calcTransformMatrix()) ); - return intersection.status === 'Intersection'; - }, + } + this.setRelativeXY(point, originX, originY); + }, - /** - * Checks if object intersects with another object - * @param {Object} other Object to test - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object intersects with another object - */ - intersectsWithObject: function(other, absolute, calculate) { - var intersection = fabric.Intersection.intersectPolygonPolygon( - this.getCoords(absolute, calculate), - other.getCoords(absolute, calculate) - ); + /** + * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane + */ + getRelativeXY: function () { + return new fabric.Point(this.left, this.top); + }, - return intersection.status === 'Intersection' - || other.isContainedWithinObject(this, absolute, calculate) - || this.isContainedWithinObject(other, absolute, calculate); - }, + /** + * As {@link fabric.Object#setXY}, but in current parent's coordinate plane ( the current group if any or the canvas) + * @param {fabric.Point} point position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane + * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' + * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' + */ + setRelativeXY: function (point, originX, originY) { + this.setPositionByOrigin(point, originX || this.originX, originY || this.originY); + }, - /** - * Checks if object is fully contained within area of another object - * @param {Object} other Object to test - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object is fully contained within area of another object - */ - isContainedWithinObject: function(other, absolute, calculate) { - var points = this.getCoords(absolute, calculate), - otherCoords = absolute ? other.aCoords : other.lineCoords, - i = 0, lines = other._getImageLines(otherCoords); - for (; i < 4; i++) { - if (!other.containsPoint(points[i], lines)) { - return false; + /** + * return correct set of coordinates for intersection + * this will return either aCoords or lineCoords. + * @param {Boolean} absolute will return aCoords if true or lineCoords + * @return {Object} {tl, tr, br, bl} points + */ + _getCoords: function(absolute, calculate) { + if (calculate) { + return (absolute ? this.calcACoords() : this.calcLineCoords()); } - } - return true; - }, - - /** - * Checks if object is fully contained within area formed by 2 points - * @param {Object} pointTL top-left point of area - * @param {Object} pointBR bottom-right point of area - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object is fully contained within area formed by 2 points - */ - isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { - var boundingRect = this.getBoundingRect(absolute, calculate); + if (!this.aCoords || !this.lineCoords) { + this.setCoords(true); + } + return (absolute ? this.aCoords : this.lineCoords); + }, - return ( - boundingRect.left >= pointTL.x && - boundingRect.left + boundingRect.width <= pointBR.x && - boundingRect.top >= pointTL.y && - boundingRect.top + boundingRect.height <= pointBR.y - ); - }, + /** + * return correct set of coordinates for intersection + * this will return either aCoords or lineCoords. + * The coords are returned in an array. + * @return {Array} [tl, tr, br, bl] of points + */ + getCoords: function (absolute, calculate) { + var coords = arrayFromCoords(this._getCoords(absolute, calculate)); + if (this.group) { + var t = this.group.calcTransformMatrix(); + return coords.map(function (p) { + return util.transformPoint(p, t); + }); + } + return coords; + }, - /** - * Checks if point is inside the object - * @param {fabric.Point} point Point to check against - * @param {Object} [lines] object returned from @method _getImageLines - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if point is inside the object - */ - containsPoint: function(point, lines, absolute, calculate) { - var coords = this._getCoords(absolute, calculate), - lines = lines || this._getImageLines(coords), - xPoints = this._findCrossPoints(point, lines); - // if xPoints is odd then point is inside the object - return (xPoints !== 0 && xPoints % 2 === 1); - }, + /** + * Checks if object intersects with an area formed by 2 points + * @param {Object} pointTL top-left point of area + * @param {Object} pointBR bottom-right point of area + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with an area formed by 2 points + */ + intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { + var coords = this.getCoords(absolute, calculate), + intersection = fabric.Intersection.intersectPolygonRectangle( + coords, + pointTL, + pointBR + ); + return intersection.status === 'Intersection'; + }, - /** - * Checks if object is contained within the canvas with current viewportTransform - * the check is done stopping at first point that appears on screen - * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords - * @return {Boolean} true if object is fully or partially contained within canvas - */ - isOnScreen: function(calculate) { - if (!this.canvas) { - return false; - } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - var points = this.getCoords(true, calculate); - // if some point is on screen, the object is on screen. - if (points.some(function(point) { - return point.x <= pointBR.x && point.x >= pointTL.x && - point.y <= pointBR.y && point.y >= pointTL.y; - })) { - return true; - } - // no points on screen, check intersection with absolute coordinates - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { - return true; - } - return this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, + /** + * Checks if object intersects with another object + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with another object + */ + intersectsWithObject: function(other, absolute, calculate) { + var intersection = fabric.Intersection.intersectPolygonPolygon( + this.getCoords(absolute, calculate), + other.getCoords(absolute, calculate) + ); - /** - * Checks if the object contains the midpoint between canvas extremities - * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen - * @private - * @param {Fabric.Point} pointTL Top Left point - * @param {Fabric.Point} pointBR Top Right point - * @param {Boolean} calculate use coordinates of current position instead of .oCoords - * @return {Boolean} true if the object contains the point - */ - _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { - // worst case scenario the object is so big that contains the screen - var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; - if (this.containsPoint(centerPoint, null, true, calculate)) { - return true; - } - return false; - }, + return intersection.status === 'Intersection' + || other.isContainedWithinObject(this, absolute, calculate) + || this.isContainedWithinObject(other, absolute, calculate); + }, - /** - * Checks if object is partially contained within the canvas with current viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object is partially contained within canvas - */ - isPartiallyOnScreen: function(calculate) { - if (!this.canvas) { - return false; - } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + /** + * Checks if object is fully contained within area of another object + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is fully contained within area of another object + */ + isContainedWithinObject: function(other, absolute, calculate) { + var points = this.getCoords(absolute, calculate), + otherCoords = absolute ? other.aCoords : other.lineCoords, + i = 0, lines = other._getImageLines(otherCoords); + for (; i < 4; i++) { + if (!other.containsPoint(points[i], lines)) { + return false; + } + } return true; - } - var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { - return (point.x >= pointBR.x || point.x <= pointTL.x) && - (point.y >= pointBR.y || point.y <= pointTL.y); - }); - return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, + }, - /** - * Method that returns an object with the object edges in it, given the coordinates of the corners - * @private - * @param {Object} oCoords Coordinates of the object corners - */ - _getImageLines: function(oCoords) { + /** + * Checks if object is fully contained within area formed by 2 points + * @param {Object} pointTL top-left point of area + * @param {Object} pointBR bottom-right point of area + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is fully contained within area formed by 2 points + */ + isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { + var boundingRect = this.getBoundingRect(absolute, calculate); + + return ( + boundingRect.left >= pointTL.x && + boundingRect.left + boundingRect.width <= pointBR.x && + boundingRect.top >= pointTL.y && + boundingRect.top + boundingRect.height <= pointBR.y + ); + }, - var lines = { - topline: { - o: oCoords.tl, - d: oCoords.tr - }, - rightline: { - o: oCoords.tr, - d: oCoords.br - }, - bottomline: { - o: oCoords.br, - d: oCoords.bl - }, - leftline: { - o: oCoords.bl, - d: oCoords.tl - } - }; + /** + * Checks if point is inside the object + * @param {fabric.Point} point Point to check against + * @param {Object} [lines] object returned from @method _getImageLines + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if point is inside the object + */ + containsPoint: function(point, lines, absolute, calculate) { + var coords = this._getCoords(absolute, calculate), + lines = lines || this._getImageLines(coords), + xPoints = this._findCrossPoints(point, lines); + // if xPoints is odd then point is inside the object + return (xPoints !== 0 && xPoints % 2 === 1); + }, - // // debugging - // if (this.canvas.contextTop) { - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); - // } - - return lines; - }, - - /** - * Helper method to determine how many cross points are between the 4 object edges - * and the horizontal line determined by a point on canvas - * @private - * @param {fabric.Point} point Point to check - * @param {Object} lines Coordinates of the object being evaluated - */ - // remove yi, not used but left code here just in case. - _findCrossPoints: function(point, lines) { - var b1, b2, a1, a2, xi, // yi, - xcount = 0, - iLine; - - for (var lineKey in lines) { - iLine = lines[lineKey]; - // optimisation 1: line below point. no cross - if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { - continue; + /** + * Checks if object is contained within the canvas with current viewportTransform + * the check is done stopping at first point that appears on screen + * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords + * @return {Boolean} true if object is fully or partially contained within canvas + */ + isOnScreen: function(calculate) { + if (!this.canvas) { + return false; } - // optimisation 2: line above point. no cross - if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { - continue; + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + var points = this.getCoords(true, calculate); + // if some point is on screen, the object is on screen. + if (points.some(function(point) { + return point.x <= pointBR.x && point.x >= pointTL.x && + point.y <= pointBR.y && point.y >= pointTL.y; + })) { + return true; } - // optimisation 3: vertical line case - if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { - xi = iLine.o.x; - // yi = point.y; + // no points on screen, check intersection with absolute coordinates + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; } - // calculate the intersection point - else { - b1 = 0; - b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); - a1 = point.y - b1 * point.x; - a2 = iLine.o.y - b2 * iLine.o.x; + return this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - xi = -(a1 - a2) / (b1 - b2); - // yi = a1 + b1 * xi; - } - // dont count xi < point.x cases - if (xi >= point.x) { - xcount += 1; - } - // optimisation 4: specific for square images - if (xcount === 2) { - break; + /** + * Checks if the object contains the midpoint between canvas extremities + * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen + * @private + * @param {Fabric.Point} pointTL Top Left point + * @param {Fabric.Point} pointBR Top Right point + * @param {Boolean} calculate use coordinates of current position instead of .oCoords + * @return {Boolean} true if the object contains the point + */ + _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { + // worst case scenario the object is so big that contains the screen + var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; + if (this.containsPoint(centerPoint, null, true, calculate)) { + return true; } - } - return xcount; - }, - - /** - * Returns coordinates of object's bounding rectangle (left, top, width, height) - * the box is intended as aligned to axis of canvas. - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords - * @return {Object} Object with left, top, width, height properties - */ - getBoundingRect: function(absolute, calculate) { - var coords = this.getCoords(absolute, calculate); - return util.makeBoundingBoxFromPoints(coords); - }, - - /** - * Returns width of an object's bounding box counting transformations - * before 2.0 it was named getWidth(); - * @return {Number} width value - */ - getScaledWidth: function() { - return this._getTransformedDimensions().x; - }, - - /** - * Returns height of an object bounding box counting transformations - * before 2.0 it was named getHeight(); - * @return {Number} height value - */ - getScaledHeight: function() { - return this._getTransformedDimensions().y; - }, + return false; + }, - /** - * Makes sure the scale is valid and modifies it if necessary - * @private - * @param {Number} value - * @return {Number} - */ - _constrainScale: function(value) { - if (Math.abs(value) < this.minScaleLimit) { - if (value < 0) { - return -this.minScaleLimit; + /** + * Checks if object is partially contained within the canvas with current viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is partially contained within canvas + */ + isPartiallyOnScreen: function(calculate) { + if (!this.canvas) { + return false; } - else { - return this.minScaleLimit; + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; } - } - else if (value === 0) { - return 0.0001; - } - return value; - }, - - /** - * Scales an object (equally by x and y) - * @param {Number} value Scale factor - * @return {fabric.Object} thisArg - * @chainable - */ - scale: function(value) { - this._set('scaleX', value); - this._set('scaleY', value); - return this.setCoords(); - }, - - /** - * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) - * @param {Number} value New width value - * @param {Boolean} absolute ignore viewport - * @return {fabric.Object} thisArg - * @chainable - */ - scaleToWidth: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); - return this.scale(value / this.width / boundingRectFactor); - }, + var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { + return (point.x >= pointBR.x || point.x <= pointTL.x) && + (point.y >= pointBR.y || point.y <= pointTL.y); + }); + return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - /** - * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) - * @param {Number} value New height value - * @param {Boolean} absolute ignore viewport - * @return {fabric.Object} thisArg - * @chainable - */ - scaleToHeight: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); - return this.scale(value / this.height / boundingRectFactor); - }, + /** + * Method that returns an object with the object edges in it, given the coordinates of the corners + * @private + * @param {Object} oCoords Coordinates of the object corners + */ + _getImageLines: function(oCoords) { - calcLineCoords: function() { - var vpt = this.getViewportTransform(), - padding = this.padding, angle = degreesToRadians(this.angle), - cos = util.cos(angle), sin = util.sin(angle), - cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, - cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); + var lines = { + topline: { + o: oCoords.tl, + d: oCoords.tr + }, + rightline: { + o: oCoords.tr, + d: oCoords.br + }, + bottomline: { + o: oCoords.br, + d: oCoords.bl + }, + leftline: { + o: oCoords.bl, + d: oCoords.tl + } + }; - var lineCoords = { - tl: transformPoint(aCoords.tl, vpt), - tr: transformPoint(aCoords.tr, vpt), - bl: transformPoint(aCoords.bl, vpt), - br: transformPoint(aCoords.br, vpt), - }; + // // debugging + // if (this.canvas.contextTop) { + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + // } - if (padding) { - lineCoords.tl.x -= cosPMinusSinP; - lineCoords.tl.y -= cosPSinP; - lineCoords.tr.x += cosPSinP; - lineCoords.tr.y -= cosPMinusSinP; - lineCoords.bl.x -= cosPSinP; - lineCoords.bl.y += cosPMinusSinP; - lineCoords.br.x += cosPMinusSinP; - lineCoords.br.y += cosPSinP; - } - - return lineCoords; - }, - - calcOCoords: function() { - var rotateMatrix = this._calcRotateMatrix(), - translateMatrix = this._calcTranslateMatrix(), - vpt = this.getViewportTransform(), - startMatrix = multiplyMatrices(vpt, translateMatrix), - finalMatrix = multiplyMatrices(startMatrix, rotateMatrix), - finalMatrix = multiplyMatrices(finalMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), - dim = this._calculateCurrentDimensions(), - coords = {}; - this.forEachControl(function(control, key, fabricObject) { - coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); - }); + return lines; + }, - // debug code - // var canvas = this.canvas; - // setTimeout(function() { - // canvas.contextTop.clearRect(0, 0, 700, 700); - // canvas.contextTop.fillStyle = 'green'; - // Object.keys(coords).forEach(function(key) { - // var control = coords[key]; - // canvas.contextTop.fillRect(control.x, control.y, 3, 3); - // }); - // }, 50); - return coords; - }, - - calcACoords: function() { - var rotateMatrix = this._calcRotateMatrix(), - translateMatrix = this._calcTranslateMatrix(), - finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), - dim = this._getTransformedDimensions(), - w = dim.x / 2, h = dim.y / 2; - return { - // corners - tl: transformPoint({ x: -w, y: -h }, finalMatrix), - tr: transformPoint({ x: w, y: -h }, finalMatrix), - bl: transformPoint({ x: -w, y: h }, finalMatrix), - br: transformPoint({ x: w, y: h }, finalMatrix) - }; - }, - - /** - * Sets corner and controls position coordinates based on current angle, width and height, left and top. - * oCoords are used to find the corners - * aCoords are used to quickly find an object on the canvas - * lineCoords are used to quickly find object during pointer events. - * See {@link https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords} and {@link http://fabricjs.com/fabric-gotchas} - * - * @param {Boolean} [skipCorners] skip calculation of oCoords. - * @return {fabric.Object} thisArg - * @chainable - */ - setCoords: function(skipCorners) { - this.aCoords = this.calcACoords(); - // in case we are in a group, for how the inner group target check works, - // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. - this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); - if (skipCorners) { - return this; - } - // set coordinates of the draggable boxes in the corners used to scale/rotate the image - this.oCoords = this.calcOCoords(); - this._setCornerCoords && this._setCornerCoords(); - return this; - }, - - /** - * calculate rotation matrix of an object - * @return {Array} rotation matrix for the object - */ - _calcRotateMatrix: function() { - return util.calcRotateMatrix(this); - }, - - /** - * calculate the translation matrix for an object transform - * @return {Array} rotation matrix for the object - */ - _calcTranslateMatrix: function() { - var center = this.getCenterPoint(); - return [1, 0, 0, 1, center.x, center.y]; - }, - - transformMatrixKey: function(skipGroup) { - var sep = '_', prefix = ''; - if (!skipGroup && this.group) { - prefix = this.group.transformMatrixKey(skipGroup) + sep; - }; - return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + - sep + this.skewX + sep + this.skewY + sep + this.angle + sep + this.originX + sep + this.originY + - sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY; - }, - - /** - * calculate transform matrix that represents the current transformations from the - * object's properties. - * @param {Boolean} [skipGroup] return transform matrix for object not counting parent transformations - * There are some situation in which this is useful to avoid the fake rotation. - * @return {Array} transform matrix for the object - */ - calcTransformMatrix: function(skipGroup) { - var matrix = this.calcOwnMatrix(); - if (skipGroup || !this.group) { - return matrix; - } - var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); - if (cache.key === key) { - return cache.value; - } - if (this.group) { - matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); - } - cache.key = key; - cache.value = matrix; - return matrix; - }, - - /** - * calculate transform matrix that represents the current transformations from the - * object's properties, this matrix does not include the group transformation - * @return {Array} transform matrix for the object - */ - calcOwnMatrix: function() { - var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); - if (cache.key === key) { - return cache.value; - } - var tMatrix = this._calcTranslateMatrix(), - options = { - angle: this.angle, - translateX: tMatrix[4], - translateY: tMatrix[5], - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: this.skewX, - skewY: this.skewY, - flipX: this.flipX, - flipY: this.flipY, - }; - cache.key = key; - cache.value = util.composeMatrix(options); - return cache.value; - }, - - /* - * Calculate object dimensions from its properties - * @private - * @return {Object} .x width dimension - * @return {Object} .y height dimension - */ - _getNonTransformedDimensions: function() { - var strokeWidth = this.strokeWidth, - w = this.width + strokeWidth, - h = this.height + strokeWidth; - return { x: w, y: h }; - }, - - /* - * Calculate object bounding box dimensions from its properties scale, skew. - * @param {Number} skewX, a value to override current skewX - * @param {Number} skewY, a value to override current skewY - * @private - * @return {Object} .x width dimension - * @return {Object} .y height dimension - */ - _getTransformedDimensions: function(skewX, skewY) { - if (typeof skewX === 'undefined') { - skewX = this.skewX; - } - if (typeof skewY === 'undefined') { - skewY = this.skewY; - } - var dimensions, dimX, dimY, - noSkew = skewX === 0 && skewY === 0; - - if (this.strokeUniform) { - dimX = this.width; - dimY = this.height; - } - else { - dimensions = this._getNonTransformedDimensions(); - dimX = dimensions.x; - dimY = dimensions.y; - } - if (noSkew) { - return this._finalizeDimensions(dimX * this.scaleX, dimY * this.scaleY); - } - var bbox = util.sizeAfterTransform(dimX, dimY, { - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: skewX, - skewY: skewY, - }); - return this._finalizeDimensions(bbox.x, bbox.y); - }, - - /* - * Calculate object bounding box dimensions from its properties scale, skew. - * @param Number width width of the bbox - * @param Number height height of the bbox - * @private - * @return {Object} .x finalized width dimension - * @return {Object} .y finalized height dimension - */ - _finalizeDimensions: function(width, height) { - return this.strokeUniform ? - { x: width + this.strokeWidth, y: height + this.strokeWidth } - : - { x: width, y: height }; - }, - - /* - * Calculate object dimensions for controls box, including padding and canvas zoom. - * and active selection - * private - */ - _calculateCurrentDimensions: function() { - var vpt = this.getViewportTransform(), - dim = this._getTransformedDimensions(), - p = transformPoint(dim, vpt, true); - return p.scalarAdd(2 * this.padding); - }, - }); -})(); - - -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - - /** - * Moves an object to the bottom of the stack of drawn objects - * @return {fabric.Object} thisArg - * @chainable - */ - sendToBack: function() { - if (this.group) { - fabric.StaticCanvas.prototype.sendToBack.call(this.group, this); - } - else if (this.canvas) { - this.canvas.sendToBack(this); - } - return this; - }, - - /** - * Moves an object to the top of the stack of drawn objects - * @return {fabric.Object} thisArg - * @chainable - */ - bringToFront: function() { - if (this.group) { - fabric.StaticCanvas.prototype.bringToFront.call(this.group, this); - } - else if (this.canvas) { - this.canvas.bringToFront(this); - } - return this; - }, - - /** - * Moves an object down in stack of drawn objects - * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object - * @return {fabric.Object} thisArg - * @chainable - */ - sendBackwards: function(intersecting) { - if (this.group) { - fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting); - } - else if (this.canvas) { - this.canvas.sendBackwards(this, intersecting); - } - return this; - }, - - /** - * Moves an object up in stack of drawn objects - * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object - * @return {fabric.Object} thisArg - * @chainable - */ - bringForward: function(intersecting) { - if (this.group) { - fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting); - } - else if (this.canvas) { - this.canvas.bringForward(this, intersecting); - } - return this; - }, - - /** - * Moves an object to specified level in stack of drawn objects - * @param {Number} index New position of object - * @return {fabric.Object} thisArg - * @chainable - */ - moveTo: function(index) { - if (this.group && this.group.type !== 'activeSelection') { - fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index); - } - else if (this.canvas) { - this.canvas.moveTo(this, index); - } - return this; - } -}); - - -/* _TO_SVG_START_ */ -(function() { - function getSvgColorString(prop, value) { - if (!value) { - return prop + ': none; '; - } - else if (value.toLive) { - return prop + ': url(#SVGID_' + value.id + '); '; - } - else { - var color = new fabric.Color(value), - str = prop + ': ' + color.toRgb() + '; ', - opacity = color.getAlpha(); - if (opacity !== 1) { - //change the color in rgb + opacity - str += prop + '-opacity: ' + opacity.toString() + '; '; - } - return str; - } - } - - var toFixed = fabric.util.toFixed; - - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Returns styles-string for svg-export - * @param {Boolean} skipShadow a boolean to skip shadow filter output - * @return {String} - */ - getSvgStyles: function(skipShadow) { - - var fillRule = this.fillRule ? this.fillRule : 'nonzero', - strokeWidth = this.strokeWidth ? this.strokeWidth : '0', - strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', - strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', - strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', - strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', - strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', - opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', - visibility = this.visible ? '' : ' visibility: hidden;', - filter = skipShadow ? '' : this.getSvgFilter(), - fill = getSvgColorString('fill', this.fill), - stroke = getSvgColorString('stroke', this.stroke); + /** + * Helper method to determine how many cross points are between the 4 object edges + * and the horizontal line determined by a point on canvas + * @private + * @param {fabric.Point} point Point to check + * @param {Object} lines Coordinates of the object being evaluated + */ + // remove yi, not used but left code here just in case. + _findCrossPoints: function(point, lines) { + var b1, b2, a1, a2, xi, // yi, + xcount = 0, + iLine; + + for (var lineKey in lines) { + iLine = lines[lineKey]; + // optimisation 1: line below point. no cross + if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { + continue; + } + // optimisation 2: line above point. no cross + if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { + continue; + } + // optimisation 3: vertical line case + if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { + xi = iLine.o.x; + // yi = point.y; + } + // calculate the intersection point + else { + b1 = 0; + b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); + a1 = point.y - b1 * point.x; + a2 = iLine.o.y - b2 * iLine.o.x; - return [ - stroke, - 'stroke-width: ', strokeWidth, '; ', - 'stroke-dasharray: ', strokeDashArray, '; ', - 'stroke-linecap: ', strokeLineCap, '; ', - 'stroke-dashoffset: ', strokeDashOffset, '; ', - 'stroke-linejoin: ', strokeLineJoin, '; ', - 'stroke-miterlimit: ', strokeMiterLimit, '; ', - fill, - 'fill-rule: ', fillRule, '; ', - 'opacity: ', opacity, ';', - filter, - visibility - ].join(''); - }, - - /** - * Returns styles-string for svg-export - * @param {Object} style the object from which to retrieve style properties - * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. - * @return {String} - */ - getSvgSpanStyles: function(style, useWhiteSpace) { - var term = '; '; - var fontFamily = style.fontFamily ? - 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? - '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; - var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', - fontFamily = fontFamily, - fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', - fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', - fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', - fill = style.fill ? getSvgColorString('fill', style.fill) : '', - stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', - textDecoration = this.getSvgTextDecoration(style), - deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; - if (textDecoration) { - textDecoration = 'text-decoration: ' + textDecoration + term; - } + xi = -(a1 - a2) / (b1 - b2); + // yi = a1 + b1 * xi; + } + // dont count xi < point.x cases + if (xi >= point.x) { + xcount += 1; + } + // optimisation 4: specific for square images + if (xcount === 2) { + break; + } + } + return xcount; + }, - return [ - stroke, - strokeWidth, - fontFamily, - fontSize, - fontStyle, - fontWeight, - textDecoration, - fill, - deltaY, - useWhiteSpace ? 'white-space: pre; ' : '' - ].join(''); - }, + /** + * Returns coordinates of object's bounding rectangle (left, top, width, height) + * the box is intended as aligned to axis of canvas. + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords + * @return {Object} Object with left, top, width, height properties + */ + getBoundingRect: function(absolute, calculate) { + var coords = this.getCoords(absolute, calculate); + return util.makeBoundingBoxFromPoints(coords); + }, - /** - * Returns text-decoration property for svg-export - * @param {Object} style the object from which to retrieve style properties - * @return {String} - */ - getSvgTextDecoration: function(style) { - return ['overline', 'underline', 'line-through'].filter(function(decoration) { - return style[decoration.replace('-', '')]; - }).join(' '); - }, + /** + * Returns width of an object's bounding box counting transformations + * before 2.0 it was named getWidth(); + * @return {Number} width value + */ + getScaledWidth: function() { + return this._getTransformedDimensions().x; + }, - /** - * Returns filter for svg shadow - * @return {String} - */ - getSvgFilter: function() { - return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; - }, + /** + * Returns height of an object bounding box counting transformations + * before 2.0 it was named getHeight(); + * @return {Number} height value + */ + getScaledHeight: function() { + return this._getTransformedDimensions().y; + }, - /** - * Returns id attribute for svg output - * @return {String} - */ - getSvgCommons: function() { - return [ - this.id ? 'id="' + this.id + '" ' : '', - this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', - ].join(''); - }, + /** + * Makes sure the scale is valid and modifies it if necessary + * @private + * @param {Number} value + * @return {Number} + */ + _constrainScale: function(value) { + if (Math.abs(value) < this.minScaleLimit) { + if (value < 0) { + return -this.minScaleLimit; + } + else { + return this.minScaleLimit; + } + } + else if (value === 0) { + return 0.0001; + } + return value; + }, - /** - * Returns transform-string for svg-export - * @param {Boolean} use the full transform or the single object one. - * @return {String} - */ - getSvgTransform: function(full, additionalTransform) { - var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), - svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); - return svgTransform + - (additionalTransform || '') + '" '; - }, + /** + * Scales an object (equally by x and y) + * @param {Number} value Scale factor + * @return {fabric.Object} thisArg + * @chainable + */ + scale: function(value) { + this._set('scaleX', value); + this._set('scaleY', value); + return this.setCoords(); + }, - _setSVGBg: function(textBgRects) { - if (this.backgroundColor) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - } - }, + /** + * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) + * @param {Number} value New width value + * @param {Boolean} absolute ignore viewport + * @return {fabric.Object} thisArg + * @chainable + */ + scaleToWidth: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); + return this.scale(value / this.width / boundingRectFactor); + }, - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + /** + * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) + * @param {Number} value New height value + * @param {Boolean} absolute ignore viewport + * @return {fabric.Object} thisArg + * @chainable + */ + scaleToHeight: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); + return this.scale(value / this.height / boundingRectFactor); + }, - /** - * Returns svg clipPath representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toClipPathSVG: function(reviver) { - return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + calcLineCoords: function() { + var vpt = this.getViewportTransform(), + padding = this.padding, angle = degreesToRadians(this.getTotalAngle()), + cos = util.cos(angle), sin = util.sin(angle), + cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, + cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); + + var lineCoords = { + tl: transformPoint(aCoords.tl, vpt), + tr: transformPoint(aCoords.tr, vpt), + bl: transformPoint(aCoords.bl, vpt), + br: transformPoint(aCoords.br, vpt), + }; - /** - * @private - */ - _createBaseClipPathSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var reviver = options.reviver, - additionalTransform = options.additionalTransform || '', - commonPieces = [ - this.getSvgTransform(true, additionalTransform), - this.getSvgCommons(), - ].join(''), - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'); - objectMarkup[index] = commonPieces; - return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); - }, + if (padding) { + lineCoords.tl.x -= cosPMinusSinP; + lineCoords.tl.y -= cosPSinP; + lineCoords.tr.x += cosPSinP; + lineCoords.tr.y -= cosPMinusSinP; + lineCoords.bl.x -= cosPSinP; + lineCoords.bl.y += cosPMinusSinP; + lineCoords.br.x += cosPMinusSinP; + lineCoords.br.y += cosPSinP; + } - /** - * @private - */ - _createBaseSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var noStyle = options.noStyle, - reviver = options.reviver, - styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', - shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', - clipPath = this.clipPath, - vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', - absoluteClipPath = clipPath && clipPath.absolutePositioned, - stroke = this.stroke, fill = this.fill, shadow = this.shadow, - commonPieces, markup = [], clipPathMarkup, - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'), - additionalTransform = options.additionalTransform; - if (clipPath) { - clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; - clipPathMarkup = '\n' + - clipPath.toClipPathSVG(reviver) + - '\n'; - } - if (absoluteClipPath) { - markup.push( - '\n' - ); - } - markup.push( - '\n' - ); - commonPieces = [ - styleInfo, - vectorEffect, - noStyle ? '' : this.addPaintOrder(), ' ', - additionalTransform ? 'transform="' + additionalTransform + '" ' : '', - ].join(''); - objectMarkup[index] = commonPieces; - if (fill && fill.toLive) { - markup.push(fill.toSVG(this)); - } - if (stroke && stroke.toLive) { - markup.push(stroke.toSVG(this)); - } - if (shadow) { - markup.push(shadow.toSVG(this)); - } - if (clipPath) { - markup.push(clipPathMarkup); - } - markup.push(objectMarkup.join('')); - markup.push('\n'); - absoluteClipPath && markup.push('\n'); - return reviver ? reviver(markup.join('')) : markup.join(''); - }, - - addPaintOrder: function() { - return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; - } - }); -})(); -/* _TO_SVG_END_ */ + return lineCoords; + }, + calcOCoords: function () { + var vpt = this.getViewportTransform(), + center = this.getCenterPoint(), + tMatrix = [1, 0, 0, 1, center.x, center.y], + rMatrix = util.calcRotateMatrix({ angle: this.getTotalAngle() - (!!this.group && this.flipX ? 180 : 0) }), + positionMatrix = multiplyMatrices(tMatrix, rMatrix), + startMatrix = multiplyMatrices(vpt, positionMatrix), + finalMatrix = multiplyMatrices(startMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), + transformOptions = this.group ? fabric.util.qrDecompose(this.calcTransformMatrix()) : undefined, + dim = this._calculateCurrentDimensions(transformOptions), + coords = {}; + this.forEachControl(function(control, key, fabricObject) { + coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); + }); -(function() { + // debug code + /* + var canvas = this.canvas; + setTimeout(function () { + if (!canvas) return; + canvas.contextTop.clearRect(0, 0, 700, 700); + canvas.contextTop.fillStyle = 'green'; + Object.keys(coords).forEach(function(key) { + var control = coords[key]; + canvas.contextTop.fillRect(control.x, control.y, 3, 3); + }); + }, 50); + */ + return coords; + }, - var extend = fabric.util.object.extend, - originalSet = 'stateProperties'; + calcACoords: function() { + var rotateMatrix = util.calcRotateMatrix({ angle: this.angle }), + center = this.getRelativeCenterPoint(), + translateMatrix = [1, 0, 0, 1, center.x, center.y], + finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), + dim = this._getTransformedDimensions(), + w = dim.x / 2, h = dim.y / 2; + return { + // corners + tl: transformPoint({ x: -w, y: -h }, finalMatrix), + tr: transformPoint({ x: w, y: -h }, finalMatrix), + bl: transformPoint({ x: -w, y: h }, finalMatrix), + br: transformPoint({ x: w, y: h }, finalMatrix) + }; + }, - /* - Depends on `stateProperties` - */ - function saveProps(origin, destination, props) { - var tmpObj = { }, deep = true; - props.forEach(function(prop) { - tmpObj[prop] = origin[prop]; - }); + /** + * Sets corner and controls position coordinates based on current angle, width and height, left and top. + * oCoords are used to find the corners + * aCoords are used to quickly find an object on the canvas + * lineCoords are used to quickly find object during pointer events. + * See {@link https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords} and {@link http://fabricjs.com/fabric-gotchas} + * + * @param {Boolean} [skipCorners] skip calculation of oCoords. + * @return {fabric.Object} thisArg + * @chainable + */ + setCoords: function(skipCorners) { + this.aCoords = this.calcACoords(); + // in case we are in a group, for how the inner group target check works, + // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. + this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); + if (skipCorners) { + return this; + } + // set coordinates of the draggable boxes in the corners used to scale/rotate the image + this.oCoords = this.calcOCoords(); + this._setCornerCoords && this._setCornerCoords(); + return this; + }, - extend(origin[destination], tmpObj, deep); - } + transformMatrixKey: function(skipGroup) { + var sep = '_', prefix = ''; + if (!skipGroup && this.group) { + prefix = this.group.transformMatrixKey(skipGroup) + sep; + } return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + + sep + this.skewX + sep + this.skewY + sep + this.angle + sep + this.originX + sep + this.originY + + sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY; + }, - function _isEqual(origValue, currentValue, firstPass) { - if (origValue === currentValue) { - // if the objects are identical, return - return true; - } - else if (Array.isArray(origValue)) { - if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { - return false; - } - for (var i = 0, len = origValue.length; i < len; i++) { - if (!_isEqual(origValue[i], currentValue[i])) { - return false; + /** + * calculate transform matrix that represents the current transformations from the + * object's properties. + * @param {Boolean} [skipGroup] return transform matrix for object not counting parent transformations + * There are some situation in which this is useful to avoid the fake rotation. + * @return {Array} transform matrix for the object + */ + calcTransformMatrix: function(skipGroup) { + var matrix = this.calcOwnMatrix(); + if (skipGroup || !this.group) { + return matrix; } - } - return true; - } - else if (origValue && typeof origValue === 'object') { - var keys = Object.keys(origValue), key; - if (!currentValue || - typeof currentValue !== 'object' || - (!firstPass && keys.length !== Object.keys(currentValue).length) - ) { - return false; - } - for (var i = 0, len = keys.length; i < len; i++) { - key = keys[i]; - // since clipPath is in the statefull cache list and the clipPath objects - // would be iterated as an object, this would lead to possible infinite recursion - // we do not want to compare those. - if (key === 'canvas' || key === 'group') { - continue; + var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); + if (cache.key === key) { + return cache.value; } - if (!_isEqual(origValue[key], currentValue[key])) { - return false; + if (this.group) { + matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); } - } - return true; - } - } - - - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - - /** - * Returns true if object state (one of its state properties) was changed - * @param {String} [propertySet] optional name for the set of property we want to save - * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called - */ - hasStateChanged: function(propertySet) { - propertySet = propertySet || originalSet; - var dashedPropertySet = '_' + propertySet; - if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { - return true; - } - return !_isEqual(this[dashedPropertySet], this, true); - }, - - /** - * Saves state of an object - * @param {Object} [options] Object with additional `stateProperties` array to include when saving state - * @return {fabric.Object} thisArg - */ - saveState: function(options) { - var propertySet = options && options.propertySet || originalSet, - destination = '_' + propertySet; - if (!this[destination]) { - return this.setupState(options); - } - saveProps(this, destination, this[propertySet]); - if (options && options.stateProperties) { - saveProps(this, destination, options.stateProperties); - } - return this; - }, - - /** - * Setups state of an object - * @param {Object} [options] Object with additional `stateProperties` array to include when saving state - * @return {fabric.Object} thisArg - */ - setupState: function(options) { - options = options || { }; - var propertySet = options.propertySet || originalSet; - options.propertySet = propertySet; - this['_' + propertySet] = { }; - this.saveState(options); - return this; - } - }); -})(); - - -(function() { - - var degreesToRadians = fabric.util.degreesToRadians; + cache.key = key; + cache.value = matrix; + return matrix; + }, - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Determines which corner has been clicked - * @private - * @param {Object} pointer The pointer indicating the mouse position - * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found - */ - _findTargetCorner: function(pointer, forTouch) { - // objects in group, anykind, are not self modificable, - // must not return an hovered corner. - if (!this.hasControls || this.group || (!this.canvas || this.canvas._activeObject !== this)) { - return false; - } + /** + * calculate transform matrix that represents the current transformations from the + * object's properties, this matrix does not include the group transformation + * @return {Array} transform matrix for the object + */ + calcOwnMatrix: function() { + var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); + if (cache.key === key) { + return cache.value; + } + var center = this.getRelativeCenterPoint(), + options = { + angle: this.angle, + translateX: center.x, + translateY: center.y, + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + flipX: this.flipX, + flipY: this.flipY, + }; + cache.key = key; + cache.value = util.composeMatrix(options); + return cache.value; + }, - var ex = pointer.x, - ey = pointer.y, - xPoints, - lines, keys = Object.keys(this.oCoords), - j = keys.length - 1, i; - this.__corner = 0; + /** + * Calculate object dimensions from its properties + * @private + * @returns {fabric.Point} dimensions + */ + _getNonTransformedDimensions: function() { + return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth); + }, - // cycle in reverse order so we pick first the one on top - for (; j >= 0; j--) { - i = keys[j]; - if (!this.isControlVisible(i)) { - continue; + /** + * Calculate object bounding box dimensions from its properties scale, skew. + * @param {Object} [options] + * @param {Number} [options.scaleX] + * @param {Number} [options.scaleY] + * @param {Number} [options.skewX] + * @param {Number} [options.skewY] + * @private + * @returns {fabric.Point} dimensions + */ + _getTransformedDimensions: function (options) { + options = Object.assign({ + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + width: this.width, + height: this.height, + strokeWidth: this.strokeWidth + }, options || {}); + // stroke is applied before/after transformations are applied according to `strokeUniform` + var preScalingStrokeValue, postScalingStrokeValue, strokeWidth = options.strokeWidth; + if (this.strokeUniform) { + preScalingStrokeValue = 0; + postScalingStrokeValue = strokeWidth; } - - lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); - // // debugging - // - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); - - xPoints = this._findCrossPoints({ x: ex, y: ey }, lines); - if (xPoints !== 0 && xPoints % 2 === 1) { - this.__corner = i; - return i; + else { + preScalingStrokeValue = strokeWidth; + postScalingStrokeValue = 0; + } + var dimX = options.width + preScalingStrokeValue, + dimY = options.height + preScalingStrokeValue, + finalDimensions, + noSkew = options.skewX === 0 && options.skewY === 0; + if (noSkew) { + finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY); + } + else { + var bbox = util.sizeAfterTransform(dimX, dimY, options); + finalDimensions = new fabric.Point(bbox.x, bbox.y); } - } - return false; - }, - - /** - * Calls a function for each control. The function gets called, - * with the control, the object that is calling the iterator and the control's key - * @param {Function} fn function to iterate over the controls over - */ - forEachControl: function(fn) { - for (var i in this.controls) { - fn(this.controls[i], i, this); - }; - }, - - /** - * Sets the coordinates of the draggable boxes in the corners of - * the image used to scale/rotate it. - * note: if we would switch to ROUND corner area, all of this would disappear. - * everything would resolve to a single point and a pythagorean theorem for the distance - * @private - */ - _setCornerCoords: function() { - var coords = this.oCoords; - for (var control in coords) { - var controlObject = this.controls[control]; - coords[control].corner = controlObject.calcCornerCoords( - this.angle, this.cornerSize, coords[control].x, coords[control].y, false); - coords[control].touchCorner = controlObject.calcCornerCoords( - this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); - } - }, + return finalDimensions.scalarAddEquals(postScalingStrokeValue); + }, - /** - * Draws a colored layer behind the object, inside its selection borders. - * Requires public options: padding, selectionBackgroundColor - * this function is called when the context is transformed - * has checks to be skipped when the object is on a staticCanvas - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @return {fabric.Object} thisArg - * @chainable - */ - drawSelectionBackground: function(ctx) { - if (!this.selectionBackgroundColor || - (this.canvas && !this.canvas.interactive) || - (this.canvas && this.canvas._activeObject !== this) - ) { - return this; - } - ctx.save(); - var center = this.getCenterPoint(), wh = this._calculateCurrentDimensions(), - vpt = this.canvas.viewportTransform; - ctx.translate(center.x, center.y); - ctx.scale(1 / vpt[0], 1 / vpt[3]); - ctx.rotate(degreesToRadians(this.angle)); - ctx.fillStyle = this.selectionBackgroundColor; - ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); - ctx.restore(); - return this; - }, + /** + * Calculate object dimensions for controls box, including padding and canvas zoom. + * and active selection + * @private + * @param {object} [options] transform options + * @returns {fabric.Point} dimensions + */ + _calculateCurrentDimensions: function(options) { + var vpt = this.getViewportTransform(), + dim = this._getTransformedDimensions(options), + p = transformPoint(dim, vpt, true); + return p.scalarAdd(2 * this.padding); + }, + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Draws borders of an object's bounding box. - * Requires public properties: width, height - * Requires public options: padding, borderColor - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @param {Object} styleOverride object to override the object style - * @return {fabric.Object} thisArg - * @chainable - */ - drawBorders: function(ctx, styleOverride) { - styleOverride = styleOverride || {}; - var wh = this._calculateCurrentDimensions(), - strokeWidth = this.borderScaleFactor, - width = wh.x + strokeWidth, - height = wh.y + strokeWidth, - hasControls = typeof styleOverride.hasControls !== 'undefined' ? - styleOverride.hasControls : this.hasControls, - shouldStroke = false; + (function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - ctx.save(); - ctx.strokeStyle = styleOverride.borderColor || this.borderColor; - this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray); - - ctx.strokeRect( - -width / 2, - -height / 2, - width, - height - ); - - if (hasControls) { - ctx.beginPath(); - this.forEachControl(function(control, key, fabricObject) { - // in this moment, the ctx is centered on the object. - // width and height of the above function are the size of the bbox. - if (control.withConnection && control.getVisibility(fabricObject, key)) { - // reset movement for each control - shouldStroke = true; - ctx.moveTo(control.x * width, control.y * height); - ctx.lineTo( - control.x * width + control.offsetX, - control.y * height + control.offsetY - ); + /** + * Checks if object is decendant of target + * Should be used instead of @link {fabric.Collection.contains} for performance reasons + * @param {fabric.Object|fabric.StaticCanvas} target + * @returns {boolean} + */ + isDescendantOf: function (target) { + var parent = this.group || this.canvas; + while (parent) { + if (target === parent) { + return true; } - }); - if (shouldStroke) { - ctx.stroke(); + else if (parent instanceof fabric.StaticCanvas) { + // happens after all parents were traversed through without a match + return false; + } + parent = parent.group || parent.canvas; } - } - ctx.restore(); - return this; - }, - - /** - * Draws borders of an object's bounding box when it is inside a group. - * Requires public properties: width, height - * Requires public options: padding, borderColor - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @param {object} options object representing current object parameters - * @param {Object} styleOverride object to override the object style - * @return {fabric.Object} thisArg - * @chainable - */ - drawBordersInGroup: function(ctx, options, styleOverride) { - styleOverride = styleOverride || {}; - var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), - strokeWidth = this.strokeWidth, - strokeUniform = this.strokeUniform, - borderScaleFactor = this.borderScaleFactor, - width = - bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor, - height = - bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor; - ctx.save(); - this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray); - ctx.strokeStyle = styleOverride.borderColor || this.borderColor; - ctx.strokeRect( - -width / 2, - -height / 2, - width, - height - ); + return false; + }, - ctx.restore(); - return this; - }, + /** + * + * @typedef {fabric.Object[] | [...fabric.Object[], fabric.StaticCanvas]} Ancestors + * + * @param {boolean} [strict] returns only ancestors that are objects (without canvas) + * @returns {Ancestors} ancestors from bottom to top + */ + getAncestors: function (strict) { + var ancestors = []; + var parent = this.group || (strict ? undefined : this.canvas); + while (parent) { + ancestors.push(parent); + parent = parent.group || (strict ? undefined : parent.canvas); + } + return ancestors; + }, - /** - * Draws corners of an object's bounding box. - * Requires public properties: width, height - * Requires public options: cornerSize, padding - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @param {Object} styleOverride object to override the object style - * @return {fabric.Object} thisArg - * @chainable - */ - drawControls: function(ctx, styleOverride) { - styleOverride = styleOverride || {}; - ctx.save(); - var retinaScaling = this.canvas.getRetinaScaling(), matrix, p; - ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); - ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; - if (!this.transparentCorners) { - ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; - } - this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); - this.setCoords(); - if (this.group) { - // fabricJS does not really support drawing controls inside groups, - // this piece of code here helps having at least the control in places. - // If an application needs to show some objects as selected because of some UI state - // can still call Object._renderControls() on any object they desire, independently of groups. - // using no padding, circular controls and hiding the rotating cursor is higly suggested, - matrix = this.group.calcTransformMatrix(); - } - this.forEachControl(function(control, key, fabricObject) { - p = fabricObject.oCoords[key]; - if (control.getVisibility(fabricObject, key)) { - if (matrix) { - p = fabric.util.transformPoint(p, matrix); - } - control.render(ctx, p.x, p.y, styleOverride, fabricObject); + /** + * Returns an object that represent the ancestry situation. + * + * @typedef {object} AncestryComparison + * @property {Ancestors} common ancestors of `this` and `other` (may include `this` | `other`) + * @property {Ancestors} fork ancestors that are of `this` only + * @property {Ancestors} otherFork ancestors that are of `other` only + * + * @param {fabric.Object} other + * @param {boolean} [strict] finds only ancestors that are objects (without canvas) + * @returns {AncestryComparison | undefined} + * + */ + findCommonAncestors: function (other, strict) { + if (this === other) { + return { + fork: [], + otherFork: [], + common: [this].concat(this.getAncestors(strict)) + }; } - }); - ctx.restore(); - - return this; - }, - - /** - * Returns true if the specified control is visible, false otherwise. - * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. - * @returns {Boolean} true if the specified control is visible, false otherwise - */ - isControlVisible: function(controlKey) { - return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); - }, - - /** - * Sets the visibility of the specified control. - * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. - * @param {Boolean} visible true to set the specified control visible, false otherwise - * @return {fabric.Object} thisArg - * @chainable - */ - setControlVisible: function(controlKey, visible) { - if (!this._controlsVisibility) { - this._controlsVisibility = {}; - } - this._controlsVisibility[controlKey] = visible; - return this; - }, - - /** - * Sets the visibility state of object controls. - * @param {Object} [options] Options object - * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it - * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it - * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it - * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it - * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it - * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it - * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it - * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it - * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it - * @return {fabric.Object} thisArg - * @chainable - */ - setControlsVisibility: function(options) { - options || (options = { }); + else if (!other) { + // meh, warn and inform, and not my issue. + // the argument is NOT optional, we can't end up here. + return undefined; + } + var ancestors = this.getAncestors(strict); + var otherAncestors = other.getAncestors(strict); + // if `this` has no ancestors and `this` is top ancestor of `other` we must handle the following case + if (ancestors.length === 0 && otherAncestors.length > 0 && this === otherAncestors[otherAncestors.length - 1]) { + return { + fork: [], + otherFork: [other].concat(otherAncestors.slice(0, otherAncestors.length - 1)), + common: [this] + }; + } + // compare ancestors + for (var i = 0, ancestor; i < ancestors.length; i++) { + ancestor = ancestors[i]; + if (ancestor === other) { + return { + fork: [this].concat(ancestors.slice(0, i)), + otherFork: [], + common: ancestors.slice(i) + }; + } + for (var j = 0; j < otherAncestors.length; j++) { + if (this === otherAncestors[j]) { + return { + fork: [], + otherFork: [other].concat(otherAncestors.slice(0, j)), + common: [this].concat(ancestors) + }; + } + if (ancestor === otherAncestors[j]) { + return { + fork: [this].concat(ancestors.slice(0, i)), + otherFork: [other].concat(otherAncestors.slice(0, j)), + common: ancestors.slice(i) + }; + } + } + } + // nothing shared + return { + fork: [this].concat(ancestors), + otherFork: [other].concat(otherAncestors), + common: [] + }; + }, - for (var p in options) { - this.setControlVisible(p, options[p]); + /** + * + * @param {fabric.Object} other + * @param {boolean} [strict] checks only ancestors that are objects (without canvas) + * @returns {boolean} + */ + hasCommonAncestors: function (other, strict) { + var commonAncestors = this.findCommonAncestors(other, strict); + return commonAncestors && !!commonAncestors.ancestors.length; } - return this; - }, - + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * This callback function is called every time _discardActiveObject or _setActiveObject - * try to to deselect this object. If the function returns true, the process is cancelled - * @param {Object} [options] options sent from the upper functions - * @param {Event} [options.e] event if the process is generated by an event - */ - onDeselect: function() { - // implemented by sub-classes, as needed. - }, + (function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Moves an object to the bottom of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + sendToBack: function() { + if (this.group) { + fabric.StaticCanvas.prototype.sendToBack.call(this.group, this); + } + else if (this.canvas) { + this.canvas.sendToBack(this); + } + return this; + }, - /** - * This callback function is called every time _discardActiveObject or _setActiveObject - * try to to select this object. If the function returns true, the process is cancelled - * @param {Object} [options] options sent from the upper functions - * @param {Event} [options.e] event if the process is generated by an event - */ - onSelect: function() { - // implemented by sub-classes, as needed. - } - }); -})(); + /** + * Moves an object to the top of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + bringToFront: function() { + if (this.group) { + fabric.StaticCanvas.prototype.bringToFront.call(this.group, this); + } + else if (this.canvas) { + this.canvas.bringToFront(this); + } + return this; + }, + /** + * Moves an object down in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + sendBackwards: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.sendBackwards(this, intersecting); + } + return this; + }, -fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + /** + * Moves an object up in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + bringForward: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.bringForward(this, intersecting); + } + return this; + }, - /** - * Animation duration (in ms) for fx* methods - * @type Number - * @default - */ - FX_DURATION: 500, + /** + * Moves an object to specified level in stack of drawn objects + * @param {Number} index New position of object + * @return {fabric.Object} thisArg + * @chainable + */ + moveTo: function(index) { + if (this.group && this.group.type !== 'activeSelection') { + fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index); + } + else if (this.canvas) { + this.canvas.moveTo(this, index); + } + return this; + }, - /** - * Centers object horizontally with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxCenterObjectH: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.left, - endValue: this.getCenter().left, - duration: this.FX_DURATION, - onChange: function(value) { - object.set('left', value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function() { - object.setCoords(); - onComplete(); + /** + * + * @param {fabric.Object} other object to compare against + * @returns {boolean | undefined} if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns `undefined` + */ + isInFrontOf: function (other) { + if (this === other) { + return undefined; + } + var ancestorData = this.findCommonAncestors(other); + if (!ancestorData) { + return undefined; + } + if (ancestorData.fork.includes(other)) { + return true; + } + if (ancestorData.otherFork.includes(this)) { + return false; + } + var firstCommonAncestor = ancestorData.common[0]; + if (!firstCommonAncestor) { + return undefined; + } + var headOfFork = ancestorData.fork.pop(), + headOfOtherFork = ancestorData.otherFork.pop(), + thisIndex = firstCommonAncestor._objects.indexOf(headOfFork), + otherIndex = firstCommonAncestor._objects.indexOf(headOfOtherFork); + return thisIndex > -1 && thisIndex > otherIndex; } }); - }, + })(typeof exports !== 'undefined' ? exports : window); - /** - * Centers object vertically with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxCenterObjectV: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.top, - endValue: this.getCenter().top, - duration: this.FX_DURATION, - onChange: function(value) { - object.set('top', value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function() { - object.setCoords(); - onComplete(); + /* _TO_SVG_START_ */ + (function(global) { + var fabric = global.fabric; + function getSvgColorString(prop, value) { + if (!value) { + return prop + ': none; '; } - }); - }, - - /** - * Same as `fabric.Canvas#remove` but animated - * @param {fabric.Object} object Object to remove - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxRemove: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.opacity, - endValue: 0, - duration: this.FX_DURATION, - onChange: function(value) { - object.set('opacity', value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function () { - _this.remove(object); - onComplete(); + else if (value.toLive) { + return prop + ': url(#SVGID_' + value.id + '); '; + } + else { + var color = new fabric.Color(value), + str = prop + ': ' + color.toRgb() + '; ', + opacity = color.getAlpha(); + if (opacity !== 1) { + //change the color in rgb + opacity + str += prop + '-opacity: ' + opacity.toString() + '; '; + } + return str; } - }); - } -}); - -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Animates object's properties - * @param {String|Object} property Property to animate (if string) or properties to animate (if object) - * @param {Number|Object} value Value to animate property to (if string was given first) or options object - * @return {fabric.Object} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation} - * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties) - * - * As object — multiple properties - * - * object.animate({ left: ..., top: ... }); - * object.animate({ left: ..., top: ... }, { duration: ... }); - * - * As string — one property - * - * object.animate('left', ...); - * object.animate('left', { duration: ... }); - * - */ - animate: function () { - if (arguments[0] && typeof arguments[0] === 'object') { - var propsToAnimate = [], prop, skipCallbacks, out = []; - for (prop in arguments[0]) { - propsToAnimate.push(prop); - } - for (var i = 0, len = propsToAnimate.length; i < len; i++) { - prop = propsToAnimate[i]; - skipCallbacks = i !== len - 1; - out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks)); - } - return out; - } - else { - return this._animate.apply(this, arguments); } - }, - /** - * @private - * @param {String} property Property to animate - * @param {String} to Value to animate to - * @param {Object} [options] Options object - * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked - */ - _animate: function(property, to, options, skipCallbacks) { - var _this = this, propPair; + var toFixed = fabric = global.fabric, toFixed = fabric.util.toFixed; - to = to.toString(); + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} + */ + getSvgStyles: function(skipShadow) { + + var fillRule = this.fillRule ? this.fillRule : 'nonzero', + strokeWidth = this.strokeWidth ? this.strokeWidth : '0', + strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', + strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', + strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', + strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', + strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', + opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', + visibility = this.visible ? '' : ' visibility: hidden;', + filter = skipShadow ? '' : this.getSvgFilter(), + fill = getSvgColorString('fill', this.fill), + stroke = getSvgColorString('stroke', this.stroke); + + return [ + stroke, + 'stroke-width: ', strokeWidth, '; ', + 'stroke-dasharray: ', strokeDashArray, '; ', + 'stroke-linecap: ', strokeLineCap, '; ', + 'stroke-dashoffset: ', strokeDashOffset, '; ', + 'stroke-linejoin: ', strokeLineJoin, '; ', + 'stroke-miterlimit: ', strokeMiterLimit, '; ', + fill, + 'fill-rule: ', fillRule, '; ', + 'opacity: ', opacity, ';', + filter, + visibility + ].join(''); + }, - if (!options) { - options = { }; - } - else { - options = fabric.util.object.clone(options); - } + /** + * Returns styles-string for svg-export + * @param {Object} style the object from which to retrieve style properties + * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. + * @return {String} + */ + getSvgSpanStyles: function(style, useWhiteSpace) { + var term = '; '; + var fontFamily = style.fontFamily ? + 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? + '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; + var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', + fontFamily = fontFamily, + fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', + fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', + fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', + fill = style.fill ? getSvgColorString('fill', style.fill) : '', + stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', + textDecoration = this.getSvgTextDecoration(style), + deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; + if (textDecoration) { + textDecoration = 'text-decoration: ' + textDecoration + term; + } + + return [ + stroke, + strokeWidth, + fontFamily, + fontSize, + fontStyle, + fontWeight, + textDecoration, + fill, + deltaY, + useWhiteSpace ? 'white-space: pre; ' : '' + ].join(''); + }, - if (~property.indexOf('.')) { - propPair = property.split('.'); - } + /** + * Returns text-decoration property for svg-export + * @param {Object} style the object from which to retrieve style properties + * @return {String} + */ + getSvgTextDecoration: function(style) { + return ['overline', 'underline', 'line-through'].filter(function(decoration) { + return style[decoration.replace('-', '')]; + }).join(' '); + }, + + /** + * Returns filter for svg shadow + * @return {String} + */ + getSvgFilter: function() { + return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; + }, + + /** + * Returns id attribute for svg output + * @return {String} + */ + getSvgCommons: function() { + return [ + this.id ? 'id="' + this.id + '" ' : '', + this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', + ].join(''); + }, - var propIsColor = - _this.colorProperties.indexOf(property) > -1 || - (propPair && _this.colorProperties.indexOf(propPair[1]) > -1); + /** + * Returns transform-string for svg-export + * @param {Boolean} use the full transform or the single object one. + * @return {String} + */ + getSvgTransform: function(full, additionalTransform) { + var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), + svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); + return svgTransform + + (additionalTransform || '') + '" '; + }, - var currentValue = propPair - ? this.get(propPair[0])[propPair[1]] - : this.get(property); + _setSVGBg: function(textBgRects) { + if (this.backgroundColor) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + } + }, - if (!('from' in options)) { - options.from = currentValue; - } + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - if (!propIsColor) { - if (~to.indexOf('=')) { - to = currentValue + parseFloat(to.replace('=', '')); - } - else { - to = parseFloat(to); - } - } + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function(reviver) { + return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - var _options = { - target: this, - startValue: options.from, - endValue: to, - byValue: options.by, - easing: options.easing, - duration: options.duration, - abort: options.abort && function(value, valueProgress, timeProgress) { - return options.abort.call(_this, value, valueProgress, timeProgress); + /** + * @private + */ + _createBaseClipPathSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var reviver = options.reviver, + additionalTransform = options.additionalTransform || '', + commonPieces = [ + this.getSvgTransform(true, additionalTransform), + this.getSvgCommons(), + ].join(''), + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'); + objectMarkup[index] = commonPieces; + return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); }, - onChange: function (value, valueProgress, timeProgress) { - if (propPair) { - _this[propPair[0]][propPair[1]] = value; + + /** + * @private + */ + _createBaseSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var noStyle = options.noStyle, + reviver = options.reviver, + styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', + shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', + clipPath = this.clipPath, + vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', + absoluteClipPath = clipPath && clipPath.absolutePositioned, + stroke = this.stroke, fill = this.fill, shadow = this.shadow, + commonPieces, markup = [], clipPathMarkup, + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'), + additionalTransform = options.additionalTransform; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + clipPathMarkup = '\n' + + clipPath.toClipPathSVG(reviver) + + '\n'; + } + if (absoluteClipPath) { + markup.push( + '\n' + ); } - else { - _this.set(property, value); + markup.push( + '\n' + ); + commonPieces = [ + styleInfo, + vectorEffect, + noStyle ? '' : this.addPaintOrder(), ' ', + additionalTransform ? 'transform="' + additionalTransform + '" ' : '', + ].join(''); + objectMarkup[index] = commonPieces; + if (fill && fill.toLive) { + markup.push(fill.toSVG(this)); } - if (skipCallbacks) { - return; + if (stroke && stroke.toLive) { + markup.push(stroke.toSVG(this)); } - options.onChange && options.onChange(value, valueProgress, timeProgress); - }, - onComplete: function (value, valueProgress, timeProgress) { - if (skipCallbacks) { - return; + if (shadow) { + markup.push(shadow.toSVG(this)); + } + if (clipPath) { + markup.push(clipPathMarkup); } + markup.push(objectMarkup.join('')); + markup.push('\n'); + absoluteClipPath && markup.push('\n'); + return reviver ? reviver(markup.join('')) : markup.join(''); + }, - _this.setCoords(); - options.onComplete && options.onComplete(value, valueProgress, timeProgress); + addPaintOrder: function() { + return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; } - }; - - if (propIsColor) { - return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options); - } - else { - return fabric.util.animate(_options); - } - } -}); - - -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; + }); + })(typeof exports !== 'undefined' ? exports : window); + /* _TO_SVG_END_ */ - if (fabric.Line) { - fabric.warn('fabric.Line is already defined'); - return; - } + (function(global) { + var fabric = global.fabric, extend = fabric.util.object.extend, + originalSet = 'stateProperties'; - /** - * Line class - * @class fabric.Line - * @extends fabric.Object - * @see {@link fabric.Line#initialize} for constructor definition - */ - fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { + /* + Depends on `stateProperties` + */ + function saveProps(origin, destination, props) { + var tmpObj = { }, deep = true; + props.forEach(function(prop) { + tmpObj[prop] = origin[prop]; + }); - /** - * Type of an object - * @type String - * @default - */ - type: 'line', + extend(origin[destination], tmpObj, deep); + } - /** - * x value or first line edge - * @type Number - * @default - */ - x1: 0, + function _isEqual(origValue, currentValue, firstPass) { + if (origValue === currentValue) { + // if the objects are identical, return + return true; + } + else if (Array.isArray(origValue)) { + if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { + return false; + } + for (var i = 0, len = origValue.length; i < len; i++) { + if (!_isEqual(origValue[i], currentValue[i])) { + return false; + } + } + return true; + } + else if (origValue && typeof origValue === 'object') { + var keys = Object.keys(origValue), key; + if (!currentValue || + typeof currentValue !== 'object' || + (!firstPass && keys.length !== Object.keys(currentValue).length) + ) { + return false; + } + for (var i = 0, len = keys.length; i < len; i++) { + key = keys[i]; + // since clipPath is in the statefull cache list and the clipPath objects + // would be iterated as an object, this would lead to possible infinite recursion + // we do not want to compare those. + if (key === 'canvas' || key === 'group') { + continue; + } + if (!_isEqual(origValue[key], currentValue[key])) { + return false; + } + } + return true; + } + } - /** - * y value or first line edge - * @type Number - * @default - */ - y1: 0, - /** - * x value or second line edge - * @type Number - * @default - */ - x2: 0, + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * y value or second line edge - * @type Number - * @default - */ - y2: 0, + /** + * Returns true if object state (one of its state properties) was changed + * @param {String} [propertySet] optional name for the set of property we want to save + * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called + */ + hasStateChanged: function(propertySet) { + propertySet = propertySet || originalSet; + var dashedPropertySet = '_' + propertySet; + if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { + return true; + } + return !_isEqual(this[dashedPropertySet], this, true); + }, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), + /** + * Saves state of an object + * @param {Object} [options] Object with additional `stateProperties` array to include when saving state + * @return {fabric.Object} thisArg + */ + saveState: function(options) { + var propertySet = options && options.propertySet || originalSet, + destination = '_' + propertySet; + if (!this[destination]) { + return this.setupState(options); + } + saveProps(this, destination, this[propertySet]); + if (options && options.stateProperties) { + saveProps(this, destination, options.stateProperties); + } + return this; + }, - /** - * Constructor - * @param {Array} [points] Array of points - * @param {Object} [options] Options object - * @return {fabric.Line} thisArg - */ - initialize: function(points, options) { - if (!points) { - points = [0, 0, 0, 0]; + /** + * Setups state of an object + * @param {Object} [options] Object with additional `stateProperties` array to include when saving state + * @return {fabric.Object} thisArg + */ + setupState: function(options) { + options = options || { }; + var propertySet = options.propertySet || originalSet; + options.propertySet = propertySet; + this['_' + propertySet] = { }; + this.saveState(options); + return this; } + }); + })(typeof exports !== 'undefined' ? exports : window); - this.callSuper('initialize', options); - - this.set('x1', points[0]); - this.set('y1', points[1]); - this.set('x2', points[2]); - this.set('y2', points[3]); + (function(global) { - this._setWidthHeight(options); - }, + var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians; - /** - * @private - * @param {Object} [options] Options - */ - _setWidthHeight: function(options) { - options || (options = { }); + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Determines which corner has been clicked + * @private + * @param {Object} pointer The pointer indicating the mouse position + * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found + */ + _findTargetCorner: function(pointer, forTouch) { + if (!this.hasControls || (!this.canvas || this.canvas._activeObject !== this)) { + return false; + } + var xPoints, + lines, keys = Object.keys(this.oCoords), + j = keys.length - 1, i; + this.__corner = 0; - this.width = Math.abs(this.x2 - this.x1); - this.height = Math.abs(this.y2 - this.y1); + // cycle in reverse order so we pick first the one on top + for (; j >= 0; j--) { + i = keys[j]; + if (!this.isControlVisible(i)) { + continue; + } - this.left = 'left' in options - ? options.left - : this._getLeftToOriginX(); + lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); + // // debugging + // + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + + xPoints = this._findCrossPoints(pointer, lines); + if (xPoints !== 0 && xPoints % 2 === 1) { + this.__corner = i; + return i; + } + } + return false; + }, - this.top = 'top' in options - ? options.top - : this._getTopToOriginY(); - }, + /** + * Calls a function for each control. The function gets called, + * with the control, the object that is calling the iterator and the control's key + * @param {Function} fn function to iterate over the controls over + */ + forEachControl: function(fn) { + for (var i in this.controls) { + fn(this.controls[i], i, this); + } }, - /** - * @private - * @param {String} key - * @param {*} value - */ - _set: function(key, value) { - this.callSuper('_set', key, value); - if (typeof coordProps[key] !== 'undefined') { - this._setWidthHeight(); - } - return this; - }, + /** + * Sets the coordinates of the draggable boxes in the corners of + * the image used to scale/rotate it. + * note: if we would switch to ROUND corner area, all of this would disappear. + * everything would resolve to a single point and a pythagorean theorem for the distance + * @private + */ + _setCornerCoords: function() { + var coords = this.oCoords; - /** - * @private - * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line. - */ - _getLeftToOriginX: makeEdgeToOriginGetter( - { // property names - origin: 'originX', - axis1: 'x1', - axis2: 'x2', - dimension: 'width' + for (var control in coords) { + var controlObject = this.controls[control]; + coords[control].corner = controlObject.calcCornerCoords( + this.angle, this.cornerSize, coords[control].x, coords[control].y, false); + coords[control].touchCorner = controlObject.calcCornerCoords( + this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); + } }, - { // possible values of origin - nearest: 'left', - center: 'center', - farthest: 'right' - } - ), - /** - * @private - * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line. - */ - _getTopToOriginY: makeEdgeToOriginGetter( - { // property names - origin: 'originY', - axis1: 'y1', - axis2: 'y2', - dimension: 'height' + /** + * Draws a colored layer behind the object, inside its selection borders. + * Requires public options: padding, selectionBackgroundColor + * this function is called when the context is transformed + * has checks to be skipped when the object is on a staticCanvas + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @return {fabric.Object} thisArg + * @chainable + */ + drawSelectionBackground: function(ctx) { + if (!this.selectionBackgroundColor || + (this.canvas && !this.canvas.interactive) || + (this.canvas && this.canvas._activeObject !== this) + ) { + return this; + } + ctx.save(); + var center = this.getRelativeCenterPoint(), wh = this._calculateCurrentDimensions(), + vpt = this.canvas.viewportTransform; + ctx.translate(center.x, center.y); + ctx.scale(1 / vpt[0], 1 / vpt[3]); + ctx.rotate(degreesToRadians(this.angle)); + ctx.fillStyle = this.selectionBackgroundColor; + ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); + ctx.restore(); + return this; }, - { // possible values of origin - nearest: 'top', - center: 'center', - farthest: 'bottom' - } - ), - - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - ctx.beginPath(); + /** + * @public override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style. + * @param {CanvasRenderingContext2D} ctx ctx is rotated and translated so that (0,0) is at object's center + * @param {fabric.Point} size the control box size used + */ + strokeBorders: function (ctx, size) { + ctx.strokeRect( + -size.x / 2, + -size.y / 2, + size.x, + size.y + ); + }, - var p = this.calcLinePoints(); - ctx.moveTo(p.x1, p.y1); - ctx.lineTo(p.x2, p.y2); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {fabric.Point} size + * @param {Object} styleOverride object to override the object style + */ + _drawBorders: function (ctx, size, styleOverride) { + var options = Object.assign({ + hasControls: this.hasControls, + borderColor: this.borderColor, + borderDashArray: this.borderDashArray + }, styleOverride || {}); + ctx.save(); + ctx.strokeStyle = options.borderColor; + this._setLineDash(ctx, options.borderDashArray); + this.strokeBorders(ctx, size); + options.hasControls && this.drawControlsConnectingLines(ctx, size); + ctx.restore(); + }, - ctx.lineWidth = this.strokeWidth; + /** + * Draws borders of an object's bounding box. + * Requires public properties: width, height + * Requires public options: padding, borderColor + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {object} options object representing current object parameters + * @param {Object} [styleOverride] object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawBorders: function (ctx, options, styleOverride) { + var size; + if ((styleOverride && styleOverride.forActiveSelection) || this.group) { + var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), + strokeFactor = this.strokeUniform ? + new fabric.Point(0, 0).scalarAddEquals(this.canvas.getZoom()) : + new fabric.Point(options.scaleX, options.scaleY), + stroke = strokeFactor.scalarMultiplyEquals(this.strokeWidth); + size = bbox.addEquals(stroke).scalarAddEquals(this.borderScaleFactor); + } + else { + size = this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor); + } + this._drawBorders(ctx, size, styleOverride); + return this; + }, - // TODO: test this - // make sure setting "fill" changes color of a line - // (by copying fillStyle to strokeStyle, since line is stroked, not filled) - var origStrokeStyle = ctx.strokeStyle; - ctx.strokeStyle = this.stroke || ctx.fillStyle; - this.stroke && this._renderStroke(ctx); - ctx.strokeStyle = origStrokeStyle; - }, + /** + * Draws lines from a borders of an object's bounding box to controls that have `withConnection` property set. + * Requires public properties: width, height + * Requires public options: padding, borderColor + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {number} width object final width + * @param {number} height object final height + * @return {fabric.Object} thisArg + * @chainable + */ + drawControlsConnectingLines: function (ctx, size) { + var shouldStroke = false; - /** - * This function is an helper for svg import. it returns the center of the object in the svg - * untransformed coordinates - * @private - * @return {Object} center point from element coordinates - */ - _findCenterFromElement: function() { - return { - x: (this.x1 + this.x2) / 2, - y: (this.y1 + this.y2) / 2, - }; - }, + ctx.beginPath(); + this.forEachControl(function (control, key, fabricObject) { + // in this moment, the ctx is centered on the object. + // width and height of the above function are the size of the bbox. + if (control.withConnection && control.getVisibility(fabricObject, key)) { + // reset movement for each control + shouldStroke = true; + ctx.moveTo(control.x * size.x, control.y * size.y); + ctx.lineTo( + control.x * size.x + control.offsetX, + control.y * size.y + control.offsetY + ); + } + }); + shouldStroke && ctx.stroke(); - /** - * Returns object representation of an instance - * @method toObject - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); - }, + return this; + }, - /* - * Calculate object dimensions from its properties - * @private - */ - _getNonTransformedDimensions: function() { - var dim = this.callSuper('_getNonTransformedDimensions'); - if (this.strokeLineCap === 'butt') { - if (this.width === 0) { - dim.y -= this.strokeWidth; - } - if (this.height === 0) { - dim.x -= this.strokeWidth; + /** + * Draws corners of an object's bounding box. + * Requires public properties: width, height + * Requires public options: cornerSize, padding + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawControls: function(ctx, styleOverride) { + styleOverride = styleOverride || {}; + ctx.save(); + var retinaScaling = this.canvas.getRetinaScaling(), p; + ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); + ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; + if (!this.transparentCorners) { + ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; } - } - return dim; - }, - - /** - * Recalculates line points given width and height - * @private - */ - calcLinePoints: function() { - var xMult = this.x1 <= this.x2 ? -1 : 1, - yMult = this.y1 <= this.y2 ? -1 : 1, - x1 = (xMult * this.width * 0.5), - y1 = (yMult * this.height * 0.5), - x2 = (xMult * this.width * -0.5), - y2 = (yMult * this.height * -0.5); + this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); + this.setCoords(); + this.forEachControl(function(control, key, fabricObject) { + if (control.getVisibility(fabricObject, key)) { + p = fabricObject.oCoords[key]; + control.render(ctx, p.x, p.y, styleOverride, fabricObject); + } + }); + ctx.restore(); - return { - x1: x1, - x2: x2, - y1: y1, - y2: y2 - }; - }, + return this; + }, - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var p = this.calcLinePoints(); - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - }); + /** + * Returns true if the specified control is visible, false otherwise. + * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. + * @returns {Boolean} true if the specified control is visible, false otherwise + */ + isControlVisible: function(controlKey) { + return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); + }, - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement}) - * @static - * @memberOf fabric.Line - * @see http://www.w3.org/TR/SVG/shapes.html#LineElement - */ - fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); + /** + * Sets the visibility of the specified control. + * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. + * @param {Boolean} visible true to set the specified control visible, false otherwise + * @return {fabric.Object} thisArg + * @chainable + */ + setControlVisible: function(controlKey, visible) { + if (!this._controlsVisibility) { + this._controlsVisibility = {}; + } + this._controlsVisibility[controlKey] = visible; + return this; + }, - /** - * Returns fabric.Line instance from an SVG element - * @static - * @memberOf fabric.Line - * @param {SVGElement} element Element to parse - * @param {Object} [options] Options object - * @param {Function} [callback] callback function invoked after parsing - */ - fabric.Line.fromElement = function(element, callback, options) { - options = options || { }; - var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), - points = [ - parsedAttributes.x1 || 0, - parsedAttributes.y1 || 0, - parsedAttributes.x2 || 0, - parsedAttributes.y2 || 0 - ]; - callback(new fabric.Line(points, extend(parsedAttributes, options))); - }; - /* _FROM_SVG_END_ */ + /** + * Sets the visibility state of object controls. + * @param {Object} [options] Options object + * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it + * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it + * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it + * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it + * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it + * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it + * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it + * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it + * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it + * @return {fabric.Object} thisArg + * @chainable + */ + setControlsVisibility: function(options) { + options || (options = { }); - /** - * Returns fabric.Line instance from an object representation - * @static - * @memberOf fabric.Line - * @param {Object} object Object to create an instance from - * @param {function} [callback] invoked with new instance as first argument - */ - fabric.Line.fromObject = function(object, callback) { - function _callback(instance) { - delete instance.points; - callback && callback(instance); - }; - var options = clone(object, true); - options.points = [object.x1, object.y1, object.x2, object.y2]; - fabric.Object._fromObject('Line', options, _callback, 'points'); - }; + for (var p in options) { + this.setControlVisible(p, options[p]); + } + return this; + }, - /** - * Produces a function that calculates distance from canvas edge to Line origin. - */ - function makeEdgeToOriginGetter(propertyNames, originValues) { - var origin = propertyNames.origin, - axis1 = propertyNames.axis1, - axis2 = propertyNames.axis2, - dimension = propertyNames.dimension, - nearest = originValues.nearest, - center = originValues.center, - farthest = originValues.farthest; - - return function() { - switch (this.get(origin)) { - case nearest: - return Math.min(this.get(axis1), this.get(axis2)); - case center: - return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); - case farthest: - return Math.max(this.get(axis1), this.get(axis2)); - } - }; - } + /** + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to deselect this object. If the function returns true, the process is cancelled + * @param {Object} [options] options sent from the upper functions + * @param {Event} [options.e] event if the process is generated by an event + */ + onDeselect: function() { + // implemented by sub-classes, as needed. + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to select this object. If the function returns true, the process is cancelled + * @param {Object} [options] options sent from the upper functions + * @param {Event} [options.e] event if the process is generated by an event + */ + onSelect: function() { + // implemented by sub-classes, as needed. + } + }); + })(typeof exports !== 'undefined' ? exports : window); -(function(global) { + (function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - 'use strict'; + /** + * Animation duration (in ms) for fx* methods + * @type Number + * @default + */ + FX_DURATION: 500, - var fabric = global.fabric || (global.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians; + /** + * Centers object horizontally with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxCenterObjectH: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.getX(), + endValue: this.getCenterPoint().x, + duration: this.FX_DURATION, + onChange: function(value) { + object.setX(value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); + } + }); + }, - if (fabric.Circle) { - fabric.warn('fabric.Circle is already defined.'); - return; - } + /** + * Centers object vertically with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxCenterObjectV: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.getY(), + endValue: this.getCenterPoint().y, + duration: this.FX_DURATION, + onChange: function(value) { + object.setY(value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); + } + }); + }, - /** - * Circle class - * @class fabric.Circle - * @extends fabric.Object - * @see {@link fabric.Circle#initialize} for constructor definition - */ - fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { + /** + * Same as `fabric.Canvas#remove` but animated + * @param {fabric.Object} object Object to remove + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxRemove: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.opacity, + endValue: 0, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('opacity', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function () { + _this.remove(object); + onComplete(); + } + }); + } + }); - /** - * Type of an object - * @type String - * @default - */ - type: 'circle', + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Animates object's properties + * @param {String|Object} property Property to animate (if string) or properties to animate (if object) + * @param {Number|Object} value Value to animate property to (if string was given first) or options object + * @return {fabric.Object} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation} + * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties) + * + * As object — multiple properties + * + * object.animate({ left: ..., top: ... }); + * object.animate({ left: ..., top: ... }, { duration: ... }); + * + * As string — one property + * + * object.animate('left', ...); + * object.animate('left', { duration: ... }); + * + */ + animate: function () { + if (arguments[0] && typeof arguments[0] === 'object') { + var propsToAnimate = [], prop, skipCallbacks, out = []; + for (prop in arguments[0]) { + propsToAnimate.push(prop); + } + for (var i = 0, len = propsToAnimate.length; i < len; i++) { + prop = propsToAnimate[i]; + skipCallbacks = i !== len - 1; + out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks)); + } + return out; + } + else { + return this._animate.apply(this, arguments); + } + }, - /** - * Radius of this circle - * @type Number - * @default - */ - radius: 0, + /** + * @private + * @param {String} property Property to animate + * @param {String} to Value to animate to + * @param {Object} [options] Options object + * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked + */ + _animate: function(property, to, options, skipCallbacks) { + var _this = this, propPair; - /** - * degrees of start of the circle. - * probably will change to degrees in next major version - * @type Number 0 - 359 - * @default 0 - */ - startAngle: 0, + to = to.toString(); - /** - * End angle of the circle - * probably will change to degrees in next major version - * @type Number 1 - 360 - * @default 360 - */ - endAngle: 360, + options = Object.assign({}, options); - cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), + if (~property.indexOf('.')) { + propPair = property.split('.'); + } - /** - * @private - * @param {String} key - * @param {*} value - * @return {fabric.Circle} thisArg - */ - _set: function(key, value) { - this.callSuper('_set', key, value); + var propIsColor = + _this.colorProperties.indexOf(property) > -1 || + (propPair && _this.colorProperties.indexOf(propPair[1]) > -1); - if (key === 'radius') { - this.setRadius(value); - } + var currentValue = propPair + ? this.get(propPair[0])[propPair[1]] + : this.get(property); - return this; - }, + if (!('from' in options)) { + options.from = currentValue; + } - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); - }, + if (!propIsColor) { + if (~to.indexOf('=')) { + to = currentValue + parseFloat(to.replace('=', '')); + } + else { + to = parseFloat(to); + } + } - /* _TO_SVG_START_ */ + var _options = { + target: this, + startValue: options.from, + endValue: to, + byValue: options.by, + easing: options.easing, + duration: options.duration, + abort: options.abort && function(value, valueProgress, timeProgress) { + return options.abort.call(_this, value, valueProgress, timeProgress); + }, + onChange: function (value, valueProgress, timeProgress) { + if (propPair) { + _this[propPair[0]][propPair[1]] = value; + } + else { + _this.set(property, value); + } + if (skipCallbacks) { + return; + } + options.onChange && options.onChange(value, valueProgress, timeProgress); + }, + onComplete: function (value, valueProgress, timeProgress) { + if (skipCallbacks) { + return; + } - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var svgString, x = 0, y = 0, - angle = (this.endAngle - this.startAngle) % 360; + _this.setCoords(); + options.onComplete && options.onComplete(value, valueProgress, timeProgress); + } + }; - if (angle === 0) { - svgString = [ - '\n' - ]; - } - else { - var start = degreesToRadians(this.startAngle), - end = degreesToRadians(this.endAngle), - radius = this.radius, - startX = fabric.util.cos(start) * radius, - startY = fabric.util.sin(start) * radius, - endX = fabric.util.cos(end) * radius, - endY = fabric.util.sin(end) * radius, - largeFlag = angle > 180 ? '1' : '0'; - svgString = [ - '\n' - ]; + if (propIsColor) { + return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options); + } + else { + return fabric.util.animate(_options); + } } - return svgString; - }, - /* _TO_SVG_END_ */ - - /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render on - */ - _render: function(ctx) { - ctx.beginPath(); - ctx.arc( - 0, - 0, - this.radius, - degreesToRadians(this.startAngle), - degreesToRadians(this.endAngle), - false - ); - this._renderPaintInOrder(ctx); - }, - - /** - * Returns horizontal radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRadiusX: function() { - return this.get('radius') * this.get('scaleX'); - }, + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Returns vertical radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRadiusY: function() { - return this.get('radius') * this.get('scaleY'); - }, + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; /** - * Sets radius of an object (and updates width accordingly) - * @return {fabric.Circle} thisArg + * Line class + * @class fabric.Line + * @extends fabric.Object + * @see {@link fabric.Line#initialize} for constructor definition */ - setRadius: function(value) { - this.radius = value; - return this.set('width', value * 2).set('height', value * 2); - }, - }); + fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) - * @static - * @memberOf fabric.Circle - * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement - */ - fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); - - /** - * Returns {@link fabric.Circle} instance from an SVG element - * @static - * @memberOf fabric.Circle - * @param {SVGElement} element Element to parse - * @param {Function} [callback] Options callback invoked after parsing is finished - * @param {Object} [options] Options object - * @throws {Error} If value of `r` attribute is missing or invalid - */ - fabric.Circle.fromElement = function(element, callback) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); + /** + * Type of an object + * @type String + * @default + */ + type: 'line', - if (!isValidRadius(parsedAttributes)) { - throw new Error('value of `r` attribute is required and can not be negative'); - } + /** + * x value or first line edge + * @type Number + * @default + */ + x1: 0, - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; - callback(new fabric.Circle(parsedAttributes)); - }; + /** + * y value or first line edge + * @type Number + * @default + */ + y1: 0, - /** - * @private - */ - function isValidRadius(attributes) { - return (('radius' in attributes) && (attributes.radius >= 0)); - } - /* _FROM_SVG_END_ */ + /** + * x value or second line edge + * @type Number + * @default + */ + x2: 0, - /** - * Returns {@link fabric.Circle} instance from an object representation - * @static - * @memberOf fabric.Circle - * @param {Object} object Object to create an instance from - * @param {function} [callback] invoked with new instance as first argument - * @return {void} - */ - fabric.Circle.fromObject = function(object, callback) { - fabric.Object._fromObject('Circle', object, callback); - }; + /** + * y value or second line edge + * @type Number + * @default + */ + y2: 0, -})(typeof exports !== 'undefined' ? exports : this); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), + /** + * Constructor + * @param {Array} [points] Array of points + * @param {Object} [options] Options object + * @return {fabric.Line} thisArg + */ + initialize: function(points, options) { + if (!points) { + points = [0, 0, 0, 0]; + } -(function(global) { + this.callSuper('initialize', options); - 'use strict'; + this.set('x1', points[0]); + this.set('y1', points[1]); + this.set('x2', points[2]); + this.set('y2', points[3]); - var fabric = global.fabric || (global.fabric = { }); + this._setWidthHeight(options); + }, - if (fabric.Triangle) { - fabric.warn('fabric.Triangle is already defined'); - return; - } + /** + * @private + * @param {Object} [options] Options + */ + _setWidthHeight: function(options) { + options || (options = { }); - /** - * Triangle class - * @class fabric.Triangle - * @extends fabric.Object - * @return {fabric.Triangle} thisArg - * @see {@link fabric.Triangle#initialize} for constructor definition - */ - fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { + this.width = Math.abs(this.x2 - this.x1); + this.height = Math.abs(this.y2 - this.y1); - /** - * Type of an object - * @type String - * @default - */ - type: 'triangle', + this.left = 'left' in options + ? options.left + : this._getLeftToOriginX(); - /** - * Width is set to 100 to compensate the old initialize code that was setting it to 100 - * @type Number - * @default - */ - width: 100, + this.top = 'top' in options + ? options.top + : this._getTopToOriginY(); + }, - /** - * Height is set to 100 to compensate the old initialize code that was setting it to 100 - * @type Number - * @default - */ - height: 100, + /** + * @private + * @param {String} key + * @param {*} value + */ + _set: function(key, value) { + this.callSuper('_set', key, value); + if (typeof coordProps[key] !== 'undefined') { + this._setWidthHeight(); + } + return this; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2; + /** + * @private + * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line. + */ + _getLeftToOriginX: makeEdgeToOriginGetter( + { // property names + origin: 'originX', + axis1: 'x1', + axis2: 'x2', + dimension: 'width' + }, + { // possible values of origin + nearest: 'left', + center: 'center', + farthest: 'right' + } + ), - ctx.beginPath(); - ctx.moveTo(-widthBy2, heightBy2); - ctx.lineTo(0, -heightBy2); - ctx.lineTo(widthBy2, heightBy2); - ctx.closePath(); + /** + * @private + * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line. + */ + _getTopToOriginY: makeEdgeToOriginGetter( + { // property names + origin: 'originY', + axis1: 'y1', + axis2: 'y2', + dimension: 'height' + }, + { // possible values of origin + nearest: 'top', + center: 'center', + farthest: 'bottom' + } + ), - this._renderPaintInOrder(ctx); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + ctx.beginPath(); - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2, - points = [ - -widthBy2 + ' ' + heightBy2, - '0 ' + -heightBy2, - widthBy2 + ' ' + heightBy2 - ].join(','); - return [ - '' - ]; - }, - /* _TO_SVG_END_ */ - }); - /** - * Returns {@link fabric.Triangle} instance from an object representation - * @static - * @memberOf fabric.Triangle - * @param {Object} object Object to create an instance from - * @param {function} [callback] invoked with new instance as first argument - */ - fabric.Triangle.fromObject = function(object, callback) { - return fabric.Object._fromObject('Triangle', object, callback); - }; + var p = this.calcLinePoints(); + ctx.moveTo(p.x1, p.y1); + ctx.lineTo(p.x2, p.y2); -})(typeof exports !== 'undefined' ? exports : this); + ctx.lineWidth = this.strokeWidth; + // TODO: test this + // make sure setting "fill" changes color of a line + // (by copying fillStyle to strokeStyle, since line is stroked, not filled) + var origStrokeStyle = ctx.strokeStyle; + ctx.strokeStyle = this.stroke || ctx.fillStyle; + this.stroke && this._renderStroke(ctx); + ctx.strokeStyle = origStrokeStyle; + }, -(function(global) { + /** + * This function is an helper for svg import. it returns the center of the object in the svg + * untransformed coordinates + * @private + * @return {Object} center point from element coordinates + */ + _findCenterFromElement: function() { + return { + x: (this.x1 + this.x2) / 2, + y: (this.y1 + this.y2) / 2, + }; + }, - 'use strict'; + /** + * Returns object representation of an instance + * @method toObject + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); + }, - var fabric = global.fabric || (global.fabric = { }), - piBy2 = Math.PI * 2; + /* + * Calculate object dimensions from its properties + * @private + */ + _getNonTransformedDimensions: function() { + var dim = this.callSuper('_getNonTransformedDimensions'); + if (this.strokeLineCap === 'butt') { + if (this.width === 0) { + dim.y -= this.strokeWidth; + } + if (this.height === 0) { + dim.x -= this.strokeWidth; + } + } + return dim; + }, - if (fabric.Ellipse) { - fabric.warn('fabric.Ellipse is already defined.'); - return; - } + /** + * Recalculates line points given width and height + * @private + */ + calcLinePoints: function() { + var xMult = this.x1 <= this.x2 ? -1 : 1, + yMult = this.y1 <= this.y2 ? -1 : 1, + x1 = (xMult * this.width * 0.5), + y1 = (yMult * this.height * 0.5), + x2 = (xMult * this.width * -0.5), + y2 = (yMult * this.height * -0.5); - /** - * Ellipse class - * @class fabric.Ellipse - * @extends fabric.Object - * @return {fabric.Ellipse} thisArg - * @see {@link fabric.Ellipse#initialize} for constructor definition - */ - fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { + return { + x1: x1, + x2: x2, + y1: y1, + y2: y2 + }; + }, - /** - * Type of an object - * @type String - * @default - */ - type: 'ellipse', + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var p = this.calcLinePoints(); + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); + /* _FROM_SVG_START_ */ /** - * Horizontal radius - * @type Number - * @default + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement}) + * @static + * @memberOf fabric.Line + * @see http://www.w3.org/TR/SVG/shapes.html#LineElement */ - rx: 0, + fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); /** - * Vertical radius - * @type Number - * @default + * Returns fabric.Line instance from an SVG element + * @static + * @memberOf fabric.Line + * @param {SVGElement} element Element to parse + * @param {Object} [options] Options object + * @param {Function} [callback] callback function invoked after parsing */ - ry: 0, - - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), + fabric.Line.fromElement = function(element, callback, options) { + options = options || { }; + var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), + points = [ + parsedAttributes.x1 || 0, + parsedAttributes.y1 || 0, + parsedAttributes.x2 || 0, + parsedAttributes.y2 || 0 + ]; + callback(new fabric.Line(points, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ /** - * Constructor - * @param {Object} [options] Options object - * @return {fabric.Ellipse} thisArg - */ - initialize: function(options) { - this.callSuper('initialize', options); - this.set('rx', options && options.rx || 0); - this.set('ry', options && options.ry || 0); - }, + * Returns fabric.Line instance from an object representation + * @static + * @memberOf fabric.Line + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ + fabric.Line.fromObject = function(object) { + var options = clone(object, true); + options.points = [object.x1, object.y1, object.x2, object.y2]; + return fabric.Object._fromObject(fabric.Line, options, 'points').then(function(fabricLine) { + delete fabricLine.points; + return fabricLine; + }); + }; /** - * @private - * @param {String} key - * @param {*} value - * @return {fabric.Ellipse} thisArg + * Produces a function that calculates distance from canvas edge to Line origin. */ - _set: function(key, value) { - this.callSuper('_set', key, value); - switch (key) { - - case 'rx': - this.rx = value; - this.set('width', value * 2); - break; + function makeEdgeToOriginGetter(propertyNames, originValues) { + var origin = propertyNames.origin, + axis1 = propertyNames.axis1, + axis2 = propertyNames.axis2, + dimension = propertyNames.dimension, + nearest = originValues.nearest, + center = originValues.center, + farthest = originValues.farthest; - case 'ry': - this.ry = value; - this.set('height', value * 2); - break; - - } - return this; - }, + return function() { + switch (this.get(origin)) { + case nearest: + return Math.min(this.get(axis1), this.get(axis2)); + case center: + return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); + case farthest: + return Math.max(this.get(axis1), this.get(axis2)); + } + }; - /** - * Returns horizontal radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRx: function() { - return this.get('rx') * this.get('scaleX'); - }, + } - /** - * Returns Vertical radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRy: function() { - return this.get('ry') * this.get('scaleY'); - }, + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians; /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance + * Circle class + * @class fabric.Circle + * @extends fabric.Object + * @see {@link fabric.Circle#initialize} for constructor definition */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ + /** + * Type of an object + * @type String + * @default + */ + type: 'circle', - /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render on - */ - _render: function(ctx) { - ctx.beginPath(); - ctx.save(); - ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); - ctx.arc( - 0, - 0, - this.rx, - 0, - piBy2, - false); - ctx.restore(); - this._renderPaintInOrder(ctx); - }, - }); + /** + * Radius of this circle + * @type Number + * @default + */ + radius: 0, - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) - * @static - * @memberOf fabric.Ellipse - * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement - */ - fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); + /** + * degrees of start of the circle. + * probably will change to degrees in next major version + * @type Number 0 - 359 + * @default 0 + */ + startAngle: 0, - /** - * Returns {@link fabric.Ellipse} instance from an SVG element - * @static - * @memberOf fabric.Ellipse - * @param {SVGElement} element Element to parse - * @param {Function} [callback] Options callback invoked after parsing is finished - * @return {fabric.Ellipse} - */ - fabric.Ellipse.fromElement = function(element, callback) { + /** + * End angle of the circle + * probably will change to degrees in next major version + * @type Number 1 - 360 + * @default 360 + */ + endAngle: 360, - var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; - callback(new fabric.Ellipse(parsedAttributes)); - }; - /* _FROM_SVG_END_ */ + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Circle} thisArg + */ + _set: function(key, value) { + this.callSuper('_set', key, value); - /** - * Returns {@link fabric.Ellipse} instance from an object representation - * @static - * @memberOf fabric.Ellipse - * @param {Object} object Object to create an instance from - * @param {function} [callback] invoked with new instance as first argument - * @return {void} - */ - fabric.Ellipse.fromObject = function(object, callback) { - fabric.Object._fromObject('Ellipse', object, callback); - }; + if (key === 'radius') { + this.setRadius(value); + } -})(typeof exports !== 'undefined' ? exports : this); + return this; + }, + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); + }, -(function(global) { + /* _TO_SVG_START_ */ - 'use strict'; + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var svgString, x = 0, y = 0, + angle = (this.endAngle - this.startAngle) % 360; + + if (angle === 0) { + svgString = [ + '\n' + ]; + } + else { + var start = degreesToRadians(this.startAngle), + end = degreesToRadians(this.endAngle), + radius = this.radius, + startX = fabric.util.cos(start) * radius, + startY = fabric.util.sin(start) * radius, + endX = fabric.util.cos(end) * radius, + endY = fabric.util.sin(end) * radius, + largeFlag = angle > 180 ? '1' : '0'; + svgString = [ + '\n' + ]; + } + return svgString; + }, + /* _TO_SVG_END_ */ - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend; + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render on + */ + _render: function(ctx) { + ctx.beginPath(); + ctx.arc( + 0, + 0, + this.radius, + degreesToRadians(this.startAngle), + degreesToRadians(this.endAngle), + false + ); + this._renderPaintInOrder(ctx); + }, - if (fabric.Rect) { - fabric.warn('fabric.Rect is already defined'); - return; - } + /** + * Returns horizontal radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRadiusX: function() { + return this.get('radius') * this.get('scaleX'); + }, - /** - * Rectangle class - * @class fabric.Rect - * @extends fabric.Object - * @return {fabric.Rect} thisArg - * @see {@link fabric.Rect#initialize} for constructor definition - */ - fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { + /** + * Returns vertical radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRadiusY: function() { + return this.get('radius') * this.get('scaleY'); + }, - /** - * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged}) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), + /** + * Sets radius of an object (and updates width accordingly) + * @return {fabric.Circle} thisArg + */ + setRadius: function(value) { + this.radius = value; + return this.set('width', value * 2).set('height', value * 2); + }, + }); + /* _FROM_SVG_START_ */ /** - * Type of an object - * @type String - * @default + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) + * @static + * @memberOf fabric.Circle + * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement */ - type: 'rect', + fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); /** - * Horizontal border radius - * @type Number - * @default + * Returns {@link fabric.Circle} instance from an SVG element + * @static + * @memberOf fabric.Circle + * @param {SVGElement} element Element to parse + * @param {Function} [callback] Options callback invoked after parsing is finished + * @param {Object} [options] Options object + * @throws {Error} If value of `r` attribute is missing or invalid */ - rx: 0, + fabric.Circle.fromElement = function(element, callback) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); - /** - * Vertical border radius - * @type Number - * @default - */ - ry: 0, + if (!isValidRadius(parsedAttributes)) { + throw new Error('value of `r` attribute is required and can not be negative'); + } - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; + callback(new fabric.Circle(parsedAttributes)); + }; /** - * Constructor - * @param {Object} [options] Options object - * @return {Object} thisArg + * @private */ - initialize: function(options) { - this.callSuper('initialize', options); - this._initRxRy(); - }, + function isValidRadius(attributes) { + return (('radius' in attributes) && (attributes.radius >= 0)); + } + /* _FROM_SVG_END_ */ /** - * Initializes rx/ry attributes - * @private + * Returns {@link fabric.Circle} instance from an object representation + * @static + * @memberOf fabric.Circle + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - _initRxRy: function() { - if (this.rx && !this.ry) { - this.ry = this.rx; - } - else if (this.ry && !this.rx) { - this.rx = this.ry; - } - }, + fabric.Circle.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Circle, object); + }; + + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric || (global.fabric = { }); /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - - // 1x1 case (used in spray brush) optimization was removed because - // with caching and higher zoom level this makes more damage than help - - var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, - ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, - w = this.width, - h = this.height, - x = -this.width / 2, - y = -this.height / 2, - isRounded = rx !== 0 || ry !== 0, - /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ - k = 1 - 0.5522847498; - ctx.beginPath(); + * Triangle class + * @class fabric.Triangle + * @extends fabric.Object + * @return {fabric.Triangle} thisArg + * @see {@link fabric.Triangle#initialize} for constructor definition + */ + fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { - ctx.moveTo(x + rx, y); + /** + * Type of an object + * @type String + * @default + */ + type: 'triangle', - ctx.lineTo(x + w - rx, y); - isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); + /** + * Width is set to 100 to compensate the old initialize code that was setting it to 100 + * @type Number + * @default + */ + width: 100, - ctx.lineTo(x + w, y + h - ry); - isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); + /** + * Height is set to 100 to compensate the old initialize code that was setting it to 100 + * @type Number + * @default + */ + height: 100, - ctx.lineTo(x + rx, y + h); - isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2; - ctx.lineTo(x, y + ry); - isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); + ctx.beginPath(); + ctx.moveTo(-widthBy2, heightBy2); + ctx.lineTo(0, -heightBy2); + ctx.lineTo(widthBy2, heightBy2); + ctx.closePath(); - ctx.closePath(); + this._renderPaintInOrder(ctx); + }, - this._renderPaintInOrder(ctx); - }, + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2, + points = [ + -widthBy2 + ' ' + heightBy2, + '0 ' + -heightBy2, + widthBy2 + ' ' + heightBy2 + ].join(','); + return [ + '' + ]; + }, + /* _TO_SVG_END_ */ + }); /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance + * Returns {@link fabric.Triangle} instance from an object representation + * @static + * @memberOf fabric.Triangle + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + fabric.Triangle.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Triangle, object); + }; + + })(typeof exports !== 'undefined' ? exports : window); - /* _TO_SVG_START_ */ + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + piBy2 = Math.PI * 2; /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance + * Ellipse class + * @class fabric.Ellipse + * @extends fabric.Object + * @return {fabric.Ellipse} thisArg + * @see {@link fabric.Ellipse#initialize} for constructor definition */ - _toSVG: function() { - var x = -this.width / 2, y = -this.height / 2; - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - }); - - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) - * @static - * @memberOf fabric.Rect - * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement - */ - fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); - - /** - * Returns {@link fabric.Rect} instance from an SVG element - * @static - * @memberOf fabric.Rect - * @param {SVGElement} element Element to parse - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object - */ - fabric.Rect.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); - } - options = options || { }; - - var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); - parsedAttributes.left = parsedAttributes.left || 0; - parsedAttributes.top = parsedAttributes.top || 0; - parsedAttributes.height = parsedAttributes.height || 0; - parsedAttributes.width = parsedAttributes.width || 0; - var rect = new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes)); - rect.visible = rect.visible && rect.width > 0 && rect.height > 0; - callback(rect); - }; - /* _FROM_SVG_END_ */ - - /** - * Returns {@link fabric.Rect} instance from an object representation - * @static - * @memberOf fabric.Rect - * @param {Object} object Object to create an instance from - * @param {Function} [callback] Callback to invoke when an fabric.Rect instance is created - */ - fabric.Rect.fromObject = function(object, callback) { - return fabric.Object._fromObject('Rect', object, callback); - }; - -})(typeof exports !== 'undefined' ? exports : this); + fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { + /** + * Type of an object + * @type String + * @default + */ + type: 'ellipse', -(function(global) { - - 'use strict'; + /** + * Horizontal radius + * @type Number + * @default + */ + rx: 0, - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - min = fabric.util.array.min, - max = fabric.util.array.max, - toFixed = fabric.util.toFixed, - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; + /** + * Vertical radius + * @type Number + * @default + */ + ry: 0, - if (fabric.Polyline) { - fabric.warn('fabric.Polyline is already defined'); - return; - } + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), - /** - * Polyline class - * @class fabric.Polyline - * @extends fabric.Object - * @see {@link fabric.Polyline#initialize} for constructor definition - */ - fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { + /** + * Constructor + * @param {Object} [options] Options object + * @return {fabric.Ellipse} thisArg + */ + initialize: function(options) { + this.callSuper('initialize', options); + this.set('rx', options && options.rx || 0); + this.set('ry', options && options.ry || 0); + }, - /** - * Type of an object - * @type String - * @default - */ - type: 'polyline', + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Ellipse} thisArg + */ + _set: function(key, value) { + this.callSuper('_set', key, value); + switch (key) { - /** - * Points array - * @type Array - * @default - */ - points: null, + case 'rx': + this.rx = value; + this.set('width', value * 2); + break; - /** - * WARNING: Feature in progress - * Calculate the exact bounding box taking in account strokeWidth on acute angles - * this will be turned to true by default on fabric 6.0 - * maybe will be left in as an optimization since calculations may be slow - * @deprecated - * @type Boolean - * @default false - */ - exactBoundingBox: false, + case 'ry': + this.ry = value; + this.set('height', value * 2); + break; - cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), + } + return this; + }, - /** - * Constructor - * @param {Array} points Array of points (where each point is an object with x and y) - * @param {Object} [options] Options object - * @return {fabric.Polyline} thisArg - * @example - * var poly = new fabric.Polyline([ - * { x: 10, y: 10 }, - * { x: 50, y: 30 }, - * { x: 40, y: 70 }, - * { x: 60, y: 50 }, - * { x: 100, y: 150 }, - * { x: 40, y: 100 } - * ], { - * stroke: 'red', - * left: 100, - * top: 100 - * }); - */ - initialize: function(points, options) { - options = options || {}; - this.points = points || []; - this.callSuper('initialize', options); - this._setPositionDimensions(options); - }, + /** + * Returns horizontal radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRx: function() { + return this.get('rx') * this.get('scaleX'); + }, - /** - * @private - */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this, true); - }, - - _setPositionDimensions: function(options) { - var calcDim = this._calcDimensions(options), correctLeftTop, - correctSize = this.exactBoundingBox ? this.strokeWidth : 0; - this.width = calcDim.width - correctSize; - this.height = calcDim.height - correctSize; - if (!options.fromSVG) { - correctLeftTop = this.translateToGivenOrigin( - { - // this looks bad, but is one way to keep it optional for now. - x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, - y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 - }, - 'left', - 'top', - this.originX, - this.originY - ); - } - if (typeof options.left === 'undefined') { - this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; - } - if (typeof options.top === 'undefined') { - this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; - } - this.pathOffset = { - x: calcDim.left + this.width / 2 + correctSize / 2, - y: calcDim.top + this.height / 2 + correctSize / 2 - }; - }, + /** + * Returns Vertical radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRy: function() { + return this.get('ry') * this.get('scaleY'); + }, - /** - * Calculate the polygon min and max point from points array, - * returning an object with left, top, width, height to measure the - * polygon size - * @return {Object} object.left X coordinate of the polygon leftmost point - * @return {Object} object.top Y coordinate of the polygon topmost point - * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point - * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point - * @private - */ - _calcDimensions: function() { + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, - var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, - minX = min(points, 'x') || 0, - minY = min(points, 'y') || 0, - maxX = max(points, 'x') || 0, - maxY = max(points, 'y') || 0, - width = (maxX - minX), - height = (maxY - minY); + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ - return { - left: minX, - top: minY, - width: width, - height: height, - }; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render on + */ + _render: function(ctx) { + ctx.beginPath(); + ctx.save(); + ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); + ctx.arc( + 0, + 0, + this.rx, + 0, + piBy2, + false); + ctx.restore(); + this._renderPaintInOrder(ctx); + }, + }); + /* _FROM_SVG_START_ */ /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) + * @static + * @memberOf fabric.Ellipse + * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - points: this.points.concat() - }); - }, + fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); - /* _TO_SVG_START_ */ /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance + * Returns {@link fabric.Ellipse} instance from an SVG element + * @static + * @memberOf fabric.Ellipse + * @param {SVGElement} element Element to parse + * @param {Function} [callback] Options callback invoked after parsing is finished + * @return {fabric.Ellipse} */ - _toSVG: function() { - var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + fabric.Ellipse.fromElement = function(element, callback) { - for (var i = 0, len = this.points.length; i < len; i++) { - points.push( - toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', - toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' - ); - } - return [ - '<' + this.type + ' ', 'COMMON_PARTS', - 'points="', points.join(''), - '" />\n' - ]; - }, - /* _TO_SVG_END_ */ + var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; + callback(new fabric.Ellipse(parsedAttributes)); + }; + /* _FROM_SVG_END_ */ /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on + * Returns {@link fabric.Ellipse} instance from an object representation + * @static + * @memberOf fabric.Ellipse + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - commonRender: function(ctx) { - var point, len = this.points.length, - x = this.pathOffset.x, - y = this.pathOffset.y; + fabric.Ellipse.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Ellipse, object); + }; - if (!len || isNaN(this.points[len - 1].y)) { - // do not draw if no points or odd points - // NaN comes from parseFloat of a empty string in parser - return false; - } - ctx.beginPath(); - ctx.moveTo(this.points[0].x - x, this.points[0].y - y); - for (var i = 0; i < len; i++) { - point = this.points[i]; - ctx.lineTo(point.x - x, point.y - y); - } - return true; - }, + })(typeof exports !== 'undefined' ? exports : window); - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; - } - this._renderPaintInOrder(ctx); - }, + (function(global) { + var fabric = global.fabric || (global.fabric = { }); /** - * Returns complexity of an instance - * @return {Number} complexity of this instance + * Rectangle class + * @class fabric.Rect + * @extends fabric.Object + * @return {fabric.Rect} thisArg + * @see {@link fabric.Rect#initialize} for constructor definition */ - complexity: function() { - return this.get('points').length; - } - }); + fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement}) - * @static - * @memberOf fabric.Polyline - * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement - */ - fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); + /** + * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), - /** - * Returns fabric.Polyline instance from an SVG element - * @static - * @memberOf fabric.Polyline - * @param {SVGElement} element Element to parser - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object - */ - fabric.Polyline.fromElementGenerator = function(_class) { - return function(element, callback, options) { - if (!element) { - return callback(null); - } - options || (options = { }); + /** + * Type of an object + * @type String + * @default + */ + type: 'rect', - var points = fabric.parsePointsAttribute(element.getAttribute('points')), - parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric[_class](points, extend(parsedAttributes, options))); - }; - }; + /** + * Horizontal border radius + * @type Number + * @default + */ + rx: 0, - fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); + /** + * Vertical border radius + * @type Number + * @default + */ + ry: 0, - /* _FROM_SVG_END_ */ + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), - /** - * Returns fabric.Polyline instance from an object representation - * @static - * @memberOf fabric.Polyline - * @param {Object} object Object to create an instance from - * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created - */ - fabric.Polyline.fromObject = function(object, callback) { - return fabric.Object._fromObject('Polyline', object, callback, 'points'); - }; + /** + * Constructor + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(options) { + this.callSuper('initialize', options); + this._initRxRy(); + }, + + /** + * Initializes rx/ry attributes + * @private + */ + _initRxRy: function() { + if (this.rx && !this.ry) { + this.ry = this.rx; + } + else if (this.ry && !this.rx) { + this.rx = this.ry; + } + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + + // 1x1 case (used in spray brush) optimization was removed because + // with caching and higher zoom level this makes more damage than help + + var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, + ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, + w = this.width, + h = this.height, + x = -this.width / 2, + y = -this.height / 2, + isRounded = rx !== 0 || ry !== 0, + /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ + k = 1 - 0.5522847498; + ctx.beginPath(); + ctx.moveTo(x + rx, y); -(function(global) { + ctx.lineTo(x + w - rx, y); + isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); - 'use strict'; + ctx.lineTo(x + w, y + h - ry); + isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); - var fabric = global.fabric || (global.fabric = {}), - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; + ctx.lineTo(x + rx, y + h); + isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); - if (fabric.Polygon) { - fabric.warn('fabric.Polygon is already defined'); - return; - } + ctx.lineTo(x, y + ry); + isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); - /** - * Polygon class - * @class fabric.Polygon - * @extends fabric.Polyline - * @see {@link fabric.Polygon#initialize} for constructor definition - */ - fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { + ctx.closePath(); - /** - * Type of an object - * @type String - * @default - */ - type: 'polygon', + this._renderPaintInOrder(ctx); + }, + + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, + + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var x = -this.width / 2, y = -this.height / 2; + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); + /* _FROM_SVG_START_ */ /** - * @private + * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) + * @static + * @memberOf fabric.Rect + * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this); - }, + fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on + * Returns {@link fabric.Rect} instance from an SVG element + * @static + * @memberOf fabric.Rect + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; + fabric.Rect.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); } - ctx.closePath(); - this._renderPaintInOrder(ctx); - }, - - }); - - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) - * @static - * @memberOf fabric.Polygon - * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement - */ - fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); + options = options || { }; - /** - * Returns {@link fabric.Polygon} instance from an SVG element - * @static - * @memberOf fabric.Polygon - * @param {SVGElement} element Element to parse - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object - */ - fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); - /* _FROM_SVG_END_ */ + var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); + parsedAttributes.left = parsedAttributes.left || 0; + parsedAttributes.top = parsedAttributes.top || 0; + parsedAttributes.height = parsedAttributes.height || 0; + parsedAttributes.width = parsedAttributes.width || 0; + var rect = new fabric.Rect(Object.assign({}, options, parsedAttributes)); + rect.visible = rect.visible && rect.width > 0 && rect.height > 0; + callback(rect); + }; + /* _FROM_SVG_END_ */ - /** - * Returns fabric.Polygon instance from an object representation - * @static - * @memberOf fabric.Polygon - * @param {Object} object Object to create an instance from - * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created - * @return {void} - */ - fabric.Polygon.fromObject = function(object, callback) { - fabric.Object._fromObject('Polygon', object, callback, 'points'); - }; + /** + * Returns {@link fabric.Rect} instance from an object representation + * @static + * @memberOf fabric.Rect + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ + fabric.Rect.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Rect, object); + }; -})(typeof exports !== 'undefined' ? exports : this); + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + min = fabric.util.array.min, + max = fabric.util.array.max, + toFixed = fabric.util.toFixed, + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; -(function(global) { + /** + * Polyline class + * @class fabric.Polyline + * @extends fabric.Object + * @see {@link fabric.Polyline#initialize} for constructor definition + */ + fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { - 'use strict'; + /** + * Type of an object + * @type String + * @default + */ + type: 'polyline', - var fabric = global.fabric || (global.fabric = { }), - min = fabric.util.array.min, - max = fabric.util.array.max, - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - _toString = Object.prototype.toString, - toFixed = fabric.util.toFixed; - - if (fabric.Path) { - fabric.warn('fabric.Path is already defined'); - return; - } + /** + * Points array + * @type Array + * @default + */ + points: null, - /** - * Path class - * @class fabric.Path - * @extends fabric.Object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup} - * @see {@link fabric.Path#initialize} for constructor definition - */ - fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { + /** + * WARNING: Feature in progress + * Calculate the exact bounding box taking in account strokeWidth on acute angles + * this will be turned to true by default on fabric 6.0 + * maybe will be left in as an optimization since calculations may be slow + * @deprecated + * @type Boolean + * @default false + */ + exactBoundingBox: false, - /** - * Type of an object - * @type String - * @default - */ - type: 'path', + cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), - /** - * Array of path points - * @type Array - * @default - */ - path: null, + /** + * Constructor + * @param {Array} points Array of points (where each point is an object with x and y) + * @param {Object} [options] Options object + * @return {fabric.Polyline} thisArg + * @example + * var poly = new fabric.Polyline([ + * { x: 10, y: 10 }, + * { x: 50, y: 30 }, + * { x: 40, y: 70 }, + * { x: 60, y: 50 }, + * { x: 100, y: 150 }, + * { x: 40, y: 100 } + * ], { + * stroke: 'red', + * left: 100, + * top: 100 + * }); + */ + initialize: function(points, options) { + options = options || {}; + this.points = points || []; + this.callSuper('initialize', options); + this._setPositionDimensions(options); + }, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), + /** + * @private + */ + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this, true); + }, - stateProperties: fabric.Object.prototype.stateProperties.concat('path'), + _setPositionDimensions: function(options) { + options || (options = {}); + var calcDim = this._calcDimensions(options), correctLeftTop, + correctSize = this.exactBoundingBox ? this.strokeWidth : 0; + this.width = calcDim.width - correctSize; + this.height = calcDim.height - correctSize; + if (!options.fromSVG) { + correctLeftTop = this.translateToGivenOrigin( + { + // this looks bad, but is one way to keep it optional for now. + x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, + y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 + }, + 'left', + 'top', + this.originX, + this.originY + ); + } + if (typeof options.left === 'undefined') { + this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; + } + if (typeof options.top === 'undefined') { + this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; + } + this.pathOffset = { + x: calcDim.left + this.width / 2 + correctSize / 2, + y: calcDim.top + this.height / 2 + correctSize / 2 + }; + }, - /** - * Constructor - * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) - * @param {Object} [options] Options object - * @return {fabric.Path} thisArg - */ - initialize: function (path, options) { - options = clone(options || {}); - delete options.path; - this.callSuper('initialize', options); - this._setPath(path || [], options); - }, + /** + * Calculate the polygon min and max point from points array, + * returning an object with left, top, width, height to measure the + * polygon size + * @return {Object} object.left X coordinate of the polygon leftmost point + * @return {Object} object.top Y coordinate of the polygon topmost point + * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point + * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point + * @private + */ + _calcDimensions: function() { - /** - * @private - * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) - * @param {Object} [options] Options object - */ - _setPath: function (path, options) { - var fromArray = _toString.call(path) === '[object Array]'; + var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, + minX = min(points, 'x') || 0, + minY = min(points, 'y') || 0, + maxX = max(points, 'x') || 0, + maxY = max(points, 'y') || 0, + width = (maxX - minX), + height = (maxY - minY); - this.path = fabric.util.makePathSimpler( - fromArray ? path : fabric.util.parsePath(path) - ); + return { + left: minX, + top: minY, + width: width, + height: height, + }; + }, - fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); - }, + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + points: this.points.concat() + }); + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render path on - */ - _renderPathCommands: function(ctx) { - var current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - controlX = 0, // current control point x - controlY = 0, // current control point y - l = -this.pathOffset.x, - t = -this.pathOffset.y; + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + + for (var i = 0, len = this.points.length; i < len; i++) { + points.push( + toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', + toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' + ); + } + return [ + '<' + this.type + ' ', 'COMMON_PARTS', + 'points="', points.join(''), + '" />\n' + ]; + }, + /* _TO_SVG_END_ */ - ctx.beginPath(); - for (var i = 0, len = this.path.length; i < len; ++i) { + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + commonRender: function(ctx) { + var point, len = this.points.length, + x = this.pathOffset.x, + y = this.pathOffset.y; + + if (!len || isNaN(this.points[len - 1].y)) { + // do not draw if no points or odd points + // NaN comes from parseFloat of a empty string in parser + return false; + } + ctx.beginPath(); + ctx.moveTo(this.points[0].x - x, this.points[0].y - y); + for (var i = 0; i < len; i++) { + point = this.points[i]; + ctx.lineTo(point.x - x, point.y - y); + } + return true; + }, - current = this.path[i]; + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + this._renderPaintInOrder(ctx); + }, - switch (current[0]) { // first letter + /** + * Returns complexity of an instance + * @return {Number} complexity of this instance + */ + complexity: function() { + return this.get('points').length; + } + }); - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - ctx.lineTo(x + l, y + t); - break; + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement}) + * @static + * @memberOf fabric.Polyline + * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement + */ + fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - ctx.moveTo(x + l, y + t); - break; + /** + * Returns fabric.Polyline instance from an SVG element + * @static + * @memberOf fabric.Polyline + * @param {SVGElement} element Element to parser + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Polyline.fromElementGenerator = function(_class) { + return function(element, callback, options) { + if (!element) { + return callback(null); + } + options || (options = { }); - case 'C': // bezierCurveTo, absolute - x = current[5]; - y = current[6]; - controlX = current[3]; - controlY = current[4]; - ctx.bezierCurveTo( - current[1] + l, - current[2] + t, - controlX + l, - controlY + t, - x + l, - y + t - ); - break; + var points = fabric.parsePointsAttribute(element.getAttribute('points')), + parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric[_class](points, extend(parsedAttributes, options))); + }; + }; - case 'Q': // quadraticCurveTo, absolute - ctx.quadraticCurveTo( - current[1] + l, - current[2] + t, - current[3] + l, - current[4] + t - ); - x = current[3]; - y = current[4]; - controlX = current[1]; - controlY = current[2]; - break; + fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - ctx.closePath(); - break; - } - } - }, + /* _FROM_SVG_END_ */ /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render path on + * Returns fabric.Polyline instance from an object representation + * @static + * @memberOf fabric.Polyline + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - _render: function(ctx) { - this._renderPathCommands(ctx); - this._renderPaintInOrder(ctx); - }, + fabric.Polyline.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Polyline, object, 'points'); + }; + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + var fabric = global.fabric || (global.fabric = {}), + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; /** - * Returns string representation of an instance - * @return {String} string representation of an instance + * Polygon class + * @class fabric.Polygon + * @extends fabric.Polyline + * @see {@link fabric.Polygon#initialize} for constructor definition */ - toString: function() { - return '#'; - }, + fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { + + /** + * Type of an object + * @type String + * @default + */ + type: 'polygon', + + /** + * @private + */ + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this); + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + ctx.closePath(); + this._renderPaintInOrder(ctx); + }, - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - path: this.path.map(function(item) { return item.slice(); }), - }); - }, + }); + /* _FROM_SVG_START_ */ /** - * Returns dataless object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance + * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) + * @static + * @memberOf fabric.Polygon + * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement */ - toDatalessObject: function(propertiesToInclude) { - var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); - if (o.sourcePath) { - delete o.path; - } - return o; - }, + fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); - /* _TO_SVG_START_ */ /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance + * Returns {@link fabric.Polygon} instance from an SVG element + * @static + * @memberOf fabric.Polygon + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object */ - _toSVG: function() { - var path = fabric.util.joinPath(this.path); - return [ - '\n' - ]; - }, - - _getOffsetTransform: function() { - var digits = fabric.Object.NUM_FRACTION_DIGITS; - return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + - toFixed(-this.pathOffset.y, digits) + ')'; - }, + fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); + /* _FROM_SVG_END_ */ /** - * Returns svg clipPath representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance + * Returns fabric.Polygon instance from an object representation + * @static + * @memberOf fabric.Polygon + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - toClipPathSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return '\t' + this._createBaseClipPathSVGMarkup( - this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } - ); - }, + fabric.Polygon.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Polygon, object, 'points'); + }; - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); - }, - /* _TO_SVG_END_ */ + })(typeof exports !== 'undefined' ? exports : window); - /** - * Returns number representation of an instance complexity - * @return {Number} complexity of this instance - */ - complexity: function() { - return this.path.length; - }, + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + min = fabric.util.array.min, + max = fabric.util.array.max, + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed; /** - * @private + * Path class + * @class fabric.Path + * @extends fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup} + * @see {@link fabric.Path#initialize} for constructor definition */ - _calcDimensions: function() { + fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { - var aX = [], - aY = [], - current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - bounds; + /** + * Type of an object + * @type String + * @default + */ + type: 'path', - for (var i = 0, len = this.path.length; i < len; ++i) { + /** + * Array of path points + * @type Array + * @default + */ + path: null, - current = this.path[i]; + cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), - switch (current[0]) { // first letter + stateProperties: fabric.Object.prototype.stateProperties.concat('path'), - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - bounds = []; - break; + /** + * Constructor + * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) + * @param {Object} [options] Options object + * @return {fabric.Path} thisArg + */ + initialize: function (path, options) { + options = clone(options || {}); + delete options.path; + this.callSuper('initialize', options); + this._setPath(path || [], options); + }, - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - bounds = []; - break; + /** + * @private + * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) + * @param {Object} [options] Options object + */ + _setPath: function (path, options) { + this.path = fabric.util.makePathSimpler( + Array.isArray(path) ? path : fabric.util.parsePath(path) + ); - case 'C': // bezierCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - x = current[5]; - y = current[6]; - break; + fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); + }, - case 'Q': // quadraticCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[1], - current[2], - current[3], - current[4] - ); - x = current[3]; - y = current[4]; - break; + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render path on + */ + _renderPathCommands: function(ctx) { + var current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + controlX = 0, // current control point x + controlY = 0, // current control point y + l = -this.pathOffset.x, + t = -this.pathOffset.y; - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - break; + ctx.beginPath(); + + for (var i = 0, len = this.path.length; i < len; ++i) { + + current = this.path[i]; + + switch (current[0]) { // first letter + + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + ctx.lineTo(x + l, y + t); + break; + + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + ctx.moveTo(x + l, y + t); + break; + + case 'C': // bezierCurveTo, absolute + x = current[5]; + y = current[6]; + controlX = current[3]; + controlY = current[4]; + ctx.bezierCurveTo( + current[1] + l, + current[2] + t, + controlX + l, + controlY + t, + x + l, + y + t + ); + break; + + case 'Q': // quadraticCurveTo, absolute + ctx.quadraticCurveTo( + current[1] + l, + current[2] + t, + current[3] + l, + current[4] + t + ); + x = current[3]; + y = current[4]; + controlX = current[1]; + controlY = current[2]; + break; + + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + ctx.closePath(); + break; + } } - bounds.forEach(function (point) { - aX.push(point.x); - aY.push(point.y); - }); - aX.push(x); - aY.push(y); - } + }, - var minX = min(aX) || 0, - minY = min(aY) || 0, - maxX = max(aX) || 0, - maxY = max(aY) || 0, - deltaX = maxX - minX, - deltaY = maxY - minY; + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render path on + */ + _render: function(ctx) { + this._renderPathCommands(ctx); + this._renderPaintInOrder(ctx); + }, - return { - left: minX, - top: minY, - width: deltaX, - height: deltaY - }; - } - }); + /** + * Returns string representation of an instance + * @return {String} string representation of an instance + */ + toString: function() { + return '#'; + }, - /** - * Creates an instance of fabric.Path from an object - * @static - * @memberOf fabric.Path - * @param {Object} object - * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created - */ - fabric.Path.fromObject = function(object, callback) { - if (typeof object.sourcePath === 'string') { - var pathUrl = object.sourcePath; - fabric.loadSVGFromURL(pathUrl, function (elements) { - var path = elements[0]; - path.setOptions(object); - callback && callback(path); - }); - } - else { - fabric.Object._fromObject('Path', object, callback, 'path'); - } - }; + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + path: this.path.map(function(item) { return item.slice(); }), + }); + }, - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) - * @static - * @memberOf fabric.Path - * @see http://www.w3.org/TR/SVG/paths.html#PathElement - */ - fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); + /** + * Returns dataless object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); + if (o.sourcePath) { + delete o.path; + } + return o; + }, - /** - * Creates an instance of fabric.Path from an SVG element - * @static - * @memberOf fabric.Path - * @param {SVGElement} element to parse - * @param {Function} callback Callback to invoke when an fabric.Path instance is created - * @param {Object} [options] Options object - * @param {Function} [callback] Options callback invoked after parsing is finished - */ - fabric.Path.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); - }; - /* _FROM_SVG_END_ */ + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var path = fabric.util.joinPath(this.path); + return [ + '\n' + ]; + }, -})(typeof exports !== 'undefined' ? exports : this); + _getOffsetTransform: function() { + var digits = fabric.Object.NUM_FRACTION_DIGITS; + return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + + toFixed(-this.pathOffset.y, digits) + ')'; + }, + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return '\t' + this._createBaseClipPathSVGMarkup( + this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } + ); + }, -(function(global) { + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); + }, + /* _TO_SVG_END_ */ - 'use strict'; + /** + * Returns number representation of an instance complexity + * @return {Number} complexity of this instance + */ + complexity: function() { + return this.path.length; + }, - var fabric = global.fabric || (global.fabric = { }), - min = fabric.util.array.min, - max = fabric.util.array.max; + /** + * @private + */ + _calcDimensions: function() { + + var aX = [], + aY = [], + current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + bounds; + + for (var i = 0, len = this.path.length; i < len; ++i) { + + current = this.path[i]; + + switch (current[0]) { // first letter + + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + bounds = []; + break; + + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + bounds = []; + break; + + case 'C': // bezierCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + x = current[5]; + y = current[6]; + break; + + case 'Q': // quadraticCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[1], + current[2], + current[3], + current[4] + ); + x = current[3]; + y = current[4]; + break; + + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + break; + } + bounds.forEach(function (point) { + aX.push(point.x); + aY.push(point.y); + }); + aX.push(x); + aY.push(y); + } - if (fabric.Group) { - return; - } + var minX = min(aX) || 0, + minY = min(aY) || 0, + maxX = max(aX) || 0, + maxY = max(aY) || 0, + deltaX = maxX - minX, + deltaY = maxY - minY; - /** - * Group class - * @class fabric.Group - * @extends fabric.Object - * @mixes fabric.Collection - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} - * @see {@link fabric.Group#initialize} for constructor definition - */ - fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { + return { + left: minX, + top: minY, + width: deltaX, + height: deltaY + }; + } + }); /** - * Type of an object - * @type String - * @default + * Creates an instance of fabric.Path from an object + * @static + * @memberOf fabric.Path + * @param {Object} object + * @returns {Promise} */ - type: 'group', + fabric.Path.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Path, object, 'path'); + }; + /* _FROM_SVG_START_ */ /** - * Width of stroke - * @type Number - * @default + * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) + * @static + * @memberOf fabric.Path + * @see http://www.w3.org/TR/SVG/paths.html#PathElement */ - strokeWidth: 0, + fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); /** - * Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets - * @type Boolean - * @default + * Creates an instance of fabric.Path from an SVG element + * @static + * @memberOf fabric.Path + * @param {SVGElement} element to parse + * @param {Function} callback Callback to invoke when an fabric.Path instance is created + * @param {Object} [options] Options object + * @param {Function} [callback] Options callback invoked after parsing is finished */ - subTargetCheck: false, + fabric.Path.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ - /** - * Groups are container, do not render anything on theyr own, ence no cache properties - * @type Array - * @default - */ - cacheProperties: [], + })(typeof exports !== 'undefined' ? exports : window); + (function (global) { + var fabric = global.fabric || (global.fabric = {}), + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + invertTransform = fabric.util.invertTransform, + transformPoint = fabric.util.transformPoint, + applyTransformToObject = fabric.util.applyTransformToObject, + degreesToRadians = fabric.util.degreesToRadians, + clone = fabric.util.object.clone; /** - * setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still - * available setting this boolean to true. - * @type Boolean - * @since 2.0.0 - * @default + * Group class + * @class fabric.Group + * @extends fabric.Object + * @mixes fabric.Collection + * @fires layout once layout completes + * @see {@link fabric.Group#initialize} for constructor definition */ - useSetOnGroup: false, + fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { - /** - * Constructor - * @param {Object} objects Group objects - * @param {Object} [options] Options object - * @param {Boolean} [isAlreadyGrouped] if true, objects have been grouped already. - * @return {Object} thisArg - */ - initialize: function(objects, options, isAlreadyGrouped) { - options = options || {}; - this._objects = []; - // if objects enclosed in a group have been grouped already, - // we cannot change properties of objects. - // Thus we need to set options to group without objects, - isAlreadyGrouped && this.callSuper('initialize', options); - this._objects = objects || []; - for (var i = this._objects.length; i--; ) { - this._objects[i].group = this; - } - - if (!isAlreadyGrouped) { - var center = options && options.centerPoint; - // we want to set origins before calculating the bounding box. - // so that the topleft can be set with that in mind. - // if specific top and left are passed, are overwritten later - // with the callSuper('initialize', options) - if (options.originX !== undefined) { - this.originX = options.originX; - } - if (options.originY !== undefined) { - this.originY = options.originY; - } - // if coming from svg i do not want to calc bounds. - // i assume width and height are passed along options - center || this._calcBounds(); - this._updateObjectsCoords(center); - delete options.centerPoint; - this.callSuper('initialize', options); - } - else { - this._updateObjectsACoords(); - } + /** + * Type of an object + * @type string + * @default + */ + type: 'group', - this.setCoords(); - }, + /** + * Specifies the **layout strategy** for instance + * Used by `getLayoutStrategyResult` to calculate layout + * `fit-content`, `fit-content-lazy`, `fixed`, `clip-path` are supported out of the box + * @type string + * @default + */ + layout: 'fit-content', - /** - * @private - */ - _updateObjectsACoords: function() { - var skipControls = true; - for (var i = this._objects.length; i--; ){ - this._objects[i].setCoords(skipControls); - } - }, + /** + * Width of stroke + * @type Number + */ + strokeWidth: 0, - /** - * @private - * @param {Boolean} [skipCoordsChange] if true, coordinates of objects enclosed in a group do not change - */ - _updateObjectsCoords: function(center) { - var center = center || this.getCenterPoint(); - for (var i = this._objects.length; i--; ){ - this._updateObjectCoords(this._objects[i], center); - } - }, + /** + * List of properties to consider when checking if state + * of an object is changed (fabric.Object#hasStateChanged) + * as well as for history (undo/redo) purposes + * @type string[] + */ + stateProperties: fabric.Object.prototype.stateProperties.concat('layout'), - /** - * @private - * @param {Object} object - * @param {fabric.Point} center, current center of group. - */ - _updateObjectCoords: function(object, center) { - var objectLeft = object.left, - objectTop = object.top, - skipControls = true; + /** + * Used to optimize performance + * set to `false` if you don't need contained objects to be targets of events + * @default + * @type boolean + */ + subTargetCheck: false, - object.set({ - left: objectLeft - center.x, - top: objectTop - center.y - }); - object.group = this; - object.setCoords(skipControls); - }, + /** + * Used to allow targeting of object inside groups. + * set to true if you want to select an object inside a group.\ + * **REQUIRES** `subTargetCheck` set to true + * @default + * @type boolean + */ + interactive: false, - /** - * Returns string represenation of a group - * @return {String} - */ - toString: function() { - return '#'; - }, + /** + * Used internally to optimize performance + * Once an object is selected, instance is rendered without the selected object. + * This way instance is cached only once for the entire interaction with the selected object. + * @private + */ + _activeObjects: undefined, - /** - * Adds an object to a group; Then recalculates group's dimension, position. - * @param {Object} object - * @return {fabric.Group} thisArg - * @chainable - */ - addWithUpdate: function(object) { - var nested = !!this.group; - this._restoreObjectsState(); - fabric.util.resetObjectTransform(this); - if (object) { - if (nested) { - // if this group is inside another group, we need to pre transform the object - fabric.util.removeTransformFromObject(object, this.group.calcTransformMatrix()); - } - this._objects.push(object); - object.group = this; - object._set('canvas', this.canvas); - } - this._calcBounds(); - this._updateObjectsCoords(); - this.dirty = true; - if (nested) { - this.group.addWithUpdate(); - } - else { - this.setCoords(); - } - return this; - }, + /** + * Constructor + * + * @param {fabric.Object[]} [objects] instance objects + * @param {Object} [options] Options object + * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane + * @return {fabric.Group} thisArg + */ + initialize: function (objects, options, objectsRelativeToGroup) { + this._objects = objects || []; + this._activeObjects = []; + this.__objectMonitor = this.__objectMonitor.bind(this); + this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true); + this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false); + this._firstLayoutDone = false; + // setting angle, skewX, skewY must occur after initial layout + this.callSuper('initialize', Object.assign({}, options, { angle: 0, skewX: 0, skewY: 0 })); + this.forEachObject(function (object) { + this.enterGroup(object, false); + }, this); + this._applyLayoutStrategy({ + type: 'initialization', + options: options, + objectsRelativeToGroup: objectsRelativeToGroup + }); + }, + + /** + * @private + * @param {string} key + * @param {*} value + */ + _set: function (key, value) { + var prev = this[key]; + this.callSuper('_set', key, value); + if (key === 'canvas' && prev !== value) { + this.forEachObject(function (object) { + object._set(key, value); + }); + } + if (key === 'layout' && prev !== value) { + this._applyLayoutStrategy({ type: 'layout_change', layout: value, prevLayout: prev }); + } + if (key === 'interactive') { + this.forEachObject(this._watchObject.bind(this, value)); + } + return this; + }, + + /** + * @private + */ + _shouldSetNestedCoords: function () { + return this.subTargetCheck; + }, + + /** + * Override this method to enhance performance (for groups with a lot of objects). + * If Overriding, be sure not pass illegal objects to group - it will break your app. + * @private + */ + _filterObjectsBeforeEnteringGroup: function (objects) { + return objects.filter(function (object, index, array) { + // can enter AND is the first occurrence of the object in the passed args (to prevent adding duplicates) + return this.canEnterGroup(object) && array.indexOf(object) === index; + }, this); + }, + + /** + * Add objects + * @param {...fabric.Object} objects + */ + add: function () { + var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.from(arguments)); + fabric.Collection.add.call(this, allowedObjects, this._onObjectAdded); + this._onAfterObjectsChange('added', allowedObjects); + }, + + /** + * Inserts an object into collection at specified index + * @param {fabric.Object | fabric.Object[]} objects Object to insert + * @param {Number} index Index to insert object at + */ + insertAt: function (objects, index) { + var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.isArray(objects) ? objects : [objects]); + fabric.Collection.insertAt.call(this, allowedObjects, index, this._onObjectAdded); + this._onAfterObjectsChange('added', allowedObjects); + }, + + /** + * Remove objects + * @param {...fabric.Object} objects + * @returns {fabric.Object[]} removed objects + */ + remove: function () { + var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); + this._onAfterObjectsChange('removed', removed); + return removed; + }, + + /** + * Remove all objects + * @returns {fabric.Object[]} removed objects + */ + removeAll: function () { + this._activeObjects = []; + return this.remove.apply(this, this._objects.slice()); + }, + + /** + * invalidates layout on object modified + * @private + */ + __objectMonitor: function (opt) { + this._applyLayoutStrategy(Object.assign({}, opt, { + type: 'object_modified' + })); + this._set('dirty', true); + }, + + /** + * keeps track of the selected objects + * @private + */ + __objectSelectionMonitor: function (selected, opt) { + var object = opt.target; + if (selected) { + this._activeObjects.push(object); + this._set('dirty', true); + } + else if (this._activeObjects.length > 0) { + var index = this._activeObjects.indexOf(object); + if (index > -1) { + this._activeObjects.splice(index, 1); + this._set('dirty', true); + } + } + }, + + /** + * @private + * @param {boolean} watch + * @param {fabric.Object} object + */ + _watchObject: function (watch, object) { + var directive = watch ? 'on' : 'off'; + // make sure we listen only once + watch && this._watchObject(false, object); + object[directive]('changed', this.__objectMonitor); + object[directive]('modified', this.__objectMonitor); + object[directive]('selected', this.__objectSelectionTracker); + object[directive]('deselected', this.__objectSelectionDisposer); + }, - /** - * Removes an object from a group; Then recalculates group's dimension, position. - * @param {Object} object - * @return {fabric.Group} thisArg - * @chainable - */ - removeWithUpdate: function(object) { - this._restoreObjectsState(); - fabric.util.resetObjectTransform(this); + /** + * Checks if object can enter group and logs relevant warnings + * @private + * @param {fabric.Object} object + * @returns + */ + canEnterGroup: function (object) { + if (object === this || this.isDescendantOf(object)) { + // prevent circular object tree + /* _DEV_MODE_START_ */ + console.error('fabric.Group: circular object trees are not supported, this call has no effect'); + /* _DEV_MODE_END_ */ + return false; + } + else if (this._objects.indexOf(object) !== -1) { + // is already in the objects array + /* _DEV_MODE_START_ */ + console.error('fabric.Group: duplicate objects are not supported inside group, this call has no effect'); + /* _DEV_MODE_END_ */ + return false; + } + return true; + }, - this.remove(object); - this._calcBounds(); - this._updateObjectsCoords(); - this.setCoords(); - this.dirty = true; - return this; - }, + /** + * @private + * @param {fabric.Object} object + * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane + * @returns {boolean} true if object entered group + */ + enterGroup: function (object, removeParentTransform) { + if (object.group) { + object.group.remove(object); + } + this._enterGroup(object, removeParentTransform); + return true; + }, - /** - * @private - */ - _onObjectAdded: function(object) { - this.dirty = true; - object.group = this; - object._set('canvas', this.canvas); - }, + /** + * @private + * @param {fabric.Object} object + * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane + */ + _enterGroup: function (object, removeParentTransform) { + if (removeParentTransform) { + // can this be converted to utils (sendObjectToPlane)? + applyTransformToObject( + object, + multiplyTransformMatrices( + invertTransform(this.calcTransformMatrix()), + object.calcTransformMatrix() + ) + ); + } + this._shouldSetNestedCoords() && object.setCoords(); + object._set('group', this); + object._set('canvas', this.canvas); + this.interactive && this._watchObject(true, object); + var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject(); + // if we are adding the activeObject in a group + if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) { + this._activeObjects.push(object); + } + }, - /** - * @private - */ - _onObjectRemoved: function(object) { - this.dirty = true; - delete object.group; - }, + /** + * @private + * @param {fabric.Object} object + * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it + */ + exitGroup: function (object, removeParentTransform) { + this._exitGroup(object, removeParentTransform); + object._set('canvas', undefined); + }, - /** - * @private - */ - _set: function(key, value) { - var i = this._objects.length; - if (this.useSetOnGroup) { - while (i--) { - this._objects[i].setOnGroup(key, value); + /** + * @private + * @param {fabric.Object} object + * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it + */ + _exitGroup: function (object, removeParentTransform) { + object._set('group', undefined); + if (!removeParentTransform) { + applyTransformToObject( + object, + multiplyTransformMatrices( + this.calcTransformMatrix(), + object.calcTransformMatrix() + ) + ); + object.setCoords(); } - } - if (key === 'canvas') { - while (i--) { - this._objects[i]._set(key, value); + this._watchObject(false, object); + var index = this._activeObjects.length > 0 ? this._activeObjects.indexOf(object) : -1; + if (index > -1) { + this._activeObjects.splice(index, 1); } - } - fabric.Object.prototype._set.call(this, key, value); - }, + }, - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - var _includeDefaultValues = this.includeDefaultValues; - var objsToObject = this._objects - .filter(function (obj) { - return !obj.excludeFromExport; - }) - .map(function (obj) { - var originalDefaults = obj.includeDefaultValues; - obj.includeDefaultValues = _includeDefaultValues; - var _obj = obj.toObject(propertiesToInclude); - obj.includeDefaultValues = originalDefaults; - return _obj; + /** + * @private + * @param {'added'|'removed'} type + * @param {fabric.Object[]} targets + */ + _onAfterObjectsChange: function (type, targets) { + this._applyLayoutStrategy({ + type: type, + targets: targets }); - var obj = fabric.Object.prototype.toObject.call(this, propertiesToInclude); - obj.objects = objsToObject; - return obj; - }, + this._set('dirty', true); + }, - /** - * Returns object representation of an instance, in dataless mode. - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toDatalessObject: function(propertiesToInclude) { - var objsToObject, sourcePath = this.sourcePath; - if (sourcePath) { - objsToObject = sourcePath; - } - else { - var _includeDefaultValues = this.includeDefaultValues; - objsToObject = this._objects.map(function(obj) { - var originalDefaults = obj.includeDefaultValues; - obj.includeDefaultValues = _includeDefaultValues; - var _obj = obj.toDatalessObject(propertiesToInclude); - obj.includeDefaultValues = originalDefaults; - return _obj; - }); - } - var obj = fabric.Object.prototype.toDatalessObject.call(this, propertiesToInclude); - obj.objects = objsToObject; - return obj; - }, + /** + * @private + * @param {fabric.Object} object + */ + _onObjectAdded: function (object) { + this.enterGroup(object, true); + object.fire('added', { target: this }); + }, - /** - * Renders instance on a given context - * @param {CanvasRenderingContext2D} ctx context to render instance on - */ - render: function(ctx) { - this._transformDone = true; - this.callSuper('render', ctx); - this._transformDone = false; - }, + /** + * @private + * @param {fabric.Object} object + */ + _onRelativeObjectAdded: function (object) { + this.enterGroup(object, false); + object.fire('added', { target: this }); + }, - /** - * Decide if the object should cache or not. Create its own cache level - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group is already cached. - * @return {Boolean} - */ - shouldCache: function() { - var ownCache = fabric.Object.prototype.shouldCache.call(this); - if (ownCache) { - for (var i = 0, len = this._objects.length; i < len; i++) { - if (this._objects[i].willDrawShadow()) { - this.ownCaching = false; - return false; + /** + * @private + * @param {fabric.Object} object + * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it + */ + _onObjectRemoved: function (object, removeParentTransform) { + this.exitGroup(object, removeParentTransform); + object.fire('removed', { target: this }); + }, + + /** + * Decide if the object should cache or not. Create its own cache level + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group is already cached. + * @return {Boolean} + */ + shouldCache: function() { + var ownCache = fabric.Object.prototype.shouldCache.call(this); + if (ownCache) { + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].willDrawShadow()) { + this.ownCaching = false; + return false; + } } } - } - return ownCache; - }, + return ownCache; + }, - /** - * Check if this object or a child object will cast a shadow - * @return {Boolean} - */ - willDrawShadow: function() { - if (fabric.Object.prototype.willDrawShadow.call(this)) { - return true; - } - for (var i = 0, len = this._objects.length; i < len; i++) { - if (this._objects[i].willDrawShadow()) { + /** + * Check if this object or a child object will cast a shadow + * @return {Boolean} + */ + willDrawShadow: function() { + if (fabric.Object.prototype.willDrawShadow.call(this)) { return true; } - } - return false; - }, - - /** - * Check if this group or its parent group are caching, recursively up - * @return {Boolean} - */ - isOnACache: function() { - return this.ownCaching || (this.group && this.group.isOnACache()); - }, - - /** - * Execute the drawing operation for an object on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawObject: function(ctx) { - for (var i = 0, len = this._objects.length; i < len; i++) { - this._objects[i].render(ctx); - } - this._drawClipPath(ctx, this.clipPath); - }, - - /** - * Check if cache is dirty - */ - isCacheDirty: function(skipCanvas) { - if (this.callSuper('isCacheDirty', skipCanvas)) { - return true; - } - if (!this.statefullCache) { - return false; - } - for (var i = 0, len = this._objects.length; i < len; i++) { - if (this._objects[i].isCacheDirty(true)) { - if (this._cacheCanvas) { - // if this group has not a cache canvas there is nothing to clean - var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-x / 2, -y / 2, x, y); + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].willDrawShadow()) { + return true; } - return true; } - } - return false; - }, + return false; + }, - /** - * Restores original state of each of group objects (original state is that which was before group was created). - * if the nested boolean is true, the original state will be restored just for the - * first group and not for all the group chain - * @private - * @param {Boolean} nested tell the function to restore object state up to the parent group and not more - * @return {fabric.Group} thisArg - * @chainable - */ - _restoreObjectsState: function() { - var groupMatrix = this.calcOwnMatrix(); - this._objects.forEach(function(object) { - // instead of using _this = this; - fabric.util.addTransformToObject(object, groupMatrix); - delete object.group; - object.setCoords(); - }); - return this; - }, + /** + * Check if instance or its group are caching, recursively up + * @return {Boolean} + */ + isOnACache: function () { + return this.ownCaching || (!!this.group && this.group.isOnACache()); + }, - /** - * Destroys a group (restoring state of its objects) - * @return {fabric.Group} thisArg - * @chainable - */ - destroy: function() { - // when group is destroyed objects needs to get a repaint to be eventually - // displayed on canvas. - this._objects.forEach(function(object) { - object.set('dirty', true); - }); - return this._restoreObjectsState(); - }, + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject: function(ctx) { + this._renderBackground(ctx); + for (var i = 0; i < this._objects.length; i++) { + this._objects[i].render(ctx); + } + this._drawClipPath(ctx, this.clipPath); + }, - dispose: function () { - this.callSuper('dispose'); - this.forEachObject(function (object) { - object.dispose && object.dispose(); - }); - this._objects = []; - }, + /** + * Check if cache is dirty + */ + isCacheDirty: function(skipCanvas) { + if (this.callSuper('isCacheDirty', skipCanvas)) { + return true; + } + if (!this.statefullCache) { + return false; + } + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].isCacheDirty(true)) { + if (this._cacheCanvas) { + // if this group has not a cache canvas there is nothing to clean + var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-x / 2, -y / 2, x, y); + } + return true; + } + } + return false; + }, - /** - * make a group an active selection, remove the group from canvas - * the group has to be on canvas for this to work. - * @return {fabric.ActiveSelection} thisArg - * @chainable - */ - toActiveSelection: function() { - if (!this.canvas) { - return; - } - var objects = this._objects, canvas = this.canvas; - this._objects = []; - var options = this.toObject(); - delete options.objects; - var activeSelection = new fabric.ActiveSelection([]); - activeSelection.set(options); - activeSelection.type = 'activeSelection'; - canvas.remove(this); - objects.forEach(function(object) { - object.group = activeSelection; - object.dirty = true; - canvas.add(object); - }); - activeSelection.canvas = canvas; - activeSelection._objects = objects; - canvas._activeObject = activeSelection; - activeSelection.setCoords(); - return activeSelection; - }, + /** + * @override + * @return {Boolean} + */ + setCoords: function () { + this.callSuper('setCoords'); + this._shouldSetNestedCoords() && this.forEachObject(function (object) { + object.setCoords(); + }); + }, - /** - * Destroys a group (restoring state of its objects) - * @return {fabric.Group} thisArg - * @chainable - */ - ungroupOnCanvas: function() { - return this._restoreObjectsState(); - }, + /** + * Renders instance on a given context + * @param {CanvasRenderingContext2D} ctx context to render instance on + */ + render: function (ctx) { + // used to inform objects not to double opacity + this._transformDone = true; + this.callSuper('render', ctx); + this._transformDone = false; + }, - /** - * Sets coordinates of all objects inside group - * @return {fabric.Group} thisArg - * @chainable - */ - setObjectsCoords: function() { - var skipControls = true; - this.forEachObject(function(object) { - object.setCoords(skipControls); - }); - return this; - }, + /** + * @public + * @param {Partial & { layout?: string }} [context] pass values to use for layout calculations + */ + triggerLayout: function (context) { + if (context && context.layout) { + context.prevLayout = this.layout; + this.layout = context.layout; + } + this._applyLayoutStrategy({ type: 'imperative', context: context }); + }, - /** - * @private - */ - _calcBounds: function(onlyWidthHeight) { - var aX = [], - aY = [], - o, prop, coords, - props = ['tr', 'br', 'bl', 'tl'], - i = 0, iLen = this._objects.length, - j, jLen = props.length; + /** + * @private + * @param {fabric.Object} object + * @param {fabric.Point} diff + */ + _adjustObjectPosition: function (object, diff) { + object.set({ + left: object.left + diff.x, + top: object.top + diff.y, + }); + }, - for ( ; i < iLen; ++i) { - o = this._objects[i]; - coords = o.calcACoords(); - for (j = 0; j < jLen; j++) { - prop = props[j]; - aX.push(coords[prop].x); - aY.push(coords[prop].y); + /** + * initial layout logic: + * calculate bbox of objects (if necessary) and translate it according to options received from the constructor (left, top, width, height) + * so it is placed in the center of the bbox received from the constructor + * + * @private + * @param {LayoutContext} context + */ + _applyLayoutStrategy: function (context) { + var isFirstLayout = context.type === 'initialization'; + if (!isFirstLayout && !this._firstLayoutDone) { + // reject layout requests before initialization layout + return; } - o.aCoords = coords; - } + var options = isFirstLayout && context.options; + var initialTransform = options && { + angle: options.angle || 0, + skewX: options.skewX || 0, + skewY: options.skewY || 0, + }; + var center = this.getRelativeCenterPoint(); + var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context); + if (result) { + // handle positioning + var newCenter = new fabric.Point(result.centerX, result.centerY); + var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0)); + var diff = transformPoint(vector, invertTransform(this.calcOwnMatrix()), true); + // set dimensions + this.set({ width: result.width, height: result.height }); + // adjust objects to account for new center + !context.objectsRelativeToGroup && this.forEachObject(function (object) { + this._adjustObjectPosition(object, diff); + }, this); + // clip path as well + !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned + && this._adjustObjectPosition(this.clipPath, diff); + if (!newCenter.eq(center) || initialTransform) { + // set position + this.setPositionByOrigin(newCenter, 'center', 'center'); + initialTransform && this.set(initialTransform); + this.setCoords(); + } + } + else if (isFirstLayout) { + // fill `result` with initial values for the layout hook + result = { + centerX: center.x, + centerY: center.y, + width: this.width, + height: this.height, + }; + initialTransform && this.set(initialTransform); + } + else { + // no `result` so we return + return; + } + // flag for next layouts + this._firstLayoutDone = true; + // fire layout hook and event (event will fire only for layouts after initialization layout) + this.onLayout(context, result); + this.fire('layout', { + context: context, + result: result, + diff: diff + }); + // recursive up + if (this.group && this.group._applyLayoutStrategy) { + // append the path recursion to context + if (!context.path) { + context.path = []; + } + context.path.push(this); + // all parents should invalidate their layout + this.group._applyLayoutStrategy(context); + } + }, - this._getBounds(aX, aY, onlyWidthHeight); - }, - /** - * @private - */ - _getBounds: function(aX, aY, onlyWidthHeight) { - var minXY = new fabric.Point(min(aX), min(aY)), - maxXY = new fabric.Point(max(aX), max(aY)), - top = minXY.y || 0, left = minXY.x || 0, - width = (maxXY.x - minXY.x) || 0, - height = (maxXY.y - minXY.y) || 0; - this.width = width; - this.height = height; - if (!onlyWidthHeight) { - // the bounding box always finds the topleft most corner. - // whatever is the group origin, we set up here the left/top position. - this.setPositionByOrigin({ x: left, y: top }, 'left', 'top'); - } - }, + /** + * Override this method to customize layout. + * If you need to run logic once layout completes use `onLayout` + * @public + * + * @typedef {'initialization'|'object_modified'|'added'|'removed'|'layout_change'|'imperative'} LayoutContextType + * + * @typedef LayoutContext context object with data regarding what triggered the call + * @property {LayoutContextType} type + * @property {fabric.Object[]} [path] array of objects starting from the object that triggered the call to the current one + * + * @typedef LayoutResult positioning and layout data **relative** to instance's parent + * @property {number} centerX new centerX as measured by the containing plane (same as `left` with `originX` set to `center`) + * @property {number} centerY new centerY as measured by the containing plane (same as `top` with `originY` set to `center`) + * @property {number} [correctionX] correctionX to translate objects by, measured as `centerX` + * @property {number} [correctionY] correctionY to translate objects by, measured as `centerY` + * @property {number} width + * @property {number} height + * + * @param {string} layoutDirective + * @param {fabric.Object[]} objects + * @param {LayoutContext} context + * @returns {LayoutResult | undefined} + */ + getLayoutStrategyResult: function (layoutDirective, objects, context) { // eslint-disable-line no-unused-vars + // `fit-content-lazy` performance enhancement + // skip if instance had no objects before the `added` event because it may have kept layout after removing all previous objects + if (layoutDirective === 'fit-content-lazy' + && context.type === 'added' && objects.length > context.targets.length) { + // calculate added objects' bbox with existing bbox + var addedObjects = context.targets.concat(this); + return this.prepareBoundingBox(layoutDirective, addedObjects, context); + } + else if (layoutDirective === 'fit-content' || layoutDirective === 'fit-content-lazy' + || (layoutDirective === 'fixed' && (context.type === 'initialization' || context.type === 'imperative'))) { + return this.prepareBoundingBox(layoutDirective, objects, context); + } + else if (layoutDirective === 'clip-path' && this.clipPath) { + var clipPath = this.clipPath; + var clipPathSizeAfter = clipPath._getTransformedDimensions(); + if (clipPath.absolutePositioned && (context.type === 'initialization' || context.type === 'layout_change')) { + // we want the center point to exist in group's containing plane + var clipPathCenter = clipPath.getCenterPoint(); + if (this.group) { + // send point from canvas plane to group's containing plane + var inv = invertTransform(this.group.calcTransformMatrix()); + clipPathCenter = transformPoint(clipPathCenter, inv); + } + return { + centerX: clipPathCenter.x, + centerY: clipPathCenter.y, + width: clipPathSizeAfter.x, + height: clipPathSizeAfter.y, + }; + } + else if (!clipPath.absolutePositioned) { + var center; + var clipPathRelativeCenter = clipPath.getRelativeCenterPoint(), + // we want the center point to exist in group's containing plane, so we send it upwards + clipPathCenter = transformPoint(clipPathRelativeCenter, this.calcOwnMatrix(), true); + if (context.type === 'initialization' || context.type === 'layout_change') { + var bbox = this.prepareBoundingBox(layoutDirective, objects, context) || {}; + center = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0); + return { + centerX: center.x + clipPathCenter.x, + centerY: center.y + clipPathCenter.y, + correctionX: bbox.correctionX - clipPathCenter.x, + correctionY: bbox.correctionY - clipPathCenter.y, + width: clipPath.width, + height: clipPath.height, + }; + } + else { + center = this.getRelativeCenterPoint(); + return { + centerX: center.x + clipPathCenter.x, + centerY: center.y + clipPathCenter.y, + width: clipPathSizeAfter.x, + height: clipPathSizeAfter.y, + }; + } + } + } + else if (layoutDirective === 'svg' && context.type === 'initialization') { + var bbox = this.getObjectsBoundingBox(objects, true) || {}; + return Object.assign(bbox, { + correctionX: -bbox.offsetX || 0, + correctionY: -bbox.offsetY || 0, + }); + } + }, - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - _toSVG: function(reviver) { - var svgString = ['\n']; + /** + * Override this method to customize layout. + * A wrapper around {@link fabric.Group#getObjectsBoundingBox} + * @public + * @param {string} layoutDirective + * @param {fabric.Object[]} objects + * @param {LayoutContext} context + * @returns {LayoutResult | undefined} + */ + prepareBoundingBox: function (layoutDirective, objects, context) { + if (context.type === 'initialization') { + return this.prepareInitialBoundingBox(layoutDirective, objects, context); + } + else if (context.type === 'imperative' && context.context) { + return Object.assign( + this.getObjectsBoundingBox(objects) || {}, + context.context + ); + } + else { + return this.getObjectsBoundingBox(objects); + } + }, - for (var i = 0, len = this._objects.length; i < len; i++) { - svgString.push('\t\t', this._objects[i].toSVG(reviver)); - } - svgString.push('\n'); - return svgString; - }, + /** + * Calculates center taking into account originX, originY while not being sure that width/height are initialized + * @public + * @param {string} layoutDirective + * @param {fabric.Object[]} objects + * @param {LayoutContext} context + * @returns {LayoutResult | undefined} + */ + prepareInitialBoundingBox: function (layoutDirective, objects, context) { + var options = context.options || {}, + hasX = typeof options.left === 'number', + hasY = typeof options.top === 'number', + hasWidth = typeof options.width === 'number', + hasHeight = typeof options.height === 'number'; + + // performance enhancement + // skip layout calculation if bbox is defined + if ((hasX && hasY && hasWidth && hasHeight && context.objectsRelativeToGroup) || objects.length === 0) { + // return nothing to skip layout + return; + } - /** - * Returns styles-string for svg-export, specific version for group - * @return {String} - */ - getSvgStyles: function() { - var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? - 'opacity: ' + this.opacity + ';' : '', - visibility = this.visible ? '' : ' visibility: hidden;'; - return [ - opacity, - this.getSvgFilter(), - visibility - ].join(''); - }, + var bbox = this.getObjectsBoundingBox(objects) || {}; + var width = hasWidth ? this.width : (bbox.width || 0), + height = hasHeight ? this.height : (bbox.height || 0), + calculatedCenter = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0), + origin = new fabric.Point(this.resolveOriginX(this.originX), this.resolveOriginY(this.originY)), + size = new fabric.Point(width, height), + strokeWidthVector = this._getTransformedDimensions({ width: 0, height: 0 }), + sizeAfter = this._getTransformedDimensions({ + width: width, + height: height, + strokeWidth: 0 + }), + bboxSizeAfter = this._getTransformedDimensions({ + width: bbox.width, + height: bbox.height, + strokeWidth: 0 + }), + rotationCorrection = new fabric.Point(0, 0); + + // calculate center and correction + var originT = origin.scalarAdd(0.5); + var originCorrection = sizeAfter.multiply(originT); + var centerCorrection = new fabric.Point( + hasWidth ? bboxSizeAfter.x / 2 : originCorrection.x, + hasHeight ? bboxSizeAfter.y / 2 : originCorrection.y + ); + var center = new fabric.Point( + hasX ? this.left - (sizeAfter.x + strokeWidthVector.x) * origin.x : calculatedCenter.x - centerCorrection.x, + hasY ? this.top - (sizeAfter.y + strokeWidthVector.y) * origin.y : calculatedCenter.y - centerCorrection.y + ); + var offsetCorrection = new fabric.Point( + hasX ? + center.x - calculatedCenter.x + bboxSizeAfter.x * (hasWidth ? 0.5 : 0) : + -(hasWidth ? (sizeAfter.x - strokeWidthVector.x) * 0.5 : sizeAfter.x * originT.x), + hasY ? + center.y - calculatedCenter.y + bboxSizeAfter.y * (hasHeight ? 0.5 : 0) : + -(hasHeight ? (sizeAfter.y - strokeWidthVector.y) * 0.5 : sizeAfter.y * originT.y) + ).add(rotationCorrection); + var correction = new fabric.Point( + hasWidth ? -sizeAfter.x / 2 : 0, + hasHeight ? -sizeAfter.y / 2 : 0 + ).add(offsetCorrection); - /** - * Returns svg clipPath representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toClipPathSVG: function(reviver) { - var svgString = []; + return { + centerX: center.x, + centerY: center.y, + correctionX: correction.x, + correctionY: correction.y, + width: size.x, + height: size.y, + }; + }, - for (var i = 0, len = this._objects.length; i < len; i++) { - svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); - } + /** + * Calculate the bbox of objects relative to instance's containing plane + * @public + * @param {fabric.Object[]} objects + * @returns {LayoutResult | null} bounding box + */ + getObjectsBoundingBox: function (objects, ignoreOffset) { + if (objects.length === 0) { + return null; + } + var objCenter, sizeVector, min, max, a, b; + objects.forEach(function (object, i) { + objCenter = object.getRelativeCenterPoint(); + sizeVector = object._getTransformedDimensions().scalarDivideEquals(2); + if (object.angle) { + var rad = degreesToRadians(object.angle), + sin = Math.abs(fabric.util.sin(rad)), + cos = Math.abs(fabric.util.cos(rad)), + rx = sizeVector.x * cos + sizeVector.y * sin, + ry = sizeVector.x * sin + sizeVector.y * cos; + sizeVector = new fabric.Point(rx, ry); + } + a = objCenter.subtract(sizeVector); + b = objCenter.add(sizeVector); + if (i === 0) { + min = new fabric.Point(Math.min(a.x, b.x), Math.min(a.y, b.y)); + max = new fabric.Point(Math.max(a.x, b.x), Math.max(a.y, b.y)); + } + else { + min.setXY(Math.min(min.x, a.x, b.x), Math.min(min.y, a.y, b.y)); + max.setXY(Math.max(max.x, a.x, b.x), Math.max(max.y, a.y, b.y)); + } + }); - return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); - }, - /* _TO_SVG_END_ */ - }); + var size = max.subtract(min), + relativeCenter = ignoreOffset ? size.scalarDivide(2) : min.midPointFrom(max), + // we send `relativeCenter` up to group's containing plane + offset = transformPoint(min, this.calcOwnMatrix()), + center = transformPoint(relativeCenter, this.calcOwnMatrix()); - /** - * Returns {@link fabric.Group} instance from an object representation - * @static - * @memberOf fabric.Group - * @param {Object} object Object to create a group from - * @param {Function} [callback] Callback to invoke when an group instance is created - */ - fabric.Group.fromObject = function(object, callback) { - var objects = object.objects, - options = fabric.util.object.clone(object, true); - delete options.objects; - if (typeof objects === 'string') { - // it has to be an url or something went wrong. - fabric.loadSVGFromURL(objects, function (elements) { - var group = fabric.util.groupSVGElements(elements, object, objects); - group.set(options); - callback && callback(group); - }); - return; - } - fabric.util.enlivenObjects(objects, function (enlivenedObjects) { - var options = fabric.util.object.clone(object, true); - delete options.objects; - fabric.util.enlivenObjectEnlivables(object, options, function () { - callback && callback(new fabric.Group(enlivenedObjects, options, true)); - }); - }); - }; + return { + offsetX: offset.x, + offsetY: offset.y, + centerX: center.x, + centerY: center.y, + width: size.x, + height: size.y, + }; + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * Hook that is called once layout has completed. + * Provided for layout customization, override if necessary. + * Complements `getLayoutStrategyResult`, which is called at the beginning of layout. + * @public + * @param {LayoutContext} context layout context + * @param {LayoutResult} result layout result + */ + onLayout: function (/* context, result */) { + // override by subclass + }, + /** + * + * @private + * @param {'toObject'|'toDatalessObject'} [method] + * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @returns {fabric.Object[]} serialized objects + */ + __serializeObjects: function (method, propertiesToInclude) { + var _includeDefaultValues = this.includeDefaultValues; + return this._objects + .filter(function (obj) { + return !obj.excludeFromExport; + }) + .map(function (obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = _includeDefaultValues; + var data = obj[method || 'toObject'](propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + //delete data.version; + return data; + }); + }, -(function(global) { + /** + * Returns object representation of an instance + * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function (propertiesToInclude) { + var obj = this.callSuper('toObject', ['layout', 'subTargetCheck', 'interactive'].concat(propertiesToInclude)); + obj.objects = this.__serializeObjects('toObject', propertiesToInclude); + return obj; + }, - 'use strict'; + toString: function () { + return '#'; + }, - var fabric = global.fabric || (global.fabric = { }); + dispose: function () { + this._activeObjects = []; + this.forEachObject(function (object) { + this._watchObject(false, object); + object.dispose && object.dispose(); + }, this); + this.callSuper('dispose'); + }, - if (fabric.ActiveSelection) { - return; - } + /* _TO_SVG_START_ */ - /** - * Group class - * @class fabric.ActiveSelection - * @extends fabric.Group - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} - * @see {@link fabric.ActiveSelection#initialize} for constructor definition - */ - fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { + /** + * @private + */ + _createSVGBgRect: function (reviver) { + if (!this.backgroundColor) { + return ''; + } + var fillStroke = fabric.Rect.prototype._toSVG.call(this, reviver); + var commons = fillStroke.indexOf('COMMON_PARTS'); + fillStroke[commons] = 'for="group" '; + return fillStroke.join(''); + }, - /** - * Type of an object - * @type String - * @default - */ - type: 'activeSelection', + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + _toSVG: function (reviver) { + var svgString = ['\n']; + var bg = this._createSVGBgRect(reviver); + bg && svgString.push('\t\t', bg); + for (var i = 0; i < this._objects.length; i++) { + svgString.push('\t\t', this._objects[i].toSVG(reviver)); + } + svgString.push('\n'); + return svgString; + }, - /** - * Constructor - * @param {Object} objects ActiveSelection objects - * @param {Object} [options] Options object - * @return {Object} thisArg - */ - initialize: function(objects, options) { - options = options || {}; - this._objects = objects || []; - for (var i = this._objects.length; i--; ) { - this._objects[i].group = this; - } - - if (options.originX) { - this.originX = options.originX; - } - if (options.originY) { - this.originY = options.originY; - } - this._calcBounds(); - this._updateObjectsCoords(); - fabric.Object.prototype.initialize.call(this, options); - this.setCoords(); - }, - - /** - * Change te activeSelection to a normal group, - * High level function that automatically adds it to canvas as - * active object. no events fired. - * @since 2.0.0 - * @return {fabric.Group} - */ - toGroup: function() { - var objects = this._objects.concat(); - this._objects = []; - var options = fabric.Object.prototype.toObject.call(this); - var newGroup = new fabric.Group([]); - delete options.type; - newGroup.set(options); - objects.forEach(function(object) { - object.canvas.remove(object); - object.group = newGroup; - }); - newGroup._objects = objects; - if (!this.canvas) { - return newGroup; - } - var canvas = this.canvas; - canvas.add(newGroup); - canvas._activeObject = newGroup; - newGroup.setCoords(); - return newGroup; - }, + /** + * Returns styles-string for svg-export, specific version for group + * @return {String} + */ + getSvgStyles: function() { + var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? + 'opacity: ' + this.opacity + ';' : '', + visibility = this.visible ? '' : ' visibility: hidden;'; + return [ + opacity, + this.getSvgFilter(), + visibility + ].join(''); + }, - /** - * If returns true, deselection is cancelled. - * @since 2.0.0 - * @return {Boolean} [cancel] - */ - onDeselect: function() { - this.destroy(); - return false; - }, + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function (reviver) { + var svgString = []; + var bg = this._createSVGBgRect(reviver); + bg && svgString.push('\t', bg); + for (var i = 0; i < this._objects.length; i++) { + svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); + } + return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); + }, + /* _TO_SVG_END_ */ + }); /** - * Returns string representation of a group - * @return {String} + * @todo support loading from svg + * @private + * @static + * @memberOf fabric.Group + * @param {Object} object Object to create a group from + * @returns {Promise} */ - toString: function() { - return '#'; - }, + fabric.Group.fromObject = function(object) { + var objects = object.objects || [], + options = clone(object, true); + delete options.objects; + return Promise.all([ + fabric.util.enlivenObjects(objects), + fabric.util.enlivenObjectEnlivables(options) + ]).then(function (enlivened) { + return new fabric.Group(enlivened[0], Object.assign(options, enlivened[1]), true); + }); + }; - /** - * Decide if the object should cache or not. Create its own cache level - * objectCaching is a global flag, wins over everything - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group outside is cached. - * @return {Boolean} - */ - shouldCache: function() { - return false; - }, + })(typeof exports !== 'undefined' ? exports : window); - /** - * Check if this group or its parent group are caching, recursively up - * @return {Boolean} - */ - isOnACache: function() { - return false; - }, + (function(global) { + var fabric = global.fabric || (global.fabric = { }); /** - * Renders controls and borders for the object - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} [styleOverride] properties to override the object style - * @param {Object} [childrenOverride] properties to override the children overrides + * Group class + * @class fabric.ActiveSelection + * @extends fabric.Group + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} + * @see {@link fabric.ActiveSelection#initialize} for constructor definition */ - _renderControls: function(ctx, styleOverride, childrenOverride) { - ctx.save(); - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; - this.callSuper('_renderControls', ctx, styleOverride); - childrenOverride = childrenOverride || { }; - if (typeof childrenOverride.hasControls === 'undefined') { - childrenOverride.hasControls = false; - } - childrenOverride.forActiveSelection = true; - for (var i = 0, len = this._objects.length; i < len; i++) { - this._objects[i]._renderControls(ctx, childrenOverride); - } - ctx.restore(); - }, - }); - - /** - * Returns {@link fabric.ActiveSelection} instance from an object representation - * @static - * @memberOf fabric.ActiveSelection - * @param {Object} object Object to create a group from - * @param {Function} [callback] Callback to invoke when an ActiveSelection instance is created - */ - fabric.ActiveSelection.fromObject = function(object, callback) { - fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) { - delete object.objects; - callback && callback(new fabric.ActiveSelection(enlivenedObjects, object, true)); - }); - }; + fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { -})(typeof exports !== 'undefined' ? exports : this); - - -(function(global) { - - 'use strict'; - - var extend = fabric.util.object.extend; - - if (!global.fabric) { - global.fabric = { }; - } + /** + * Type of an object + * @type String + * @default + */ + type: 'activeSelection', - if (global.fabric.Image) { - fabric.warn('fabric.Image is already defined.'); - return; - } + /** + * @override + */ + layout: 'fit-content', - /** - * Image class - * @class fabric.Image - * @extends fabric.Object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} - * @see {@link fabric.Image#initialize} for constructor definition - */ - fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { + /** + * @override + */ + subTargetCheck: false, - /** - * Type of an object - * @type String - * @default - */ - type: 'image', + /** + * @override + */ + interactive: false, - /** - * Width of a stroke. - * For image quality a stroke multiple of 2 gives better results. - * @type Number - * @default - */ - strokeWidth: 0, + /** + * Constructor + * + * @param {fabric.Object[]} [objects] instance objects + * @param {Object} [options] Options object + * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane + * @return {fabric.ActiveSelection} thisArg + */ + initialize: function (objects, options, objectsRelativeToGroup) { + this.callSuper('initialize', objects, options, objectsRelativeToGroup); + this.setCoords(); + }, - /** - * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. - * This allows for relative urls as image src. - * @since 2.7.0 - * @type Boolean - * @default - */ - srcFromAttribute: false, + /** + * @private + */ + _shouldSetNestedCoords: function () { + return true; + }, - /** - * private - * contains last value of scaleX to detect - * if the Image got resized after the last Render - * @type Number - */ - _lastScaleX: 1, + /** + * @private + * @param {fabric.Object} object + * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane + * @returns {boolean} true if object entered group + */ + enterGroup: function (object, removeParentTransform) { + if (object.group) { + // save ref to group for later in order to return to it + var parent = object.group; + parent._exitGroup(object); + object.__owningGroup = parent; + } + this._enterGroup(object, removeParentTransform); + return true; + }, - /** - * private - * contains last value of scaleY to detect - * if the Image got resized after the last Render - * @type Number - */ - _lastScaleY: 1, + /** + * we want objects to retain their canvas ref when exiting instance + * @private + * @param {fabric.Object} object + * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it + */ + exitGroup: function (object, removeParentTransform) { + this._exitGroup(object, removeParentTransform); + var parent = object.__owningGroup; + if (parent) { + // return to owning group + parent.enterGroup(object); + delete object.__owningGroup; + } + }, - /** - * private - * contains last value of scaling applied by the apply filter chain - * @type Number - */ - _filterScalingX: 1, + /** + * @private + * @param {'added'|'removed'} type + * @param {fabric.Object[]} targets + */ + _onAfterObjectsChange: function (type, targets) { + var groups = []; + targets.forEach(function (object) { + object.group && !groups.includes(object.group) && groups.push(object.group); + }); + if (type === 'removed') { + // invalidate groups' layout and mark as dirty + groups.forEach(function (group) { + group._onAfterObjectsChange('added', targets); + }); + } + else { + // mark groups as dirty + groups.forEach(function (group) { + group._set('dirty', true); + }); + } + }, - /** - * private - * contains last value of scaling applied by the apply filter chain - * @type Number - */ - _filterScalingY: 1, + /** + * If returns true, deselection is cancelled. + * @since 2.0.0 + * @return {Boolean} [cancel] + */ + onDeselect: function() { + this.removeAll(); + return false; + }, - /** - * minimum scale factor under which any resizeFilter is triggered to resize the image - * 0 will disable the automatic resize. 1 will trigger automatically always. - * number bigger than 1 are not implemented yet. - * @type Number - */ - minimumScaleTrigger: 0.5, + /** + * Returns string representation of a group + * @return {String} + */ + toString: function() { + return '#'; + }, - /** - * List of properties to consider when checking if - * state of an object is changed ({@link fabric.Object#hasStateChanged}) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), + /** + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * @return {Boolean} + */ + shouldCache: function() { + return false; + }, - /** - * List of properties to consider when checking if cache needs refresh - * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single - * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty - * and refreshed at the next render - * @type Array - */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), + /** + * Check if this group or its parent group are caching, recursively up + * @return {Boolean} + */ + isOnACache: function() { + return false; + }, - /** - * key used to retrieve the texture representing this image - * @since 2.0.0 - * @type String - * @default - */ - cacheKey: '', + /** + * Renders controls and borders for the object + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [styleOverride] properties to override the object style + * @param {Object} [childrenOverride] properties to override the children overrides + */ + _renderControls: function(ctx, styleOverride, childrenOverride) { + ctx.save(); + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + this.callSuper('_renderControls', ctx, styleOverride); + var options = Object.assign( + { hasControls: false }, + childrenOverride, + { forActiveSelection: true } + ); + for (var i = 0; i < this._objects.length; i++) { + this._objects[i]._renderControls(ctx, options); + } + ctx.restore(); + }, + }); /** - * Image crop in pixels from original image size. - * @since 2.0.0 - * @type Number - * @default + * Returns {@link fabric.ActiveSelection} instance from an object representation + * @static + * @memberOf fabric.ActiveSelection + * @param {Object} object Object to create a group from + * @returns {Promise} */ - cropX: 0, + fabric.ActiveSelection.fromObject = function(object) { + var objects = object.objects, + options = fabric.util.object.clone(object, true); + delete options.objects; + return fabric.util.enlivenObjects(objects).then(function(enlivenedObjects) { + return new fabric.ActiveSelection(enlivenedObjects, options, true); + }); + }; - /** - * Image crop in pixels from original image size. - * @since 2.0.0 - * @type Number - * @default - */ - cropY: 0, + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric, extend = fabric.util.object.extend; /** - * Indicates whether this canvas will use image smoothing when painting this image. - * Also influence if the cacheCanvas for this image uses imageSmoothing - * @since 4.0.0-beta.11 - * @type Boolean - * @default + * Image class + * @class fabric.Image + * @extends fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} + * @see {@link fabric.Image#initialize} for constructor definition */ - imageSmoothing: true, + fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { - /** - * Constructor - * Image can be initialized with any canvas drawable or a string. - * The string should be a url and will be loaded as an image. - * Canvas and Image element work out of the box, while videos require extra code to work. - * Please check video element events for seeking. - * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} element Image element - * @param {Object} [options] Options object - * @param {function} [callback] callback function to call after eventual filters applied. - * @return {fabric.Image} thisArg - */ - initialize: function(element, options) { - options || (options = { }); - this.filters = []; - this.cacheKey = 'texture' + fabric.Object.__uid++; - this.callSuper('initialize', options); - this._initElement(element, options); - }, + /** + * Type of an object + * @type String + * @default + */ + type: 'image', - /** - * Returns image element which this instance if based on - * @return {HTMLImageElement} Image element - */ - getElement: function() { - return this._element || {}; - }, + /** + * Width of a stroke. + * For image quality a stroke multiple of 2 gives better results. + * @type Number + * @default + */ + strokeWidth: 0, - /** - * Sets image element for this instance to a specified one. - * If filters defined they are applied to new image. - * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area. - * @param {HTMLImageElement} element - * @param {Object} [options] Options object - * @return {fabric.Image} thisArg - * @chainable - */ - setElement: function(element, options) { - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._element = element; - this._originalElement = element; - this._initConfig(options); - if (this.filters.length !== 0) { - this.applyFilters(); - } - // resizeFilters work on the already filtered copy. - // we need to apply resizeFilters AFTER normal filters. - // applyResizeFilters is run more often than normal filters - // and is triggered by user interactions rather than dev code - if (this.resizeFilter) { - this.applyResizeFilters(); - } - return this; - }, + /** + * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. + * This allows for relative urls as image src. + * @since 2.7.0 + * @type Boolean + * @default + */ + srcFromAttribute: false, - /** - * Delete a single texture if in webgl mode - */ - removeTexture: function(key) { - var backend = fabric.filterBackend; - if (backend && backend.evictCachesForKey) { - backend.evictCachesForKey(key); - } - }, + /** + * private + * contains last value of scaleX to detect + * if the Image got resized after the last Render + * @type Number + */ + _lastScaleX: 1, - /** - * Delete textures, reference to elements and eventually JSDOM cleanup - */ - dispose: function () { - this.callSuper('dispose'); - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._cacheContext = undefined; - ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { - fabric.util.cleanUpJsdomNode(this[element]); - this[element] = undefined; - }).bind(this)); - }, + /** + * private + * contains last value of scaleY to detect + * if the Image got resized after the last Render + * @type Number + */ + _lastScaleY: 1, - /** - * Get the crossOrigin value (of the corresponding image element) - */ - getCrossOrigin: function() { - return this._originalElement && (this._originalElement.crossOrigin || null); - }, + /** + * private + * contains last value of scaling applied by the apply filter chain + * @type Number + */ + _filterScalingX: 1, - /** - * Returns original size of an image - * @return {Object} Object with "width" and "height" properties - */ - getOriginalSize: function() { - var element = this.getElement(); - return { - width: element.naturalWidth || element.width, - height: element.naturalHeight || element.height - }; - }, + /** + * private + * contains last value of scaling applied by the apply filter chain + * @type Number + */ + _filterScalingY: 1, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _stroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } - var w = this.width / 2, h = this.height / 2; - ctx.beginPath(); - ctx.moveTo(-w, -h); - ctx.lineTo(w, -h); - ctx.lineTo(w, h); - ctx.lineTo(-w, h); - ctx.lineTo(-w, -h); - ctx.closePath(); - }, + /** + * minimum scale factor under which any resizeFilter is triggered to resize the image + * 0 will disable the automatic resize. 1 will trigger automatically always. + * number bigger than 1 are not implemented yet. + * @type Number + */ + minimumScaleTrigger: 0.5, - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function(propertiesToInclude) { - var filters = []; + /** + * List of properties to consider when checking if + * state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), - this.filters.forEach(function(filterObj) { - if (filterObj) { - filters.push(filterObj.toObject()); - } - }); - var object = extend( - this.callSuper( - 'toObject', - ['cropX', 'cropY'].concat(propertiesToInclude) - ), { - src: this.getSrc(), - crossOrigin: this.getCrossOrigin(), - filters: filters, - }); - if (this.resizeFilter) { - object.resizeFilter = this.resizeFilter.toObject(); - } - return object; - }, + /** + * List of properties to consider when checking if cache needs refresh + * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single + * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * and refreshed at the next render + * @type Array + */ + cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), - /** - * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height. - * @return {Boolean} - */ - hasCrop: function() { - return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; - }, + /** + * key used to retrieve the texture representing this image + * @since 2.0.0 + * @type String + * @default + */ + cacheKey: '', - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var svgString = [], imageMarkup = [], strokeSvg, element = this._element, - x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; - if (!element) { - return []; - } - if (this.hasCrop()) { - var clipPathId = fabric.Object.__uid++; - svgString.push( - '\n', - '\t\n', - '\n' - ); - clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; - } - if (!this.imageSmoothing) { - imageRendering = '" image-rendering="optimizeSpeed'; - } - imageMarkup.push('\t\n'); - - if (this.stroke || this.strokeDashArray) { - var origFill = this.fill; - this.fill = null; - strokeSvg = [ - '\t\n' - ]; - this.fill = origFill; - } - if (this.paintFirst !== 'fill') { - svgString = svgString.concat(strokeSvg, imageMarkup); - } - else { - svgString = svgString.concat(imageMarkup, strokeSvg); - } - return svgString; - }, - /* _TO_SVG_END_ */ + /** + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + * @default + */ + cropX: 0, - /** - * Returns source of an image - * @param {Boolean} filtered indicates if the src is needed for svg - * @return {String} Source of an image - */ - getSrc: function(filtered) { - var element = filtered ? this._element : this._originalElement; - if (element) { - if (element.toDataURL) { - return element.toDataURL(); - } + /** + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + * @default + */ + cropY: 0, - if (this.srcFromAttribute) { - return element.getAttribute('src'); - } - else { - return element.src; - } - } - else { - return this.src || ''; - } - }, + /** + * Indicates whether this canvas will use image smoothing when painting this image. + * Also influence if the cacheCanvas for this image uses imageSmoothing + * @since 4.0.0-beta.11 + * @type Boolean + * @default + */ + imageSmoothing: true, - /** - * Sets source of an image - * @param {String} src Source string (URL) - * @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied) - * @param {Object} [options] Options object - * @param {String} [options.crossOrigin] crossOrigin value (one of "", "anonymous", "use-credentials") - * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes - * @return {fabric.Image} thisArg - * @chainable - */ - setSrc: function(src, callback, options) { - fabric.util.loadImage(src, function(img, isError) { - this.setElement(img, options); - this._setWidthHeight(); - callback && callback(this, isError); - }, this, options && options.crossOrigin); - return this; - }, - - /** - * Returns string representation of an instance - * @return {String} String representation of an instance - */ - toString: function() { - return '#'; - }, - - applyResizeFilters: function() { - var filter = this.resizeFilter, - minimumScale = this.minimumScaleTrigger, - objectScale = this.getTotalObjectScaling(), - scaleX = objectScale.scaleX, - scaleY = objectScale.scaleY, - elementToFilter = this._filteredEl || this._originalElement; - if (this.group) { - this.set('dirty', true); - } - if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { - this._element = elementToFilter; - this._filterScalingX = 1; - this._filterScalingY = 1; - this._lastScaleX = scaleX; - this._lastScaleY = scaleY; - return; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - var canvasEl = fabric.util.createCanvasElement(), - cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, - sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._lastScaleX = filter.scaleX = scaleX; - this._lastScaleY = filter.scaleY = scaleY; - fabric.filterBackend.applyFilters( - [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); - this._filterScalingX = canvasEl.width / this._originalElement.width; - this._filterScalingY = canvasEl.height / this._originalElement.height; - }, - - /** - * Applies filters assigned to this image (from "filters" array) or from filter param - * @method applyFilters - * @param {Array} filters to be applied - * @param {Boolean} forResizing specify if the filter operation is a resize operation - * @return {thisArg} return the fabric.Image object - * @chainable - */ - applyFilters: function(filters) { - - filters = filters || this.filters || []; - filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); - this.set('dirty', true); - - // needs to clear out or WEBGL will not resize correctly - this.removeTexture(this.cacheKey + '_filtered'); - - if (filters.length === 0) { - this._element = this._originalElement; - this._filteredEl = null; - this._filterScalingX = 1; - this._filterScalingY = 1; - return this; - } + /** + * Constructor + * Image can be initialized with any canvas drawable or a string. + * The string should be a url and will be loaded as an image. + * Canvas and Image element work out of the box, while videos require extra code to work. + * Please check video element events for seeking. + * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} element Image element + * @param {Object} [options] Options object + * @return {fabric.Image} thisArg + */ + initialize: function(element, options) { + options || (options = { }); + this.filters = []; + this.cacheKey = 'texture' + fabric.Object.__uid++; + this.callSuper('initialize', options); + this._initElement(element, options); + }, - var imgElement = this._originalElement, - sourceWidth = imgElement.naturalWidth || imgElement.width, - sourceHeight = imgElement.naturalHeight || imgElement.height; + /** + * Returns image element which this instance if based on + * @return {HTMLImageElement} Image element + */ + getElement: function() { + return this._element || {}; + }, - if (this._element === this._originalElement) { - // if the element is the same we need to create a new element - var canvasEl = fabric.util.createCanvasElement(); - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._filteredEl = canvasEl; - } - else { - // clear the existing element to get new filter data - // also dereference the eventual resized _element - this._element = this._filteredEl; - this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); - // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y - this._lastScaleX = 1; - this._lastScaleY = 1; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - fabric.filterBackend.applyFilters( - filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); - if (this._originalElement.width !== this._element.width || - this._originalElement.height !== this._element.height) { - this._filterScalingX = this._element.width / this._originalElement.width; - this._filterScalingY = this._element.height / this._originalElement.height; - } - return this; - }, + /** + * Sets image element for this instance to a specified one. + * If filters defined they are applied to new image. + * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area. + * @param {HTMLImageElement} element + * @param {Object} [options] Options object + * @return {fabric.Image} thisArg + * @chainable + */ + setElement: function(element, options) { + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._element = element; + this._originalElement = element; + this._initConfig(options); + if (this.filters.length !== 0) { + this.applyFilters(); + } + // resizeFilters work on the already filtered copy. + // we need to apply resizeFilters AFTER normal filters. + // applyResizeFilters is run more often than normal filters + // and is triggered by user interactions rather than dev code + if (this.resizeFilter) { + this.applyResizeFilters(); + } + return this; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { - this.applyResizeFilters(); - } - this._stroke(ctx); - this._renderPaintInOrder(ctx); - }, + /** + * Delete a single texture if in webgl mode + */ + removeTexture: function(key) { + var backend = fabric.filterBackend; + if (backend && backend.evictCachesForKey) { + backend.evictCachesForKey(key); + } + }, - /** - * Paint the cached copy of the object on the target context. - * it will set the imageSmoothing for the draw operation - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawCacheOnCanvas: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); - }, + /** + * Delete textures, reference to elements and eventually JSDOM cleanup + */ + dispose: function () { + this.callSuper('dispose'); + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._cacheContext = undefined; + ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { + fabric.util.cleanUpJsdomNode(this[element]); + this[element] = undefined; + }).bind(this)); + }, - /** - * Decide if the object should cache or not. Create its own cache level - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group outside is cached. - * This is the special image version where we would like to avoid caching where possible. - * Essentially images do not benefit from caching. They may require caching, and in that - * case we do it. Also caching an image usually ends in a loss of details. - * A full performance audit should be done. - * @return {Boolean} - */ - shouldCache: function() { - return this.needsItsOwnCache(); - }, + /** + * Get the crossOrigin value (of the corresponding image element) + */ + getCrossOrigin: function() { + return this._originalElement && (this._originalElement.crossOrigin || null); + }, - _renderFill: function(ctx) { - var elementToDraw = this._element; - if (!elementToDraw) { - return; - } - var scaleX = this._filterScalingX, scaleY = this._filterScalingY, - w = this.width, h = this.height, min = Math.min, max = Math.max, - // crop values cannot be lesser than 0. - cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), - elWidth = elementToDraw.naturalWidth || elementToDraw.width, - elHeight = elementToDraw.naturalHeight || elementToDraw.height, - sX = cropX * scaleX, - sY = cropY * scaleY, - // the width height cannot exceed element width/height, starting from the crop offset. - sW = min(w * scaleX, elWidth - sX), - sH = min(h * scaleY, elHeight - sY), - x = -w / 2, y = -h / 2, - maxDestW = min(w, elWidth / scaleX - cropX), - maxDestH = min(h, elHeight / scaleY - cropY); - - elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); - }, - - /** - * needed to check if image needs resize - * @private - */ - _needsResize: function() { - var scale = this.getTotalObjectScaling(); - return (scale.scaleX !== this._lastScaleX || scale.scaleY !== this._lastScaleY); - }, + /** + * Returns original size of an image + * @return {Object} Object with "width" and "height" properties + */ + getOriginalSize: function() { + var element = this.getElement(); + return { + width: element.naturalWidth || element.width, + height: element.naturalHeight || element.height + }; + }, - /** - * @private - */ - _resetWidthHeight: function() { - this.set(this.getOriginalSize()); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _stroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } + var w = this.width / 2, h = this.height / 2; + ctx.beginPath(); + ctx.moveTo(-w, -h); + ctx.lineTo(w, -h); + ctx.lineTo(w, h); + ctx.lineTo(-w, h); + ctx.lineTo(-w, -h); + ctx.closePath(); + }, - /** - * The Image class's initialization method. This method is automatically - * called by the constructor. - * @private - * @param {HTMLImageElement|String} element The element representing the image - * @param {Object} [options] Options object - */ - _initElement: function(element, options) { - this.setElement(fabric.util.getById(element), options); - fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); - }, + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var filters = []; - /** - * @private - * @param {Object} [options] Options object - */ - _initConfig: function(options) { - options || (options = { }); - this.setOptions(options); - this._setWidthHeight(options); - }, + this.filters.forEach(function(filterObj) { + if (filterObj) { + filters.push(filterObj.toObject()); + } + }); + var object = extend( + this.callSuper( + 'toObject', + ['cropX', 'cropY'].concat(propertiesToInclude) + ), { + src: this.getSrc(), + crossOrigin: this.getCrossOrigin(), + filters: filters, + }); + if (this.resizeFilter) { + object.resizeFilter = this.resizeFilter.toObject(); + } + return object; + }, - /** - * @private - * @param {Array} filters to be initialized - * @param {Function} callback Callback to invoke when all fabric.Image.filters instances are created - */ - _initFilters: function(filters, callback) { - if (filters && filters.length) { - fabric.util.enlivenObjects(filters, function(enlivenedObjects) { - callback && callback(enlivenedObjects); - }, 'fabric.Image.filters'); - } - else { - callback && callback(); - } - }, + /** + * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height. + * @return {Boolean} + */ + hasCrop: function() { + return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; + }, - /** - * @private - * Set the width and the height of the image object, using the element or the - * options. - * @param {Object} [options] Object with width/height properties - */ - _setWidthHeight: function(options) { - options || (options = { }); - var el = this.getElement(); - this.width = options.width || el.naturalWidth || el.width || 0; - this.height = options.height || el.naturalHeight || el.height || 0; - }, + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var svgString = [], imageMarkup = [], strokeSvg, element = this._element, + x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; + if (!element) { + return []; + } + if (this.hasCrop()) { + var clipPathId = fabric.Object.__uid++; + svgString.push( + '\n', + '\t\n', + '\n' + ); + clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; + } + if (!this.imageSmoothing) { + imageRendering = '" image-rendering="optimizeSpeed'; + } + imageMarkup.push('\t\n'); + + if (this.stroke || this.strokeDashArray) { + var origFill = this.fill; + this.fill = null; + strokeSvg = [ + '\t\n' + ]; + this.fill = origFill; + } + if (this.paintFirst !== 'fill') { + svgString = svgString.concat(strokeSvg, imageMarkup); + } + else { + svgString = svgString.concat(imageMarkup, strokeSvg); + } + return svgString; + }, + /* _TO_SVG_END_ */ - /** - * Calculate offset for center and scale factor for the image in order to respect - * the preserveAspectRatio attribute - * @private - * @return {Object} - */ - parsePreserveAspectRatioAttribute: function() { - var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), - rWidth = this._element.width, rHeight = this._element.height, - scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, - offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; - if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { - if (pAR.meetOrSlice === 'meet') { - scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); - offset = (pWidth - rWidth * scaleX) / 2; - if (pAR.alignX === 'Min') { - offsetLeft = -offset; - } - if (pAR.alignX === 'Max') { - offsetLeft = offset; + /** + * Returns source of an image + * @param {Boolean} filtered indicates if the src is needed for svg + * @return {String} Source of an image + */ + getSrc: function(filtered) { + var element = filtered ? this._element : this._originalElement; + if (element) { + if (element.toDataURL) { + return element.toDataURL(); } - offset = (pHeight - rHeight * scaleY) / 2; - if (pAR.alignY === 'Min') { - offsetTop = -offset; + + if (this.srcFromAttribute) { + return element.getAttribute('src'); } - if (pAR.alignY === 'Max') { - offsetTop = offset; + else { + return element.src; } } - if (pAR.meetOrSlice === 'slice') { - scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); - offset = rWidth - pWidth / scaleX; - if (pAR.alignX === 'Mid') { - cropX = offset / 2; - } - if (pAR.alignX === 'Max') { - cropX = offset; - } - offset = rHeight - pHeight / scaleY; - if (pAR.alignY === 'Mid') { - cropY = offset / 2; - } - if (pAR.alignY === 'Max') { - cropY = offset; - } - rWidth = pWidth / scaleX; - rHeight = pHeight / scaleY; + else { + return this.src || ''; } - } - else { - scaleX = pWidth / rWidth; - scaleY = pHeight / rHeight; - } - return { - width: rWidth, - height: rHeight, - scaleX: scaleX, - scaleY: scaleY, - offsetLeft: offsetLeft, - offsetTop: offsetTop, - cropX: cropX, - cropY: cropY - }; - } - }); - - /** - * Default CSS class name for canvas - * @static - * @type String - * @default - */ - fabric.Image.CSS_CANVAS = 'canvas-img'; - - /** - * Alias for getSrc - * @static - */ - fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; + }, - /** - * Creates an instance of fabric.Image from its object representation - * @static - * @param {Object} object Object to create an instance from - * @param {Function} callback Callback to invoke when an image instance is created - */ - fabric.Image.fromObject = function(_object, callback) { - var object = fabric.util.object.clone(_object); - fabric.util.loadImage(object.src, function(img, isError) { - if (isError) { - callback && callback(null, true); - return; - } - fabric.Image.prototype._initFilters.call(object, object.filters, function(filters) { - object.filters = filters || []; - fabric.Image.prototype._initFilters.call(object, [object.resizeFilter], function(resizeFilters) { - object.resizeFilter = resizeFilters[0]; - fabric.util.enlivenObjectEnlivables(object, object, function () { - var image = new fabric.Image(img, object); - callback(image, false); - }); + /** + * Sets source of an image + * @param {String} src Source string (URL) + * @param {Object} [options] Options object + * @param {String} [options.crossOrigin] crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @return {Promise} thisArg + */ + setSrc: function(src, options) { + var _this = this; + return fabric.util.loadImage(src, options).then(function(img) { + _this.setElement(img, options); + _this._setWidthHeight(); + return _this; }); - }); - }, null, object.crossOrigin); - }; + }, - /** - * Creates an instance of fabric.Image from an URL string - * @static - * @param {String} url URL to create an image from - * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument). Second argument is a boolean indicating if an error occurred or not. - * @param {Object} [imgOptions] Options object - */ - fabric.Image.fromURL = function(url, callback, imgOptions) { - fabric.util.loadImage(url, function(img, isError) { - callback && callback(new fabric.Image(img, imgOptions), isError); - }, null, imgOptions && imgOptions.crossOrigin); - }; + /** + * Returns string representation of an instance + * @return {String} String representation of an instance + */ + toString: function() { + return '#'; + }, - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement}) - * @static - * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement} - */ - fabric.Image.ATTRIBUTE_NAMES = - fabric.SHARED_ATTRIBUTES.concat( - 'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ') - ); + applyResizeFilters: function() { + var filter = this.resizeFilter, + minimumScale = this.minimumScaleTrigger, + objectScale = this.getTotalObjectScaling(), + scaleX = objectScale.x, + scaleY = objectScale.y, + elementToFilter = this._filteredEl || this._originalElement; + if (this.group) { + this.set('dirty', true); + } + if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { + this._element = elementToFilter; + this._filterScalingX = 1; + this._filterScalingY = 1; + this._lastScaleX = scaleX; + this._lastScaleY = scaleY; + return; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + var canvasEl = fabric.util.createCanvasElement(), + cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, + sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._lastScaleX = filter.scaleX = scaleX; + this._lastScaleY = filter.scaleY = scaleY; + fabric.filterBackend.applyFilters( + [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); + this._filterScalingX = canvasEl.width / this._originalElement.width; + this._filterScalingY = canvasEl.height / this._originalElement.height; + }, - /** - * Returns {@link fabric.Image} instance from an SVG element - * @static - * @param {SVGElement} element Element to parse - * @param {Object} [options] Options object - * @param {Function} callback Callback to execute when fabric.Image object is created - * @return {fabric.Image} Instance of fabric.Image - */ - fabric.Image.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); - fabric.Image.fromURL(parsedAttributes['xlink:href'], callback, - extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes)); - }; - /* _FROM_SVG_END_ */ + /** + * Applies filters assigned to this image (from "filters" array) or from filter param + * @method applyFilters + * @param {Array} filters to be applied + * @param {Boolean} forResizing specify if the filter operation is a resize operation + * @return {thisArg} return the fabric.Image object + * @chainable + */ + applyFilters: function(filters) { -})(typeof exports !== 'undefined' ? exports : this); + filters = filters || this.filters || []; + filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); + this.set('dirty', true); + // needs to clear out or WEBGL will not resize correctly + this.removeTexture(this.cacheKey + '_filtered'); -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + if (filters.length === 0) { + this._element = this._originalElement; + this._filteredEl = null; + this._filterScalingX = 1; + this._filterScalingY = 1; + return this; + } - /** - * @private - * @return {Number} angle value - */ - _getAngleValueForStraighten: function() { - var angle = this.angle % 360; - if (angle > 0) { - return Math.round((angle - 1) / 90) * 90; - } - return Math.round(angle / 90) * 90; - }, + var imgElement = this._originalElement, + sourceWidth = imgElement.naturalWidth || imgElement.width, + sourceHeight = imgElement.naturalHeight || imgElement.height; - /** - * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) - * @return {fabric.Object} thisArg - * @chainable - */ - straighten: function() { - return this.rotate(this._getAngleValueForStraighten()); - }, + if (this._element === this._originalElement) { + // if the element is the same we need to create a new element + var canvasEl = fabric.util.createCanvasElement(); + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._filteredEl = canvasEl; + } + else { + // clear the existing element to get new filter data + // also dereference the eventual resized _element + this._element = this._filteredEl; + this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); + // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y + this._lastScaleX = 1; + this._lastScaleY = 1; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + fabric.filterBackend.applyFilters( + filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); + if (this._originalElement.width !== this._element.width || + this._originalElement.height !== this._element.height) { + this._filterScalingX = this._element.width / this._originalElement.width; + this._filterScalingY = this._element.height / this._originalElement.height; + } + return this; + }, - /** - * Same as {@link fabric.Object.prototype.straighten} but with animation - * @param {Object} callbacks Object with callback functions - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.Object} thisArg - */ - fxStraighten: function(callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: this.get('angle'), - endValue: this._getAngleValueForStraighten(), - duration: this.FX_DURATION, - onChange: function(value) { - _this.rotate(value); - onChange(); - }, - onComplete: function() { - _this.setCoords(); - onComplete(); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { + this.applyResizeFilters(); + } + this._stroke(ctx); + this._renderPaintInOrder(ctx); }, - }); - } -}); -fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + /** + * Paint the cached copy of the object on the target context. + * it will set the imageSmoothing for the draw operation + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawCacheOnCanvas: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); + }, - /** - * Straightens object, then rerenders canvas - * @param {fabric.Object} object Object to straighten - * @return {fabric.Canvas} thisArg - * @chainable - */ - straightenObject: function (object) { - object.straighten(); - this.requestRenderAll(); - return this; - }, + /** + * Decide if the object should cache or not. Create its own cache level + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * This is the special image version where we would like to avoid caching where possible. + * Essentially images do not benefit from caching. They may require caching, and in that + * case we do it. Also caching an image usually ends in a loss of details. + * A full performance audit should be done. + * @return {Boolean} + */ + shouldCache: function() { + return this.needsItsOwnCache(); + }, - /** - * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated - * @param {fabric.Object} object Object to straighten - * @return {fabric.Canvas} thisArg - */ - fxStraightenObject: function (object) { - return object.fxStraighten({ - onChange: this.requestRenderAllBound - }); - } -}); + _renderFill: function(ctx) { + var elementToDraw = this._element; + if (!elementToDraw) { + return; + } + var scaleX = this._filterScalingX, scaleY = this._filterScalingY, + w = this.width, h = this.height, min = Math.min, max = Math.max, + // crop values cannot be lesser than 0. + cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), + elWidth = elementToDraw.naturalWidth || elementToDraw.width, + elHeight = elementToDraw.naturalHeight || elementToDraw.height, + sX = cropX * scaleX, + sY = cropY * scaleY, + // the width height cannot exceed element width/height, starting from the crop offset. + sW = min(w * scaleX, elWidth - sX), + sH = min(h * scaleY, elHeight - sY), + x = -w / 2, y = -h / 2, + maxDestW = min(w, elWidth / scaleX - cropX), + maxDestH = min(h, elHeight / scaleY - cropY); + + elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); + }, + /** + * needed to check if image needs resize + * @private + */ + _needsResize: function() { + var scale = this.getTotalObjectScaling(); + return (scale.x !== this._lastScaleX || scale.y !== this._lastScaleY); + }, -(function() { + /** + * @private + */ + _resetWidthHeight: function() { + this.set(this.getOriginalSize()); + }, - 'use strict'; + /** + * The Image class's initialization method. This method is automatically + * called by the constructor. + * @private + * @param {HTMLImageElement|String} element The element representing the image + * @param {Object} [options] Options object + */ + _initElement: function(element, options) { + this.setElement(fabric.util.getById(element), options); + fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); + }, - /** - * Tests if webgl supports certain precision - * @param {WebGL} Canvas WebGL context to test on - * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp' - * @returns {Boolean} Whether the user's browser WebGL supports given precision. - */ - function testPrecision(gl, precision){ - var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; - var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(fragmentShader, fragmentSource); - gl.compileShader(fragmentShader); - if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { - return false; - } - return true; - } + /** + * @private + * @param {Object} [options] Options object + */ + _initConfig: function(options) { + options || (options = { }); + this.setOptions(options); + this._setWidthHeight(options); + }, - /** - * Indicate whether this filtering backend is supported by the user's browser. - * @param {Number} tileSize check if the tileSize is supported - * @returns {Boolean} Whether the user's browser supports WebGL. - */ - fabric.isWebglSupported = function(tileSize) { - if (fabric.isLikelyNode) { - return false; - } - tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; - var canvas = document.createElement('canvas'); - var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); - var isSupported = false; - // eslint-disable-next-line - if (gl) { - fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); - isSupported = fabric.maxTextureSize >= tileSize; - var precisions = ['highp', 'mediump', 'lowp']; - for (var i = 0; i < 3; i++){ - if (testPrecision(gl, precisions[i])){ - fabric.webGlPrecision = precisions[i]; - break; + /** + * @private + * Set the width and the height of the image object, using the element or the + * options. + * @param {Object} [options] Object with width/height properties + */ + _setWidthHeight: function(options) { + options || (options = { }); + var el = this.getElement(); + this.width = options.width || el.naturalWidth || el.width || 0; + this.height = options.height || el.naturalHeight || el.height || 0; + }, + + /** + * Calculate offset for center and scale factor for the image in order to respect + * the preserveAspectRatio attribute + * @private + * @return {Object} + */ + parsePreserveAspectRatioAttribute: function() { + var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), + rWidth = this._element.width, rHeight = this._element.height, + scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, + offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; + if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { + if (pAR.meetOrSlice === 'meet') { + scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); + offset = (pWidth - rWidth * scaleX) / 2; + if (pAR.alignX === 'Min') { + offsetLeft = -offset; + } + if (pAR.alignX === 'Max') { + offsetLeft = offset; + } + offset = (pHeight - rHeight * scaleY) / 2; + if (pAR.alignY === 'Min') { + offsetTop = -offset; + } + if (pAR.alignY === 'Max') { + offsetTop = offset; + } + } + if (pAR.meetOrSlice === 'slice') { + scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); + offset = rWidth - pWidth / scaleX; + if (pAR.alignX === 'Mid') { + cropX = offset / 2; + } + if (pAR.alignX === 'Max') { + cropX = offset; + } + offset = rHeight - pHeight / scaleY; + if (pAR.alignY === 'Mid') { + cropY = offset / 2; + } + if (pAR.alignY === 'Max') { + cropY = offset; + } + rWidth = pWidth / scaleX; + rHeight = pHeight / scaleY; + } + } + else { + scaleX = pWidth / rWidth; + scaleY = pHeight / rHeight; + } + return { + width: rWidth, + height: rHeight, + scaleX: scaleX, + scaleY: scaleY, + offsetLeft: offsetLeft, + offsetTop: offsetTop, + cropX: cropX, + cropY: cropY }; } - } - this.isSupported = isSupported; - return isSupported; - }; - - fabric.WebglFilterBackend = WebglFilterBackend; - - /** - * WebGL filter backend. - */ - function WebglFilterBackend(options) { - if (options && options.tileSize) { - this.tileSize = options.tileSize; - } - this.setupGLContext(this.tileSize, this.tileSize); - this.captureGPUInfo(); - }; - - WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { + }); - tileSize: 2048, + /** + * Default CSS class name for canvas + * @static + * @type String + * @default + */ + fabric.Image.CSS_CANVAS = 'canvas-img'; /** - * Experimental. This object is a sort of repository of help layers used to avoid - * of recreating them during frequent filtering. If you are previewing a filter with - * a slider you probably do not want to create help layers every filter step. - * in this object there will be appended some canvases, created once, resized sometimes - * cleared never. Clearing is left to the developer. - **/ - resources: { + * Alias for getSrc + * @static + */ + fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; - }, + /** + * Creates an instance of fabric.Image from its object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ + fabric.Image.fromObject = function(_object) { + var object = Object.assign({}, _object), + filters = object.filters, + resizeFilter = object.resizeFilter; + // the generic enliving will fail on filters for now + delete object.resizeFilter; + delete object.filters; + return Promise.all([ + fabric.util.loadImage(object.src, { crossOrigin: _object.crossOrigin }), + filters && fabric.util.enlivenObjects(filters, 'fabric.Image.filters'), + resizeFilter && fabric.util.enlivenObjects([resizeFilter], 'fabric.Image.filters'), + fabric.util.enlivenObjectEnlivables(object), + ]) + .then(function(imgAndFilters) { + object.filters = imgAndFilters[1] || []; + object.resizeFilter = imgAndFilters[2] && imgAndFilters[2][0]; + return new fabric.Image(imgAndFilters[0], Object.assign(object, imgAndFilters[3])); + }); + }; /** - * Setup a WebGL context suitable for filtering, and bind any needed event handlers. + * Creates an instance of fabric.Image from an URL string + * @static + * @param {String} url URL to create an image from + * @param {Object} [imgOptions] Options object + * @returns {Promise} */ - setupGLContext: function(width, height) { - this.dispose(); - this.createWebGLCanvas(width, height); - // eslint-disable-next-line - this.aPosition = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]); - this.chooseFastestCopyGLTo2DMethod(width, height); - }, + fabric.Image.fromURL = function(url, imgOptions) { + return fabric.util.loadImage(url, imgOptions || {}).then(function(img) { + return new fabric.Image(img, imgOptions); + }); + }; + /* _FROM_SVG_START_ */ /** - * Pick a method to copy data from GL context to 2d canvas. In some browsers using - * putImageData is faster than drawImage for that specific operation. + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement}) + * @static + * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement} */ - chooseFastestCopyGLTo2DMethod: function(width, height) { - var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; - try { - new ImageData(1, 1); - canUseImageData = true; - } - catch (e) { - canUseImageData = false; - } - // eslint-disable-next-line no-undef - var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; - // eslint-disable-next-line no-undef - var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; + fabric.Image.ATTRIBUTE_NAMES = + fabric.SHARED_ATTRIBUTES.concat( + 'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ') + ); - if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { - return; - } + /** + * Returns {@link fabric.Image} instance from an SVG element + * @static + * @param {SVGElement} element Element to parse + * @param {Object} [options] Options object + * @param {Function} callback Callback to execute when fabric.Image object is created + * @return {fabric.Image} Instance of fabric.Image + */ + fabric.Image.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); + fabric.Image.fromURL(parsedAttributes['xlink:href'], Object.assign({ }, options || { }, parsedAttributes)) + .then(function(fabricImage) { + callback(fabricImage); + }); + }; + /* _FROM_SVG_END_ */ - var targetCanvas = fabric.util.createCanvasElement(); - // eslint-disable-next-line no-undef - var imageBuffer = new ArrayBuffer(width * height * 4); - if (fabric.forceGLPutImageData) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - return; - } - var testContext = { - imageBuffer: imageBuffer, - destinationWidth: width, - destinationHeight: height, - targetCanvas: targetCanvas - }; - var startTime, drawImageTime, putImageDataTime; - targetCanvas.width = width; - targetCanvas.height = height; + })(typeof exports !== 'undefined' ? exports : window); - startTime = window.performance.now(); - copyGLTo2DDrawImage.call(testContext, this.gl, testContext); - drawImageTime = window.performance.now() - startTime; + (function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - startTime = window.performance.now(); - copyGLTo2DPutImageData.call(testContext, this.gl, testContext); - putImageDataTime = window.performance.now() - startTime; + /** + * @private + * @return {Number} angle value + */ + _getAngleValueForStraighten: function() { + var angle = this.angle % 360; + if (angle > 0) { + return Math.round((angle - 1) / 90) * 90; + } + return Math.round(angle / 90) * 90; + }, - if (drawImageTime > putImageDataTime) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - } - else { - this.copyGLTo2D = copyGLTo2DDrawImage; - } - }, + /** + * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) + * @return {fabric.Object} thisArg + * @chainable + */ + straighten: function() { + return this.rotate(this._getAngleValueForStraighten()); + }, - /** - * Create a canvas element and associated WebGL context and attaches them as - * class properties to the GLFilterBackend class. - */ - createWebGLCanvas: function(width, height) { - var canvas = fabric.util.createCanvasElement(); - canvas.width = width; - canvas.height = height; - var glOptions = { - alpha: true, - premultipliedAlpha: false, - depth: false, - stencil: false, - antialias: false + /** + * Same as {@link fabric.Object.prototype.straighten} but with animation + * @param {Object} callbacks Object with callback functions + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Object} thisArg + */ + fxStraighten: function(callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: this.get('angle'), + endValue: this._getAngleValueForStraighten(), + duration: this.FX_DURATION, + onChange: function(value) { + _this.rotate(value); + onChange(); }, - gl = canvas.getContext('webgl', glOptions); - if (!gl) { - gl = canvas.getContext('experimental-webgl', glOptions); - } - if (!gl) { - return; + onComplete: function() { + _this.setCoords(); + onComplete(); + }, + }); } - gl.clearColor(0, 0, 0, 0); - // this canvas can fire webglcontextlost and webglcontextrestored - this.canvas = canvas; - this.gl = gl; - }, - - /** - * Attempts to apply the requested filters to the source provided, drawing the filtered output - * to the provided target canvas. - * - * @param {Array} filters The filters to apply. - * @param {HTMLImageElement|HTMLCanvasElement} source The source to be filtered. - * @param {Number} width The width of the source input. - * @param {Number} height The height of the source input. - * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. - * @param {String|undefined} cacheKey A key used to cache resources related to the source. If - * omitted, caching will be skipped. - */ - applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { - var gl = this.gl; - var cachedTexture; - if (cacheKey) { - cachedTexture = this.getCachedTexture(cacheKey, source); - } - var pipelineState = { - originalWidth: source.width || source.originalWidth, - originalHeight: source.height || source.originalHeight, - sourceWidth: width, - sourceHeight: height, - destinationWidth: width, - destinationHeight: height, - context: gl, - sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), - targetTexture: this.createTexture(gl, width, height), - originalTexture: cachedTexture || - this.createTexture(gl, width, height, !cachedTexture && source), - passes: filters.length, - webgl: true, - aPosition: this.aPosition, - programCache: this.programCache, - pass: 0, - filterBackend: this, - targetCanvas: targetCanvas - }; - var tempFbo = gl.createFramebuffer(); - gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); - filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); - resizeCanvasIfNeeded(pipelineState); - this.copyGLTo2D(gl, pipelineState); - gl.bindTexture(gl.TEXTURE_2D, null); - gl.deleteTexture(pipelineState.sourceTexture); - gl.deleteTexture(pipelineState.targetTexture); - gl.deleteFramebuffer(tempFbo); - targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); - return pipelineState; - }, + }); - /** - * Detach event listeners, remove references, and clean up caches. - */ - dispose: function() { - if (this.canvas) { - this.canvas = null; - this.gl = null; - } - this.clearWebGLCaches(); - }, + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Wipe out WebGL-related caches. - */ - clearWebGLCaches: function() { - this.programCache = {}; - this.textureCache = {}; - }, + /** + * Straightens object, then rerenders canvas + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + straightenObject: function (object) { + object.straighten(); + this.requestRenderAll(); + return this; + }, - /** - * Create a WebGL texture object. - * - * Accepts specific dimensions to initialize the texture to or a source image. - * - * @param {WebGLRenderingContext} gl The GL context to use for creating the texture. - * @param {Number} width The width to initialize the texture at. - * @param {Number} height The height to initialize the texture. - * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data. - * @returns {WebGLTexture} - */ - createTexture: function(gl, width, height, textureImageSource) { - var texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - if (textureImageSource) { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); + /** + * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + */ + fxStraightenObject: function (object) { + return object.fxStraighten({ + onChange: this.requestRenderAllBound + }); } - else { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + }); + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + var fabric = global.fabric; + /** + * Tests if webgl supports certain precision + * @param {WebGL} Canvas WebGL context to test on + * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp' + * @returns {Boolean} Whether the user's browser WebGL supports given precision. + */ + function testPrecision(gl, precision){ + var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + return false; } - return texture; - }, + return true; + } /** - * Can be optionally used to get a texture from the cache array - * - * If an existing texture is not found, a new texture is created and cached. - * - * @param {String} uniqueId A cache key to use to find an existing texture. - * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the - * texture cache entry if one does not already exist. + * Indicate whether this filtering backend is supported by the user's browser. + * @param {Number} tileSize check if the tileSize is supported + * @returns {Boolean} Whether the user's browser supports WebGL. */ - getCachedTexture: function(uniqueId, textureImageSource) { - if (this.textureCache[uniqueId]) { - return this.textureCache[uniqueId]; - } - else { - var texture = this.createTexture( - this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); - this.textureCache[uniqueId] = texture; - return texture; + fabric.isWebglSupported = function(tileSize) { + if (fabric.isLikelyNode) { + return false; } - }, - - /** - * Clear out cached resources related to a source image that has been - * filtered previously. - * - * @param {String} cacheKey The cache key provided when the source image was filtered. - */ - evictCachesForKey: function(cacheKey) { - if (this.textureCache[cacheKey]) { - this.gl.deleteTexture(this.textureCache[cacheKey]); - delete this.textureCache[cacheKey]; + tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; + var canvas = document.createElement('canvas'); + var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); + var isSupported = false; + // eslint-disable-next-line + if (gl) { + fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); + isSupported = fabric.maxTextureSize >= tileSize; + var precisions = ['highp', 'mediump', 'lowp']; + for (var i = 0; i < 3; i++){ + if (testPrecision(gl, precisions[i])){ + fabric.webGlPrecision = precisions[i]; + break; + } } } - }, + this.isSupported = isSupported; + return isSupported; + }; - copyGLTo2D: copyGLTo2DDrawImage, + fabric.WebglFilterBackend = WebglFilterBackend; /** - * Attempt to extract GPU information strings from a WebGL context. - * - * Useful information when debugging or blacklisting specific GPUs. - * - * @returns {Object} A GPU info object with renderer and vendor strings. + * WebGL filter backend. */ - captureGPUInfo: function() { - if (this.gpuInfo) { - return this.gpuInfo; - } - var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; - if (!gl) { - return gpuInfo; - } - var ext = gl.getExtension('WEBGL_debug_renderer_info'); - if (ext) { - var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); - var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); - if (renderer) { - gpuInfo.renderer = renderer.toLowerCase(); - } - if (vendor) { - gpuInfo.vendor = vendor.toLowerCase(); - } - } - this.gpuInfo = gpuInfo; - return gpuInfo; - }, - }; -})(); - -function resizeCanvasIfNeeded(pipelineState) { - var targetCanvas = pipelineState.targetCanvas, - width = targetCanvas.width, height = targetCanvas.height, - dWidth = pipelineState.destinationWidth, - dHeight = pipelineState.destinationHeight; - - if (width !== dWidth || height !== dHeight) { - targetCanvas.width = dWidth; - targetCanvas.height = dHeight; - } -} - -/** - * Copy an input WebGL canvas on to an output 2D canvas. - * - * The WebGL canvas is assumed to be upside down, with the top-left pixel of the - * desired output image appearing in the bottom-left corner of the WebGL canvas. - * - * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. - * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. - * @param {Object} pipelineState The 2D target canvas to copy on to. - */ -function copyGLTo2DDrawImage(gl, pipelineState) { - var glCanvas = gl.canvas, targetCanvas = pipelineState.targetCanvas, - ctx = targetCanvas.getContext('2d'); - ctx.translate(0, targetCanvas.height); // move it down again - ctx.scale(1, -1); // vertical flip - // where is my image on the big glcanvas? - var sourceY = glCanvas.height - targetCanvas.height; - ctx.drawImage(glCanvas, 0, sourceY, targetCanvas.width, targetCanvas.height, 0, 0, - targetCanvas.width, targetCanvas.height); -} - -/** - * Copy an input WebGL canvas on to an output 2D canvas using 2d canvas' putImageData - * API. Measurably faster than using ctx.drawImage in Firefox (version 54 on OSX Sierra). - * - * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. - * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. - * @param {Object} pipelineState The 2D target canvas to copy on to. - */ -function copyGLTo2DPutImageData(gl, pipelineState) { - var targetCanvas = pipelineState.targetCanvas, ctx = targetCanvas.getContext('2d'), - dWidth = pipelineState.destinationWidth, - dHeight = pipelineState.destinationHeight, - numBytes = dWidth * dHeight * 4; - - // eslint-disable-next-line no-undef - var u8 = new Uint8Array(this.imageBuffer, 0, numBytes); - // eslint-disable-next-line no-undef - var u8Clamped = new Uint8ClampedArray(this.imageBuffer, 0, numBytes); - - gl.readPixels(0, 0, dWidth, dHeight, gl.RGBA, gl.UNSIGNED_BYTE, u8); - var imgData = new ImageData(u8Clamped, dWidth, dHeight); - ctx.putImageData(imgData, 0, 0); -} - - -(function() { - - 'use strict'; - - var noop = function() {}; - - fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; - - /** - * Canvas 2D filter backend. - */ - function Canvas2dFilterBackend() {}; - - Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { - evictCachesForKey: noop, - dispose: noop, - clearWebGLCaches: noop, - - /** - * Experimental. This object is a sort of repository of help layers used to avoid - * of recreating them during frequent filtering. If you are previewing a filter with - * a slider you probably do not want to create help layers every filter step. - * in this object there will be appended some canvases, created once, resized sometimes - * cleared never. Clearing is left to the developer. - **/ - resources: { - - }, - - /** - * Apply a set of filters against a source image and draw the filtered output - * to the provided destination canvas. - * - * @param {EnhancedFilter} filters The filter to apply. - * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. - * @param {Number} sourceWidth The width of the source input. - * @param {Number} sourceHeight The height of the source input. - * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. - */ - applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { - var ctx = targetCanvas.getContext('2d'); - ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); - var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var pipelineState = { - sourceWidth: sourceWidth, - sourceHeight: sourceHeight, - imageData: imageData, - originalEl: sourceElement, - originalImageData: originalImageData, - canvasEl: targetCanvas, - ctx: ctx, - filterBackend: this, - }; - filters.forEach(function(filter) { filter.applyTo(pipelineState); }); - if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { - targetCanvas.width = pipelineState.imageData.width; - targetCanvas.height = pipelineState.imageData.height; + function WebglFilterBackend(options) { + if (options && options.tileSize) { + this.tileSize = options.tileSize; } - ctx.putImageData(pipelineState.imageData, 0, 0); - return pipelineState; - }, + this.setupGLContext(this.tileSize, this.tileSize); + this.captureGPUInfo(); + } + WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { - }; -})(); + tileSize: 2048, + /** + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { -/** - * @namespace fabric.Image.filters - * @memberOf fabric.Image - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters} - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - */ -fabric.Image = fabric.Image || { }; -fabric.Image.filters = fabric.Image.filters || { }; + }, -/** - * Root filter class from which all filter classes inherit from - * @class fabric.Image.filters.BaseFilter - * @memberOf fabric.Image.filters - */ -fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ { + /** + * Setup a WebGL context suitable for filtering, and bind any needed event handlers. + */ + setupGLContext: function(width, height) { + this.dispose(); + this.createWebGLCanvas(width, height); + // eslint-disable-next-line + this.aPosition = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]); + this.chooseFastestCopyGLTo2DMethod(width, height); + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'BaseFilter', + /** + * Pick a method to copy data from GL context to 2d canvas. In some browsers using + * putImageData is faster than drawImage for that specific operation. + */ + chooseFastestCopyGLTo2DMethod: function(width, height) { + var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; + try { + new ImageData(1, 1); + canUseImageData = true; + } + catch (e) { + canUseImageData = false; + } + // eslint-disable-next-line no-undef + var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; + // eslint-disable-next-line no-undef + var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; - /** - * Array of attributes to send with buffers. do not modify - * @private - */ + if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { + return; + } - vertexSource: 'attribute vec2 aPosition;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vTexCoord = aPosition;\n' + - 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + - '}', + var targetCanvas = fabric.util.createCanvasElement(); + // eslint-disable-next-line no-undef + var imageBuffer = new ArrayBuffer(width * height * 4); + if (fabric.forceGLPutImageData) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + return; + } + var testContext = { + imageBuffer: imageBuffer, + destinationWidth: width, + destinationHeight: height, + targetCanvas: targetCanvas + }; + var startTime, drawImageTime, putImageDataTime; + targetCanvas.width = width; + targetCanvas.height = height; - fragmentSource: 'precision highp float;\n' + - 'varying vec2 vTexCoord;\n' + - 'uniform sampler2D uTexture;\n' + - 'void main() {\n' + - 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + - '}', + startTime = window.performance.now(); + copyGLTo2DDrawImage.call(testContext, this.gl, testContext); + drawImageTime = window.performance.now() - startTime; - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - if (options) { - this.setOptions(options); - } - }, + startTime = window.performance.now(); + copyGLTo2DPutImageData.call(testContext, this.gl, testContext); + putImageDataTime = window.performance.now() - startTime; - /** - * Sets filter's properties from options - * @param {Object} [options] Options object - */ - setOptions: function(options) { - for (var prop in options) { - this[prop] = options[prop]; - } - }, + if (drawImageTime > putImageDataTime) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + } + else { + this.copyGLTo2D = copyGLTo2DDrawImage; + } + }, - /** - * Compile this filter's shader program. - * - * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation. - * @param {String} fragmentSource fragmentShader source for compilation - * @param {String} vertexSource vertexShader source for compilation - */ - createProgram: function(gl, fragmentSource, vertexSource) { - fragmentSource = fragmentSource || this.fragmentSource; - vertexSource = vertexSource || this.vertexSource; - if (fabric.webGlPrecision !== 'highp'){ - fragmentSource = fragmentSource.replace( - /precision highp float/g, - 'precision ' + fabric.webGlPrecision + ' float' - ); - } - var vertexShader = gl.createShader(gl.VERTEX_SHADER); - gl.shaderSource(vertexShader, vertexSource); - gl.compileShader(vertexShader); - if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Vertex shader compile error for ' + this.type + ': ' + - gl.getShaderInfoLog(vertexShader) - ); - } + /** + * Create a canvas element and associated WebGL context and attaches them as + * class properties to the GLFilterBackend class. + */ + createWebGLCanvas: function(width, height) { + var canvas = fabric.util.createCanvasElement(); + canvas.width = width; + canvas.height = height; + var glOptions = { + alpha: true, + premultipliedAlpha: false, + depth: false, + stencil: false, + antialias: false + }, + gl = canvas.getContext('webgl', glOptions); + if (!gl) { + gl = canvas.getContext('experimental-webgl', glOptions); + } + if (!gl) { + return; + } + gl.clearColor(0, 0, 0, 0); + // this canvas can fire webglcontextlost and webglcontextrestored + this.canvas = canvas; + this.gl = gl; + }, - var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(fragmentShader, fragmentSource); - gl.compileShader(fragmentShader); - if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Fragment shader compile error for ' + this.type + ': ' + - gl.getShaderInfoLog(fragmentShader) - ); - } + /** + * Attempts to apply the requested filters to the source provided, drawing the filtered output + * to the provided target canvas. + * + * @param {Array} filters The filters to apply. + * @param {HTMLImageElement|HTMLCanvasElement} source The source to be filtered. + * @param {Number} width The width of the source input. + * @param {Number} height The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + * @param {String|undefined} cacheKey A key used to cache resources related to the source. If + * omitted, caching will be skipped. + */ + applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { + var gl = this.gl; + var cachedTexture; + if (cacheKey) { + cachedTexture = this.getCachedTexture(cacheKey, source); + } + var pipelineState = { + originalWidth: source.width || source.originalWidth, + originalHeight: source.height || source.originalHeight, + sourceWidth: width, + sourceHeight: height, + destinationWidth: width, + destinationHeight: height, + context: gl, + sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), + targetTexture: this.createTexture(gl, width, height), + originalTexture: cachedTexture || + this.createTexture(gl, width, height, !cachedTexture && source), + passes: filters.length, + webgl: true, + aPosition: this.aPosition, + programCache: this.programCache, + pass: 0, + filterBackend: this, + targetCanvas: targetCanvas + }; + var tempFbo = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); + filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); + resizeCanvasIfNeeded(pipelineState); + this.copyGLTo2D(gl, pipelineState); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.deleteTexture(pipelineState.sourceTexture); + gl.deleteTexture(pipelineState.targetTexture); + gl.deleteFramebuffer(tempFbo); + targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); + return pipelineState; + }, - var program = gl.createProgram(); - gl.attachShader(program, vertexShader); - gl.attachShader(program, fragmentShader); - gl.linkProgram(program); - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Shader link error for "${this.type}" ' + - gl.getProgramInfoLog(program) - ); - } + /** + * Detach event listeners, remove references, and clean up caches. + */ + dispose: function() { + if (this.canvas) { + this.canvas = null; + this.gl = null; + } + this.clearWebGLCaches(); + }, - var attributeLocations = this.getAttributeLocations(gl, program); - var uniformLocations = this.getUniformLocations(gl, program) || { }; - uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW'); - uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH'); - return { - program: program, - attributeLocations: attributeLocations, - uniformLocations: uniformLocations - }; - }, + /** + * Wipe out WebGL-related caches. + */ + clearWebGLCaches: function() { + this.programCache = {}; + this.textureCache = {}; + }, - /** - * Return a map of attribute names to WebGLAttributeLocation objects. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {WebGLShaderProgram} program The shader program from which to take attribute locations. - * @returns {Object} A map of attribute names to attribute locations. - */ - getAttributeLocations: function(gl, program) { - return { - aPosition: gl.getAttribLocation(program, 'aPosition'), - }; - }, + /** + * Create a WebGL texture object. + * + * Accepts specific dimensions to initialize the texture to or a source image. + * + * @param {WebGLRenderingContext} gl The GL context to use for creating the texture. + * @param {Number} width The width to initialize the texture at. + * @param {Number} height The height to initialize the texture. + * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data. + * @returns {WebGLTexture} + */ + createTexture: function(gl, width, height, textureImageSource) { + var texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + if (textureImageSource) { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); + } + else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + } + return texture; + }, - /** - * Return a map of uniform names to WebGLUniformLocation objects. - * - * Intended to be overridden by subclasses. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {WebGLShaderProgram} program The shader program from which to take uniform locations. - * @returns {Object} A map of uniform names to uniform locations. - */ - getUniformLocations: function (/* gl, program */) { - // in case i do not need any special uniform i need to return an empty object - return { }; - }, + /** + * Can be optionally used to get a texture from the cache array + * + * If an existing texture is not found, a new texture is created and cached. + * + * @param {String} uniqueId A cache key to use to find an existing texture. + * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the + * texture cache entry if one does not already exist. + */ + getCachedTexture: function(uniqueId, textureImageSource) { + if (this.textureCache[uniqueId]) { + return this.textureCache[uniqueId]; + } + else { + var texture = this.createTexture( + this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); + this.textureCache[uniqueId] = texture; + return texture; + } + }, - /** - * Send attribute data from this filter to its shader program on the GPU. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {Object} attributeLocations A map of shader attribute names to their locations. - */ - sendAttributeData: function(gl, attributeLocations, aPositionData) { - var attributeLocation = attributeLocations.aPosition; - var buffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, buffer); - gl.enableVertexAttribArray(attributeLocation); - gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); - gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW); - }, - - _setupFrameBuffer: function(options) { - var gl = options.context, width, height; - if (options.passes > 1) { - width = options.destinationWidth; - height = options.destinationHeight; - if (options.sourceWidth !== width || options.sourceHeight !== height) { - gl.deleteTexture(options.targetTexture); - options.targetTexture = options.filterBackend.createTexture(gl, width, height); - } - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, - options.targetTexture, 0); - } - else { - // draw last filter on canvas and not to framebuffer. - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.finish(); - } - }, + /** + * Clear out cached resources related to a source image that has been + * filtered previously. + * + * @param {String} cacheKey The cache key provided when the source image was filtered. + */ + evictCachesForKey: function(cacheKey) { + if (this.textureCache[cacheKey]) { + this.gl.deleteTexture(this.textureCache[cacheKey]); + delete this.textureCache[cacheKey]; + } + }, - _swapTextures: function(options) { - options.passes--; - options.pass++; - var temp = options.targetTexture; - options.targetTexture = options.sourceTexture; - options.sourceTexture = temp; - }, + copyGLTo2D: copyGLTo2DDrawImage, - /** - * Generic isNeutral implementation for one parameter based filters. - * Used only in image applyFilters to discard filters that will not have an effect - * on the image - * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter ) - * @param {Object} options - **/ - isNeutralState: function(/* options */) { - var main = this.mainParameter, - _class = fabric.Image.filters[this.type].prototype; - if (main) { - if (Array.isArray(_class[main])) { - for (var i = _class[main].length; i--;) { - if (this[main][i] !== _class[main][i]) { - return false; + /** + * Attempt to extract GPU information strings from a WebGL context. + * + * Useful information when debugging or blacklisting specific GPUs. + * + * @returns {Object} A GPU info object with renderer and vendor strings. + */ + captureGPUInfo: function() { + if (this.gpuInfo) { + return this.gpuInfo; + } + var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; + if (!gl) { + return gpuInfo; + } + var ext = gl.getExtension('WEBGL_debug_renderer_info'); + if (ext) { + var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); + var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); + if (renderer) { + gpuInfo.renderer = renderer.toLowerCase(); + } + if (vendor) { + gpuInfo.vendor = vendor.toLowerCase(); } } - return true; - } - else { - return _class[main] === this[main]; - } - } - else { - return false; - } - }, - - /** - * Apply this filter to the input image data provided. - * - * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyTo: function(options) { - if (options.webgl) { - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - } - else { - this.applyTo2d(options); - } - }, + this.gpuInfo = gpuInfo; + return gpuInfo; + }, + }; + })(typeof exports !== 'undefined' ? exports : window); - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - if (!options.programCache.hasOwnProperty(this.type)) { - options.programCache[this.type] = this.createProgram(options.context); - } - return options.programCache[this.type]; - }, + function resizeCanvasIfNeeded(pipelineState) { + var targetCanvas = pipelineState.targetCanvas, + width = targetCanvas.width, height = targetCanvas.height, + dWidth = pipelineState.destinationWidth, + dHeight = pipelineState.destinationHeight; - /** - * Apply this filter using webgl. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.originalTexture The texture of the original input image. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyToWebGL: function(options) { - var gl = options.context; - var shader = this.retrieveShader(options); - if (options.pass === 0 && options.originalTexture) { - gl.bindTexture(gl.TEXTURE_2D, options.originalTexture); - } - else { - gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture); + if (width !== dWidth || height !== dHeight) { + targetCanvas.width = dWidth; + targetCanvas.height = dHeight; } - gl.useProgram(shader.program); - this.sendAttributeData(gl, shader.attributeLocations, options.aPosition); - - gl.uniform1f(shader.uniformLocations.uStepW, 1 / options.sourceWidth); - gl.uniform1f(shader.uniformLocations.uStepH, 1 / options.sourceHeight); - - this.sendUniformData(gl, shader.uniformLocations); - gl.viewport(0, 0, options.destinationWidth, options.destinationHeight); - gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); - }, - - bindAdditionalTexture: function(gl, texture, textureUnit) { - gl.activeTexture(textureUnit); - gl.bindTexture(gl.TEXTURE_2D, texture); - // reset active texture to 0 as usual - gl.activeTexture(gl.TEXTURE0); - }, - - unbindAdditionalTexture: function(gl, textureUnit) { - gl.activeTexture(textureUnit); - gl.bindTexture(gl.TEXTURE_2D, null); - gl.activeTexture(gl.TEXTURE0); - }, - - getMainParameter: function() { - return this[this.mainParameter]; - }, - - setMainParameter: function(value) { - this[this.mainParameter] = value; - }, + } /** - * Send uniform data from this filter to its shader program on the GPU. + * Copy an input WebGL canvas on to an output 2D canvas. * - * Intended to be overridden by subclasses. + * The WebGL canvas is assumed to be upside down, with the top-left pixel of the + * desired output image appearing in the bottom-left corner of the WebGL canvas. * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {Object} uniformLocations A map of shader uniform names to their locations. - */ - sendUniformData: function(/* gl, uniformLocations */) { - // Intentionally left blank. Override me in subclasses. - }, - - /** - * If needed by a 2d filter, this functions can create an helper canvas to be used - * remember that options.targetCanvas is available for use till end of chain. - */ - createHelpLayer: function(options) { - if (!options.helpLayer) { - var helpLayer = document.createElement('canvas'); - helpLayer.width = options.sourceWidth; - helpLayer.height = options.sourceHeight; - options.helpLayer = helpLayer; - } - }, - - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - var object = { type: this.type }, mainP = this.mainParameter; - if (mainP) { - object[mainP] = this[mainP]; - } - return object; - }, + * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. + * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. + * @param {Object} pipelineState The 2D target canvas to copy on to. + */ + function copyGLTo2DDrawImage(gl, pipelineState) { + var glCanvas = gl.canvas, targetCanvas = pipelineState.targetCanvas, + ctx = targetCanvas.getContext('2d'); + ctx.translate(0, targetCanvas.height); // move it down again + ctx.scale(1, -1); // vertical flip + // where is my image on the big glcanvas? + var sourceY = glCanvas.height - targetCanvas.height; + ctx.drawImage(glCanvas, 0, sourceY, targetCanvas.width, targetCanvas.height, 0, 0, + targetCanvas.width, targetCanvas.height); + } /** - * Returns a JSON representation of an instance - * @return {Object} JSON - */ - toJSON: function() { - // delegate, not alias - return this.toObject(); + * Copy an input WebGL canvas on to an output 2D canvas using 2d canvas' putImageData + * API. Measurably faster than using ctx.drawImage in Firefox (version 54 on OSX Sierra). + * + * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. + * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. + * @param {Object} pipelineState The 2D target canvas to copy on to. + */ + function copyGLTo2DPutImageData(gl, pipelineState) { + var targetCanvas = pipelineState.targetCanvas, ctx = targetCanvas.getContext('2d'), + dWidth = pipelineState.destinationWidth, + dHeight = pipelineState.destinationHeight, + numBytes = dWidth * dHeight * 4; + + // eslint-disable-next-line no-undef + var u8 = new Uint8Array(this.imageBuffer, 0, numBytes); + // eslint-disable-next-line no-undef + var u8Clamped = new Uint8ClampedArray(this.imageBuffer, 0, numBytes); + + gl.readPixels(0, 0, dWidth, dHeight, gl.RGBA, gl.UNSIGNED_BYTE, u8); + var imgData = new ImageData(u8Clamped, dWidth, dHeight); + ctx.putImageData(imgData, 0, 0); } -}); - -fabric.Image.filters.BaseFilter.fromObject = function(object, callback) { - var filter = new fabric.Image.filters[object.type](object); - callback && callback(filter); - return filter; -}; - -(function(global) { + (function(global) { + var fabric = global.fabric, noop = function() {}; - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - - /** - * Color Matrix filter class - * @class fabric.Image.filters.ColorMatrix - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} - * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} - * @example Kodachrome filter - * var filter = new fabric.Image.filters.ColorMatrix({ - * matrix: [ - 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, - -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, - -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, - 0, 0, 0, 1, 0 - ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { + fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; /** - * Filter type - * @param {String} type - * @default - */ - type: 'ColorMatrix', - - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'varying vec2 vTexCoord;\n' + - 'uniform mat4 uColorMatrix;\n' + - 'uniform vec4 uConstants;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color *= uColorMatrix;\n' + - 'color += uConstants;\n' + - 'gl_FragColor = color;\n' + - '}', - - /** - * Colormatrix for pixels. - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Array} matrix array of 20 numbers. - * @default + * Canvas 2D filter backend. */ - matrix: [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ], - - mainParameter: 'matrix', + function Canvas2dFilterBackend() {} + Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { + evictCachesForKey: noop, + dispose: noop, + clearWebGLCaches: noop, - /** - * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario - * to save some calculation - * @type Boolean - * @default true - */ - colorsOnly: true, + /** + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.matrix = this.matrix.slice(0); - }, + }, - /** - * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = data.length, - m = this.matrix, - r, g, b, a, i, colorsOnly = this.colorsOnly; - - for (i = 0; i < iLen; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - if (colorsOnly) { - data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; - } - else { - a = data[i + 3]; - data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; - data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; + /** + * Apply a set of filters against a source image and draw the filtered output + * to the provided destination canvas. + * + * @param {EnhancedFilter} filters The filter to apply. + * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. + * @param {Number} sourceWidth The width of the source input. + * @param {Number} sourceHeight The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + */ + applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { + var ctx = targetCanvas.getContext('2d'); + ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); + var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var pipelineState = { + sourceWidth: sourceWidth, + sourceHeight: sourceHeight, + imageData: imageData, + originalEl: sourceElement, + originalImageData: originalImageData, + canvasEl: targetCanvas, + ctx: ctx, + filterBackend: this, + }; + filters.forEach(function(filter) { filter.applyTo(pipelineState); }); + if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { + targetCanvas.width = pipelineState.imageData.width; + targetCanvas.height = pipelineState.imageData.height; } - } - }, + ctx.putImageData(pipelineState.imageData, 0, 0); + return pipelineState; + }, + }; + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + var fabric = global.fabric; /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. + * @namespace fabric.Image.filters + * @memberOf fabric.Image + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters} + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} */ - getUniformLocations: function(gl, program) { - return { - uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), - uConstants: gl.getUniformLocation(program, 'uConstants'), - }; - }, + fabric.Image.filters = fabric.Image.filters || { }; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var m = this.matrix, - matrix = [ - m[0], m[1], m[2], m[3], - m[5], m[6], m[7], m[8], - m[10], m[11], m[12], m[13], - m[15], m[16], m[17], m[18] - ], - constants = [m[4], m[9], m[14], m[19]]; - gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); - gl.uniform4fv(uniformLocations.uConstants, constants); - }, - }); - - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] function to invoke after filter creation - * @return {fabric.Image.filters.ColorMatrix} Instance of fabric.Image.filters.ColorMatrix - */ - fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; -})(typeof exports !== 'undefined' ? exports : this); - - -(function(global) { + * Root filter class from which all filter classes inherit from + * @class fabric.Image.filters.BaseFilter + * @memberOf fabric.Image.filters + */ + fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ { - 'use strict'; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'BaseFilter', - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Array of attributes to send with buffers. do not modify + * @private + */ - /** - * Brightness filter class - * @class fabric.Image.filters.Brightness - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Brightness({ - * brightness: 0.05 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Brightness', + fragmentSource: 'precision highp float;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform sampler2D uTexture;\n' + + 'void main() {\n' + + 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + + '}', - /** - * Fragment source for the brightness program - */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uBrightness;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color.rgb += uBrightness;\n' + - 'gl_FragColor = color;\n' + - '}', + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, - /** - * Brightness value, from -1 to 1. - * translated to -255 to 255 for 2d - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Number} brightness - * @default - */ - brightness: 0, + /** + * Sets filter's properties from options + * @param {Object} [options] Options object + */ + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'brightness', + /** + * Compile this filter's shader program. + * + * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation. + * @param {String} fragmentSource fragmentShader source for compilation + * @param {String} vertexSource vertexShader source for compilation + */ + createProgram: function(gl, fragmentSource, vertexSource) { + fragmentSource = fragmentSource || this.fragmentSource; + vertexSource = vertexSource || this.vertexSource; + if (fabric.webGlPrecision !== 'highp'){ + fragmentSource = fragmentSource.replace( + /precision highp float/g, + 'precision ' + fabric.webGlPrecision + ' float' + ); + } + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader, vertexSource); + gl.compileShader(vertexShader); + if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Vertex shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(vertexShader) + ); + } - /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.brightness === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - brightness = Math.round(this.brightness * 255); - for (i = 0; i < len; i += 4) { - data[i] = data[i] + brightness; - data[i + 1] = data[i + 1] + brightness; - data[i + 2] = data[i + 2] + brightness; - } - }, + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Fragment shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(fragmentShader) + ); + } - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uBrightness: gl.getUniformLocation(program, 'uBrightness'), - }; - }, + var program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Shader link error for "${this.type}" ' + + gl.getProgramInfoLog(program) + ); + } - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBrightness, this.brightness); - }, - }); + var attributeLocations = this.getAttributeLocations(gl, program); + var uniformLocations = this.getUniformLocations(gl, program) || { }; + uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW'); + uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH'); + return { + program: program, + attributeLocations: attributeLocations, + uniformLocations: uniformLocations + }; + }, - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness - */ - fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Return a map of attribute names to WebGLAttributeLocation objects. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take attribute locations. + * @returns {Object} A map of attribute names to attribute locations. + */ + getAttributeLocations: function(gl, program) { + return { + aPosition: gl.getAttribLocation(program, 'aPosition'), + }; + }, -})(typeof exports !== 'undefined' ? exports : this); + /** + * Return a map of uniform names to WebGLUniformLocation objects. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take uniform locations. + * @returns {Object} A map of uniform names to uniform locations. + */ + getUniformLocations: function (/* gl, program */) { + // in case i do not need any special uniform i need to return an empty object + return { }; + }, + /** + * Send attribute data from this filter to its shader program on the GPU. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} attributeLocations A map of shader attribute names to their locations. + */ + sendAttributeData: function(gl, attributeLocations, aPositionData) { + var attributeLocation = attributeLocations.aPosition; + var buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.enableVertexAttribArray(attributeLocation); + gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); + gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW); + }, -(function(global) { + _setupFrameBuffer: function(options) { + var gl = options.context, width, height; + if (options.passes > 1) { + width = options.destinationWidth; + height = options.destinationHeight; + if (options.sourceWidth !== width || options.sourceHeight !== height) { + gl.deleteTexture(options.targetTexture); + options.targetTexture = options.filterBackend.createTexture(gl, width, height); + } + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, + options.targetTexture, 0); + } + else { + // draw last filter on canvas and not to framebuffer. + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + gl.finish(); + } + }, - 'use strict'; + _swapTextures: function(options) { + options.passes--; + options.pass++; + var temp = options.targetTexture; + options.targetTexture = options.sourceTexture; + options.sourceTexture = temp; + }, - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Generic isNeutral implementation for one parameter based filters. + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter ) + * @param {Object} options + **/ + isNeutralState: function(/* options */) { + var main = this.mainParameter, + _class = fabric.Image.filters[this.type].prototype; + if (main) { + if (Array.isArray(_class[main])) { + for (var i = _class[main].length; i--;) { + if (this[main][i] !== _class[main][i]) { + return false; + } + } + return true; + } + else { + return _class[main] === this[main]; + } + } + else { + return false; + } + }, - /** - * Adapted from html5rocks article - * @class fabric.Image.filters.Convolute - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example Sharpen filter - * var filter = new fabric.Image.filters.Convolute({ - * matrix: [ 0, -1, 0, - * -1, 5, -1, - * 0, -1, 0 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - * @example Blur filter - * var filter = new fabric.Image.filters.Convolute({ - * matrix: [ 1/9, 1/9, 1/9, - * 1/9, 1/9, 1/9, - * 1/9, 1/9, 1/9 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - * @example Emboss filter - * var filter = new fabric.Image.filters.Convolute({ - * matrix: [ 1, 1, 1, - * 1, 0.7, -1, - * -1, -1, -1 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - * @example Emboss filter with opaqueness - * var filter = new fabric.Image.filters.Convolute({ - * opaque: true, - * matrix: [ 1, 1, 1, - * 1, 0.7, -1, - * -1, -1, -1 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { + /** + * Apply this filter to the input image data provided. + * + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + if (options.webgl) { + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Convolute', + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + if (!options.programCache.hasOwnProperty(this.type)) { + options.programCache[this.type] = this.createProgram(options.context); + } + return options.programCache[this.type]; + }, - /* - * Opaque value (true/false) - */ - opaque: false, + /** + * Apply this filter using webgl. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.originalTexture The texture of the original input image. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyToWebGL: function(options) { + var gl = options.context; + var shader = this.retrieveShader(options); + if (options.pass === 0 && options.originalTexture) { + gl.bindTexture(gl.TEXTURE_2D, options.originalTexture); + } + else { + gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture); + } + gl.useProgram(shader.program); + this.sendAttributeData(gl, shader.attributeLocations, options.aPosition); - /* - * matrix for the filter, max 9x9 - */ - matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], + gl.uniform1f(shader.uniformLocations.uStepW, 1 / options.sourceWidth); + gl.uniform1f(shader.uniformLocations.uStepH, 1 / options.sourceHeight); - /** - * Fragment source for the brightness program - */ - fragmentSource: { - Convolute_3_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[9];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 1), uStepH * (h - 1));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 3.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_3_0: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[9];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 1.0), uStepH * (h - 1.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 3.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + - '}', - Convolute_5_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[25];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 5.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_5_0: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[25];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 5.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + - '}', - Convolute_7_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[49];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 7.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_7_0: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[49];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 7.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + - '}', - Convolute_9_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[81];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 9.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_9_0: 'precision highp float;\n' + + this.sendUniformData(gl, shader.uniformLocations); + gl.viewport(0, 0, options.destinationWidth, options.destinationHeight); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); + }, + + bindAdditionalTexture: function(gl, texture, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, texture); + // reset active texture to 0 as usual + gl.activeTexture(gl.TEXTURE0); + }, + + unbindAdditionalTexture: function(gl, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.activeTexture(gl.TEXTURE0); + }, + + getMainParameter: function() { + return this[this.mainParameter]; + }, + + setMainParameter: function(value) { + this[this.mainParameter] = value; + }, + + /** + * Send uniform data from this filter to its shader program on the GPU. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} uniformLocations A map of shader uniform names to their locations. + */ + sendUniformData: function(/* gl, uniformLocations */) { + // Intentionally left blank. Override me in subclasses. + }, + + /** + * If needed by a 2d filter, this functions can create an helper canvas to be used + * remember that options.targetCanvas is available for use till end of chain. + */ + createHelpLayer: function(options) { + if (!options.helpLayer) { + var helpLayer = document.createElement('canvas'); + helpLayer.width = options.sourceWidth; + helpLayer.height = options.sourceHeight; + options.helpLayer = helpLayer; + } + }, + + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + var object = { type: this.type }, mainP = this.mainParameter; + if (mainP) { + object[mainP] = this[mainP]; + } + return object; + }, + + /** + * Returns a JSON representation of an instance + * @return {Object} JSON + */ + toJSON: function() { + // delegate, not alias + return this.toObject(); + } + }); + + /** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ + fabric.Image.filters.BaseFilter.fromObject = function(object) { + return Promise.resolve(new fabric.Image.filters[object.type](object)); + }; + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Color Matrix filter class + * @class fabric.Image.filters.ColorMatrix + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} + * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} + * @example Kodachrome filter + * var filter = new fabric.Image.filters.ColorMatrix({ + * matrix: [ + 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, + -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, + -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, + 0, 0, 0, 1, 0 + ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { + + /** + * Filter type + * @param {String} type + * @default + */ + type: 'ColorMatrix', + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[81];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + 'varying vec2 vTexCoord;\n' + + 'uniform mat4 uColorMatrix;\n' + + 'uniform vec4 uConstants;\n' + 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 9.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color *= uColorMatrix;\n' + + 'color += uConstants;\n' + 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + '}', - }, - - /** - * Constructor - * @memberOf fabric.Image.filters.Convolute.prototype - * @param {Object} [options] Options object - * @param {Boolean} [options.opaque=false] Opaque value (true/false) - * @param {Array} [options.matrix] Filter matrix - */ + /** + * Colormatrix for pixels. + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ], - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var size = Math.sqrt(this.matrix.length); - var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); - var shaderSource = this.fragmentSource[cacheKey]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + mainParameter: 'matrix', - /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - weights = this.matrix, - side = Math.round(Math.sqrt(weights.length)), - halfSide = Math.floor(side / 2), - sw = imageData.width, - sh = imageData.height, - output = options.ctx.createImageData(sw, sh), - dst = output.data, - // go through the destination image pixels - alphaFac = this.opaque ? 1 : 0, - r, g, b, a, dstOff, - scx, scy, srcOff, wt, - x, y, cx, cy; - - for (y = 0; y < sh; y++) { - for (x = 0; x < sw; x++) { - dstOff = (y * sw + x) * 4; - // calculate the weighed sum of the source image pixels that - // fall under the convolution matrix - r = 0; g = 0; b = 0; a = 0; - - for (cy = 0; cy < side; cy++) { - for (cx = 0; cx < side; cx++) { - scy = y + cy - halfSide; - scx = x + cx - halfSide; - - // eslint-disable-next-line max-depth - if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { - continue; - } + /** + * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario + * to save some calculation + * @type Boolean + * @default true + */ + colorsOnly: true, - srcOff = (scy * sw + scx) * 4; - wt = weights[cy * side + cx]; + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.matrix = this.matrix.slice(0); + }, - r += data[srcOff] * wt; - g += data[srcOff + 1] * wt; - b += data[srcOff + 2] * wt; - // eslint-disable-next-line max-depth - if (!alphaFac) { - a += data[srcOff + 3] * wt; - } - } - } - dst[dstOff] = r; - dst[dstOff + 1] = g; - dst[dstOff + 2] = b; - if (!alphaFac) { - dst[dstOff + 3] = a; + /** + * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = data.length, + m = this.matrix, + r, g, b, a, i, colorsOnly = this.colorsOnly; + + for (i = 0; i < iLen; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + if (colorsOnly) { + data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; } else { - dst[dstOff + 3] = data[dstOff + 3]; + a = data[i + 3]; + data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; + data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; } } - } - options.imageData = output; - }, + }, - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uMatrix: gl.getUniformLocation(program, 'uMatrix'), - uOpaque: gl.getUniformLocation(program, 'uOpaque'), - uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), - uSize: gl.getUniformLocation(program, 'uSize'), - }; - }, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), + uConstants: gl.getUniformLocation(program, 'uConstants'), + }; + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1fv(uniformLocations.uMatrix, this.matrix); - }, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var m = this.matrix, + matrix = [ + m[0], m[1], m[2], m[3], + m[5], m[6], m[7], m[8], + m[10], m[11], m[12], m[13], + m[15], m[16], m[17], m[18] + ], + constants = [m[4], m[9], m[14], m[19]]; + gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); + gl.uniform4fv(uniformLocations.uConstants, constants); + }, + }); /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - toObject: function() { - return extend(this.callSuper('toObject'), { - opaque: this.opaque, - matrix: this.matrix - }); - } - }); - - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Convolute} Instance of fabric.Image.filters.Convolute - */ - fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); - - -(function(global) { + fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; + })(typeof exports !== 'undefined' ? exports : window); - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + (function(global) { - /** - * Grayscale image filter class - * @class fabric.Image.filters.Grayscale - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Grayscale(); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Filter type - * @param {String} type - * @default + * Brightness filter class + * @class fabric.Image.filters.Brightness + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Brightness({ + * brightness: 0.05 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - type: 'Grayscale', + filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { + + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Brightness', - fragmentSource: { - average: 'precision highp float;\n' + + /** + * Fragment source for the brightness program + */ + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + + 'uniform float uBrightness;\n' + 'varying vec2 vTexCoord;\n' + 'void main() {\n' + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float average = (color.r + color.b + color.g) / 3.0;\n' + - 'gl_FragColor = vec4(average, average, average, color.a);\n' + - '}', - lightness: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform int uMode;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 col = texture2D(uTexture, vTexCoord);\n' + - 'float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\n' + - 'gl_FragColor = vec4(average, average, average, col.a);\n' + - '}', - luminosity: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform int uMode;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 col = texture2D(uTexture, vTexCoord);\n' + - 'float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\n' + - 'gl_FragColor = vec4(average, average, average, col.a);\n' + + 'color.rgb += uBrightness;\n' + + 'gl_FragColor = color;\n' + '}', - }, + /** + * Brightness value, from -1 to 1. + * translated to -255 to 255 for 2d + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Number} brightness + * @default + */ + brightness: 0, - /** - * Grayscale mode, between 'average', 'lightness', 'luminosity' - * @param {String} type - * @default - */ - mode: 'average', - - mainParameter: 'mode', + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'brightness', - /** - * Apply the Grayscale operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length, value, - mode = this.mode; - for (i = 0; i < len; i += 4) { - if (mode === 'average') { - value = (data[i] + data[i + 1] + data[i + 2]) / 3; - } - else if (mode === 'lightness') { - value = (Math.min(data[i], data[i + 1], data[i + 2]) + - Math.max(data[i], data[i + 1], data[i + 2])) / 2; + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.brightness === 0) { + return; } - else if (mode === 'luminosity') { - value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + brightness = Math.round(this.brightness * 255); + for (i = 0; i < len; i += 4) { + data[i] = data[i] + brightness; + data[i + 1] = data[i + 1] + brightness; + data[i + 2] = data[i + 2] + brightness; } - data[i] = value; - data[i + 1] = value; - data[i + 2] = value; - } - }, + }, - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var shaderSource = this.fragmentSource[this.mode]; - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uBrightness: gl.getUniformLocation(program, 'uBrightness'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBrightness, this.brightness); + }, + }); /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - getUniformLocations: function(gl, program) { - return { - uMode: gl.getUniformLocation(program, 'uMode'), - }; - }, + fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; + + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Adapted from html5rocks article + * @class fabric.Image.filters.Convolute + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example Sharpen filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 0, -1, 0, + * -1, 5, -1, + * 0, -1, 0 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Blur filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 1/9, 1/9, 1/9, + * 1/9, 1/9, 1/9, + * 1/9, 1/9, 1/9 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Emboss filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 1, 1, 1, + * 1, 0.7, -1, + * -1, -1, -1 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Emboss filter with opaqueness + * var filter = new fabric.Image.filters.Convolute({ + * opaque: true, + * matrix: [ 1, 1, 1, + * 1, 0.7, -1, + * -1, -1, -1 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ - sendUniformData: function(gl, uniformLocations) { - // default average mode. - var mode = 1; - gl.uniform1i(uniformLocations.uMode, mode); - }, + filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { - /** - * Grayscale filter isNeutralState implementation - * The filter is never neutral - * on the image - **/ - isNeutralState: function() { - return false; - }, - }); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Convolute', - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale - */ - fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /* + * Opaque value (true/false) + */ + opaque: false, -})(typeof exports !== 'undefined' ? exports : this); + /* + * matrix for the filter, max 9x9 + */ + matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], + /** + * Fragment source for the brightness program + */ + fragmentSource: { + Convolute_3_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[9];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 1), uStepH * (h - 1));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 3.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_3_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[9];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 1.0), uStepH * (h - 1.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 3.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_5_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[25];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 5.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_5_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[25];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 5.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_7_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[49];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 7.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_7_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[49];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 7.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_9_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[81];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 9.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_9_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[81];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 9.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + }, -(function(global) { + /** + * Constructor + * @memberOf fabric.Image.filters.Convolute.prototype + * @param {Object} [options] Options object + * @param {Boolean} [options.opaque=false] Opaque value (true/false) + * @param {Array} [options.matrix] Filter matrix + */ - 'use strict'; - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var size = Math.sqrt(this.matrix.length); + var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); + var shaderSource = this.fragmentSource[cacheKey]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - /** - * Invert filter class - * @class fabric.Image.filters.Invert - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Invert(); - * object.filters.push(filter); - * object.applyFilters(canvas.renderAll.bind(canvas)); - */ - filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + weights = this.matrix, + side = Math.round(Math.sqrt(weights.length)), + halfSide = Math.floor(side / 2), + sw = imageData.width, + sh = imageData.height, + output = options.ctx.createImageData(sw, sh), + dst = output.data, + // go through the destination image pixels + alphaFac = this.opaque ? 1 : 0, + r, g, b, a, dstOff, + scx, scy, srcOff, wt, + x, y, cx, cy; + + for (y = 0; y < sh; y++) { + for (x = 0; x < sw; x++) { + dstOff = (y * sw + x) * 4; + // calculate the weighed sum of the source image pixels that + // fall under the convolution matrix + r = 0; g = 0; b = 0; a = 0; + + for (cy = 0; cy < side; cy++) { + for (cx = 0; cx < side; cx++) { + scy = y + cy - halfSide; + scx = x + cx - halfSide; + + // eslint-disable-next-line max-depth + if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { + continue; + } - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Invert', - - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform int uInvert;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'if (uInvert == 1) {\n' + - 'gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,color.a);\n' + - '} else {\n' + - 'gl_FragColor = color;\n' + - '}\n' + - '}', + srcOff = (scy * sw + scx) * 4; + wt = weights[cy * side + cx]; - /** - * Filter invert. if false, does nothing - * @param {Boolean} invert - * @default - */ - invert: true, + r += data[srcOff] * wt; + g += data[srcOff + 1] * wt; + b += data[srcOff + 2] * wt; + // eslint-disable-next-line max-depth + if (!alphaFac) { + a += data[srcOff + 3] * wt; + } + } + } + dst[dstOff] = r; + dst[dstOff + 1] = g; + dst[dstOff + 2] = b; + if (!alphaFac) { + dst[dstOff + 3] = a; + } + else { + dst[dstOff + 3] = data[dstOff + 3]; + } + } + } + options.imageData = output; + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uMatrix: gl.getUniformLocation(program, 'uMatrix'), + uOpaque: gl.getUniformLocation(program, 'uOpaque'), + uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), + uSize: gl.getUniformLocation(program, 'uSize'), + }; + }, - mainParameter: 'invert', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1fv(uniformLocations.uMatrix, this.matrix); + }, - /** - * Apply the Invert operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length; - for (i = 0; i < len; i += 4) { - data[i] = 255 - data[i]; - data[i + 1] = 255 - data[i + 1]; - data[i + 2] = 255 - data[i + 2]; + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return extend(this.callSuper('toObject'), { + opaque: this.opaque, + matrix: this.matrix + }); } - }, - - /** - * Invert filter isNeutralState implementation - * Used only in image applyFilters to discard filters that will not have an effect - * on the image - * @param {Object} options - **/ - isNeutralState: function() { - return !this.invert; - }, + }); /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - getUniformLocations: function(gl, program) { - return { - uInvert: gl.getUniformLocation(program, 'uInvert'), - }; - }, + fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1i(uniformLocations.uInvert, this.invert); - }, - }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Invert} Instance of fabric.Image.filters.Invert - */ - fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -})(typeof exports !== 'undefined' ? exports : this); + /** + * Grayscale image filter class + * @class fabric.Image.filters.Grayscale + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Grayscale(); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Grayscale', + + fragmentSource: { + average: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float average = (color.r + color.b + color.g) / 3.0;\n' + + 'gl_FragColor = vec4(average, average, average, color.a);\n' + + '}', + lightness: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uMode;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 col = texture2D(uTexture, vTexCoord);\n' + + 'float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\n' + + 'gl_FragColor = vec4(average, average, average, col.a);\n' + + '}', + luminosity: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uMode;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 col = texture2D(uTexture, vTexCoord);\n' + + 'float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\n' + + 'gl_FragColor = vec4(average, average, average, col.a);\n' + + '}', + }, -(function(global) { - 'use strict'; + /** + * Grayscale mode, between 'average', 'lightness', 'luminosity' + * @param {String} type + * @default + */ + mode: 'average', - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + mainParameter: 'mode', - /** - * Noise filter class - * @class fabric.Image.filters.Noise - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Noise#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Noise({ - * noise: 700 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { + /** + * Apply the Grayscale operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length, value, + mode = this.mode; + for (i = 0; i < len; i += 4) { + if (mode === 'average') { + value = (data[i] + data[i + 1] + data[i + 2]) / 3; + } + else if (mode === 'lightness') { + value = (Math.min(data[i], data[i + 1], data[i + 2]) + + Math.max(data[i], data[i + 1], data[i + 2])) / 2; + } + else if (mode === 'luminosity') { + value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; + } + data[i] = value; + data[i + 1] = value; + data[i + 2] = value; + } + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Noise', + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var shaderSource = this.fragmentSource[this.mode]; + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - /** - * Fragment source for the noise program - */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uStepH;\n' + - 'uniform float uNoise;\n' + - 'uniform float uSeed;\n' + - 'varying vec2 vTexCoord;\n' + - 'float rand(vec2 co, float seed, float vScale) {\n' + - 'return fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);\n' + - '}\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;\n' + - 'gl_FragColor = color;\n' + - '}', + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uMode: gl.getUniformLocation(program, 'uMode'), + }; + }, - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'noise', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + // default average mode. + var mode = 1; + gl.uniform1i(uniformLocations.uMode, mode); + }, - /** - * Noise value, from - * @param {Number} noise - * @default - */ - noise: 0, + /** + * Grayscale filter isNeutralState implementation + * The filter is never neutral + * on the image + **/ + isNeutralState: function() { + return false; + }, + }); /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - applyTo2d: function(options) { - if (this.noise === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - noise = this.noise, rand; - - for (i = 0, len = data.length; i < len; i += 4) { + fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; - rand = (0.5 - Math.random()) * noise; + })(typeof exports !== 'undefined' ? exports : window); - data[i] += rand; - data[i + 1] += rand; - data[i + 2] += rand; - } - }, + (function(global) { - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uNoise: gl.getUniformLocation(program, 'uNoise'), - uSeed: gl.getUniformLocation(program, 'uSeed'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Invert filter class + * @class fabric.Image.filters.Invert + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Invert(); + * object.filters.push(filter); + * object.applyFilters(canvas.renderAll.bind(canvas)); */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uNoise, this.noise / 255); - gl.uniform1f(uniformLocations.uSeed, Math.random()); - }, + filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return extend(this.callSuper('toObject'), { - noise: this.noise - }); - } - }); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Invert', - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {Function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Noise} Instance of fabric.Image.filters.Noise - */ - fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Invert also alpha. + * @param {Boolean} alpha + * @default + **/ + alpha: false, + + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uInvert;\n' + + 'uniform int uAlpha;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'if (uInvert == 1) {\n' + + 'if (uAlpha == 1) {\n' + + 'gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,1.0 -color.a);\n' + + '} else {\n' + + 'gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,color.a);\n' + + '}\n' + + '} else {\n' + + 'gl_FragColor = color;\n' + + '}\n' + + '}', -})(typeof exports !== 'undefined' ? exports : this); + /** + * Filter invert. if false, does nothing + * @param {Boolean} invert + * @default + */ + invert: true, + mainParameter: 'invert', -(function(global) { + /** + * Apply the Invert operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length; + for (i = 0; i < len; i += 4) { + data[i] = 255 - data[i]; + data[i + 1] = 255 - data[i + 1]; + data[i + 2] = 255 - data[i + 2]; + + if (this.alpha) { + data[i + 3] = 255 - data[i + 3]; + } + } + }, - 'use strict'; + /** + * Invert filter isNeutralState implementation + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * @param {Object} options + **/ + isNeutralState: function() { + return !this.invert; + }, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uInvert: gl.getUniformLocation(program, 'uInvert'), + uAlpha: gl.getUniformLocation(program, 'uAlpha'), + }; + }, - /** - * Pixelate filter class - * @class fabric.Image.filters.Pixelate - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Pixelate({ - * blocksize: 8 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1i(uniformLocations.uInvert, this.invert); + gl.uniform1i(uniformLocations.uAlpha, this.alpha); + }, + }); /** - * Filter type - * @param {String} type - * @default + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - type: 'Pixelate', + fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; + - blocksize: 4, + })(typeof exports !== 'undefined' ? exports : window); - mainParameter: 'blocksize', + (function(global) { + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Fragment source for the Pixelate program + * Noise filter class + * @class fabric.Image.filters.Noise + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Noise#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Noise({ + * noise: 700 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uBlocksize;\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'float blockW = uBlocksize * uStepW;\n' + - 'float blockH = uBlocksize * uStepW;\n' + - 'int posX = int(vTexCoord.x / blockW);\n' + - 'int posY = int(vTexCoord.y / blockH);\n' + - 'float fposX = float(posX);\n' + - 'float fposY = float(posY);\n' + - 'vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\n' + - 'vec4 color = texture2D(uTexture, squareCoords);\n' + - 'gl_FragColor = color;\n' + - '}', + filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { - /** - * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = imageData.height, - jLen = imageData.width, - index, i, j, r, g, b, a, - _i, _j, _iLen, _jLen; - - for (i = 0; i < iLen; i += this.blocksize) { - for (j = 0; j < jLen; j += this.blocksize) { - - index = (i * 4) * jLen + (j * 4); - - r = data[index]; - g = data[index + 1]; - b = data[index + 2]; - a = data[index + 3]; - - _iLen = Math.min(i + this.blocksize, iLen); - _jLen = Math.min(j + this.blocksize, jLen); - for (_i = i; _i < _iLen; _i++) { - for (_j = j; _j < _jLen; _j++) { - index = (_i * 4) * jLen + (_j * 4); - data[index] = r; - data[index + 1] = g; - data[index + 2] = b; - data[index + 3] = a; - } - } - } - } - }, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Noise', - /** - * Indicate when the filter is not gonna apply changes to the image - **/ - isNeutralState: function() { - return this.blocksize === 1; - }, + /** + * Fragment source for the noise program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uStepH;\n' + + 'uniform float uNoise;\n' + + 'uniform float uSeed;\n' + + 'varying vec2 vTexCoord;\n' + + 'float rand(vec2 co, float seed, float vScale) {\n' + + 'return fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);\n' + + '}\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;\n' + + 'gl_FragColor = color;\n' + + '}', - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), - uStepW: gl.getUniformLocation(program, 'uStepW'), - uStepH: gl.getUniformLocation(program, 'uStepH'), - }; - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'noise', - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); - }, - }); + /** + * Noise value, from + * @param {Number} noise + * @default + */ + noise: 0, - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {Function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Pixelate} Instance of fabric.Image.filters.Pixelate - */ - fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.noise === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + noise = this.noise, rand; -})(typeof exports !== 'undefined' ? exports : this); + for (i = 0, len = data.length; i < len; i += 4) { + rand = (0.5 - Math.random()) * noise; -(function(global) { + data[i] += rand; + data[i + 1] += rand; + data[i + 2] += rand; + } + }, - 'use strict'; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uNoise: gl.getUniformLocation(program, 'uNoise'), + uSeed: gl.getUniformLocation(program, 'uSeed'), + }; + }, - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uNoise, this.noise / 255); + gl.uniform1f(uniformLocations.uSeed, Math.random()); + }, - /** - * Remove white filter class - * @class fabric.Image.filters.RemoveColor - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.RemoveColor#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.RemoveColor({ - * threshold: 0.2, - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return extend(this.callSuper('toObject'), { + noise: this.noise + }); + } + }); /** - * Filter type - * @param {String} type - * @default + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - type: 'RemoveColor', + fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Color to remove, in any format understood by fabric.Color. - * @param {String} type - * @default - */ - color: '#FFFFFF', + })(typeof exports !== 'undefined' ? exports : window); - /** - * Fragment source for the brightness program - */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec4 uLow;\n' + - 'uniform vec4 uHigh;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + - 'if(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {\n' + - 'gl_FragColor.a = 0.0;\n' + - '}\n' + - '}', + (function(global) { - /** - * distance to actual color, as value up or down from each r,g,b - * between 0 and 1 - **/ - distance: 0.02, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * For color to remove inside distance, use alpha channel for a smoother deletion - * NOT IMPLEMENTED YET - **/ - useAlpha: false, + * Pixelate filter class + * @class fabric.Image.filters.Pixelate + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Pixelate({ + * blocksize: 8 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { - /** - * Constructor - * @memberOf fabric.Image.filters.RemoveWhite.prototype - * @param {Object} [options] Options object - * @param {Number} [options.color=#RRGGBB] Threshold value - * @param {Number} [options.distance=10] Distance value - */ - - /** - * Applies filter to canvas element - * @param {Object} canvasEl Canvas element to apply filter to - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - distance = this.distance * 255, - r, g, b, - source = new fabric.Color(this.color).getSource(), - lowC = [ - source[0] - distance, - source[1] - distance, - source[2] - distance, - ], - highC = [ - source[0] + distance, - source[1] + distance, - source[2] + distance, - ]; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Pixelate', + blocksize: 4, - for (i = 0; i < data.length; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; + mainParameter: 'blocksize', + + /** + * Fragment source for the Pixelate program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uBlocksize;\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'float blockW = uBlocksize * uStepW;\n' + + 'float blockH = uBlocksize * uStepW;\n' + + 'int posX = int(vTexCoord.x / blockW);\n' + + 'int posY = int(vTexCoord.y / blockH);\n' + + 'float fposX = float(posX);\n' + + 'float fposY = float(posY);\n' + + 'vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\n' + + 'vec4 color = texture2D(uTexture, squareCoords);\n' + + 'gl_FragColor = color;\n' + + '}', - if (r > lowC[0] && - g > lowC[1] && - b > lowC[2] && - r < highC[0] && - g < highC[1] && - b < highC[2]) { - data[i + 3] = 0; + /** + * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = imageData.height, + jLen = imageData.width, + index, i, j, r, g, b, a, + _i, _j, _iLen, _jLen; + + for (i = 0; i < iLen; i += this.blocksize) { + for (j = 0; j < jLen; j += this.blocksize) { + + index = (i * 4) * jLen + (j * 4); + + r = data[index]; + g = data[index + 1]; + b = data[index + 2]; + a = data[index + 3]; + + _iLen = Math.min(i + this.blocksize, iLen); + _jLen = Math.min(j + this.blocksize, jLen); + for (_i = i; _i < _iLen; _i++) { + for (_j = j; _j < _jLen; _j++) { + index = (_i * 4) * jLen + (_j * 4); + data[index] = r; + data[index + 1] = g; + data[index + 2] = b; + data[index + 3] = a; + } + } + } } - } - }, + }, - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uLow: gl.getUniformLocation(program, 'uLow'), - uHigh: gl.getUniformLocation(program, 'uHigh'), - }; - }, + /** + * Indicate when the filter is not gonna apply changes to the image + **/ + isNeutralState: function() { + return this.blocksize === 1; + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(), - distance = parseFloat(this.distance), - lowC = [ - 0 + source[0] / 255 - distance, - 0 + source[1] / 255 - distance, - 0 + source[2] / 255 - distance, - 1 - ], - highC = [ - source[0] / 255 + distance, - source[1] / 255 + distance, - source[2] / 255 + distance, - 1 - ]; - gl.uniform4fv(uniformLocations.uLow, lowC); - gl.uniform4fv(uniformLocations.uHigh, highC); - }, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), + uStepW: gl.getUniformLocation(program, 'uStepW'), + uStepH: gl.getUniformLocation(program, 'uStepH'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); + }, + }); /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - toObject: function() { - return extend(this.callSuper('toObject'), { - color: this.color, - distance: this.distance - }); - } - }); - - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {Function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.RemoveColor} Instance of fabric.Image.filters.RemoveWhite - */ - fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); - + fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; -(function(global) { + })(typeof exports !== 'undefined' ? exports : window); - 'use strict'; + (function(global) { - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - - var matrices = { - Brownie: [ - 0.59970,0.34553,-0.27082,0,0.186, - -0.03770,0.86095,0.15059,0,-0.1449, - 0.24113,-0.07441,0.44972,0,-0.02965, - 0,0,0,1,0 - ], - Vintage: [ - 0.62793,0.32021,-0.03965,0,0.03784, - 0.02578,0.64411,0.03259,0,0.02926, - 0.04660,-0.08512,0.52416,0,0.02023, - 0,0,0,1,0 - ], - Kodachrome: [ - 1.12855,-0.39673,-0.03992,0,0.24991, - -0.16404,1.08352,-0.05498,0,0.09698, - -0.16786,-0.56034,1.60148,0,0.13972, - 0,0,0,1,0 - ], - Technicolor: [ - 1.91252,-0.85453,-0.09155,0,0.04624, - -0.30878,1.76589,-0.10601,0,-0.27589, - -0.23110,-0.75018,1.84759,0,0.12137, - 0,0,0,1,0 - ], - Polaroid: [ - 1.438,-0.062,-0.062,0,0, - -0.122,1.378,-0.122,0,0, - -0.016,-0.016,1.483,0,0, - 0,0,0,1,0 - ], - Sepia: [ - 0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0 - ], - BlackWhite: [ - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 0, 0, 0, 1, 0, - ] - }; + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - for (var key in matrices) { - filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { + /** + * Remove white filter class + * @class fabric.Image.filters.RemoveColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.RemoveColor#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.RemoveColor({ + * threshold: 0.2, + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { /** * Filter type * @param {String} type * @default */ - type: key, + type: 'RemoveColor', /** - * Colormatrix for the effect - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * @param {Array} matrix array of 20 numbers. + * Color to remove, in any format understood by fabric.Color. + * @param {String} type * @default */ - matrix: matrices[key], + color: '#FFFFFF', /** - * Lock the matrix export for this kind of static, parameter less filters. + * Fragment source for the brightness program */ - mainParameter: false, + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec4 uLow;\n' + + 'uniform vec4 uHigh;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + + 'if(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {\n' + + 'gl_FragColor.a = 0.0;\n' + + '}\n' + + '}', + /** - * Lock the colormatrix on the color part, skipping alpha - */ - colorsOnly: true, + * distance to actual color, as value up or down from each r,g,b + * between 0 and 1 + **/ + distance: 0.02, - }); - fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; - } -})(typeof exports !== 'undefined' ? exports : this); + /** + * For color to remove inside distance, use alpha channel for a smoother deletion + * NOT IMPLEMENTED YET + **/ + useAlpha: false, + /** + * Constructor + * @memberOf fabric.Image.filters.RemoveWhite.prototype + * @param {Object} [options] Options object + * @param {Number} [options.color=#RRGGBB] Threshold value + * @param {Number} [options.distance=10] Distance value + */ -(function(global) { - 'use strict'; + /** + * Applies filter to canvas element + * @param {Object} canvasEl Canvas element to apply filter to + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + distance = this.distance * 255, + r, g, b, + source = new fabric.Color(this.color).getSource(), + lowC = [ + source[0] - distance, + source[1] - distance, + source[2] - distance, + ], + highC = [ + source[0] + distance, + source[1] + distance, + source[2] + distance, + ]; + + + for (i = 0; i < data.length; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + if (r > lowC[0] && + g > lowC[1] && + b > lowC[2] && + r < highC[0] && + g < highC[1] && + b < highC[2]) { + data[i + 3] = 0; + } + } + }, - var fabric = global.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uLow: gl.getUniformLocation(program, 'uLow'), + uHigh: gl.getUniformLocation(program, 'uHigh'), + }; + }, - /** - * Color Blend filter class - * @class fabric.Image.filter.BlendColor - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); - * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(), + distance = parseFloat(this.distance), + lowC = [ + 0 + source[0] / 255 - distance, + 0 + source[1] / 255 - distance, + 0 + source[2] / 255 - distance, + 1 + ], + highC = [ + source[0] / 255 + distance, + source[1] / 255 + distance, + source[2] / 255 + distance, + 1 + ]; + gl.uniform4fv(uniformLocations.uLow, lowC); + gl.uniform4fv(uniformLocations.uHigh, highC); + }, - filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { - type: 'BlendColor', + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return extend(this.callSuper('toObject'), { + color: this.color, + distance: this.distance + }); + } + }); /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - * @type String - * @default - **/ - color: '#F95C63', + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ + fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; + + })(typeof exports !== 'undefined' ? exports : window); + + (function(global) { + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + var matrices = { + Brownie: [ + 0.59970,0.34553,-0.27082,0,0.186, + -0.03770,0.86095,0.15059,0,-0.1449, + 0.24113,-0.07441,0.44972,0,-0.02965, + 0,0,0,1,0 + ], + Vintage: [ + 0.62793,0.32021,-0.03965,0,0.03784, + 0.02578,0.64411,0.03259,0,0.02926, + 0.04660,-0.08512,0.52416,0,0.02023, + 0,0,0,1,0 + ], + Kodachrome: [ + 1.12855,-0.39673,-0.03992,0,0.24991, + -0.16404,1.08352,-0.05498,0,0.09698, + -0.16786,-0.56034,1.60148,0,0.13972, + 0,0,0,1,0 + ], + Technicolor: [ + 1.91252,-0.85453,-0.09155,0,0.04624, + -0.30878,1.76589,-0.10601,0,-0.27589, + -0.23110,-0.75018,1.84759,0,0.12137, + 0,0,0,1,0 + ], + Polaroid: [ + 1.438,-0.062,-0.062,0,0, + -0.122,1.378,-0.122,0,0, + -0.016,-0.016,1.483,0,0, + 0,0,0,1,0 + ], + Sepia: [ + 0.393, 0.769, 0.189, 0, 0, + 0.349, 0.686, 0.168, 0, 0, + 0.272, 0.534, 0.131, 0, 0, + 0, 0, 0, 1, 0 + ], + BlackWhite: [ + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 0, 0, 0, 1, 0, + ] + }; - /** - * Blend mode for the filter: one of multiply, add, diff, screen, subtract, - * darken, lighten, overlay, exclusion, tint. - * @type String - * @default - **/ - mode: 'multiply', + for (var key in matrices) { + filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { + + /** + * Filter type + * @param {String} type + * @default + */ + type: key, + + /** + * Colormatrix for the effect + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: matrices[key], + + /** + * Lock the matrix export for this kind of static, parameter less filters. + */ + mainParameter: false, + /** + * Lock the colormatrix on the color part, skipping alpha + */ + colorsOnly: true, - /** - * alpha value. represent the strength of the blend color operation. - * @type Number - * @default - **/ - alpha: 1, - - /** - * Fragment source for the Multiply program - */ - fragmentSource: { - multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', - screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', - add: 'gl_FragColor.rgb += uColor.rgb;\n', - diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', - subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', - lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', - darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', - exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', - overlay: 'if (uColor.r < 0.5) {\n' + - 'gl_FragColor.r *= 2.0 * uColor.r;\n' + - '} else {\n' + - 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + - '}\n' + - 'if (uColor.g < 0.5) {\n' + - 'gl_FragColor.g *= 2.0 * uColor.g;\n' + - '} else {\n' + - 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + - '}\n' + - 'if (uColor.b < 0.5) {\n' + - 'gl_FragColor.b *= 2.0 * uColor.b;\n' + - '} else {\n' + - 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + - '}\n', - tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + - 'gl_FragColor.rgb += uColor.rgb;\n', - }, - - /** - * build the fragment source for the filters, joining the common part with - * the specific one. - * @param {String} mode the mode of the filter, a key of this.fragmentSource - * @return {String} the source to be compiled - * @private - */ - buildSource: function(mode) { - return 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'gl_FragColor = color;\n' + - 'if (color.a > 0.0) {\n' + - this.fragmentSource[mode] + - '}\n' + - '}'; - }, + }); + fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; + } + })(typeof exports !== 'undefined' ? exports : window); - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode, shaderSource; - if (!options.programCache.hasOwnProperty(cacheKey)) { - shaderSource = this.buildSource(this.mode); - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + (function(global) { - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, iLen = data.length, - tr, tg, tb, - r, g, b, - source, alpha1 = 1 - this.alpha; - - source = new fabric.Color(this.color).getSource(); - tr = source[0] * this.alpha; - tg = source[1] * this.alpha; - tb = source[2] * this.alpha; - - for (var i = 0; i < iLen; i += 4) { - - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - break; - case 'screen': - data[i] = 255 - (255 - r) * (255 - tr) / 255; - data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; - data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; - break; - case 'add': - data[i] = r + tr; - data[i + 1] = g + tg; - data[i + 2] = b + tb; - break; - case 'diff': - case 'difference': - data[i] = Math.abs(r - tr); - data[i + 1] = Math.abs(g - tg); - data[i + 2] = Math.abs(b - tb); - break; - case 'subtract': - data[i] = r - tr; - data[i + 1] = g - tg; - data[i + 2] = b - tb; - break; - case 'darken': - data[i] = Math.min(r, tr); - data[i + 1] = Math.min(g, tg); - data[i + 2] = Math.min(b, tb); - break; - case 'lighten': - data[i] = Math.max(r, tr); - data[i + 1] = Math.max(g, tg); - data[i + 2] = Math.max(b, tb); - break; - case 'overlay': - data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); - data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); - data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); - break; - case 'exclusion': - data[i] = tr + r - ((2 * tr * r) / 255); - data[i + 1] = tg + g - ((2 * tg * g) / 255); - data[i + 2] = tb + b - ((2 * tb * b) / 255); - break; - case 'tint': - data[i] = tr + r * alpha1; - data[i + 1] = tg + g * alpha1; - data[i + 2] = tb + b * alpha1; - } - } - }, + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Return WebGL uniform locations for this filter's shader. + * Color Blend filter class + * @class fabric.Image.filter.BlendColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ - getUniformLocations: function(gl, program) { - return { - uColor: gl.getUniformLocation(program, 'uColor'), - }; - }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(); - source[0] = this.alpha * source[0] / 255; - source[1] = this.alpha * source[1] / 255; - source[2] = this.alpha * source[2] / 255; - source[3] = this.alpha; - gl.uniform4fv(uniformLocations.uColor, source); - }, + filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { + type: 'BlendColor', - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - color: this.color, - mode: this.mode, - alpha: this.alpha - }; - } - }); + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + * @type String + * @default + **/ + color: '#F95C63', - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.BlendColor} Instance of fabric.Image.filters.BlendColor - */ - fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Blend mode for the filter: one of multiply, add, diff, screen, subtract, + * darken, lighten, overlay, exclusion, tint. + * @type String + * @default + **/ + mode: 'multiply', -})(typeof exports !== 'undefined' ? exports : this); + /** + * alpha value. represent the strength of the blend color operation. + * @type Number + * @default + **/ + alpha: 1, + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', + screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', + add: 'gl_FragColor.rgb += uColor.rgb;\n', + diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', + subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', + lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', + darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', + exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', + overlay: 'if (uColor.r < 0.5) {\n' + + 'gl_FragColor.r *= 2.0 * uColor.r;\n' + + '} else {\n' + + 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + + '}\n' + + 'if (uColor.g < 0.5) {\n' + + 'gl_FragColor.g *= 2.0 * uColor.g;\n' + + '} else {\n' + + 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + + '}\n' + + 'if (uColor.b < 0.5) {\n' + + 'gl_FragColor.b *= 2.0 * uColor.b;\n' + + '} else {\n' + + 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + + '}\n', + tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + + 'gl_FragColor.rgb += uColor.rgb;\n', + }, -(function(global) { - 'use strict'; + /** + * build the fragment source for the filters, joining the common part with + * the specific one. + * @param {String} mode the mode of the filter, a key of this.fragmentSource + * @return {String} the source to be compiled + * @private + */ + buildSource: function(mode) { + return 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'gl_FragColor = color;\n' + + 'if (color.a > 0.0) {\n' + + this.fragmentSource[mode] + + '}\n' + + '}'; + }, - var fabric = global.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode, shaderSource; + if (!options.programCache.hasOwnProperty(cacheKey)) { + shaderSource = this.buildSource(this.mode); + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - /** - * Image Blend filter class - * @class fabric.Image.filter.BlendImage - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); - * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, iLen = data.length, + tr, tg, tb, + r, g, b, + source, alpha1 = 1 - this.alpha; + + source = new fabric.Color(this.color).getSource(); + tr = source[0] * this.alpha; + tg = source[1] * this.alpha; + tb = source[2] * this.alpha; + + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + break; + case 'screen': + data[i] = 255 - (255 - r) * (255 - tr) / 255; + data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; + data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; + break; + case 'add': + data[i] = r + tr; + data[i + 1] = g + tg; + data[i + 2] = b + tb; + break; + case 'diff': + case 'difference': + data[i] = Math.abs(r - tr); + data[i + 1] = Math.abs(g - tg); + data[i + 2] = Math.abs(b - tb); + break; + case 'subtract': + data[i] = r - tr; + data[i + 1] = g - tg; + data[i + 2] = b - tb; + break; + case 'darken': + data[i] = Math.min(r, tr); + data[i + 1] = Math.min(g, tg); + data[i + 2] = Math.min(b, tb); + break; + case 'lighten': + data[i] = Math.max(r, tr); + data[i + 1] = Math.max(g, tg); + data[i + 2] = Math.max(b, tb); + break; + case 'overlay': + data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); + data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); + data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); + break; + case 'exclusion': + data[i] = tr + r - ((2 * tr * r) / 255); + data[i + 1] = tg + g - ((2 * tg * g) / 255); + data[i + 2] = tb + b - ((2 * tb * b) / 255); + break; + case 'tint': + data[i] = tr + r * alpha1; + data[i + 1] = tg + g * alpha1; + data[i + 2] = tb + b * alpha1; + } + } + }, - filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { - type: 'BlendImage', + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColor: gl.getUniformLocation(program, 'uColor'), + }; + }, - /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - **/ - image: null, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(); + source[0] = this.alpha * source[0] / 255; + source[1] = this.alpha * source[1] / 255; + source[2] = this.alpha * source[2] / 255; + source[3] = this.alpha; + gl.uniform4fv(uniformLocations.uColor, source); + }, - /** - * Blend mode for the filter (one of "multiply", "mask") - * @type String - * @default - **/ - mode: 'multiply', + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + color: this.color, + mode: this.mode, + alpha: this.alpha + }; + } + }); /** - * alpha value. represent the strength of the blend image operation. - * not implemented. - **/ - alpha: 1, + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ + fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; - vertexSource: 'attribute vec2 aPosition;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'uniform mat3 uTransformMatrix;\n' + - 'void main() {\n' + - 'vTexCoord = aPosition;\n' + - 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + - 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + - '}', + })(typeof exports !== 'undefined' ? exports : window); - /** - * Fragment source for the Multiply program - */ - fragmentSource: { - multiply: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.rgba *= color2.rgba;\n' + - 'gl_FragColor = color;\n' + - '}', - mask: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.a = color2.a;\n' + - 'gl_FragColor = color;\n' + - '}', - }, - - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - var shaderSource = this.fragmentSource[this.mode]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, - - applyToWebGL: function(options) { - // load texture to blend. - var gl = options.context, - texture = this.createTexture(options.filterBackend, this.image); - this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); - this.callSuper('applyToWebGL', options); - this.unbindAdditionalTexture(gl, gl.TEXTURE1); - }, - - createTexture: function(backend, image) { - return backend.getCachedTexture(image.cacheKey, image._element); - }, - - /** - * Calculate a transformMatrix to adapt the image to blend over - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - calculateMatrix: function() { - var image = this.image, - width = image._element.width, - height = image._element.height; - return [ - 1 / image.scaleX, 0, 0, - 0, 1 / image.scaleY, 0, - -image.left / width, -image.top / height, 1 - ]; - }, + (function(global) { - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - resources = options.filterBackend.resources, - data = imageData.data, iLen = data.length, - width = imageData.width, - height = imageData.height, - tr, tg, tb, ta, - r, g, b, a, - canvas1, context, image = this.image, blendData; - - if (!resources.blendImage) { - resources.blendImage = fabric.util.createCanvasElement(); - } - canvas1 = resources.blendImage; - context = canvas1.getContext('2d'); - if (canvas1.width !== width || canvas1.height !== height) { - canvas1.width = width; - canvas1.height = height; - } - else { - context.clearRect(0, 0, width, height); - } - context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); - context.drawImage(image._element, 0, 0, width, height); - blendData = context.getImageData(0, 0, width, height).data; - for (var i = 0; i < iLen; i += 4) { - - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - a = data[i + 3]; - - tr = blendData[i]; - tg = blendData[i + 1]; - tb = blendData[i + 2]; - ta = blendData[i + 3]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - data[i + 3] = a * ta / 255; - break; - case 'mask': - data[i + 3] = ta; - break; - } - } - }, + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Return WebGL uniform locations for this filter's shader. + * Image Blend filter class + * @class fabric.Image.filter.BlendImage + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ - getUniformLocations: function(gl, program) { - return { - uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), - uImage: gl.getUniformLocation(program, 'uImage'), - }; - }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var matrix = this.calculateMatrix(); - gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. - gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); - }, + filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { + type: 'BlendImage', - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - image: this.image && this.image.toObject(), - mode: this.mode, - alpha: this.alpha - }; - } - }); + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + **/ + image: null, - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} callback to be invoked after filter creation - * @return {fabric.Image.filters.BlendImage} Instance of fabric.Image.filters.BlendImage - */ - fabric.Image.filters.BlendImage.fromObject = function(object, callback) { - fabric.Image.fromObject(object.image, function(image) { - var options = fabric.util.object.clone(object); - options.image = image; - callback(new fabric.Image.filters.BlendImage(options)); - }); - }; + /** + * Blend mode for the filter (one of "multiply", "mask") + * @type String + * @default + **/ + mode: 'multiply', -})(typeof exports !== 'undefined' ? exports : this); + /** + * alpha value. represent the strength of the blend image operation. + * not implemented. + **/ + alpha: 1, + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'uniform mat3 uTransformMatrix;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', -(function(global) { + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.rgba *= color2.rgba;\n' + + 'gl_FragColor = color;\n' + + '}', + mask: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.a = color2.a;\n' + + 'gl_FragColor = color;\n' + + '}', + }, - 'use strict'; + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + var shaderSource = this.fragmentSource[this.mode]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor, - sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, - ceil = Math.ceil, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + applyToWebGL: function(options) { + // load texture to blend. + var gl = options.context, + texture = this.createTexture(options.filterBackend, this.image); + this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); + this.callSuper('applyToWebGL', options); + this.unbindAdditionalTexture(gl, gl.TEXTURE1); + }, - /** - * Resize image filter class - * @class fabric.Image.filters.Resize - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Resize(); - * object.filters.push(filter); - * object.applyFilters(canvas.renderAll.bind(canvas)); - */ - filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { + createTexture: function(backend, image) { + return backend.getCachedTexture(image.cacheKey, image._element); + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Resize', + /** + * Calculate a transformMatrix to adapt the image to blend over + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + calculateMatrix: function() { + var image = this.image, + width = image._element.width, + height = image._element.height; + return [ + 1 / image.scaleX, 0, 0, + 0, 1 / image.scaleY, 0, + -image.left / width, -image.top / height, 1 + ]; + }, - /** - * Resize type - * for webgl resizeType is just lanczos, for canvas2d can be: - * bilinear, hermite, sliceHack, lanczos. - * @param {String} resizeType - * @default - */ - resizeType: 'hermite', + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + resources = options.filterBackend.resources, + data = imageData.data, iLen = data.length, + width = imageData.width, + height = imageData.height, + tr, tg, tb, ta, + r, g, b, a, + canvas1, context, image = this.image, blendData; + + if (!resources.blendImage) { + resources.blendImage = fabric.util.createCanvasElement(); + } + canvas1 = resources.blendImage; + context = canvas1.getContext('2d'); + if (canvas1.width !== width || canvas1.height !== height) { + canvas1.width = width; + canvas1.height = height; + } + else { + context.clearRect(0, 0, width, height); + } + context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); + context.drawImage(image._element, 0, 0, width, height); + blendData = context.getImageData(0, 0, width, height).data; + for (var i = 0; i < iLen; i += 4) { - /** - * Scale factor for resizing, x axis - * @param {Number} scaleX - * @default - */ - scaleX: 1, + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + a = data[i + 3]; + + tr = blendData[i]; + tg = blendData[i + 1]; + tb = blendData[i + 2]; + ta = blendData[i + 3]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + data[i + 3] = a * ta / 255; + break; + case 'mask': + data[i + 3] = ta; + break; + } + } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), + uImage: gl.getUniformLocation(program, 'uImage'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var matrix = this.calculateMatrix(); + gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. + gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); + }, + + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + image: this.image && this.image.toObject(), + mode: this.mode, + alpha: this.alpha + }; + } + }); /** - * Scale factor for resizing, y axis - * @param {Number} scaleY - * @default + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - scaleY: 1, + fabric.Image.filters.BlendImage.fromObject = function(object) { + return fabric.Image.fromObject(object.image).then(function(image) { + return new fabric.Image.filters.BlendImage(Object.assign({}, object, { image: image })); + }); + }; - /** - * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos - * @param {Number} lanczosLobes - * @default - */ - lanczosLobes: 3, + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uDelta: gl.getUniformLocation(program, 'uDelta'), - uTaps: gl.getUniformLocation(program, 'uTaps'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor, + sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, + ceil = Math.ceil, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Resize image filter class + * @class fabric.Image.filters.Resize + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Resize(); + * object.filters.push(filter); + * object.applyFilters(canvas.renderAll.bind(canvas)); */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); - gl.uniform1fv(uniformLocations.uTaps, this.taps); - }, + filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var fragmentShader = this.generateShader(filterWindow); - options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); - } - return options.programCache[cacheKey]; - }, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Resize', - getFilterWindow: function() { - var scale = this.tempScale; - return Math.ceil(this.lanczosLobes / scale); - }, + /** + * Resize type + * for webgl resizeType is just lanczos, for canvas2d can be: + * bilinear, hermite, sliceHack, lanczos. + * @param {String} resizeType + * @default + */ + resizeType: 'hermite', - getTaps: function() { - var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, - filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); - for (var i = 1; i <= filterWindow; i++) { - taps[i - 1] = lobeFunction(i * scale); - } - return taps; - }, + /** + * Scale factor for resizing, x axis + * @param {Number} scaleX + * @default + */ + scaleX: 1, - /** - * Generate vertex and shader sources from the necessary steps numbers - * @param {Number} filterWindow - */ - generateShader: function(filterWindow) { - var offsets = new Array(filterWindow), - fragmentShader = this.fragmentSourceTOP, filterWindow; + /** + * Scale factor for resizing, y axis + * @param {Number} scaleY + * @default + */ + scaleY: 1, - for (var i = 1; i <= filterWindow; i++) { - offsets[i - 1] = i + '.0 * uDelta'; - } + /** + * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos + * @param {Number} lanczosLobes + * @default + */ + lanczosLobes: 3, - fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; - fragmentShader += 'void main() {\n'; - fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; - fragmentShader += ' float sum = 1.0;\n'; - offsets.forEach(function(offset, i) { - fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; - }); - fragmentShader += ' gl_FragColor = color / sum;\n'; - fragmentShader += '}'; - return fragmentShader; - }, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uDelta: gl.getUniformLocation(program, 'uDelta'), + uTaps: gl.getUniformLocation(program, 'uTaps'), + }; + }, - fragmentSourceTOP: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec2 uDelta;\n' + - 'varying vec2 vTexCoord;\n', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); + gl.uniform1fv(uniformLocations.uTaps, this.taps); + }, - /** - * Apply the resize filter to the image - * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyTo: function(options) { - if (options.webgl) { - options.passes++; - this.width = options.sourceWidth; - this.horizontal = true; - this.dW = Math.round(this.width * this.scaleX); - this.dH = options.sourceHeight; - this.tempScale = this.dW / this.width; - this.taps = this.getTaps(); - options.destinationWidth = this.dW; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceWidth = options.destinationWidth; - - this.height = options.sourceHeight; - this.horizontal = false; - this.dH = Math.round(this.height * this.scaleY); - this.tempScale = this.dH / this.height; - this.taps = this.getTaps(); - options.destinationHeight = this.dH; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceHeight = options.destinationHeight; - } - else { - this.applyTo2d(options); - } - }, + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var fragmentShader = this.generateShader(filterWindow); + options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); + } + return options.programCache[cacheKey]; + }, - isNeutralState: function() { - return this.scaleX === 1 && this.scaleY === 1; - }, + getFilterWindow: function() { + var scale = this.tempScale; + return Math.ceil(this.lanczosLobes / scale); + }, - lanczosCreate: function(lobes) { - return function(x) { - if (x >= lobes || x <= -lobes) { - return 0.0; + getTaps: function() { + var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, + filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); + for (var i = 1; i <= filterWindow; i++) { + taps[i - 1] = lobeFunction(i * scale); } - if (x < 1.19209290E-07 && x > -1.19209290E-07) { - return 1.0; + return taps; + }, + + /** + * Generate vertex and shader sources from the necessary steps numbers + * @param {Number} filterWindow + */ + generateShader: function(filterWindow) { + var offsets = new Array(filterWindow), + fragmentShader = this.fragmentSourceTOP, filterWindow; + + for (var i = 1; i <= filterWindow; i++) { + offsets[i - 1] = i + '.0 * uDelta'; } - x *= Math.PI; - var xx = x / lobes; - return (sin(x) / x) * sin(xx) / xx; - }; - }, - /** - * Applies filter to canvas element - * @memberOf fabric.Image.filters.Resize.prototype - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} scaleX - * @param {Number} scaleY - */ - applyTo2d: function(options) { - var imageData = options.imageData, - scaleX = this.scaleX, - scaleY = this.scaleY; + fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; + fragmentShader += 'void main() {\n'; + fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; + fragmentShader += ' float sum = 1.0;\n'; - this.rcpScaleX = 1 / scaleX; - this.rcpScaleY = 1 / scaleY; + offsets.forEach(function(offset, i) { + fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; + }); + fragmentShader += ' gl_FragColor = color / sum;\n'; + fragmentShader += '}'; + return fragmentShader; + }, - var oW = imageData.width, oH = imageData.height, - dW = round(oW * scaleX), dH = round(oH * scaleY), - newData; + fragmentSourceTOP: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n', - if (this.resizeType === 'sliceHack') { - newData = this.sliceByTwo(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'hermite') { - newData = this.hermiteFastResize(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'bilinear') { - newData = this.bilinearFiltering(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'lanczos') { - newData = this.lanczosResize(options, oW, oH, dW, dH); - } - options.imageData = newData; - }, + /** + * Apply the resize filter to the image + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + if (options.webgl) { + options.passes++; + this.width = options.sourceWidth; + this.horizontal = true; + this.dW = Math.round(this.width * this.scaleX); + this.dH = options.sourceHeight; + this.tempScale = this.dW / this.width; + this.taps = this.getTaps(); + options.destinationWidth = this.dW; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceWidth = options.destinationWidth; + + this.height = options.sourceHeight; + this.horizontal = false; + this.dH = Math.round(this.height * this.scaleY); + this.tempScale = this.dH / this.height; + this.taps = this.getTaps(); + options.destinationHeight = this.dH; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceHeight = options.destinationHeight; + } + else { + this.applyTo2d(options); + } + }, - /** - * Filter sliceByTwo - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - sliceByTwo: function(options, oW, oH, dW, dH) { - var imageData = options.imageData, - mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, - stepH = oH * mult, resources = fabric.filterBackend.resources, - tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; - if (!resources.sliceByTwo) { - resources.sliceByTwo = document.createElement('canvas'); - } - tmpCanvas = resources.sliceByTwo; - if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { - tmpCanvas.width = oW * 1.5; - tmpCanvas.height = oH; - } - ctx = tmpCanvas.getContext('2d'); - ctx.clearRect(0, 0, oW * 1.5, oH); - ctx.putImageData(imageData, 0, 0); + isNeutralState: function() { + return this.scaleX === 1 && this.scaleY === 1; + }, + + lanczosCreate: function(lobes) { + return function(x) { + if (x >= lobes || x <= -lobes) { + return 0.0; + } + if (x < 1.19209290E-07 && x > -1.19209290E-07) { + return 1.0; + } + x *= Math.PI; + var xx = x / lobes; + return (sin(x) / x) * sin(xx) / xx; + }; + }, + + /** + * Applies filter to canvas element + * @memberOf fabric.Image.filters.Resize.prototype + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} scaleX + * @param {Number} scaleY + */ + applyTo2d: function(options) { + var imageData = options.imageData, + scaleX = this.scaleX, + scaleY = this.scaleY; - dW = floor(dW); - dH = floor(dH); + this.rcpScaleX = 1 / scaleX; + this.rcpScaleY = 1 / scaleY; - while (!doneW || !doneH) { - oW = stepW; - oH = stepH; - if (dW < floor(stepW * mult)) { - stepW = floor(stepW * mult); + var oW = imageData.width, oH = imageData.height, + dW = round(oW * scaleX), dH = round(oH * scaleY), + newData; + + if (this.resizeType === 'sliceHack') { + newData = this.sliceByTwo(options, oW, oH, dW, dH); } - else { - stepW = dW; - doneW = true; + else if (this.resizeType === 'hermite') { + newData = this.hermiteFastResize(options, oW, oH, dW, dH); } - if (dH < floor(stepH * mult)) { - stepH = floor(stepH * mult); + else if (this.resizeType === 'bilinear') { + newData = this.bilinearFiltering(options, oW, oH, dW, dH); } - else { - stepH = dH; - doneH = true; - } - ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); - sX = dX; - sY = dY; - dY += stepH; - } - return ctx.getImageData(sX, sY, dW, dH); - }, - - /** - * Filter lanczosResize - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - lanczosResize: function(options, oW, oH, dW, dH) { - - function process(u) { - var v, i, weight, idx, a, red, green, - blue, alpha, fX, fY; - center.x = (u + 0.5) * ratioX; - icenter.x = floor(center.x); - for (v = 0; v < dH; v++) { - center.y = (v + 0.5) * ratioY; - icenter.y = floor(center.y); - a = 0; red = 0; green = 0; blue = 0; alpha = 0; - for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { - if (i < 0 || i >= oW) { - continue; - } - fX = floor(1000 * abs(i - center.x)); - if (!cacheLanc[fX]) { - cacheLanc[fX] = { }; - } - for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { - if (j < 0 || j >= oH) { - continue; - } - fY = floor(1000 * abs(j - center.y)); - if (!cacheLanc[fX][fY]) { - cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); - } - weight = cacheLanc[fX][fY]; - if (weight > 0) { - idx = (j * oW + i) * 4; - a += weight; - red += weight * srcData[idx]; - green += weight * srcData[idx + 1]; - blue += weight * srcData[idx + 2]; - alpha += weight * srcData[idx + 3]; - } - } - } - idx = (v * dW + u) * 4; - destData[idx] = red / a; - destData[idx + 1] = green / a; - destData[idx + 2] = blue / a; - destData[idx + 3] = alpha / a; + else if (this.resizeType === 'lanczos') { + newData = this.lanczosResize(options, oW, oH, dW, dH); } + options.imageData = newData; + }, - if (++u < dW) { - return process(u); + /** + * Filter sliceByTwo + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + sliceByTwo: function(options, oW, oH, dW, dH) { + var imageData = options.imageData, + mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, + stepH = oH * mult, resources = fabric.filterBackend.resources, + tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; + if (!resources.sliceByTwo) { + resources.sliceByTwo = document.createElement('canvas'); + } + tmpCanvas = resources.sliceByTwo; + if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { + tmpCanvas.width = oW * 1.5; + tmpCanvas.height = oH; + } + ctx = tmpCanvas.getContext('2d'); + ctx.clearRect(0, 0, oW * 1.5, oH); + ctx.putImageData(imageData, 0, 0); + + dW = floor(dW); + dH = floor(dH); + + while (!doneW || !doneH) { + oW = stepW; + oH = stepH; + if (dW < floor(stepW * mult)) { + stepW = floor(stepW * mult); + } + else { + stepW = dW; + doneW = true; + } + if (dH < floor(stepH * mult)) { + stepH = floor(stepH * mult); + } + else { + stepH = dH; + doneH = true; + } + ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); + sX = dX; + sY = dY; + dY += stepH; } - else { - return destImg; - } - } - - var srcData = options.imageData.data, - destImg = options.ctx.createImageData(dW, dH), - destData = destImg.data, - lanczos = this.lanczosCreate(this.lanczosLobes), - ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, - rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, - range2X = ceil(ratioX * this.lanczosLobes / 2), - range2Y = ceil(ratioY * this.lanczosLobes / 2), - cacheLanc = { }, center = { }, icenter = { }; - - return process(0); - }, - - /** - * bilinearFiltering - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - bilinearFiltering: function(options, oW, oH, dW, dH) { - var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, - color, offset = 0, origPix, ratioX = this.rcpScaleX, - ratioY = this.rcpScaleY, - w4 = 4 * (oW - 1), img = options.imageData, - pixels = img.data, destImage = options.ctx.createImageData(dW, dH), - destPixels = destImage.data; - for (i = 0; i < dH; i++) { - for (j = 0; j < dW; j++) { - x = floor(ratioX * j); - y = floor(ratioY * i); - xDiff = ratioX * j - x; - yDiff = ratioY * i - y; - origPix = 4 * (y * oW + x); - - for (chnl = 0; chnl < 4; chnl++) { - a = pixels[origPix + chnl]; - b = pixels[origPix + 4 + chnl]; - c = pixels[origPix + w4 + chnl]; - d = pixels[origPix + w4 + 4 + chnl]; - color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + - c * yDiff * (1 - xDiff) + d * xDiff * yDiff; - destPixels[offset++] = color; - } - } - } - return destImage; - }, - - /** - * hermiteFastResize - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - hermiteFastResize: function(options, oW, oH, dW, dH) { - var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, - ratioWHalf = ceil(ratioW / 2), - ratioHHalf = ceil(ratioH / 2), - img = options.imageData, data = img.data, - img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; - for (var j = 0; j < dH; j++) { - for (var i = 0; i < dW; i++) { - var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, - gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; - for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { - var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, - centerX = (i + 0.5) * ratioW, w0 = dy * dy; - for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { - var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, - w = sqrt(w0 + dx * dx); - /* eslint-disable max-depth */ - if (w > 1 && w < -1) { + return ctx.getImageData(sX, sY, dW, dH); + }, + + /** + * Filter lanczosResize + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + lanczosResize: function(options, oW, oH, dW, dH) { + + function process(u) { + var v, i, weight, idx, a, red, green, + blue, alpha, fX, fY; + center.x = (u + 0.5) * ratioX; + icenter.x = floor(center.x); + for (v = 0; v < dH; v++) { + center.y = (v + 0.5) * ratioY; + icenter.y = floor(center.y); + a = 0; red = 0; green = 0; blue = 0; alpha = 0; + for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { + if (i < 0 || i >= oW) { continue; } - //hermite filter - weight = 2 * w * w * w - 3 * w * w + 1; - if (weight > 0) { - dx = 4 * (xx + yy * oW); - //alpha - gxA += weight * data[dx + 3]; - weightsAlpha += weight; - //colors - if (data[dx + 3] < 255) { - weight = weight * data[dx + 3] / 250; + fX = floor(1000 * abs(i - center.x)); + if (!cacheLanc[fX]) { + cacheLanc[fX] = { }; + } + for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { + if (j < 0 || j >= oH) { + continue; + } + fY = floor(1000 * abs(j - center.y)); + if (!cacheLanc[fX][fY]) { + cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); + } + weight = cacheLanc[fX][fY]; + if (weight > 0) { + idx = (j * oW + i) * 4; + a += weight; + red += weight * srcData[idx]; + green += weight * srcData[idx + 1]; + blue += weight * srcData[idx + 2]; + alpha += weight * srcData[idx + 3]; } - gxR += weight * data[dx]; - gxG += weight * data[dx + 1]; - gxB += weight * data[dx + 2]; - weights += weight; } - /* eslint-enable max-depth */ } + idx = (v * dW + u) * 4; + destData[idx] = red / a; + destData[idx + 1] = green / a; + destData[idx + 2] = blue / a; + destData[idx + 3] = alpha / a; } - data2[x2] = gxR / weights; - data2[x2 + 1] = gxG / weights; - data2[x2 + 2] = gxB / weights; - data2[x2 + 3] = gxA / weightsAlpha; - } - } - return img2; - }, - - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - scaleX: this.scaleX, - scaleY: this.scaleY, - resizeType: this.resizeType, - lanczosLobes: this.lanczosLobes - }; - } - }); - - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {Function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Resize} Instance of fabric.Image.filters.Resize - */ - fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; -})(typeof exports !== 'undefined' ? exports : this); - - -(function(global) { - - 'use strict'; - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + if (++u < dW) { + return process(u); + } + else { + return destImg; + } + } - /** - * Contrast filter class - * @class fabric.Image.filters.Contrast - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Contrast({ - * contrast: 0.25 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { + var srcData = options.imageData.data, + destImg = options.ctx.createImageData(dW, dH), + destData = destImg.data, + lanczos = this.lanczosCreate(this.lanczosLobes), + ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, + rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, + range2X = ceil(ratioX * this.lanczosLobes / 2), + range2Y = ceil(ratioY * this.lanczosLobes / 2), + cacheLanc = { }, center = { }, icenter = { }; - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Contrast', + return process(0); + }, - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uContrast;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + - 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + - 'gl_FragColor = color;\n' + - '}', + /** + * bilinearFiltering + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + bilinearFiltering: function(options, oW, oH, dW, dH) { + var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, + color, offset = 0, origPix, ratioX = this.rcpScaleX, + ratioY = this.rcpScaleY, + w4 = 4 * (oW - 1), img = options.imageData, + pixels = img.data, destImage = options.ctx.createImageData(dW, dH), + destPixels = destImage.data; + for (i = 0; i < dH; i++) { + for (j = 0; j < dW; j++) { + x = floor(ratioX * j); + y = floor(ratioY * i); + xDiff = ratioX * j - x; + yDiff = ratioY * i - y; + origPix = 4 * (y * oW + x); + + for (chnl = 0; chnl < 4; chnl++) { + a = pixels[origPix + chnl]; + b = pixels[origPix + 4 + chnl]; + c = pixels[origPix + w4 + chnl]; + d = pixels[origPix + w4 + 4 + chnl]; + color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + + c * yDiff * (1 - xDiff) + d * xDiff * yDiff; + destPixels[offset++] = color; + } + } + } + return destImage; + }, - /** - * contrast value, range from -1 to 1. - * @param {Number} contrast - * @default 0 - */ - contrast: 0, + /** + * hermiteFastResize + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + hermiteFastResize: function(options, oW, oH, dW, dH) { + var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, + ratioWHalf = ceil(ratioW / 2), + ratioHHalf = ceil(ratioH / 2), + img = options.imageData, data = img.data, + img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; + for (var j = 0; j < dH; j++) { + for (var i = 0; i < dW; i++) { + var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, + gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; + for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { + var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, + centerX = (i + 0.5) * ratioW, w0 = dy * dy; + for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { + var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, + w = sqrt(w0 + dx * dx); + /* eslint-disable max-depth */ + if (w > 1 && w < -1) { + continue; + } + //hermite filter + weight = 2 * w * w * w - 3 * w * w + 1; + if (weight > 0) { + dx = 4 * (xx + yy * oW); + //alpha + gxA += weight * data[dx + 3]; + weightsAlpha += weight; + //colors + if (data[dx + 3] < 255) { + weight = weight * data[dx + 3] / 250; + } + gxR += weight * data[dx]; + gxG += weight * data[dx + 1]; + gxB += weight * data[dx + 2]; + weights += weight; + } + /* eslint-enable max-depth */ + } + } + data2[x2] = gxR / weights; + data2[x2 + 1] = gxG / weights; + data2[x2 + 2] = gxB / weights; + data2[x2 + 3] = gxA / weightsAlpha; + } + } + return img2; + }, - mainParameter: 'contrast', + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + scaleX: this.scaleX, + scaleY: this.scaleY, + resizeType: this.resizeType, + lanczosLobes: this.lanczosLobes + }; + } + }); /** - * Constructor - * @memberOf fabric.Image.filters.Contrast.prototype - * @param {Object} [options] Options object - * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ + fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Apply the Contrast operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - if (this.contrast === 0) { - return; - } - var imageData = options.imageData, i, len, - data = imageData.data, len = data.length, - contrast = Math.floor(this.contrast * 255), - contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); + })(typeof exports !== 'undefined' ? exports : window); - for (i = 0; i < len; i += 4) { - data[i] = contrastF * (data[i] - 128) + 128; - data[i + 1] = contrastF * (data[i + 1] - 128) + 128; - data[i + 2] = contrastF * (data[i + 2] - 128) + 128; - } - }, + (function(global) { - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uContrast: gl.getUniformLocation(program, 'uContrast'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Contrast filter class + * @class fabric.Image.filters.Contrast + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Contrast({ + * contrast: 0.25 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uContrast, this.contrast); - }, - }); + filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Contrast} Instance of fabric.Image.filters.Contrast - */ - fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Contrast', -})(typeof exports !== 'undefined' ? exports : this); + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uContrast;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + + 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + + 'gl_FragColor = color;\n' + + '}', + /** + * contrast value, range from -1 to 1. + * @param {Number} contrast + * @default 0 + */ + contrast: 0, -(function(global) { + mainParameter: 'contrast', - 'use strict'; + /** + * Constructor + * @memberOf fabric.Image.filters.Contrast.prototype + * @param {Object} [options] Options object + * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) + */ - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Apply the Contrast operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + if (this.contrast === 0) { + return; + } + var imageData = options.imageData, i, len, + data = imageData.data, len = data.length, + contrast = Math.floor(this.contrast * 255), + contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); - /** - * Saturate filter class - * @class fabric.Image.filters.Saturation - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Saturation#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Saturation({ - * saturation: 1 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { + for (i = 0; i < len; i += 4) { + data[i] = contrastF * (data[i] - 128) + 128; + data[i + 1] = contrastF * (data[i + 1] - 128) + 128; + data[i + 2] = contrastF * (data[i + 2] - 128) + 128; + } + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Saturation', - - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uSaturation;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float rgMax = max(color.r, color.g);\n' + - 'float rgbMax = max(rgMax, color.b);\n' + - 'color.r += rgbMax != color.r ? (rgbMax - color.r) * uSaturation : 0.00;\n' + - 'color.g += rgbMax != color.g ? (rgbMax - color.g) * uSaturation : 0.00;\n' + - 'color.b += rgbMax != color.b ? (rgbMax - color.b) * uSaturation : 0.00;\n' + - 'gl_FragColor = color;\n' + - '}', - - /** - * Saturation value, from -1 to 1. - * Increases/decreases the color saturation. - * A value of 0 has no effect. - * - * @param {Number} saturation - * @default - */ - saturation: 0, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uContrast: gl.getUniformLocation(program, 'uContrast'), + }; + }, - mainParameter: 'saturation', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uContrast, this.contrast); + }, + }); /** - * Constructor - * @memberOf fabric.Image.filters.Saturate.prototype - * @param {Object} [options] Options object - * @param {Number} [options.saturate=0] Value to saturate the image (-1...1) + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ + fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Apply the Saturation operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.saturation === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.saturation, i, max; + })(typeof exports !== 'undefined' ? exports : window); - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; - } - }, + (function(global) { - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uSaturation: gl.getUniformLocation(program, 'uSaturation'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Saturate filter class + * @class fabric.Image.filters.Saturation + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Saturation#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Saturation({ + * saturation: 1 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uSaturation, -this.saturation); - }, - }); + filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {Function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Saturation} Instance of fabric.Image.filters.Saturate - */ - fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Saturation', -})(typeof exports !== 'undefined' ? exports : this); + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uSaturation;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float rgMax = max(color.r, color.g);\n' + + 'float rgbMax = max(rgMax, color.b);\n' + + 'color.r += rgbMax != color.r ? (rgbMax - color.r) * uSaturation : 0.00;\n' + + 'color.g += rgbMax != color.g ? (rgbMax - color.g) * uSaturation : 0.00;\n' + + 'color.b += rgbMax != color.b ? (rgbMax - color.b) * uSaturation : 0.00;\n' + + 'gl_FragColor = color;\n' + + '}', + /** + * Saturation value, from -1 to 1. + * Increases/decreases the color saturation. + * A value of 0 has no effect. + * + * @param {Number} saturation + * @default + */ + saturation: 0, -(function(global) { + mainParameter: 'saturation', - 'use strict'; + /** + * Constructor + * @memberOf fabric.Image.filters.Saturate.prototype + * @param {Object} [options] Options object + * @param {Number} [options.saturate=0] Value to saturate the image (-1...1) + */ - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Apply the Saturation operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.saturation === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.saturation, i, max; - /** - * Vibrance filter class - * @class fabric.Image.filters.Vibrance - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Vibrance#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Vibrance({ - * vibrance: 1 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; + } + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Vibrance', - - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uVibrance;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float max = max(color.r, max(color.g, color.b));\n' + - 'float avg = (color.r + color.g + color.b) / 3.0;\n' + - 'float amt = (abs(max - avg) * 2.0) * uVibrance;\n' + - 'color.r += max != color.r ? (max - color.r) * amt : 0.00;\n' + - 'color.g += max != color.g ? (max - color.g) * amt : 0.00;\n' + - 'color.b += max != color.b ? (max - color.b) * amt : 0.00;\n' + - 'gl_FragColor = color;\n' + - '}', - - /** - * Vibrance value, from -1 to 1. - * Increases/decreases the saturation of more muted colors with less effect on saturated colors. - * A value of 0 has no effect. - * - * @param {Number} vibrance - * @default - */ - vibrance: 0, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uSaturation: gl.getUniformLocation(program, 'uSaturation'), + }; + }, - mainParameter: 'vibrance', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uSaturation, -this.saturation); + }, + }); /** - * Constructor - * @memberOf fabric.Image.filters.Vibrance.prototype - * @param {Object} [options] Options object - * @param {Number} [options.vibrance=0] Vibrance value for the image (between -1 and 1) + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ + fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.vibrance === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.vibrance, i, max, avg, amt; + })(typeof exports !== 'undefined' ? exports : window); - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - avg = (data[i] + data[i + 1] + data[i + 2]) / 3; - amt = ((Math.abs(max - avg) * 2 / 255) * adjust); - data[i] += max !== data[i] ? (max - data[i]) * amt : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; - } - }, + (function(global) { - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uVibrance: gl.getUniformLocation(program, 'uVibrance'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Vibrance filter class + * @class fabric.Image.filters.Vibrance + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Vibrance#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Vibrance({ + * vibrance: 1 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); - }, - }); + filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {Function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Vibrance} Instance of fabric.Image.filters.Vibrance - */ - fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Vibrance', -})(typeof exports !== 'undefined' ? exports : this); + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uVibrance;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float max = max(color.r, max(color.g, color.b));\n' + + 'float avg = (color.r + color.g + color.b) / 3.0;\n' + + 'float amt = (abs(max - avg) * 2.0) * uVibrance;\n' + + 'color.r += max != color.r ? (max - color.r) * amt : 0.00;\n' + + 'color.g += max != color.g ? (max - color.g) * amt : 0.00;\n' + + 'color.b += max != color.b ? (max - color.b) * amt : 0.00;\n' + + 'gl_FragColor = color;\n' + + '}', + /** + * Vibrance value, from -1 to 1. + * Increases/decreases the saturation of more muted colors with less effect on saturated colors. + * A value of 0 has no effect. + * + * @param {Number} vibrance + * @default + */ + vibrance: 0, -(function(global) { + mainParameter: 'vibrance', - 'use strict'; + /** + * Constructor + * @memberOf fabric.Image.filters.Vibrance.prototype + * @param {Object} [options] Options object + * @param {Number} [options.vibrance=0] Vibrance value for the image (between -1 and 1) + */ - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.vibrance === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.vibrance, i, max, avg, amt; - /** - * Blur filter class - * @class fabric.Image.filters.Blur - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Blur({ - * blur: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + amt = ((Math.abs(max - avg) * 2 / 255) * adjust); + data[i] += max !== data[i] ? (max - data[i]) * amt : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; + } + }, - type: 'Blur', + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uVibrance: gl.getUniformLocation(program, 'uVibrance'), + }; + }, - /* -'gl_FragColor = vec4(0.0);', -'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;', -'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;', -'gl_FragColor += texture2D(texture, vTexCoord + -5 * uDelta)*0.0215963866053;', -'gl_FragColor += texture2D(texture, vTexCoord + -4 * uDelta)*0.0443683338718;', -'gl_FragColor += texture2D(texture, vTexCoord + -3 * uDelta)*0.0776744219933;', -'gl_FragColor += texture2D(texture, vTexCoord + -2 * uDelta)*0.115876621105;', -'gl_FragColor += texture2D(texture, vTexCoord + -1 * uDelta)*0.147308056121;', -'gl_FragColor += texture2D(texture, vTexCoord )*0.159576912161;', -'gl_FragColor += texture2D(texture, vTexCoord + 1 * uDelta)*0.147308056121;', -'gl_FragColor += texture2D(texture, vTexCoord + 2 * uDelta)*0.115876621105;', -'gl_FragColor += texture2D(texture, vTexCoord + 3 * uDelta)*0.0776744219933;', -'gl_FragColor += texture2D(texture, vTexCoord + 4 * uDelta)*0.0443683338718;', -'gl_FragColor += texture2D(texture, vTexCoord + 5 * uDelta)*0.0215963866053;', -'gl_FragColor += texture2D(texture, vTexCoord + 6 * uDelta)*0.00895781211794;', -'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;', -*/ - - /* eslint-disable max-len */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec2 uDelta;\n' + - 'varying vec2 vTexCoord;\n' + - 'const float nSamples = 15.0;\n' + - 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + - 'float random(vec3 scale) {\n' + - /* use the fragment position for a different seed per-pixel */ - 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + - '}\n' + - 'void main() {\n' + - 'vec4 color = vec4(0.0);\n' + - 'float total = 0.0;\n' + - 'float offset = random(v3offset);\n' + - 'for (float t = -nSamples; t <= nSamples; t++) {\n' + - 'float percent = (t + offset - 0.5) / nSamples;\n' + - 'float weight = 1.0 - abs(percent);\n' + - 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + - 'total += weight;\n' + - '}\n' + - 'gl_FragColor = color / total;\n' + - '}', - /* eslint-enable max-len */ + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); + }, + }); /** - * blur value, in percentage of image dimensions. - * specific to keep the image blur constant at different resolutions - * range between 0 and 1. - * @type Number - * @default + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - blur: 0, + fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; - mainParameter: 'blur', + })(typeof exports !== 'undefined' ? exports : window); - applyTo: function(options) { - if (options.webgl) { - // this aspectRatio is used to give the same blur to vertical and horizontal - this.aspectRatio = options.sourceWidth / options.sourceHeight; - options.passes++; - this._setupFrameBuffer(options); - this.horizontal = true; - this.applyToWebGL(options); - this._swapTextures(options); - this._setupFrameBuffer(options); - this.horizontal = false; - this.applyToWebGL(options); - this._swapTextures(options); - } - else { - this.applyTo2d(options); - } - }, - - applyTo2d: function(options) { - // paint canvasEl with current image data. - //options.ctx.putImageData(options.imageData, 0, 0); - options.imageData = this.simpleBlur(options); - }, - - simpleBlur: function(options) { - var resources = options.filterBackend.resources, canvas1, canvas2, - width = options.imageData.width, - height = options.imageData.height; - - if (!resources.blurLayer1) { - resources.blurLayer1 = fabric.util.createCanvasElement(); - resources.blurLayer2 = fabric.util.createCanvasElement(); - } - canvas1 = resources.blurLayer1; - canvas2 = resources.blurLayer2; - if (canvas1.width !== width || canvas1.height !== height) { - canvas2.width = canvas1.width = width; - canvas2.height = canvas1.height = height; - } - var ctx1 = canvas1.getContext('2d'), - ctx2 = canvas2.getContext('2d'), - nSamples = 15, - random, percent, j, i, - blur = this.blur * 0.06 * 0.5; - - // load first canvas - ctx1.putImageData(options.imageData, 0, 0); - ctx2.clearRect(0, 0, width, height); - - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * width + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, j, random); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * height + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, random, j); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - options.ctx.drawImage(canvas1, 0, 0); - var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); - ctx1.globalAlpha = 1; - ctx1.clearRect(0, 0, canvas1.width, canvas1.height); - return newImageData; - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - delta: gl.getUniformLocation(program, 'uDelta'), - }; - }, + (function(global) { - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var delta = this.chooseRightDelta(); - gl.uniform2fv(uniformLocations.delta, delta); - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * choose right value of image percentage to blur with - * @returns {Array} a numeric array with delta values - */ - chooseRightDelta: function() { - var blurScale = 1, delta = [0, 0], blur; - if (this.horizontal) { - if (this.aspectRatio > 1) { - // image is wide, i want to shrink radius horizontal - blurScale = 1 / this.aspectRatio; - } - } - else { - if (this.aspectRatio < 1) { - // image is tall, i want to shrink radius vertical - blurScale = this.aspectRatio; - } - } - blur = blurScale * this.blur * 0.12; - if (this.horizontal) { - delta[0] = blur; - } - else { - delta[1] = blur; - } - return delta; - }, - }); - - /** - * Deserialize a JSON definition of a BlurFilter into a concrete instance. - */ - filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; - -})(typeof exports !== 'undefined' ? exports : this); - + * Blur filter class + * @class fabric.Image.filters.Blur + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Blur({ + * blur: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { + + type: 'Blur', + + /* + 'gl_FragColor = vec4(0.0);', + 'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;', + 'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;', + 'gl_FragColor += texture2D(texture, vTexCoord + -5 * uDelta)*0.0215963866053;', + 'gl_FragColor += texture2D(texture, vTexCoord + -4 * uDelta)*0.0443683338718;', + 'gl_FragColor += texture2D(texture, vTexCoord + -3 * uDelta)*0.0776744219933;', + 'gl_FragColor += texture2D(texture, vTexCoord + -2 * uDelta)*0.115876621105;', + 'gl_FragColor += texture2D(texture, vTexCoord + -1 * uDelta)*0.147308056121;', + 'gl_FragColor += texture2D(texture, vTexCoord )*0.159576912161;', + 'gl_FragColor += texture2D(texture, vTexCoord + 1 * uDelta)*0.147308056121;', + 'gl_FragColor += texture2D(texture, vTexCoord + 2 * uDelta)*0.115876621105;', + 'gl_FragColor += texture2D(texture, vTexCoord + 3 * uDelta)*0.0776744219933;', + 'gl_FragColor += texture2D(texture, vTexCoord + 4 * uDelta)*0.0443683338718;', + 'gl_FragColor += texture2D(texture, vTexCoord + 5 * uDelta)*0.0215963866053;', + 'gl_FragColor += texture2D(texture, vTexCoord + 6 * uDelta)*0.00895781211794;', + 'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;', + */ -(function(global) { + /* eslint-disable max-len */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n' + + 'const float nSamples = 15.0;\n' + + 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + + 'float random(vec3 scale) {\n' + + /* use the fragment position for a different seed per-pixel */ + 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + + '}\n' + + 'void main() {\n' + + 'vec4 color = vec4(0.0);\n' + + 'float total = 0.0;\n' + + 'float offset = random(v3offset);\n' + + 'for (float t = -nSamples; t <= nSamples; t++) {\n' + + 'float percent = (t + offset - 0.5) / nSamples;\n' + + 'float weight = 1.0 - abs(percent);\n' + + 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + + 'total += weight;\n' + + '}\n' + + 'gl_FragColor = color / total;\n' + + '}', + /* eslint-enable max-len */ - 'use strict'; + /** + * blur value, in percentage of image dimensions. + * specific to keep the image blur constant at different resolutions + * range between 0 and 1. + * @type Number + * @default + */ + blur: 0, + + mainParameter: 'blur', + + applyTo: function(options) { + if (options.webgl) { + // this aspectRatio is used to give the same blur to vertical and horizontal + this.aspectRatio = options.sourceWidth / options.sourceHeight; + options.passes++; + this._setupFrameBuffer(options); + this.horizontal = true; + this.applyToWebGL(options); + this._swapTextures(options); + this._setupFrameBuffer(options); + this.horizontal = false; + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + applyTo2d: function(options) { + // paint canvasEl with current image data. + //options.ctx.putImageData(options.imageData, 0, 0); + options.imageData = this.simpleBlur(options); + }, - /** - * Gamma filter class - * @class fabric.Image.filters.Gamma - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Gamma({ - * gamma: [1, 0.5, 2.1] - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { + simpleBlur: function(options) { + var resources = options.filterBackend.resources, canvas1, canvas2, + width = options.imageData.width, + height = options.imageData.height; + + if (!resources.blurLayer1) { + resources.blurLayer1 = fabric.util.createCanvasElement(); + resources.blurLayer2 = fabric.util.createCanvasElement(); + } + canvas1 = resources.blurLayer1; + canvas2 = resources.blurLayer2; + if (canvas1.width !== width || canvas1.height !== height) { + canvas2.width = canvas1.width = width; + canvas2.height = canvas1.height = height; + } + var ctx1 = canvas1.getContext('2d'), + ctx2 = canvas2.getContext('2d'), + nSamples = 15, + random, percent, j, i, + blur = this.blur * 0.06 * 0.5; + + // load first canvas + ctx1.putImageData(options.imageData, 0, 0); + ctx2.clearRect(0, 0, width, height); + + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * width + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, j, random); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * height + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, random, j); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + options.ctx.drawImage(canvas1, 0, 0); + var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); + ctx1.globalAlpha = 1; + ctx1.clearRect(0, 0, canvas1.width, canvas1.height); + return newImageData; + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Gamma', - - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec3 uGamma;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec3 correction = (1.0 / uGamma);\n' + - 'color.r = pow(color.r, correction.r);\n' + - 'color.g = pow(color.g, correction.g);\n' + - 'color.b = pow(color.b, correction.b);\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.rgb *= color.a;\n' + - '}', - - /** - * Gamma array value, from 0.01 to 2.2. - * @param {Array} gamma - * @default - */ - gamma: [1, 1, 1], + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + delta: gl.getUniformLocation(program, 'uDelta'), + }; + }, - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'gamma', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var delta = this.chooseRightDelta(); + gl.uniform2fv(uniformLocations.delta, delta); + }, - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.gamma = [1, 1, 1]; - filters.BaseFilter.prototype.initialize.call(this, options); - }, + /** + * choose right value of image percentage to blur with + * @returns {Array} a numeric array with delta values + */ + chooseRightDelta: function() { + var blurScale = 1, delta = [0, 0], blur; + if (this.horizontal) { + if (this.aspectRatio > 1) { + // image is wide, i want to shrink radius horizontal + blurScale = 1 / this.aspectRatio; + } + } + else { + if (this.aspectRatio < 1) { + // image is tall, i want to shrink radius vertical + blurScale = this.aspectRatio; + } + } + blur = blurScale * this.blur * 0.12; + if (this.horizontal) { + delta[0] = blur; + } + else { + delta[1] = blur; + } + return delta; + }, + }); /** - * Apply the Gamma operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - applyTo2d: function(options) { - var imageData = options.imageData, data = imageData.data, - gamma = this.gamma, len = data.length, - rInv = 1 / gamma[0], gInv = 1 / gamma[1], - bInv = 1 / gamma[2], i; + filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; - if (!this.rVals) { - // eslint-disable-next-line - this.rVals = new Uint8Array(256); - // eslint-disable-next-line - this.gVals = new Uint8Array(256); - // eslint-disable-next-line - this.bVals = new Uint8Array(256); - } + })(typeof exports !== 'undefined' ? exports : window); - // This is an optimization - pre-compute a look-up table for each color channel - // instead of performing these pow calls for each pixel in the image. - for (i = 0, len = 256; i < len; i++) { - this.rVals[i] = Math.pow(i / 255, rInv) * 255; - this.gVals[i] = Math.pow(i / 255, gInv) * 255; - this.bVals[i] = Math.pow(i / 255, bInv) * 255; - } - for (i = 0, len = data.length; i < len; i += 4) { - data[i] = this.rVals[data[i]]; - data[i + 1] = this.gVals[data[i + 1]]; - data[i + 2] = this.bVals[data[i + 2]]; - } - }, + (function(global) { - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uGamma: gl.getUniformLocation(program, 'uGamma'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Gamma filter class + * @class fabric.Image.filters.Gamma + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Gamma({ + * gamma: [1, 0.5, 2.1] + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform3fv(uniformLocations.uGamma, this.gamma); - }, - }); + filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.Gamma} Instance of fabric.Image.filters.Gamma - */ - fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Gamma', -})(typeof exports !== 'undefined' ? exports : this); + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec3 uGamma;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec3 correction = (1.0 / uGamma);\n' + + 'color.r = pow(color.r, correction.r);\n' + + 'color.g = pow(color.g, correction.g);\n' + + 'color.b = pow(color.b, correction.b);\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.rgb *= color.a;\n' + + '}', + /** + * Gamma array value, from 0.01 to 2.2. + * @param {Array} gamma + * @default + */ + gamma: [1, 1, 1], -(function(global) { + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'gamma', - 'use strict'; + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.gamma = [1, 1, 1]; + filters.BaseFilter.prototype.initialize.call(this, options); + }, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Apply the Gamma operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, data = imageData.data, + gamma = this.gamma, len = data.length, + rInv = 1 / gamma[0], gInv = 1 / gamma[1], + bInv = 1 / gamma[2], i; + + if (!this.rVals) { + // eslint-disable-next-line + this.rVals = new Uint8Array(256); + // eslint-disable-next-line + this.gVals = new Uint8Array(256); + // eslint-disable-next-line + this.bVals = new Uint8Array(256); + } + + // This is an optimization - pre-compute a look-up table for each color channel + // instead of performing these pow calls for each pixel in the image. + for (i = 0, len = 256; i < len; i++) { + this.rVals[i] = Math.pow(i / 255, rInv) * 255; + this.gVals[i] = Math.pow(i / 255, gInv) * 255; + this.bVals[i] = Math.pow(i / 255, bInv) * 255; + } + for (i = 0, len = data.length; i < len; i += 4) { + data[i] = this.rVals[data[i]]; + data[i + 1] = this.gVals[data[i + 1]]; + data[i + 2] = this.bVals[data[i + 2]]; + } + }, - /** - * A container class that knows how to apply a sequence of filters to an input image. - */ - filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uGamma: gl.getUniformLocation(program, 'uGamma'), + }; + }, - type: 'Composed', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform3fv(uniformLocations.uGamma, this.gamma); + }, + }); /** - * A non sparse array of filters to apply + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - subFilters: [], + fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.subFilters = this.subFilters.slice(0); - }, + })(typeof exports !== 'undefined' ? exports : window); - /** - * Apply this container's filters to the input image provided. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be applied. - */ - applyTo: function(options) { - options.passes += this.subFilters.length - 1; - this.subFilters.forEach(function(filter) { - filter.applyTo(options); - }); - }, + (function(global) { + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Serialize this filter into JSON. - * - * @returns {Object} A JSON representation of this filter. + * A container class that knows how to apply a sequence of filters to an input image. */ - toObject: function() { - return fabric.util.object.extend(this.callSuper('toObject'), { - subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), - }); - }, - - isNeutralState: function() { - return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); - } - }); + filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { - /** - * Deserialize a JSON definition of a ComposedFilter into a concrete instance. - */ - fabric.Image.filters.Composed.fromObject = function(object, callback) { - var filters = object.subFilters || [], - subFilters = filters.map(function(filter) { - return new fabric.Image.filters[filter.type](filter); - }), - instance = new fabric.Image.filters.Composed({ subFilters: subFilters }); - callback && callback(instance); - return instance; - }; -})(typeof exports !== 'undefined' ? exports : this); + type: 'Composed', + /** + * A non sparse array of filters to apply + */ + subFilters: [], -(function(global) { + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.subFilters = this.subFilters.slice(0); + }, - 'use strict'; + /** + * Apply this container's filters to the input image provided. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be applied. + */ + applyTo: function(options) { + options.passes += this.subFilters.length - 1; + this.subFilters.forEach(function(filter) { + filter.applyTo(options); + }); + }, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Serialize this filter into JSON. + * + * @returns {Object} A JSON representation of this filter. + */ + toObject: function() { + return fabric.util.object.extend(this.callSuper('toObject'), { + subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), + }); + }, - /** - * HueRotation filter class - * @class fabric.Image.filters.HueRotation - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.HueRotation#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.HueRotation({ - * rotation: -0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { + isNeutralState: function() { + return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); + } + }); /** - * Filter type - * @param {String} type - * @default + * Deserialize a JSON definition of a ComposedFilter into a concrete instance. */ - type: 'HueRotation', + fabric.Image.filters.Composed.fromObject = function(object) { + var filters = object.subFilters || []; + return Promise.all(filters.map(function(filter) { + return fabric.Image.filters[filter.type].fromObject(filter); + })).then(function(enlivedFilters) { + return new fabric.Image.filters.Composed({ subFilters: enlivedFilters }); + }); + }; + })(typeof exports !== 'undefined' ? exports : window); - /** - * HueRotation value, from -1 to 1. - * the unit is radians - * @param {Number} myParameter - * @default - */ - rotation: 0, + (function(global) { - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'rotation', + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - calculateMatrix: function() { - var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), - aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; - this.matrix = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ]; - this.matrix[0] = cos + OneMinusCos / 3; - this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[6] = cos + aThird * OneMinusCos; - this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[12] = cos + aThird * OneMinusCos; - }, - - /** - * HueRotation isNeutralState implementation - * Used only in image applyFilters to discard filters that will not have an effect - * on the image - * @param {Object} options - **/ - isNeutralState: function(options) { - this.calculateMatrix(); - return filters.BaseFilter.prototype.isNeutralState.call(this, options); - }, - - /** - * Apply this filter to the input image data provided. - * - * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + /** + * HueRotation filter class + * @class fabric.Image.filters.HueRotation + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.HueRotation#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.HueRotation({ + * rotation: -0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - applyTo: function(options) { - this.calculateMatrix(); - filters.BaseFilter.prototype.applyTo.call(this, options); - }, + filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { - }); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'HueRotation', - /** - * Returns filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @param {function} [callback] to be invoked after filter creation - * @return {fabric.Image.filters.HueRotation} Instance of fabric.Image.filters.HueRotation - */ - fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; + /** + * HueRotation value, from -1 to 1. + * the unit is radians + * @param {Number} myParameter + * @default + */ + rotation: 0, -})(typeof exports !== 'undefined' ? exports : this); + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'rotation', + + calculateMatrix: function() { + var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), + aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; + this.matrix = [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ]; + this.matrix[0] = cos + OneMinusCos / 3; + this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[6] = cos + aThird * OneMinusCos; + this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[12] = cos + aThird * OneMinusCos; + }, + /** + * HueRotation isNeutralState implementation + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * @param {Object} options + **/ + isNeutralState: function(options) { + this.calculateMatrix(); + return filters.BaseFilter.prototype.isNeutralState.call(this, options); + }, -(function(global) { + /** + * Apply this filter to the input image data provided. + * + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + this.calculateMatrix(); + filters.BaseFilter.prototype.applyTo.call(this, options); + }, - 'use strict'; + }); - var fabric = global.fabric || (global.fabric = { }), - clone = fabric.util.object.clone; + /** + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} + */ + fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - if (fabric.Text) { - fabric.warn('fabric.Text is already defined'); - return; - } + })(typeof exports !== 'undefined' ? exports : window); - var additionalProps = - ('fontFamily fontWeight fontSize text underline overline linethrough' + - ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + - ' direction path pathStartOffset pathSide pathAlign').split(' '); + (function(global) { + var fabric = global.fabric || (global.fabric = { }), + clone = fabric.util.object.clone; - /** - * Text class - * @class fabric.Text - * @extends fabric.Object - * @return {fabric.Text} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} - * @see {@link fabric.Text#initialize} for constructor definition - */ - fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { + var additionalProps = + ('fontFamily fontWeight fontSize text underline overline linethrough' + + ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + + ' direction path pathStartOffset pathSide pathAlign').split(' '); /** - * Properties which when set cause object to change dimensions - * @type Array - * @private + * Text class + * @class fabric.Text + * @extends fabric.Object + * @return {fabric.Text} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} + * @see {@link fabric.Text#initialize} for constructor definition */ - _dimensionAffectingProps: [ - 'fontSize', - 'fontWeight', - 'fontFamily', - 'fontStyle', - 'lineHeight', - 'text', - 'charSpacing', - 'textAlign', - 'styles', - 'path', - 'pathStartOffset', - 'pathSide', - 'pathAlign' - ], + fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { - /** - * @private - */ - _reNewline: /\r?\n/, + /** + * Properties which when set cause object to change dimensions + * @type Array + * @private + */ + _dimensionAffectingProps: [ + 'fontSize', + 'fontWeight', + 'fontFamily', + 'fontStyle', + 'lineHeight', + 'text', + 'charSpacing', + 'textAlign', + 'styles', + 'path', + 'pathStartOffset', + 'pathSide', + 'pathAlign' + ], - /** - * Use this regular expression to filter for whitespaces that is not a new line. - * Mostly used when text is 'justify' aligned. - * @private - */ - _reSpacesAndTabs: /[ \t\r]/g, + /** + * @private + */ + _reNewline: /\r?\n/, - /** - * Use this regular expression to filter for whitespace that is not a new line. - * Mostly used when text is 'justify' aligned. - * @private - */ - _reSpaceAndTab: /[ \t\r]/, + /** + * Use this regular expression to filter for whitespaces that is not a new line. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reSpacesAndTabs: /[ \t\r]/g, - /** - * Use this regular expression to filter consecutive groups of non spaces. - * Mostly used when text is 'justify' aligned. - * @private - */ - _reWords: /\S+/g, + /** + * Use this regular expression to filter for whitespace that is not a new line. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reSpaceAndTab: /[ \t\r]/, - /** - * Type of an object - * @type String - * @default - */ - type: 'text', + /** + * Use this regular expression to filter consecutive groups of non spaces. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reWords: /\S+/g, - /** - * Font size (in pixels) - * @type Number - * @default - */ - fontSize: 40, + /** + * Type of an object + * @type String + * @default + */ + type: 'text', - /** - * Font weight (e.g. bold, normal, 400, 600, 800) - * @type {(Number|String)} - * @default - */ - fontWeight: 'normal', + /** + * Font size (in pixels) + * @type Number + * @default + */ + fontSize: 40, - /** - * Font family - * @type String - * @default - */ - fontFamily: 'Times New Roman', + /** + * Font weight (e.g. bold, normal, 400, 600, 800) + * @type {(Number|String)} + * @default + */ + fontWeight: 'normal', - /** - * Text decoration underline. - * @type Boolean - * @default - */ - underline: false, + /** + * Font family + * @type String + * @default + */ + fontFamily: 'Times New Roman', - /** - * Text decoration overline. - * @type Boolean - * @default - */ - overline: false, + /** + * Text decoration underline. + * @type Boolean + * @default + */ + underline: false, - /** - * Text decoration linethrough. - * @type Boolean - * @default - */ - linethrough: false, + /** + * Text decoration overline. + * @type Boolean + * @default + */ + overline: false, - /** - * Text alignment. Possible values: "left", "center", "right", "justify", - * "justify-left", "justify-center" or "justify-right". - * @type String - * @default - */ - textAlign: 'left', + /** + * Text decoration linethrough. + * @type Boolean + * @default + */ + linethrough: false, - /** - * Font style . Possible values: "", "normal", "italic" or "oblique". - * @type String - * @default - */ - fontStyle: 'normal', + /** + * Text alignment. Possible values: "left", "center", "right", "justify", + * "justify-left", "justify-center" or "justify-right". + * @type String + * @default + */ + textAlign: 'left', - /** - * Line height - * @type Number - * @default - */ - lineHeight: 1.16, + /** + * Font style . Possible values: "", "normal", "italic" or "oblique". + * @type String + * @default + */ + fontStyle: 'normal', - /** - * Superscript schema object (minimum overlap) - * @type {Object} - * @default - */ - superscript: { - size: 0.60, // fontSize factor - baseline: -0.35 // baseline-shift factor (upwards) - }, + /** + * Line height + * @type Number + * @default + */ + lineHeight: 1.16, - /** - * Subscript schema object (minimum overlap) - * @type {Object} - * @default - */ - subscript: { - size: 0.60, // fontSize factor - baseline: 0.11 // baseline-shift factor (downwards) - }, + /** + * Superscript schema object (minimum overlap) + * @type {Object} + * @default + */ + superscript: { + size: 0.60, // fontSize factor + baseline: -0.35 // baseline-shift factor (upwards) + }, - /** - * Background color of text lines - * @type String - * @default - */ - textBackgroundColor: '', + /** + * Subscript schema object (minimum overlap) + * @type {Object} + * @default + */ + subscript: { + size: 0.60, // fontSize factor + baseline: 0.11 // baseline-shift factor (downwards) + }, - /** - * List of properties to consider when checking if - * state of an object is changed ({@link fabric.Object#hasStateChanged}) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), + /** + * Background color of text lines + * @type String + * @default + */ + textBackgroundColor: '', - /** - * List of properties to consider when checking if cache needs refresh - * @type Array - */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), + /** + * List of properties to consider when checking if + * state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), - /** - * When defined, an object is rendered via stroke and this property specifies its color. - * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 - * @type String - * @default - */ - stroke: null, + /** + * List of properties to consider when checking if cache needs refresh + * @type Array + */ + cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), - /** - * Shadow object representing shadow of this shape. - * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 - * @type fabric.Shadow - * @default - */ - shadow: null, + /** + * When defined, an object is rendered via stroke and this property specifies its color. + * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 + * @type String + * @default + */ + stroke: null, - /** - * fabric.Path that the text should follow. - * since 4.6.0 the path will be drawn automatically. - * if you want to make the path visible, give it a stroke and strokeWidth or fill value - * if you want it to be hidden, assign visible = false to the path. - * This feature is in BETA, and SVG import/export is not yet supported. - * @type fabric.Path - * @example - * var textPath = new fabric.Text('Text on a path', { - * top: 150, - * left: 150, - * textAlign: 'center', - * charSpacing: -50, - * path: new fabric.Path('M 0 0 C 50 -100 150 -100 200 0', { - * strokeWidth: 1, - * visible: false - * }), - * pathSide: 'left', - * pathStartOffset: 0 - * }); - * @default - */ - path: null, + /** + * Shadow object representing shadow of this shape. + * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 + * @type fabric.Shadow + * @default + */ + shadow: null, - /** - * Offset amount for text path starting position - * Only used when text has a path - * @type Number - * @default - */ - pathStartOffset: 0, + /** + * fabric.Path that the text should follow. + * since 4.6.0 the path will be drawn automatically. + * if you want to make the path visible, give it a stroke and strokeWidth or fill value + * if you want it to be hidden, assign visible = false to the path. + * This feature is in BETA, and SVG import/export is not yet supported. + * @type fabric.Path + * @example + * var textPath = new fabric.Text('Text on a path', { + * top: 150, + * left: 150, + * textAlign: 'center', + * charSpacing: -50, + * path: new fabric.Path('M 0 0 C 50 -100 150 -100 200 0', { + * strokeWidth: 1, + * visible: false + * }), + * pathSide: 'left', + * pathStartOffset: 0 + * }); + * @default + */ + path: null, - /** - * Which side of the path the text should be drawn on. - * Only used when text has a path - * @type {String} 'left|right' - * @default - */ - pathSide: 'left', + /** + * Offset amount for text path starting position + * Only used when text has a path + * @type Number + * @default + */ + pathStartOffset: 0, - /** - * How text is aligned to the path. This property determines - * the perpendicular position of each character relative to the path. - * (one of "baseline", "center", "ascender", "descender") - * This feature is in BETA, and its behavior may change - * @type String - * @default - */ - pathAlign: 'baseline', + /** + * Which side of the path the text should be drawn on. + * Only used when text has a path + * @type {String} 'left|right' + * @default + */ + pathSide: 'left', - /** - * @private - */ - _fontSizeFraction: 0.222, + /** + * How text is aligned to the path. This property determines + * the perpendicular position of each character relative to the path. + * (one of "baseline", "center", "ascender", "descender") + * This feature is in BETA, and its behavior may change + * @type String + * @default + */ + pathAlign: 'baseline', - /** - * @private - */ - offsets: { - underline: 0.10, - linethrough: -0.315, - overline: -0.88 - }, + /** + * @private + */ + _fontSizeFraction: 0.222, - /** - * Text Line proportion to font Size (in pixels) - * @type Number - * @default - */ - _fontSizeMult: 1.13, + /** + * @private + */ + offsets: { + underline: 0.10, + linethrough: -0.315, + overline: -0.88 + }, - /** - * additional space between characters - * expressed in thousands of em unit - * @type Number - * @default - */ - charSpacing: 0, + /** + * Text Line proportion to font Size (in pixels) + * @type Number + * @default + */ + _fontSizeMult: 1.13, - /** - * Object containing character styles - top-level properties -> line numbers, - * 2nd-level properties - character numbers - * @type Object - * @default - */ - styles: null, + /** + * additional space between characters + * expressed in thousands of em unit + * @type Number + * @default + */ + charSpacing: 0, - /** - * Reference to a context to measure text char or couple of chars - * the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas - * once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every - * text object created. - * @type {CanvasRenderingContext2D} - * @default - */ - _measuringContext: null, + /** + * Object containing character styles - top-level properties -> line numbers, + * 2nd-level properties - character numbers + * @type Object + * @default + */ + styles: null, - /** - * Baseline shift, styles only, keep at 0 for the main text object - * @type {Number} - * @default - */ - deltaY: 0, + /** + * Reference to a context to measure text char or couple of chars + * the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas + * once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every + * text object created. + * @type {CanvasRenderingContext2D} + * @default + */ + _measuringContext: null, - /** - * WARNING: EXPERIMENTAL. NOT SUPPORTED YET - * determine the direction of the text. - * This has to be set manually together with textAlign and originX for proper - * experience. - * some interesting link for the future - * https://www.w3.org/International/questions/qa-bidi-unicode-controls - * @since 4.5.0 - * @type {String} 'ltr|rtl' - * @default - */ - direction: 'ltr', + /** + * Baseline shift, styles only, keep at 0 for the main text object + * @type {Number} + * @default + */ + deltaY: 0, - /** - * Array of properties that define a style unit (of 'styles'). - * @type {Array} - * @default - */ - _styleProperties: [ - 'stroke', - 'strokeWidth', - 'fill', - 'fontFamily', - 'fontSize', - 'fontWeight', - 'fontStyle', - 'underline', - 'overline', - 'linethrough', - 'deltaY', - 'textBackgroundColor', - ], + /** + * WARNING: EXPERIMENTAL. NOT SUPPORTED YET + * determine the direction of the text. + * This has to be set manually together with textAlign and originX for proper + * experience. + * some interesting link for the future + * https://www.w3.org/International/questions/qa-bidi-unicode-controls + * @since 4.5.0 + * @type {String} 'ltr|rtl' + * @default + */ + direction: 'ltr', - /** - * contains characters bounding boxes - */ - __charBounds: [], + /** + * Array of properties that define a style unit (of 'styles'). + * @type {Array} + * @default + */ + _styleProperties: [ + 'stroke', + 'strokeWidth', + 'fill', + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'underline', + 'overline', + 'linethrough', + 'deltaY', + 'textBackgroundColor', + ], - /** - * use this size when measuring text. To avoid IE11 rounding errors - * @type {Number} - * @default - * @readonly - * @private - */ - CACHE_FONT_SIZE: 400, + /** + * contains characters bounding boxes + */ + __charBounds: [], - /** - * contains the min text width to avoid getting 0 - * @type {Number} - * @default - */ - MIN_TEXT_WIDTH: 2, + /** + * use this size when measuring text. To avoid IE11 rounding errors + * @type {Number} + * @default + * @readonly + * @private + */ + CACHE_FONT_SIZE: 400, - /** - * Constructor - * @param {String} text Text string - * @param {Object} [options] Options object - * @return {fabric.Text} thisArg - */ - initialize: function(text, options) { - this.styles = options ? (options.styles || { }) : { }; - this.text = text; - this.__skipDimension = true; - this.callSuper('initialize', options); - if (this.path) { - this.setPathInfo(); - } - this.__skipDimension = false; - this.initDimensions(); - this.setCoords(); - this.setupState({ propertySet: '_dimensionAffectingProps' }); - }, + /** + * contains the min text width to avoid getting 0 + * @type {Number} + * @default + */ + MIN_TEXT_WIDTH: 2, - /** - * If text has a path, it will add the extra information needed - * for path and text calculations - * @return {fabric.Text} thisArg - */ - setPathInfo: function() { - var path = this.path; - if (path) { - path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); - } - }, + /** + * Constructor + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.Text} thisArg + */ + initialize: function(text, options) { + this.styles = options ? (options.styles || { }) : { }; + this.text = text; + this.__skipDimension = true; + this.callSuper('initialize', options); + if (this.path) { + this.setPathInfo(); + } + this.__skipDimension = false; + this.initDimensions(); + this.setCoords(); + this.setupState({ propertySet: '_dimensionAffectingProps' }); + }, - /** - * Return a context for measurement of text string. - * if created it gets stored for reuse - * this is for internal use, please do not use it - * @private - * @param {String} text Text string - * @param {Object} [options] Options object - * @return {fabric.Text} thisArg - */ - getMeasuringContext: function() { - // if we did not return we have to measure something. - if (!fabric._measuringContext) { - fabric._measuringContext = this.canvas && this.canvas.contextCache || - fabric.util.createCanvasElement().getContext('2d'); - } - return fabric._measuringContext; - }, + /** + * If text has a path, it will add the extra information needed + * for path and text calculations + * @return {fabric.Text} thisArg + */ + setPathInfo: function() { + var path = this.path; + if (path) { + path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); + } + }, - /** - * @private - * Divides text into lines of text and lines of graphemes. - */ - _splitText: function() { - var newLines = this._splitTextIntoLines(this.text); - this.textLines = newLines.lines; - this._textLines = newLines.graphemeLines; - this._unwrappedTextLines = newLines._unwrappedLines; - this._text = newLines.graphemeText; - return newLines; - }, + /** + * Return a context for measurement of text string. + * if created it gets stored for reuse + * this is for internal use, please do not use it + * @private + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.Text} thisArg + */ + getMeasuringContext: function() { + // if we did not return we have to measure something. + if (!fabric._measuringContext) { + fabric._measuringContext = this.canvas && this.canvas.contextCache || + fabric.util.createCanvasElement().getContext('2d'); + } + return fabric._measuringContext; + }, - /** - * Initialize or update text dimensions. - * Updates this.width and this.height with the proper values. - * Does not return dimensions. - */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this._splitText(); - this._clearCache(); - if (this.path) { - this.width = this.path.width; - this.height = this.path.height; - } - else { - this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; - this.height = this.calcTextHeight(); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, + /** + * @private + * Divides text into lines of text and lines of graphemes. + */ + _splitText: function() { + var newLines = this._splitTextIntoLines(this.text); + this.textLines = newLines.lines; + this._textLines = newLines.graphemeLines; + this._unwrappedTextLines = newLines._unwrappedLines; + this._text = newLines.graphemeText; + return newLines; + }, - /** - * Enlarge space boxes and shift the others - */ - enlargeSpaces: function() { - var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; - for (var i = 0, len = this._textLines.length; i < len; i++) { - if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { - continue; + /** + * Initialize or update text dimensions. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + */ + initDimensions: function() { + if (this.__skipDimension) { + return; } - accumulatedSpace = 0; - line = this._textLines[i]; - currentLineWidth = this.getLineWidth(i); - if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { - numberOfSpaces = spaces.length; - diffSpace = (this.width - currentLineWidth) / numberOfSpaces; - for (var j = 0, jlen = line.length; j <= jlen; j++) { - charBound = this.__charBounds[i][j]; - if (this._reSpaceAndTab.test(line[j])) { - charBound.width += diffSpace; - charBound.kernedWidth += diffSpace; - charBound.left += accumulatedSpace; - accumulatedSpace += diffSpace; - } - else { - charBound.left += accumulatedSpace; + this._splitText(); + this._clearCache(); + if (this.path) { + this.width = this.path.width; + this.height = this.path.height; + } + else { + this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; + this.height = this.calcTextHeight(); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, + + /** + * Enlarge space boxes and shift the others + */ + enlargeSpaces: function() { + var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { + continue; + } + accumulatedSpace = 0; + line = this._textLines[i]; + currentLineWidth = this.getLineWidth(i); + if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { + numberOfSpaces = spaces.length; + diffSpace = (this.width - currentLineWidth) / numberOfSpaces; + for (var j = 0, jlen = line.length; j <= jlen; j++) { + charBound = this.__charBounds[i][j]; + if (this._reSpaceAndTab.test(line[j])) { + charBound.width += diffSpace; + charBound.kernedWidth += diffSpace; + charBound.left += accumulatedSpace; + accumulatedSpace += diffSpace; + } + else { + charBound.left += accumulatedSpace; + } } } } - } - }, + }, - /** - * Detect if the text line is ended with an hard break - * text and itext do not have wrapping, return false - * @return {Boolean} - */ - isEndOfWrapping: function(lineIndex) { - return lineIndex === this._textLines.length - 1; - }, + /** + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @return {Boolean} + */ + isEndOfWrapping: function(lineIndex) { + return lineIndex === this._textLines.length - 1; + }, - /** - * Detect if a line has a linebreak and so we need to account for it when moving - * and counting style. - * It return always for text and Itext. - * @return Number - */ - missingNewlineOffset: function() { - return 1; - }, + /** + * Detect if a line has a linebreak and so we need to account for it when moving + * and counting style. + * It return always for text and Itext. + * @return Number + */ + missingNewlineOffset: function() { + return 1; + }, - /** - * Returns string representation of an instance - * @return {String} String representation of text object - */ - toString: function() { - return '#'; - }, + /** + * Returns string representation of an instance + * @return {String} String representation of text object + */ + toString: function() { + return '#'; + }, - /** - * Return the dimension and the zoom level needed to create a cache canvas - * big enough to host the object to be cached. - * @private - * @param {Object} dim.x width of object to be cached - * @param {Object} dim.y height of object to be cached - * @return {Object}.width width of canvas - * @return {Object}.height height of canvas - * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache - */ - _getCacheCanvasDimensions: function() { - var dims = this.callSuper('_getCacheCanvasDimensions'); - var fontSize = this.fontSize; - dims.width += fontSize * dims.zoomX; - dims.height += fontSize * dims.zoomY; - return dims; - }, + /** + * Return the dimension and the zoom level needed to create a cache canvas + * big enough to host the object to be cached. + * @private + * @param {Object} dim.x width of object to be cached + * @param {Object} dim.y height of object to be cached + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _getCacheCanvasDimensions: function() { + var dims = this.callSuper('_getCacheCanvasDimensions'); + var fontSize = this.fontSize; + dims.width += fontSize * dims.zoomX; + dims.height += fontSize * dims.zoomY; + return dims; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - var path = this.path; - path && !path.isNotVisible() && path._render(ctx); - this._setTextStyles(ctx); - this._renderTextLinesBackground(ctx); - this._renderTextDecoration(ctx, 'underline'); - this._renderText(ctx); - this._renderTextDecoration(ctx, 'overline'); - this._renderTextDecoration(ctx, 'linethrough'); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + var path = this.path; + path && !path.isNotVisible() && path._render(ctx); + this._setTextStyles(ctx); + this._renderTextLinesBackground(ctx); + this._renderTextDecoration(ctx, 'underline'); + this._renderText(ctx); + this._renderTextDecoration(ctx, 'overline'); + this._renderTextDecoration(ctx, 'linethrough'); + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderText: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderTextStroke(ctx); - this._renderTextFill(ctx); - } - else { - this._renderTextFill(ctx); - this._renderTextStroke(ctx); - } - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderText: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderTextStroke(ctx); + this._renderTextFill(ctx); + } + else { + this._renderTextFill(ctx); + this._renderTextStroke(ctx); + } + }, - /** - * Set the font parameter of the context with the object properties or with charStyle - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} [charStyle] object with font style properties - * @param {String} [charStyle.fontFamily] Font Family - * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix ) - * @param {String} [charStyle.fontWeight] Font weight - * @param {String} [charStyle.fontStyle] Font style (italic|normal) - */ - _setTextStyles: function(ctx, charStyle, forMeasuring) { - ctx.textBaseline = 'alphabetical'; - if (this.path) { - switch (this.pathAlign) { - case 'center': - ctx.textBaseline = 'middle'; - break; - case 'ascender': - ctx.textBaseline = 'top'; - break; - case 'descender': - ctx.textBaseline = 'bottom'; - break; + /** + * Set the font parameter of the context with the object properties or with charStyle + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [charStyle] object with font style properties + * @param {String} [charStyle.fontFamily] Font Family + * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix ) + * @param {String} [charStyle.fontWeight] Font weight + * @param {String} [charStyle.fontStyle] Font style (italic|normal) + */ + _setTextStyles: function(ctx, charStyle, forMeasuring) { + ctx.textBaseline = 'alphabetical'; + if (this.path) { + switch (this.pathAlign) { + case 'center': + ctx.textBaseline = 'middle'; + break; + case 'ascender': + ctx.textBaseline = 'top'; + break; + case 'descender': + ctx.textBaseline = 'bottom'; + break; + } } - } - ctx.font = this._getFontDeclaration(charStyle, forMeasuring); - }, + ctx.font = this._getFontDeclaration(charStyle, forMeasuring); + }, - /** - * calculate and return the text Width measuring each line. - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @return {Number} Maximum width of fabric.Text object - */ - calcTextWidth: function() { - var maxWidth = this.getLineWidth(0); + /** + * calculate and return the text Width measuring each line. + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @return {Number} Maximum width of fabric.Text object + */ + calcTextWidth: function() { + var maxWidth = this.getLineWidth(0); - for (var i = 1, len = this._textLines.length; i < len; i++) { - var currentLineWidth = this.getLineWidth(i); - if (currentLineWidth > maxWidth) { - maxWidth = currentLineWidth; + for (var i = 1, len = this._textLines.length; i < len; i++) { + var currentLineWidth = this.getLineWidth(i); + if (currentLineWidth > maxWidth) { + maxWidth = currentLineWidth; + } } - } - return maxWidth; - }, + return maxWidth; + }, - /** - * @private - * @param {String} method Method name ("fillText" or "strokeText") - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {String} line Text to render - * @param {Number} left Left position of text - * @param {Number} top Top position of text - * @param {Number} lineIndex Index of a line in a text - */ - _renderTextLine: function(method, ctx, line, left, top, lineIndex) { - this._renderChars(method, ctx, line, left, top, lineIndex); - }, + /** + * @private + * @param {String} method Method name ("fillText" or "strokeText") + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {String} line Text to render + * @param {Number} left Left position of text + * @param {Number} top Top position of text + * @param {Number} lineIndex Index of a line in a text + */ + _renderTextLine: function(method, ctx, line, left, top, lineIndex) { + this._renderChars(method, ctx, line, left, top, lineIndex); + }, - /** - * Renders the text background for lines, taking care of style - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextLinesBackground: function(ctx) { - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { - return; - } - var heightOfLine, - lineLeftOffset, originalFill = ctx.fillStyle, - line, lastColor, - leftOffset = this._getLeftOffset(), - lineTopOffset = this._getTopOffset(), - boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, - drawStart; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { - lineTopOffset += heightOfLine; - continue; + /** + * Renders the text background for lines, taking care of style + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextLinesBackground: function(ctx) { + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { + return; } - line = this._textLines[i]; - lineLeftOffset = this._getLineLeftOffset(i); - boxWidth = 0; - boxStart = 0; - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - ctx.fillStyle = currentColor; - currentColor && ctx.fillRect( - -charBox.width / 2, - -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), - charBox.width, - heightOfLine / this.lineHeight - ); - ctx.restore(); + var heightOfLine, + lineLeftOffset, originalFill = ctx.fillStyle, + line, lastColor, + leftOffset = this._getLeftOffset(), + lineTopOffset = this._getTopOffset(), + boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, + drawStart; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { + lineTopOffset += heightOfLine; + continue; + } + line = this._textLines[i]; + lineLeftOffset = this._getLineLeftOffset(i); + boxWidth = 0; + boxStart = 0; + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillStyle = currentColor; + currentColor && ctx.fillRect( + -charBox.width / 2, + -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), + charBox.width, + heightOfLine / this.lineHeight + ); + ctx.restore(); + } + else if (currentColor !== lastColor) { + drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = lastColor; + lastColor && ctx.fillRect( + drawStart, + lineTopOffset, + boxWidth, + heightOfLine / this.lineHeight + ); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; + } + else { + boxWidth += charBox.kernedWidth; + } } - else if (currentColor !== lastColor) { + if (currentColor && !path) { drawStart = leftOffset + lineLeftOffset + boxStart; if (this.direction === 'rtl') { drawStart = this.width - drawStart - boxWidth; } - ctx.fillStyle = lastColor; - lastColor && ctx.fillRect( + ctx.fillStyle = currentColor; + ctx.fillRect( drawStart, lineTopOffset, boxWidth, heightOfLine / this.lineHeight ); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; - } - else { - boxWidth += charBox.kernedWidth; } + lineTopOffset += heightOfLine; } - if (currentColor && !path) { - drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - ctx.fillStyle = currentColor; - ctx.fillRect( - drawStart, - lineTopOffset, - boxWidth, - heightOfLine / this.lineHeight - ); - } - lineTopOffset += heightOfLine; - } - ctx.fillStyle = originalFill; - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, - - /** - * @private - * @param {Object} decl style declaration for cache - * @param {String} decl.fontFamily fontFamily - * @param {String} decl.fontStyle fontStyle - * @param {String} decl.fontWeight fontWeight - * @return {Object} reference to cache - */ - getFontCache: function(decl) { - var fontFamily = decl.fontFamily.toLowerCase(); - if (!fabric.charWidthsCache[fontFamily]) { - fabric.charWidthsCache[fontFamily] = { }; - } - var cache = fabric.charWidthsCache[fontFamily], - cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); - if (!cache[cacheProp]) { - cache[cacheProp] = { }; - } - return cache[cacheProp]; - }, + ctx.fillStyle = originalFill; + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** - * measure and return the width of a single character. - * possibly overridden to accommodate different measure logic or - * to hook some external lib for character measurement - * @private - * @param {String} _char, char to be measured - * @param {Object} charStyle style of char to be measured - * @param {String} [previousChar] previous char - * @param {Object} [prevCharStyle] style of previous char - */ - _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { - // first i try to return from cache - var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), - previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, - stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, - fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; - - if (previousChar && fontCache[previousChar] !== undefined) { - previousWidth = fontCache[previousChar]; - } - if (fontCache[_char] !== undefined) { - kernedWidth = width = fontCache[_char]; - } - if (stylesAreEqual && fontCache[couple] !== undefined) { - coupleWidth = fontCache[couple]; - kernedWidth = coupleWidth - previousWidth; - } - if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { - var ctx = this.getMeasuringContext(); - // send a TRUE to specify measuring font size CACHE_FONT_SIZE - this._setTextStyles(ctx, charStyle, true); - } - if (width === undefined) { - kernedWidth = width = ctx.measureText(_char).width; - fontCache[_char] = width; - } - if (previousWidth === undefined && stylesAreEqual && previousChar) { - previousWidth = ctx.measureText(previousChar).width; - fontCache[previousChar] = previousWidth; - } - if (stylesAreEqual && coupleWidth === undefined) { - // we can measure the kerning couple and subtract the width of the previous character - coupleWidth = ctx.measureText(couple).width; - fontCache[couple] = coupleWidth; - kernedWidth = coupleWidth - previousWidth; - } - return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; - }, - - /** - * Computes height of character at given position - * @param {Number} line the line index number - * @param {Number} _char the character index number - * @return {Number} fontSize of the character - */ - getHeightOfChar: function(line, _char) { - return this.getValueOfPropertyAt(line, _char, 'fontSize'); - }, - - /** - * measure a text line measuring all characters. - * @param {Number} lineIndex line number - * @return {Number} Line width - */ - measureLine: function(lineIndex) { - var lineInfo = this._measureLine(lineIndex); - if (this.charSpacing !== 0) { - lineInfo.width -= this._getWidthOfCharSpacing(); - } - if (lineInfo.width < 0) { - lineInfo.width = 0; - } - return lineInfo; - }, - - /** - * measure every grapheme of a line, populating __charBounds - * @param {Number} lineIndex - * @return {Object} object.width total width of characters - * @return {Object} object.widthOfSpaces length of chars that match this._reSpacesAndTabs - */ - _measureLine: function(lineIndex) { - var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, - graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), - positionInPath = 0, startingPoint, totalPathLength, path = this.path, - reverse = this.pathSide === 'right'; - - this.__charBounds[lineIndex] = lineBounds; - for (i = 0; i < line.length; i++) { - grapheme = line[i]; - graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); - lineBounds[i] = graphemeInfo; - width += graphemeInfo.kernedWidth; - prevGrapheme = grapheme; - } - // this latest bound box represent the last character of the line - // to simplify cursor handling in interactive mode. - lineBounds[i] = { - left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, - width: 0, - kernedWidth: 0, - height: this.fontSize - }; - if (path) { - totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; - startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); - startingPoint.x += path.pathOffset.x; - startingPoint.y += path.pathOffset.y; - switch (this.textAlign) { - case 'left': - positionInPath = reverse ? (totalPathLength - width) : 0; - break; - case 'center': - positionInPath = (totalPathLength - width) / 2; - break; - case 'right': - positionInPath = reverse ? 0 : (totalPathLength - width); - break; - //todo - add support for justify + /** + * @private + * @param {Object} decl style declaration for cache + * @param {String} decl.fontFamily fontFamily + * @param {String} decl.fontStyle fontStyle + * @param {String} decl.fontWeight fontWeight + * @return {Object} reference to cache + */ + getFontCache: function(decl) { + var fontFamily = decl.fontFamily.toLowerCase(); + if (!fabric.charWidthsCache[fontFamily]) { + fabric.charWidthsCache[fontFamily] = { }; } - positionInPath += this.pathStartOffset * (reverse ? -1 : 1); - for (i = reverse ? line.length - 1 : 0; - reverse ? i >= 0 : i < line.length; - reverse ? i-- : i++) { - graphemeInfo = lineBounds[i]; - if (positionInPath > totalPathLength) { - positionInPath %= totalPathLength; - } - else if (positionInPath < 0) { - positionInPath += totalPathLength; - } - // it would probably much faster to send all the grapheme position for a line - // and calculate path position/angle at once. - this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); - positionInPath += graphemeInfo.kernedWidth; + var cache = fabric.charWidthsCache[fontFamily], + cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); + if (!cache[cacheProp]) { + cache[cacheProp] = { }; } - } - return { width: width, numOfSpaces: numOfSpaces }; - }, - - /** - * Calculate the angle and the left,top position of the char that follow a path. - * It appends it to graphemeInfo to be reused later at rendering - * @private - * @param {Number} positionInPath to be measured - * @param {Object} graphemeInfo current grapheme box information - * @param {Object} startingPoint position of the point - */ - _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { - var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, - path = this.path; - - // we are at currentPositionOnPath. we want to know what point on the path is. - var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); - graphemeInfo.renderLeft = info.x - startingPoint.x; - graphemeInfo.renderTop = info.y - startingPoint.y; - graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); - }, - - /** - * Measure and return the info of a single grapheme. - * needs the the info of previous graphemes already filled - * @private - * @param {String} grapheme to be measured - * @param {Number} lineIndex index of the line where the char is - * @param {Number} charIndex position in the line - * @param {String} [prevGrapheme] character preceding the one to be measured - */ - _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { - var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), - prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, - info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), - kernedWidth = info.kernedWidth, - width = info.width, charSpacing; - - if (this.charSpacing !== 0) { - charSpacing = this._getWidthOfCharSpacing(); - width += charSpacing; - kernedWidth += charSpacing; - } - - var box = { - width: width, - left: 0, - height: style.fontSize, - kernedWidth: kernedWidth, - deltaY: style.deltaY, - }; - if (charIndex > 0 && !skipLeft) { - var previousBox = this.__charBounds[lineIndex][charIndex - 1]; - box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; - } - return box; - }, + return cache[cacheProp]; + }, - /** - * Calculate height of line at 'lineIndex' - * @param {Number} lineIndex index of line to calculate - * @return {Number} - */ - getHeightOfLine: function(lineIndex) { - if (this.__lineHeights[lineIndex]) { - return this.__lineHeights[lineIndex]; - } + /** + * measure and return the width of a single character. + * possibly overridden to accommodate different measure logic or + * to hook some external lib for character measurement + * @private + * @param {String} _char, char to be measured + * @param {Object} charStyle style of char to be measured + * @param {String} [previousChar] previous char + * @param {Object} [prevCharStyle] style of previous char + */ + _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { + // first i try to return from cache + var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), + previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, + stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, + fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; + + if (previousChar && fontCache[previousChar] !== undefined) { + previousWidth = fontCache[previousChar]; + } + if (fontCache[_char] !== undefined) { + kernedWidth = width = fontCache[_char]; + } + if (stylesAreEqual && fontCache[couple] !== undefined) { + coupleWidth = fontCache[couple]; + kernedWidth = coupleWidth - previousWidth; + } + if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { + var ctx = this.getMeasuringContext(); + // send a TRUE to specify measuring font size CACHE_FONT_SIZE + this._setTextStyles(ctx, charStyle, true); + } + if (width === undefined) { + kernedWidth = width = ctx.measureText(_char).width; + fontCache[_char] = width; + } + if (previousWidth === undefined && stylesAreEqual && previousChar) { + previousWidth = ctx.measureText(previousChar).width; + fontCache[previousChar] = previousWidth; + } + if (stylesAreEqual && coupleWidth === undefined) { + // we can measure the kerning couple and subtract the width of the previous character + coupleWidth = ctx.measureText(couple).width; + fontCache[couple] = coupleWidth; + kernedWidth = coupleWidth - previousWidth; + } + return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; + }, - var line = this._textLines[lineIndex], - // char 0 is measured before the line cycle because it nneds to char - // emptylines - maxHeight = this.getHeightOfChar(lineIndex, 0); - for (var i = 1, len = line.length; i < len; i++) { - maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); - } + /** + * Computes height of character at given position + * @param {Number} line the line index number + * @param {Number} _char the character index number + * @return {Number} fontSize of the character + */ + getHeightOfChar: function(line, _char) { + return this.getValueOfPropertyAt(line, _char, 'fontSize'); + }, - return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; - }, + /** + * measure a text line measuring all characters. + * @param {Number} lineIndex line number + * @return {Number} Line width + */ + measureLine: function(lineIndex) { + var lineInfo = this._measureLine(lineIndex); + if (this.charSpacing !== 0) { + lineInfo.width -= this._getWidthOfCharSpacing(); + } + if (lineInfo.width < 0) { + lineInfo.width = 0; + } + return lineInfo; + }, - /** - * Calculate text box height - */ - calcTextHeight: function() { - var lineHeight, height = 0; - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineHeight = this.getHeightOfLine(i); - height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); - } - return height; - }, + /** + * measure every grapheme of a line, populating __charBounds + * @param {Number} lineIndex + * @return {Object} object.width total width of characters + * @return {Object} object.widthOfSpaces length of chars that match this._reSpacesAndTabs + */ + _measureLine: function(lineIndex) { + var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, + graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), + positionInPath = 0, startingPoint, totalPathLength, path = this.path, + reverse = this.pathSide === 'right'; + + this.__charBounds[lineIndex] = lineBounds; + for (i = 0; i < line.length; i++) { + grapheme = line[i]; + graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); + lineBounds[i] = graphemeInfo; + width += graphemeInfo.kernedWidth; + prevGrapheme = grapheme; + } + // this latest bound box represent the last character of the line + // to simplify cursor handling in interactive mode. + lineBounds[i] = { + left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, + width: 0, + kernedWidth: 0, + height: this.fontSize + }; + if (path) { + totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; + startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); + startingPoint.x += path.pathOffset.x; + startingPoint.y += path.pathOffset.y; + switch (this.textAlign) { + case 'left': + positionInPath = reverse ? (totalPathLength - width) : 0; + break; + case 'center': + positionInPath = (totalPathLength - width) / 2; + break; + case 'right': + positionInPath = reverse ? 0 : (totalPathLength - width); + break; + //todo - add support for justify + } + positionInPath += this.pathStartOffset * (reverse ? -1 : 1); + for (i = reverse ? line.length - 1 : 0; + reverse ? i >= 0 : i < line.length; + reverse ? i-- : i++) { + graphemeInfo = lineBounds[i]; + if (positionInPath > totalPathLength) { + positionInPath %= totalPathLength; + } + else if (positionInPath < 0) { + positionInPath += totalPathLength; + } + // it would probably much faster to send all the grapheme position for a line + // and calculate path position/angle at once. + this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); + positionInPath += graphemeInfo.kernedWidth; + } + } + return { width: width, numOfSpaces: numOfSpaces }; + }, - /** - * @private - * @return {Number} Left offset - */ - _getLeftOffset: function() { - return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; - }, + /** + * Calculate the angle and the left,top position of the char that follow a path. + * It appends it to graphemeInfo to be reused later at rendering + * @private + * @param {Number} positionInPath to be measured + * @param {Object} graphemeInfo current grapheme box information + * @param {Object} startingPoint position of the point + */ + _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { + var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, + path = this.path; + + // we are at currentPositionOnPath. we want to know what point on the path is. + var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); + graphemeInfo.renderLeft = info.x - startingPoint.x; + graphemeInfo.renderTop = info.y - startingPoint.y; + graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); + }, - /** - * @private - * @return {Number} Top offset - */ - _getTopOffset: function() { - return -this.height / 2; - }, + /** + * Measure and return the info of a single grapheme. + * needs the the info of previous graphemes already filled + * Override to customize measuring + * + * @typedef {object} GraphemeBBox + * @property {number} width + * @property {number} height + * @property {number} kernedWidth + * @property {number} left + * @property {number} deltaY + * + * @param {String} grapheme to be measured + * @param {Number} lineIndex index of the line where the char is + * @param {Number} charIndex position in the line + * @param {String} [prevGrapheme] character preceding the one to be measured + * @returns {GraphemeBBox} grapheme bbox + */ + _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { + var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), + prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, + info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), + kernedWidth = info.kernedWidth, + width = info.width, charSpacing; + + if (this.charSpacing !== 0) { + charSpacing = this._getWidthOfCharSpacing(); + width += charSpacing; + kernedWidth += charSpacing; + } + + var box = { + width: width, + left: 0, + height: style.fontSize, + kernedWidth: kernedWidth, + deltaY: style.deltaY, + }; + if (charIndex > 0 && !skipLeft) { + var previousBox = this.__charBounds[lineIndex][charIndex - 1]; + box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; + } + return box; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {String} method Method name ("fillText" or "strokeText") - */ - _renderTextCommon: function(ctx, method) { - ctx.save(); - var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); - for (var i = 0, len = this._textLines.length; i < len; i++) { - var heightOfLine = this.getHeightOfLine(i), - maxHeight = heightOfLine / this.lineHeight, - leftOffset = this._getLineLeftOffset(i); - this._renderTextLine( - method, - ctx, - this._textLines[i], - left + leftOffset, - top + lineHeights + maxHeight, - i - ); - lineHeights += heightOfLine; - } - ctx.restore(); - }, + /** + * Calculate height of line at 'lineIndex' + * @param {Number} lineIndex index of line to calculate + * @return {Number} + */ + getHeightOfLine: function(lineIndex) { + if (this.__lineHeights[lineIndex]) { + return this.__lineHeights[lineIndex]; + } - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextFill: function(ctx) { - if (!this.fill && !this.styleHas('fill')) { - return; - } + var line = this._textLines[lineIndex], + // char 0 is measured before the line cycle because it nneds to char + // emptylines + maxHeight = this.getHeightOfChar(lineIndex, 0); + for (var i = 1, len = line.length; i < len; i++) { + maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); + } - this._renderTextCommon(ctx, 'fillText'); - }, + return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextStroke: function(ctx) { - if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { - return; - } + /** + * Calculate text box height + */ + calcTextHeight: function() { + var lineHeight, height = 0; + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineHeight = this.getHeightOfLine(i); + height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); + } + return height; + }, - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); - } + /** + * @private + * @return {Number} Left offset + */ + _getLeftOffset: function() { + return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; + }, - ctx.save(); - this._setLineDash(ctx, this.strokeDashArray); - ctx.beginPath(); - this._renderTextCommon(ctx, 'strokeText'); - ctx.closePath(); - ctx.restore(); - }, + /** + * @private + * @return {Number} Top offset + */ + _getTopOffset: function() { + return -this.height / 2; + }, - /** - * @private - * @param {String} method fillText or strokeText. - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Array} line Content of the line, splitted in an array by grapheme - * @param {Number} left - * @param {Number} top - * @param {Number} lineIndex - */ - _renderChars: function(method, ctx, line, left, top, lineIndex) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, - boxWidth = 0, - timeToRender, - path = this.path, - shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, - isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, - drawingLeft, currentDirection = ctx.canvas.getAttribute('dir'); - ctx.save(); - if (currentDirection !== this.direction) { - ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); - ctx.direction = isLtr ? 'ltr' : 'rtl'; - ctx.textAlign = isLtr ? 'left' : 'right'; - } - top -= lineHeight * this._fontSizeFraction / this.lineHeight; - if (shortCut) { - // render all the line in one pass without checking - // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); - this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {String} method Method name ("fillText" or "strokeText") + */ + _renderTextCommon: function(ctx, method) { + ctx.save(); + var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); + for (var i = 0, len = this._textLines.length; i < len; i++) { + var heightOfLine = this.getHeightOfLine(i), + maxHeight = heightOfLine / this.lineHeight, + leftOffset = this._getLineLeftOffset(i); + this._renderTextLine( + method, + ctx, + this._textLines[i], + left + leftOffset, + top + lineHeights + maxHeight, + i + ); + lineHeights += heightOfLine; + } ctx.restore(); - return; - } - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing || path; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - left += sign * (charBox.kernedWidth - charBox.width); - boxWidth += charBox.width; + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextFill: function(ctx) { + if (!this.fill && !this.styleHas('fill')) { + return; } - else { - boxWidth += charBox.kernedWidth; + + this._renderTextCommon(ctx, 'fillText'); + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextStroke: function(ctx) { + if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { + return; } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; - } + + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChanged(actualStyle, nextStyle); + + ctx.save(); + this._setLineDash(ctx, this.strokeDashArray); + ctx.beginPath(); + this._renderTextCommon(ctx, 'strokeText'); + ctx.closePath(); + ctx.restore(); + }, + + /** + * @private + * @param {String} method fillText or strokeText. + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Array} line Content of the line, splitted in an array by grapheme + * @param {Number} left + * @param {Number} top + * @param {Number} lineIndex + */ + _renderChars: function(method, ctx, line, left, top, lineIndex) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, + boxWidth = 0, + timeToRender, + path = this.path, + shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, + isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, + // this was changed in the PR #7674 + // currentDirection = ctx.canvas.getAttribute('dir'); + drawingLeft, currentDirection = ctx.direction; + ctx.save(); + if (currentDirection !== this.direction) { + ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); + ctx.direction = isLtr ? 'ltr' : 'rtl'; + ctx.textAlign = isLtr ? 'left' : 'right'; + } + top -= lineHeight * this._fontSizeFraction / this.lineHeight; + if (shortCut) { + // render all the line in one pass without checking + // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); + this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); + ctx.restore(); + return; } - if (timeToRender) { - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); - ctx.restore(); + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing || path; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + left += sign * (charBox.kernedWidth - charBox.width); + boxWidth += charBox.width; } else { - drawingLeft = left; - this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; + } + } + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChanged(actualStyle, nextStyle); + } + if (timeToRender) { + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); + ctx.restore(); + } + else { + drawingLeft = left; + this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); + } + charsToRender = ''; + actualStyle = nextStyle; + left += sign * boxWidth; + boxWidth = 0; } - charsToRender = ''; - actualStyle = nextStyle; - left += sign * boxWidth; - boxWidth = 0; } - } - ctx.restore(); - }, + ctx.restore(); + }, - /** - * This function try to patch the missing gradientTransform on canvas gradients. - * transforming a context to transform the gradient, is going to transform the stroke too. - * we want to transform the gradient but not the stroke operation, so we create - * a transformed gradient on a pattern and then we use the pattern instead of the gradient. - * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size - * is limited. - * @private - * @param {fabric.Gradient} filler a fabric gradient instance - * @return {CanvasPattern} a pattern to use as fill/stroke style - */ - _applyPatternGradientTransformText: function(filler) { - var pCanvas = fabric.util.createCanvasElement(), pCtx, - // TODO: verify compatibility with strokeUniform - width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.fillStyle = filler.toLive(pCtx); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fill(); - return pCtx.createPattern(pCanvas, 'no-repeat'); - }, - - handleFiller: function(ctx, property, filler) { - var offsetX, offsetY; - if (filler.toLive) { - if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - offsetX = -this.width / 2; - offsetY = -this.height / 2; - ctx.translate(offsetX, offsetY); - ctx[property] = this._applyPatternGradientTransformText(filler); - return { offsetX: offsetX, offsetY: offsetY }; + /** + * This function try to patch the missing gradientTransform on canvas gradients. + * transforming a context to transform the gradient, is going to transform the stroke too. + * we want to transform the gradient but not the stroke operation, so we create + * a transformed gradient on a pattern and then we use the pattern instead of the gradient. + * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size + * is limited. + * @private + * @param {fabric.Gradient} filler a fabric gradient instance + * @return {CanvasPattern} a pattern to use as fill/stroke style + */ + _applyPatternGradientTransformText: function(filler) { + var pCanvas = fabric.util.createCanvasElement(), pCtx, + // TODO: verify compatibility with strokeUniform + width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.fillStyle = filler.toLive(pCtx); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fill(); + return pCtx.createPattern(pCanvas, 'no-repeat'); + }, + + handleFiller: function(ctx, property, filler) { + var offsetX, offsetY; + if (filler.toLive) { + if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + offsetX = -this.width / 2; + offsetY = -this.height / 2; + ctx.translate(offsetX, offsetY); + ctx[property] = this._applyPatternGradientTransformText(filler); + return { offsetX: offsetX, offsetY: offsetY }; + } + else { + // is a simple gradient or pattern + ctx[property] = filler.toLive(ctx, this); + return this._applyPatternGradientTransform(ctx, filler); + } } else { - // is a simple gradient or pattern - ctx[property] = filler.toLive(ctx, this); - return this._applyPatternGradientTransform(ctx, filler); + // is a color + ctx[property] = filler; } - } - else { - // is a color - ctx[property] = filler; - } - return { offsetX: 0, offsetY: 0 }; - }, - - _setStrokeStyles: function(ctx, decl) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = this.strokeLineCap; - ctx.lineDashOffset = this.strokeDashOffset; - ctx.lineJoin = this.strokeLineJoin; - ctx.miterLimit = this.strokeMiterLimit; - return this.handleFiller(ctx, 'strokeStyle', decl.stroke); - }, + return { offsetX: 0, offsetY: 0 }; + }, - _setFillStyles: function(ctx, decl) { - return this.handleFiller(ctx, 'fillStyle', decl.fill); - }, + _setStrokeStyles: function(ctx, decl) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = this.strokeLineCap; + ctx.lineDashOffset = this.strokeDashOffset; + ctx.lineJoin = this.strokeLineJoin; + ctx.miterLimit = this.strokeMiterLimit; + return this.handleFiller(ctx, 'strokeStyle', decl.stroke); + }, - /** - * @private - * @param {String} method - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Number} lineIndex - * @param {Number} charIndex - * @param {String} _char - * @param {Number} left Left coordinate - * @param {Number} top Top coordinate - * @param {Number} lineHeight Height of the line - */ - _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { - var decl = this._getStyleDeclaration(lineIndex, charIndex), - fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), - shouldFill = method === 'fillText' && fullDecl.fill, - shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, - fillOffsets, strokeOffsets; - - if (!shouldStroke && !shouldFill) { - return; - } - ctx.save(); + _setFillStyles: function(ctx, decl) { + return this.handleFiller(ctx, 'fillStyle', decl.fill); + }, - shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); - shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); + /** + * @private + * @param {String} method + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {String} _char + * @param {Number} left Left coordinate + * @param {Number} top Top coordinate + * @param {Number} lineHeight Height of the line + */ + _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { + var decl = this._getStyleDeclaration(lineIndex, charIndex), + fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), + shouldFill = method === 'fillText' && fullDecl.fill, + shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, + fillOffsets, strokeOffsets; + + if (!shouldStroke && !shouldFill) { + return; + } + ctx.save(); - ctx.font = this._getFontDeclaration(fullDecl); + shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); + shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); + ctx.font = this._getFontDeclaration(fullDecl); - if (decl && decl.textBackgroundColor) { - this._removeShadow(ctx); - } - if (decl && decl.deltaY) { - top += decl.deltaY; - } - shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); - shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); - ctx.restore(); - }, - /** - * Turns the character into a 'superior figure' (i.e. 'superscript') - * @param {Number} start selection start - * @param {Number} end selection end - * @returns {fabric.Text} thisArg - * @chainable - */ - setSuperscript: function(start, end) { - return this._setScript(start, end, this.superscript); - }, + if (decl && decl.textBackgroundColor) { + this._removeShadow(ctx); + } + if (decl && decl.deltaY) { + top += decl.deltaY; + } + shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); + shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); + ctx.restore(); + }, - /** - * Turns the character into an 'inferior figure' (i.e. 'subscript') - * @param {Number} start selection start - * @param {Number} end selection end - * @returns {fabric.Text} thisArg - * @chainable - */ - setSubscript: function(start, end) { - return this._setScript(start, end, this.subscript); - }, + /** + * Turns the character into a 'superior figure' (i.e. 'superscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSuperscript: function(start, end) { + return this._setScript(start, end, this.superscript); + }, - /** - * Applies 'schema' at given position - * @private - * @param {Number} start selection start - * @param {Number} end selection end - * @param {Number} schema - * @returns {fabric.Text} thisArg - * @chainable - */ - _setScript: function(start, end, schema) { - var loc = this.get2DCursorLocation(start, true), - fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), - dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), - style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; - this.setSelectionStyles(style, start, end); - return this; - }, + /** + * Turns the character into an 'inferior figure' (i.e. 'subscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSubscript: function(start, end) { + return this._setScript(start, end, this.subscript); + }, - /** - * @private - * @param {Object} prevStyle - * @param {Object} thisStyle - */ - _hasStyleChanged: function(prevStyle, thisStyle) { - return prevStyle.fill !== thisStyle.fill || - prevStyle.stroke !== thisStyle.stroke || - prevStyle.strokeWidth !== thisStyle.strokeWidth || - prevStyle.fontSize !== thisStyle.fontSize || - prevStyle.fontFamily !== thisStyle.fontFamily || - prevStyle.fontWeight !== thisStyle.fontWeight || - prevStyle.fontStyle !== thisStyle.fontStyle || - prevStyle.deltaY !== thisStyle.deltaY; - }, + /** + * Applies 'schema' at given position + * @private + * @param {Number} start selection start + * @param {Number} end selection end + * @param {Number} schema + * @returns {fabric.Text} thisArg + * @chainable + */ + _setScript: function(start, end, schema) { + var loc = this.get2DCursorLocation(start, true), + fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), + dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), + style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; + this.setSelectionStyles(style, start, end); + return this; + }, - /** - * @private - * @param {Object} prevStyle - * @param {Object} thisStyle - */ - _hasStyleChangedForSvg: function(prevStyle, thisStyle) { - return this._hasStyleChanged(prevStyle, thisStyle) || - prevStyle.overline !== thisStyle.overline || - prevStyle.underline !== thisStyle.underline || - prevStyle.linethrough !== thisStyle.linethrough; - }, + /** + * @private + * @param {Object} prevStyle + * @param {Object} thisStyle + */ + _hasStyleChanged: function(prevStyle, thisStyle) { + return prevStyle.fill !== thisStyle.fill || + prevStyle.stroke !== thisStyle.stroke || + prevStyle.strokeWidth !== thisStyle.strokeWidth || + prevStyle.fontSize !== thisStyle.fontSize || + prevStyle.fontFamily !== thisStyle.fontFamily || + prevStyle.fontWeight !== thisStyle.fontWeight || + prevStyle.fontStyle !== thisStyle.fontStyle || + prevStyle.deltaY !== thisStyle.deltaY; + }, - /** - * @private - * @param {Number} lineIndex index text line - * @return {Number} Line left offset - */ - _getLineLeftOffset: function(lineIndex) { - var lineWidth = this.getLineWidth(lineIndex), - lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, - isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); - if (textAlign === 'justify' - || (textAlign === 'justify-center' && !isEndOfWrapping) - || (textAlign === 'justify-right' && !isEndOfWrapping) - || (textAlign === 'justify-left' && !isEndOfWrapping) - ) { - return 0; - } - if (textAlign === 'center') { - leftOffset = lineDiff / 2; - } - if (textAlign === 'right') { - leftOffset = lineDiff; - } - if (textAlign === 'justify-center') { - leftOffset = lineDiff / 2; - } - if (textAlign === 'justify-right') { - leftOffset = lineDiff; - } - if (direction === 'rtl') { - leftOffset -= lineDiff; - } - return leftOffset; - }, + /** + * @private + * @param {Object} prevStyle + * @param {Object} thisStyle + */ + _hasStyleChangedForSvg: function(prevStyle, thisStyle) { + return this._hasStyleChanged(prevStyle, thisStyle) || + prevStyle.overline !== thisStyle.overline || + prevStyle.underline !== thisStyle.underline || + prevStyle.linethrough !== thisStyle.linethrough; + }, - /** - * @private - */ - _clearCache: function() { - this.__lineWidths = []; - this.__lineHeights = []; - this.__charBounds = []; - }, + /** + * @private + * @param {Number} lineIndex index text line + * @return {Number} Line left offset + */ + _getLineLeftOffset: function(lineIndex) { + var lineWidth = this.getLineWidth(lineIndex), + lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, + isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); + if (textAlign === 'justify' + || (textAlign === 'justify-center' && !isEndOfWrapping) + || (textAlign === 'justify-right' && !isEndOfWrapping) + || (textAlign === 'justify-left' && !isEndOfWrapping) + ) { + return 0; + } + if (textAlign === 'center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'right') { + leftOffset = lineDiff; + } + if (textAlign === 'justify-center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'justify-right') { + leftOffset = lineDiff; + } + if (direction === 'rtl') { + if (textAlign === 'right' || textAlign === 'justify' || textAlign === 'justify-right') { + leftOffset = 0; + } + else if (textAlign === 'left' || textAlign === 'justify-left') { + leftOffset = -lineDiff; + } + else if (textAlign === 'center' || textAlign === 'justify-center') { + leftOffset = -lineDiff / 2; + } + } + return leftOffset; + }, - /** - * @private - */ - _shouldClearDimensionCache: function() { - var shouldClear = this._forceClearCache; - shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); - if (shouldClear) { - this.dirty = true; - this._forceClearCache = false; - } - return shouldClear; - }, + /** + * @private + */ + _clearCache: function() { + this.__lineWidths = []; + this.__lineHeights = []; + this.__charBounds = []; + }, - /** - * Measure a single line given its index. Used to calculate the initial - * text bounding box. The values are calculated and stored in __lineWidths cache. - * @private - * @param {Number} lineIndex line number - * @return {Number} Line width - */ - getLineWidth: function(lineIndex) { - if (this.__lineWidths[lineIndex] !== undefined) { - return this.__lineWidths[lineIndex]; - } + /** + * @private + */ + _shouldClearDimensionCache: function() { + var shouldClear = this._forceClearCache; + shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); + if (shouldClear) { + this.dirty = true; + this._forceClearCache = false; + } + return shouldClear; + }, - var lineInfo = this.measureLine(lineIndex); - var width = lineInfo.width; - this.__lineWidths[lineIndex] = width; - return width; - }, + /** + * Measure a single line given its index. Used to calculate the initial + * text bounding box. The values are calculated and stored in __lineWidths cache. + * @private + * @param {Number} lineIndex line number + * @return {Number} Line width + */ + getLineWidth: function(lineIndex) { + if (this.__lineWidths[lineIndex] !== undefined) { + return this.__lineWidths[lineIndex]; + } - _getWidthOfCharSpacing: function() { - if (this.charSpacing !== 0) { - return this.fontSize * this.charSpacing / 1000; - } - return 0; - }, + var lineInfo = this.measureLine(lineIndex); + var width = lineInfo.width; + this.__lineWidths[lineIndex] = width; + return width; + }, - /** - * Retrieves the value of property at given character position - * @param {Number} lineIndex the line number - * @param {Number} charIndex the character number - * @param {String} property the property name - * @returns the value of 'property' - */ - getValueOfPropertyAt: function(lineIndex, charIndex, property) { - var charStyle = this._getStyleDeclaration(lineIndex, charIndex); - if (charStyle && typeof charStyle[property] !== 'undefined') { - return charStyle[property]; - } - return this[property]; - }, + _getWidthOfCharSpacing: function() { + if (this.charSpacing !== 0) { + return this.fontSize * this.charSpacing / 1000; + } + return 0; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextDecoration: function(ctx, type) { - if (!this[type] && !this.styleHas(type)) { - return; - } - var heightOfLine, size, _size, - lineLeftOffset, dy, _dy, - line, lastDecoration, - leftOffset = this._getLeftOffset(), - topOffset = this._getTopOffset(), top, - boxStart, boxWidth, charBox, currentDecoration, - maxHeight, currentFill, lastFill, path = this.path, - charSpacing = this._getWidthOfCharSpacing(), - offsetY = this.offsets[type]; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this[type] && !this.styleHas(type, i)) { - topOffset += heightOfLine; - continue; + /** + * Retrieves the value of property at given character position + * @param {Number} lineIndex the line number + * @param {Number} charIndex the character number + * @param {String} property the property name + * @returns the value of 'property' + */ + getValueOfPropertyAt: function(lineIndex, charIndex, property) { + var charStyle = this._getStyleDeclaration(lineIndex, charIndex); + if (charStyle && typeof charStyle[property] !== 'undefined') { + return charStyle[property]; + } + return this[property]; + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextDecoration: function(ctx, type) { + if (!this[type] && !this.styleHas(type)) { + return; } - line = this._textLines[i]; - maxHeight = heightOfLine / this.lineHeight; - lineLeftOffset = this._getLineLeftOffset(i); - boxStart = 0; - boxWidth = 0; - lastDecoration = this.getValueOfPropertyAt(i, 0, type); - lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); - top = topOffset + maxHeight * (1 - this._fontSizeFraction); - size = this.getHeightOfChar(i, 0); - dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentDecoration = this.getValueOfPropertyAt(i, j, type); - currentFill = this.getValueOfPropertyAt(i, j, 'fill'); - _size = this.getHeightOfChar(i, j); - _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); - if (path && currentDecoration && currentFill) { - ctx.save(); - ctx.fillStyle = lastFill; - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - ctx.fillRect( - -charBox.kernedWidth / 2, - offsetY * _size + _dy, - charBox.kernedWidth, - this.fontSize / 15 - ); - ctx.restore(); + var heightOfLine, size, _size, + lineLeftOffset, dy, _dy, + line, lastDecoration, + leftOffset = this._getLeftOffset(), + topOffset = this._getTopOffset(), top, + boxStart, boxWidth, charBox, currentDecoration, + maxHeight, currentFill, lastFill, path = this.path, + charSpacing = this._getWidthOfCharSpacing(), + offsetY = this.offsets[type]; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this[type] && !this.styleHas(type, i)) { + topOffset += heightOfLine; + continue; } - else if ( - (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) - && boxWidth > 0 - ) { - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - if (lastDecoration && lastFill) { + line = this._textLines[i]; + maxHeight = heightOfLine / this.lineHeight; + lineLeftOffset = this._getLineLeftOffset(i); + boxStart = 0; + boxWidth = 0; + lastDecoration = this.getValueOfPropertyAt(i, 0, type); + lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); + top = topOffset + maxHeight * (1 - this._fontSizeFraction); + size = this.getHeightOfChar(i, 0); + dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentDecoration = this.getValueOfPropertyAt(i, j, type); + currentFill = this.getValueOfPropertyAt(i, j, 'fill'); + _size = this.getHeightOfChar(i, j); + _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); + if (path && currentDecoration && currentFill) { + ctx.save(); ctx.fillStyle = lastFill; + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth, + -charBox.kernedWidth / 2, + offsetY * _size + _dy, + charBox.kernedWidth, this.fontSize / 15 ); + ctx.restore(); + } + else if ( + (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) + && boxWidth > 0 + ) { + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + if (lastDecoration && lastFill) { + ctx.fillStyle = lastFill; + ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth, + this.fontSize / 15 + ); + } + boxStart = charBox.left; + boxWidth = charBox.width; + lastDecoration = currentDecoration; + lastFill = currentFill; + size = _size; + dy = _dy; + } + else { + boxWidth += charBox.kernedWidth; } - boxStart = charBox.left; - boxWidth = charBox.width; - lastDecoration = currentDecoration; - lastFill = currentFill; - size = _size; - dy = _dy; } - else { - boxWidth += charBox.kernedWidth; + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; } + ctx.fillStyle = currentFill; + currentDecoration && currentFill && ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth - charSpacing, + this.fontSize / 15 + ); + topOffset += heightOfLine; } - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - ctx.fillStyle = currentFill; - currentDecoration && currentFill && ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth - charSpacing, - this.fontSize / 15 - ); - topOffset += heightOfLine; - } - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** - * return font declaration string for canvas context - * @param {Object} [styleObject] object - * @returns {String} font declaration formatted for canvas context. - */ - _getFontDeclaration: function(styleObject, forMeasuring) { - var style = styleObject || this, family = this.fontFamily, - fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; - var fontFamily = family === undefined || - family.indexOf('\'') > -1 || family.indexOf(',') > -1 || - family.indexOf('"') > -1 || fontIsGeneric - ? style.fontFamily : '"' + style.fontFamily + '"'; - return [ - // node-canvas needs "weight style", while browsers need "style weight" - // verify if this can be fixed in JSDOM - (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), - (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), - forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', - fontFamily - ].join(' '); - }, - - /** - * Renders text instance on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - render: function(ctx) { - // do not render if object is not visible - if (!this.visible) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - } - this.callSuper('render', ctx); - }, + /** + * return font declaration string for canvas context + * @param {Object} [styleObject] object + * @returns {String} font declaration formatted for canvas context. + */ + _getFontDeclaration: function(styleObject, forMeasuring) { + var style = styleObject || this, family = this.fontFamily, + fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; + var fontFamily = family === undefined || + family.indexOf('\'') > -1 || family.indexOf(',') > -1 || + family.indexOf('"') > -1 || fontIsGeneric + ? style.fontFamily : '"' + style.fontFamily + '"'; + return [ + // node-canvas needs "weight style", while browsers need "style weight" + // verify if this can be fixed in JSDOM + (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), + (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), + forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', + fontFamily + ].join(' '); + }, - /** - * Returns the text as an array of lines. - * @param {String} text text to split - * @returns {Array} Lines in the text - */ - _splitTextIntoLines: function(text) { - var lines = text.split(this._reNewline), - newLines = new Array(lines.length), - newLine = ['\n'], - newText = []; - for (var i = 0; i < lines.length; i++) { - newLines[i] = fabric.util.string.graphemeSplit(lines[i]); - newText = newText.concat(newLines[i], newLine); - } - newText.pop(); - return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; - }, + /** + * Renders text instance on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + // do not render if object is not visible + if (!this.visible) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + } + this.callSuper('render', ctx); + }, - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function(propertiesToInclude) { - var allProperties = additionalProps.concat(propertiesToInclude); - var obj = this.callSuper('toObject', allProperties); - // styles will be overridden with a properly cloned structure - obj.styles = clone(this.styles, true); - if (obj.path) { - obj.path = this.path.toObject(); - } - return obj; - }, + /** + * Override this method to customize grapheme splitting + * @param {string} value + * @returns {string[]} array of graphemes + */ + graphemeSplit: function (value) { + return fabric.util.string.graphemeSplit(value); + }, - /** - * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. - * @param {String|Object} key Property name or object (if object, iterate over the object properties) - * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) - * @return {fabric.Object} thisArg - * @chainable - */ - set: function(key, value) { - this.callSuper('set', key, value); - var needsDims = false; - var isAddingPath = false; - if (typeof key === 'object') { - for (var _key in key) { - if (_key === 'path') { - this.setPathInfo(); + /** + * Returns the text as an array of lines. + * @param {String} text text to split + * @returns {Array} Lines in the text + */ + _splitTextIntoLines: function(text) { + var lines = text.split(this._reNewline), + newLines = new Array(lines.length), + newLine = ['\n'], + newText = []; + for (var i = 0; i < lines.length; i++) { + newLines[i] = this.graphemeSplit(lines[i]); + newText = newText.concat(newLines[i], newLine); + } + newText.pop(); + return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; + }, + + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var allProperties = additionalProps.concat(propertiesToInclude); + var obj = this.callSuper('toObject', allProperties); + // styles will be overridden with a properly cloned structure + obj.styles = clone(this.styles, true); + if (obj.path) { + obj.path = this.path.toObject(); + } + return obj; + }, + + /** + * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. + * @param {String|Object} key Property name or object (if object, iterate over the object properties) + * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) + * @return {fabric.Object} thisArg + * @chainable + */ + set: function(key, value) { + this.callSuper('set', key, value); + var needsDims = false; + var isAddingPath = false; + if (typeof key === 'object') { + for (var _key in key) { + if (_key === 'path') { + this.setPathInfo(); + } + needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; + isAddingPath = isAddingPath || _key === 'path'; } - needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; - isAddingPath = isAddingPath || _key === 'path'; } + else { + needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; + isAddingPath = key === 'path'; + } + if (isAddingPath) { + this.setPathInfo(); + } + if (needsDims) { + this.initDimensions(); + this.setCoords(); + } + return this; + }, + + /** + * Returns complexity of an instance + * @return {Number} complexity + */ + complexity: function() { + return 1; } - else { - needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; - isAddingPath = key === 'path'; - } - if (isAddingPath) { - this.setPathInfo(); - } - if (needsDims) { - this.initDimensions(); - this.setCoords(); - } - return this; - }, + }); + /* _FROM_SVG_START_ */ /** - * Returns complexity of an instance - * @return {Number} complexity + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement}) + * @static + * @memberOf fabric.Text + * @see: http://www.w3.org/TR/SVG/text.html#TextElement */ - complexity: function() { - return 1; - } - }); - - /* _FROM_SVG_START_ */ - /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement}) - * @static - * @memberOf fabric.Text - * @see: http://www.w3.org/TR/SVG/text.html#TextElement - */ - fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( - 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); - - /** - * Default SVG font size - * @static - * @memberOf fabric.Text - */ - fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; - - /** - * Returns fabric.Text instance from an SVG element (not yet implemented) - * @static - * @memberOf fabric.Text - * @param {SVGElement} element Element to parse - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object - */ - fabric.Text.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); - } + fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( + 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); - var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), - parsedAnchor = parsedAttributes.textAnchor || 'left'; - options = fabric.util.object.extend((options ? clone(options) : { }), parsedAttributes); + /** + * Default SVG font size + * @static + * @memberOf fabric.Text + */ + fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; - options.top = options.top || 0; - options.left = options.left || 0; - if (parsedAttributes.textDecoration) { - var textDecoration = parsedAttributes.textDecoration; - if (textDecoration.indexOf('underline') !== -1) { - options.underline = true; - } - if (textDecoration.indexOf('overline') !== -1) { - options.overline = true; - } - if (textDecoration.indexOf('line-through') !== -1) { - options.linethrough = true; + /** + * Returns fabric.Text instance from an SVG element (not yet implemented) + * @static + * @memberOf fabric.Text + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Text.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); } - delete options.textDecoration; - } - if ('dx' in parsedAttributes) { - options.left += parsedAttributes.dx; - } - if ('dy' in parsedAttributes) { - options.top += parsedAttributes.dy; - } - if (!('fontSize' in options)) { - options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; - } - var textContent = ''; + var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), + parsedAnchor = parsedAttributes.textAnchor || 'left'; + options = Object.assign({}, options, parsedAttributes); - // The XML is not properly parsed in IE9 so a workaround to get - // textContent is through firstChild.data. Another workaround would be - // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) - if (!('textContent' in element)) { - if ('firstChild' in element && element.firstChild !== null) { - if ('data' in element.firstChild && element.firstChild.data !== null) { - textContent = element.firstChild.data; + options.top = options.top || 0; + options.left = options.left || 0; + if (parsedAttributes.textDecoration) { + var textDecoration = parsedAttributes.textDecoration; + if (textDecoration.indexOf('underline') !== -1) { + options.underline = true; + } + if (textDecoration.indexOf('overline') !== -1) { + options.overline = true; } + if (textDecoration.indexOf('line-through') !== -1) { + options.linethrough = true; + } + delete options.textDecoration; } - } - else { - textContent = element.textContent; - } - - textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); - var originalStrokeWidth = options.strokeWidth; - options.strokeWidth = 0; - - var text = new fabric.Text(textContent, options), - textHeightScaleFactor = text.getScaledHeight() / text.height, - lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, - scaledDiff = lineHeightDiff * textHeightScaleFactor, - textHeight = text.getScaledHeight() + scaledDiff, - offX = 0; - /* - Adjust positioning: - x/y attributes in SVG correspond to the bottom-left corner of text bounding box - fabric output by default at top, left. - */ - if (parsedAnchor === 'center') { - offX = text.getScaledWidth() / 2; - } - if (parsedAnchor === 'right') { - offX = text.getScaledWidth(); - } - text.set({ - left: text.left - offX, - top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, - strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, - }); - callback(text); - }; - /* _FROM_SVG_END_ */ - - /** - * Returns fabric.Text instance from an object representation - * @static - * @memberOf fabric.Text - * @param {Object} object plain js Object to create an instance from - * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created - */ - fabric.Text.fromObject = function(object, callback) { - var objectCopy = clone(object), path = object.path; - delete objectCopy.path; - return fabric.Object._fromObject('Text', objectCopy, function(textInstance) { - if (path) { - fabric.Object._fromObject('Path', path, function(pathInstance) { - textInstance.set('path', pathInstance); - callback(textInstance); - }, 'path'); + if ('dx' in parsedAttributes) { + options.left += parsedAttributes.dx; } - else { - callback(textInstance); + if ('dy' in parsedAttributes) { + options.top += parsedAttributes.dy; + } + if (!('fontSize' in options)) { + options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; } - }, 'text'); - }; - - fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; - - fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); - -})(typeof exports !== 'undefined' ? exports : this); + var textContent = ''; -(function() { - fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** - * Returns true if object has no styling or no styling in a line - * @param {Number} lineIndex , lineIndex is on wrapped lines. - * @return {Boolean} - */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { - return true; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return true; - } - var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; + // The XML is not properly parsed in IE9 so a workaround to get + // textContent is through firstChild.data. Another workaround would be + // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) + if (!('textContent' in element)) { + if ('firstChild' in element && element.firstChild !== null) { + if ('data' in element.firstChild && element.firstChild.data !== null) { + textContent = element.firstChild.data; } } } - return true; - }, - - /** - * Returns true if object has a style property or has it ina specified line - * This function is used to detect if a text will use a particular property or not. - * @param {String} property to check for - * @param {Number} lineIndex to check the style on - * @return {Boolean} - */ - styleHas: function(property, lineIndex) { - if (!this.styles || !property || property === '') { - return false; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return false; + else { + textContent = element.textContent; + } + + textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); + var originalStrokeWidth = options.strokeWidth; + options.strokeWidth = 0; + + var text = new fabric.Text(textContent, options), + textHeightScaleFactor = text.getScaledHeight() / text.height, + lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, + scaledDiff = lineHeightDiff * textHeightScaleFactor, + textHeight = text.getScaledHeight() + scaledDiff, + offX = 0; + /* + Adjust positioning: + x/y attributes in SVG correspond to the bottom-left corner of text bounding box + fabric output by default at top, left. + */ + if (parsedAnchor === 'center') { + offX = text.getScaledWidth() / 2; } - var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; - // eslint-disable-next-line - for (var p1 in obj) { - // eslint-disable-next-line - for (var p2 in obj[p1]) { - if (typeof obj[p1][p2][property] !== 'undefined') { - return true; - } - } + if (parsedAnchor === 'right') { + offX = text.getScaledWidth(); } - return false; - }, + text.set({ + left: text.left - offX, + top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, + strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, + }); + callback(text); + }; + /* _FROM_SVG_END_ */ /** - * Check if characters in a text have a value for a property - * whose value matches the textbox's value for that property. If so, - * the character-level property is deleted. If the character - * has no other properties, then it is also deleted. Finally, - * if the line containing that character has no other characters - * then it also is deleted. - * - * @param {string} property The property to compare between characters and text. + * Returns fabric.Text instance from an object representation + * @static + * @memberOf fabric.Text + * @param {Object} object plain js Object to create an instance from + * @returns {Promise} */ - cleanStyle: function(property) { - if (!this.styles || !property || property === '') { - return false; - } - var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, - allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; - // eslint-disable-next-line - for (var p1 in obj) { - letterCount = 0; - // eslint-disable-next-line - for (var p2 in obj[p1]) { - var styleObject = obj[p1][p2], - stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); + fabric.Text.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Text, object, 'text'); + }; - stylesCount++; + fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; - if (stylePropertyHasBeenSet) { - if (!stylePropertyValue) { - stylePropertyValue = styleObject[property]; - } - else if (styleObject[property] !== stylePropertyValue) { - allStyleObjectPropertiesMatch = false; - } + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); - if (styleObject[property] === this[property]) { - delete styleObject[property]; - } - } - else { - allStyleObjectPropertiesMatch = false; - } + })(typeof exports !== 'undefined' ? exports : window); - if (Object.keys(styleObject).length !== 0) { - letterCount++; - } - else { - delete obj[p1][p2]; + (function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + /** + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} + */ + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return true; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; + } } } + return true; + }, - if (letterCount === 0) { - delete obj[p1]; + /** + * Returns true if object has a style property or has it ina specified line + * This function is used to detect if a text will use a particular property or not. + * @param {String} property to check for + * @param {Number} lineIndex to check the style on + * @return {Boolean} + */ + styleHas: function(property, lineIndex) { + if (!this.styles || !property || property === '') { + return false; } - } - // if every grapheme has the same style set then - // delete those styles and set it on the parent - for (var i = 0; i < this._textLines.length; i++) { - graphemeCount += this._textLines[i].length; - } - if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { - this[property] = stylePropertyValue; - this.removeStyle(property); - } - }, - - /** - * Remove a style property or properties from all individual character styles - * in a text object. Deletes the character style object if it contains no other style - * props. Deletes a line style object if it contains no other character styles. - * - * @param {String} props The property to remove from character styles. - */ - removeStyle: function(property) { - if (!this.styles || !property || property === '') { - return; - } - var obj = this.styles, line, lineNum, charNum; - for (lineNum in obj) { - line = obj[lineNum]; - for (charNum in line) { - delete line[charNum][property]; - if (Object.keys(line[charNum]).length === 0) { - delete line[charNum]; - } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return false; } - if (Object.keys(line).length === 0) { - delete obj[lineNum]; + var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; + // eslint-disable-next-line + for (var p1 in obj) { + // eslint-disable-next-line + for (var p2 in obj[p1]) { + if (typeof obj[p1][p2][property] !== 'undefined') { + return true; + } + } } - } - }, - - /** - * @private - */ - _extendStyles: function(index, styles) { - var loc = this.get2DCursorLocation(index); - - if (!this._getLineStyle(loc.lineIndex)) { - this._setLineStyle(loc.lineIndex); - } - - if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { - this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); - } - - fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); - }, + return false; + }, - /** - * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) - * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. - * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles. - */ - get2DCursorLocation: function(selectionStart, skipWrapping) { - if (typeof selectionStart === 'undefined') { - selectionStart = this.selectionStart; - } - var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, - len = lines.length; - for (var i = 0; i < len; i++) { - if (selectionStart <= lines[i].length) { - return { - lineIndex: i, - charIndex: selectionStart - }; + /** + * Check if characters in a text have a value for a property + * whose value matches the textbox's value for that property. If so, + * the character-level property is deleted. If the character + * has no other properties, then it is also deleted. Finally, + * if the line containing that character has no other characters + * then it also is deleted. + * + * @param {string} property The property to compare between characters and text. + */ + cleanStyle: function(property) { + if (!this.styles || !property || property === '') { + return false; } - selectionStart -= lines[i].length + this.missingNewlineOffset(i); - } - return { - lineIndex: i - 1, - charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart - }; - }, + var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, + allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; + // eslint-disable-next-line + for (var p1 in obj) { + letterCount = 0; + // eslint-disable-next-line + for (var p2 in obj[p1]) { + var styleObject = obj[p1][p2], + stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); + + stylesCount++; + + if (stylePropertyHasBeenSet) { + if (!stylePropertyValue) { + stylePropertyValue = styleObject[property]; + } + else if (styleObject[property] !== stylePropertyValue) { + allStyleObjectPropertiesMatch = false; + } - /** - * Gets style of a current selection/cursor (at the start position) - * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used. - * @param {Number} [startIndex] Start index to get styles at - * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 - * @param {Boolean} [complete] get full style or not - * @return {Array} styles an array with one, zero or more Style objects - */ - getSelectionStyles: function(startIndex, endIndex, complete) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - var styles = []; - for (var i = startIndex; i < endIndex; i++) { - styles.push(this.getStyleAtPosition(i, complete)); - } - return styles; - }, + if (styleObject[property] === this[property]) { + delete styleObject[property]; + } + } + else { + allStyleObjectPropertiesMatch = false; + } - /** - * Gets style of a current selection/cursor position - * @param {Number} position to get styles at - * @param {Boolean} [complete] full style if true - * @return {Object} style Style object at a specified index - * @private - */ - getStyleAtPosition: function(position, complete) { - var loc = this.get2DCursorLocation(position), - style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : - this._getStyleDeclaration(loc.lineIndex, loc.charIndex); - return style || {}; - }, + if (Object.keys(styleObject).length !== 0) { + letterCount++; + } + else { + delete obj[p1][p2]; + } + } - /** - * Sets style of a current selection, if no selection exist, do not set anything. - * @param {Object} [styles] Styles object - * @param {Number} [startIndex] Start index to get styles at - * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 - * @return {fabric.IText} thisArg - * @chainable - */ - setSelectionStyles: function(styles, startIndex, endIndex) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - for (var i = startIndex; i < endIndex; i++) { - this._extendStyles(i, styles); - } - /* not included in _extendStyles to avoid clearing cache more than once */ - this._forceClearCache = true; - return this; - }, + if (letterCount === 0) { + delete obj[p1]; + } + } + // if every grapheme has the same style set then + // delete those styles and set it on the parent + for (var i = 0; i < this._textLines.length; i++) { + graphemeCount += this._textLines[i].length; + } + if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { + this[property] = stylePropertyValue; + this.removeStyle(property); + } + }, - /** - * get the reference, not a clone, of the style object for a given character - * @param {Number} lineIndex - * @param {Number} charIndex - * @return {Object} style object - */ - _getStyleDeclaration: function(lineIndex, charIndex) { - var lineStyle = this.styles && this.styles[lineIndex]; - if (!lineStyle) { - return null; - } - return lineStyle[charIndex]; - }, + /** + * Remove a style property or properties from all individual character styles + * in a text object. Deletes the character style object if it contains no other style + * props. Deletes a line style object if it contains no other character styles. + * + * @param {String} props The property to remove from character styles. + */ + removeStyle: function(property) { + if (!this.styles || !property || property === '') { + return; + } + var obj = this.styles, line, lineNum, charNum; + for (lineNum in obj) { + line = obj[lineNum]; + for (charNum in line) { + delete line[charNum][property]; + if (Object.keys(line[charNum]).length === 0) { + delete line[charNum]; + } + } + if (Object.keys(line).length === 0) { + delete obj[lineNum]; + } + } + }, - /** - * return a new object that contains all the style property for a character - * the object returned is newly created - * @param {Number} lineIndex of the line where the character is - * @param {Number} charIndex position of the character on the line - * @return {Object} style object - */ - getCompleteStyleDeclaration: function(lineIndex, charIndex) { - var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, - styleObject = { }, prop; - for (var i = 0; i < this._styleProperties.length; i++) { - prop = this._styleProperties[i]; - styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; - } - return styleObject; - }, + /** + * @private + */ + _extendStyles: function(index, styles) { + var loc = this.get2DCursorLocation(index); - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @param {Object} style - * @private - */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - this.styles[lineIndex][charIndex] = style; - }, + if (!this._getLineStyle(loc.lineIndex)) { + this._setLineStyle(loc.lineIndex); + } - /** - * - * @param {Number} lineIndex - * @param {Number} charIndex - * @private - */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { - delete this.styles[lineIndex][charIndex]; - }, + if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { + this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); + } - /** - * @param {Number} lineIndex - * @return {Boolean} if the line exists or not - * @private - */ - _getLineStyle: function(lineIndex) { - return !!this.styles[lineIndex]; - }, + fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); + }, - /** - * Set the line style to an empty object so that is initialized - * @param {Number} lineIndex - * @private - */ - _setLineStyle: function(lineIndex) { - this.styles[lineIndex] = {}; - }, + /** + * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) + * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. + * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles. + */ + get2DCursorLocation: function(selectionStart, skipWrapping) { + if (typeof selectionStart === 'undefined') { + selectionStart = this.selectionStart; + } + var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, + len = lines.length; + for (var i = 0; i < len; i++) { + if (selectionStart <= lines[i].length) { + return { + lineIndex: i, + charIndex: selectionStart + }; + } + selectionStart -= lines[i].length + this.missingNewlineOffset(i); + } + return { + lineIndex: i - 1, + charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart + }; + }, - /** - * @param {Number} lineIndex - * @private - */ - _deleteLineStyle: function(lineIndex) { - delete this.styles[lineIndex]; - } - }); -})(); + /** + * Gets style of a current selection/cursor (at the start position) + * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used. + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @param {Boolean} [complete] get full style or not + * @return {Array} styles an array with one, zero or more Style objects + */ + getSelectionStyles: function(startIndex, endIndex, complete) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + var styles = []; + for (var i = startIndex; i < endIndex; i++) { + styles.push(this.getStyleAtPosition(i, complete)); + } + return styles; + }, + /** + * Gets style of a current selection/cursor position + * @param {Number} position to get styles at + * @param {Boolean} [complete] full style if true + * @return {Object} style Style object at a specified index + * @private + */ + getStyleAtPosition: function(position, complete) { + var loc = this.get2DCursorLocation(position), + style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : + this._getStyleDeclaration(loc.lineIndex, loc.charIndex); + return style || {}; + }, -(function() { + /** + * Sets style of a current selection, if no selection exist, do not set anything. + * @param {Object} [styles] Styles object + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @return {fabric.IText} thisArg + * @chainable + */ + setSelectionStyles: function(styles, startIndex, endIndex) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + for (var i = startIndex; i < endIndex; i++) { + this._extendStyles(i, styles); + } + /* not included in _extendStyles to avoid clearing cache more than once */ + this._forceClearCache = true; + return this; + }, - function parseDecoration(object) { - if (object.textDecoration) { - object.textDecoration.indexOf('underline') > -1 && (object.underline = true); - object.textDecoration.indexOf('line-through') > -1 && (object.linethrough = true); - object.textDecoration.indexOf('overline') > -1 && (object.overline = true); - delete object.textDecoration; - } - } + /** + * get the reference, not a clone, of the style object for a given character + * @param {Number} lineIndex + * @param {Number} charIndex + * @return {Object} style object + */ + _getStyleDeclaration: function(lineIndex, charIndex) { + var lineStyle = this.styles && this.styles[lineIndex]; + if (!lineStyle) { + return null; + } + return lineStyle[charIndex]; + }, - /** - * IText class (introduced in v1.4) Events are also fired with "text:" - * prefix when observing canvas. - * @class fabric.IText - * @extends fabric.Text - * @mixes fabric.Observable - * - * @fires changed - * @fires selection:changed - * @fires editing:entered - * @fires editing:exited - * - * @return {fabric.IText} thisArg - * @see {@link fabric.IText#initialize} for constructor definition - * - *

Supported key combinations:

- * 
-   *   Move cursor:                    left, right, up, down
-   *   Select character:               shift + left, shift + right
-   *   Select text vertically:         shift + up, shift + down
-   *   Move cursor by word:            alt + left, alt + right
-   *   Select words:                   shift + alt + left, shift + alt + right
-   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
-   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
-   *   Jump to start/end of text:      cmd + up, cmd + down
-   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
-   *   Delete character:               backspace
-   *   Delete word:                    alt + backspace
-   *   Delete line:                    cmd + backspace
-   *   Forward delete:                 delete
-   *   Copy text:                      ctrl/cmd + c
-   *   Paste text:                     ctrl/cmd + v
-   *   Cut text:                       ctrl/cmd + x
-   *   Select entire text:             ctrl/cmd + a
-   *   Quit editing                    tab or esc
-   *
- * - *

Supported mouse/touch combination

- * 
-   *   Position cursor:                click/touch
-   *   Create selection:               click/touch & drag
-   *   Create selection:               click & shift + click
-   *   Select word:                    double click
-   *   Select line:                    triple click
-   *
- */ - fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { + /** + * return a new object that contains all the style property for a character + * the object returned is newly created + * @param {Number} lineIndex of the line where the character is + * @param {Number} charIndex position of the character on the line + * @return {Object} style object + */ + getCompleteStyleDeclaration: function(lineIndex, charIndex) { + var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, + styleObject = { }, prop; + for (var i = 0; i < this._styleProperties.length; i++) { + prop = this._styleProperties[i]; + styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; + } + return styleObject; + }, - /** - * Type of an object - * @type String - * @default - */ - type: 'i-text', + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {Object} style + * @private + */ + _setStyleDeclaration: function(lineIndex, charIndex, style) { + this.styles[lineIndex][charIndex] = style; + }, - /** - * Index where text selection starts (or where cursor is when there is no selection) - * @type Number - * @default - */ - selectionStart: 0, + /** + * + * @param {Number} lineIndex + * @param {Number} charIndex + * @private + */ + _deleteStyleDeclaration: function(lineIndex, charIndex) { + delete this.styles[lineIndex][charIndex]; + }, - /** - * Index where text selection ends - * @type Number - * @default - */ - selectionEnd: 0, + /** + * @param {Number} lineIndex + * @return {Boolean} if the line exists or not + * @private + */ + _getLineStyle: function(lineIndex) { + return !!this.styles[lineIndex]; + }, - /** - * Color of text selection - * @type String - * @default - */ - selectionColor: 'rgba(17,119,255,0.3)', + /** + * Set the line style to an empty object so that is initialized + * @param {Number} lineIndex + * @private + */ + _setLineStyle: function(lineIndex) { + this.styles[lineIndex] = {}; + }, - /** - * Indicates whether text is in editing mode - * @type Boolean - * @default - */ - isEditing: false, + /** + * @param {Number} lineIndex + * @private + */ + _deleteLineStyle: function(lineIndex) { + delete this.styles[lineIndex]; + } + }); + })(typeof exports !== 'undefined' ? exports : window); + (function(global) { + var fabric = global.fabric; /** - * Indicates whether a text can be edited - * @type Boolean - * @default + * IText class (introduced in v1.4) Events are also fired with "text:" + * prefix when observing canvas. + * @class fabric.IText + * @extends fabric.Text + * @mixes fabric.Observable + * + * @fires changed + * @fires selection:changed + * @fires editing:entered + * @fires editing:exited + * + * @return {fabric.IText} thisArg + * @see {@link fabric.IText#initialize} for constructor definition + * + *

Supported key combinations:

+ * 
+     *   Move cursor:                    left, right, up, down
+     *   Select character:               shift + left, shift + right
+     *   Select text vertically:         shift + up, shift + down
+     *   Move cursor by word:            alt + left, alt + right
+     *   Select words:                   shift + alt + left, shift + alt + right
+     *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
+     *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
+     *   Jump to start/end of text:      cmd + up, cmd + down
+     *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
+     *   Delete character:               backspace
+     *   Delete word:                    alt + backspace
+     *   Delete line:                    cmd + backspace
+     *   Forward delete:                 delete
+     *   Copy text:                      ctrl/cmd + c
+     *   Paste text:                     ctrl/cmd + v
+     *   Cut text:                       ctrl/cmd + x
+     *   Select entire text:             ctrl/cmd + a
+     *   Quit editing                    tab or esc
+     *
+ * + *

Supported mouse/touch combination

+ * 
+     *   Position cursor:                click/touch
+     *   Create selection:               click/touch & drag
+     *   Create selection:               click & shift + click
+     *   Select word:                    double click
+     *   Select line:                    triple click
+     *
*/ - editable: true, + fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { - /** - * Border color of text object while it's in editing mode - * @type String - * @default - */ - editingBorderColor: 'rgba(102,153,255,0.25)', + /** + * Type of an object + * @type String + * @default + */ + type: 'i-text', - /** - * Width of cursor (in px) - * @type Number - * @default - */ - cursorWidth: 2, + /** + * Index where text selection starts (or where cursor is when there is no selection) + * @type Number + * @default + */ + selectionStart: 0, - /** - * Color of text cursor color in editing mode. - * if not set (default) will take color from the text. - * if set to a color value that fabric can understand, it will - * be used instead of the color of the text at the current position. - * @type String - * @default - */ - cursorColor: '', + /** + * Index where text selection ends + * @type Number + * @default + */ + selectionEnd: 0, - /** - * Delay between cursor blink (in ms) - * @type Number - * @default - */ - cursorDelay: 1000, + /** + * Color of text selection + * @type String + * @default + */ + selectionColor: 'rgba(17,119,255,0.3)', - /** - * Duration of cursor fadein (in ms) - * @type Number - * @default - */ - cursorDuration: 600, + /** + * Indicates whether text is in editing mode + * @type Boolean + * @default + */ + isEditing: false, - /** - * Indicates whether internal text char widths can be cached - * @type Boolean - * @default - */ - caching: true, + /** + * Indicates whether a text can be edited + * @type Boolean + * @default + */ + editable: true, - /** - * DOM container to append the hiddenTextarea. - * An alternative to attaching to the document.body. - * Useful to reduce laggish redraw of the full document.body tree and - * also with modals event capturing that won't let the textarea take focus. - * @type HTMLElement - * @default - */ - hiddenTextareaContainer: null, + /** + * Border color of text object while it's in editing mode + * @type String + * @default + */ + editingBorderColor: 'rgba(102,153,255,0.25)', - /** - * @private - */ - _reSpace: /\s|\n/, + /** + * Width of cursor (in px) + * @type Number + * @default + */ + cursorWidth: 2, - /** - * @private - */ - _currentCursorOpacity: 0, + /** + * Color of text cursor color in editing mode. + * if not set (default) will take color from the text. + * if set to a color value that fabric can understand, it will + * be used instead of the color of the text at the current position. + * @type String + * @default + */ + cursorColor: '', - /** - * @private - */ - _selectionDirection: null, + /** + * Delay between cursor blink (in ms) + * @type Number + * @default + */ + cursorDelay: 1000, - /** - * @private - */ - _abortCursorAnimation: false, + /** + * Duration of cursor fadein (in ms) + * @type Number + * @default + */ + cursorDuration: 600, - /** - * @private - */ - __widthOfSpace: [], + /** + * Indicates whether internal text char widths can be cached + * @type Boolean + * @default + */ + caching: true, - /** - * Helps determining when the text is in composition, so that the cursor - * rendering is altered. - */ - inCompositionMode: false, + /** + * DOM container to append the hiddenTextarea. + * An alternative to attaching to the document.body. + * Useful to reduce laggish redraw of the full document.body tree and + * also with modals event capturing that won't let the textarea take focus. + * @type HTMLElement + * @default + */ + hiddenTextareaContainer: null, - /** - * Constructor - * @param {String} text Text string - * @param {Object} [options] Options object - * @return {fabric.IText} thisArg - */ - initialize: function(text, options) { - this.callSuper('initialize', text, options); - this.initBehavior(); - }, + /** + * @private + */ + _reSpace: /\s|\n/, - /** - * Sets selection start (left boundary of a selection) - * @param {Number} index Index to set selection start to - */ - setSelectionStart: function(index) { - index = Math.max(index, 0); - this._updateAndFire('selectionStart', index); - }, + /** + * @private + */ + _currentCursorOpacity: 0, - /** - * Sets selection end (right boundary of a selection) - * @param {Number} index Index to set selection end to - */ - setSelectionEnd: function(index) { - index = Math.min(index, this.text.length); - this._updateAndFire('selectionEnd', index); - }, + /** + * @private + */ + _selectionDirection: null, - /** - * @private - * @param {String} property 'selectionStart' or 'selectionEnd' - * @param {Number} index new position of property - */ - _updateAndFire: function(property, index) { - if (this[property] !== index) { - this._fireSelectionChanged(); - this[property] = index; - } - this._updateTextarea(); - }, + /** + * @private + */ + _abortCursorAnimation: false, - /** - * Fires the even of selection changed - * @private - */ - _fireSelectionChanged: function() { - this.fire('selection:changed'); - this.canvas && this.canvas.fire('text:selection:changed', { target: this }); - }, + /** + * @private + */ + __widthOfSpace: [], - /** - * Initialize text dimensions. Render all text on given context - * or on a offscreen canvas to get the text width with measureText. - * Updates this.width and this.height with the proper values. - * Does not return dimensions. - * @private - */ - initDimensions: function() { - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this.callSuper('initDimensions'); - }, + /** + * Helps determining when the text is in composition, so that the cursor + * rendering is altered. + */ + inCompositionMode: false, + + /** + * Constructor + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.IText} thisArg + */ + initialize: function(text, options) { + this.callSuper('initialize', text, options); + this.initBehavior(); + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - render: function(ctx) { - this.clearContextTop(); - this.callSuper('render', ctx); - // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor - // the correct position but not at every cursor animation. - this.cursorOffsetCache = { }; - this.renderCursorOrSelection(); - }, + /** + * While editing handle differently + * @private + * @param {string} key + * @param {*} value + */ + _set: function (key, value) { + if (this.isEditing && this._savedProps && key in this._savedProps) { + this._savedProps[key] = value; + } + else { + this.callSuper('_set', key, value); + } + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - this.callSuper('_render', ctx); - }, + /** + * Sets selection start (left boundary of a selection) + * @param {Number} index Index to set selection start to + */ + setSelectionStart: function(index) { + index = Math.max(index, 0); + this._updateAndFire('selectionStart', index); + }, - /** - * Prepare and clean the contextTop - */ - clearContextTop: function(skipRestore) { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; - } - var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - this.transform(ctx); - this._clearTextArea(ctx); - skipRestore || ctx.restore(); - }, - /** - * Renders cursor or selection (depending on what exists) - * it does on the contextTop. If contextTop is not available, do nothing. - */ - renderCursorOrSelection: function() { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; - } - var boundaries = this._getCursorBoundaries(), - ctx = this.canvas.contextTop; - this.clearContextTop(true); - if (this.selectionStart === this.selectionEnd) { - this.renderCursor(boundaries, ctx); - } - else { - this.renderSelection(boundaries, ctx); - } - ctx.restore(); - }, + /** + * Sets selection end (right boundary of a selection) + * @param {Number} index Index to set selection end to + */ + setSelectionEnd: function(index) { + index = Math.min(index, this.text.length); + this._updateAndFire('selectionEnd', index); + }, - _clearTextArea: function(ctx) { - // we add 4 pixel, to be sure to do not leave any pixel out - var width = this.width + 4, height = this.height + 4; - ctx.clearRect(-width / 2, -height / 2, width, height); - }, + /** + * @private + * @param {String} property 'selectionStart' or 'selectionEnd' + * @param {Number} index new position of property + */ + _updateAndFire: function(property, index) { + if (this[property] !== index) { + this._fireSelectionChanged(); + this[property] = index; + } + this._updateTextarea(); + }, - /** - * Returns cursor boundaries (left, top, leftOffset, topOffset) - * @private - * @param {Array} chars Array of characters - * @param {String} typeOfBoundaries - */ - _getCursorBoundaries: function(position) { + /** + * Fires the even of selection changed + * @private + */ + _fireSelectionChanged: function() { + this.fire('selection:changed'); + this.canvas && this.canvas.fire('text:selection:changed', { target: this }); + }, - // left/top are left/top of entire text box - // leftOffset/topOffset are offset from that left/top point of a text box + /** + * Initialize text dimensions. Render all text on given context + * or on a offscreen canvas to get the text width with measureText. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + * @private + */ + initDimensions: function() { + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this.callSuper('initDimensions'); + }, - if (typeof position === 'undefined') { - position = this.selectionStart; - } + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + this.clearContextTop(); + this.callSuper('render', ctx); + // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor + // the correct position but not at every cursor animation. + this.cursorOffsetCache = { }; + this.renderCursorOrSelection(); + }, - var left = this._getLeftOffset(), - top = this._getTopOffset(), - offsets = this._getCursorBoundariesOffsets(position); - return { - left: left, - top: top, - leftOffset: offsets.left, - topOffset: offsets.top - }; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + this.callSuper('_render', ctx); + }, - /** - * @private - */ - _getCursorBoundariesOffsets: function(position) { - if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { - return this.cursorOffsetCache; - } - var lineLeftOffset, - lineIndex, - charIndex, - topOffset = 0, - leftOffset = 0, - boundaries, - cursorPosition = this.get2DCursorLocation(position); - charIndex = cursorPosition.charIndex; - lineIndex = cursorPosition.lineIndex; - for (var i = 0; i < lineIndex; i++) { - topOffset += this.getHeightOfLine(i); - } - lineLeftOffset = this._getLineLeftOffset(lineIndex); - var bound = this.__charBounds[lineIndex][charIndex]; - bound && (leftOffset = bound.left); - if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { - leftOffset -= this._getWidthOfCharSpacing(); - } - boundaries = { - top: topOffset, - left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), - }; - if (this.direction === 'rtl') { - boundaries.left *= -1; - } - this.cursorOffsetCache = boundaries; - return this.cursorOffsetCache; - }, - - /** - * Renders cursor - * @param {Object} boundaries - * @param {CanvasRenderingContext2D} ctx transformed context to draw on - */ - renderCursor: function(boundaries, ctx) { - var cursorLocation = this.get2DCursorLocation(), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), - multiplier = this.scaleX * this.canvas.getZoom(), - cursorWidth = this.cursorWidth / multiplier, - topOffset = boundaries.topOffset, - dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); - topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight - - charHeight * (1 - this._fontSizeFraction); - - if (this.inCompositionMode) { - this.renderSelection(boundaries, ctx); - } - ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); - ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; - ctx.fillRect( - boundaries.left + boundaries.leftOffset - cursorWidth / 2, - topOffset + boundaries.top + dy, - cursorWidth, - charHeight); - }, - - /** - * Renders text selection - * @param {Object} boundaries Object with left/top/leftOffset/topOffset - * @param {CanvasRenderingContext2D} ctx transformed context to draw on - */ - renderSelection: function(boundaries, ctx) { - - var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, - selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, - isJustify = this.textAlign.indexOf('justify') !== -1, - start = this.get2DCursorLocation(selectionStart), - end = this.get2DCursorLocation(selectionEnd), - startLine = start.lineIndex, - endLine = end.lineIndex, - startChar = start.charIndex < 0 ? 0 : start.charIndex, - endChar = end.charIndex < 0 ? 0 : end.charIndex; - - for (var i = startLine; i <= endLine; i++) { - var lineOffset = this._getLineLeftOffset(i) || 0, - lineHeight = this.getHeightOfLine(i), - realLineHeight = 0, boxStart = 0, boxEnd = 0; - - if (i === startLine) { - boxStart = this.__charBounds[startLine][startChar].left; - } - if (i >= startLine && i < endLine) { - boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? - } - else if (i === endLine) { - if (endChar === 0) { - boxEnd = this.__charBounds[endLine][endChar].left; - } - else { - var charSpacing = this._getWidthOfCharSpacing(); - boxEnd = this.__charBounds[endLine][endChar - 1].left - + this.__charBounds[endLine][endChar - 1].width - charSpacing; - } + /** + * Prepare and clean the contextTop + */ + clearContextTop: function(skipRestore) { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; } - realLineHeight = lineHeight; - if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { - lineHeight /= this.lineHeight; + var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this.transform(ctx); + this._clearTextArea(ctx); + skipRestore || ctx.restore(); + }, + /** + * Renders cursor or selection (depending on what exists) + * it does on the contextTop. If contextTop is not available, do nothing. + */ + renderCursorOrSelection: function() { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; } - var drawStart = boundaries.left + lineOffset + boxStart, - drawWidth = boxEnd - boxStart, - drawHeight = lineHeight, extraTop = 0; - if (this.inCompositionMode) { - ctx.fillStyle = this.compositionColor || 'black'; - drawHeight = 1; - extraTop = lineHeight; + var boundaries = this._getCursorBoundaries(), + ctx = this.canvas.contextTop; + this.clearContextTop(true); + if (this.selectionStart === this.selectionEnd) { + this.renderCursor(boundaries, ctx); } else { - ctx.fillStyle = this.selectionColor; + this.renderSelection(boundaries, ctx); } - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - drawWidth; + ctx.restore(); + }, + + _clearTextArea: function(ctx) { + // we add 4 pixel, to be sure to do not leave any pixel out + var width = this.width + 4, height = this.height + 4; + ctx.clearRect(-width / 2, -height / 2, width, height); + }, + + /** + * Returns cursor boundaries (left, top, leftOffset, topOffset) + * @private + * @param {Array} chars Array of characters + * @param {String} typeOfBoundaries + */ + _getCursorBoundaries: function(position) { + + // left/top are left/top of entire text box + // leftOffset/topOffset are offset from that left/top point of a text box + + if (typeof position === 'undefined') { + position = this.selectionStart; } - ctx.fillRect( - drawStart, - boundaries.top + boundaries.topOffset + extraTop, - drawWidth, - drawHeight); - boundaries.topOffset += realLineHeight; - } - }, - /** - * High level function to know the height of the cursor. - * the currentChar is the one that precedes the cursor - * Returns fontSize of char at the current cursor - * Unused from the library, is for the end user - * @return {Number} Character font size - */ - getCurrentCharFontSize: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); - }, + var left = this._getLeftOffset(), + top = this._getTopOffset(), + offsets = this._getCursorBoundariesOffsets(position); + return { + left: left, + top: top, + leftOffset: offsets.left, + topOffset: offsets.top + }; + }, - /** - * High level function to know the color of the cursor. - * the currentChar is the one that precedes the cursor - * Returns color (fill) of char at the current cursor - * if the text object has a pattern or gradient for filler, it will return that. - * Unused by the library, is for the end user - * @return {String | fabric.Gradient | fabric.Pattern} Character color (fill) - */ - getCurrentCharColor: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); - }, + /** + * @private + */ + _getCursorBoundariesOffsets: function(position) { + if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { + return this.cursorOffsetCache; + } + var lineLeftOffset, + lineIndex, + charIndex, + topOffset = 0, + leftOffset = 0, + boundaries, + cursorPosition = this.get2DCursorLocation(position); + charIndex = cursorPosition.charIndex; + lineIndex = cursorPosition.lineIndex; + for (var i = 0; i < lineIndex; i++) { + topOffset += this.getHeightOfLine(i); + } + lineLeftOffset = this._getLineLeftOffset(lineIndex); + var bound = this.__charBounds[lineIndex][charIndex]; + bound && (leftOffset = bound.left); + if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { + leftOffset -= this._getWidthOfCharSpacing(); + } + boundaries = { + top: topOffset, + left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), + }; + if (this.direction === 'rtl') { + if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { + boundaries.left *= -1; + } + else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { + boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); + } + else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { + boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); + } + } + this.cursorOffsetCache = boundaries; + return this.cursorOffsetCache; + }, - /** - * Returns the cursor position for the getCurrent.. functions - * @private - */ - _getCurrentCharIndex: function() { - var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), - charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; - return { l: cursorPosition.lineIndex, c: charIndex }; - } - }); + /** + * Renders cursor + * @param {Object} boundaries + * @param {CanvasRenderingContext2D} ctx transformed context to draw on + */ + renderCursor: function(boundaries, ctx) { + var cursorLocation = this.get2DCursorLocation(), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), + multiplier = this.scaleX * this.canvas.getZoom(), + cursorWidth = this.cursorWidth / multiplier, + topOffset = boundaries.topOffset, + dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); + topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight + - charHeight * (1 - this._fontSizeFraction); - /** - * Returns fabric.IText instance from an object representation - * @static - * @memberOf fabric.IText - * @param {Object} object Object to create an instance from - * @param {function} [callback] invoked with new instance as argument - */ - fabric.IText.fromObject = function(object, callback) { - parseDecoration(object); - if (object.styles) { - for (var i in object.styles) { - for (var j in object.styles[i]) { - parseDecoration(object.styles[i][j]); + if (this.inCompositionMode) { + this.renderSelection(boundaries, ctx); } - } - } - fabric.Object._fromObject('IText', object, callback, 'text'); - }; -})(); + ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); + ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; + ctx.fillRect( + boundaries.left + boundaries.leftOffset - cursorWidth / 2, + topOffset + boundaries.top + dy, + cursorWidth, + charHeight); + }, + /** + * Renders text selection + * @param {Object} boundaries Object with left/top/leftOffset/topOffset + * @param {CanvasRenderingContext2D} ctx transformed context to draw on + */ + renderSelection: function(boundaries, ctx) { + + var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, + selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, + isJustify = this.textAlign.indexOf('justify') !== -1, + start = this.get2DCursorLocation(selectionStart), + end = this.get2DCursorLocation(selectionEnd), + startLine = start.lineIndex, + endLine = end.lineIndex, + startChar = start.charIndex < 0 ? 0 : start.charIndex, + endChar = end.charIndex < 0 ? 0 : end.charIndex; + + for (var i = startLine; i <= endLine; i++) { + var lineOffset = this._getLineLeftOffset(i) || 0, + lineHeight = this.getHeightOfLine(i), + realLineHeight = 0, boxStart = 0, boxEnd = 0; + + if (i === startLine) { + boxStart = this.__charBounds[startLine][startChar].left; + } + if (i >= startLine && i < endLine) { + boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? + } + else if (i === endLine) { + if (endChar === 0) { + boxEnd = this.__charBounds[endLine][endChar].left; + } + else { + var charSpacing = this._getWidthOfCharSpacing(); + boxEnd = this.__charBounds[endLine][endChar - 1].left + + this.__charBounds[endLine][endChar - 1].width - charSpacing; + } + } + realLineHeight = lineHeight; + if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { + lineHeight /= this.lineHeight; + } + var drawStart = boundaries.left + lineOffset + boxStart, + drawWidth = boxEnd - boxStart, + drawHeight = lineHeight, extraTop = 0; + if (this.inCompositionMode) { + ctx.fillStyle = this.compositionColor || 'black'; + drawHeight = 1; + extraTop = lineHeight; + } + else { + ctx.fillStyle = this.selectionColor; + } + if (this.direction === 'rtl') { + if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { + drawStart = this.width - drawStart - drawWidth; + } + else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { + drawStart = boundaries.left + lineOffset - boxEnd; + } + else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { + drawStart = boundaries.left + lineOffset - boxEnd; + } + } + ctx.fillRect( + drawStart, + boundaries.top + boundaries.topOffset + extraTop, + drawWidth, + drawHeight); + boundaries.topOffset += realLineHeight; + } + }, -(function() { + /** + * High level function to know the height of the cursor. + * the currentChar is the one that precedes the cursor + * Returns fontSize of char at the current cursor + * Unused from the library, is for the end user + * @return {Number} Character font size + */ + getCurrentCharFontSize: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); + }, - var clone = fabric.util.object.clone; + /** + * High level function to know the color of the cursor. + * the currentChar is the one that precedes the cursor + * Returns color (fill) of char at the current cursor + * if the text object has a pattern or gradient for filler, it will return that. + * Unused by the library, is for the end user + * @return {String | fabric.Gradient | fabric.Pattern} Character color (fill) + */ + getCurrentCharColor: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); + }, - fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + /** + * Returns the cursor position for the getCurrent.. functions + * @private + */ + _getCurrentCharIndex: function() { + var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), + charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; + return { l: cursorPosition.lineIndex, c: charIndex }; + } + }); /** - * Initializes all the interactive behavior of IText + * Returns fabric.IText instance from an object representation + * @static + * @memberOf fabric.IText + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - initBehavior: function() { - this.initAddedHandler(); - this.initRemovedHandler(); - this.initCursorSelectionHandlers(); - this.initDoubleClickSimulation(); - this.mouseMoveHandler = this.mouseMoveHandler.bind(this); - }, + fabric.IText.fromObject = function(object) { + return fabric.Object._fromObject(fabric.IText, object, 'text'); + }; + })(typeof exports !== 'undefined' ? exports : window); - onDeselect: function() { - this.isEditing && this.exitEditing(); - this.selected = false; - }, + (function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** - * Initializes "added" event handler - */ - initAddedHandler: function() { - var _this = this; - this.on('added', function() { - var canvas = _this.canvas; - if (canvas) { - if (!canvas._hasITextHandlers) { - canvas._hasITextHandlers = true; - _this._initCanvasHandlers(canvas); + /** + * Initializes all the interactive behavior of IText + */ + initBehavior: function() { + this.initAddedHandler(); + this.initRemovedHandler(); + this.initCursorSelectionHandlers(); + this.initDoubleClickSimulation(); + this.mouseMoveHandler = this.mouseMoveHandler.bind(this); + }, + + onDeselect: function() { + this.isEditing && this.exitEditing(); + this.selected = false; + }, + + /** + * Initializes "added" event handler + */ + initAddedHandler: function() { + var _this = this; + this.on('added', function (opt) { + // make sure we listen to the canvas added event + var canvas = opt.target; + if (canvas) { + if (!canvas._hasITextHandlers) { + canvas._hasITextHandlers = true; + _this._initCanvasHandlers(canvas); + } + canvas._iTextInstances = canvas._iTextInstances || []; + canvas._iTextInstances.push(_this); } - canvas._iTextInstances = canvas._iTextInstances || []; - canvas._iTextInstances.push(_this); - } - }); - }, + }); + }, - initRemovedHandler: function() { - var _this = this; - this.on('removed', function() { - var canvas = _this.canvas; - if (canvas) { - canvas._iTextInstances = canvas._iTextInstances || []; - fabric.util.removeFromArray(canvas._iTextInstances, _this); - if (canvas._iTextInstances.length === 0) { - canvas._hasITextHandlers = false; - _this._removeCanvasHandlers(canvas); + initRemovedHandler: function() { + var _this = this; + this.on('removed', function (opt) { + // make sure we listen to the canvas removed event + var canvas = opt.target; + if (canvas) { + canvas._iTextInstances = canvas._iTextInstances || []; + fabric.util.removeFromArray(canvas._iTextInstances, _this); + if (canvas._iTextInstances.length === 0) { + canvas._hasITextHandlers = false; + _this._removeCanvasHandlers(canvas); + } } - } - }); - }, + }); + }, - /** - * register canvas event to manage exiting on other instances - * @private - */ - _initCanvasHandlers: function(canvas) { - canvas._mouseUpITextHandler = function() { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.__isMousedown = false; - }); - } - }; - canvas.on('mouse:up', canvas._mouseUpITextHandler); - }, + /** + * register canvas event to manage exiting on other instances + * @private + */ + _initCanvasHandlers: function(canvas) { + canvas._mouseUpITextHandler = function() { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.__isMousedown = false; + }); + } + }; + canvas.on('mouse:up', canvas._mouseUpITextHandler); + }, - /** - * remove canvas event to manage exiting on other instances - * @private - */ - _removeCanvasHandlers: function(canvas) { - canvas.off('mouse:up', canvas._mouseUpITextHandler); - }, + /** + * remove canvas event to manage exiting on other instances + * @private + */ + _removeCanvasHandlers: function(canvas) { + canvas.off('mouse:up', canvas._mouseUpITextHandler); + }, - /** - * @private - */ - _tick: function() { - this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); - }, + /** + * @private + */ + _tick: function() { + this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); + }, - /** - * @private - */ - _animateCursor: function(obj, targetOpacity, duration, completeMethod) { + /** + * @private + */ + _animateCursor: function(obj, targetOpacity, duration, completeMethod) { - var tickState; + var tickState; - tickState = { - isAborted: false, - abort: function() { - this.isAborted = true; - }, - }; + tickState = { + isAborted: false, + abort: function() { + this.isAborted = true; + }, + }; - obj.animate('_currentCursorOpacity', targetOpacity, { - duration: duration, - onComplete: function() { - if (!tickState.isAborted) { - obj[completeMethod](); - } - }, - onChange: function() { - // we do not want to animate a selection, only cursor - if (obj.canvas && obj.selectionStart === obj.selectionEnd) { - obj.renderCursorOrSelection(); + obj.animate('_currentCursorOpacity', targetOpacity, { + duration: duration, + onComplete: function() { + if (!tickState.isAborted) { + obj[completeMethod](); + } + }, + onChange: function() { + // we do not want to animate a selection, only cursor + if (obj.canvas && obj.selectionStart === obj.selectionEnd) { + obj.renderCursorOrSelection(); + } + }, + abort: function() { + return tickState.isAborted; } - }, - abort: function() { - return tickState.isAborted; - } - }); - return tickState; - }, - - /** - * @private - */ - _onTickComplete: function() { + }); + return tickState; + }, - var _this = this; + /** + * @private + */ + _onTickComplete: function() { - if (this._cursorTimeout1) { - clearTimeout(this._cursorTimeout1); - } - this._cursorTimeout1 = setTimeout(function() { - _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); - }, 100); - }, + var _this = this; - /** - * Initializes delayed cursor - */ - initDelayedCursor: function(restart) { - var _this = this, - delay = restart ? 0 : this.cursorDelay; + if (this._cursorTimeout1) { + clearTimeout(this._cursorTimeout1); + } + this._cursorTimeout1 = setTimeout(function() { + _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); + }, 100); + }, - this.abortCursorAnimation(); - this._currentCursorOpacity = 1; - this._cursorTimeout2 = setTimeout(function() { - _this._tick(); - }, delay); - }, + /** + * Initializes delayed cursor + */ + initDelayedCursor: function(restart) { + var _this = this, + delay = restart ? 0 : this.cursorDelay; - /** - * Aborts cursor animation and clears all timeouts - */ - abortCursorAnimation: function() { - var shouldClear = this._currentTickState || this._currentTickCompleteState, - canvas = this.canvas; - this._currentTickState && this._currentTickState.abort(); - this._currentTickCompleteState && this._currentTickCompleteState.abort(); + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + if (delay) { + this._cursorTimeout2 = setTimeout(function () { + _this._tick(); + }, delay); + } + else { + this._tick(); + } + }, - clearTimeout(this._cursorTimeout1); - clearTimeout(this._cursorTimeout2); + /** + * Aborts cursor animation and clears all timeouts + */ + abortCursorAnimation: function() { + var shouldClear = this._currentTickState || this._currentTickCompleteState, + canvas = this.canvas; + this._currentTickState && this._currentTickState.abort(); + this._currentTickCompleteState && this._currentTickCompleteState.abort(); - this._currentCursorOpacity = 0; - // to clear just itext area we need to transform the context - // it may not be worth it - if (shouldClear && canvas) { - canvas.clearContext(canvas.contextTop || canvas.contextContainer); - } + clearTimeout(this._cursorTimeout1); + clearTimeout(this._cursorTimeout2); - }, + this._currentCursorOpacity = 0; + // to clear just itext area we need to transform the context + // it may not be worth it + if (shouldClear && canvas) { + canvas.clearContext(canvas.contextTop || canvas.contextContainer); + } - /** - * Selects entire text - * @return {fabric.IText} thisArg - * @chainable - */ - selectAll: function() { - this.selectionStart = 0; - this.selectionEnd = this._text.length; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + }, - /** - * Returns selected text - * @return {String} - */ - getSelectedText: function() { - return this._text.slice(this.selectionStart, this.selectionEnd).join(''); - }, + /** + * Selects entire text + * @return {fabric.IText} thisArg + * @chainable + */ + selectAll: function() { + this.selectionStart = 0; + this.selectionEnd = this._text.length; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** - * Find new selection index representing start of current word according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findWordBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; + /** + * Returns selected text + * @return {String} + */ + getSelectedText: function() { + return this._text.slice(this.selectionStart, this.selectionEnd).join(''); + }, - // remove space before cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { + /** + * Find new selection index representing start of current word according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findWordBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; + + // remove space before cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { + offset++; + index--; + } + } + while (/\S/.test(this._text[index]) && index > -1) { offset++; index--; } - } - while (/\S/.test(this._text[index]) && index > -1) { - offset++; - index--; - } - - return startFrom - offset; - }, - /** - * Find new selection index representing end of current word according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findWordBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; + return startFrom - offset; + }, - // remove space after cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { + /** + * Find new selection index representing end of current word according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findWordBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; + + // remove space after cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { + offset++; + index++; + } + } + while (/\S/.test(this._text[index]) && index < this._text.length) { offset++; index++; } - } - while (/\S/.test(this._text[index]) && index < this._text.length) { - offset++; - index++; - } - return startFrom + offset; - }, + return startFrom + offset; + }, - /** - * Find new selection index representing start of current line according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findLineBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; + /** + * Find new selection index representing start of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; - while (!/\n/.test(this._text[index]) && index > -1) { - offset++; - index--; - } + while (!/\n/.test(this._text[index]) && index > -1) { + offset++; + index--; + } - return startFrom - offset; - }, + return startFrom - offset; + }, - /** - * Find new selection index representing end of current line according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findLineBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; + /** + * Find new selection index representing end of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; - while (!/\n/.test(this._text[index]) && index < this._text.length) { - offset++; - index++; - } + while (!/\n/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } - return startFrom + offset; - }, + return startFrom + offset; + }, - /** - * Finds index corresponding to beginning or end of a word - * @param {Number} selectionStart Index of a character - * @param {Number} direction 1 or -1 - * @return {Number} Index of the beginning or end of a word - */ - searchWordBoundary: function(selectionStart, direction) { - var text = this._text, - index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, - _char = text[index], - // wrong - reNonWord = fabric.reNonWord; + /** + * Finds index corresponding to beginning or end of a word + * @param {Number} selectionStart Index of a character + * @param {Number} direction 1 or -1 + * @return {Number} Index of the beginning or end of a word + */ + searchWordBoundary: function(selectionStart, direction) { + var text = this._text, + index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, + _char = text[index], + // wrong + reNonWord = fabric.reNonWord; - while (!reNonWord.test(_char) && index > 0 && index < text.length) { - index += direction; - _char = text[index]; - } - if (reNonWord.test(_char)) { - index += direction === 1 ? 0 : 1; - } - return index; - }, + while (!reNonWord.test(_char) && index > 0 && index < text.length) { + index += direction; + _char = text[index]; + } + if (reNonWord.test(_char)) { + index += direction === 1 ? 0 : 1; + } + return index; + }, - /** - * Selects a word based on the index - * @param {Number} selectionStart Index of a character - */ - selectWord: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ - newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ + /** + * Selects a word based on the index + * @param {Number} selectionStart Index of a character + */ + selectWord: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ + newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - }, + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + }, - /** - * Selects a line based on the index - * @param {Number} selectionStart Index of a character - * @return {fabric.IText} thisArg - * @chainable - */ - selectLine: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.findLineBoundaryLeft(selectionStart), - newSelectionEnd = this.findLineBoundaryRight(selectionStart); + /** + * Selects a line based on the index + * @param {Number} selectionStart Index of a character + * @return {fabric.IText} thisArg + * @chainable + */ + selectLine: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.findLineBoundaryLeft(selectionStart), + newSelectionEnd = this.findLineBoundaryRight(selectionStart); - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** - * Enters editing state - * @return {fabric.IText} thisArg - * @chainable - */ - enterEditing: function(e) { - if (this.isEditing || !this.editable) { - return; - } + /** + * Enters editing state + * @return {fabric.IText} thisArg + * @chainable + */ + enterEditing: function(e) { + if (this.isEditing || !this.editable) { + return; + } - if (this.canvas) { - this.canvas.calcOffset(); - this.exitEditingOnOthers(this.canvas); - } + if (this.canvas) { + this.canvas.calcOffset(); + this.exitEditingOnOthers(this.canvas); + } - this.isEditing = true; + this.isEditing = true; - this.initHiddenTextarea(e); - this.hiddenTextarea.focus(); - this.hiddenTextarea.value = this.text; - this._updateTextarea(); - this._saveEditingProps(); - this._setEditingProps(); - this._textBeforeEdit = this.text; + this.initHiddenTextarea(e); + this.hiddenTextarea.focus(); + this.hiddenTextarea.value = this.text; + this._updateTextarea(); + this._saveEditingProps(); + this._setEditingProps(); + this._textBeforeEdit = this.text; - this._tick(); - this.fire('editing:entered'); - this._fireSelectionChanged(); - if (!this.canvas) { + this._tick(); + this.fire('editing:entered'); + this._fireSelectionChanged(); + if (!this.canvas) { + return this; + } + this.canvas.fire('text:editing:entered', { target: this }); + this.initMouseMoveHandler(); + this.canvas.requestRenderAll(); return this; - } - this.canvas.fire('text:editing:entered', { target: this }); - this.initMouseMoveHandler(); - this.canvas.requestRenderAll(); - return this; - }, + }, - exitEditingOnOthers: function(canvas) { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.selected = false; - if (obj.isEditing) { - obj.exitEditing(); - } - }); - } - }, + exitEditingOnOthers: function(canvas) { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.selected = false; + if (obj.isEditing) { + obj.exitEditing(); + } + }); + } + }, - /** - * Initializes "mousemove" event handler - */ - initMouseMoveHandler: function() { - this.canvas.on('mouse:move', this.mouseMoveHandler); - }, + /** + * Initializes "mousemove" event handler + */ + initMouseMoveHandler: function() { + this.canvas.on('mouse:move', this.mouseMoveHandler); + }, - /** - * @private - */ - mouseMoveHandler: function(options) { - if (!this.__isMousedown || !this.isEditing) { - return; - } + /** + * @private + */ + mouseMoveHandler: function(options) { + if (!this.__isMousedown || !this.isEditing) { + return; + } - var newSelectionStart = this.getSelectionStartFromPointer(options.e), - currentStart = this.selectionStart, - currentEnd = this.selectionEnd; - if ( - (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) - && - (currentStart === newSelectionStart || currentEnd === newSelectionStart) - ) { - return; - } - if (newSelectionStart > this.__selectionStartOnMouseDown) { - this.selectionStart = this.__selectionStartOnMouseDown; - this.selectionEnd = newSelectionStart; - } - else { - this.selectionStart = newSelectionStart; - this.selectionEnd = this.__selectionStartOnMouseDown; - } - if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { - this.restartCursorIfNeeded(); - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - } - }, + var newSelectionStart = this.getSelectionStartFromPointer(options.e), + currentStart = this.selectionStart, + currentEnd = this.selectionEnd; + if ( + (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) + && + (currentStart === newSelectionStart || currentEnd === newSelectionStart) + ) { + return; + } + if (newSelectionStart > this.__selectionStartOnMouseDown) { + this.selectionStart = this.__selectionStartOnMouseDown; + this.selectionEnd = newSelectionStart; + } + else { + this.selectionStart = newSelectionStart; + this.selectionEnd = this.__selectionStartOnMouseDown; + } + if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { + this.restartCursorIfNeeded(); + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + } + }, - /** - * @private - */ - _setEditingProps: function() { - this.hoverCursor = 'text'; + /** + * @private + */ + _setEditingProps: function() { + this.hoverCursor = 'text'; - if (this.canvas) { - this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; - } + if (this.canvas) { + this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; + } - this.borderColor = this.editingBorderColor; - this.hasControls = this.selectable = false; - this.lockMovementX = this.lockMovementY = true; - }, + this.borderColor = this.editingBorderColor; + this.hasControls = this.selectable = false; + this.lockMovementX = this.lockMovementY = true; + }, - /** - * convert from textarea to grapheme indexes - */ - fromStringToGraphemeSelection: function(start, end, text) { - var smallerTextStart = text.slice(0, start), - graphemeStart = fabric.util.string.graphemeSplit(smallerTextStart).length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = text.slice(start, end), - graphemeEnd = fabric.util.string.graphemeSplit(smallerTextEnd).length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + /** + * convert from textarea to grapheme indexes + */ + fromStringToGraphemeSelection: function(start, end, text) { + var smallerTextStart = text.slice(0, start), + graphemeStart = this.graphemeSplit(smallerTextStart).length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = text.slice(start, end), + graphemeEnd = this.graphemeSplit(smallerTextEnd).length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - /** - * convert from fabric to textarea values - */ - fromGraphemeToStringSelection: function(start, end, _text) { - var smallerTextStart = _text.slice(0, start), - graphemeStart = smallerTextStart.join('').length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = _text.slice(start, end), - graphemeEnd = smallerTextEnd.join('').length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + /** + * convert from fabric to textarea values + */ + fromGraphemeToStringSelection: function(start, end, _text) { + var smallerTextStart = _text.slice(0, start), + graphemeStart = smallerTextStart.join('').length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = _text.slice(start, end), + graphemeEnd = smallerTextEnd.join('').length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - /** - * @private - */ - _updateTextarea: function() { - this.cursorOffsetCache = { }; - if (!this.hiddenTextarea) { - return; - } - if (!this.inCompositionMode) { - var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); - this.hiddenTextarea.selectionStart = newSelection.selectionStart; - this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; - } - this.updateTextareaPosition(); - }, + /** + * @private + */ + _updateTextarea: function() { + this.cursorOffsetCache = { }; + if (!this.hiddenTextarea) { + return; + } + if (!this.inCompositionMode) { + var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); + this.hiddenTextarea.selectionStart = newSelection.selectionStart; + this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; + } + this.updateTextareaPosition(); + }, - /** - * @private - */ - updateFromTextArea: function() { - if (!this.hiddenTextarea) { - return; - } - this.cursorOffsetCache = { }; - this.text = this.hiddenTextarea.value; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - var newSelection = this.fromStringToGraphemeSelection( - this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); - this.selectionEnd = this.selectionStart = newSelection.selectionEnd; - if (!this.inCompositionMode) { - this.selectionStart = newSelection.selectionStart; - } - this.updateTextareaPosition(); - }, + /** + * @private + */ + updateFromTextArea: function() { + if (!this.hiddenTextarea) { + return; + } + this.cursorOffsetCache = { }; + this.text = this.hiddenTextarea.value; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + var newSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); + this.selectionEnd = this.selectionStart = newSelection.selectionEnd; + if (!this.inCompositionMode) { + this.selectionStart = newSelection.selectionStart; + } + this.updateTextareaPosition(); + }, - /** - * @private - */ - updateTextareaPosition: function() { - if (this.selectionStart === this.selectionEnd) { - var style = this._calcTextareaPosition(); - this.hiddenTextarea.style.left = style.left; - this.hiddenTextarea.style.top = style.top; - } - }, + /** + * @private + */ + updateTextareaPosition: function() { + if (this.selectionStart === this.selectionEnd) { + var style = this._calcTextareaPosition(); + this.hiddenTextarea.style.left = style.left; + this.hiddenTextarea.style.top = style.top; + } + }, - /** - * @private - * @return {Object} style contains style for hiddenTextarea - */ - _calcTextareaPosition: function() { - if (!this.canvas) { - return { x: 1, y: 1 }; - } - var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, - boundaries = this._getCursorBoundaries(desiredPosition), - cursorLocation = this.get2DCursorLocation(desiredPosition), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, - leftOffset = boundaries.leftOffset, - m = this.calcTransformMatrix(), - p = { - x: boundaries.left + leftOffset, - y: boundaries.top + boundaries.topOffset + charHeight - }, - retinaScaling = this.canvas.getRetinaScaling(), - upperCanvas = this.canvas.upperCanvasEl, - upperCanvasWidth = upperCanvas.width / retinaScaling, - upperCanvasHeight = upperCanvas.height / retinaScaling, - maxWidth = upperCanvasWidth - charHeight, - maxHeight = upperCanvasHeight - charHeight, - scaleX = upperCanvas.clientWidth / upperCanvasWidth, - scaleY = upperCanvas.clientHeight / upperCanvasHeight; + /** + * @private + * @return {Object} style contains style for hiddenTextarea + */ + _calcTextareaPosition: function() { + if (!this.canvas) { + return { x: 1, y: 1 }; + } + var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, + boundaries = this._getCursorBoundaries(desiredPosition), + cursorLocation = this.get2DCursorLocation(desiredPosition), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, + leftOffset = boundaries.leftOffset, + m = this.calcTransformMatrix(), + p = { + x: boundaries.left + leftOffset, + y: boundaries.top + boundaries.topOffset + charHeight + }, + retinaScaling = this.canvas.getRetinaScaling(), + upperCanvas = this.canvas.upperCanvasEl, + upperCanvasWidth = upperCanvas.width / retinaScaling, + upperCanvasHeight = upperCanvas.height / retinaScaling, + maxWidth = upperCanvasWidth - charHeight, + maxHeight = upperCanvasHeight - charHeight, + scaleX = upperCanvas.clientWidth / upperCanvasWidth, + scaleY = upperCanvas.clientHeight / upperCanvasHeight; - p = fabric.util.transformPoint(p, m); - p = fabric.util.transformPoint(p, this.canvas.viewportTransform); - p.x *= scaleX; - p.y *= scaleY; - if (p.x < 0) { - p.x = 0; - } - if (p.x > maxWidth) { - p.x = maxWidth; - } - if (p.y < 0) { - p.y = 0; - } - if (p.y > maxHeight) { - p.y = maxHeight; - } + p = fabric.util.transformPoint(p, m); + p = fabric.util.transformPoint(p, this.canvas.viewportTransform); + p.x *= scaleX; + p.y *= scaleY; + if (p.x < 0) { + p.x = 0; + } + if (p.x > maxWidth) { + p.x = maxWidth; + } + if (p.y < 0) { + p.y = 0; + } + if (p.y > maxHeight) { + p.y = maxHeight; + } - // add canvas offset on document - p.x += this.canvas._offset.left; - p.y += this.canvas._offset.top; + // add canvas offset on document + p.x += this.canvas._offset.left; + p.y += this.canvas._offset.top; - return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; - }, + return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; + }, - /** - * @private - */ - _saveEditingProps: function() { - this._savedProps = { - hasControls: this.hasControls, - borderColor: this.borderColor, - lockMovementX: this.lockMovementX, - lockMovementY: this.lockMovementY, - hoverCursor: this.hoverCursor, - selectable: this.selectable, - defaultCursor: this.canvas && this.canvas.defaultCursor, - moveCursor: this.canvas && this.canvas.moveCursor - }; - }, + /** + * @private + */ + _saveEditingProps: function() { + this._savedProps = { + hasControls: this.hasControls, + borderColor: this.borderColor, + lockMovementX: this.lockMovementX, + lockMovementY: this.lockMovementY, + hoverCursor: this.hoverCursor, + selectable: this.selectable, + defaultCursor: this.canvas && this.canvas.defaultCursor, + moveCursor: this.canvas && this.canvas.moveCursor + }; + }, - /** - * @private - */ - _restoreEditingProps: function() { - if (!this._savedProps) { - return; - } + /** + * @private + */ + _restoreEditingProps: function() { + if (!this._savedProps) { + return; + } - this.hoverCursor = this._savedProps.hoverCursor; - this.hasControls = this._savedProps.hasControls; - this.borderColor = this._savedProps.borderColor; - this.selectable = this._savedProps.selectable; - this.lockMovementX = this._savedProps.lockMovementX; - this.lockMovementY = this._savedProps.lockMovementY; + this.hoverCursor = this._savedProps.hoverCursor; + this.hasControls = this._savedProps.hasControls; + this.borderColor = this._savedProps.borderColor; + this.selectable = this._savedProps.selectable; + this.lockMovementX = this._savedProps.lockMovementX; + this.lockMovementY = this._savedProps.lockMovementY; - if (this.canvas) { - this.canvas.defaultCursor = this._savedProps.defaultCursor; - this.canvas.moveCursor = this._savedProps.moveCursor; - } - }, + if (this.canvas) { + this.canvas.defaultCursor = this._savedProps.defaultCursor; + this.canvas.moveCursor = this._savedProps.moveCursor; + } - /** - * Exits from editing state - * @return {fabric.IText} thisArg - * @chainable - */ - exitEditing: function() { - var isTextChanged = (this._textBeforeEdit !== this.text); - var hiddenTextarea = this.hiddenTextarea; - this.selected = false; - this.isEditing = false; + delete this._savedProps; + }, + + /** + * Exits from editing state + * @return {fabric.IText} thisArg + * @chainable + */ + exitEditing: function() { + var isTextChanged = (this._textBeforeEdit !== this.text); + var hiddenTextarea = this.hiddenTextarea; + this.selected = false; + this.isEditing = false; - this.selectionEnd = this.selectionStart; + this.selectionEnd = this.selectionStart; - if (hiddenTextarea) { - hiddenTextarea.blur && hiddenTextarea.blur(); - hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); - } - this.hiddenTextarea = null; - this.abortCursorAnimation(); - this._restoreEditingProps(); - this._currentCursorOpacity = 0; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this.fire('editing:exited'); - isTextChanged && this.fire('modified'); - if (this.canvas) { - this.canvas.off('mouse:move', this.mouseMoveHandler); - this.canvas.fire('text:editing:exited', { target: this }); - isTextChanged && this.canvas.fire('object:modified', { target: this }); - } - return this; - }, + if (hiddenTextarea) { + hiddenTextarea.blur && hiddenTextarea.blur(); + hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); + } + this.hiddenTextarea = null; + this.abortCursorAnimation(); + this._restoreEditingProps(); + this._currentCursorOpacity = 0; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this.fire('editing:exited'); + isTextChanged && this.fire('modified'); + if (this.canvas) { + this.canvas.off('mouse:move', this.mouseMoveHandler); + this.canvas.fire('text:editing:exited', { target: this }); + isTextChanged && this.canvas.fire('object:modified', { target: this }); + } + return this; + }, + + /** + * @private + */ + _removeExtraneousStyles: function() { + for (var prop in this.styles) { + if (!this._textLines[prop]) { + delete this.styles[prop]; + } + } + }, + + /** + * remove and reflow a style block from start to end. + * @param {Number} start linear start position for removal (included in removal) + * @param {Number} end linear end position for removal ( excluded from removal ) + */ + removeStyleFromTo: function(start, end) { + var cursorStart = this.get2DCursorLocation(start, true), + cursorEnd = this.get2DCursorLocation(end, true), + lineStart = cursorStart.lineIndex, + charStart = cursorStart.charIndex, + lineEnd = cursorEnd.lineIndex, + charEnd = cursorEnd.charIndex, + i, styleObj; + if (lineStart !== lineEnd) { + // step1 remove the trailing of lineStart + if (this.styles[lineStart]) { + for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { + delete this.styles[lineStart][i]; + } + } + // step2 move the trailing of lineEnd to lineStart if needed + if (this.styles[lineEnd]) { + for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { + styleObj = this.styles[lineEnd][i]; + if (styleObj) { + this.styles[lineStart] || (this.styles[lineStart] = { }); + this.styles[lineStart][charStart + i - charEnd] = styleObj; + } + } + } + // step3 detects lines will be completely removed. + for (i = lineStart + 1; i <= lineEnd; i++) { + delete this.styles[i]; + } + // step4 shift remaining lines. + this.shiftLineStyles(lineEnd, lineStart - lineEnd); + } + else { + // remove and shift left on the same line + if (this.styles[lineStart]) { + styleObj = this.styles[lineStart]; + var diff = charEnd - charStart, numericChar, _char; + for (i = charStart; i < charEnd; i++) { + delete styleObj[i]; + } + for (_char in this.styles[lineStart]) { + numericChar = parseInt(_char, 10); + if (numericChar >= charEnd) { + styleObj[numericChar - diff] = styleObj[_char]; + delete styleObj[_char]; + } + } + } + } + }, - /** - * @private - */ - _removeExtraneousStyles: function() { - for (var prop in this.styles) { - if (!this._textLines[prop]) { - delete this.styles[prop]; - } - } - }, - - /** - * remove and reflow a style block from start to end. - * @param {Number} start linear start position for removal (included in removal) - * @param {Number} end linear end position for removal ( excluded from removal ) - */ - removeStyleFromTo: function(start, end) { - var cursorStart = this.get2DCursorLocation(start, true), - cursorEnd = this.get2DCursorLocation(end, true), - lineStart = cursorStart.lineIndex, - charStart = cursorStart.charIndex, - lineEnd = cursorEnd.lineIndex, - charEnd = cursorEnd.charIndex, - i, styleObj; - if (lineStart !== lineEnd) { - // step1 remove the trailing of lineStart - if (this.styles[lineStart]) { - for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { - delete this.styles[lineStart][i]; - } - } - // step2 move the trailing of lineEnd to lineStart if needed - if (this.styles[lineEnd]) { - for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { - styleObj = this.styles[lineEnd][i]; - if (styleObj) { - this.styles[lineStart] || (this.styles[lineStart] = { }); - this.styles[lineStart][charStart + i - charEnd] = styleObj; + /** + * Shifts line styles up or down + * @param {Number} lineIndex Index of a line + * @param {Number} offset Can any number? + */ + shiftLineStyles: function(lineIndex, offset) { + // shift all line styles by offset upward or downward + // do not clone deep. we need new array, not new style objects + var clonedStyles = Object.assign({}, this.styles); + for (var line in this.styles) { + var numericLine = parseInt(line, 10); + if (numericLine > lineIndex) { + this.styles[numericLine + offset] = clonedStyles[numericLine]; + if (!clonedStyles[numericLine - offset]) { + delete this.styles[numericLine]; } } } - // step3 detects lines will be completely removed. - for (i = lineStart + 1; i <= lineEnd; i++) { - delete this.styles[i]; + }, + + restartCursorIfNeeded: function() { + if (!this._currentTickState || this._currentTickState.isAborted + || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted + ) { + this.initDelayedCursor(); } - // step4 shift remaining lines. - this.shiftLineStyles(lineEnd, lineStart - lineEnd); - } - else { - // remove and shift left on the same line - if (this.styles[lineStart]) { - styleObj = this.styles[lineStart]; - var diff = charEnd - charStart, numericChar, _char; - for (i = charStart; i < charEnd; i++) { - delete styleObj[i]; - } - for (_char in this.styles[lineStart]) { - numericChar = parseInt(_char, 10); - if (numericChar >= charEnd) { - styleObj[numericChar - diff] = styleObj[_char]; - delete styleObj[_char]; + }, + + /** + * Handle insertion of more consecutive style lines for when one or more + * newlines gets added to the text. Since current style needs to be shifted + * first we shift the current style of the number lines needed, then we add + * new lines from the last to the first. + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} qty number of lines to add + * @param {Array} copiedStyle Array of objects styles + */ + insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { + var currentCharStyle, + newLineStyles = {}, + somethingAdded = false, + isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; + + qty || (qty = 1); + this.shiftLineStyles(lineIndex, qty); + if (this.styles[lineIndex]) { + currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; + } + // we clone styles of all chars + // after cursor onto the current line + for (var index in this.styles[lineIndex]) { + var numIndex = parseInt(index, 10); + if (numIndex >= charIndex) { + somethingAdded = true; + newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; + // remove lines from the previous line since they're on a new line now + if (!(isEndOfLine && charIndex === 0)) { + delete this.styles[lineIndex][index]; } } } - } - }, - - /** - * Shifts line styles up or down - * @param {Number} lineIndex Index of a line - * @param {Number} offset Can any number? - */ - shiftLineStyles: function(lineIndex, offset) { - // shift all line styles by offset upward or downward - // do not clone deep. we need new array, not new style objects - var clonedStyles = clone(this.styles); - for (var line in this.styles) { - var numericLine = parseInt(line, 10); - if (numericLine > lineIndex) { - this.styles[numericLine + offset] = clonedStyles[numericLine]; - if (!clonedStyles[numericLine - offset]) { - delete this.styles[numericLine]; + var styleCarriedOver = false; + if (somethingAdded && !isEndOfLine) { + // if is end of line, the extra style we copied + // is probably not something we want + this.styles[lineIndex + qty] = newLineStyles; + styleCarriedOver = true; + } + if (styleCarriedOver) { + // skip the last line of since we already prepared it. + qty--; + } + // for the all the lines or all the other lines + // we clone current char style onto the next (otherwise empty) line + while (qty > 0) { + if (copiedStyle && copiedStyle[qty - 1]) { + this.styles[lineIndex + qty] = { 0: Object.assign({}, copiedStyle[qty - 1]) }; + } + else if (currentCharStyle) { + this.styles[lineIndex + qty] = { 0: Object.assign({}, currentCharStyle) }; + } + else { + delete this.styles[lineIndex + qty]; } + qty--; } - } - }, - - restartCursorIfNeeded: function() { - if (!this._currentTickState || this._currentTickState.isAborted - || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted - ) { - this.initDelayedCursor(); - } - }, - - /** - * Handle insertion of more consecutive style lines for when one or more - * newlines gets added to the text. Since current style needs to be shifted - * first we shift the current style of the number lines needed, then we add - * new lines from the last to the first. - * @param {Number} lineIndex Index of a line - * @param {Number} charIndex Index of a char - * @param {Number} qty number of lines to add - * @param {Array} copiedStyle Array of objects styles - */ - insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { - var currentCharStyle, - newLineStyles = {}, - somethingAdded = false, - isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; + this._forceClearCache = true; + }, - qty || (qty = 1); - this.shiftLineStyles(lineIndex, qty); - if (this.styles[lineIndex]) { - currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; - } - // we clone styles of all chars - // after cursor onto the current line - for (var index in this.styles[lineIndex]) { - var numIndex = parseInt(index, 10); - if (numIndex >= charIndex) { - somethingAdded = true; - newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; - // remove lines from the previous line since they're on a new line now - if (!(isEndOfLine && charIndex === 0)) { - delete this.styles[lineIndex][index]; + /** + * Inserts style object for a given line/char index + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} quantity number Style object to insert, if given + * @param {Array} copiedStyle array of style objects + */ + insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { + if (!this.styles) { + this.styles = {}; + } + var currentLineStyles = this.styles[lineIndex], + currentLineStylesCloned = currentLineStyles ? Object.assign({}, currentLineStyles) : {}; + + quantity || (quantity = 1); + // shift all char styles by quantity forward + // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 + for (var index in currentLineStylesCloned) { + var numericIndex = parseInt(index, 10); + if (numericIndex >= charIndex) { + currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; + // only delete the style if there was nothing moved there + if (!currentLineStylesCloned[numericIndex - quantity]) { + delete currentLineStyles[numericIndex]; + } } } - } - var styleCarriedOver = false; - if (somethingAdded && !isEndOfLine) { - // if is end of line, the extra style we copied - // is probably not something we want - this.styles[lineIndex + qty] = newLineStyles; - styleCarriedOver = true; - } - if (styleCarriedOver) { - // skip the last line of since we already prepared it. - qty--; - } - // for the all the lines or all the other lines - // we clone current char style onto the next (otherwise empty) line - while (qty > 0) { - if (copiedStyle && copiedStyle[qty - 1]) { - this.styles[lineIndex + qty] = { 0: clone(copiedStyle[qty - 1]) }; + this._forceClearCache = true; + if (copiedStyle) { + while (quantity--) { + if (!Object.keys(copiedStyle[quantity]).length) { + continue; + } + if (!this.styles[lineIndex]) { + this.styles[lineIndex] = {}; + } + this.styles[lineIndex][charIndex + quantity] = Object.assign({}, copiedStyle[quantity]); + } + return; } - else if (currentCharStyle) { - this.styles[lineIndex + qty] = { 0: clone(currentCharStyle) }; + if (!currentLineStyles) { + return; } - else { - delete this.styles[lineIndex + qty]; + var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; + while (newStyle && quantity--) { + this.styles[lineIndex][charIndex + quantity] = Object.assign({}, newStyle); } - qty--; - } - this._forceClearCache = true; - }, - - /** - * Inserts style object for a given line/char index - * @param {Number} lineIndex Index of a line - * @param {Number} charIndex Index of a char - * @param {Number} quantity number Style object to insert, if given - * @param {Array} copiedStyle array of style objects - */ - insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { - if (!this.styles) { - this.styles = {}; - } - var currentLineStyles = this.styles[lineIndex], - currentLineStylesCloned = currentLineStyles ? clone(currentLineStyles) : {}; + }, - quantity || (quantity = 1); - // shift all char styles by quantity forward - // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 - for (var index in currentLineStylesCloned) { - var numericIndex = parseInt(index, 10); - if (numericIndex >= charIndex) { - currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; - // only delete the style if there was nothing moved there - if (!currentLineStylesCloned[numericIndex - quantity]) { - delete currentLineStyles[numericIndex]; - } - } - } - this._forceClearCache = true; - if (copiedStyle) { - while (quantity--) { - if (!Object.keys(copiedStyle[quantity]).length) { - continue; + /** + * Inserts style object(s) + * @param {Array} insertedText Characters at the location where style is inserted + * @param {Number} start cursor index for inserting style + * @param {Array} [copiedStyle] array of style objects to insert. + */ + insertNewStyleBlock: function(insertedText, start, copiedStyle) { + var cursorLoc = this.get2DCursorLocation(start, true), + addedLines = [0], linesLength = 0; + // get an array of how many char per lines are being added. + for (var i = 0; i < insertedText.length; i++) { + if (insertedText[i] === '\n') { + linesLength++; + addedLines[linesLength] = 0; } - if (!this.styles[lineIndex]) { - this.styles[lineIndex] = {}; + else { + addedLines[linesLength]++; } - this.styles[lineIndex][charIndex + quantity] = clone(copiedStyle[quantity]); } - return; - } - if (!currentLineStyles) { - return; - } - var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; - while (newStyle && quantity--) { - this.styles[lineIndex][charIndex + quantity] = clone(newStyle); - } - }, - - /** - * Inserts style object(s) - * @param {Array} insertedText Characters at the location where style is inserted - * @param {Number} start cursor index for inserting style - * @param {Array} [copiedStyle] array of style objects to insert. - */ - insertNewStyleBlock: function(insertedText, start, copiedStyle) { - var cursorLoc = this.get2DCursorLocation(start, true), - addedLines = [0], linesLength = 0; - // get an array of how many char per lines are being added. - for (var i = 0; i < insertedText.length; i++) { - if (insertedText[i] === '\n') { - linesLength++; - addedLines[linesLength] = 0; + // for the first line copy the style from the current char position. + if (addedLines[0] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); } - else { - addedLines[linesLength]++; + linesLength && this.insertNewlineStyleObject( + cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); + for (var i = 1; i < linesLength; i++) { + if (addedLines[i] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); + } + else if (copiedStyle) { + // this test is required in order to close #6841 + // when a pasted buffer begins with a newline then + // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] + // may be undefined for some reason + if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { + this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; + } + } + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); } - } - // for the first line copy the style from the current char position. - if (addedLines[0] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); - } - linesLength && this.insertNewlineStyleObject( - cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); - for (var i = 1; i < linesLength; i++) { + // we use i outside the loop to get it like linesLength if (addedLines[i] > 0) { this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); } - else if (copiedStyle) { - // this test is required in order to close #6841 - // when a pasted buffer begins with a newline then - // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] - // may be undefined for some reason - if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { - this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; - } - } - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); - } - // we use i outside the loop to get it like linesLength - if (addedLines[i] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); - } - }, + }, - /** - * Set the selectionStart and selectionEnd according to the new position of cursor - * mimic the key - mouse navigation when shift is pressed. - */ - setSelectionStartEndWithShift: function(start, end, newSelection) { - if (newSelection <= start) { - if (end === start) { - this._selectionDirection = 'left'; + /** + * Set the selectionStart and selectionEnd according to the new position of cursor + * mimic the key - mouse navigation when shift is pressed. + */ + setSelectionStartEndWithShift: function(start, end, newSelection) { + if (newSelection <= start) { + if (end === start) { + this._selectionDirection = 'left'; + } + else if (this._selectionDirection === 'right') { + this._selectionDirection = 'left'; + this.selectionEnd = start; + } + this.selectionStart = newSelection; } - else if (this._selectionDirection === 'right') { - this._selectionDirection = 'left'; - this.selectionEnd = start; + else if (newSelection > start && newSelection < end) { + if (this._selectionDirection === 'right') { + this.selectionEnd = newSelection; + } + else { + this.selectionStart = newSelection; + } } - this.selectionStart = newSelection; - } - else if (newSelection > start && newSelection < end) { - if (this._selectionDirection === 'right') { + else { + // newSelection is > selection start and end + if (end === start) { + this._selectionDirection = 'right'; + } + else if (this._selectionDirection === 'left') { + this._selectionDirection = 'right'; + this.selectionStart = end; + } this.selectionEnd = newSelection; } - else { - this.selectionStart = newSelection; + }, + + setSelectionInBoundaries: function() { + var length = this.text.length; + if (this.selectionStart > length) { + this.selectionStart = length; } - } - else { - // newSelection is > selection start and end - if (end === start) { - this._selectionDirection = 'right'; + else if (this.selectionStart < 0) { + this.selectionStart = 0; } - else if (this._selectionDirection === 'left') { - this._selectionDirection = 'right'; - this.selectionStart = end; + if (this.selectionEnd > length) { + this.selectionEnd = length; + } + else if (this.selectionEnd < 0) { + this.selectionEnd = 0; } - this.selectionEnd = newSelection; - } - }, - - setSelectionInBoundaries: function() { - var length = this.text.length; - if (this.selectionStart > length) { - this.selectionStart = length; - } - else if (this.selectionStart < 0) { - this.selectionStart = 0; - } - if (this.selectionEnd > length) { - this.selectionEnd = length; - } - else if (this.selectionEnd < 0) { - this.selectionEnd = 0; } - } - }); -})(); - - -fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** - * Initializes "dbclick" event handler - */ - initDoubleClickSimulation: function() { - - // for double click - this.__lastClickTime = +new Date(); - - // for triple click - this.__lastLastClickTime = +new Date(); - - this.__lastPointer = { }; - - this.on('mousedown', this.onMouseDown); - }, - - /** - * Default event handler to simulate triple click - * @private - */ - onMouseDown: function(options) { - if (!this.canvas) { - return; - } - this.__newClickTime = +new Date(); - var newPointer = options.pointer; - if (this.isTripleClick(newPointer)) { - this.fire('tripleclick', options); - this._stopEvent(options.e); - } - this.__lastLastClickTime = this.__lastClickTime; - this.__lastClickTime = this.__newClickTime; - this.__lastPointer = newPointer; - this.__lastIsEditing = this.isEditing; - this.__lastSelected = this.selected; - }, - - isTripleClick: function(newPointer) { - return this.__newClickTime - this.__lastClickTime < 500 && - this.__lastClickTime - this.__lastLastClickTime < 500 && - this.__lastPointer.x === newPointer.x && - this.__lastPointer.y === newPointer.y; - }, - - /** - * @private - */ - _stopEvent: function(e) { - e.preventDefault && e.preventDefault(); - e.stopPropagation && e.stopPropagation(); - }, + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Initializes event handlers related to cursor or selection - */ - initCursorSelectionHandlers: function() { - this.initMousedownHandler(); - this.initMouseupHandler(); - this.initClicks(); - }, + (function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + /** + * Initializes "dbclick" event handler + */ + initDoubleClickSimulation: function() { - /** - * Default handler for double click, select a word - */ - doubleClickHandler: function(options) { - if (!this.isEditing) { - return; - } - this.selectWord(this.getSelectionStartFromPointer(options.e)); - }, + // for double click + this.__lastClickTime = +new Date(); - /** - * Default handler for triple click, select a line - */ - tripleClickHandler: function(options) { - if (!this.isEditing) { - return; - } - this.selectLine(this.getSelectionStartFromPointer(options.e)); - }, + // for triple click + this.__lastLastClickTime = +new Date(); - /** - * Initializes double and triple click event handlers - */ - initClicks: function() { - this.on('mousedblclick', this.doubleClickHandler); - this.on('tripleclick', this.tripleClickHandler); - }, + this.__lastPointer = { }; - /** - * Default event handler for the basic functionalities needed on _mouseDown - * can be overridden to do something different. - * Scope of this implementation is: find the click position, set selectionStart - * find selectionEnd, initialize the drawing of either cursor or selection area - * initializing a mousedDown on a text area will cancel fabricjs knowledge of - * current compositionMode. It will be set to false. - */ - _mouseDownHandler: function(options) { - if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { - return; - } + this.on('mousedown', this.onMouseDown); + }, - this.__isMousedown = true; + /** + * Default event handler to simulate triple click + * @private + */ + onMouseDown: function(options) { + if (!this.canvas) { + return; + } + this.__newClickTime = +new Date(); + var newPointer = options.pointer; + if (this.isTripleClick(newPointer)) { + this.fire('tripleclick', options); + this._stopEvent(options.e); + } + this.__lastLastClickTime = this.__lastClickTime; + this.__lastClickTime = this.__newClickTime; + this.__lastPointer = newPointer; + this.__lastIsEditing = this.isEditing; + this.__lastSelected = this.selected; + }, - if (this.selected) { - this.inCompositionMode = false; - this.setCursorByClick(options.e); - } + isTripleClick: function(newPointer) { + return this.__newClickTime - this.__lastClickTime < 500 && + this.__lastClickTime - this.__lastLastClickTime < 500 && + this.__lastPointer.x === newPointer.x && + this.__lastPointer.y === newPointer.y; + }, - if (this.isEditing) { - this.__selectionStartOnMouseDown = this.selectionStart; - if (this.selectionStart === this.selectionEnd) { - this.abortCursorAnimation(); - } - this.renderCursorOrSelection(); - } - }, + /** + * @private + */ + _stopEvent: function(e) { + e.preventDefault && e.preventDefault(); + e.stopPropagation && e.stopPropagation(); + }, - /** - * Default event handler for the basic functionalities needed on mousedown:before - * can be overridden to do something different. - * Scope of this implementation is: verify the object is already selected when mousing down - */ - _mouseDownHandlerBefore: function(options) { - if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { - return; - } - // we want to avoid that an object that was selected and then becomes unselectable, - // may trigger editing mode in some way. - this.selected = this === this.canvas._activeObject; - }, + /** + * Initializes event handlers related to cursor or selection + */ + initCursorSelectionHandlers: function() { + this.initMousedownHandler(); + this.initMouseupHandler(); + this.initClicks(); + }, - /** - * Initializes "mousedown" event handler - */ - initMousedownHandler: function() { - this.on('mousedown', this._mouseDownHandler); - this.on('mousedown:before', this._mouseDownHandlerBefore); - }, + /** + * Default handler for double click, select a word + */ + doubleClickHandler: function(options) { + if (!this.isEditing) { + return; + } + this.selectWord(this.getSelectionStartFromPointer(options.e)); + }, - /** - * Initializes "mouseup" event handler - */ - initMouseupHandler: function() { - this.on('mouseup', this.mouseUpHandler); - }, + /** + * Default handler for triple click, select a line + */ + tripleClickHandler: function(options) { + if (!this.isEditing) { + return; + } + this.selectLine(this.getSelectionStartFromPointer(options.e)); + }, - /** - * standard handler for mouse up, overridable - * @private - */ - mouseUpHandler: function(options) { - this.__isMousedown = false; - if (!this.editable || this.group || - (options.transform && options.transform.actionPerformed) || - (options.e.button && options.e.button !== 1)) { - return; - } + /** + * Initializes double and triple click event handlers + */ + initClicks: function() { + this.on('mousedblclick', this.doubleClickHandler); + this.on('tripleclick', this.tripleClickHandler); + }, - if (this.canvas) { - var currentActive = this.canvas._activeObject; - if (currentActive && currentActive !== this) { - // avoid running this logic when there is an active object - // this because is possible with shift click and fast clicks, - // to rapidly deselect and reselect this object and trigger an enterEdit - return; - } - } + /** + * Default event handler for the basic functionalities needed on _mouseDown + * can be overridden to do something different. + * Scope of this implementation is: find the click position, set selectionStart + * find selectionEnd, initialize the drawing of either cursor or selection area + * initializing a mousedDown on a text area will cancel fabricjs knowledge of + * current compositionMode. It will be set to false. + */ + _mouseDownHandler: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; + } - if (this.__lastSelected && !this.__corner) { - this.selected = false; - this.__lastSelected = false; - this.enterEditing(options.e); - if (this.selectionStart === this.selectionEnd) { - this.initDelayedCursor(true); - } - else { - this.renderCursorOrSelection(); - } - } - else { - this.selected = true; - } - }, + this.__isMousedown = true; - /** - * Changes cursor location in a text depending on passed pointer (x/y) object - * @param {Event} e Event object - */ - setCursorByClick: function(e) { - var newSelection = this.getSelectionStartFromPointer(e), - start = this.selectionStart, end = this.selectionEnd; - if (e.shiftKey) { - this.setSelectionStartEndWithShift(start, end, newSelection); - } - else { - this.selectionStart = newSelection; - this.selectionEnd = newSelection; - } - if (this.isEditing) { - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, + if (this.selected) { + this.inCompositionMode = false; + this.setCursorByClick(options.e); + } - /** - * Returns index of a character corresponding to where an object was clicked - * @param {Event} e Event object - * @return {Number} Index of a character - */ - getSelectionStartFromPointer: function(e) { - var mouseOffset = this.getLocalPointer(e), - prevWidth = 0, - width = 0, - height = 0, - charIndex = 0, - lineIndex = 0, - lineLeftOffset, - line; - for (var i = 0, len = this._textLines.length; i < len; i++) { - if (height <= mouseOffset.y) { - height += this.getHeightOfLine(i) * this.scaleY; - lineIndex = i; - if (i > 0) { - charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1); + if (this.isEditing) { + this.__selectionStartOnMouseDown = this.selectionStart; + if (this.selectionStart === this.selectionEnd) { + this.abortCursorAnimation(); + } + this.renderCursorOrSelection(); } - } - else { - break; - } - } - lineLeftOffset = this._getLineLeftOffset(lineIndex); - width = lineLeftOffset * this.scaleX; - line = this._textLines[lineIndex]; - // handling of RTL: in order to get things work correctly, - // we assume RTL writing is mirrored compared to LTR writing. - // so in position detection we mirror the X offset, and when is time - // of rendering it, we mirror it again. - if (this.direction === 'rtl') { - mouseOffset.x = this.width * this.scaleX - mouseOffset.x + width; - } - for (var j = 0, jlen = line.length; j < jlen; j++) { - prevWidth = width; - // i removed something about flipX here, check. - width += this.__charBounds[lineIndex][j].kernedWidth * this.scaleX; - if (width <= mouseOffset.x) { - charIndex++; - } - else { - break; - } - } - return this._getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, charIndex, jlen); - }, + }, - /** - * @private - */ - _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) { - // we need Math.abs because when width is after the last char, the offset is given as 1, while is 0 - var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth, - distanceBtwNextCharAndCursor = width - mouseOffset.x, - offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor || - distanceBtwNextCharAndCursor < 0 ? 0 : 1, - newSelectionStart = index + offset; - // if object is horizontally flipped, mirror cursor location from the end - if (this.flipX) { - newSelectionStart = jlen - newSelectionStart; - } + /** + * Default event handler for the basic functionalities needed on mousedown:before + * can be overridden to do something different. + * Scope of this implementation is: verify the object is already selected when mousing down + */ + _mouseDownHandlerBefore: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; + } + // we want to avoid that an object that was selected and then becomes unselectable, + // may trigger editing mode in some way. + this.selected = this === this.canvas._activeObject; + }, - if (newSelectionStart > this._text.length) { - newSelectionStart = this._text.length; - } + /** + * Initializes "mousedown" event handler + */ + initMousedownHandler: function() { + this.on('mousedown', this._mouseDownHandler); + this.on('mousedown:before', this._mouseDownHandlerBefore); + }, - return newSelectionStart; - } -}); + /** + * Initializes "mouseup" event handler + */ + initMouseupHandler: function() { + this.on('mouseup', this.mouseUpHandler); + }, + /** + * standard handler for mouse up, overridable + * @private + */ + mouseUpHandler: function(options) { + this.__isMousedown = false; + if (!this.editable || + (this.group && !this.group.interactive) || + (options.transform && options.transform.actionPerformed) || + (options.e.button && options.e.button !== 1)) { + return; + } -fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + if (this.canvas) { + var currentActive = this.canvas._activeObject; + if (currentActive && currentActive !== this) { + // avoid running this logic when there is an active object + // this because is possible with shift click and fast clicks, + // to rapidly deselect and reselect this object and trigger an enterEdit + return; + } + } - /** - * Initializes hidden textarea (needed to bring up keyboard in iOS) - */ - initHiddenTextarea: function() { - this.hiddenTextarea = fabric.document.createElement('textarea'); - this.hiddenTextarea.setAttribute('autocapitalize', 'off'); - this.hiddenTextarea.setAttribute('autocorrect', 'off'); - this.hiddenTextarea.setAttribute('autocomplete', 'off'); - this.hiddenTextarea.setAttribute('spellcheck', 'false'); - this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); - this.hiddenTextarea.setAttribute('wrap', 'off'); - var style = this._calcTextareaPosition(); - // line-height: 1px; was removed from the style to fix this: - // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 - this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + - '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + - ' paddingｰtop: ' + style.fontSize + ';'; - - if (this.hiddenTextareaContainer) { - this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); - } - else { - fabric.document.body.appendChild(this.hiddenTextarea); - } + if (this.__lastSelected && !this.__corner) { + this.selected = false; + this.__lastSelected = false; + this.enterEditing(options.e); + if (this.selectionStart === this.selectionEnd) { + this.initDelayedCursor(true); + } + else { + this.renderCursorOrSelection(); + } + } + else { + this.selected = true; + } + }, - fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); - - if (!this._clickHandlerInitialized && this.canvas) { - fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this)); - this._clickHandlerInitialized = true; - } - }, + /** + * Changes cursor location in a text depending on passed pointer (x/y) object + * @param {Event} e Event object + */ + setCursorByClick: function(e) { + var newSelection = this.getSelectionStartFromPointer(e), + start = this.selectionStart, end = this.selectionEnd; + if (e.shiftKey) { + this.setSelectionStartEndWithShift(start, end, newSelection); + } + else { + this.selectionStart = newSelection; + this.selectionEnd = newSelection; + } + if (this.isEditing) { + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - /** - * For functionalities on keyDown - * Map a special key to a function of the instance/prototype - * If you need different behaviour for ESC or TAB or arrows, you have to change - * this map setting the name of a function that you build on the fabric.Itext or - * your prototype. - * the map change will affect all Instances unless you need for only some text Instances - * in that case you have to clone this object and assign your Instance. - * this.keysMap = fabric.util.object.clone(this.keysMap); - * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] - */ - keysMap: { - 9: 'exitEditing', - 27: 'exitEditing', - 33: 'moveCursorUp', - 34: 'moveCursorDown', - 35: 'moveCursorRight', - 36: 'moveCursorLeft', - 37: 'moveCursorLeft', - 38: 'moveCursorUp', - 39: 'moveCursorRight', - 40: 'moveCursorDown', - }, - - keysMapRtl: { - 9: 'exitEditing', - 27: 'exitEditing', - 33: 'moveCursorUp', - 34: 'moveCursorDown', - 35: 'moveCursorLeft', - 36: 'moveCursorRight', - 37: 'moveCursorRight', - 38: 'moveCursorUp', - 39: 'moveCursorLeft', - 40: 'moveCursorDown', - }, + /** + * Returns index of a character corresponding to where an object was clicked + * @param {Event} e Event object + * @return {Number} Index of a character + */ + getSelectionStartFromPointer: function(e) { + var mouseOffset = this.getLocalPointer(e), + prevWidth = 0, + width = 0, + height = 0, + charIndex = 0, + lineIndex = 0, + lineLeftOffset, + line; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (height <= mouseOffset.y) { + height += this.getHeightOfLine(i) * this.scaleY; + lineIndex = i; + if (i > 0) { + charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1); + } + } + else { + break; + } + } + lineLeftOffset = Math.abs(this._getLineLeftOffset(lineIndex)); + width = lineLeftOffset * this.scaleX; + line = this._textLines[lineIndex]; + // handling of RTL: in order to get things work correctly, + // we assume RTL writing is mirrored compared to LTR writing. + // so in position detection we mirror the X offset, and when is time + // of rendering it, we mirror it again. + if (this.direction === 'rtl') { + mouseOffset.x = this.width * this.scaleX - mouseOffset.x; + } + for (var j = 0, jlen = line.length; j < jlen; j++) { + prevWidth = width; + // i removed something about flipX here, check. + width += this.__charBounds[lineIndex][j].kernedWidth * this.scaleX; + if (width <= mouseOffset.x) { + charIndex++; + } + else { + break; + } + } + return this._getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, charIndex, jlen); + }, - /** - * For functionalities on keyUp + ctrl || cmd - */ - ctrlKeysMapUp: { - 67: 'copy', - 88: 'cut' - }, + /** + * @private + */ + _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) { + // we need Math.abs because when width is after the last char, the offset is given as 1, while is 0 + var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth, + distanceBtwNextCharAndCursor = width - mouseOffset.x, + offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor || + distanceBtwNextCharAndCursor < 0 ? 0 : 1, + newSelectionStart = index + offset; + // if object is horizontally flipped, mirror cursor location from the end + if (this.flipX) { + newSelectionStart = jlen - newSelectionStart; + } - /** - * For functionalities on keyDown + ctrl || cmd - */ - ctrlKeysMapDown: { - 65: 'selectAll' - }, + if (newSelectionStart > this._text.length) { + newSelectionStart = this._text.length; + } - onClick: function() { - // No need to trigger click event here, focus is enough to have the keyboard appear on Android - this.hiddenTextarea && this.hiddenTextarea.focus(); - }, + return newSelectionStart; + } + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * Handles keydown event - * only used for arrows and combination of modifier keys. - * @param {Event} e Event object - */ - onKeyDown: function(e) { - if (!this.isEditing) { - return; - } - var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap; - if (e.keyCode in keyMap) { - this[keyMap[e.keyCode]](e); - } - else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) { - this[this.ctrlKeysMapDown[e.keyCode]](e); - } - else { - return; - } - e.stopImmediatePropagation(); - e.preventDefault(); - if (e.keyCode >= 33 && e.keyCode <= 40) { - // if i press an arrow key just update selection - this.inCompositionMode = false; - this.clearContextTop(); - this.renderCursorOrSelection(); - } - else { - this.canvas && this.canvas.requestRenderAll(); - } - }, + (function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** - * Handles keyup event - * We handle KeyUp because ie11 and edge have difficulties copy/pasting - * if a copy/cut event fired, keyup is dismissed - * @param {Event} e Event object - */ - onKeyUp: function(e) { - if (!this.isEditing || this._copyDone || this.inCompositionMode) { - this._copyDone = false; - return; - } - if ((e.keyCode in this.ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) { - this[this.ctrlKeysMapUp[e.keyCode]](e); - } - else { - return; - } - e.stopImmediatePropagation(); - e.preventDefault(); - this.canvas && this.canvas.requestRenderAll(); - }, + /** + * Initializes hidden textarea (needed to bring up keyboard in iOS) + */ + initHiddenTextarea: function() { + this.hiddenTextarea = fabric.document.createElement('textarea'); + this.hiddenTextarea.setAttribute('autocapitalize', 'off'); + this.hiddenTextarea.setAttribute('autocorrect', 'off'); + this.hiddenTextarea.setAttribute('autocomplete', 'off'); + this.hiddenTextarea.setAttribute('spellcheck', 'false'); + this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); + this.hiddenTextarea.setAttribute('wrap', 'off'); + var style = this._calcTextareaPosition(); + // line-height: 1px; was removed from the style to fix this: + // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 + this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + + '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + + ' padding-top: ' + style.fontSize + ';'; - /** - * Handles onInput event - * @param {Event} e Event object - */ - onInput: function(e) { - var fromPaste = this.fromPaste; - this.fromPaste = false; - e && e.stopPropagation(); - if (!this.isEditing) { - return; - } - // decisions about style changes. - var nextText = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, - charCount = this._text.length, - nextCharCount = nextText.length, - removedText, insertedText, - charDiff = nextCharCount - charCount, - selectionStart = this.selectionStart, selectionEnd = this.selectionEnd, - selection = selectionStart !== selectionEnd, - copiedStyle, removeFrom, removeTo; - if (this.hiddenTextarea.value === '') { - this.styles = { }; - this.updateFromTextArea(); - this.fire('changed'); - if (this.canvas) { - this.canvas.fire('text:changed', { target: this }); - this.canvas.requestRenderAll(); - } - return; - } + if (this.hiddenTextareaContainer) { + this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); + } + else { + fabric.document.body.appendChild(this.hiddenTextarea); + } - var textareaSelection = this.fromStringToGraphemeSelection( - this.hiddenTextarea.selectionStart, - this.hiddenTextarea.selectionEnd, - this.hiddenTextarea.value - ); - var backDelete = selectionStart > textareaSelection.selectionStart; + fabric.util.addListener(this.hiddenTextarea, 'blur', this.blur.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); - if (selection) { - removedText = this._text.slice(selectionStart, selectionEnd); - charDiff += selectionEnd - selectionStart; - } - else if (nextCharCount < charCount) { - if (backDelete) { - removedText = this._text.slice(selectionEnd + charDiff, selectionEnd); - } - else { - removedText = this._text.slice(selectionStart, selectionStart - charDiff); - } - } - insertedText = nextText.slice(textareaSelection.selectionEnd - charDiff, textareaSelection.selectionEnd); - if (removedText && removedText.length) { - if (insertedText.length) { - // let's copy some style before deleting. - // we want to copy the style before the cursor OR the style at the cursor if selection - // is bigger than 0. - copiedStyle = this.getSelectionStyles(selectionStart, selectionStart + 1, false); - // now duplicate the style one for each inserted text. - copiedStyle = insertedText.map(function() { - // this return an array of references, but that is fine since we are - // copying the style later. - return copiedStyle[0]; - }); - } - if (selection) { - removeFrom = selectionStart; - removeTo = selectionEnd; - } - else if (backDelete) { - // detect differences between forwardDelete and backDelete - removeFrom = selectionEnd - removedText.length; - removeTo = selectionEnd; - } - else { - removeFrom = selectionEnd; - removeTo = selectionEnd + removedText.length; - } - this.removeStyleFromTo(removeFrom, removeTo); - } - if (insertedText.length) { - if (fromPaste && insertedText.join('') === fabric.copiedText && !fabric.disableStyleCopyPaste) { - copiedStyle = fabric.copiedTextStyle; - } - this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle); - } - this.updateFromTextArea(); - this.fire('changed'); - if (this.canvas) { - this.canvas.fire('text:changed', { target: this }); - this.canvas.requestRenderAll(); - } - }, - /** - * Composition start - */ - onCompositionStart: function() { - this.inCompositionMode = true; - }, + if (!this._clickHandlerInitialized && this.canvas) { + fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this)); + this._clickHandlerInitialized = true; + } + }, - /** - * Composition end - */ - onCompositionEnd: function() { - this.inCompositionMode = false; - }, - - // /** - // * Composition update - // */ - onCompositionUpdate: function(e) { - this.compositionStart = e.target.selectionStart; - this.compositionEnd = e.target.selectionEnd; - this.updateTextareaPosition(); - }, + /** + * For functionalities on keyDown + * Map a special key to a function of the instance/prototype + * If you need different behaviour for ESC or TAB or arrows, you have to change + * this map setting the name of a function that you build on the fabric.Itext or + * your prototype. + * the map change will affect all Instances unless you need for only some text Instances + * in that case you have to clone this object and assign your Instance. + * this.keysMap = Object.assign({}, this.keysMap); + * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] + */ + keysMap: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorRight', + 36: 'moveCursorLeft', + 37: 'moveCursorLeft', + 38: 'moveCursorUp', + 39: 'moveCursorRight', + 40: 'moveCursorDown', + }, - /** - * Copies selected text - * @param {Event} e Event object - */ - copy: function() { - if (this.selectionStart === this.selectionEnd) { - //do not cut-copy if no selection - return; - } + keysMapRtl: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorLeft', + 36: 'moveCursorRight', + 37: 'moveCursorRight', + 38: 'moveCursorUp', + 39: 'moveCursorLeft', + 40: 'moveCursorDown', + }, - fabric.copiedText = this.getSelectedText(); - if (!fabric.disableStyleCopyPaste) { - fabric.copiedTextStyle = this.getSelectionStyles(this.selectionStart, this.selectionEnd, true); - } - else { - fabric.copiedTextStyle = null; - } - this._copyDone = true; - }, + /** + * For functionalities on keyUp + ctrl || cmd + */ + ctrlKeysMapUp: { + 67: 'copy', + 88: 'cut' + }, - /** - * Pastes text - * @param {Event} e Event object - */ - paste: function() { - this.fromPaste = true; - }, + /** + * For functionalities on keyDown + ctrl || cmd + */ + ctrlKeysMapDown: { + 65: 'selectAll' + }, - /** - * @private - * @param {Event} e Event object - * @return {Object} Clipboard data object - */ - _getClipboardData: function(e) { - return (e && e.clipboardData) || fabric.window.clipboardData; - }, + onClick: function() { + // No need to trigger click event here, focus is enough to have the keyboard appear on Android + this.hiddenTextarea && this.hiddenTextarea.focus(); + }, - /** - * Finds the width in pixels before the cursor on the same line - * @private - * @param {Number} lineIndex - * @param {Number} charIndex - * @return {Number} widthBeforeCursor width before cursor - */ - _getWidthBeforeCursor: function(lineIndex, charIndex) { - var widthBeforeCursor = this._getLineLeftOffset(lineIndex), bound; + /** + * Override this method to customize cursor behavior on textbox blur + */ + blur: function () { + this.abortCursorAnimation(); + }, - if (charIndex > 0) { - bound = this.__charBounds[lineIndex][charIndex - 1]; - widthBeforeCursor += bound.left + bound.width; - } - return widthBeforeCursor; - }, + /** + * Handles keydown event + * only used for arrows and combination of modifier keys. + * @param {Event} e Event object + */ + onKeyDown: function(e) { + if (!this.isEditing) { + return; + } + var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap; + if (e.keyCode in keyMap) { + this[keyMap[e.keyCode]](e); + } + else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapDown[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); + if (e.keyCode >= 33 && e.keyCode <= 40) { + // if i press an arrow key just update selection + this.inCompositionMode = false; + this.clearContextTop(); + this.renderCursorOrSelection(); + } + else { + this.canvas && this.canvas.requestRenderAll(); + } + }, - /** - * Gets start offset of a selection - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - getDownCursorOffset: function(e, isRight) { - var selectionProp = this._getSelectionForOffset(e, isRight), - cursorLocation = this.get2DCursorLocation(selectionProp), - lineIndex = cursorLocation.lineIndex; - // if on last line, down cursor goes to end of line - if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) { - // move to the end of a text - return this._text.length - selectionProp; - } - var charIndex = cursorLocation.charIndex, - widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), - indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor), - textAfterCursor = this._textLines[lineIndex].slice(charIndex); - return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex); - }, + /** + * Handles keyup event + * We handle KeyUp because ie11 and edge have difficulties copy/pasting + * if a copy/cut event fired, keyup is dismissed + * @param {Event} e Event object + */ + onKeyUp: function(e) { + if (!this.isEditing || this._copyDone || this.inCompositionMode) { + this._copyDone = false; + return; + } + if ((e.keyCode in this.ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapUp[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); + this.canvas && this.canvas.requestRenderAll(); + }, - /** - * private - * Helps finding if the offset should be counted from Start or End - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - _getSelectionForOffset: function(e, isRight) { - if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) { - return this.selectionEnd; - } - else { - return this.selectionStart; - } - }, + /** + * Handles onInput event + * @param {Event} e Event object + */ + onInput: function(e) { + var fromPaste = this.fromPaste; + this.fromPaste = false; + e && e.stopPropagation(); + if (!this.isEditing) { + return; + } + // decisions about style changes. + var nextText = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, + charCount = this._text.length, + nextCharCount = nextText.length, + removedText, insertedText, + charDiff = nextCharCount - charCount, + selectionStart = this.selectionStart, selectionEnd = this.selectionEnd, + selection = selectionStart !== selectionEnd, + copiedStyle, removeFrom, removeTo; + if (this.hiddenTextarea.value === '') { + this.styles = { }; + this.updateFromTextArea(); + this.fire('changed'); + if (this.canvas) { + this.canvas.fire('text:changed', { target: this }); + this.canvas.requestRenderAll(); + } + return; + } - /** - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - getUpCursorOffset: function(e, isRight) { - var selectionProp = this._getSelectionForOffset(e, isRight), - cursorLocation = this.get2DCursorLocation(selectionProp), - lineIndex = cursorLocation.lineIndex; - if (lineIndex === 0 || e.metaKey || e.keyCode === 33) { - // if on first line, up cursor goes to start of line - return -selectionProp; - } - var charIndex = cursorLocation.charIndex, - widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), - indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor), - textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex), - missingNewlineOffset = this.missingNewlineOffset(lineIndex - 1); - // return a negative offset - return -this._textLines[lineIndex - 1].length - + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset); - }, + var textareaSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, + this.hiddenTextarea.selectionEnd, + this.hiddenTextarea.value + ); + var backDelete = selectionStart > textareaSelection.selectionStart; - /** - * for a given width it founds the matching character. - * @private - */ - _getIndexOnLine: function(lineIndex, width) { - - var line = this._textLines[lineIndex], - lineLeftOffset = this._getLineLeftOffset(lineIndex), - widthOfCharsOnLine = lineLeftOffset, - indexOnLine = 0, charWidth, foundMatch; - - for (var j = 0, jlen = line.length; j < jlen; j++) { - charWidth = this.__charBounds[lineIndex][j].width; - widthOfCharsOnLine += charWidth; - if (widthOfCharsOnLine > width) { - foundMatch = true; - var leftEdge = widthOfCharsOnLine - charWidth, - rightEdge = widthOfCharsOnLine, - offsetFromLeftEdge = Math.abs(leftEdge - width), - offsetFromRightEdge = Math.abs(rightEdge - width); - - indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1); - break; - } - } + if (selection) { + removedText = this._text.slice(selectionStart, selectionEnd); + charDiff += selectionEnd - selectionStart; + } + else if (nextCharCount < charCount) { + if (backDelete) { + removedText = this._text.slice(selectionEnd + charDiff, selectionEnd); + } + else { + removedText = this._text.slice(selectionStart, selectionStart - charDiff); + } + } + insertedText = nextText.slice(textareaSelection.selectionEnd - charDiff, textareaSelection.selectionEnd); + if (removedText && removedText.length) { + if (insertedText.length) { + // let's copy some style before deleting. + // we want to copy the style before the cursor OR the style at the cursor if selection + // is bigger than 0. + copiedStyle = this.getSelectionStyles(selectionStart, selectionStart + 1, false); + // now duplicate the style one for each inserted text. + copiedStyle = insertedText.map(function() { + // this return an array of references, but that is fine since we are + // copying the style later. + return copiedStyle[0]; + }); + } + if (selection) { + removeFrom = selectionStart; + removeTo = selectionEnd; + } + else if (backDelete) { + // detect differences between forwardDelete and backDelete + removeFrom = selectionEnd - removedText.length; + removeTo = selectionEnd; + } + else { + removeFrom = selectionEnd; + removeTo = selectionEnd + removedText.length; + } + this.removeStyleFromTo(removeFrom, removeTo); + } + if (insertedText.length) { + if (fromPaste && insertedText.join('') === fabric.copiedText && !fabric.disableStyleCopyPaste) { + copiedStyle = fabric.copiedTextStyle; + } + this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle); + } + this.updateFromTextArea(); + this.fire('changed'); + if (this.canvas) { + this.canvas.fire('text:changed', { target: this }); + this.canvas.requestRenderAll(); + } + }, + /** + * Composition start + */ + onCompositionStart: function() { + this.inCompositionMode = true; + }, - // reached end - if (!foundMatch) { - indexOnLine = line.length - 1; - } + /** + * Composition end + */ + onCompositionEnd: function() { + this.inCompositionMode = false; + }, - return indexOnLine; - }, + // /** + // * Composition update + // */ + onCompositionUpdate: function(e) { + this.compositionStart = e.target.selectionStart; + this.compositionEnd = e.target.selectionEnd; + this.updateTextareaPosition(); + }, + /** + * Copies selected text + * @param {Event} e Event object + */ + copy: function() { + if (this.selectionStart === this.selectionEnd) { + //do not cut-copy if no selection + return; + } - /** - * Moves cursor down - * @param {Event} e Event object - */ - moveCursorDown: function(e) { - if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { - return; - } - this._moveCursorUpOrDown('Down', e); - }, + fabric.copiedText = this.getSelectedText(); + if (!fabric.disableStyleCopyPaste) { + fabric.copiedTextStyle = this.getSelectionStyles(this.selectionStart, this.selectionEnd, true); + } + else { + fabric.copiedTextStyle = null; + } + this._copyDone = true; + }, - /** - * Moves cursor up - * @param {Event} e Event object - */ - moveCursorUp: function(e) { - if (this.selectionStart === 0 && this.selectionEnd === 0) { - return; - } - this._moveCursorUpOrDown('Up', e); - }, + /** + * Pastes text + * @param {Event} e Event object + */ + paste: function() { + this.fromPaste = true; + }, - /** - * Moves cursor up or down, fires the events - * @param {String} direction 'Up' or 'Down' - * @param {Event} e Event object - */ - _moveCursorUpOrDown: function(direction, e) { - // getUpCursorOffset - // getDownCursorOffset - var action = 'get' + direction + 'CursorOffset', - offset = this[action](e, this._selectionDirection === 'right'); - if (e.shiftKey) { - this.moveCursorWithShift(offset); - } - else { - this.moveCursorWithoutShift(offset); - } - if (offset !== 0) { - this.setSelectionInBoundaries(); - this.abortCursorAnimation(); - this._currentCursorOpacity = 1; - this.initDelayedCursor(); - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, + /** + * @private + * @param {Event} e Event object + * @return {Object} Clipboard data object + */ + _getClipboardData: function(e) { + return (e && e.clipboardData) || fabric.window.clipboardData; + }, - /** - * Moves cursor with shift - * @param {Number} offset - */ - moveCursorWithShift: function(offset) { - var newSelection = this._selectionDirection === 'left' - ? this.selectionStart + offset - : this.selectionEnd + offset; - this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection); - return offset !== 0; - }, + /** + * Finds the width in pixels before the cursor on the same line + * @private + * @param {Number} lineIndex + * @param {Number} charIndex + * @return {Number} widthBeforeCursor width before cursor + */ + _getWidthBeforeCursor: function(lineIndex, charIndex) { + var widthBeforeCursor = this._getLineLeftOffset(lineIndex), bound; - /** - * Moves cursor up without shift - * @param {Number} offset - */ - moveCursorWithoutShift: function(offset) { - if (offset < 0) { - this.selectionStart += offset; - this.selectionEnd = this.selectionStart; - } - else { - this.selectionEnd += offset; - this.selectionStart = this.selectionEnd; - } - return offset !== 0; - }, + if (charIndex > 0) { + bound = this.__charBounds[lineIndex][charIndex - 1]; + widthBeforeCursor += bound.left + bound.width; + } + return widthBeforeCursor; + }, - /** - * Moves cursor left - * @param {Event} e Event object - */ - moveCursorLeft: function(e) { - if (this.selectionStart === 0 && this.selectionEnd === 0) { - return; - } - this._moveCursorLeftOrRight('Left', e); - }, + /** + * Gets start offset of a selection + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getDownCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + // if on last line, down cursor goes to end of line + if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) { + // move to the end of a text + return this._text.length - selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor), + textAfterCursor = this._textLines[lineIndex].slice(charIndex); + return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex); + }, - /** - * @private - * @return {Boolean} true if a change happened - */ - _move: function(e, prop, direction) { - var newValue; - if (e.altKey) { - newValue = this['findWordBoundary' + direction](this[prop]); - } - else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) { - newValue = this['findLineBoundary' + direction](this[prop]); - } - else { - this[prop] += direction === 'Left' ? -1 : 1; - return true; - } - if (typeof newValue !== undefined && this[prop] !== newValue) { - this[prop] = newValue; - return true; - } - }, + /** + * private + * Helps finding if the offset should be counted from Start or End + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + _getSelectionForOffset: function(e, isRight) { + if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) { + return this.selectionEnd; + } + else { + return this.selectionStart; + } + }, - /** - * @private - */ - _moveLeft: function(e, prop) { - return this._move(e, prop, 'Left'); - }, + /** + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getUpCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + if (lineIndex === 0 || e.metaKey || e.keyCode === 33) { + // if on first line, up cursor goes to start of line + return -selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor), + textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex), + missingNewlineOffset = this.missingNewlineOffset(lineIndex - 1); + // return a negative offset + return -this._textLines[lineIndex - 1].length + + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset); + }, - /** - * @private - */ - _moveRight: function(e, prop) { - return this._move(e, prop, 'Right'); - }, + /** + * for a given width it founds the matching character. + * @private + */ + _getIndexOnLine: function(lineIndex, width) { - /** - * Moves cursor left without keeping selection - * @param {Event} e - */ - moveCursorLeftWithoutShift: function(e) { - var change = true; - this._selectionDirection = 'left'; + var line = this._textLines[lineIndex], + lineLeftOffset = this._getLineLeftOffset(lineIndex), + widthOfCharsOnLine = lineLeftOffset, + indexOnLine = 0, charWidth, foundMatch; - // only move cursor when there is no selection, - // otherwise we discard it, and leave cursor on same place - if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) { - change = this._moveLeft(e, 'selectionStart'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charWidth = this.__charBounds[lineIndex][j].width; + widthOfCharsOnLine += charWidth; + if (widthOfCharsOnLine > width) { + foundMatch = true; + var leftEdge = widthOfCharsOnLine - charWidth, + rightEdge = widthOfCharsOnLine, + offsetFromLeftEdge = Math.abs(leftEdge - width), + offsetFromRightEdge = Math.abs(rightEdge - width); + + indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1); + break; + } + } - } - this.selectionEnd = this.selectionStart; - return change; - }, + // reached end + if (!foundMatch) { + indexOnLine = line.length - 1; + } - /** - * Moves cursor left while keeping selection - * @param {Event} e - */ - moveCursorLeftWithShift: function(e) { - if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) { - return this._moveLeft(e, 'selectionEnd'); - } - else if (this.selectionStart !== 0){ - this._selectionDirection = 'left'; - return this._moveLeft(e, 'selectionStart'); - } - }, + return indexOnLine; + }, - /** - * Moves cursor right - * @param {Event} e Event object - */ - moveCursorRight: function(e) { - if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { - return; - } - this._moveCursorLeftOrRight('Right', e); - }, - /** - * Moves cursor right or Left, fires event - * @param {String} direction 'Left', 'Right' - * @param {Event} e Event object - */ - _moveCursorLeftOrRight: function(direction, e) { - var actionName = 'moveCursor' + direction + 'With'; - this._currentCursorOpacity = 1; + /** + * Moves cursor down + * @param {Event} e Event object + */ + moveCursorDown: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; + } + this._moveCursorUpOrDown('Down', e); + }, - if (e.shiftKey) { - actionName += 'Shift'; - } - else { - actionName += 'outShift'; - } - if (this[actionName](e)) { - this.abortCursorAnimation(); - this.initDelayedCursor(); - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, + /** + * Moves cursor up + * @param {Event} e Event object + */ + moveCursorUp: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; + } + this._moveCursorUpOrDown('Up', e); + }, - /** - * Moves cursor right while keeping selection - * @param {Event} e - */ - moveCursorRightWithShift: function(e) { - if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) { - return this._moveRight(e, 'selectionStart'); - } - else if (this.selectionEnd !== this._text.length) { - this._selectionDirection = 'right'; - return this._moveRight(e, 'selectionEnd'); - } - }, + /** + * Moves cursor up or down, fires the events + * @param {String} direction 'Up' or 'Down' + * @param {Event} e Event object + */ + _moveCursorUpOrDown: function(direction, e) { + // getUpCursorOffset + // getDownCursorOffset + var action = 'get' + direction + 'CursorOffset', + offset = this[action](e, this._selectionDirection === 'right'); + if (e.shiftKey) { + this.moveCursorWithShift(offset); + } + else { + this.moveCursorWithoutShift(offset); + } + if (offset !== 0) { + this.setSelectionInBoundaries(); + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - /** - * Moves cursor right without keeping selection - * @param {Event} e Event object - */ - moveCursorRightWithoutShift: function(e) { - var changed = true; - this._selectionDirection = 'right'; + /** + * Moves cursor with shift + * @param {Number} offset + */ + moveCursorWithShift: function(offset) { + var newSelection = this._selectionDirection === 'left' + ? this.selectionStart + offset + : this.selectionEnd + offset; + this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection); + return offset !== 0; + }, - if (this.selectionStart === this.selectionEnd) { - changed = this._moveRight(e, 'selectionStart'); - this.selectionEnd = this.selectionStart; - } - else { - this.selectionStart = this.selectionEnd; - } - return changed; - }, + /** + * Moves cursor up without shift + * @param {Number} offset + */ + moveCursorWithoutShift: function(offset) { + if (offset < 0) { + this.selectionStart += offset; + this.selectionEnd = this.selectionStart; + } + else { + this.selectionEnd += offset; + this.selectionStart = this.selectionEnd; + } + return offset !== 0; + }, - /** - * Removes characters from start/end - * start/end ar per grapheme position in _text array. - * - * @param {Number} start - * @param {Number} end default to start + 1 - */ - removeChars: function(start, end) { - if (typeof end === 'undefined') { - end = start + 1; - } - this.removeStyleFromTo(start, end); - this._text.splice(start, end - start); - this.text = this._text.join(''); - this.set('dirty', true); - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this._removeExtraneousStyles(); - }, + /** + * Moves cursor left + * @param {Event} e Event object + */ + moveCursorLeft: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; + } + this._moveCursorLeftOrRight('Left', e); + }, - /** - * insert characters at start position, before start position. - * start equal 1 it means the text get inserted between actual grapheme 0 and 1 - * if style array is provided, it must be as the same length of text in graphemes - * if end is provided and is bigger than start, old text is replaced. - * start/end ar per grapheme position in _text array. - * - * @param {String} text text to insert - * @param {Array} style array of style objects - * @param {Number} start - * @param {Number} end default to start + 1 - */ - insertChars: function(text, style, start, end) { - if (typeof end === 'undefined') { - end = start; - } - if (end > start) { - this.removeStyleFromTo(start, end); - } - var graphemes = fabric.util.string.graphemeSplit(text); - this.insertNewStyleBlock(graphemes, start, style); - this._text = [].concat(this._text.slice(0, start), graphemes, this._text.slice(end)); - this.text = this._text.join(''); - this.set('dirty', true); - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this._removeExtraneousStyles(); - }, + /** + * @private + * @return {Boolean} true if a change happened + */ + _move: function(e, prop, direction) { + var newValue; + if (e.altKey) { + newValue = this['findWordBoundary' + direction](this[prop]); + } + else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) { + newValue = this['findLineBoundary' + direction](this[prop]); + } + else { + this[prop] += direction === 'Left' ? -1 : 1; + return true; + } + if (typeof newValue !== undefined && this[prop] !== newValue) { + this[prop] = newValue; + return true; + } + }, -}); + /** + * @private + */ + _moveLeft: function(e, prop) { + return this._move(e, prop, 'Left'); + }, + /** + * @private + */ + _moveRight: function(e, prop) { + return this._move(e, prop, 'Right'); + }, -/* _TO_SVG_START_ */ -(function() { - var toFixed = fabric.util.toFixed, - multipleSpacesRegex = / +/g; + /** + * Moves cursor left without keeping selection + * @param {Event} e + */ + moveCursorLeftWithoutShift: function(e) { + var change = true; + this._selectionDirection = 'left'; - fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + // only move cursor when there is no selection, + // otherwise we discard it, and leave cursor on same place + if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) { + change = this._moveLeft(e, 'selectionStart'); - /** - * Returns SVG representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - _toSVG: function() { - var offsets = this._getSVGLeftTopOffsets(), - textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); - return this._wrapSVGTextAndBg(textAndBg); - }, + } + this.selectionEnd = this.selectionStart; + return change; + }, - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup( - this._toSVG(), - { reviver: reviver, noStyle: true, withShadow: true } - ); - }, + /** + * Moves cursor left while keeping selection + * @param {Event} e + */ + moveCursorLeftWithShift: function(e) { + if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) { + return this._moveLeft(e, 'selectionEnd'); + } + else if (this.selectionStart !== 0){ + this._selectionDirection = 'left'; + return this._moveLeft(e, 'selectionStart'); + } + }, - /** - * @private - */ - _getSVGLeftTopOffsets: function() { - return { - textLeft: -this.width / 2, - textTop: -this.height / 2, - lineTop: this.getHeightOfLine(0) - }; - }, + /** + * Moves cursor right + * @param {Event} e Event object + */ + moveCursorRight: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; + } + this._moveCursorLeftOrRight('Right', e); + }, - /** - * @private - */ - _wrapSVGTextAndBg: function(textAndBg) { - var noShadow = true, - textDecoration = this.getSvgTextDecoration(this); - return [ - textAndBg.textBgRects.join(''), - '\t\t', - textAndBg.textSpans.join(''), - '\n' - ]; - }, + /** + * Moves cursor right or Left, fires event + * @param {String} direction 'Left', 'Right' + * @param {Event} e Event object + */ + _moveCursorLeftOrRight: function(direction, e) { + var actionName = 'moveCursor' + direction + 'With'; + this._currentCursorOpacity = 1; - /** - * @private - * @param {Number} textTopOffset Text top offset - * @param {Number} textLeftOffset Text left offset - * @return {Object} - */ - _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { - var textSpans = [], - textBgRects = [], - height = textTopOffset, lineOffset; - // bounding-box background - this._setSVGBg(textBgRects); + if (e.shiftKey) { + actionName += 'Shift'; + } + else { + actionName += 'outShift'; + } + if (this[actionName](e)) { + this.abortCursorAnimation(); + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - // text and text-background - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineOffset = this._getLineLeftOffset(i); - if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { - this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); + /** + * Moves cursor right while keeping selection + * @param {Event} e + */ + moveCursorRightWithShift: function(e) { + if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) { + return this._moveRight(e, 'selectionStart'); } - this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); - height += this.getHeightOfLine(i); - } + else if (this.selectionEnd !== this._text.length) { + this._selectionDirection = 'right'; + return this._moveRight(e, 'selectionEnd'); + } + }, - return { - textSpans: textSpans, - textBgRects: textBgRects - }; - }, + /** + * Moves cursor right without keeping selection + * @param {Event} e Event object + */ + moveCursorRightWithoutShift: function(e) { + var changed = true; + this._selectionDirection = 'right'; - /** - * @private - */ - _createTextCharSpan: function(_char, styleDecl, left, top) { - var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), - styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), - fillStyles = styleProps ? 'style="' + styleProps + '"' : '', - dy = styleDecl.deltaY, dySpan = '', - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - if (dy) { - dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; - } - return [ - '', - fabric.util.string.escapeXml(_char), - '' - ].join(''); - }, - - _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, style, - boxWidth = 0, - line = this._textLines[lineIndex], - timeToRender; - - textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - textLeftOffset += charBox.kernedWidth - charBox.width; - boxWidth += charBox.width; + if (this.selectionStart === this.selectionEnd) { + changed = this._moveRight(e, 'selectionStart'); + this.selectionEnd = this.selectionStart; } else { - boxWidth += charBox.kernedWidth; + this.selectionStart = this.selectionEnd; } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; - } + return changed; + }, + + /** + * Removes characters from start/end + * start/end ar per grapheme position in _text array. + * + * @param {Number} start + * @param {Number} end default to start + 1 + */ + removeChars: function(start, end) { + if (typeof end === 'undefined') { + end = start + 1; } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); + this.removeStyleFromTo(start, end); + this._text.splice(start, end - start); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); } - if (timeToRender) { - style = this._getStyleDeclaration(lineIndex, i) || { }; - textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); - charsToRender = ''; - actualStyle = nextStyle; - textLeftOffset += boxWidth; - boxWidth = 0; + this._removeExtraneousStyles(); + }, + + /** + * insert characters at start position, before start position. + * start equal 1 it means the text get inserted between actual grapheme 0 and 1 + * if style array is provided, it must be as the same length of text in graphemes + * if end is provided and is bigger than start, old text is replaced. + * start/end ar per grapheme position in _text array. + * + * @param {String} text text to insert + * @param {Array} style array of style objects + * @param {Number} start + * @param {Number} end default to start + 1 + */ + insertChars: function(text, style, start, end) { + if (typeof end === 'undefined') { + end = start; } - } - }, - - _pushTextBgRect: function(textBgRects, color, left, top, width, height) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - }, - - _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { - var line = this._textLines[i], - heightOfLine = this.getHeightOfLine(i) / this.lineHeight, - boxWidth = 0, - boxStart = 0, - charBox, currentColor, - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (currentColor !== lastColor) { - lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; + if (end > start) { + this.removeStyleFromTo(start, end); } - else { - boxWidth += charBox.kernedWidth; + var graphemes = this.graphemeSplit(text); + this.insertNewStyleBlock(graphemes, start, style); + this._text = [].concat(this._text.slice(0, start), graphemes, this._text.slice(end)); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); } - } - currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - }, + this._removeExtraneousStyles(); + }, - /** - * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values - * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1 - * - * @private - * @param {*} value - * @return {String} - */ - _getFillAttributes: function(value) { - var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; - if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { - return 'fill="' + value + '"'; - } - return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; - }, + }); + })(typeof exports !== 'undefined' ? exports : window); - /** - * @private - */ - _getSVGLineTopOffset: function(lineIndex) { - var lineTopOffset = 0, lastHeight = 0; - for (var j = 0; j < lineIndex; j++) { - lineTopOffset += this.getHeightOfLine(j); - } - lastHeight = this.getHeightOfLine(j); - return { - lineTop: lineTopOffset, - offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) - }; - }, + /* _TO_SVG_START_ */ + (function(global) { + var fabric = global.fabric, toFixed = fabric.util.toFixed, + multipleSpacesRegex = / +/g; - /** - * Returns styles-string for svg-export - * @param {Boolean} skipShadow a boolean to skip shadow filter output - * @return {String} - */ - getSvgStyles: function(skipShadow) { - var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); - return svgStyle + ' white-space: pre;'; - }, - }); -})(); -/* _TO_SVG_END_ */ + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + + /** + * Returns SVG representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + _toSVG: function() { + var offsets = this._getSVGLeftTopOffsets(), + textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); + return this._wrapSVGTextAndBg(textAndBg); + }, + + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + return this._createBaseSVGMarkup( + this._toSVG(), + { reviver: reviver, noStyle: true, withShadow: true } + ); + }, + /** + * @private + */ + _getSVGLeftTopOffsets: function() { + return { + textLeft: -this.width / 2, + textTop: -this.height / 2, + lineTop: this.getHeightOfLine(0) + }; + }, -(function(global) { + /** + * @private + */ + _wrapSVGTextAndBg: function(textAndBg) { + var noShadow = true, + textDecoration = this.getSvgTextDecoration(this); + return [ + textAndBg.textBgRects.join(''), + '\t\t', + textAndBg.textSpans.join(''), + '\n' + ]; + }, - 'use strict'; + /** + * @private + * @param {Number} textTopOffset Text top offset + * @param {Number} textLeftOffset Text left offset + * @return {Object} + */ + _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { + var textSpans = [], + textBgRects = [], + height = textTopOffset, lineOffset; + // bounding-box background + this._setSVGBg(textBgRects); + + // text and text-background + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineOffset = this._getLineLeftOffset(i); + if (this.direction === 'rtl') { + lineOffset += this.width; + } + if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { + this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); + } + this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); + height += this.getHeightOfLine(i); + } + + return { + textSpans: textSpans, + textBgRects: textBgRects + }; + }, + + /** + * @private + */ + _createTextCharSpan: function(_char, styleDecl, left, top) { + var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), + styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), + fillStyles = styleProps ? 'style="' + styleProps + '"' : '', + dy = styleDecl.deltaY, dySpan = '', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + if (dy) { + dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; + } + return [ + '', + fabric.util.string.escapeXml(_char), + '' + ].join(''); + }, + + _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, style, + boxWidth = 0, + line = this._textLines[lineIndex], + timeToRender; + + textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + textLeftOffset += charBox.kernedWidth - charBox.width; + boxWidth += charBox.width; + } + else { + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; + } + } + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); + } + if (timeToRender) { + style = this._getStyleDeclaration(lineIndex, i) || { }; + textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); + charsToRender = ''; + actualStyle = nextStyle; + if (this.direction === 'rtl') { + textLeftOffset -= boxWidth; + } + else { + textLeftOffset += boxWidth; + } + boxWidth = 0; + } + } + }, + + _pushTextBgRect: function(textBgRects, color, left, top, width, height) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + }, + + _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { + var line = this._textLines[i], + heightOfLine = this.getHeightOfLine(i) / this.lineHeight, + boxWidth = 0, + boxStart = 0, + charBox, currentColor, + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (currentColor !== lastColor) { + lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; + } + else { + boxWidth += charBox.kernedWidth; + } + } + currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + }, + + /** + * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values + * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1 + * + * @private + * @param {*} value + * @return {String} + */ + _getFillAttributes: function(value) { + var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; + if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { + return 'fill="' + value + '"'; + } + return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; + }, + + /** + * @private + */ + _getSVGLineTopOffset: function(lineIndex) { + var lineTopOffset = 0, lastHeight = 0; + for (var j = 0; j < lineIndex; j++) { + lineTopOffset += this.getHeightOfLine(j); + } + lastHeight = this.getHeightOfLine(j); + return { + lineTop: lineTopOffset, + offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) + }; + }, - var fabric = global.fabric || (global.fabric = {}); + /** + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} + */ + getSvgStyles: function(skipShadow) { + var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); + return svgStyle + ' white-space: pre;'; + }, + }); + })(typeof exports !== 'undefined' ? exports : window); + /* _TO_SVG_END_ */ - /** - * Textbox class, based on IText, allows the user to resize the text rectangle - * and wraps lines automatically. Textboxes have their Y scaling locked, the - * user can only change width. Height is adjusted automatically based on the - * wrapping of lines. - * @class fabric.Textbox - * @extends fabric.IText - * @mixes fabric.Observable - * @return {fabric.Textbox} thisArg - * @see {@link fabric.Textbox#initialize} for constructor definition - */ - fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { + (function(global) { + var fabric = global.fabric || (global.fabric = {}); /** - * Type of an object - * @type String - * @default + * Textbox class, based on IText, allows the user to resize the text rectangle + * and wraps lines automatically. Textboxes have their Y scaling locked, the + * user can only change width. Height is adjusted automatically based on the + * wrapping of lines. + * @class fabric.Textbox + * @extends fabric.IText + * @mixes fabric.Observable + * @return {fabric.Textbox} thisArg + * @see {@link fabric.Textbox#initialize} for constructor definition */ - type: 'textbox', + fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { - /** - * Minimum width of textbox, in pixels. - * @type Number - * @default - */ - minWidth: 20, + /** + * Type of an object + * @type String + * @default + */ + type: 'textbox', - /** - * Minimum calculated width of a textbox, in pixels. - * fixed to 2 so that an empty textbox cannot go to 0 - * and is still selectable without text. - * @type Number - * @default - */ - dynamicMinWidth: 2, + /** + * Minimum width of textbox, in pixels. + * @type Number + * @default + */ + minWidth: 20, - /** - * Cached array of text wrapping. - * @type Array - */ - __cachedLines: null, + /** + * Minimum calculated width of a textbox, in pixels. + * fixed to 2 so that an empty textbox cannot go to 0 + * and is still selectable without text. + * @type Number + * @default + */ + dynamicMinWidth: 2, - /** - * Override standard Object class values - */ - lockScalingFlip: true, + /** + * Cached array of text wrapping. + * @type Array + */ + __cachedLines: null, - /** - * Override standard Object class values - * Textbox needs this on false - */ - noScaleCache: false, + /** + * Override standard Object class values + */ + lockScalingFlip: true, - /** - * Properties which when set cause object to change dimensions - * @type Object - * @private - */ - _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), + /** + * Override standard Object class values + * Textbox needs this on false + */ + noScaleCache: false, - /** - * Use this regular expression to split strings in breakable lines - * @private - */ - _wordJoiners: /[ \t\r]/, + /** + * Properties which when set cause object to change dimensions + * @type Object + * @private + */ + _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), - /** - * Use this boolean property in order to split strings that have no white space concept. - * this is a cheap way to help with chinese/japanese - * @type Boolean - * @since 2.6.0 - */ - splitByGrapheme: false, + /** + * Use this regular expression to split strings in breakable lines + * @private + */ + _wordJoiners: /[ \t\r]/, - /** - * Unlike superclass's version of this function, Textbox does not update - * its width. - * @private - * @override - */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this._clearCache(); - // clear dynamicMinWidth as it will be different after we re-wrap line - this.dynamicMinWidth = 0; - // wrap lines - this._styleMap = this._generateStyleMap(this._splitText()); - // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap - if (this.dynamicMinWidth > this.width) { - this._set('width', this.dynamicMinWidth); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - // clear cache and re-calculate height - this.height = this.calcTextHeight(); - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, - - /** - * Generate an object that translates the style object so that it is - * broken up by visual lines (new lines and automatic wrapping). - * The original text styles object is broken up by actual lines (new lines only), - * which is only sufficient for Text / IText - * @private - */ - _generateStyleMap: function(textInfo) { - var realLineCount = 0, - realLineCharCount = 0, - charCount = 0, - map = {}; + /** + * Use this boolean property in order to split strings that have no white space concept. + * this is a cheap way to help with chinese/japanese + * @type Boolean + * @since 2.6.0 + */ + splitByGrapheme: false, - for (var i = 0; i < textInfo.graphemeLines.length; i++) { - if (textInfo.graphemeText[charCount] === '\n' && i > 0) { - realLineCharCount = 0; - charCount++; - realLineCount++; - } - else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { - // this case deals with space's that are removed from end of lines when wrapping - realLineCharCount++; - charCount++; + /** + * Unlike superclass's version of this function, Textbox does not update + * its width. + * @private + * @override + */ + initDimensions: function() { + if (this.__skipDimension) { + return; } + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this._clearCache(); + // clear dynamicMinWidth as it will be different after we re-wrap line + this.dynamicMinWidth = 0; + // wrap lines + this._styleMap = this._generateStyleMap(this._splitText()); + // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap + if (this.dynamicMinWidth > this.width) { + this._set('width', this.dynamicMinWidth); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + // clear cache and re-calculate height + this.height = this.calcTextHeight(); + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, + + /** + * Generate an object that translates the style object so that it is + * broken up by visual lines (new lines and automatic wrapping). + * The original text styles object is broken up by actual lines (new lines only), + * which is only sufficient for Text / IText + * @private + */ + _generateStyleMap: function(textInfo) { + var realLineCount = 0, + realLineCharCount = 0, + charCount = 0, + map = {}; + + for (var i = 0; i < textInfo.graphemeLines.length; i++) { + if (textInfo.graphemeText[charCount] === '\n' && i > 0) { + realLineCharCount = 0; + charCount++; + realLineCount++; + } + else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { + // this case deals with space's that are removed from end of lines when wrapping + realLineCharCount++; + charCount++; + } - map[i] = { line: realLineCount, offset: realLineCharCount }; + map[i] = { line: realLineCount, offset: realLineCharCount }; - charCount += textInfo.graphemeLines[i].length; - realLineCharCount += textInfo.graphemeLines[i].length; - } + charCount += textInfo.graphemeLines[i].length; + realLineCharCount += textInfo.graphemeLines[i].length; + } - return map; - }, + return map; + }, - /** - * Returns true if object has a style property or has it on a specified line - * @param {Number} lineIndex - * @return {Boolean} - */ - styleHas: function(property, lineIndex) { - if (this._styleMap && !this.isWrapping) { - var map = this._styleMap[lineIndex]; + /** + * Returns true if object has a style property or has it on a specified line + * @param {Number} lineIndex + * @return {Boolean} + */ + styleHas: function(property, lineIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (map) { + lineIndex = map.line; + } + } + return fabric.Text.prototype.styleHas.call(this, property, lineIndex); + }, + + /** + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} + */ + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, + map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; if (map) { lineIndex = map.line; + offset = map.offset; + } + if (mapNextLine) { + nextLineIndex = mapNextLine.line; + shouldLimit = nextLineIndex === lineIndex; + nextOffset = mapNextLine.offset; + } + obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; + } + } + } } - } - return fabric.Text.prototype.styleHas.call(this, property, lineIndex); - }, - - /** - * Returns true if object has no styling or no styling in a line - * @param {Number} lineIndex , lineIndex is on wrapped lines. - * @return {Boolean} - */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { return true; - } - var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, - map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; - if (map) { - lineIndex = map.line; - offset = map.offset; - } - if (mapNextLine) { - nextLineIndex = mapNextLine.line; - shouldLimit = nextLineIndex === lineIndex; - nextOffset = mapNextLine.offset; - } - obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; - } + }, + + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @private + */ + _getStyleDeclaration: function(lineIndex, charIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (!map) { + return null; } + lineIndex = map.line; + charIndex = map.offset + charIndex; } - } - return true; - }, + return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); + }, - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @private - */ - _getStyleDeclaration: function(lineIndex, charIndex) { - if (this._styleMap && !this.isWrapping) { + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {Object} style + * @private + */ + _setStyleDeclaration: function(lineIndex, charIndex, style) { var map = this._styleMap[lineIndex]; - if (!map) { - return null; - } lineIndex = map.line; charIndex = map.offset + charIndex; - } - return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); - }, - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @param {Object} style - * @private - */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - var map = this._styleMap[lineIndex]; - lineIndex = map.line; - charIndex = map.offset + charIndex; + this.styles[lineIndex][charIndex] = style; + }, + + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @private + */ + _deleteStyleDeclaration: function(lineIndex, charIndex) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; + delete this.styles[lineIndex][charIndex]; + }, - this.styles[lineIndex][charIndex] = style; - }, + /** + * probably broken need a fix + * Returns the real style line that correspond to the wrapped lineIndex line + * Used just to verify if the line does exist or not. + * @param {Number} lineIndex + * @returns {Boolean} if the line exists or not + * @private + */ + _getLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + return !!this.styles[map.line]; + }, - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @private - */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { - var map = this._styleMap[lineIndex]; - lineIndex = map.line; - charIndex = map.offset + charIndex; - delete this.styles[lineIndex][charIndex]; - }, + /** + * Set the line style to an empty object so that is initialized + * @param {Number} lineIndex + * @param {Object} style + * @private + */ + _setLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + this.styles[map.line] = {}; + }, - /** - * probably broken need a fix - * Returns the real style line that correspond to the wrapped lineIndex line - * Used just to verify if the line does exist or not. - * @param {Number} lineIndex - * @returns {Boolean} if the line exists or not - * @private - */ - _getLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - return !!this.styles[map.line]; - }, + /** + * Wraps text using the 'width' property of Textbox. First this function + * splits text on newlines, so we preserve newlines entered by the user. + * Then it wraps each line using the width of the Textbox by calling + * _wrapLine(). + * @param {Array} lines The string array of text that is split into lines + * @param {Number} desiredWidth width you want to wrap to + * @returns {Array} Array of lines + */ + _wrapText: function(lines, desiredWidth) { + var wrapped = [], i; + this.isWrapping = true; + for (i = 0; i < lines.length; i++) { + wrapped.push.apply(wrapped, this._wrapLine(lines[i], i, desiredWidth)); + } + this.isWrapping = false; + return wrapped; + }, - /** - * Set the line style to an empty object so that is initialized - * @param {Number} lineIndex - * @param {Object} style - * @private - */ - _setLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - this.styles[map.line] = {}; - }, - - /** - * Wraps text using the 'width' property of Textbox. First this function - * splits text on newlines, so we preserve newlines entered by the user. - * Then it wraps each line using the width of the Textbox by calling - * _wrapLine(). - * @param {Array} lines The string array of text that is split into lines - * @param {Number} desiredWidth width you want to wrap to - * @returns {Array} Array of lines - */ - _wrapText: function(lines, desiredWidth) { - var wrapped = [], i; - this.isWrapping = true; - for (i = 0; i < lines.length; i++) { - wrapped = wrapped.concat(this._wrapLine(lines[i], i, desiredWidth)); - } - this.isWrapping = false; - return wrapped; - }, - - /** - * Helper function to measure a string of text, given its lineIndex and charIndex offset - * it gets called when charBounds are not available yet. - * @param {CanvasRenderingContext2D} ctx - * @param {String} text - * @param {number} lineIndex - * @param {number} charOffset - * @returns {number} - * @private - */ - _measureWord: function(word, lineIndex, charOffset) { - var width = 0, prevGrapheme, skipLeft = true; - charOffset = charOffset || 0; - for (var i = 0, len = word.length; i < len; i++) { - var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); - width += box.kernedWidth; - prevGrapheme = word[i]; - } - return width; - }, - - /** - * Wraps a line of text using the width of the Textbox and a context. - * @param {Array} line The grapheme array that represent the line - * @param {Number} lineIndex - * @param {Number} desiredWidth width you want to wrap the line to - * @param {Number} reservedSpace space to remove from wrapping for custom functionalities - * @returns {Array} Array of line(s) into which the given text is wrapped - * to. - */ - _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { - var lineWidth = 0, - splitByGrapheme = this.splitByGrapheme, - graphemeLines = [], - line = [], - // spaces in different languages? - words = splitByGrapheme ? fabric.util.string.graphemeSplit(_line) : _line.split(this._wordJoiners), - word = '', - offset = 0, - infix = splitByGrapheme ? '' : ' ', - wordWidth = 0, - infixWidth = 0, - largestWordWidth = 0, - lineJustStarted = true, - additionalSpace = this._getWidthOfCharSpacing(), - reservedSpace = reservedSpace || 0; - // fix a difference between split and graphemeSplit - if (words.length === 0) { - words.push([]); - } - desiredWidth -= reservedSpace; - for (var i = 0; i < words.length; i++) { - // if using splitByGrapheme words are already in graphemes. - word = splitByGrapheme ? words[i] : fabric.util.string.graphemeSplit(words[i]); - wordWidth = this._measureWord(word, lineIndex, offset); - offset += word.length; - - lineWidth += infixWidth + wordWidth - additionalSpace; - if (lineWidth > desiredWidth && !lineJustStarted) { - graphemeLines.push(line); - line = []; - lineWidth = wordWidth; - lineJustStarted = true; - } - else { - lineWidth += additionalSpace; - } + /** + * Helper function to measure a string of text, given its lineIndex and charIndex offset + * It gets called when charBounds are not available yet. + * Override if necessary + * Use with {@link fabric.Textbox#wordSplit} + * + * @param {CanvasRenderingContext2D} ctx + * @param {String} text + * @param {number} lineIndex + * @param {number} charOffset + * @returns {number} + */ + _measureWord: function(word, lineIndex, charOffset) { + var width = 0, prevGrapheme, skipLeft = true; + charOffset = charOffset || 0; + for (var i = 0, len = word.length; i < len; i++) { + var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); + width += box.kernedWidth; + prevGrapheme = word[i]; + } + return width; + }, - if (!lineJustStarted && !splitByGrapheme) { - line.push(infix); - } - line = line.concat(word); + /** + * Override this method to customize word splitting + * Use with {@link fabric.Textbox#_measureWord} + * @param {string} value + * @returns {string[]} array of words + */ + wordSplit: function (value) { + return value.split(this._wordJoiners); + }, + + /** + * Wraps a line of text using the width of the Textbox and a context. + * @param {Array} line The grapheme array that represent the line + * @param {Number} lineIndex + * @param {Number} desiredWidth width you want to wrap the line to + * @param {Number} reservedSpace space to remove from wrapping for custom functionalities + * @returns {Array} Array of line(s) into which the given text is wrapped + * to. + */ + _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { + var lineWidth = 0, + splitByGrapheme = this.splitByGrapheme, + graphemeLines = [], + line = [], + // spaces in different languages? + words = splitByGrapheme ? this.graphemeSplit(_line) : this.wordSplit(_line), + word = '', + offset = 0, + infix = splitByGrapheme ? '' : ' ', + wordWidth = 0, + infixWidth = 0, + largestWordWidth = 0, + lineJustStarted = true, + additionalSpace = this._getWidthOfCharSpacing(), + reservedSpace = reservedSpace || 0; + // fix a difference between split and graphemeSplit + if (words.length === 0) { + words.push([]); + } + desiredWidth -= reservedSpace; + // measure words + var data = words.map(function (word) { + // if using splitByGrapheme words are already in graphemes. + word = splitByGrapheme ? word : this.graphemeSplit(word); + var width = this._measureWord(word, lineIndex, offset); + largestWordWidth = Math.max(width, largestWordWidth); + offset += word.length + 1; + return { word: word, width: width }; + }.bind(this)); + var maxWidth = Math.max(desiredWidth, largestWordWidth, this.dynamicMinWidth); + // layout words + offset = 0; + for (var i = 0; i < words.length; i++) { + word = data[i].word; + wordWidth = data[i].width; + offset += word.length; + + lineWidth += infixWidth + wordWidth - additionalSpace; + if (lineWidth > maxWidth && !lineJustStarted) { + graphemeLines.push(line); + line = []; + lineWidth = wordWidth; + lineJustStarted = true; + } + else { + lineWidth += additionalSpace; + } - infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); - offset++; - lineJustStarted = false; - // keep track of largest word - if (wordWidth > largestWordWidth) { - largestWordWidth = wordWidth; + if (!lineJustStarted && !splitByGrapheme) { + line.push(infix); + } + line = line.concat(word); + + infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); + offset++; + lineJustStarted = false; } - } - i && graphemeLines.push(line); + i && graphemeLines.push(line); - if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { - this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; - } - return graphemeLines; - }, + if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { + this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; + } + return graphemeLines; + }, - /** - * Detect if the text line is ended with an hard break - * text and itext do not have wrapping, return false - * @param {Number} lineIndex text to split - * @return {Boolean} - */ - isEndOfWrapping: function(lineIndex) { - if (!this._styleMap[lineIndex + 1]) { - // is last line, return true; - return true; - } - if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { - // this is last line before a line break, return true; - return true; - } - return false; - }, + /** + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @param {Number} lineIndex text to split + * @return {Boolean} + */ + isEndOfWrapping: function(lineIndex) { + if (!this._styleMap[lineIndex + 1]) { + // is last line, return true; + return true; + } + if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { + // this is last line before a line break, return true; + return true; + } + return false; + }, - /** - * Detect if a line has a linebreak and so we need to account for it when moving - * and counting style. - * @return Number - */ - missingNewlineOffset: function(lineIndex) { - if (this.splitByGrapheme) { - return this.isEndOfWrapping(lineIndex) ? 1 : 0; - } - return 1; - }, + /** + * Detect if a line has a linebreak and so we need to account for it when moving + * and counting style. + * @return Number + */ + missingNewlineOffset: function(lineIndex) { + if (this.splitByGrapheme) { + return this.isEndOfWrapping(lineIndex) ? 1 : 0; + } + return 1; + }, - /** - * Gets lines of text to render in the Textbox. This function calculates - * text wrapping on the fly every time it is called. - * @param {String} text text to split - * @returns {Array} Array of lines in the Textbox. - * @override - */ - _splitTextIntoLines: function(text) { - var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), - graphemeLines = this._wrapText(newText.lines, this.width), - lines = new Array(graphemeLines.length); - for (var i = 0; i < graphemeLines.length; i++) { - lines[i] = graphemeLines[i].join(''); - } - newText.lines = lines; - newText.graphemeLines = graphemeLines; - return newText; - }, + /** + * Gets lines of text to render in the Textbox. This function calculates + * text wrapping on the fly every time it is called. + * @param {String} text text to split + * @returns {Array} Array of lines in the Textbox. + * @override + */ + _splitTextIntoLines: function(text) { + var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), + graphemeLines = this._wrapText(newText.lines, this.width), + lines = new Array(graphemeLines.length); + for (var i = 0; i < graphemeLines.length; i++) { + lines[i] = graphemeLines[i].join(''); + } + newText.lines = lines; + newText.graphemeLines = graphemeLines; + return newText; + }, - getMinWidth: function() { - return Math.max(this.minWidth, this.dynamicMinWidth); - }, + getMinWidth: function() { + return Math.max(this.minWidth, this.dynamicMinWidth); + }, - _removeExtraneousStyles: function() { - var linesToKeep = {}; - for (var prop in this._styleMap) { - if (this._textLines[prop]) { - linesToKeep[this._styleMap[prop].line] = 1; + _removeExtraneousStyles: function() { + var linesToKeep = {}; + for (var prop in this._styleMap) { + if (this._textLines[prop]) { + linesToKeep[this._styleMap[prop].line] = 1; + } } - } - for (var prop in this.styles) { - if (!linesToKeep[prop]) { - delete this.styles[prop]; + for (var prop in this.styles) { + if (!linesToKeep[prop]) { + delete this.styles[prop]; + } } + }, + + /** + * Returns object representation of an instance + * @method toObject + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); } - }, + }); /** - * Returns object representation of an instance - * @method toObject - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance + * Returns fabric.Textbox instance from an object representation + * @static + * @memberOf fabric.Textbox + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); - } - }); + fabric.Textbox.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Textbox, object, 'text'); + }; + })(typeof exports !== 'undefined' ? exports : window); - /** - * Returns fabric.Textbox instance from an object representation - * @static - * @memberOf fabric.Textbox - * @param {Object} object Object to create an instance from - * @param {Function} [callback] Callback to invoke when an fabric.Textbox instance is created - */ - fabric.Textbox.fromObject = function(object, callback) { - return fabric.Object._fromObject('Textbox', object, callback, 'text'); - }; -})(typeof exports !== 'undefined' ? exports : this); - - -(function() { - - var controlsUtils = fabric.controlsUtils, - scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, - scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, - scalingEqually = controlsUtils.scalingEqually, - scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, - scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, - scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, - objectControls = fabric.Object.prototype.controls; - - objectControls.ml = new fabric.Control({ - x: -0.5, - y: 0, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, - }); - - objectControls.mr = new fabric.Control({ - x: 0.5, - y: 0, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, - }); - - objectControls.mb = new fabric.Control({ - x: 0, - y: 0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, - }); - - objectControls.mt = new fabric.Control({ - x: 0, - y: -0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, - }); - - objectControls.tl = new fabric.Control({ - x: -0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.tr = new fabric.Control({ - x: 0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.bl = new fabric.Control({ - x: -0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.br = new fabric.Control({ - x: 0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.mtr = new fabric.Control({ - x: 0, - y: -0.5, - actionHandler: controlsUtils.rotationWithSnapping, - cursorStyleHandler: controlsUtils.rotationStyleHandler, - offsetY: -40, - withConnection: true, - actionName: 'rotate', - }); - - if (fabric.Textbox) { - // this is breaking the prototype inheritance, no time / ideas to fix it. - // is important to document that if you want to have all objects to have a - // specific custom control, you have to add it to Object prototype and to Textbox - // prototype. The controls are shared as references. So changes to control `tr` - // can still apply to all objects if needed. - var textBoxControls = fabric.Textbox.prototype.controls = { }; - - textBoxControls.mtr = objectControls.mtr; - textBoxControls.tr = objectControls.tr; - textBoxControls.br = objectControls.br; - textBoxControls.tl = objectControls.tl; - textBoxControls.bl = objectControls.bl; - textBoxControls.mt = objectControls.mt; - textBoxControls.mb = objectControls.mb; - - textBoxControls.mr = new fabric.Control({ - x: 0.5, + (function(global) { + + var fabric = global.fabric, controlsUtils = fabric.controlsUtils, + scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, + scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, + scalingEqually = controlsUtils.scalingEqually, + scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, + scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, + scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, + objectControls = fabric.Object.prototype.controls; + + objectControls.ml = new fabric.Control({ + x: -0.5, y: 0, - actionHandler: controlsUtils.changeWidth, cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, }); - textBoxControls.ml = new fabric.Control({ - x: -0.5, + objectControls.mr = new fabric.Control({ + x: 0.5, y: 0, - actionHandler: controlsUtils.changeWidth, cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, }); - } -})(); + objectControls.mb = new fabric.Control({ + x: 0, + y: 0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); + + objectControls.mt = new fabric.Control({ + x: 0, + y: -0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); + + objectControls.tl = new fabric.Control({ + x: -0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.tr = new fabric.Control({ + x: 0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.bl = new fabric.Control({ + x: -0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.br = new fabric.Control({ + x: 0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.mtr = new fabric.Control({ + x: 0, + y: -0.5, + actionHandler: controlsUtils.rotationWithSnapping, + cursorStyleHandler: controlsUtils.rotationStyleHandler, + offsetY: -40, + withConnection: true, + actionName: 'rotate', + }); + + if (fabric.Textbox) { + // this is breaking the prototype inheritance, no time / ideas to fix it. + // is important to document that if you want to have all objects to have a + // specific custom control, you have to add it to Object prototype and to Textbox + // prototype. The controls are shared as references. So changes to control `tr` + // can still apply to all objects if needed. + var textBoxControls = fabric.Textbox.prototype.controls = { }; + + textBoxControls.mtr = objectControls.mtr; + textBoxControls.tr = objectControls.tr; + textBoxControls.br = objectControls.br; + textBoxControls.tl = objectControls.tl; + textBoxControls.bl = objectControls.bl; + textBoxControls.mt = objectControls.mt; + textBoxControls.mb = objectControls.mb; + + textBoxControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); + + textBoxControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); + } + })(typeof exports !== 'undefined' ? exports : window); + + // extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect + // import './src/mixins/eraser_brush.mixin.js'; // optional erasing + + module.exports = { + fabric: fabric$1, + }; + +})(); diff --git a/dist/fabric.min.js b/dist/fabric.min.js index f7d904ba60f..497386bdc55 100644 --- a/dist/fabric.min.js +++ b/dist/fabric.min.js @@ -1 +1,2 @@ -var fabric=fabric||{version:"5.1.0"};if("undefined"!=typeof exports?exports.fabric=fabric:"function"==typeof define&&define.amd&&define([],function(){return fabric}),"undefined"!=typeof document&&"undefined"!=typeof window)document instanceof("undefined"!=typeof HTMLDocument?HTMLDocument:Document)?fabric.document=document:fabric.document=document.implementation.createHTMLDocument(""),fabric.window=window;else{var jsdom=require("jsdom"),virtualWindow=new jsdom.JSDOM(decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"),{features:{FetchExternalResources:["img"]},resources:"usable"}).window;fabric.document=virtualWindow.document,fabric.jsdomImplForWrapper=require("jsdom/lib/jsdom/living/generated/utils").implForWrapper,fabric.nodeCanvas=require("jsdom/lib/jsdom/utils").Canvas,fabric.window=virtualWindow,DOMParser=fabric.window.DOMParser}function resizeCanvasIfNeeded(t){var e=t.targetCanvas,i=e.width,r=e.height,n=t.destinationWidth,s=t.destinationHeight;i===n&&r===s||(e.width=n,e.height=s)}function copyGLTo2DDrawImage(t,e){var i=t.canvas,r=e.targetCanvas,n=r.getContext("2d");n.translate(0,r.height),n.scale(1,-1);var s=i.height-r.height;n.drawImage(i,0,s,r.width,r.height,0,0,r.width,r.height)}function copyGLTo2DPutImageData(t,e){var i=e.targetCanvas.getContext("2d"),r=e.destinationWidth,n=e.destinationHeight,s=r*n*4,o=new Uint8Array(this.imageBuffer,0,s),a=new Uint8ClampedArray(this.imageBuffer,0,s);t.readPixels(0,0,r,n,t.RGBA,t.UNSIGNED_BYTE,o);var c=new ImageData(a,r,n);i.putImageData(c,0,0)}fabric.isTouchSupported="ontouchstart"in fabric.window||"ontouchstart"in fabric.document||fabric.window&&fabric.window.navigator&&0_)for(var C=1,S=d.length;Ct[i-2].x?1:n.x===t[i-2].x?0:-1,c=n.y>t[i-2].y?1:n.y===t[i-2].y?0:-1),r.push(["L",n.x+a*e,n.y+c*e]),r},fabric.util.getPathSegmentsInfo=l,fabric.util.getBoundsOfCurve=function(t,e,i,r,n,s,o,a){var c;if(fabric.cachesBoundsOfCurve&&(c=j.call(arguments),fabric.boundsOfCurveCache[c]))return fabric.boundsOfCurveCache[c];var h,l,u,f,d,g,p,v,m=Math.sqrt,b=Math.min,y=Math.max,_=Math.abs,x=[],C=[[],[]];l=6*t-12*i+6*n,h=-3*t+9*i-9*n+3*o,u=3*i-3*t;for(var S=0;S<2;++S)if(0/g,">")},graphemeSplit:function(t){var e,i=0,r=[];for(i=0;it.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,e){return void 0===e&&(e=.5),e=Math.max(Math.min(1,e),0),new i(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)},distanceFrom:function(t){var e=this.x-t.x,i=this.y-t.y;return Math.sqrt(e*e+i*i)},midPointFrom:function(t){return this.lerp(t)},min:function(t){return new i(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new i(Math.max(this.x,t.x),Math.max(this.y,t.y))},toString:function(){return this.x+","+this.y},setXY:function(t,e){return this.x=t,this.y=e,this},setX:function(t){return this.x=t,this},setY:function(t){return this.y=t,this},setFromPoint:function(t){return this.x=t.x,this.y=t.y,this},swap:function(t){var e=this.x,i=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=i},clone:function(){return new i(this.x,this.y)}}}("undefined"!=typeof exports?exports:this),function(t){"use strict";var f=t.fabric||(t.fabric={});function d(t){this.status=t,this.points=[]}f.Intersection?f.warn("fabric.Intersection is already defined"):(f.Intersection=d,f.Intersection.prototype={constructor:d,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},f.Intersection.intersectLineLine=function(t,e,i,r){var n,s=(r.x-i.x)*(t.y-i.y)-(r.y-i.y)*(t.x-i.x),o=(e.x-t.x)*(t.y-i.y)-(e.y-t.y)*(t.x-i.x),a=(r.y-i.y)*(e.x-t.x)-(r.x-i.x)*(e.y-t.y);if(0!==a){var c=s/a,h=o/a;0<=c&&c<=1&&0<=h&&h<=1?(n=new d("Intersection")).appendPoint(new f.Point(t.x+c*(e.x-t.x),t.y+c*(e.y-t.y))):n=new d}else n=new d(0===s||0===o?"Coincident":"Parallel");return n},f.Intersection.intersectLinePolygon=function(t,e,i){var r,n,s,o,a=new d,c=i.length;for(o=0;o=c&&(h.x-=c),h.x<=-c&&(h.x+=c),h.y>=c&&(h.y-=c),h.y<=c&&(h.y+=c),h.x-=o.offsetX,h.y-=o.offsetY,h}function y(t){return t.flipX!==t.flipY}function _(t,e,i,r,n){if(0!==t[e]){var s=n/t._getTransformedDimensions()[r]*t[i];t.set(i,s)}}function x(t,e,i,r){var n,s=e.target,o=s._getTransformedDimensions(0,s.skewY),a=P(e,e.originX,e.originY,i,r),c=Math.abs(2*a.x)-o.x,h=s.skewX;c<2?n=0:(n=v(Math.atan2(c/s.scaleX,o.y/s.scaleY)),e.originX===f&&e.originY===p&&(n=-n),e.originX===g&&e.originY===d&&(n=-n),y(s)&&(n=-n));var l=h!==n;if(l){var u=s._getTransformedDimensions().y;s.set("skewX",n),_(s,"skewY","scaleY","y",u)}return l}function C(t,e,i,r){var n,s=e.target,o=s._getTransformedDimensions(s.skewX,0),a=P(e,e.originX,e.originY,i,r),c=Math.abs(2*a.y)-o.y,h=s.skewY;c<2?n=0:(n=v(Math.atan2(c/s.scaleY,o.x/s.scaleX)),e.originX===f&&e.originY===p&&(n=-n),e.originX===g&&e.originY===d&&(n=-n),y(s)&&(n=-n));var l=h!==n;if(l){var u=s._getTransformedDimensions().x;s.set("skewY",n),_(s,"skewX","scaleX","x",u)}return l}function E(t,e,i,r,n){n=n||{};var s,o,a,c,h,l,u=e.target,f=u.lockScalingX,d=u.lockScalingY,g=n.by,p=w(t,u),v=k(u,g,p),m=e.gestureScale;if(v)return!1;if(m)o=e.scaleX*m,a=e.scaleY*m;else{if(s=P(e,e.originX,e.originY,i,r),h="y"!==g?T(s.x):1,l="x"!==g?T(s.y):1,e.signX||(e.signX=h),e.signY||(e.signY=l),u.lockScalingFlip&&(e.signX!==h||e.signY!==l))return!1;if(c=u._getTransformedDimensions(),p&&!g){var b=Math.abs(s.x)+Math.abs(s.y),y=e.original,_=b/(Math.abs(c.x*y.scaleX/u.scaleX)+Math.abs(c.y*y.scaleY/u.scaleY));o=y.scaleX*_,a=y.scaleY*_}else o=Math.abs(s.x*u.scaleX/c.x),a=Math.abs(s.y*u.scaleY/c.y);O(e)&&(o*=2,a*=2),e.signX!==h&&"y"!==g&&(e.originX=S[e.originX],o*=-1,e.signX=h),e.signY!==l&&"x"!==g&&(e.originY=S[e.originY],a*=-1,e.signY=l)}var x=u.scaleX,C=u.scaleY;return g?("x"===g&&u.set("scaleX",o),"y"===g&&u.set("scaleY",a)):(!f&&u.set("scaleX",o),!d&&u.set("scaleY",a)),x!==u.scaleX||C!==u.scaleY}n.scaleCursorStyleHandler=function(t,e,i){var r=w(t,i),n="";if(0!==e.x&&0===e.y?n="x":0===e.x&&0!==e.y&&(n="y"),k(i,n,r))return"not-allowed";var s=a(i,e);return o[s]+"-resize"},n.skewCursorStyleHandler=function(t,e,i){var r="not-allowed";if(0!==e.x&&i.lockSkewingY)return r;if(0!==e.y&&i.lockSkewingX)return r;var n=a(i,e)%4;return s[n]+"-resize"},n.scaleSkewCursorStyleHandler=function(t,e,i){return t[i.canvas.altActionKey]?n.skewCursorStyleHandler(t,e,i):n.scaleCursorStyleHandler(t,e,i)},n.rotationWithSnapping=b("rotating",m(function(t,e,i,r){var n=e,s=n.target,o=s.translateToOriginPoint(s.getCenterPoint(),n.originX,n.originY);if(s.lockRotation)return!1;var a,c=Math.atan2(n.ey-o.y,n.ex-o.x),h=Math.atan2(r-o.y,i-o.x),l=v(h-c+n.theta);if(0o.r2,h=this.gradientTransform?this.gradientTransform.concat():fabric.iMatrix.concat(),l=-this.offsetX,u=-this.offsetY,f=!!e.additionalTransform,d="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox";if(a.sort(function(t,e){return t.offset-e.offset}),"objectBoundingBox"===d?(l/=t.width,u/=t.height):(l+=t.width/2,u+=t.height/2),"path"===t.type&&"percentage"!==this.gradientUnits&&(l-=t.pathOffset.x,u-=t.pathOffset.y),h[4]-=l,h[5]-=u,s='id="SVGID_'+this.id+'" gradientUnits="'+d+'"',s+=' gradientTransform="'+(f?e.additionalTransform+" ":"")+fabric.util.matrixToSVG(h)+'" ',"linear"===this.type?n=["\n']:"radial"===this.type&&(n=["\n']),"radial"===this.type){if(c)for((a=a.concat()).reverse(),i=0,r=a.length;i\n')}return n.push("linear"===this.type?"\n":"\n"),n.join("")},toLive:function(t){var e,i,r,n=fabric.util.object.clone(this.coords);if(this.type){for("linear"===this.type?e=t.createLinearGradient(n.x1,n.y1,n.x2,n.y2):"radial"===this.type&&(e=t.createRadialGradient(n.x1,n.y1,n.r1,n.x2,n.y2,n.r2)),i=0,r=this.colorStops.length;i\n\n\n'},setOptions:function(t){for(var e in t)this[e]=t[e]},toLive:function(t){var e=this.source;if(!e)return"";if(void 0!==e.src){if(!e.complete)return"";if(0===e.naturalWidth||0===e.naturalHeight)return""}return t.createPattern(e,this.repeat)}})}(),function(t){"use strict";var o=t.fabric||(t.fabric={}),a=o.util.toFixed;o.Shadow?o.warn("fabric.Shadow is already defined."):(o.Shadow=o.util.createClass({color:"rgb(0,0,0)",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,nonScaling:!1,initialize:function(t){for(var e in"string"==typeof t&&(t=this._parseShadow(t)),t)this[e]=t[e];this.id=o.Object.__uid++},_parseShadow:function(t){var e=t.trim(),i=o.Shadow.reOffsetsAndBlur.exec(e)||[];return{color:(e.replace(o.Shadow.reOffsetsAndBlur,"")||"rgb(0,0,0)").trim(),offsetX:parseFloat(i[1],10)||0,offsetY:parseFloat(i[2],10)||0,blur:parseFloat(i[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join("px ")},toSVG:function(t){var e=40,i=40,r=o.Object.NUM_FRACTION_DIGITS,n=o.util.rotateVector({x:this.offsetX,y:this.offsetY},o.util.degreesToRadians(-t.angle)),s=new o.Color(this.color);return t.width&&t.height&&(e=100*a((Math.abs(n.x)+this.blur)/t.width,r)+20,i=100*a((Math.abs(n.y)+this.blur)/t.height,r)+20),t.flipX&&(n.x*=-1),t.flipY&&(n.y*=-1),'\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\n\n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke,nonScaling:this.nonScaling};var e={},i=o.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke","nonScaling"].forEach(function(t){this[t]!==i[t]&&(e[t]=this[t])},this),e}}),o.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/)}("undefined"!=typeof exports?exports:this),function(){"use strict";if(fabric.StaticCanvas)fabric.warn("fabric.StaticCanvas is already defined.");else{var n=fabric.util.object.extend,t=fabric.util.getElementOffset,h=fabric.util.removeFromArray,a=fabric.util.toFixed,s=fabric.util.transformPoint,o=fabric.util.invertTransform,i=fabric.util.getNodeCanvas,r=fabric.util.createCanvasElement,e=new Error("Could not initialize `canvas` element");fabric.StaticCanvas=fabric.util.createClass(fabric.CommonMethods,{initialize:function(t,e){e||(e={}),this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:fabric.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!0,clipPath:void 0,_initStatic:function(t,e){var i=this.requestRenderAllBound;this._objects=[],this._createLowerCanvas(t),this._initOptions(e),this.interactive||this._initRetinaScaling(),e.overlayImage&&this.setOverlayImage(e.overlayImage,i),e.backgroundImage&&this.setBackgroundImage(e.backgroundImage,i),e.backgroundColor&&this.setBackgroundColor(e.backgroundColor,i),e.overlayColor&&this.setOverlayColor(e.overlayColor,i),this.calcOffset()},_isRetinaScaling:function(){return 1\n'),this._setSVGBgOverlayColor(i,"background"),this._setSVGBgOverlayImage(i,"backgroundImage",e),this._setSVGObjects(i,e),this.clipPath&&i.push("\n"),this._setSVGBgOverlayColor(i,"overlay"),this._setSVGBgOverlayImage(i,"overlayImage",e),i.push(""),i.join("")},_setSVGPreamble:function(t,e){e.suppressPreamble||t.push('\n','\n')},_setSVGHeader:function(t,e){var i,r=e.width||this.width,n=e.height||this.height,s='viewBox="0 0 '+this.width+" "+this.height+'" ',o=fabric.Object.NUM_FRACTION_DIGITS;e.viewBox?s='viewBox="'+e.viewBox.x+" "+e.viewBox.y+" "+e.viewBox.width+" "+e.viewBox.height+'" ':this.svgViewportTransformation&&(i=this.viewportTransform,s='viewBox="'+a(-i[4]/i[0],o)+" "+a(-i[5]/i[3],o)+" "+a(this.width/i[0],o)+" "+a(this.height/i[3],o)+'" '),t.push("\n',"Created with Fabric.js ",fabric.version,"\n","\n",this.createSVGFontFacesMarkup(),this.createSVGRefElementsMarkup(),this.createSVGClipPathMarkup(e),"\n")},createSVGClipPathMarkup:function(t){var e=this.clipPath;return e?(e.clipPathId="CLIPPATH_"+fabric.Object.__uid++,'\n'+this.clipPath.toClipPathSVG(t.reviver)+"\n"):""},createSVGRefElementsMarkup:function(){var s=this;return["background","overlay"].map(function(t){var e=s[t+"Color"];if(e&&e.toLive){var i=s[t+"Vpt"],r=s.viewportTransform,n={width:s.width/(i?r[0]:1),height:s.height/(i?r[3]:1)};return e.toSVG(n,{additionalTransform:i?fabric.util.matrixToSVG(r):""})}}).join("")},createSVGFontFacesMarkup:function(){var t,e,i,r,n,s,o,a,c="",h={},l=fabric.fontPaths,u=[];for(this._objects.forEach(function t(e){u.push(e),e._objects&&e._objects.forEach(t)}),o=0,a=u.length;o',"\n",c,"","\n"].join("")),c},_setSVGObjects:function(t,e){var i,r,n,s=this._objects;for(r=0,n=s.length;r\n")}else t.push('\n")},sendToBack:function(t){if(!t)return this;var e,i,r,n=this._activeObject;if(t===n&&"activeSelection"===t.type)for(e=(r=n._objects).length;e--;)i=r[e],h(this._objects,i),this._objects.unshift(i);else h(this._objects,t),this._objects.unshift(t);return this.renderOnAddRemove&&this.requestRenderAll(),this},bringToFront:function(t){if(!t)return this;var e,i,r,n=this._activeObject;if(t===n&&"activeSelection"===t.type)for(r=n._objects,e=0;e"}}),n(fabric.StaticCanvas.prototype,fabric.Observable),n(fabric.StaticCanvas.prototype,fabric.Collection),n(fabric.StaticCanvas.prototype,fabric.DataURLExporter),n(fabric.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(t){var e=r();if(!e||!e.getContext)return null;var i=e.getContext("2d");if(!i)return null;switch(t){case"setLineDash":return void 0!==i.setLineDash;default:return null}}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject,fabric.isLikelyNode&&(fabric.StaticCanvas.prototype.createPNGStream=function(){var t=i(this.lowerCanvasEl);return t&&t.createPNGStream()},fabric.StaticCanvas.prototype.createJPEGStream=function(t){var e=i(this.lowerCanvasEl);return e&&e.createJPEGStream(t)})}}(),fabric.BaseBrush=fabric.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeMiterLimit:10,strokeDashArray:null,limitedToCanvasSize:!1,_setBrushStyles:function(t){t.strokeStyle=this.color,t.lineWidth=this.width,t.lineCap=this.strokeLineCap,t.miterLimit=this.strokeMiterLimit,t.lineJoin=this.strokeLineJoin,t.setLineDash(this.strokeDashArray||[])},_saveAndTransform:function(t){var e=this.canvas.viewportTransform;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5])},_setShadow:function(){if(this.shadow){var t=this.canvas,e=this.shadow,i=t.contextTop,r=t.getZoom();t&&t._isRetinaScaling()&&(r*=fabric.devicePixelRatio),i.shadowColor=e.color,i.shadowBlur=e.blur*r,i.shadowOffsetX=e.offsetX*r,i.shadowOffsetY=e.offsetY*r}},needsFullRender:function(){return new fabric.Color(this.color).getAlpha()<1||!!this.shadow},_resetShadow:function(){var t=this.canvas.contextTop;t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0},_isOutSideCanvas:function(t){return t.x<0||t.x>this.canvas.getWidth()||t.y<0||t.y>this.canvas.getHeight()}}),fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{decimate:.4,drawStraightLine:!1,straightLineKey:"shiftKey",initialize:function(t){this.canvas=t,this._points=[]},needsFullRender:function(){return this.callSuper("needsFullRender")||this._hasStraightLine},_drawSegment:function(t,e,i){var r=e.midPointFrom(i);return t.quadraticCurveTo(e.x,e.y,r.x,r.y),r},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],this._prepareForDrawing(t),this._captureDrawingPath(t),this._render())},onMouseMove:function(t,e){if(this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],(!0!==this.limitedToCanvasSize||!this._isOutSideCanvas(t))&&this._captureDrawingPath(t)&&1"},getObjectScaling:function(){if(!this.group)return{scaleX:this.scaleX,scaleY:this.scaleY};var t=x.util.qrDecompose(this.calcTransformMatrix());return{scaleX:Math.abs(t.scaleX),scaleY:Math.abs(t.scaleY)}},getTotalObjectScaling:function(){var t=this.getObjectScaling(),e=t.scaleX,i=t.scaleY;if(this.canvas){var r=this.canvas.getZoom(),n=this.canvas.getRetinaScaling();e*=r*n,i*=r*n}return{scaleX:e,scaleY:i}},getObjectOpacity:function(){var t=this.opacity;return this.group&&(t*=this.group.getObjectOpacity()),t},_set:function(t,e){var i="scaleX"===t||"scaleY"===t,r=this[t]!==e,n=!1;return i&&(e=this._constrainScale(e)),"scaleX"===t&&e<0?(this.flipX=!this.flipX,e*=-1):"scaleY"===t&&e<0?(this.flipY=!this.flipY,e*=-1):"shadow"!==t||!e||e instanceof x.Shadow?"dirty"===t&&this.group&&this.group.set("dirty",e):e=new x.Shadow(e),this[t]=e,r&&(n=this.group&&this.group.isOnACache(),-1=t.x&&n.left+n.width<=e.x&&n.top>=t.y&&n.top+n.height<=e.y},containsPoint:function(t,e,i,r){var n=this._getCoords(i,r),s=(e=e||this._getImageLines(n),this._findCrossPoints(t,e));return 0!==s&&s%2==1},isOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.getCoords(!0,t).some(function(t){return t.x<=i.x&&t.x>=e.x&&t.y<=i.y&&t.y>=e.y})||(!!this.intersectsWithRect(e,i,!0,t)||this._containsCenterOfCanvas(e,i,t))},_containsCenterOfCanvas:function(t,e,i){var r={x:(t.x+e.x)/2,y:(t.y+e.y)/2};return!!this.containsPoint(r,null,!0,i)},isPartiallyOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.intersectsWithRect(e,i,!0,t)||this.getCoords(!0,t).every(function(t){return(t.x>=i.x||t.x<=e.x)&&(t.y>=i.y||t.y<=e.y)})&&this._containsCenterOfCanvas(e,i,t)},_getImageLines:function(t){return{topline:{o:t.tl,d:t.tr},rightline:{o:t.tr,d:t.br},bottomline:{o:t.br,d:t.bl},leftline:{o:t.bl,d:t.tl}}},_findCrossPoints:function(t,e){var i,r,n,s=0;for(var o in e)if(!((n=e[o]).o.y=t.y&&n.d.y>=t.y||(n.o.x===n.d.x&&n.o.x>=t.x?r=n.o.x:(0,i=(n.d.y-n.o.y)/(n.d.x-n.o.x),r=-(t.y-0*t.x-(n.o.y-i*n.o.x))/(0-i)),r>=t.x&&(s+=1),2!==s)))break;return s},getBoundingRect:function(t,e){var i=this.getCoords(t,e);return h.makeBoundingBoxFromPoints(i)},getScaledWidth:function(){return this._getTransformedDimensions().x},getScaledHeight:function(){return this._getTransformedDimensions().y},_constrainScale:function(t){return Math.abs(t)\n')}},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(t),{reviver:t})},toClipPathSVG:function(t){return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(t),{reviver:t})},_createBaseClipPathSVGMarkup:function(t,e){var i=(e=e||{}).reviver,r=e.additionalTransform||"",n=[this.getSvgTransform(!0,r),this.getSvgCommons()].join(""),s=t.indexOf("COMMON_PARTS");return t[s]=n,i?i(t.join("")):t.join("")},_createBaseSVGMarkup:function(t,e){var i,r,n=(e=e||{}).noStyle,s=e.reviver,o=n?"":'style="'+this.getSvgStyles()+'" ',a=e.withShadow?'style="'+this.getSvgFilter()+'" ':"",c=this.clipPath,h=this.strokeUniform?'vector-effect="non-scaling-stroke" ':"",l=c&&c.absolutePositioned,u=this.stroke,f=this.fill,d=this.shadow,g=[],p=t.indexOf("COMMON_PARTS"),v=e.additionalTransform;return c&&(c.clipPathId="CLIPPATH_"+fabric.Object.__uid++,r='\n'+c.toClipPathSVG(s)+"\n"),l&&g.push("\n"),g.push("\n"),i=[o,h,n?"":this.addPaintOrder()," ",v?'transform="'+v+'" ':""].join(""),t[p]=i,f&&f.toLive&&g.push(f.toSVG(this)),u&&u.toLive&&g.push(u.toSVG(this)),d&&g.push(d.toSVG(this)),c&&g.push(r),g.push(t.join("")),g.push("\n"),l&&g.push("\n"),s?s(g.join("")):g.join("")},addPaintOrder:function(){return"fill"!==this.paintFirst?' paint-order="'+this.paintFirst+'" ':""}})}(),function(){var n=fabric.util.object.extend,r="stateProperties";function s(e,t,i){var r={};i.forEach(function(t){r[t]=e[t]}),n(e[t],r,!0)}fabric.util.object.extend(fabric.Object.prototype,{hasStateChanged:function(t){var e="_"+(t=t||r);return Object.keys(this[e]).length\n']}}),s.Line.ATTRIBUTE_NAMES=s.SHARED_ATTRIBUTES.concat("x1 y1 x2 y2".split(" ")),s.Line.fromElement=function(t,e,i){i=i||{};var r=s.parseAttributes(t,s.Line.ATTRIBUTE_NAMES),n=[r.x1||0,r.y1||0,r.x2||0,r.y2||0];e(new s.Line(n,o(r,i)))},s.Line.fromObject=function(t,e){var i=r(t,!0);i.points=[t.x1,t.y1,t.x2,t.y2],s.Object._fromObject("Line",i,function(t){delete t.points,e&&e(t)},"points")})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var s=t.fabric||(t.fabric={}),o=s.util.degreesToRadians;s.Circle?s.warn("fabric.Circle is already defined."):(s.Circle=s.util.createClass(s.Object,{type:"circle",radius:0,startAngle:0,endAngle:360,cacheProperties:s.Object.prototype.cacheProperties.concat("radius","startAngle","endAngle"),_set:function(t,e){return this.callSuper("_set",t,e),"radius"===t&&this.setRadius(e),this},toObject:function(t){return this.callSuper("toObject",["radius","startAngle","endAngle"].concat(t))},_toSVG:function(){var t,e=(this.endAngle-this.startAngle)%360;if(0===e)t=["\n'];else{var i=o(this.startAngle),r=o(this.endAngle),n=this.radius;t=['\n"]}return t},_render:function(t){t.beginPath(),t.arc(0,0,this.radius,o(this.startAngle),o(this.endAngle),!1),this._renderPaintInOrder(t)},getRadiusX:function(){return this.get("radius")*this.get("scaleX")},getRadiusY:function(){return this.get("radius")*this.get("scaleY")},setRadius:function(t){return this.radius=t,this.set("width",2*t).set("height",2*t)}}),s.Circle.ATTRIBUTE_NAMES=s.SHARED_ATTRIBUTES.concat("cx cy r".split(" ")),s.Circle.fromElement=function(t,e){var i,r=s.parseAttributes(t,s.Circle.ATTRIBUTE_NAMES);if(!("radius"in(i=r)&&0<=i.radius))throw new Error("value of `r` attribute is required and can not be negative");r.left=(r.left||0)-r.radius,r.top=(r.top||0)-r.radius,e(new s.Circle(r))},s.Circle.fromObject=function(t,e){s.Object._fromObject("Circle",t,e)})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var i=t.fabric||(t.fabric={});i.Triangle?i.warn("fabric.Triangle is already defined"):(i.Triangle=i.util.createClass(i.Object,{type:"triangle",width:100,height:100,_render:function(t){var e=this.width/2,i=this.height/2;t.beginPath(),t.moveTo(-e,i),t.lineTo(0,-i),t.lineTo(e,i),t.closePath(),this._renderPaintInOrder(t)},_toSVG:function(){var t=this.width/2,e=this.height/2;return["']}}),i.Triangle.fromObject=function(t,e){return i.Object._fromObject("Triangle",t,e)})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var r=t.fabric||(t.fabric={}),e=2*Math.PI;r.Ellipse?r.warn("fabric.Ellipse is already defined."):(r.Ellipse=r.util.createClass(r.Object,{type:"ellipse",rx:0,ry:0,cacheProperties:r.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this.set("rx",t&&t.rx||0),this.set("ry",t&&t.ry||0)},_set:function(t,e){switch(this.callSuper("_set",t,e),t){case"rx":this.rx=e,this.set("width",2*e);break;case"ry":this.ry=e,this.set("height",2*e)}return this},getRx:function(){return this.get("rx")*this.get("scaleX")},getRy:function(){return this.get("ry")*this.get("scaleY")},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']},_render:function(t){t.beginPath(),t.save(),t.transform(1,0,0,this.ry/this.rx,0,0),t.arc(0,0,this.rx,0,e,!1),t.restore(),this._renderPaintInOrder(t)}}),r.Ellipse.ATTRIBUTE_NAMES=r.SHARED_ATTRIBUTES.concat("cx cy rx ry".split(" ")),r.Ellipse.fromElement=function(t,e){var i=r.parseAttributes(t,r.Ellipse.ATTRIBUTE_NAMES);i.left=(i.left||0)-i.rx,i.top=(i.top||0)-i.ry,e(new r.Ellipse(i))},r.Ellipse.fromObject=function(t,e){r.Object._fromObject("Ellipse",t,e)})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var s=t.fabric||(t.fabric={}),o=s.util.object.extend;s.Rect?s.warn("fabric.Rect is already defined"):(s.Rect=s.util.createClass(s.Object,{stateProperties:s.Object.prototype.stateProperties.concat("rx","ry"),type:"rect",rx:0,ry:0,cacheProperties:s.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(t){var e=this.rx?Math.min(this.rx,this.width/2):0,i=this.ry?Math.min(this.ry,this.height/2):0,r=this.width,n=this.height,s=-this.width/2,o=-this.height/2,a=0!==e||0!==i,c=.4477152502;t.beginPath(),t.moveTo(s+e,o),t.lineTo(s+r-e,o),a&&t.bezierCurveTo(s+r-c*e,o,s+r,o+c*i,s+r,o+i),t.lineTo(s+r,o+n-i),a&&t.bezierCurveTo(s+r,o+n-c*i,s+r-c*e,o+n,s+r-e,o+n),t.lineTo(s+e,o+n),a&&t.bezierCurveTo(s+c*e,o+n,s,o+n-c*i,s,o+n-i),t.lineTo(s,o+i),a&&t.bezierCurveTo(s,o+c*i,s+c*e,o,s+e,o),t.closePath(),this._renderPaintInOrder(t)},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']}}),s.Rect.ATTRIBUTE_NAMES=s.SHARED_ATTRIBUTES.concat("x y rx ry width height".split(" ")),s.Rect.fromElement=function(t,e,i){if(!t)return e(null);i=i||{};var r=s.parseAttributes(t,s.Rect.ATTRIBUTE_NAMES);r.left=r.left||0,r.top=r.top||0,r.height=r.height||0,r.width=r.width||0;var n=new s.Rect(o(i?s.util.object.clone(i):{},r));n.visible=n.visible&&0\n']},commonRender:function(t){var e,i=this.points.length,r=this.pathOffset.x,n=this.pathOffset.y;if(!i||isNaN(this.points[i-1].y))return!1;t.beginPath(),t.moveTo(this.points[0].x-r,this.points[0].y-n);for(var s=0;s"},toObject:function(t){return n(this.callSuper("toObject",t),{path:this.path.map(function(t){return t.slice()})})},toDatalessObject:function(t){var e=this.toObject(["sourcePath"].concat(t));return e.sourcePath&&delete e.path,e},_toSVG:function(){return["\n"]},_getOffsetTransform:function(){var t=f.Object.NUM_FRACTION_DIGITS;return" translate("+e(-this.pathOffset.x,t)+", "+e(-this.pathOffset.y,t)+")"},toClipPathSVG:function(t){var e=this._getOffsetTransform();return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},toSVG:function(t){var e=this._getOffsetTransform();return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},complexity:function(){return this.path.length},_calcDimensions:function(){for(var t,e,i=[],r=[],n=0,s=0,o=0,a=0,c=0,h=this.path.length;c"},addWithUpdate:function(t){var e=!!this.group;return this._restoreObjectsState(),h.util.resetObjectTransform(this),t&&(e&&h.util.removeTransformFromObject(t,this.group.calcTransformMatrix()),this._objects.push(t),t.group=this,t._set("canvas",this.canvas)),this._calcBounds(),this._updateObjectsCoords(),this.dirty=!0,e?this.group.addWithUpdate():this.setCoords(),this},removeWithUpdate:function(t){return this._restoreObjectsState(),h.util.resetObjectTransform(this),this.remove(t),this._calcBounds(),this._updateObjectsCoords(),this.setCoords(),this.dirty=!0,this},_onObjectAdded:function(t){this.dirty=!0,t.group=this,t._set("canvas",this.canvas)},_onObjectRemoved:function(t){this.dirty=!0,delete t.group},_set:function(t,e){var i=this._objects.length;if(this.useSetOnGroup)for(;i--;)this._objects[i].setOnGroup(t,e);if("canvas"===t)for(;i--;)this._objects[i]._set(t,e);h.Object.prototype._set.call(this,t,e)},toObject:function(r){var n=this.includeDefaultValues,t=this._objects.filter(function(t){return!t.excludeFromExport}).map(function(t){var e=t.includeDefaultValues;t.includeDefaultValues=n;var i=t.toObject(r);return t.includeDefaultValues=e,i}),e=h.Object.prototype.toObject.call(this,r);return e.objects=t,e},toDatalessObject:function(r){var t,e=this.sourcePath;if(e)t=e;else{var n=this.includeDefaultValues;t=this._objects.map(function(t){var e=t.includeDefaultValues;t.includeDefaultValues=n;var i=t.toDatalessObject(r);return t.includeDefaultValues=e,i})}var i=h.Object.prototype.toDatalessObject.call(this,r);return i.objects=t,i},render:function(t){this._transformDone=!0,this.callSuper("render",t),this._transformDone=!1},shouldCache:function(){var t=h.Object.prototype.shouldCache.call(this);if(t)for(var e=0,i=this._objects.length;e\n"],i=0,r=this._objects.length;i\n"),e},getSvgStyles:function(){var t=void 0!==this.opacity&&1!==this.opacity?"opacity: "+this.opacity+";":"",e=this.visible?"":" visibility: hidden;";return[t,this.getSvgFilter(),e].join("")},toClipPathSVG:function(t){for(var e=[],i=0,r=this._objects.length;i"},shouldCache:function(){return!1},isOnACache:function(){return!1},_renderControls:function(t,e,i){t.save(),t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,this.callSuper("_renderControls",t,e),void 0===(i=i||{}).hasControls&&(i.hasControls=!1),i.forActiveSelection=!0;for(var r=0,n=this._objects.length;r\n','\t\n',"\n"),o=' clip-path="url(#imageCrop_'+c+')" '}if(this.imageSmoothing||(a='" image-rendering="optimizeSpeed'),i.push("\t\n"),this.stroke||this.strokeDashArray){var h=this.fill;this.fill=null,t=["\t\n'],this.fill=h}return e="fill"!==this.paintFirst?e.concat(t,i):e.concat(i,t)},getSrc:function(t){var e=t?this._element:this._originalElement;return e?e.toDataURL?e.toDataURL():this.srcFromAttribute?e.getAttribute("src"):e.src:this.src||""},setSrc:function(t,i,r){return fabric.util.loadImage(t,function(t,e){this.setElement(t,r),this._setWidthHeight(),i&&i(this,e)},this,r&&r.crossOrigin),this},toString:function(){return'#'},applyResizeFilters:function(){var t=this.resizeFilter,e=this.minimumScaleTrigger,i=this.getTotalObjectScaling(),r=i.scaleX,n=i.scaleY,s=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||e=t;for(var a=["highp","mediump","lowp"],c=0;c<3;c++)if(void 0,i="precision "+a[c]+" float;\nvoid main(){}",r=(e=s).createShader(e.FRAGMENT_SHADER),e.shaderSource(r,i),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS)){fabric.webGlPrecision=a[c];break}}return this.isSupported=o},(fabric.WebglFilterBackend=t).prototype={tileSize:2048,resources:{},setupGLContext:function(t,e){this.dispose(),this.createWebGLCanvas(t,e),this.aPosition=new Float32Array([0,0,0,1,1,0,1,1]),this.chooseFastestCopyGLTo2DMethod(t,e)},chooseFastestCopyGLTo2DMethod:function(t,e){var i,r=void 0!==window.performance;try{new ImageData(1,1),i=!0}catch(t){i=!1}var n="undefined"!=typeof ArrayBuffer,s="undefined"!=typeof Uint8ClampedArray;if(r&&i&&n&&s){var o=fabric.util.createCanvasElement(),a=new ArrayBuffer(t*e*4);if(fabric.forceGLPutImageData)return this.imageBuffer=a,void(this.copyGLTo2D=copyGLTo2DPutImageData);var c,h,l={imageBuffer:a,destinationWidth:t,destinationHeight:e,targetCanvas:o};o.width=t,o.height=e,c=window.performance.now(),copyGLTo2DDrawImage.call(l,this.gl,l),h=window.performance.now()-c,c=window.performance.now(),copyGLTo2DPutImageData.call(l,this.gl,l),window.performance.now()-c 0.0) {\n"+this.fragmentSource[t]+"}\n}"},retrieveShader:function(t){var e,i=this.type+"_"+this.mode;return t.programCache.hasOwnProperty(i)||(e=this.buildSource(this.mode),t.programCache[i]=this.createProgram(t.context,e)),t.programCache[i]},applyTo2d:function(t){var e,i,r,n,s,o,a,c=t.imageData.data,h=c.length,l=1-this.alpha;e=(a=new f.Color(this.color).getSource())[0]*this.alpha,i=a[1]*this.alpha,r=a[2]*this.alpha;for(var u=0;u'},_getCacheCanvasDimensions:function(){var t=this.callSuper("_getCacheCanvasDimensions"),e=this.fontSize;return t.width+=e*t.zoomX,t.height+=e*t.zoomY,t},_render:function(t){var e=this.path;e&&!e.isNotVisible()&&e._render(t),this._setTextStyles(t),this._renderTextLinesBackground(t),this._renderTextDecoration(t,"underline"),this._renderText(t),this._renderTextDecoration(t,"overline"),this._renderTextDecoration(t,"linethrough")},_renderText:function(t){"stroke"===this.paintFirst?(this._renderTextStroke(t),this._renderTextFill(t)):(this._renderTextFill(t),this._renderTextStroke(t))},_setTextStyles:function(t,e,i){if(t.textBaseline="alphabetical",this.path)switch(this.pathAlign){case"center":t.textBaseline="middle";break;case"ascender":t.textBaseline="top";break;case"descender":t.textBaseline="bottom"}t.font=this._getFontDeclaration(e,i)},calcTextWidth:function(){for(var t=this.getLineWidth(0),e=1,i=this._textLines.length;ethis.__selectionStartOnMouseDown?(this.selectionStart=this.__selectionStartOnMouseDown,this.selectionEnd=e):(this.selectionStart=e,this.selectionEnd=this.__selectionStartOnMouseDown),this.selectionStart===i&&this.selectionEnd===r||(this.restartCursorIfNeeded(),this._fireSelectionChanged(),this._updateTextarea(),this.renderCursorOrSelection()))}},_setEditingProps:function(){this.hoverCursor="text",this.canvas&&(this.canvas.defaultCursor=this.canvas.moveCursor="text"),this.borderColor=this.editingBorderColor,this.hasControls=this.selectable=!1,this.lockMovementX=this.lockMovementY=!0},fromStringToGraphemeSelection:function(t,e,i){var r=i.slice(0,t),n=fabric.util.string.graphemeSplit(r).length;if(t===e)return{selectionStart:n,selectionEnd:n};var s=i.slice(t,e);return{selectionStart:n,selectionEnd:n+fabric.util.string.graphemeSplit(s).length}},fromGraphemeToStringSelection:function(t,e,i){var r=i.slice(0,t).join("").length;return t===e?{selectionStart:r,selectionEnd:r}:{selectionStart:r,selectionEnd:r+i.slice(t,e).join("").length}},_updateTextarea:function(){if(this.cursorOffsetCache={},this.hiddenTextarea){if(!this.inCompositionMode){var t=this.fromGraphemeToStringSelection(this.selectionStart,this.selectionEnd,this._text);this.hiddenTextarea.selectionStart=t.selectionStart,this.hiddenTextarea.selectionEnd=t.selectionEnd}this.updateTextareaPosition()}},updateFromTextArea:function(){if(this.hiddenTextarea){this.cursorOffsetCache={},this.text=this.hiddenTextarea.value,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords());var t=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value);this.selectionEnd=this.selectionStart=t.selectionEnd,this.inCompositionMode||(this.selectionStart=t.selectionStart),this.updateTextareaPosition()}},updateTextareaPosition:function(){if(this.selectionStart===this.selectionEnd){var t=this._calcTextareaPosition();this.hiddenTextarea.style.left=t.left,this.hiddenTextarea.style.top=t.top}},_calcTextareaPosition:function(){if(!this.canvas)return{x:1,y:1};var t=this.inCompositionMode?this.compositionStart:this.selectionStart,e=this._getCursorBoundaries(t),i=this.get2DCursorLocation(t),r=i.lineIndex,n=i.charIndex,s=this.getValueOfPropertyAt(r,n,"fontSize")*this.lineHeight,o=e.leftOffset,a=this.calcTransformMatrix(),c={x:e.left+o,y:e.top+e.topOffset+s},h=this.canvas.getRetinaScaling(),l=this.canvas.upperCanvasEl,u=l.width/h,f=l.height/h,d=u-s,g=f-s,p=l.clientWidth/u,v=l.clientHeight/f;return c=fabric.util.transformPoint(c,a),(c=fabric.util.transformPoint(c,this.canvas.viewportTransform)).x*=p,c.y*=v,c.x<0&&(c.x=0),c.x>d&&(c.x=d),c.y<0&&(c.y=0),c.y>g&&(c.y=g),c.x+=this.canvas._offset.left,c.y+=this.canvas._offset.top,{left:c.x+"px",top:c.y+"px",fontSize:s+"px",charHeight:s}},_saveEditingProps:function(){this._savedProps={hasControls:this.hasControls,borderColor:this.borderColor,lockMovementX:this.lockMovementX,lockMovementY:this.lockMovementY,hoverCursor:this.hoverCursor,selectable:this.selectable,defaultCursor:this.canvas&&this.canvas.defaultCursor,moveCursor:this.canvas&&this.canvas.moveCursor}},_restoreEditingProps:function(){this._savedProps&&(this.hoverCursor=this._savedProps.hoverCursor,this.hasControls=this._savedProps.hasControls,this.borderColor=this._savedProps.borderColor,this.selectable=this._savedProps.selectable,this.lockMovementX=this._savedProps.lockMovementX,this.lockMovementY=this._savedProps.lockMovementY,this.canvas&&(this.canvas.defaultCursor=this._savedProps.defaultCursor,this.canvas.moveCursor=this._savedProps.moveCursor))},exitEditing:function(){var t=this._textBeforeEdit!==this.text,e=this.hiddenTextarea;return this.selected=!1,this.isEditing=!1,this.selectionEnd=this.selectionStart,e&&(e.blur&&e.blur(),e.parentNode&&e.parentNode.removeChild(e)),this.hiddenTextarea=null,this.abortCursorAnimation(),this._restoreEditingProps(),this._currentCursorOpacity=0,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this.fire("editing:exited"),t&&this.fire("modified"),this.canvas&&(this.canvas.off("mouse:move",this.mouseMoveHandler),this.canvas.fire("text:editing:exited",{target:this}),t&&this.canvas.fire("object:modified",{target:this})),this},_removeExtraneousStyles:function(){for(var t in this.styles)this._textLines[t]||delete this.styles[t]},removeStyleFromTo:function(t,e){var i,r,n=this.get2DCursorLocation(t,!0),s=this.get2DCursorLocation(e,!0),o=n.lineIndex,a=n.charIndex,c=s.lineIndex,h=s.charIndex;if(o!==c){if(this.styles[o])for(i=a;it?this.selectionStart=t:this.selectionStart<0&&(this.selectionStart=0),this.selectionEnd>t?this.selectionEnd=t:this.selectionEnd<0&&(this.selectionEnd=0)}})}(),fabric.util.object.extend(fabric.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+new Date,this.__lastLastClickTime=+new Date,this.__lastPointer={},this.on("mousedown",this.onMouseDown)},onMouseDown:function(t){if(this.canvas){this.__newClickTime=+new Date;var e=t.pointer;this.isTripleClick(e)&&(this.fire("tripleclick",t),this._stopEvent(t.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=e,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected}},isTripleClick:function(t){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===t.x&&this.__lastPointer.y===t.y},_stopEvent:function(t){t.preventDefault&&t.preventDefault(),t.stopPropagation&&t.stopPropagation()},initCursorSelectionHandlers:function(){this.initMousedownHandler(),this.initMouseupHandler(),this.initClicks()},doubleClickHandler:function(t){this.isEditing&&this.selectWord(this.getSelectionStartFromPointer(t.e))},tripleClickHandler:function(t){this.isEditing&&this.selectLine(this.getSelectionStartFromPointer(t.e))},initClicks:function(){this.on("mousedblclick",this.doubleClickHandler),this.on("tripleclick",this.tripleClickHandler)},_mouseDownHandler:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.__isMousedown=!0,this.selected&&(this.inCompositionMode=!1,this.setCursorByClick(t.e)),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.selectionStart===this.selectionEnd&&this.abortCursorAnimation(),this.renderCursorOrSelection()))},_mouseDownHandlerBefore:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.selected=this===this.canvas._activeObject)},initMousedownHandler:function(){this.on("mousedown",this._mouseDownHandler),this.on("mousedown:before",this._mouseDownHandlerBefore)},initMouseupHandler:function(){this.on("mouseup",this.mouseUpHandler)},mouseUpHandler:function(t){if(this.__isMousedown=!1,!(!this.editable||this.group||t.transform&&t.transform.actionPerformed||t.e.button&&1!==t.e.button)){if(this.canvas){var e=this.canvas._activeObject;if(e&&e!==this)return}this.__lastSelected&&!this.__corner?(this.selected=!1,this.__lastSelected=!1,this.enterEditing(t.e),this.selectionStart===this.selectionEnd?this.initDelayedCursor(!0):this.renderCursorOrSelection()):this.selected=!0}},setCursorByClick:function(t){var e=this.getSelectionStartFromPointer(t),i=this.selectionStart,r=this.selectionEnd;t.shiftKey?this.setSelectionStartEndWithShift(i,r,e):(this.selectionStart=e,this.selectionEnd=e),this.isEditing&&(this._fireSelectionChanged(),this._updateTextarea())},getSelectionStartFromPointer:function(t){for(var e,i=this.getLocalPointer(t),r=0,n=0,s=0,o=0,a=0,c=0,h=this._textLines.length;cthis._text.length&&(a=this._text.length),a}}),fabric.util.object.extend(fabric.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=fabric.document.createElement("textarea"),this.hiddenTextarea.setAttribute("autocapitalize","off"),this.hiddenTextarea.setAttribute("autocorrect","off"),this.hiddenTextarea.setAttribute("autocomplete","off"),this.hiddenTextarea.setAttribute("spellcheck","false"),this.hiddenTextarea.setAttribute("data-fabric-hiddentextarea",""),this.hiddenTextarea.setAttribute("wrap","off");var t=this._calcTextareaPosition();this.hiddenTextarea.style.cssText="position: absolute; top: "+t.top+"; left: "+t.left+"; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; paddingｰtop: "+t.fontSize+";",this.hiddenTextareaContainer?this.hiddenTextareaContainer.appendChild(this.hiddenTextarea):fabric.document.body.appendChild(this.hiddenTextarea),fabric.util.addListener(this.hiddenTextarea,"keydown",this.onKeyDown.bind(this)),fabric.util.addListener(this.hiddenTextarea,"keyup",this.onKeyUp.bind(this)),fabric.util.addListener(this.hiddenTextarea,"input",this.onInput.bind(this)),fabric.util.addListener(this.hiddenTextarea,"copy",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"cut",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"paste",this.paste.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionstart",this.onCompositionStart.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionupdate",this.onCompositionUpdate.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionend",this.onCompositionEnd.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(fabric.util.addListener(this.canvas.upperCanvasEl,"click",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},keysMap:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorRight",36:"moveCursorLeft",37:"moveCursorLeft",38:"moveCursorUp",39:"moveCursorRight",40:"moveCursorDown"},keysMapRtl:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorLeft",36:"moveCursorRight",37:"moveCursorRight",38:"moveCursorUp",39:"moveCursorLeft",40:"moveCursorDown"},ctrlKeysMapUp:{67:"copy",88:"cut"},ctrlKeysMapDown:{65:"selectAll"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},onKeyDown:function(t){if(this.isEditing){var e="rtl"===this.direction?this.keysMapRtl:this.keysMap;if(t.keyCode in e)this[e[t.keyCode]](t);else{if(!(t.keyCode in this.ctrlKeysMapDown&&(t.ctrlKey||t.metaKey)))return;this[this.ctrlKeysMapDown[t.keyCode]](t)}t.stopImmediatePropagation(),t.preventDefault(),33<=t.keyCode&&t.keyCode<=40?(this.inCompositionMode=!1,this.clearContextTop(),this.renderCursorOrSelection()):this.canvas&&this.canvas.requestRenderAll()}},onKeyUp:function(t){!this.isEditing||this._copyDone||this.inCompositionMode?this._copyDone=!1:t.keyCode in this.ctrlKeysMapUp&&(t.ctrlKey||t.metaKey)&&(this[this.ctrlKeysMapUp[t.keyCode]](t),t.stopImmediatePropagation(),t.preventDefault(),this.canvas&&this.canvas.requestRenderAll())},onInput:function(t){var e=this.fromPaste;if(this.fromPaste=!1,t&&t.stopPropagation(),this.isEditing){var i,r,n,s,o,a=this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText,c=this._text.length,h=a.length,l=h-c,u=this.selectionStart,f=this.selectionEnd,d=u!==f;if(""===this.hiddenTextarea.value)return this.styles={},this.updateFromTextArea(),this.fire("changed"),void(this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll()));var g=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value),p=u>g.selectionStart;d?(i=this._text.slice(u,f),l+=f-u):h=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorUpOrDown("Down",t)},moveCursorUp:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorUpOrDown("Up",t)},_moveCursorUpOrDown:function(t,e){var i=this["get"+t+"CursorOffset"](e,"right"===this._selectionDirection);e.shiftKey?this.moveCursorWithShift(i):this.moveCursorWithoutShift(i),0!==i&&(this.setSelectionInBoundaries(),this.abortCursorAnimation(),this._currentCursorOpacity=1,this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorWithShift:function(t){var e="left"===this._selectionDirection?this.selectionStart+t:this.selectionEnd+t;return this.setSelectionStartEndWithShift(this.selectionStart,this.selectionEnd,e),0!==t},moveCursorWithoutShift:function(t){return t<0?(this.selectionStart+=t,this.selectionEnd=this.selectionStart):(this.selectionEnd+=t,this.selectionStart=this.selectionEnd),0!==t},moveCursorLeft:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorLeftOrRight("Left",t)},_move:function(t,e,i){var r;if(t.altKey)r=this["findWordBoundary"+i](this[e]);else{if(!t.metaKey&&35!==t.keyCode&&36!==t.keyCode)return this[e]+="Left"===i?-1:1,!0;r=this["findLineBoundary"+i](this[e])}if(void 0!==typeof r&&this[e]!==r)return this[e]=r,!0},_moveLeft:function(t,e){return this._move(t,e,"Left")},_moveRight:function(t,e){return this._move(t,e,"Right")},moveCursorLeftWithoutShift:function(t){var e=!0;return this._selectionDirection="left",this.selectionEnd===this.selectionStart&&0!==this.selectionStart&&(e=this._moveLeft(t,"selectionStart")),this.selectionEnd=this.selectionStart,e},moveCursorLeftWithShift:function(t){return"right"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveLeft(t,"selectionEnd"):0!==this.selectionStart?(this._selectionDirection="left",this._moveLeft(t,"selectionStart")):void 0},moveCursorRight:function(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorLeftOrRight("Right",t)},_moveCursorLeftOrRight:function(t,e){var i="moveCursor"+t+"With";this._currentCursorOpacity=1,e.shiftKey?i+="Shift":i+="outShift",this[i](e)&&(this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorRightWithShift:function(t){return"left"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveRight(t,"selectionStart"):this.selectionEnd!==this._text.length?(this._selectionDirection="right",this._moveRight(t,"selectionEnd")):void 0},moveCursorRightWithoutShift:function(t){var e=!0;return this._selectionDirection="right",this.selectionStart===this.selectionEnd?(e=this._moveRight(t,"selectionStart"),this.selectionEnd=this.selectionStart):this.selectionStart=this.selectionEnd,e},removeChars:function(t,e){void 0===e&&(e=t+1),this.removeStyleFromTo(t,e),this._text.splice(t,e-t),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()},insertChars:function(t,e,i,r){void 0===r&&(r=i),i",t.textSpans.join(""),"\n"]},_getSVGTextAndBg:function(t,e){var i,r=[],n=[],s=t;this._setSVGBg(n);for(var o=0,a=this._textLines.length;o",fabric.util.string.escapeXml(t),""].join("")},_setSVGTextLineText:function(t,e,i,r){var n,s,o,a,c,h=this.getHeightOfLine(e),l=-1!==this.textAlign.indexOf("justify"),u="",f=0,d=this._textLines[e];r+=h*(1-this._fontSizeFraction)/this.lineHeight;for(var g=0,p=d.length-1;g<=p;g++)c=g===p||this.charSpacing,u+=d[g],o=this.__charBounds[e][g],0===f?(i+=o.kernedWidth-o.width,f+=o.width):f+=o.kernedWidth,l&&!c&&this._reSpaceAndTab.test(d[g])&&(c=!0),c||(n=n||this.getCompleteStyleDeclaration(e,g),s=this.getCompleteStyleDeclaration(e,g+1),c=this._hasStyleChangedForSvg(n,s)),c&&(a=this._getStyleDeclaration(e,g)||{},t.push(this._createTextCharSpan(u,a,i,r)),u="",n=s,i+=f,f=0)},_pushTextBgRect:function(t,e,i,r,n,s){var o=fabric.Object.NUM_FRACTION_DIGITS;t.push("\t\t\n')},_setSVGTextLineBg:function(t,e,i,r){for(var n,s,o=this._textLines[e],a=this.getHeightOfLine(e)/this.lineHeight,c=0,h=0,l=this.getValueOfPropertyAt(e,0,"textBackgroundColor"),u=0,f=o.length;uthis.width&&this._set("width",this.dynamicMinWidth),-1!==this.textAlign.indexOf("justify")&&this.enlargeSpaces(),this.height=this.calcTextHeight(),this.saveState({propertySet:"_dimensionAffectingProps"}))},_generateStyleMap:function(t){for(var e=0,i=0,r=0,n={},s=0;sthis.dynamicMinWidth&&(this.dynamicMinWidth=g-v+r),o},isEndOfWrapping:function(t){return!this._styleMap[t+1]||this._styleMap[t+1].line!==this._styleMap[t].line},missingNewlineOffset:function(t){return this.splitByGrapheme?this.isEndOfWrapping(t)?1:0:1},_splitTextIntoLines:function(t){for(var e=b.Text.prototype._splitTextIntoLines.call(this,t),i=this._wrapText(e.lines,this.width),r=new Array(i.length),n=0;n0,g.isLikelyNode="undefined"!=typeof Buffer&&"undefined"==typeof window,g.SHARED_ATTRIBUTES=["display","transform","fill","fill-opacity","fill-rule","opacity","stroke","stroke-dasharray","stroke-linecap","stroke-dashoffset","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","id","paint-order","vector-effect","instantiated_by_use","clip-path"],g.DPI=96,g.reNum="(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)",g.commaWsp="(?:\\s+,?\\s*|,\\s*)",g.rePathCommand=/([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/gi,g.reNonWord=/[ \n\.,;!\?\-]/,g.fontPaths={},g.iMatrix=[1,0,0,1,0,0],g.svgNS="http://www.w3.org/2000/svg",g.perfLimitSizeTotal=2097152,g.maxCacheSideLimit=4096,g.minCacheSideLimit=256,g.charWidthsCache={},g.textureSize=2048,g.disableStyleCopyPaste=!1,g.enableGLFiltering=!0,g.devicePixelRatio=g.window.devicePixelRatio||g.window.webkitDevicePixelRatio||g.window.mozDevicePixelRatio||1,g.browserShadowBlurConstant=1,g.arcToSegmentsCache={},g.boundsOfCurveCache={},g.cachesBoundsOfCurve=!0,g.forceGLPutImageData=!1,g.initFilterBackend=function(){return g.enableGLFiltering&&g.isWebglSupported&&g.isWebglSupported(g.textureSize)?(console.log("max texture size: "+g.maxTextureSize),new g.WebglFilterBackend({tileSize:g.textureSize})):g.Canvas2dFilterBackend?new g.Canvas2dFilterBackend:void 0},"undefined"!=typeof document&&"undefined"!=typeof window&&(window.fabric=fabric),function(t){var e=t.fabric;function i(t,i){if(this.__eventListeners[t]){var r=this.__eventListeners[t];i?r[r.indexOf(i)]=!1:e.util.array.fill(r,!1)}}function r(t,e){var i=function(){e.apply(this,arguments),this.off(t,i)}.bind(this);return this.on(t,i),i}function n(t,e){if(this.__eventListeners)if(0===arguments.length)for(t in this.__eventListeners)i.call(this,t);else if("object"==typeof t&&void 0===e)for(var r in t)i.call(this,r,t[r]);else i.call(this,t,e)}e.Observable={fire:function(t,e){if(this.__eventListeners){var i=this.__eventListeners[t];if(i){for(var r=0,n=i.length;r-1}))},item:function(t){return this._objects[t]},isEmpty:function(){return 0===this._objects.length},size:function(){return this._objects.length},contains:function(t,e){return this._objects.indexOf(t)>-1||!!e&&this._objects.some((function(e){return"function"==typeof e.contains&&e.contains(t,!0)}))},complexity:function(){return this._objects.reduce((function(t,e){return t+=e.complexity?e.complexity():0}),0)}}}(void 0!==t?t:window),function(t){t.fabric.CommonMethods={_setOptions:function(t){for(var e in t)this.set(e,t[e])},_setObject:function(t){for(var e in t)this._set(e,t[e])},set:function(t,e){return"object"==typeof t?this._setObject(t):this._set(t,e),this},_set:function(t,e){this[t]=e},toggle:function(t){var e=this.get(t);return"boolean"==typeof e&&this.set(t,!e),this},get:function(t){return this[t]}}}(void 0!==t?t:window),function(t){var e=t.fabric,i=Math.sqrt,r=Math.atan2,n=Math.pow,s=Math.PI/180,o=Math.PI/2;e.util={cos:function(t){if(0===t)return 1;switch(t<0&&(t=-t),t/o){case 1:case 3:return 0;case 2:return-1}return Math.cos(t)},sin:function(t){if(0===t)return 0;var e=1;switch(t<0&&(e=-1),t/o){case 1:return e;case 2:return 0;case 3:return-e}return Math.sin(t)},removeFromArray:function(t,e){var i=t.indexOf(e);return-1!==i&&t.splice(i,1),t},getRandomInt:function(t,e){return Math.floor(Math.random()*(e-t+1))+t},degreesToRadians:function(t){return t*s},radiansToDegrees:function(t){return t/s},rotatePoint:function(t,i,r){var n=new e.Point(t.x-i.x,t.y-i.y);return e.util.rotateVector(n,r).addEquals(i)},rotateVector:function(t,i){var r=e.util.sin(i),n=e.util.cos(i),s=t.x*n-t.y*r,o=t.x*r+t.y*n;return new e.Point(s,o)},createVector:function(t,i){return new e.Point(i.x-t.x,i.y-t.y)},calcAngleBetweenVectors:function(t,e){return Math.acos((t.x*e.x+t.y*e.y)/(Math.hypot(t.x,t.y)*Math.hypot(e.x,e.y)))},getHatVector:function(t){return new e.Point(t.x,t.y).scalarMultiply(1/Math.hypot(t.x,t.y))},getBisector:function(t,i,r){var n=e.util.createVector(t,i),s=e.util.createVector(t,r),o=e.util.calcAngleBetweenVectors(n,s),a=o*(0===e.util.calcAngleBetweenVectors(e.util.rotateVector(n,o),s)?1:-1)/2;return{vector:e.util.getHatVector(e.util.rotateVector(n,a)),angle:o}},projectStrokeOnPoints:function(t,i,r){var n=[],s=i.strokeWidth/2,o=i.strokeUniform?new e.Point(1/i.scaleX,1/i.scaleY):new e.Point(1,1),a=function(t){var i=s/Math.hypot(t.x,t.y);return new e.Point(t.x*i*o.x,t.y*i*o.y)};return t.length<=1||t.forEach((function(h,c){var l,u,f=new e.Point(h.x,h.y);0===c?(u=t[c+1],l=r?a(e.util.createVector(u,f)).addEquals(f):t[t.length-1]):c===t.length-1?(l=t[c-1],u=r?a(e.util.createVector(l,f)).addEquals(f):t[0]):(l=t[c-1],u=t[c+1]);var d,g,p=e.util.getBisector(f,l,u),v=p.vector,m=p.angle;if("miter"===i.strokeLineJoin&&(d=-s/Math.sin(m/2),g=new e.Point(v.x*d*o.x,v.y*d*o.y),Math.hypot(g.x,g.y)/s<=i.strokeMiterLimit))return n.push(f.add(g)),void n.push(f.subtract(g));d=-s*Math.SQRT2,g=new e.Point(v.x*d*o.x,v.y*d*o.y),n.push(f.add(g)),n.push(f.subtract(g))})),n},transformPoint:function(t,i,r){return r?new e.Point(i[0]*t.x+i[2]*t.y,i[1]*t.x+i[3]*t.y):new e.Point(i[0]*t.x+i[2]*t.y+i[4],i[1]*t.x+i[3]*t.y+i[5])},sendPointToPlane:function(t,i,r){var n=e.util.invertTransform(r||e.iMatrix),s=e.util.multiplyTransformMatrices(n,i||e.iMatrix);return e.util.transformPoint(t,s)},transformPointRelativeToCanvas:function(t,i,r,n){if("child"!==r&&"sibling"!==r)throw new Error("fabric.js: received bad argument "+r);if("child"!==n&&"sibling"!==n)throw new Error("fabric.js: received bad argument "+n);if(r===n)return t;var s=i.viewportTransform;return e.util.transformPoint(t,"child"===n?e.util.invertTransform(s):s)},makeBoundingBoxFromPoints:function(t,i){if(i)for(var r=0;r0&&(e>r?e-=r:e=0,i>r?i-=r:i=0);var n,s=!0,o=t.getImageData(e,i,2*r||1,2*r||1),a=o.data.length;for(n=3;n=n?s-n:2*Math.PI-(n-s)}function a(t,i,r){for(var n=r[1],a=r[2],h=r[3],c=r[4],l=r[5],u=function(t,i,r,n,a,h,c){var l=Math.PI,u=c*l/180,f=e.util.sin(u),d=e.util.cos(u),g=0,p=0,v=-d*t*.5-f*i*.5,m=-d*i*.5+f*t*.5,b=(r=Math.abs(r))*r,y=(n=Math.abs(n))*n,_=m*m,x=v*v,C=b*y-b*_-y*x,w=0;if(C<0){var S=Math.sqrt(1-C/(b*y));r*=S,n*=S}else w=(a===h?-1:1)*Math.sqrt(C/(b*_+y*x));var T=w*r*m/n,O=-w*n*v/r,P=d*T-f*O+.5*t,k=f*T+d*O+.5*i,j=o(1,0,(v-T)/r,(m-O)/n),E=o((v-T)/r,(m-O)/n,(-v-T)/r,(-m-O)/n);0===h&&E>0?E-=2*l:1===h&&E<0&&(E+=2*l);for(var A=Math.ceil(Math.abs(E/l*2)),M=[],D=E/A,F=8/3*Math.sin(D/4)*Math.sin(D/4)/Math.sin(D/2),I=j+D,L=0;L1e-4;)i=a(s),n=s,(r=h(c.x,c.y,i.x,i.y))+o>e?(s-=l,l/=2):(c=i,s+=l,o+=r);return i.angle=u(n),i}function p(t){for(var e,i,r,n,s=0,o=t.length,a=0,g=0,p=0,v=0,m=[],b=0;bw)for(var T=1,O=v.length;T2;for(i=i||0,l&&(h=t[2].xt[r-2].x?1:s.x===t[r-2].x?0:-1,c=s.y>t[r-2].y?1:s.y===t[r-2].y?0:-1),n.push(["L",s.x+h*i,s.y+c*i]),n},e.util.getPathSegmentsInfo=p,e.util.getBoundsOfCurve=function(t,r,n,s,o,a,h,c){var l;if(e.cachesBoundsOfCurve&&(l=i.call(arguments),e.boundsOfCurveCache[l]))return e.boundsOfCurveCache[l];var u,f,d,g,p,v,m,b,y=Math.sqrt,_=Math.min,x=Math.max,C=Math.abs,w=[],S=[[],[]];f=6*t-12*n+6*o,u=-3*t+9*n-9*o+3*h,d=3*n-3*t;for(var T=0;T<2;++T)if(T>0&&(f=6*r-12*s+6*a,u=-3*r+9*s-9*a+3*c,d=3*s-3*r),C(u)<1e-12){if(C(f)<1e-12)continue;0<(g=-d/f)&&g<1&&w.push(g)}else(m=f*f-4*d*u)<0||(0<(p=(-f+(b=y(m)))/(2*u))&&p<1&&w.push(p),0<(v=(-f-b)/(2*u))&&v<1&&w.push(v));for(var O,P,k,j=w.length,E=j;j--;)O=(k=1-(g=w[j]))*k*k*t+3*k*k*g*n+3*k*g*g*o+g*g*g*h,S[0][j]=O,P=k*k*k*r+3*k*k*g*s+3*k*g*g*a+g*g*g*c,S[1][j]=P;S[0][E]=t,S[1][E]=r,S[0][E+1]=h,S[1][E+1]=c;var A=[{x:_.apply(null,S[0]),y:_.apply(null,S[1])},{x:x.apply(null,S[0]),y:x.apply(null,S[1])}];return e.cachesBoundsOfCurve&&(e.boundsOfCurveCache[l]=A),A},e.util.getPointOnPath=function(t,i,r){r||(r=p(t));for(var n=0;i-r[n].length>0&&n=e}))}}}(void 0!==t?t:window),function(t){function e(t,i,r){if(r)if(!fabric.isLikelyNode&&i instanceof Element)t=i;else if(i instanceof Array){t=[];for(var n=0,s=i.length;n57343)return t.charAt(e);if(55296<=i&&i<=56319){if(t.length<=e+1)throw"High surrogate without following low surrogate";var r=t.charCodeAt(e+1);if(56320>r||r>57343)throw"High surrogate without following low surrogate";return t.charAt(e)+t.charAt(e+1)}if(0===e)throw"Low surrogate without preceding high surrogate";var n=t.charCodeAt(e-1);if(55296>n||n>56319)throw"Low surrogate without preceding high surrogate";return!1}fabric.util.string={camelize:function(t){return t.replace(/-+(.)?/g,(function(t,e){return e?e.toUpperCase():""}))},capitalize:function(t,e){return t.charAt(0).toUpperCase()+(e?t.slice(1):t.slice(1).toLowerCase())},escapeXml:function(t){return t.replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")},graphemeSplit:function(t){var i,r=0,n=[];for(r=0;r1?i.apply(this,e.call(arguments,1)):i.call(this):console.log("tried to callSuper "+t+", method not found in prototype chain",this)}addMethods=function(t,e,i){for(var r in e)r in t.prototype&&"function"==typeof t.prototype[r]&&(e[r]+"").indexOf("callSuper")>-1?t.prototype[r]=function(t){return function(){var r=this.constructor.superclass;this.constructor.superclass=i;var n=e[t].apply(this,arguments);if(this.constructor.superclass=r,"initialize"!==t)return n}}(r):t.prototype[r]=e[r],IS_DONTENUM_BUGGY&&(e.toString!==Object.prototype.toString&&(t.prototype.toString=e.toString),e.valueOf!==Object.prototype.valueOf&&(t.prototype.valueOf=e.valueOf))},fabric.util.createClass=function(){var t=null,s=e.call(arguments,0);function o(){this.initialize.apply(this,arguments)}"function"==typeof s[0]&&(t=s.shift()),o.superclass=t,o.subclasses=[],t&&(r.prototype=t.prototype,o.prototype=new r,t.subclasses.push(o));for(var a=0,h=s.length;a-1||"touch"===t.pointerType},void 0!==t||window,r=fabric.document.createElement("div"),n="string"==typeof r.style.opacity,s="string"==typeof r.style.filter,o=/alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,a=function(t){return t},n?a=function(t,e){return t.style.opacity=e,t}:s&&(a=function(t,e){var i=t.style;return t.currentStyle&&!t.currentStyle.hasLayout&&(i.zoom=1),o.test(i.filter)?(e=e>=.9999?"":"alpha(opacity="+100*e+")",i.filter=i.filter.replace(o,e)):i.filter+=" alpha(opacity="+100*e+")",t}),fabric.util.setStyle=function(t,e){var i=t.style;if(!i)return t;if("string"==typeof e)return t.style.cssText+=";"+e,e.indexOf("opacity")>-1?a(t,e.match(/opacity:\s*(\d?\.?\d*)/)[1]):t;for(var r in e)if("opacity"===r)a(t,e[r]);else{var n="float"===r||"cssFloat"===r?void 0===i.styleFloat?"cssFloat":"styleFloat":r;i.setProperty(n,e[r])}return t},function(e){var i=Array.prototype.slice;var r,n,s,o,a=function(t){return i.call(t,0)};try{r=a(fabric.document.childNodes)instanceof Array}catch(t){}function h(t,e){var i=fabric.document.createElement(t);for(var r in e)"class"===r?i.className=e[r]:"for"===r?i.htmlFor=e[r]:i.setAttribute(r,e[r]);return i}function c(t){for(var e=0,i=0,r=fabric.document.documentElement,n=fabric.document.body||{scrollLeft:0,scrollTop:0};t&&(t.parentNode||t.host)&&((t=t.parentNode||t.host)===fabric.document?(e=n.scrollLeft||r.scrollLeft||0,i=n.scrollTop||r.scrollTop||0):(e+=t.scrollLeft||0,i+=t.scrollTop||0),1!==t.nodeType||"fixed"!==t.style.position););return{left:e,top:i}}r||(a=function(t){for(var e=new Array(t.length),i=t.length;i--;)e[i]=t[i];return e}),n=fabric.document.defaultView&&fabric.document.defaultView.getComputedStyle?function(t,e){var i=fabric.document.defaultView.getComputedStyle(t,null);return i?i[e]:void 0}:function(t,e){var i=t.style[e];return!i&&t.currentStyle&&(i=t.currentStyle[e]),i},void 0!==t||window,s=fabric.document.documentElement.style,o="userSelect"in s?"userSelect":"MozUserSelect"in s?"MozUserSelect":"WebkitUserSelect"in s?"WebkitUserSelect":"KhtmlUserSelect"in s?"KhtmlUserSelect":"",fabric.util.makeElementUnselectable=function(t){return void 0!==t.onselectstart&&(t.onselectstart=fabric.util.falseFunction),o?t.style[o]="none":"string"==typeof t.unselectable&&(t.unselectable="on"),t},fabric.util.makeElementSelectable=function(t){return void 0!==t.onselectstart&&(t.onselectstart=null),o?t.style[o]="":"string"==typeof t.unselectable&&(t.unselectable=""),t},fabric.util.setImageSmoothing=function(t,e){t.imageSmoothingEnabled=t.imageSmoothingEnabled||t.webkitImageSmoothingEnabled||t.mozImageSmoothingEnabled||t.msImageSmoothingEnabled||t.oImageSmoothingEnabled,t.imageSmoothingEnabled=e},fabric.util.getById=function(t){return"string"==typeof t?fabric.document.getElementById(t):t},fabric.util.toArray=a,fabric.util.addClass=function(t,e){t&&-1===(" "+t.className+" ").indexOf(" "+e+" ")&&(t.className+=(t.className?" ":"")+e)},fabric.util.makeElement=h,fabric.util.wrapElement=function(t,e,i){return"string"==typeof e&&(e=h(e,i)),t.parentNode&&t.parentNode.replaceChild(e,t),e.appendChild(t),e},fabric.util.getScrollLeftTop=c,fabric.util.getElementOffset=function(t){var e,i,r=t&&t.ownerDocument,s={left:0,top:0},o={left:0,top:0},a={borderLeftWidth:"left",borderTopWidth:"top",paddingLeft:"left",paddingTop:"top"};if(!r)return o;for(var h in a)o[a[h]]+=parseInt(n(t,h),10)||0;return e=r.documentElement,void 0!==t.getBoundingClientRect&&(s=t.getBoundingClientRect()),i=c(t),{left:s.left+i.left-(e.clientLeft||0)+o.left,top:s.top+i.top-(e.clientTop||0)+o.top}},fabric.util.getNodeCanvas=function(t){var e=fabric.jsdomImplForWrapper(t);return e._canvas||e._image},fabric.util.cleanUpJsdomNode=function(t){if(fabric.isLikelyNode){var e=fabric.jsdomImplForWrapper(t);e&&(e._image=null,e._canvas=null,e._currentSrc=null,e._attributes=null,e._classList=null)}}}(void 0!==t||window),function(t){function e(){}fabric.util.request=function(t,i){i||(i={});var r=i.method?i.method.toUpperCase():"GET",n=i.onComplete||function(){},s=new fabric.window.XMLHttpRequest,o=i.body||i.parameters;return s.onreadystatechange=function(){4===s.readyState&&(n(s),s.onreadystatechange=e)},"GET"===r&&(o=null,"string"==typeof i.parameters&&(t=function(t,e){return t+(/\?/.test(t)?"&":"?")+e}(t,i.parameters))),s.open(r,t,!0),"POST"!==r&&"PUT"!==r||s.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),s.send(o),s}}(void 0!==t||window),fabric.log=console.log,fabric.warn=console.warn,function(){var t=[];function e(){return!1}function i(t,e,i,r){return-i*Math.cos(t/r*(Math.PI/2))+i+e}fabric.util.object.extend(t,{cancelAll:function(){var t=this.splice(0);return t.forEach((function(t){t.cancel()})),t},cancelByCanvas:function(t){if(!t)return[];var e=this.filter((function(e){return"object"==typeof e.target&&e.target.canvas===t}));return e.forEach((function(t){t.cancel()})),e},cancelByTarget:function(t){var e=this.findAnimationsByTarget(t);return e.forEach((function(t){t.cancel()})),e},findAnimationIndex:function(t){return this.indexOf(this.findAnimation(t))},findAnimation:function(t){return this.find((function(e){return e.cancel===t}))},findAnimationsByTarget:function(t){return t?this.filter((function(e){return e.target===t})):[]}});var r=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(t){return fabric.window.setTimeout(t,1e3/60)},n=fabric.window.cancelAnimationFrame||fabric.window.clearTimeout;function s(){return r.apply(fabric.window,arguments)}fabric.util.animate=function(t){t||(t={});var r,n=!1,o=function(){var t=fabric.runningAnimations.indexOf(r);return t>-1&&fabric.runningAnimations.splice(t,1)[0]};r=Object.assign({},t,{cancel:function(){return n=!0,o()},currentValue:"startValue"in t?t.startValue:0,completionRate:0,durationRate:0}),fabric.runningAnimations.push(r);var a=function(a){var h,c=a||+new Date,l=t.duration||500,u=c+l,f=t.onChange||e,d=t.abort||e,g=t.onComplete||e,p=t.easing||i,v="startValue"in t&&t.startValue.length>0,m="startValue"in t?t.startValue:0,b="endValue"in t?t.endValue:100,y=t.byValue||(v?m.map((function(t,e){return b[e]-m[e]})):b-m);t.onStart&&t.onStart(),function t(e){var i=(h=e||+new Date)>u?l:h-c,a=i/l,_=v?m.map((function(t,e){return p(i,m[e],y[e],l)})):p(i,m,y,l),x=v?Math.abs((_[0]-m[0])/y[0]):Math.abs((_-m)/y);if(r.currentValue=v?_.slice():_,r.completionRate=x,r.durationRate=a,!n){if(!d(_,x,a))return h>u?(r.currentValue=v?b.slice():b,r.completionRate=1,r.durationRate=1,f(v?b.slice():b,1,1),g(b,1,1),void o()):(f(_,x,a),void s(t));o()}}(c)};return t.delay?setTimeout((function(){s(a)}),t.delay):s(a),r.cancel},fabric.util.requestAnimFrame=s,fabric.util.cancelAnimFrame=function(){return n.apply(fabric.window,arguments)},fabric.runningAnimations=t}(void 0!==t||window),function(t){function e(t,e,i){var r="rgba("+parseInt(t[0]+i*(e[0]-t[0]),10)+","+parseInt(t[1]+i*(e[1]-t[1]),10)+","+parseInt(t[2]+i*(e[2]-t[2]),10);return r+=","+(t&&e?parseFloat(t[3]+i*(e[3]-t[3])):1),r+=")"}fabric.util.animateColor=function(t,i,r,n){var s=new fabric.Color(t).getSource(),o=new fabric.Color(i).getSource(),a=n.onComplete,h=n.onChange;return n=n||{},fabric.util.animate(Object.assign(n,{duration:r||500,startValue:s,endValue:o,byValue:o,easing:function(t,i,r,s){return e(i,r,n.colorEasing?n.colorEasing(t,s):1-Math.cos(t/s*(Math.PI/2)))},onComplete:function(t,i,r){if(a)return a(e(o,o,0),i,r)},onChange:function(t,i,r){if(h){if(Array.isArray(t))return h(e(t,t,0),i,r);h(t,i,r)}}}))}}(void 0!==t||window),function(t){function e(t,e,i,r){return t-1&&l>-1&&l-1)&&(e="stroke")}else{if("href"===t||"xlink:href"===t||"font"===t)return e;if("imageSmoothing"===t)return"optimizeQuality"===e;a=h?e.map(n):n(e,o)}}else e="";return!h&&isNaN(a)?e:a}function f(t){return new RegExp("^("+t.join("|")+")\\b","i")}function d(t,e){var i,r,n,s,o=[];for(n=0,s=e.length;n1;)h.shift(),c=i.util.multiplyTransformMatrices(c,h[0]);return c}}(void 0!==t||window);var m=new RegExp("^\\s*("+i.reNum+"+)\\s*,?\\s*("+i.reNum+"+)\\s*,?\\s*("+i.reNum+"+)\\s*,?\\s*("+i.reNum+"+)\\s*$");function b(t){if(!i.svgViewBoxElementsRegEx.test(t.nodeName))return{};var e,r,s,o,a,h,c=t.getAttribute("viewBox"),l=1,u=1,f=t.getAttribute("width"),d=t.getAttribute("height"),g=t.getAttribute("x")||0,p=t.getAttribute("y")||0,v=t.getAttribute("preserveAspectRatio")||"",b=!c||!(c=c.match(m)),y=!f||!d||"100%"===f||"100%"===d,_=b&&y,x={},C="",w=0,S=0;if(x.width=0,x.height=0,x.toBeParsed=_,b&&(g||p)&&t.parentNode&&"#document"!==t.parentNode.nodeName&&(C=" translate("+n(g)+" "+n(p)+") ",a=(t.getAttribute("transform")||"")+C,t.setAttribute("transform",a),t.removeAttribute("x"),t.removeAttribute("y")),_)return x;if(b)return x.width=n(f),x.height=n(d),x;if(e=-parseFloat(c[1]),r=-parseFloat(c[2]),s=parseFloat(c[3]),o=parseFloat(c[4]),x.minX=e,x.minY=r,x.viewBoxWidth=s,x.viewBoxHeight=o,y?(x.width=s,x.height=o):(x.width=n(f),x.height=n(d),l=x.width/s,u=x.height/o),"none"!==(v=i.util.parsePreserveAspectRatioAttribute(v)).alignX&&("meet"===v.meetOrSlice&&(u=l=l>u?u:l),"slice"===v.meetOrSlice&&(u=l=l>u?l:u),w=x.width-s*l,S=x.height-o*l,"Mid"===v.alignX&&(w/=2),"Mid"===v.alignY&&(S/=2),"Min"===v.alignX&&(w=0),"Min"===v.alignY&&(S=0)),1===l&&1===u&&0===e&&0===r&&0===g&&0===p)return x;if((g||p)&&"#document"!==t.parentNode.nodeName&&(C=" translate("+n(g)+" "+n(p)+") "),a=C+" matrix("+l+" 0 0 "+u+" "+(e*l+w)+" "+(r*u+S)+") ","svg"===t.nodeName){for(h=t.ownerDocument.createElementNS(i.svgNS,"g");t.firstChild;)h.appendChild(t.firstChild);t.appendChild(h)}else(h=t).removeAttribute("x"),h.removeAttribute("y"),a=h.getAttribute("transform")+a;return h.setAttribute("transform",a),x}function y(t,e){var i="xlink:href",r=v(t,e.getAttribute(i).slice(1));if(r&&r.getAttribute(i)&&y(t,r),["gradientTransform","x1","x2","y1","y2","gradientUnits","cx","cy","r","fx","fy"].forEach((function(t){r&&!e.hasAttribute(t)&&r.hasAttribute(t)&&e.setAttribute(t,r.getAttribute(t))})),!e.children.length)for(var n=r.cloneNode(!0);n.firstChild;)e.appendChild(n.firstChild);e.removeAttribute(i)}i.parseSVGDocument=function(t,e,r,n){if(t){!function(t){for(var e=d(t,["use","svg:use"]),r=0;e.length&&rt.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,e){return void 0===e&&(e=.5),e=Math.max(Math.min(1,e),0),new i(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)},distanceFrom:function(t){var e=this.x-t.x,i=this.y-t.y;return Math.sqrt(e*e+i*i)},midPointFrom:function(t){return this.lerp(t)},min:function(t){return new i(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new i(Math.max(this.x,t.x),Math.max(this.y,t.y))},toString:function(){return this.x+","+this.y},setXY:function(t,e){return this.x=t,this.y=e,this},setX:function(t){return this.x=t,this},setY:function(t){return this.y=t,this},setFromPoint:function(t){return this.x=t.x,this.y=t.y,this},swap:function(t){var e=this.x,i=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=i},clone:function(){return new i(this.x,this.y)}})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});function i(t){this.status=t,this.points=[]}e.Intersection?e.warn("fabric.Intersection is already defined"):(e.Intersection=i,e.Intersection.prototype={constructor:i,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},e.Intersection.intersectLineLine=function(t,r,n,s){var o,a=(s.x-n.x)*(t.y-n.y)-(s.y-n.y)*(t.x-n.x),h=(r.x-t.x)*(t.y-n.y)-(r.y-t.y)*(t.x-n.x),c=(s.y-n.y)*(r.x-t.x)-(s.x-n.x)*(r.y-t.y);if(0!==c){var l=a/c,u=h/c;0<=l&&l<=1&&0<=u&&u<=1?(o=new i("Intersection")).appendPoint(new e.Point(t.x+l*(r.x-t.x),t.y+l*(r.y-t.y))):o=new i}else o=new i(0===a||0===h?"Coincident":"Parallel");return o},e.Intersection.intersectLinePolygon=function(t,e,r){var n,s,o,a,h=new i,c=r.length;for(a=0;a0&&(h.status="Intersection"),h},e.Intersection.intersectPolygonPolygon=function(t,e){var r,n=new i,s=t.length;for(r=0;r0&&(n.status="Intersection"),n},e.Intersection.intersectPolygonRectangle=function(t,r,n){var s=r.min(n),o=r.max(n),a=new e.Point(o.x,s.y),h=new e.Point(s.x,o.y),c=i.intersectLinePolygon(s,a,t),l=i.intersectLinePolygon(a,o,t),u=i.intersectLinePolygon(o,h,t),f=i.intersectLinePolygon(h,s,t),d=new i;return d.appendPoints(c.points),d.appendPoints(l.points),d.appendPoints(u.points),d.appendPoints(f.points),d.points.length>0&&(d.status="Intersection"),d})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});function i(t){t?this._tryParsingColor(t):this.setSource([0,0,0,1])}function r(t,e,i){return i<0&&(i+=1),i>1&&(i-=1),i<1/6?t+6*(e-t)*i:i<.5?e:i<2/3?t+(e-t)*(2/3-i)*6:t}e.Color?e.warn("fabric.Color is already defined."):(e.Color=i,e.Color.prototype={_tryParsingColor:function(t){var e;t in i.colorNameMap&&(t=i.colorNameMap[t]),"transparent"===t&&(e=[255,255,255,0]),e||(e=i.sourceFromHex(t)),e||(e=i.sourceFromRgb(t)),e||(e=i.sourceFromHsl(t)),e||(e=[0,0,0,1]),e&&this.setSource(e)},_rgbToHsl:function(t,i,r){t/=255,i/=255,r/=255;var n,s,o,a=e.util.array.max([t,i,r]),h=e.util.array.min([t,i,r]);if(o=(a+h)/2,a===h)n=s=0;else{var c=a-h;switch(s=o>.5?c/(2-a-h):c/(a+h),a){case t:n=(i-r)/c+(i0)-(t<0)||+t};function d(t,e){var i=t.getTotalAngle()+u(Math.atan2(e.y,e.x))+360;return Math.round(i%360/45)}function g(t,e){var i=e.transform.target,r=i.canvas;r&&r.fire("object:"+t,Object.assign({},e,{target:i})),i.fire(t,e)}function p(t,e){var i=e.canvas,r=t[i.uniScaleKey];return i.uniformScaling&&!r||!i.uniformScaling&&r}function v(t){return t.originX===c&&t.originY===c}function m(t,e,i){var r=t.lockScalingX,n=t.lockScalingY;return!(!r||!n)||(!(e||!r&&!n||!i)||(!(!r||"x"!==e)||!(!n||"y"!==e)))}function b(t,e,i,r){return{e:t,transform:e,pointer:{x:i,y:r}}}function y(t){return function(e,i,r,n){var s=i.target,o=s.getRelativeCenterPoint(),a=s.translateToOriginPoint(o,i.originX,i.originY),h=t(e,i,r,n);return s.setPositionByOrigin(a,i.originX,i.originY),h}}function _(t,e){return function(i,r,n,s){var o=e(i,r,n,s);return o&&g(t,b(i,r,n,s)),o}}function x(t,i,r,n,s){var o=t.target,a=o.controls[t.corner],h=o.canvas.getZoom(),c=o.padding/h,l=o.normalizePoint(new e.Point(n,s),i,r);return l.x>=c&&(l.x-=c),l.x<=-c&&(l.x+=c),l.y>=c&&(l.y-=c),l.y<=c&&(l.y+=c),l.x-=a.offsetX,l.y-=a.offsetY,l}function C(t){return t.flipX!==t.flipY}function w(t,e,i,r,n){if(0!==t[e]){var s=n/t._getTransformedDimensions()[r]*t[i];t.set(i,s)}}function S(t,e,i,r){var n,c=e.target,l=c._getTransformedDimensions({skewX:0,skewY:c.skewY}),f=x(e,e.originX,e.originY,i,r),d=Math.abs(2*f.x)-l.x,g=c.skewX;d<2?n=0:(n=u(Math.atan2(d/c.scaleX,l.y/c.scaleY)),e.originX===s&&e.originY===h&&(n=-n),e.originX===a&&e.originY===o&&(n=-n),C(c)&&(n=-n));var p=g!==n;if(p){var v=c._getTransformedDimensions().y;c.set("skewX",n),w(c,"skewY","scaleY","y",v)}return p}function T(t,e,i,r){var n,c=e.target,l=c._getTransformedDimensions({skewX:c.skewX,skewY:0}),f=x(e,e.originX,e.originY,i,r),d=Math.abs(2*f.y)-l.y,g=c.skewY;d<2?n=0:(n=u(Math.atan2(d/c.scaleY,l.x/c.scaleX)),e.originX===s&&e.originY===h&&(n=-n),e.originX===a&&e.originY===o&&(n=-n),C(c)&&(n=-n));var p=g!==n;if(p){var v=c._getTransformedDimensions().x;c.set("skewY",n),w(c,"skewX","scaleX","x",v)}return p}function O(t,e,i,r,n){n=n||{};var s,o,a,h,c,u,d=e.target,g=d.lockScalingX,b=d.lockScalingY,y=n.by,_=p(t,d),C=m(d,y,_),w=e.gestureScale;if(C)return!1;if(w)o=e.scaleX*w,a=e.scaleY*w;else{if(s=x(e,e.originX,e.originY,i,r),c="y"!==y?f(s.x):1,u="x"!==y?f(s.y):1,e.signX||(e.signX=c),e.signY||(e.signY=u),d.lockScalingFlip&&(e.signX!==c||e.signY!==u))return!1;if(h=d._getTransformedDimensions(),_&&!y){var S=Math.abs(s.x)+Math.abs(s.y),T=e.original,O=S/(Math.abs(h.x*T.scaleX/d.scaleX)+Math.abs(h.y*T.scaleY/d.scaleY));o=T.scaleX*O,a=T.scaleY*O}else o=Math.abs(s.x*d.scaleX/h.x),a=Math.abs(s.y*d.scaleY/h.y);v(e)&&(o*=2,a*=2),e.signX!==c&&"y"!==y&&(e.originX=l[e.originX],o*=-1,e.signX=c),e.signY!==u&&"x"!==y&&(e.originY=l[e.originY],a*=-1,e.signY=u)}var P=d.scaleX,k=d.scaleY;return y?("x"===y&&d.set("scaleX",o),"y"===y&&d.set("scaleY",a)):(!g&&d.set("scaleX",o),!b&&d.set("scaleY",a)),P!==d.scaleX||k!==d.scaleY}n.scaleCursorStyleHandler=function(t,e,r){var n=p(t,r),s="";if(0!==e.x&&0===e.y?s="x":0===e.x&&0!==e.y&&(s="y"),m(r,s,n))return"not-allowed";var o=d(r,e);return i[o]+"-resize"},n.skewCursorStyleHandler=function(t,e,i){var n="not-allowed";if(0!==e.x&&i.lockSkewingY)return n;if(0!==e.y&&i.lockSkewingX)return n;var s=d(i,e)%4;return r[s]+"-resize"},n.scaleSkewCursorStyleHandler=function(t,e,i){return t[i.canvas.altActionKey]?n.skewCursorStyleHandler(t,e,i):n.scaleCursorStyleHandler(t,e,i)},n.rotationWithSnapping=_("rotating",y((function(t,e,i,r){var n=e,s=n.target,o=s.translateToOriginPoint(s.getRelativeCenterPoint(),n.originX,n.originY);if(s.lockRotation)return!1;var a,h=Math.atan2(n.ey-o.y,n.ex-o.x),c=Math.atan2(r-o.y,i-o.x),l=u(c-h+n.theta);if(s.snapAngle>0){var f=s.snapAngle,d=s.snapThreshold||f,g=Math.ceil(l/f)*f,p=Math.floor(l/f)*f;Math.abs(l-p)0){var s=e.target,o=s.strokeWidth/(s.strokeUniform?s.scaleX:1),a=v(e)?2:1,h=s.width,c=Math.ceil(Math.abs(n.x*a/s.scaleX)-o);return s.set("width",Math.max(c,0)),h!==s.width}return!1}))),n.skewHandlerX=function(t,e,i,r){var n,h=e.target,l=h.skewX,u=e.originY;return!h.lockSkewingX&&(0===l?n=x(e,c,c,i,r).x>0?s:a:(l>0&&(n=u===o?s:a),l<0&&(n=u===o?a:s),C(h)&&(n=n===s?a:s)),e.originX=n,_("skewing",y(S))(t,e,i,r))},n.skewHandlerY=function(t,e,i,r){var n,a=e.target,l=a.skewY,u=e.originX;return!a.lockSkewingY&&(0===l?n=x(e,c,c,i,r).y>0?o:h:(l>0&&(n=u===s?o:h),l<0&&(n=u===s?h:o),C(a)&&(n=n===o?h:o)),e.originY=n,_("skewing",y(T))(t,e,i,r))},n.dragHandler=function(t,e,i,r){var n=e.target,s=i-e.offsetX,o=r-e.offsetY,a=!n.get("lockMovementX")&&n.left!==s,h=!n.get("lockMovementY")&&n.top!==o;return a&&n.set("left",s),h&&n.set("top",o),(a||h)&&g("moving",b(t,e,i,r)),a||h},n.scaleOrSkewActionName=function(t,e,i){var r=t[i.canvas.altActionKey];return 0===e.x?r?"skewX":"scaleY":0===e.y?r?"skewY":"scaleX":void 0},n.rotationStyleHandler=function(t,e,i){return i.lockRotation?"not-allowed":e.cursorStyle},n.fireEvent=g,n.wrapWithFixedAnchor=y,n.wrapWithFireEvent=_,n.getLocalPoint=x,e.controlsUtils=n}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.util.degreesToRadians,r=e.controlsUtils;r.renderCircleControl=function(t,e,i,r,n){r=r||{};var s,o=this.sizeX||r.cornerSize||n.cornerSize,a=this.sizeY||r.cornerSize||n.cornerSize,h=void 0!==r.transparentCorners?r.transparentCorners:n.transparentCorners,c=h?"stroke":"fill",l=!h&&(r.cornerStrokeColor||n.cornerStrokeColor),u=e,f=i;t.save(),t.fillStyle=r.cornerColor||n.cornerColor,t.strokeStyle=r.cornerStrokeColor||n.cornerStrokeColor,o>a?(s=o,t.scale(1,a/o),f=i*o/a):a>o?(s=a,t.scale(o/a,1),u=e*a/o):s=o,t.lineWidth=1,t.beginPath(),t.arc(u,f,s/2,0,2*Math.PI,!1),t[c](),l&&t.stroke(),t.restore()},r.renderSquareControl=function(t,e,r,n,s){n=n||{};var o=this.sizeX||n.cornerSize||s.cornerSize,a=this.sizeY||n.cornerSize||s.cornerSize,h=void 0!==n.transparentCorners?n.transparentCorners:s.transparentCorners,c=h?"stroke":"fill",l=!h&&(n.cornerStrokeColor||s.cornerStrokeColor),u=o/2,f=a/2;t.save(),t.fillStyle=n.cornerColor||s.cornerColor,t.strokeStyle=n.cornerStrokeColor||s.cornerStrokeColor,t.lineWidth=1,t.translate(e,r);var d=s.getTotalAngle();t.rotate(i(d)),t[c+"Rect"](-u,-f,o,a),l&&t.strokeRect(-u,-f,o,a),t.restore()}}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});e.Control=function(t){for(var e in t)this[e]=t[e]},e.Control.prototype={visible:!0,actionName:"scale",angle:0,x:0,y:0,offsetX:0,offsetY:0,sizeX:null,sizeY:null,touchSizeX:null,touchSizeY:null,cursorStyle:"crosshair",withConnection:!1,actionHandler:function(){},mouseDownHandler:function(){},mouseUpHandler:function(){},getActionHandler:function(){return this.actionHandler},getMouseDownHandler:function(){return this.mouseDownHandler},getMouseUpHandler:function(){return this.mouseUpHandler},cursorStyleHandler:function(t,e){return e.cursorStyle},getActionName:function(t,e){return e.actionName},getVisibility:function(t,e){var i=t._controlsVisibility;return i&&void 0!==i[e]?i[e]:this.visible},setVisibility:function(t){this.visible=t},positionHandler:function(t,i){return e.util.transformPoint({x:this.x*t.x+this.offsetX,y:this.y*t.y+this.offsetY},i)},calcCornerCoords:function(t,i,r,n,s){var o,a,h,c,l=s?this.touchSizeX:this.sizeX,u=s?this.touchSizeY:this.sizeY;if(l&&u&&l!==u){var f=Math.atan2(u,l),d=Math.sqrt(l*l+u*u)/2,g=f-e.util.degreesToRadians(t),p=Math.PI/2-f-e.util.degreesToRadians(t);o=d*e.util.cos(g),a=d*e.util.sin(g),h=d*e.util.cos(p),c=d*e.util.sin(p)}else{d=.7071067812*(l&&u?l:i);g=e.util.degreesToRadians(45-t);o=h=d*e.util.cos(g),a=c=d*e.util.sin(g)}return{tl:{x:r-c,y:n-h},tr:{x:r+o,y:n-a},bl:{x:r-o,y:n+a},br:{x:r+c,y:n+h}}},render:function(t,i,r,n,s){if("circle"===((n=n||{}).cornerStyle||s.cornerStyle))e.controlsUtils.renderCircleControl.call(this,t,i,r,n,s);else e.controlsUtils.renderSquareControl.call(this,t,i,r,n,s)}}}(void 0!==t?t:window),function(t){function e(t,e){var i,r,n,s,o=t.getAttribute("style"),a=t.getAttribute("offset")||0;if(a=(a=parseFloat(a)/(/%$/.test(a)?100:1))<0?0:a>1?1:a,o){var h=o.split(/\s*;\s*/);for(""===h[h.length-1]&&h.pop(),s=h.length;s--;){var c=h[s].split(/\s*:\s*/),l=c[0].trim(),u=c[1].trim();"stop-color"===l?i=u:"stop-opacity"===l&&(n=u)}}return i||(i=t.getAttribute("stop-color")||"rgb(0,0,0)"),n||(n=t.getAttribute("stop-opacity")),r=(i=new fabric.Color(i)).getAlpha(),n=isNaN(parseFloat(n))?1:parseFloat(n),n*=r*e,{offset:a,color:i.toRgb(),opacity:n}}fabric.Gradient=fabric.util.createClass({offsetX:0,offsetY:0,gradientTransform:null,gradientUnits:"pixels",type:"linear",initialize:function(t){t||(t={}),t.coords||(t.coords={});var e,i=this;Object.keys(t).forEach((function(e){i[e]=t[e]})),this.id?this.id+="_"+fabric.Object.__uid++:this.id=fabric.Object.__uid++,e={x1:t.coords.x1||0,y1:t.coords.y1||0,x2:t.coords.x2||0,y2:t.coords.y2||0},"radial"===this.type&&(e.r1=t.coords.r1||0,e.r2=t.coords.r2||0),this.coords=e,this.colorStops=t.colorStops.slice()},addColorStop:function(t){for(var e in t){var i=new fabric.Color(t[e]);this.colorStops.push({offset:parseFloat(e),color:i.toRgb(),opacity:i.getAlpha()})}return this},toObject:function(t){var e={type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY,gradientUnits:this.gradientUnits,gradientTransform:this.gradientTransform?this.gradientTransform.concat():this.gradientTransform};return fabric.util.populateWithProperties(this,e,t),e},toSVG:function(t,e){var i,r,n,s,o=this.coords,a=(e=e||{},this.colorStops),h=o.r1>o.r2,c=this.gradientTransform?this.gradientTransform.concat():fabric.iMatrix.concat(),l=-this.offsetX,u=-this.offsetY,f=!!e.additionalTransform,d="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox";if(a.sort((function(t,e){return t.offset-e.offset})),"objectBoundingBox"===d?(l/=t.width,u/=t.height):(l+=t.width/2,u+=t.height/2),"path"===t.type&&"percentage"!==this.gradientUnits&&(l-=t.pathOffset.x,u-=t.pathOffset.y),c[4]-=l,c[5]-=u,s='id="SVGID_'+this.id+'" gradientUnits="'+d+'"',s+=' gradientTransform="'+(f?e.additionalTransform+" ":"")+fabric.util.matrixToSVG(c)+'" ',"linear"===this.type?n=["\n']:"radial"===this.type&&(n=["\n']),"radial"===this.type){if(h)for((a=a.concat()).reverse(),i=0,r=a.length;i0){var p=g/Math.max(o.r1,o.r2);for(i=0,r=a.length;i\n')}return n.push("linear"===this.type?"\n":"\n"),n.join("")},toLive:function(t){var e,i,r,n=this.coords;if(this.type){for("linear"===this.type?e=t.createLinearGradient(n.x1,n.y1,n.x2,n.y2):"radial"===this.type&&(e=t.createRadialGradient(n.x1,n.y1,n.r1,n.x2,n.y2,n.r2)),i=0,r=this.colorStops.length;i1?1:s,isNaN(s)&&(s=1);var o,a,h,c,l=t.getElementsByTagName("stop"),u="userSpaceOnUse"===t.getAttribute("gradientUnits")?"pixels":"percentage",f=t.getAttribute("gradientTransform")||"",d=[],g=0,p=0;for("linearGradient"===t.nodeName||"LINEARGRADIENT"===t.nodeName?(o="linear",a=function(t){return{x1:t.getAttribute("x1")||0,y1:t.getAttribute("y1")||0,x2:t.getAttribute("x2")||"100%",y2:t.getAttribute("y2")||0}}(t)):(o="radial",a=function(t){return{x1:t.getAttribute("fx")||t.getAttribute("cx")||"50%",y1:t.getAttribute("fy")||t.getAttribute("cy")||"50%",r1:0,x2:t.getAttribute("cx")||"50%",y2:t.getAttribute("cy")||"50%",r2:t.getAttribute("r")||"50%"}}(t)),h=l.length;h--;)d.push(e(l[h],s));return c=fabric.parseTransformAttribute(f),function(t,e,i,r){var n,s;Object.keys(e).forEach((function(t){"Infinity"===(n=e[t])?s=1:"-Infinity"===n?s=0:(s=parseFloat(e[t],10),"string"==typeof n&&/^(\d+\.\d+)%|(\d+)%$/.test(n)&&(s*=.01,"pixels"===r&&("x1"!==t&&"x2"!==t&&"r2"!==t||(s*=i.viewBoxWidth||i.width),"y1"!==t&&"y2"!==t||(s*=i.viewBoxHeight||i.height)))),e[t]=s}))}(0,a,n,u),"pixels"===u&&(g=-i.left,p=-i.top),new fabric.Gradient({id:t.getAttribute("id"),type:o,coords:a,colorStops:d,gradientUnits:u,gradientTransform:c,offsetX:g,offsetY:p})}})}(void 0!==t||window),void 0!==t||window,c=fabric.util.toFixed,fabric.Pattern=fabric.util.createClass({repeat:"repeat",offsetX:0,offsetY:0,crossOrigin:"",patternTransform:null,type:"pattern",initialize:function(t){t||(t={}),this.id=fabric.Object.__uid++,this.setOptions(t)},toObject:function(t){var e,i,r=fabric.Object.NUM_FRACTION_DIGITS;return"string"==typeof this.source.src?e=this.source.src:"object"==typeof this.source&&this.source.toDataURL&&(e=this.source.toDataURL()),i={type:"pattern",source:e,repeat:this.repeat,crossOrigin:this.crossOrigin,offsetX:c(this.offsetX,r),offsetY:c(this.offsetY,r),patternTransform:this.patternTransform?this.patternTransform.concat():null},fabric.util.populateWithProperties(this,i,t),i},toSVG:function(t){var e="function"==typeof this.source?this.source():this.source,i=e.width/t.width,r=e.height/t.height,n=this.offsetX/t.width,s=this.offsetY/t.height,o="";return"repeat-x"!==this.repeat&&"no-repeat"!==this.repeat||(r=1,s&&(r+=Math.abs(s))),"repeat-y"!==this.repeat&&"no-repeat"!==this.repeat||(i=1,n&&(i+=Math.abs(n))),e.src?o=e.src:e.toDataURL&&(o=e.toDataURL()),'\n\n\n'},setOptions:function(t){for(var e in t)this[e]=t[e]},toLive:function(t){var e=this.source;if(!e)return"";if(void 0!==e.src){if(!e.complete)return"";if(0===e.naturalWidth||0===e.naturalHeight)return""}return t.createPattern(e,this.repeat)}}),fabric.Pattern.fromObject=function(t){var e=Object.assign({},t);return fabric.util.loadImage(t.source,{crossOrigin:t.crossOrigin}).then((function(t){return e.source=t,new fabric.Pattern(e)}))},function(t){var e=t.fabric||(t.fabric={}),i=e.util.toFixed;e.Shadow?e.warn("fabric.Shadow is already defined."):(e.Shadow=e.util.createClass({color:"rgb(0,0,0)",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,nonScaling:!1,initialize:function(t){for(var i in"string"==typeof t&&(t=this._parseShadow(t)),t)this[i]=t[i];this.id=e.Object.__uid++},_parseShadow:function(t){var i=t.trim(),r=e.Shadow.reOffsetsAndBlur.exec(i)||[];return{color:(i.replace(e.Shadow.reOffsetsAndBlur,"")||"rgb(0,0,0)").trim(),offsetX:parseFloat(r[1],10)||0,offsetY:parseFloat(r[2],10)||0,blur:parseFloat(r[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join("px ")},toSVG:function(t){var r=40,n=40,s=e.Object.NUM_FRACTION_DIGITS,o=e.util.rotateVector({x:this.offsetX,y:this.offsetY},e.util.degreesToRadians(-t.angle)),a=new e.Color(this.color);return t.width&&t.height&&(r=100*i((Math.abs(o.x)+this.blur)/t.width,s)+20,n=100*i((Math.abs(o.y)+this.blur)/t.height,s)+20),t.flipX&&(o.x*=-1),t.flipY&&(o.y*=-1),'\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\n\n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke,nonScaling:this.nonScaling};var t={},i=e.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke","nonScaling"].forEach((function(e){this[e]!==i[e]&&(t[e]=this[e])}),this),t}}),e.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/)}(void 0!==t?t:window),function(){if(fabric.StaticCanvas)fabric.warn("fabric.StaticCanvas is already defined.");else{var t=fabric.util.object.extend,e=fabric.util.getElementOffset,i=fabric.util.removeFromArray,r=fabric.util.toFixed,n=fabric.util.transformPoint,s=fabric.util.invertTransform,o=fabric.util.getNodeCanvas,a=fabric.util.createCanvasElement,h=new Error("Could not initialize `canvas` element");fabric.StaticCanvas=fabric.util.createClass(fabric.CommonMethods,fabric.Collection,{initialize:function(t,e){e||(e={}),this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:fabric.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!0,clipPath:void 0,_initStatic:function(t,e){this._objects=[],this._createLowerCanvas(t),this._initOptions(e),this.interactive||this._initRetinaScaling(),this.calcOffset()},_isRetinaScaling:function(){return fabric.devicePixelRatio>1&&this.enableRetinaScaling},getRetinaScaling:function(){return this._isRetinaScaling()?Math.max(1,fabric.devicePixelRatio):1},_initRetinaScaling:function(){if(this._isRetinaScaling()){var t=fabric.devicePixelRatio;this.__initRetinaScaling(t,this.lowerCanvasEl,this.contextContainer),this.upperCanvasEl&&this.__initRetinaScaling(t,this.upperCanvasEl,this.contextTop)}},__initRetinaScaling:function(t,e,i){e.setAttribute("width",this.width*t),e.setAttribute("height",this.height*t),i.scale(t,t)},calcOffset:function(){return this._offset=e(this.lowerCanvasEl),this},_createCanvasElement:function(){var t=a();if(!t)throw h;if(t.style||(t.style={}),void 0===t.getContext)throw h;return t},_initOptions:function(t){var e=this.lowerCanvasEl;this._setOptions(t),this.width=this.width||parseInt(e.width,10)||0,this.height=this.height||parseInt(e.height,10)||0,this.lowerCanvasEl.style&&(e.width=this.width,e.height=this.height,e.style.width=this.width+"px",e.style.height=this.height+"px",this.viewportTransform=this.viewportTransform.slice())},_createLowerCanvas:function(t){if(t&&t.getContext?this.lowerCanvasEl=t:this.lowerCanvasEl=fabric.util.getById(t)||this._createCanvasElement(),this.lowerCanvasEl.hasAttribute("data-fabric"))throw new Error("fabric.js: trying to initialize a canvas that has already been initialized");fabric.util.addClass(this.lowerCanvasEl,"lower-canvas"),this.lowerCanvasEl.setAttribute("data-fabric","main"),this.interactive&&(this._originalCanvasStyle=this.lowerCanvasEl.style.cssText,this._applyCanvasStyle(this.lowerCanvasEl)),this.contextContainer=this.lowerCanvasEl.getContext("2d")},getWidth:function(){return this.width},getHeight:function(){return this.height},setWidth:function(t,e){return this.setDimensions({width:t},e)},setHeight:function(t,e){return this.setDimensions({height:t},e)},setDimensions:function(t,e){var i;for(var r in e=e||{},t)i=t[r],e.cssOnly||(this._setBackstoreDimension(r,t[r]),i+="px",this.hasLostContext=!0),e.backstoreOnly||this._setCssDimension(r,i);return this._isCurrentlyDrawing&&this.freeDrawingBrush&&this.freeDrawingBrush._setBrushStyles(this.contextTop),this._initRetinaScaling(),this.calcOffset(),e.cssOnly||this.requestRenderAll(),this},_setBackstoreDimension:function(t,e){return this.lowerCanvasEl[t]=e,this.upperCanvasEl&&(this.upperCanvasEl[t]=e),this.cacheCanvasEl&&(this.cacheCanvasEl[t]=e),this[t]=e,this},_setCssDimension:function(t,e){return this.lowerCanvasEl.style[t]=e,this.upperCanvasEl&&(this.upperCanvasEl.style[t]=e),this.wrapperEl&&(this.wrapperEl.style[t]=e),this},getZoom:function(){return this.viewportTransform[0]},setViewportTransform:function(t){var e,i,r,n=this._activeObject,s=this.backgroundImage,o=this.overlayImage;for(this.viewportTransform=t,i=0,r=this._objects.length;i0&&this.renderOnAddRemove&&this.requestRenderAll(),this},insertAt:function(t,e){return fabric.Collection.insertAt.call(this,t,e,this._onObjectAdded),(Array.isArray(t)?t.length>0:t)&&this.renderOnAddRemove&&this.requestRenderAll(),this},remove:function(){var t=fabric.Collection.remove.call(this,arguments,this._onObjectRemoved);return t.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),this},_onObjectAdded:function(t){this.stateful&&t.setupState(),t.canvas&&t.canvas!==this&&(console.warn("fabric.Canvas: trying to add an object that belongs to a different canvas.\nResulting to default behavior: removing object from previous canvas and adding to new canvas"),t.canvas.remove(t)),t._set("canvas",this),t.setCoords(),this.fire("object:added",{target:t}),t.fire("added",{target:this})},_onObjectRemoved:function(t){t._set("canvas",void 0),this.fire("object:removed",{target:t}),t.fire("removed",{target:this})},clearContext:function(t){return t.clearRect(0,0,this.width,this.height),this},getContext:function(){return this.contextContainer},clear:function(){return this.remove.apply(this,this.getObjects()),this.backgroundImage=null,this.overlayImage=null,this.backgroundColor="",this.overlayColor="",this._hasITextHandlers&&(this.off("mouse:up",this._mouseUpITextHandler),this._iTextInstances=null,this._hasITextHandlers=!1),this.clearContext(this.contextContainer),this.fire("canvas:cleared"),this.renderOnAddRemove&&this.requestRenderAll(),this},renderAll:function(){var t=this.contextContainer;return this.renderCanvas(t,this._objects),this},renderAndReset:function(){this.isRendering=0,this.renderAll()},requestRenderAll:function(){return this.isRendering||(this.isRendering=fabric.util.requestAnimFrame(this.renderAndResetBound)),this},calcViewportBoundaries:function(){var t=this.width,e=this.height,i=s(this.viewportTransform),r=n({x:0,y:0},i),o=n({x:t,y:e},i),a=r.min(o),h=r.max(o);return this.vptCoords={tl:a,tr:new fabric.Point(h.x,a.y),bl:new fabric.Point(a.x,h.y),br:h}},cancelRequestedRender:function(){this.isRendering&&(fabric.util.cancelAnimFrame(this.isRendering),this.isRendering=0)},renderCanvas:function(t,e){var i=this.viewportTransform,r=this.clipPath;this.cancelRequestedRender(),this.calcViewportBoundaries(),this.clearContext(t),fabric.util.setImageSmoothing(t,this.imageSmoothingEnabled),this.fire("before:render",{ctx:t}),this._renderBackground(t),t.save(),t.transform(i[0],i[1],i[2],i[3],i[4],i[5]),this._renderObjects(t,e),t.restore(),!this.controlsAboveOverlay&&this.interactive&&this.drawControls(t),r&&(r._set("canvas",this),r.shouldCache(),r._transformDone=!0,r.renderCache({forClipping:!0}),this.drawClipPathOnCanvas(t)),this._renderOverlay(t),this.controlsAboveOverlay&&this.interactive&&this.drawControls(t),this.fire("after:render",{ctx:t})},drawClipPathOnCanvas:function(t){var e=this.viewportTransform,i=this.clipPath;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5]),t.globalCompositeOperation="destination-in",i.transform(t),t.scale(1/i.zoomX,1/i.zoomY),t.drawImage(i._cacheCanvas,-i.cacheTranslationX,-i.cacheTranslationY),t.restore()},_renderObjects:function(t,e){var i,r;for(i=0,r=e.length;i\n'),this._setSVGBgOverlayColor(i,"background"),this._setSVGBgOverlayImage(i,"backgroundImage",e),this._setSVGObjects(i,e),this.clipPath&&i.push("\n"),this._setSVGBgOverlayColor(i,"overlay"),this._setSVGBgOverlayImage(i,"overlayImage",e),i.push(""),i.join("")},_setSVGPreamble:function(t,e){e.suppressPreamble||t.push('\n','\n')},_setSVGHeader:function(t,e){var i,n=e.width||this.width,s=e.height||this.height,o='viewBox="0 0 '+this.width+" "+this.height+'" ',a=fabric.Object.NUM_FRACTION_DIGITS;e.viewBox?o='viewBox="'+e.viewBox.x+" "+e.viewBox.y+" "+e.viewBox.width+" "+e.viewBox.height+'" ':this.svgViewportTransformation&&(i=this.viewportTransform,o='viewBox="'+r(-i[4]/i[0],a)+" "+r(-i[5]/i[3],a)+" "+r(this.width/i[0],a)+" "+r(this.height/i[3],a)+'" '),t.push("\n',"Created with Fabric.js ",fabric.version,"\n","\n",this.createSVGFontFacesMarkup(),this.createSVGRefElementsMarkup(),this.createSVGClipPathMarkup(e),"\n")},createSVGClipPathMarkup:function(t){var e=this.clipPath;return e?(e.clipPathId="CLIPPATH_"+fabric.Object.__uid++,'\n'+this.clipPath.toClipPathSVG(t.reviver)+"\n"):""},createSVGRefElementsMarkup:function(){var t=this;return["background","overlay"].map((function(e){var i=t[e+"Color"];if(i&&i.toLive){var r=t[e+"Vpt"],n=t.viewportTransform,s={width:t.width/(r?n[0]:1),height:t.height/(r?n[3]:1)};return i.toSVG(s,{additionalTransform:r?fabric.util.matrixToSVG(n):""})}})).join("")},createSVGFontFacesMarkup:function(){var t,e,i,r,n,s,o,a,h="",c={},l=fabric.fontPaths,u=[];for(this._objects.forEach((function t(e){u.push(e),e._objects&&e._objects.forEach(t)})),o=0,a=u.length;o',"\n",h,"","\n"].join("")),h},_setSVGObjects:function(t,e){var i,r,n,s=this._objects;for(r=0,n=s.length;r\n")}else t.push('\n")},sendToBack:function(t){if(!t)return this;var e,r,n,s=this._activeObject;if(t===s&&"activeSelection"===t.type)for(e=(n=s._objects).length;e--;)r=n[e],i(this._objects,r),this._objects.unshift(r);else i(this._objects,t),this._objects.unshift(t);return this.renderOnAddRemove&&this.requestRenderAll(),this},bringToFront:function(t){if(!t)return this;var e,r,n,s=this._activeObject;if(t===s&&"activeSelection"===t.type)for(n=s._objects,e=0;e0+c&&(o=s-1,i(this._objects,n),this._objects.splice(o,0,n)),c++;else 0!==(s=this._objects.indexOf(t))&&(o=this._findNewLowerIndex(t,s,e),i(this._objects,t),this._objects.splice(o,0,t));return this.renderOnAddRemove&&this.requestRenderAll(),this},_findNewLowerIndex:function(t,e,i){var r,n;if(i)for(r=e,n=e-1;n>=0;--n){if(t.intersectsWithObject(this._objects[n])||t.isContainedWithinObject(this._objects[n])||this._objects[n].isContainedWithinObject(t)){r=n;break}}else r=e-1;return r},bringForward:function(t,e){if(!t)return this;var r,n,s,o,a,h=this._activeObject,c=0;if(t===h&&"activeSelection"===t.type)for(r=(a=h._objects).length;r--;)n=a[r],(s=this._objects.indexOf(n))"}}),t(fabric.StaticCanvas.prototype,fabric.Observable),t(fabric.StaticCanvas.prototype,fabric.DataURLExporter),t(fabric.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(t){var e=a();if(!e||!e.getContext)return null;var i=e.getContext("2d");return i&&"setLineDash"===t?void 0!==i.setLineDash:null}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject,fabric.isLikelyNode&&(fabric.StaticCanvas.prototype.createPNGStream=function(){var t=o(this.lowerCanvasEl);return t&&t.createPNGStream()},fabric.StaticCanvas.prototype.createJPEGStream=function(t){var e=o(this.lowerCanvasEl);return e&&e.createJPEGStream(t)})}}(void 0!==t||window),fabric.BaseBrush=fabric.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeMiterLimit:10,strokeDashArray:null,limitedToCanvasSize:!1,_setBrushStyles:function(t){t.strokeStyle=this.color,t.lineWidth=this.width,t.lineCap=this.strokeLineCap,t.miterLimit=this.strokeMiterLimit,t.lineJoin=this.strokeLineJoin,t.setLineDash(this.strokeDashArray||[])},_saveAndTransform:function(t){var e=this.canvas.viewportTransform;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5])},_setShadow:function(){if(this.shadow){var t=this.canvas,e=this.shadow,i=t.contextTop,r=t.getZoom();t&&t._isRetinaScaling()&&(r*=fabric.devicePixelRatio),i.shadowColor=e.color,i.shadowBlur=e.blur*r,i.shadowOffsetX=e.offsetX*r,i.shadowOffsetY=e.offsetY*r}},needsFullRender:function(){return new fabric.Color(this.color).getAlpha()<1||!!this.shadow},_resetShadow:function(){var t=this.canvas.contextTop;t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0},_isOutSideCanvas:function(t){return t.x<0||t.x>this.canvas.getWidth()||t.y<0||t.y>this.canvas.getHeight()}}),void 0!==t||window,fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{decimate:.4,drawStraightLine:!1,straightLineKey:"shiftKey",initialize:function(t){this.canvas=t,this._points=[]},needsFullRender:function(){return this.callSuper("needsFullRender")||this._hasStraightLine},_drawSegment:function(t,e,i){var r=e.midPointFrom(i);return t.quadraticCurveTo(e.x,e.y,r.x,r.y),r},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],this._prepareForDrawing(t),this._captureDrawingPath(t),this._render())},onMouseMove:function(t,e){if(this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],(!0!==this.limitedToCanvasSize||!this._isOutSideCanvas(t))&&this._captureDrawingPath(t)&&this._points.length>1))if(this.needsFullRender())this.canvas.clearContext(this.canvas.contextTop),this._render();else{var i=this._points,r=i.length,n=this.canvas.contextTop;this._saveAndTransform(n),this.oldEnd&&(n.beginPath(),n.moveTo(this.oldEnd.x,this.oldEnd.y)),this.oldEnd=this._drawSegment(n,i[r-2],i[r-1],!0),n.stroke(),n.restore()}},onMouseUp:function(t){return!this.canvas._isMainEvent(t.e)||(this.drawStraightLine=!1,this.oldEnd=void 0,this._finalizeAndAddPath(),!1)},_prepareForDrawing:function(t){var e=new fabric.Point(t.x,t.y);this._reset(),this._addPoint(e),this.canvas.contextTop.moveTo(e.x,e.y)},_addPoint:function(t){return!(this._points.length>1&&t.eq(this._points[this._points.length-1])||(this.drawStraightLine&&this._points.length>1&&(this._hasStraightLine=!0,this._points.pop()),this._points.push(t),0))},_reset:function(){this._points=[],this._setBrushStyles(this.canvas.contextTop),this._setShadow(),this._hasStraightLine=!1},_captureDrawingPath:function(t){var e=new fabric.Point(t.x,t.y);return this._addPoint(e)},_render:function(t){var e,i,r=this._points[0],n=this._points[1];if(t=t||this.canvas.contextTop,this._saveAndTransform(t),t.beginPath(),2===this._points.length&&r.x===n.x&&r.y===n.y){var s=this.width/1e3;r=new fabric.Point(r.x,r.y),n=new fabric.Point(n.x,n.y),r.x-=s,n.x+=s}for(t.moveTo(r.x,r.y),e=1,i=this._points.length;e=n&&(o=t[i],a.push(o));return a.push(t[s]),a},_finalizeAndAddPath:function(){this.canvas.contextTop.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate));var t=this.convertPointsToSVGPath(this._points);if(this._isEmptySVGPath(t))this.canvas.requestRenderAll();else{var e=this.createPath(t);this.canvas.clearContext(this.canvas.contextTop),this.canvas.fire("before:path:created",{path:e}),this.canvas.add(e),this.canvas.requestRenderAll(),e.setCoords(),this._resetShadow(),this.canvas.fire("path:created",{path:e})}}}),fabric.CircleBrush=fabric.util.createClass(fabric.BaseBrush,{width:10,initialize:function(t){this.canvas=t,this.points=[]},drawDot:function(t){var e=this.addPoint(t),i=this.canvas.contextTop;this._saveAndTransform(i),this.dot(i,e),i.restore()},dot:function(t,e){t.fillStyle=e.fill,t.beginPath(),t.arc(e.x,e.y,e.radius,0,2*Math.PI,!1),t.closePath(),t.fill()},onMouseDown:function(t){this.points.length=0,this.canvas.clearContext(this.canvas.contextTop),this._setShadow(),this.drawDot(t)},_render:function(){var t,e,i=this.canvas.contextTop,r=this.points;for(this._saveAndTransform(i),t=0,e=r.length;t1){e=[],i=[];for(var n=0,s=this._objects.length;n1&&(this._activeObject._objects=i),e.push.apply(e,i)}else if(this.preserveObjectStacking||1!==r.length)e=this._objects;else{var o=r[0],a=o.getAncestors(!0),h=0===a.length?o:a.pop();(e=this._objects.slice()).indexOf(h)>-1&&e.splice(e.indexOf(h),1),e.push(h)}return e},renderAll:function(){!this.contextTopDirty||this._groupSelector||this.isDrawingMode||(this.clearContext(this.contextTop),this.contextTopDirty=!1),this.hasLostContext&&(this.renderTopLayer(this.contextTop),this.hasLostContext=!1);var t=this.contextContainer;return!this._objectsToRender&&(this._objectsToRender=this._chooseObjectsToRender()),this.renderCanvas(t,this._objectsToRender),this},renderTopLayer:function(t){t.save(),this.isDrawingMode&&this._isCurrentlyDrawing&&(this.freeDrawingBrush&&this.freeDrawingBrush._render(),this.contextTopDirty=!0),this.selection&&this._groupSelector&&(this._drawSelection(t),this.contextTopDirty=!0),t.restore()},renderTop:function(){var t=this.contextTop;return this.clearContext(t),this.renderTopLayer(t),this.fire("after:render"),this},_normalizePointer:function(t,e){var i=t.calcTransformMatrix(),r=fabric.util.invertTransform(i),n=this.restorePointerVpt(e);return fabric.util.transformPoint(n,r)},isTargetTransparent:function(t,e,i){if(t.shouldCache()&&t._cacheCanvas&&t!==this._activeObject){var r=this._normalizePointer(t,{x:e,y:i}),n=Math.max(t.cacheTranslationX+r.x*t.zoomX,0),s=Math.max(t.cacheTranslationY+r.y*t.zoomY,0);return fabric.util.isTransparent(t._cacheContext,Math.round(n),Math.round(s),this.targetFindTolerance)}var o=this.contextCache,a=t.selectionBackgroundColor,h=this.viewportTransform;return t.selectionBackgroundColor="",this.clearContext(o),o.save(),o.transform(h[0],h[1],h[2],h[3],h[4],h[5]),t.render(o),o.restore(),t.selectionBackgroundColor=a,fabric.util.isTransparent(o,e,i,this.targetFindTolerance)},_isSelectionKeyPressed:function(t){return Array.isArray(this.selectionKey)?!!this.selectionKey.find((function(e){return!0===t[e]})):t[this.selectionKey]},_shouldClearSelection:function(t,e){var i=this.getActiveObjects(),r=this._activeObject;return!e||e&&r&&i.length>1&&-1===i.indexOf(e)&&r!==e&&!this._isSelectionKeyPressed(t)||e&&!e.evented||e&&!e.selectable&&r&&r!==e},_shouldCenterTransform:function(t,e,i){var r;if(t)return"scale"===e||"scaleX"===e||"scaleY"===e||"resizing"===e?r=this.centeredScaling||t.centeredScaling:"rotate"===e&&(r=this.centeredRotation||t.centeredRotation),r?!i:i},_getOriginFromCorner:function(t,e){var i={x:t.originX,y:t.originY};return"ml"===e||"tl"===e||"bl"===e?i.x="right":"mr"!==e&&"tr"!==e&&"br"!==e||(i.x="left"),"tl"===e||"mt"===e||"tr"===e?i.y="bottom":"bl"!==e&&"mb"!==e&&"br"!==e||(i.y="top"),i},_getActionFromCorner:function(t,e,i,r){if(!e||!t)return"drag";var n=r.controls[e];return n.getActionName(i,n,r)},_setupCurrentTransform:function(t,e,r){if(e){var n=this.getPointer(t);e.group&&(n=fabric.util.transformPoint(n,fabric.util.invertTransform(e.group.calcTransformMatrix())));var s=e.__corner,o=e.controls[s],a=r&&s?o.getActionHandler(t,e,o):fabric.controlsUtils.dragHandler,h=this._getActionFromCorner(r,s,t,e),c=this._getOriginFromCorner(e,s),l=t[this.centeredKey],u={target:e,action:h,actionHandler:a,corner:s,scaleX:e.scaleX,scaleY:e.scaleY,skewX:e.skewX,skewY:e.skewY,offsetX:n.x-e.left,offsetY:n.y-e.top,originX:c.x,originY:c.y,ex:n.x,ey:n.y,lastX:n.x,lastY:n.y,theta:i(e.angle),width:e.width*e.scaleX,shiftKey:t.shiftKey,altKey:l,original:fabric.util.saveObjectTransform(e)};this._shouldCenterTransform(e,h,l)&&(u.originX="center",u.originY="center"),u.original.originX=c.x,u.original.originY=c.y,this._currentTransform=u,this._beforeTransform(t)}},setCursor:function(t){this.upperCanvasEl.style.cursor=t},_drawSelection:function(t){var e=this._groupSelector,i=new fabric.Point(e.ex,e.ey),r=fabric.util.transformPoint(i,this.viewportTransform),n=new fabric.Point(e.ex+e.left,e.ey+e.top),s=fabric.util.transformPoint(n,this.viewportTransform),o=Math.min(r.x,s.x),a=Math.min(r.y,s.y),h=Math.max(r.x,s.x),c=Math.max(r.y,s.y),l=this.selectionLineWidth/2;this.selectionColor&&(t.fillStyle=this.selectionColor,t.fillRect(o,a,h-o,c-a)),this.selectionLineWidth&&this.selectionBorderColor&&(t.lineWidth=this.selectionLineWidth,t.strokeStyle=this.selectionBorderColor,o+=l,a+=l,h-=l,c-=l,fabric.Object.prototype._setLineDash.call(this,t,this.selectionDashArray),t.strokeRect(o,a,h-o,c-a))},findTarget:function(t,e){if(!this.skipTargetFind){var i,n,s=this.getPointer(t,!0),o=this._activeObject,a=this.getActiveObjects(),h=r(t),c=a.length>1&&!e||1===a.length;if(this.targets=[],c&&o._findTargetCorner(s,h))return o;if(a.length>1&&"activeSelection"===o.type&&!e&&this.searchPossibleTargets([o],s))return o;if(1===a.length&&o===this.searchPossibleTargets([o],s)){if(!this.preserveObjectStacking)return o;i=o,n=this.targets,this.targets=[]}var l=this.searchPossibleTargets(this._objects,s);return t[this.altSelectionKey]&&l&&i&&l!==i&&(l=i,this.targets=n),l}},_checkTarget:function(t,e,i){if(e&&e.visible&&e.evented&&e.containsPoint(t)){if(!this.perPixelTargetFind&&!e.perPixelTargetFind||e.isEditing)return!0;if(!this.isTargetTransparent(e,i.x,i.y))return!0}},_searchPossibleTargets:function(t,e){for(var i,r,n=t.length;n--;){var s=t[n],o=s.group?this._normalizePointer(s.group,e):e;if(this._checkTarget(o,s,e)){(i=t[n]).subTargetCheck&&Array.isArray(i._objects)&&(r=this._searchPossibleTargets(i._objects,e))&&this.targets.push(r);break}}return i},searchPossibleTargets:function(t,e){var i=this._searchPossibleTargets(t,e);return i&&i.interactive&&this.targets[0]?this.targets[0]:i},restorePointerVpt:function(t){return fabric.util.transformPoint(t,fabric.util.invertTransform(this.viewportTransform))},getPointer:function(t,i){if(this._absolutePointer&&!i)return this._absolutePointer;if(this._pointer&&i)return this._pointer;var r,n=e(t),s=this.upperCanvasEl,o=s.getBoundingClientRect(),a=o.width||0,h=o.height||0;a&&h||("top"in o&&"bottom"in o&&(h=Math.abs(o.top-o.bottom)),"right"in o&&"left"in o&&(a=Math.abs(o.right-o.left))),this.calcOffset(),n.x=n.x-this._offset.left,n.y=n.y-this._offset.top,i||(n=this.restorePointerVpt(n));var c=this.getRetinaScaling();return 1!==c&&(n.x/=c,n.y/=c),r=0===a||0===h?{width:1,height:1}:{width:s.width/a,height:s.height/h},{x:n.x*r.width,y:n.y*r.height}},_createUpperCanvas:function(){var t=this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/,""),e=this.lowerCanvasEl,i=this.upperCanvasEl;i?i.className="":(i=this._createCanvasElement(),this.upperCanvasEl=i),fabric.util.addClass(i,"upper-canvas "+t),this.upperCanvasEl.setAttribute("data-fabric","top"),this.wrapperEl.appendChild(i),this._copyCanvasStyle(e,i),this._applyCanvasStyle(i),this.contextTop=i.getContext("2d")},_createCacheCanvas:function(){this.cacheCanvasEl=this._createCanvasElement(),this.cacheCanvasEl.setAttribute("width",this.width),this.cacheCanvasEl.setAttribute("height",this.height),this.contextCache=this.cacheCanvasEl.getContext("2d")},_initWrapperElement:function(){this.wrapperEl||(this.wrapperEl=fabric.util.wrapElement(this.lowerCanvasEl,"div",{class:this.containerClass}),this.wrapperEl.setAttribute("data-fabric","wrapper"),fabric.util.setStyle(this.wrapperEl,{width:this.width+"px",height:this.height+"px",position:"relative"}),fabric.util.makeElementUnselectable(this.wrapperEl))},_applyCanvasStyle:function(t){var e=this.width||t.width,i=this.height||t.height;fabric.util.setStyle(t,{position:"absolute",width:e+"px",height:i+"px",left:0,top:0,"touch-action":this.allowTouchScrolling?"manipulation":"none","-ms-touch-action":this.allowTouchScrolling?"manipulation":"none"}),t.width=e,t.height=i,fabric.util.makeElementUnselectable(t)},_copyCanvasStyle:function(t,e){e.style.cssText=t.style.cssText},getTopContext:function(){return this.contextTop},getSelectionContext:function(){return this.contextTop},getSelectionElement:function(){return this.upperCanvasEl},getActiveObject:function(){return this._activeObject},getActiveObjects:function(){var t=this._activeObject;return t?"activeSelection"===t.type&&t._objects?t._objects.slice(0):[t]:[]},_fireSelectionEvents:function(t,e){var i=!1,r=this.getActiveObjects(),n=[],s=[],o=!1;t.forEach((function(t){-1===r.indexOf(t)&&(i=!0,t.fire("deselected",{e:e,target:t}),s.push(t))})),r.forEach((function(r){-1===t.indexOf(r)&&(i=!0,r.fire("selected",{e:e,target:r}),n.push(r))})),t.length>0&&r.length>0?(o=!0,i&&this.fire("selection:updated",{e:e,selected:n,deselected:s})):r.length>0?(o=!0,this.fire("selection:created",{e:e,selected:n})):t.length>0&&(o=!0,this.fire("selection:cleared",{e:e,deselected:s})),o&&(this._objectsToRender=void 0)},setActiveObject:function(t,e){var i=this.getActiveObjects();return this._setActiveObject(t,e),this._fireSelectionEvents(i,e),this},_setActiveObject:function(t,e){return this._activeObject!==t&&(!!this._discardActiveObject(e,t)&&(!t.onSelect({e:e})&&(this._activeObject=t,!0)))},_discardActiveObject:function(t,e){var i=this._activeObject;if(i){if(i.onDeselect({e:t,object:e}))return!1;this._activeObject=null}return!0},discardActiveObject:function(t){var e=this.getActiveObjects(),i=this.getActiveObject();return e.length&&this.fire("before:selection:cleared",{target:i,e:t}),this._discardActiveObject(t),this._fireSelectionEvents(e,t),this},dispose:function(){var t=this.wrapperEl,e=this.lowerCanvasEl,i=this.upperCanvasEl,r=this.cacheCanvasEl;return this.removeListeners(),this.callSuper("dispose"),t.removeChild(i),t.removeChild(e),this.contextCache=null,this.contextTop=null,fabric.util.cleanUpJsdomNode(i),this.upperCanvasEl=void 0,fabric.util.cleanUpJsdomNode(r),this.cacheCanvasEl=void 0,t.parentNode&&t.parentNode.replaceChild(e,t),delete this.wrapperEl,this},clear:function(){return this.discardActiveObject(),this.clearContext(this.contextTop),this.callSuper("clear")},drawControls:function(t){var e=this._activeObject;e&&e._renderControls(t)},_toObject:function(t,e,i){var r=this._realizeGroupTransformOnObject(t),n=this.callSuper("_toObject",t,e,i);return r&&t.set(r),n},_realizeGroupTransformOnObject:function(t){if(t.group&&"activeSelection"===t.group.type&&this._activeObject===t.group){var e={};return["angle","flipX","flipY","left","scaleX","scaleY","skewX","skewY","top"].forEach((function(i){e[i]=t[i]})),fabric.util.addTransformToObject(t,this._activeObject.calcOwnMatrix()),e}return null},_setSVGObject:function(t,e,i){var r=this._realizeGroupTransformOnObject(e);this.callSuper("_setSVGObject",t,e,i),r&&e.set(r)},setViewportTransform:function(t){this.renderOnAddRemove&&this._activeObject&&this._activeObject.isEditing&&this._activeObject.clearContextTop(),fabric.StaticCanvas.prototype.setViewportTransform.call(this,t)}}),fabric.StaticCanvas)"prototype"!==n&&(fabric.Canvas[n]=fabric.StaticCanvas[n])}(void 0!==t||window),function(t){var e=t.fabric,i=e.util.addListener,r=e.util.removeListener,n={passive:!1};function s(t,e){return t.button&&t.button===e-1}e.util.object.extend(e.Canvas.prototype,{mainTouchId:null,_initEventListeners:function(){this.removeListeners(),this._bindEvents(),this.addOrRemove(i,"add")},_getEventPrefix:function(){return this.enablePointerEvents?"pointer":"mouse"},addOrRemove:function(t,i){var r=this.upperCanvasEl,s=this._getEventPrefix();t(e.window,"resize",this._onResize),t(r,s+"down",this._onMouseDown),t(r,s+"move",this._onMouseMove,n),t(r,s+"out",this._onMouseOut),t(r,s+"enter",this._onMouseEnter),t(r,"wheel",this._onMouseWheel),t(r,"contextmenu",this._onContextMenu),t(r,"dblclick",this._onDoubleClick),t(r,"dragover",this._onDragOver),t(r,"dragenter",this._onDragEnter),t(r,"dragleave",this._onDragLeave),t(r,"drop",this._onDrop),this.enablePointerEvents||t(r,"touchstart",this._onTouchStart,n),"undefined"!=typeof eventjs&&i in eventjs&&(eventjs[i](r,"gesture",this._onGesture),eventjs[i](r,"drag",this._onDrag),eventjs[i](r,"orientation",this._onOrientationChange),eventjs[i](r,"shake",this._onShake),eventjs[i](r,"longpress",this._onLongPress))},removeListeners:function(){this.addOrRemove(r,"remove");var t=this._getEventPrefix();r(e.document,t+"up",this._onMouseUp),r(e.document,"touchend",this._onTouchEnd,n),r(e.document,t+"move",this._onMouseMove,n),r(e.document,"touchmove",this._onMouseMove,n)},_bindEvents:function(){this.eventsBound||(this._onMouseDown=this._onMouseDown.bind(this),this._onTouchStart=this._onTouchStart.bind(this),this._onMouseMove=this._onMouseMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._onResize=this._onResize.bind(this),this._onGesture=this._onGesture.bind(this),this._onDrag=this._onDrag.bind(this),this._onShake=this._onShake.bind(this),this._onLongPress=this._onLongPress.bind(this),this._onOrientationChange=this._onOrientationChange.bind(this),this._onMouseWheel=this._onMouseWheel.bind(this),this._onMouseOut=this._onMouseOut.bind(this),this._onMouseEnter=this._onMouseEnter.bind(this),this._onContextMenu=this._onContextMenu.bind(this),this._onDoubleClick=this._onDoubleClick.bind(this),this._onDragOver=this._onDragOver.bind(this),this._onDragEnter=this._simpleEventHandler.bind(this,"dragenter"),this._onDragLeave=this._simpleEventHandler.bind(this,"dragleave"),this._onDrop=this._onDrop.bind(this),this.eventsBound=!0)},_onGesture:function(t,e){this.__onTransformGesture&&this.__onTransformGesture(t,e)},_onDrag:function(t,e){this.__onDrag&&this.__onDrag(t,e)},_onMouseWheel:function(t){this.__onMouseWheel(t)},_onMouseOut:function(t){var e=this._hoveredTarget;this.fire("mouse:out",{target:e,e:t}),this._hoveredTarget=null,e&&e.fire("mouseout",{e:t});var i=this;this._hoveredTargets.forEach((function(r){i.fire("mouse:out",{target:e,e:t}),r&&e.fire("mouseout",{e:t})})),this._hoveredTargets=[],this._iTextInstances&&this._iTextInstances.forEach((function(t){t.isEditing&&t.hiddenTextarea.focus()}))},_onMouseEnter:function(t){this._currentTransform||this.findTarget(t)||(this.fire("mouse:over",{target:null,e:t}),this._hoveredTarget=null,this._hoveredTargets=[])},_onOrientationChange:function(t,e){this.__onOrientationChange&&this.__onOrientationChange(t,e)},_onShake:function(t,e){this.__onShake&&this.__onShake(t,e)},_onLongPress:function(t,e){this.__onLongPress&&this.__onLongPress(t,e)},_onDragOver:function(t){t.preventDefault();var e=this._simpleEventHandler("dragover",t);this._fireEnterLeaveEvents(e,t)},_onDrop:function(t){return this._simpleEventHandler("drop:before",t),this._simpleEventHandler("drop",t)},_onContextMenu:function(t){return this._simpleEventHandler("contextmenu:before",t),this.stopContextMenu&&(t.stopPropagation(),t.preventDefault()),this._simpleEventHandler("contextmenu",t),!1},_onDoubleClick:function(t){this._cacheTransformEventData(t),this._handleEvent(t,"dblclick"),this._resetTransformEventData(t)},getPointerId:function(t){var e=t.changedTouches;return e?e[0]&&e[0].identifier:this.enablePointerEvents?t.pointerId:-1},_isMainEvent:function(t){return!0===t.isPrimary||!1!==t.isPrimary&&("touchend"===t.type&&0===t.touches.length||(!t.changedTouches||t.changedTouches[0].identifier===this.mainTouchId))},_onTouchStart:function(t){t.preventDefault(),null===this.mainTouchId&&(this.mainTouchId=this.getPointerId(t)),this.__onMouseDown(t),this._resetTransformEventData();var s=this.upperCanvasEl,o=this._getEventPrefix();i(e.document,"touchend",this._onTouchEnd,n),i(e.document,"touchmove",this._onMouseMove,n),r(s,o+"down",this._onMouseDown)},_onMouseDown:function(t){this.__onMouseDown(t),this._resetTransformEventData();var s=this.upperCanvasEl,o=this._getEventPrefix();r(s,o+"move",this._onMouseMove,n),i(e.document,o+"up",this._onMouseUp),i(e.document,o+"move",this._onMouseMove,n)},_onTouchEnd:function(t){if(!(t.touches.length>0)){this.__onMouseUp(t),this._resetTransformEventData(),this.mainTouchId=null;var s=this._getEventPrefix();r(e.document,"touchend",this._onTouchEnd,n),r(e.document,"touchmove",this._onMouseMove,n);var o=this;this._willAddMouseDown&&clearTimeout(this._willAddMouseDown),this._willAddMouseDown=setTimeout((function(){i(o.upperCanvasEl,s+"down",o._onMouseDown),o._willAddMouseDown=0}),400)}},_onMouseUp:function(t){this.__onMouseUp(t),this._resetTransformEventData();var s=this.upperCanvasEl,o=this._getEventPrefix();this._isMainEvent(t)&&(r(e.document,o+"up",this._onMouseUp),r(e.document,o+"move",this._onMouseMove,n),i(s,o+"move",this._onMouseMove,n))},_onMouseMove:function(t){!this.allowTouchScrolling&&t.preventDefault&&t.preventDefault(),this.__onMouseMove(t)},_onResize:function(){this.calcOffset()},_shouldRender:function(t){var e=this._activeObject;return!!(!!e!=!!t||e&&t&&e!==t)||(e&&e.isEditing,!1)},__onMouseUp:function(t){var i,r=this._currentTransform,n=this._groupSelector,o=!1,a=!n||0===n.left&&0===n.top;if(this._cacheTransformEventData(t),i=this._target,this._handleEvent(t,"up:before"),s(t,3))this.fireRightClick&&this._handleEvent(t,"up",3,a);else{if(s(t,2))return this.fireMiddleClick&&this._handleEvent(t,"up",2,a),void this._resetTransformEventData();if(this.isDrawingMode&&this._isCurrentlyDrawing)this._onMouseUpInDrawingMode(t);else if(this._isMainEvent(t)){if(r&&(this._finalizeCurrentTransform(t),o=r.actionPerformed),!a){var h=i===this._activeObject;this._maybeGroupObjects(t),o||(o=this._shouldRender(i)||!h&&i===this._activeObject)}var c,l;if(i){if(c=i._findTargetCorner(this.getPointer(t,!0),e.util.isTouchEvent(t)),i.selectable&&i!==this._activeObject&&"up"===i.activeOn)this.setActiveObject(i,t),o=!0;else{var u=i.controls[c],f=u&&u.getMouseUpHandler(t,i,u);f&&f(t,r,(l=this.getPointer(t)).x,l.y)}i.isMoving=!1}if(r&&(r.target!==i||r.corner!==c)){var d=r.target&&r.target.controls[r.corner],g=d&&d.getMouseUpHandler(t,i,u);l=l||this.getPointer(t),g&&g(t,r,l.x,l.y)}this._setCursorFromEvent(t,i),this._handleEvent(t,"up",1,a),this._groupSelector=null,this._currentTransform=null,i&&(i.__corner=0),o?this.requestRenderAll():a||this.renderTop()}}},_simpleEventHandler:function(t,e){var i=this.findTarget(e),r=this.targets,n={e:e,target:i,subTargets:r};if(this.fire(t,n),i&&i.fire(t,n),!r)return i;for(var s=0;s1&&(e=new fabric.ActiveSelection(i.reverse(),{canvas:this}),this.setActiveObject(e,t))},_collectObjects:function(t){for(var e,i=[],r=this._groupSelector.ex,n=this._groupSelector.ey,s=r+this._groupSelector.left,o=n+this._groupSelector.top,a=new fabric.Point(l(r,s),l(n,o)),h=new fabric.Point(u(r,s),u(n,o)),c=!this.selectionFullyContained,f=r===s&&n===o,d=this._objects.length;d--&&!((e=this._objects[d])&&e.selectable&&e.visible&&(c&&e.intersectsWithRect(a,h,!0)||e.isContainedWithinRect(a,h,!0)||c&&e.containsPoint(a,null,!0)||c&&e.containsPoint(h,null,!0))&&(i.push(e),f)););return i.length>1&&(i=i.filter((function(e){return!e.onSelect({e:t})}))),i},_maybeGroupObjects:function(t){this.selection&&this._groupSelector&&this._groupSelectedObjects(t),this.setCursor(this.defaultCursor),this._groupSelector=null}}),void 0!==t||window,fabric.util.object.extend(fabric.StaticCanvas.prototype,{toDataURL:function(t){t||(t={});var e=t.format||"png",i=t.quality||1,r=(t.multiplier||1)*(t.enableRetinaScaling?this.getRetinaScaling():1),n=this.toCanvasElement(r,t);return fabric.util.toDataURL(n,e,i)},toCanvasElement:function(t,e){t=t||1;var i=((e=e||{}).width||this.width)*t,r=(e.height||this.height)*t,n=this.getZoom(),s=this.width,o=this.height,a=n*t,h=this.viewportTransform,c=(h[4]-(e.left||0))*t,l=(h[5]-(e.top||0))*t,u=this.interactive,f=[a,0,0,a,c,l],d=this.enableRetinaScaling,g=fabric.util.createCanvasElement(),p=this.contextTop,v=e.filter?this._objects.filter(e.filter):this._objects;return g.width=i,g.height=r,this.contextTop=null,this.enableRetinaScaling=!1,this.interactive=!1,this.viewportTransform=f,this.width=i,this.height=r,this.calcViewportBoundaries(),this.renderCanvas(g.getContext("2d"),v),this.viewportTransform=h,this.width=s,this.height=o,this.calcViewportBoundaries(),this.interactive=u,this.enableRetinaScaling=d,this.contextTop=p,g}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{loadFromJSON:function(t,e){if(t){var i="string"==typeof t?JSON.parse(t):Object.assign({},t),r=this,n=this.renderOnAddRemove;return this.renderOnAddRemove=!1,fabric.util.enlivenObjects(i.objects||[],"",e).then((function(t){return r.clear(),fabric.util.enlivenObjectEnlivables({backgroundImage:i.backgroundImage,backgroundColor:i.background,overlayImage:i.overlayImage,overlayColor:i.overlay,clipPath:i.clipPath}).then((function(e){return r.__setupCanvas(i,t,n),r.set(e),r}))}))}},__setupCanvas:function(t,e,i){var r=this;e.forEach((function(t,e){r.insertAt(t,e)})),this.renderOnAddRemove=i,delete t.objects,delete t.backgroundImage,delete t.overlayImage,delete t.background,delete t.overlay,this._setOptions(t)},clone:function(t){var e=JSON.stringify(this.toJSON(t));return this.cloneWithoutData().then((function(t){return t.loadFromJSON(e)}))},cloneWithoutData:function(){var t=fabric.util.createCanvasElement();t.width=this.width,t.height=this.height;var e=new fabric.Canvas(t),i={};return this.backgroundImage&&(i.backgroundImage=this.backgroundImage.toObject()),this.backgroundColor&&(i.background=this.backgroundColor.toObject?this.backgroundColor.toObject():this.backgroundColor),e.loadFromJSON(i)}}),void 0!==t||window,f=fabric.util.degreesToRadians,d=fabric.util.radiansToDegrees,fabric.util.object.extend(fabric.Canvas.prototype,{__onTransformGesture:function(t,e){if(!this.isDrawingMode&&t.touches&&2===t.touches.length&&"gesture"===e.gesture){var i=this.findTarget(t);void 0!==i&&(this.__gesturesParams={e:t,self:e,target:i},this.__gesturesRenderer()),this.fire("touch:gesture",{target:i,e:t,self:e})}},__gesturesParams:null,__gesturesRenderer:function(){if(null!==this.__gesturesParams&&null!==this._currentTransform){var t=this.__gesturesParams.self,e=this._currentTransform,i=this.__gesturesParams.e;e.action="scale",e.originX=e.originY="center",this._scaleObjectBy(t.scale,i),0!==t.rotation&&(e.action="rotate",this._rotateObjectByAngle(t.rotation,i)),this.requestRenderAll(),e.action="drag"}},__onDrag:function(t,e){this.fire("touch:drag",{e:t,self:e})},__onOrientationChange:function(t,e){this.fire("touch:orientation",{e:t,self:e})},__onShake:function(t,e){this.fire("touch:shake",{e:t,self:e})},__onLongPress:function(t,e){this.fire("touch:longpress",{e:t,self:e})},_scaleObjectBy:function(t,e){var i=this._currentTransform,r=i.target;return i.gestureScale=t,r._scaling=!0,fabric.controlsUtils.scalingEqually(e,i,0,0)},_rotateObjectByAngle:function(t,e){var i=this._currentTransform;i.target.get("lockRotation")||(i.target.rotate(d(f(t)+i.theta)),this._fire("rotating",{target:i.target,e:e,transform:i}))}}),function(t){var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.object.clone,n=e.util.toFixed,s=e.util.string.capitalize,o=e.util.degreesToRadians,a=!e.isLikelyNode;e.Object||(e.Object=e.util.createClass(e.CommonMethods,{type:"object",originX:"left",originY:"top",top:0,left:0,width:0,height:0,scaleX:1,scaleY:1,flipX:!1,flipY:!1,opacity:1,angle:0,skewX:0,skewY:0,cornerSize:13,touchCornerSize:24,transparentCorners:!0,hoverCursor:null,moveCursor:null,padding:0,borderColor:"rgb(178,204,255)",borderDashArray:null,cornerColor:"rgb(178,204,255)",cornerStrokeColor:null,cornerStyle:"rect",cornerDashArray:null,centeredScaling:!1,centeredRotation:!0,fill:"rgb(0,0,0)",fillRule:"nonzero",globalCompositeOperation:"source-over",backgroundColor:"",selectionBackgroundColor:"",stroke:null,strokeWidth:1,strokeDashArray:null,strokeDashOffset:0,strokeLineCap:"butt",strokeLineJoin:"miter",strokeMiterLimit:4,shadow:null,borderOpacityWhenMoving:.4,borderScaleFactor:1,minScaleLimit:0,selectable:!0,evented:!0,visible:!0,hasControls:!0,hasBorders:!0,perPixelTargetFind:!1,includeDefaultValues:!0,lockMovementX:!1,lockMovementY:!1,lockRotation:!1,lockScalingX:!1,lockScalingY:!1,lockSkewingX:!1,lockSkewingY:!1,lockScalingFlip:!1,excludeFromExport:!1,objectCaching:a,statefullCache:!1,noScaleCache:!0,strokeUniform:!1,dirty:!0,__corner:0,paintFirst:"fill",activeOn:"down",stateProperties:"top left width height scaleX scaleY flipX flipY originX originY transformMatrix stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit angle opacity fill globalCompositeOperation shadow visible backgroundColor skewX skewY fillRule paintFirst clipPath strokeUniform".split(" "),cacheProperties:"fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath".split(" "),colorProperties:"fill stroke backgroundColor".split(" "),clipPath:void 0,inverted:!1,absolutePositioned:!1,initialize:function(t){t&&this.setOptions(t)},_createCacheCanvas:function(){this._cacheProperties={},this._cacheCanvas=e.util.createCanvasElement(),this._cacheContext=this._cacheCanvas.getContext("2d"),this._updateCacheCanvas(),this.dirty=!0},_limitCacheSize:function(t){var i=e.perfLimitSizeTotal,r=t.width,n=t.height,s=e.maxCacheSideLimit,o=e.minCacheSideLimit;if(r<=s&&n<=s&&r*n<=i)return rl&&(t.zoomX/=r/l,t.width=l,t.capped=!0),n>u&&(t.zoomY/=n/u,t.height=u,t.capped=!0),t},_getCacheCanvasDimensions:function(){var t=this.getTotalObjectScaling(),e=this._getTransformedDimensions({skewX:0,skewY:0}),i=e.x*t.x/this.scaleX,r=e.y*t.y/this.scaleY;return{width:i+2,height:r+2,zoomX:t.x,zoomY:t.y,x:i,y:r}},_updateCacheCanvas:function(){var t=this.canvas;if(this.noScaleCache&&t&&t._currentTransform){var i=t._currentTransform.target,r=t._currentTransform.action;if(this===i&&r.slice&&"scale"===r.slice(0,5))return!1}var n,s,o=this._cacheCanvas,a=this._limitCacheSize(this._getCacheCanvasDimensions()),h=e.minCacheSideLimit,c=a.width,l=a.height,u=a.zoomX,f=a.zoomY,d=c!==this.cacheWidth||l!==this.cacheHeight,g=this.zoomX!==u||this.zoomY!==f,p=d||g,v=0,m=0,b=!1;if(d){var y=this._cacheCanvas.width,_=this._cacheCanvas.height,x=c>y||l>_;b=x||(c<.9*y||l<.9*_)&&y>h&&_>h,x&&!a.capped&&(c>h||l>h)&&(v=.1*c,m=.1*l)}return this instanceof e.Text&&this.path&&(p=!0,b=!0,v+=this.getHeightOfLine(0)*this.zoomX,m+=this.getHeightOfLine(0)*this.zoomY),!!p&&(b?(o.width=Math.ceil(c+v),o.height=Math.ceil(l+m)):(this._cacheContext.setTransform(1,0,0,1,0,0),this._cacheContext.clearRect(0,0,o.width,o.height)),n=a.x/2,s=a.y/2,this.cacheTranslationX=Math.round(o.width/2-n)+n,this.cacheTranslationY=Math.round(o.height/2-s)+s,this.cacheWidth=c,this.cacheHeight=l,this._cacheContext.translate(this.cacheTranslationX,this.cacheTranslationY),this._cacheContext.scale(u,f),this.zoomX=u,this.zoomY=f,!0)},setOptions:function(t){this._setOptions(t)},transform:function(t){var e=this.group&&!this.group._transformDone||this.group&&this.canvas&&t===this.canvas.contextTop,i=this.calcTransformMatrix(!e);t.transform(i[0],i[1],i[2],i[3],i[4],i[5])},toObject:function(t){var i=e.Object.NUM_FRACTION_DIGITS,r={type:this.type,version:e.version,originX:this.originX,originY:this.originY,left:n(this.left,i),top:n(this.top,i),width:n(this.width,i),height:n(this.height,i),fill:this.fill&&this.fill.toObject?this.fill.toObject():this.fill,stroke:this.stroke&&this.stroke.toObject?this.stroke.toObject():this.stroke,strokeWidth:n(this.strokeWidth,i),strokeDashArray:this.strokeDashArray?this.strokeDashArray.concat():this.strokeDashArray,strokeLineCap:this.strokeLineCap,strokeDashOffset:this.strokeDashOffset,strokeLineJoin:this.strokeLineJoin,strokeUniform:this.strokeUniform,strokeMiterLimit:n(this.strokeMiterLimit,i),scaleX:n(this.scaleX,i),scaleY:n(this.scaleY,i),angle:n(this.angle,i),flipX:this.flipX,flipY:this.flipY,opacity:n(this.opacity,i),shadow:this.shadow&&this.shadow.toObject?this.shadow.toObject():this.shadow,visible:this.visible,backgroundColor:this.backgroundColor,fillRule:this.fillRule,paintFirst:this.paintFirst,globalCompositeOperation:this.globalCompositeOperation,skewX:n(this.skewX,i),skewY:n(this.skewY,i)};return this.clipPath&&!this.clipPath.excludeFromExport&&(r.clipPath=this.clipPath.toObject(t),r.clipPath.inverted=this.clipPath.inverted,r.clipPath.absolutePositioned=this.clipPath.absolutePositioned),e.util.populateWithProperties(this,r,t),this.includeDefaultValues||(r=this._removeDefaultValues(r)),r},toDatalessObject:function(t){return this.toObject(t)},_removeDefaultValues:function(t){var i=e.util.getKlass(t.type).prototype;return Object.keys(t).forEach((function(e){"left"!==e&&"top"!==e&&"type"!==e&&(t[e]===i[e]&&delete t[e],Array.isArray(t[e])&&Array.isArray(i[e])&&0===t[e].length&&0===i[e].length&&delete t[e])})),t},toString:function(){return"#"},getObjectScaling:function(){if(!this.group)return new e.Point(Math.abs(this.scaleX),Math.abs(this.scaleY));var t=e.util.qrDecompose(this.calcTransformMatrix());return new e.Point(Math.abs(t.scaleX),Math.abs(t.scaleY))},getTotalObjectScaling:function(){var t=this.getObjectScaling();if(this.canvas){var e=this.canvas.getZoom(),i=this.canvas.getRetinaScaling();t.scalarMultiplyEquals(e*i)}return t},getObjectOpacity:function(){var t=this.opacity;return this.group&&(t*=this.group.getObjectOpacity()),t},getTotalAngle:function(){return this.group?e.util.qrDecompose(this.calcTransformMatrix()).angle:this.angle},_set:function(t,i){var r="scaleX"===t||"scaleY"===t,n=this[t]!==i,s=!1;return r&&(i=this._constrainScale(i)),"scaleX"===t&&i<0?(this.flipX=!this.flipX,i*=-1):"scaleY"===t&&i<0?(this.flipY=!this.flipY,i*=-1):"shadow"!==t||!i||i instanceof e.Shadow?"dirty"===t&&this.group&&this.group.set("dirty",i):i=new e.Shadow(i),this[t]=i,n&&(s=this.group&&this.group.isOnACache(),this.cacheProperties.indexOf(t)>-1?(this.dirty=!0,s&&this.group.set("dirty",!0)):s&&this.stateProperties.indexOf(t)>-1&&this.group.set("dirty",!0)),this},getViewportTransform:function(){return this.canvas&&this.canvas.viewportTransform?this.canvas.viewportTransform:e.iMatrix.concat()},isNotVisible:function(){return 0===this.opacity||!this.width&&!this.height&&0===this.strokeWidth||!this.visible},render:function(t){this.isNotVisible()||this.canvas&&this.canvas.skipOffscreen&&!this.group&&!this.isOnScreen()||(t.save(),this._setupCompositeOperation(t),this.drawSelectionBackground(t),this.transform(t),this._setOpacity(t),this._setShadow(t,this),this.shouldCache()?(this.renderCache(),this.drawCacheOnCanvas(t)):(this._removeCacheCanvas(),this.dirty=!1,this.drawObject(t),this.objectCaching&&this.statefullCache&&this.saveState({propertySet:"cacheProperties"})),t.restore())},renderCache:function(t){t=t||{},this._cacheCanvas&&this._cacheContext||this._createCacheCanvas(),this.isCacheDirty()&&(this.statefullCache&&this.saveState({propertySet:"cacheProperties"}),this.drawObject(this._cacheContext,t.forClipping),this.dirty=!1)},_removeCacheCanvas:function(){this._cacheCanvas=null,this._cacheContext=null,this.cacheWidth=0,this.cacheHeight=0},hasStroke:function(){return this.stroke&&"transparent"!==this.stroke&&0!==this.strokeWidth},hasFill:function(){return this.fill&&"transparent"!==this.fill},needsItsOwnCache:function(){return!("stroke"!==this.paintFirst||!this.hasFill()||!this.hasStroke()||"object"!=typeof this.shadow)||!!this.clipPath},shouldCache:function(){return this.ownCaching=this.needsItsOwnCache()||this.objectCaching&&(!this.group||!this.group.isOnACache()),this.ownCaching},willDrawShadow:function(){return!!this.shadow&&(0!==this.shadow.offsetX||0!==this.shadow.offsetY)},drawClipPathOnCache:function(t,i){if(t.save(),i.inverted?t.globalCompositeOperation="destination-out":t.globalCompositeOperation="destination-in",i.absolutePositioned){var r=e.util.invertTransform(this.calcTransformMatrix());t.transform(r[0],r[1],r[2],r[3],r[4],r[5])}i.transform(t),t.scale(1/i.zoomX,1/i.zoomY),t.drawImage(i._cacheCanvas,-i.cacheTranslationX,-i.cacheTranslationY),t.restore()},drawObject:function(t,e){var i=this.fill,r=this.stroke;e?(this.fill="black",this.stroke="",this._setClippingProperties(t)):this._renderBackground(t),this._render(t),this._drawClipPath(t,this.clipPath),this.fill=i,this.stroke=r},_drawClipPath:function(t,e){e&&(e._set("canvas",this.canvas),e.shouldCache(),e._transformDone=!0,e.renderCache({forClipping:!0}),this.drawClipPathOnCache(t,e))},drawCacheOnCanvas:function(t){t.scale(1/this.zoomX,1/this.zoomY),t.drawImage(this._cacheCanvas,-this.cacheTranslationX,-this.cacheTranslationY)},isCacheDirty:function(t){if(this.isNotVisible())return!1;if(this._cacheCanvas&&this._cacheContext&&!t&&this._updateCacheCanvas())return!0;if(this.dirty||this.clipPath&&this.clipPath.absolutePositioned||this.statefullCache&&this.hasStateChanged("cacheProperties")){if(this._cacheCanvas&&this._cacheContext&&!t){var e=this.cacheWidth/this.zoomX,i=this.cacheHeight/this.zoomY;this._cacheContext.clearRect(-e/2,-i/2,e,i)}return!0}return!1},_renderBackground:function(t){if(this.backgroundColor){var e=this._getNonTransformedDimensions();t.fillStyle=this.backgroundColor,t.fillRect(-e.x/2,-e.y/2,e.x,e.y),this._removeShadow(t)}},_setOpacity:function(t){this.group&&!this.group._transformDone?t.globalAlpha=this.getObjectOpacity():t.globalAlpha*=this.opacity},_setStrokeStyles:function(t,e){var i=e.stroke;i&&(t.lineWidth=e.strokeWidth,t.lineCap=e.strokeLineCap,t.lineDashOffset=e.strokeDashOffset,t.lineJoin=e.strokeLineJoin,t.miterLimit=e.strokeMiterLimit,i.toLive?"percentage"===i.gradientUnits||i.gradientTransform||i.patternTransform?this._applyPatternForTransformedGradient(t,i):(t.strokeStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,i)):t.strokeStyle=e.stroke)},_setFillStyles:function(t,e){var i=e.fill;i&&(i.toLive?(t.fillStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,e.fill)):t.fillStyle=i)},_setClippingProperties:function(t){t.globalAlpha=1,t.strokeStyle="transparent",t.fillStyle="#000000"},_setLineDash:function(t,e){e&&0!==e.length&&(1&e.length&&e.push.apply(e,e),t.setLineDash(e))},_renderControls:function(t,i){var r,n,s,a=this.getViewportTransform(),h=this.calcTransformMatrix();n=void 0!==(i=i||{}).hasBorders?i.hasBorders:this.hasBorders,s=void 0!==i.hasControls?i.hasControls:this.hasControls,h=e.util.multiplyTransformMatrices(a,h),r=e.util.qrDecompose(h),t.save(),t.translate(r.translateX,r.translateY),t.lineWidth=1*this.borderScaleFactor,this.group||(t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1),this.flipX&&(r.angle-=180),t.rotate(o(this.group?r.angle:this.angle)),n&&this.drawBorders(t,r,i),s&&this.drawControls(t,i),t.restore()},_setShadow:function(t){if(this.shadow){var i=this.shadow,r=this.canvas,n=r&&r.viewportTransform[0]||1,s=r&&r.viewportTransform[3]||1,o=i.nonScaling?new e.Point(1,1):this.getObjectScaling();r&&r._isRetinaScaling()&&(n*=e.devicePixelRatio,s*=e.devicePixelRatio),t.shadowColor=i.color,t.shadowBlur=i.blur*e.browserShadowBlurConstant*(n+s)*(o.x+o.y)/4,t.shadowOffsetX=i.offsetX*n*o.x,t.shadowOffsetY=i.offsetY*s*o.y}},_removeShadow:function(t){this.shadow&&(t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0)},_applyPatternGradientTransform:function(t,e){if(!e||!e.toLive)return{offsetX:0,offsetY:0};var i=e.gradientTransform||e.patternTransform,r=-this.width/2+e.offsetX||0,n=-this.height/2+e.offsetY||0;return"percentage"===e.gradientUnits?t.transform(this.width,0,0,this.height,r,n):t.transform(1,0,0,1,r,n),i&&t.transform(i[0],i[1],i[2],i[3],i[4],i[5]),{offsetX:r,offsetY:n}},_renderPaintInOrder:function(t){"stroke"===this.paintFirst?(this._renderStroke(t),this._renderFill(t)):(this._renderFill(t),this._renderStroke(t))},_render:function(){},_renderFill:function(t){this.fill&&(t.save(),this._setFillStyles(t,this),"evenodd"===this.fillRule?t.fill("evenodd"):t.fill(),t.restore())},_renderStroke:function(t){if(this.stroke&&0!==this.strokeWidth){if(this.shadow&&!this.shadow.affectStroke&&this._removeShadow(t),t.save(),this.strokeUniform){var e=this.getObjectScaling();t.scale(1/e.x,1/e.y)}this._setLineDash(t,this.strokeDashArray),this._setStrokeStyles(t,this),t.stroke(),t.restore()}},_applyPatternForTransformedGradient:function(t,i){var r,n=this._limitCacheSize(this._getCacheCanvasDimensions()),s=e.util.createCanvasElement(),o=this.canvas.getRetinaScaling(),a=n.x/this.scaleX/o,h=n.y/this.scaleY/o;s.width=a,s.height=h,(r=s.getContext("2d")).beginPath(),r.moveTo(0,0),r.lineTo(a,0),r.lineTo(a,h),r.lineTo(0,h),r.closePath(),r.translate(a/2,h/2),r.scale(n.zoomX/this.scaleX/o,n.zoomY/this.scaleY/o),this._applyPatternGradientTransform(r,i),r.fillStyle=i.toLive(t),r.fill(),t.translate(-this.width/2-this.strokeWidth/2,-this.height/2-this.strokeWidth/2),t.scale(o*this.scaleX/n.zoomX,o*this.scaleY/n.zoomY),t.strokeStyle=r.createPattern(s,"no-repeat")},_findCenterFromElement:function(){return{x:this.left+this.width/2,y:this.top+this.height/2}},_assignTransformMatrixProps:function(){if(this.transformMatrix){var t=e.util.qrDecompose(this.transformMatrix);this.flipX=!1,this.flipY=!1,this.set("scaleX",t.scaleX),this.set("scaleY",t.scaleY),this.angle=t.angle,this.skewX=t.skewX,this.skewY=0}},_removeTransformMatrix:function(t){var i=this._findCenterFromElement();this.transformMatrix&&(this._assignTransformMatrixProps(),i=e.util.transformPoint(i,this.transformMatrix)),this.transformMatrix=null,t&&(this.scaleX*=t.scaleX,this.scaleY*=t.scaleY,this.cropX=t.cropX,this.cropY=t.cropY,i.x+=t.offsetLeft,i.y+=t.offsetTop,this.width=t.width,this.height=t.height),this.setPositionByOrigin(i,"center","center")},clone:function(t){var e=this.toObject(t);return this.constructor.fromObject(e)},cloneAsImage:function(t){var i=this.toCanvasElement(t);return new e.Image(i)},toCanvasElement:function(t){t||(t={});var i=e.util,r=i.saveObjectTransform(this),n=this.group,s=this.shadow,o=Math.abs,a=t.enableRetinaScaling?Math.max(e.devicePixelRatio,1):1,h=(t.multiplier||1)*a;delete this.group,t.withoutTransform&&i.resetObjectTransform(this),t.withoutShadow&&(this.shadow=null);var c,l,u=e.util.createCanvasElement(),f=this.getBoundingRect(!0,!0),d=this.shadow,g={x:0,y:0};if(d){var p=d.blur,v=d.nonScaling?new e.Point(1,1):this.getObjectScaling();g.x=2*Math.round(o(d.offsetX)+p)*o(v.x),g.y=2*Math.round(o(d.offsetY)+p)*o(v.y)}c=f.width+g.x,l=f.height+g.y,u.width=Math.ceil(c),u.height=Math.ceil(l);var m=new e.StaticCanvas(u,{enableRetinaScaling:!1,renderOnAddRemove:!1,skipOffscreen:!1});"jpeg"===t.format&&(m.backgroundColor="#fff"),this.setPositionByOrigin(new e.Point(m.width/2,m.height/2),"center","center");var b=this.canvas;m._objects=[this],this.set("canvas",m),this.setCoords();var y=m.toCanvasElement(h||1,t);return this.set("canvas",b),this.shadow=s,n&&(this.group=n),this.set(r),this.setCoords(),m._objects=[],m.dispose(),m=null,y},toDataURL:function(t){return t||(t={}),e.util.toDataURL(this.toCanvasElement(t),t.format||"png",t.quality||1)},isType:function(t){return arguments.length>1?Array.from(arguments).includes(this.type):this.type===t},complexity:function(){return 1},toJSON:function(t){return this.toObject(t)},rotate:function(t){var e=("center"!==this.originX||"center"!==this.originY)&&this.centeredRotation;return e&&this._setOriginToCenter(),this.set("angle",t),e&&this._resetOrigin(),this},centerH:function(){return this.canvas&&this.canvas.centerObjectH(this),this},viewportCenterH:function(){return this.canvas&&this.canvas.viewportCenterObjectH(this),this},centerV:function(){return this.canvas&&this.canvas.centerObjectV(this),this},viewportCenterV:function(){return this.canvas&&this.canvas.viewportCenterObjectV(this),this},center:function(){return this.canvas&&this.canvas.centerObject(this),this},viewportCenter:function(){return this.canvas&&this.canvas.viewportCenterObject(this),this},setOnGroup:function(){},_setupCompositeOperation:function(t){this.globalCompositeOperation&&(t.globalCompositeOperation=this.globalCompositeOperation)},dispose:function(){e.runningAnimations&&e.runningAnimations.cancelByTarget(this)}}),e.util.createAccessors&&e.util.createAccessors(e.Object),i(e.Object.prototype,e.Observable),e.Object.NUM_FRACTION_DIGITS=2,e.Object._fromObject=function(t,i,n){var s=r(i,!0);return e.util.enlivenObjectEnlivables(s).then((function(e){var r=Object.assign(i,e);return n?new t(i[n],r):new t(r)}))},e.Object.fromObject=function(t){return e.Object._fromObject(e.Object,t)},e.Object.__uid=0)}(void 0!==t?t:window),function(t){var e=fabric.util.degreesToRadians,i={left:-.5,center:0,right:.5},r={top:-.5,center:0,bottom:.5};fabric.util.object.extend(fabric.Object.prototype,{resolveOriginX:function(t){return"string"==typeof t?i[t]:t-.5},resolveOriginY:function(t){return"string"==typeof t?r[t]:t-.5},translateToGivenOrigin:function(t,e,i,r,n){var s,o=t.x,a=t.y,h=this.resolveOriginX(r)-this.resolveOriginX(e),c=this.resolveOriginY(n)-this.resolveOriginY(i);return(h||c)&&(s=this._getTransformedDimensions(),o=t.x+h*s.x,a=t.y+c*s.y),new fabric.Point(o,a)},translateToCenterPoint:function(t,i,r){var n=this.translateToGivenOrigin(t,i,r,"center","center");return this.angle?fabric.util.rotatePoint(n,t,e(this.angle)):n},translateToOriginPoint:function(t,i,r){var n=this.translateToGivenOrigin(t,"center","center",i,r);return this.angle?fabric.util.rotatePoint(n,t,e(this.angle)):n},getCenterPoint:function(){var t=this.getRelativeCenterPoint();return this.group?fabric.util.transformPoint(t,this.group.calcTransformMatrix()):t},getCenterPointRelativeToParent:function(){return this.group?this.getRelativeCenterPoint():null},getRelativeCenterPoint:function(){return this.translateToCenterPoint(new fabric.Point(this.left,this.top),this.originX,this.originY)},getPointByOrigin:function(t,e){var i=this.getRelativeCenterPoint();return this.translateToOriginPoint(i,t,e)},normalizePoint:function(t,i,r){var n,s,o=this.getRelativeCenterPoint();return n=void 0!==i&&void 0!==r?this.translateToGivenOrigin(o,"center","center",i,r):new fabric.Point(this.left,this.top),s=new fabric.Point(t.x,t.y),this.angle&&(s=fabric.util.rotatePoint(s,o,-e(this.angle))),s.subtractEquals(n)},getLocalPointer:function(t,e){return e=e||this.canvas.getPointer(t),fabric.util.transformPoint(new fabric.Point(e.x,e.y),fabric.util.invertTransform(this.calcTransformMatrix())).addEquals(new fabric.Point(this.width/2,this.height/2))},setPositionByOrigin:function(t,e,i){var r=this.translateToCenterPoint(t,e,i),n=this.translateToOriginPoint(r,this.originX,this.originY);this.set("left",n.x),this.set("top",n.y)},adjustPosition:function(t){var r,n,s=e(this.angle),o=this.getScaledWidth(),a=fabric.util.cos(s)*o,h=fabric.util.sin(s)*o;r="string"==typeof this.originX?i[this.originX]:this.originX-.5,n="string"==typeof t?i[t]:t-.5,this.left+=a*(n-r),this.top+=h*(n-r),this.setCoords(),this.originX=t},_setOriginToCenter:function(){this._originalOriginX=this.originX,this._originalOriginY=this.originY;var t=this.getRelativeCenterPoint();this.originX="center",this.originY="center",this.left=t.x,this.top=t.y},_resetOrigin:function(){var t=this.translateToOriginPoint(this.getRelativeCenterPoint(),this._originalOriginX,this._originalOriginY);this.originX=this._originalOriginX,this.originY=this._originalOriginY,this.left=t.x,this.top=t.y,this._originalOriginX=null,this._originalOriginY=null},_getLeftTopCoords:function(){return this.translateToOriginPoint(this.getRelativeCenterPoint(),"left","top")}})}(void 0!==t||window),function(t){var e=fabric.util,i=e.degreesToRadians,r=e.multiplyTransformMatrices,n=e.transformPoint;e.object.extend(fabric.Object.prototype,{oCoords:null,aCoords:null,lineCoords:null,ownMatrixCache:null,matrixCache:null,controls:{},getX:function(){return this.getXY().x},setX:function(t){this.setXY(this.getXY().setX(t))},getRelativeX:function(){return this.left},setRelativeX:function(t){this.left=t},getY:function(){return this.getXY().y},setY:function(t){this.setXY(this.getXY().setY(t))},getRelativeY:function(){return this.top},setRelativeY:function(t){this.top=t},getXY:function(){var t=this.getRelativeXY();return this.group?fabric.util.transformPoint(t,this.group.calcTransformMatrix()):t},setXY:function(t,e,i){this.group&&(t=fabric.util.transformPoint(t,fabric.util.invertTransform(this.group.calcTransformMatrix()))),this.setRelativeXY(t,e,i)},getRelativeXY:function(){return new fabric.Point(this.left,this.top)},setRelativeXY:function(t,e,i){this.setPositionByOrigin(t,e||this.originX,i||this.originY)},_getCoords:function(t,e){return e?t?this.calcACoords():this.calcLineCoords():(this.aCoords&&this.lineCoords||this.setCoords(!0),t?this.aCoords:this.lineCoords)},getCoords:function(t,i){var r=function(t){return[new fabric.Point(t.tl.x,t.tl.y),new fabric.Point(t.tr.x,t.tr.y),new fabric.Point(t.br.x,t.br.y),new fabric.Point(t.bl.x,t.bl.y)]}(this._getCoords(t,i));if(this.group){var n=this.group.calcTransformMatrix();return r.map((function(t){return e.transformPoint(t,n)}))}return r},intersectsWithRect:function(t,e,i,r){var n=this.getCoords(i,r);return"Intersection"===fabric.Intersection.intersectPolygonRectangle(n,t,e).status},intersectsWithObject:function(t,e,i){return"Intersection"===fabric.Intersection.intersectPolygonPolygon(this.getCoords(e,i),t.getCoords(e,i)).status||t.isContainedWithinObject(this,e,i)||this.isContainedWithinObject(t,e,i)},isContainedWithinObject:function(t,e,i){for(var r=this.getCoords(e,i),n=e?t.aCoords:t.lineCoords,s=0,o=t._getImageLines(n);s<4;s++)if(!t.containsPoint(r[s],o))return!1;return!0},isContainedWithinRect:function(t,e,i,r){var n=this.getBoundingRect(i,r);return n.left>=t.x&&n.left+n.width<=e.x&&n.top>=t.y&&n.top+n.height<=e.y},containsPoint:function(t,e,i,r){var n=this._getCoords(i,r),s=(e=e||this._getImageLines(n),this._findCrossPoints(t,e));return 0!==s&&s%2==1},isOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.getCoords(!0,t).some((function(t){return t.x<=i.x&&t.x>=e.x&&t.y<=i.y&&t.y>=e.y}))||(!!this.intersectsWithRect(e,i,!0,t)||this._containsCenterOfCanvas(e,i,t))},_containsCenterOfCanvas:function(t,e,i){var r={x:(t.x+e.x)/2,y:(t.y+e.y)/2};return!!this.containsPoint(r,null,!0,i)},isPartiallyOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.intersectsWithRect(e,i,!0,t)||this.getCoords(!0,t).every((function(t){return(t.x>=i.x||t.x<=e.x)&&(t.y>=i.y||t.y<=e.y)}))&&this._containsCenterOfCanvas(e,i,t)},_getImageLines:function(t){return{topline:{o:t.tl,d:t.tr},rightline:{o:t.tr,d:t.br},bottomline:{o:t.br,d:t.bl},leftline:{o:t.bl,d:t.tl}}},_findCrossPoints:function(t,e){var i,r,n,s=0;for(var o in e)if(!((n=e[o]).o.y=t.y&&n.d.y>=t.y||(n.o.x===n.d.x&&n.o.x>=t.x?r=n.o.x:(0,i=(n.d.y-n.o.y)/(n.d.x-n.o.x),r=-(t.y-0*t.x-(n.o.y-i*n.o.x))/(0-i)),r>=t.x&&(s+=1),2!==s)))break;return s},getBoundingRect:function(t,i){var r=this.getCoords(t,i);return e.makeBoundingBoxFromPoints(r)},getScaledWidth:function(){return this._getTransformedDimensions().x},getScaledHeight:function(){return this._getTransformedDimensions().y},_constrainScale:function(t){return Math.abs(t)0&&this===r[r.length-1])return{fork:[],otherFork:[t].concat(r.slice(0,r.length-1)),common:[this]};for(var n,s=0;s-1&&s>o}}}}}),function(t){function e(t,e){if(e){if(e.toLive)return t+": url(#SVGID_"+e.id+"); ";var i=new fabric.Color(e),r=t+": "+i.toRgb()+"; ",n=i.getAlpha();return 1!==n&&(r+=t+"-opacity: "+n.toString()+"; "),r}return t+": none; "}var i=fabric.util.toFixed;fabric.util.object.extend(fabric.Object.prototype,{getSvgStyles:function(t){var i=this.fillRule?this.fillRule:"nonzero",r=this.strokeWidth?this.strokeWidth:"0",n=this.strokeDashArray?this.strokeDashArray.join(" "):"none",s=this.strokeDashOffset?this.strokeDashOffset:"0",o=this.strokeLineCap?this.strokeLineCap:"butt",a=this.strokeLineJoin?this.strokeLineJoin:"miter",h=this.strokeMiterLimit?this.strokeMiterLimit:"4",c=void 0!==this.opacity?this.opacity:"1",l=this.visible?"":" visibility: hidden;",u=t?"":this.getSvgFilter(),f=e("fill",this.fill);return[e("stroke",this.stroke),"stroke-width: ",r,"; ","stroke-dasharray: ",n,"; ","stroke-linecap: ",o,"; ","stroke-dashoffset: ",s,"; ","stroke-linejoin: ",a,"; ","stroke-miterlimit: ",h,"; ",f,"fill-rule: ",i,"; ","opacity: ",c,";",u,l].join("")},getSvgSpanStyles:function(t,i){var r="; ",n=t.fontFamily?"font-family: "+(-1===t.fontFamily.indexOf("'")&&-1===t.fontFamily.indexOf('"')?"'"+t.fontFamily+"'":t.fontFamily)+r:"",s=t.strokeWidth?"stroke-width: "+t.strokeWidth+r:"",o=(n=n,t.fontSize?"font-size: "+t.fontSize+"px"+r:""),a=t.fontStyle?"font-style: "+t.fontStyle+r:"",h=t.fontWeight?"font-weight: "+t.fontWeight+r:"",c=t.fill?e("fill",t.fill):"",l=t.stroke?e("stroke",t.stroke):"",u=this.getSvgTextDecoration(t);return u&&(u="text-decoration: "+u+r),[l,s,n,o,a,h,u,c,t.deltaY?"baseline-shift: "+-t.deltaY+"; ":"",i?"white-space: pre; ":""].join("")},getSvgTextDecoration:function(t){return["overline","underline","line-through"].filter((function(e){return t[e.replace("-","")]})).join(" ")},getSvgFilter:function(){return this.shadow?"filter: url(#SVGID_"+this.shadow.id+");":""},getSvgCommons:function(){return[this.id?'id="'+this.id+'" ':"",this.clipPath?'clip-path="url(#'+this.clipPath.clipPathId+')" ':""].join("")},getSvgTransform:function(t,e){var i=t?this.calcTransformMatrix():this.calcOwnMatrix();return'transform="'+fabric.util.matrixToSVG(i)+(e||"")+'" '},_setSVGBg:function(t){if(this.backgroundColor){var e=fabric.Object.NUM_FRACTION_DIGITS;t.push("\t\t\n')}},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(t),{reviver:t})},toClipPathSVG:function(t){return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(t),{reviver:t})},_createBaseClipPathSVGMarkup:function(t,e){var i=(e=e||{}).reviver,r=e.additionalTransform||"",n=[this.getSvgTransform(!0,r),this.getSvgCommons()].join(""),s=t.indexOf("COMMON_PARTS");return t[s]=n,i?i(t.join("")):t.join("")},_createBaseSVGMarkup:function(t,e){var i,r,n=(e=e||{}).noStyle,s=e.reviver,o=n?"":'style="'+this.getSvgStyles()+'" ',a=e.withShadow?'style="'+this.getSvgFilter()+'" ':"",h=this.clipPath,c=this.strokeUniform?'vector-effect="non-scaling-stroke" ':"",l=h&&h.absolutePositioned,u=this.stroke,f=this.fill,d=this.shadow,g=[],p=t.indexOf("COMMON_PARTS"),v=e.additionalTransform;return h&&(h.clipPathId="CLIPPATH_"+fabric.Object.__uid++,r='\n'+h.toClipPathSVG(s)+"\n"),l&&g.push("\n"),g.push("\n"),i=[o,c,n?"":this.addPaintOrder()," ",v?'transform="'+v+'" ':""].join(""),t[p]=i,f&&f.toLive&&g.push(f.toSVG(this)),u&&u.toLive&&g.push(u.toSVG(this)),d&&g.push(d.toSVG(this)),h&&g.push(r),g.push(t.join("")),g.push("\n"),l&&g.push("\n"),s?s(g.join("")):g.join("")},addPaintOrder:function(){return"fill"!==this.paintFirst?' paint-order="'+this.paintFirst+'" ':""}})}(void 0!==t||window),function(t){var e=fabric.util.object.extend,i="stateProperties";function r(t,i,r){var n={};r.forEach((function(e){n[e]=t[e]})),e(t[i],n,!0)}function n(t,e,i){if(t===e)return!0;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var r=0,s=t.length;r=0;o--)if(n=s[o],this.isControlVisible(n)&&(r=this._getImageLines(e?this.oCoords[n].touchCorner:this.oCoords[n].corner),0!==(i=this._findCrossPoints(t,r))&&i%2==1))return this.__corner=n,n;return!1},forEachControl:function(t){for(var e in this.controls)t(this.controls[e],e,this)},_setCornerCoords:function(){var t=this.oCoords;for(var e in t){var i=this.controls[e];t[e].corner=i.calcCornerCoords(this.angle,this.cornerSize,t[e].x,t[e].y,!1),t[e].touchCorner=i.calcCornerCoords(this.angle,this.touchCornerSize,t[e].x,t[e].y,!0)}},drawSelectionBackground:function(t){if(!this.selectionBackgroundColor||this.canvas&&!this.canvas.interactive||this.canvas&&this.canvas._activeObject!==this)return this;t.save();var i=this.getRelativeCenterPoint(),r=this._calculateCurrentDimensions(),n=this.canvas.viewportTransform;return t.translate(i.x,i.y),t.scale(1/n[0],1/n[3]),t.rotate(e(this.angle)),t.fillStyle=this.selectionBackgroundColor,t.fillRect(-r.x/2,-r.y/2,r.x,r.y),t.restore(),this},strokeBorders:function(t,e){t.strokeRect(-e.x/2,-e.y/2,e.x,e.y)},_drawBorders:function(t,e,i){var r=Object.assign({hasControls:this.hasControls,borderColor:this.borderColor,borderDashArray:this.borderDashArray},i||{});t.save(),t.strokeStyle=r.borderColor,this._setLineDash(t,r.borderDashArray),this.strokeBorders(t,e),r.hasControls&&this.drawControlsConnectingLines(t,e),t.restore()},drawBorders:function(t,e,i){var r;if(i&&i.forActiveSelection||this.group){var n=fabric.util.sizeAfterTransform(this.width,this.height,e),s=(this.strokeUniform?new fabric.Point(0,0).scalarAddEquals(this.canvas.getZoom()):new fabric.Point(e.scaleX,e.scaleY)).scalarMultiplyEquals(this.strokeWidth);r=n.addEquals(s).scalarAddEquals(this.borderScaleFactor)}else r=this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor);return this._drawBorders(t,r,i),this},drawControlsConnectingLines:function(t,e){var i=!1;return t.beginPath(),this.forEachControl((function(r,n,s){r.withConnection&&r.getVisibility(s,n)&&(i=!0,t.moveTo(r.x*e.x,r.y*e.y),t.lineTo(r.x*e.x+r.offsetX,r.y*e.y+r.offsetY))})),i&&t.stroke(),this},drawControls:function(t,e){e=e||{},t.save();var i,r=this.canvas.getRetinaScaling();return t.setTransform(r,0,0,r,0,0),t.strokeStyle=t.fillStyle=e.cornerColor||this.cornerColor,this.transparentCorners||(t.strokeStyle=e.cornerStrokeColor||this.cornerStrokeColor),this._setLineDash(t,e.cornerDashArray||this.cornerDashArray),this.setCoords(),this.forEachControl((function(r,n,s){r.getVisibility(s,n)&&(i=s.oCoords[n],r.render(t,i.x,i.y,e,s))})),t.restore(),this},isControlVisible:function(t){return this.controls[t]&&this.controls[t].getVisibility(this,t)},setControlVisible:function(t,e){return this._controlsVisibility||(this._controlsVisibility={}),this._controlsVisibility[t]=e,this},setControlsVisibility:function(t){for(var e in t||(t={}),t)this.setControlVisible(e,t[e]);return this},onDeselect:function(){},onSelect:function(){}})}(void 0!==t||window),fabric.util.object.extend(fabric.StaticCanvas.prototype,{FX_DURATION:500,fxCenterObjectH:function(t,e){var i=function(){},r=(e=e||{}).onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.getX(),endValue:this.getCenterPoint().x,duration:this.FX_DURATION,onChange:function(e){t.setX(e),s.requestRenderAll(),n()},onComplete:function(){t.setCoords(),r()}})},fxCenterObjectV:function(t,e){var i=function(){},r=(e=e||{}).onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.getY(),endValue:this.getCenterPoint().y,duration:this.FX_DURATION,onChange:function(e){t.setY(e),s.requestRenderAll(),n()},onComplete:function(){t.setCoords(),r()}})},fxRemove:function(t,e){var i=function(){},r=(e=e||{}).onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.opacity,endValue:0,duration:this.FX_DURATION,onChange:function(e){t.set("opacity",e),s.requestRenderAll(),n()},onComplete:function(){s.remove(t),r()}})}}),fabric.util.object.extend(fabric.Object.prototype,{animate:function(){if(arguments[0]&&"object"==typeof arguments[0]){var t,e,i=[],r=[];for(t in arguments[0])i.push(t);for(var n=0,s=i.length;n-1||n&&s.colorProperties.indexOf(n[1])>-1,a=n?this.get(n[0])[n[1]]:this.get(t);"from"in i||(i.from=a),o||(e=~e.indexOf("=")?a+parseFloat(e.replace("=","")):parseFloat(e));var h={target:this,startValue:i.from,endValue:e,byValue:i.by,easing:i.easing,duration:i.duration,abort:i.abort&&function(t,e,r){return i.abort.call(s,t,e,r)},onChange:function(e,o,a){n?s[n[0]][n[1]]=e:s.set(t,e),r||i.onChange&&i.onChange(e,o,a)},onComplete:function(t,e,n){r||(s.setCoords(),i.onComplete&&i.onComplete(t,e,n))}};return o?fabric.util.animateColor(h.startValue,h.endValue,h.duration,h):fabric.util.animate(h)}}),function(t){var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.object.clone,n={x1:1,x2:1,y1:1,y2:1};function s(t,e){var i=t.origin,r=t.axis1,n=t.axis2,s=t.dimension,o=e.nearest,a=e.center,h=e.farthest;return function(){switch(this.get(i)){case o:return Math.min(this.get(r),this.get(n));case a:return Math.min(this.get(r),this.get(n))+.5*this.get(s);case h:return Math.max(this.get(r),this.get(n))}}}e.Line?e.warn("fabric.Line is already defined"):(e.Line=e.util.createClass(e.Object,{type:"line",x1:0,y1:0,x2:0,y2:0,cacheProperties:e.Object.prototype.cacheProperties.concat("x1","x2","y1","y2"),initialize:function(t,e){t||(t=[0,0,0,0]),this.callSuper("initialize",e),this.set("x1",t[0]),this.set("y1",t[1]),this.set("x2",t[2]),this.set("y2",t[3]),this._setWidthHeight(e)},_setWidthHeight:function(t){t||(t={}),this.width=Math.abs(this.x2-this.x1),this.height=Math.abs(this.y2-this.y1),this.left="left"in t?t.left:this._getLeftToOriginX(),this.top="top"in t?t.top:this._getTopToOriginY()},_set:function(t,e){return this.callSuper("_set",t,e),void 0!==n[t]&&this._setWidthHeight(),this},_getLeftToOriginX:s({origin:"originX",axis1:"x1",axis2:"x2",dimension:"width"},{nearest:"left",center:"center",farthest:"right"}),_getTopToOriginY:s({origin:"originY",axis1:"y1",axis2:"y2",dimension:"height"},{nearest:"top",center:"center",farthest:"bottom"}),_render:function(t){t.beginPath();var e=this.calcLinePoints();t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.lineWidth=this.strokeWidth;var i=t.strokeStyle;t.strokeStyle=this.stroke||t.fillStyle,this.stroke&&this._renderStroke(t),t.strokeStyle=i},_findCenterFromElement:function(){return{x:(this.x1+this.x2)/2,y:(this.y1+this.y2)/2}},toObject:function(t){return i(this.callSuper("toObject",t),this.calcLinePoints())},_getNonTransformedDimensions:function(){var t=this.callSuper("_getNonTransformedDimensions");return"butt"===this.strokeLineCap&&(0===this.width&&(t.y-=this.strokeWidth),0===this.height&&(t.x-=this.strokeWidth)),t},calcLinePoints:function(){var t=this.x1<=this.x2?-1:1,e=this.y1<=this.y2?-1:1,i=t*this.width*.5,r=e*this.height*.5;return{x1:i,x2:t*this.width*-.5,y1:r,y2:e*this.height*-.5}},_toSVG:function(){var t=this.calcLinePoints();return["\n']}}),e.Line.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x1 y1 x2 y2".split(" ")),e.Line.fromElement=function(t,r,n){n=n||{};var s=e.parseAttributes(t,e.Line.ATTRIBUTE_NAMES),o=[s.x1||0,s.y1||0,s.x2||0,s.y2||0];r(new e.Line(o,i(s,n)))},e.Line.fromObject=function(t){var i=r(t,!0);return i.points=[t.x1,t.y1,t.x2,t.y2],e.Object._fromObject(e.Line,i,"points").then((function(t){return delete t.points,t}))})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.util.degreesToRadians;e.Circle?e.warn("fabric.Circle is already defined."):(e.Circle=e.util.createClass(e.Object,{type:"circle",radius:0,startAngle:0,endAngle:360,cacheProperties:e.Object.prototype.cacheProperties.concat("radius","startAngle","endAngle"),_set:function(t,e){return this.callSuper("_set",t,e),"radius"===t&&this.setRadius(e),this},toObject:function(t){return this.callSuper("toObject",["radius","startAngle","endAngle"].concat(t))},_toSVG:function(){var t,r=(this.endAngle-this.startAngle)%360;if(0===r)t=["\n'];else{var n=i(this.startAngle),s=i(this.endAngle),o=this.radius;t=['180?"1":"0")+" 1"," "+e.util.cos(s)*o+" "+e.util.sin(s)*o,'" ',"COMMON_PARTS"," />\n"]}return t},_render:function(t){t.beginPath(),t.arc(0,0,this.radius,i(this.startAngle),i(this.endAngle),!1),this._renderPaintInOrder(t)},getRadiusX:function(){return this.get("radius")*this.get("scaleX")},getRadiusY:function(){return this.get("radius")*this.get("scaleY")},setRadius:function(t){return this.radius=t,this.set("width",2*t).set("height",2*t)}}),e.Circle.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("cx cy r".split(" ")),e.Circle.fromElement=function(t,i){var r,n=e.parseAttributes(t,e.Circle.ATTRIBUTE_NAMES);if(!("radius"in(r=n)&&r.radius>=0))throw new Error("value of `r` attribute is required and can not be negative");n.left=(n.left||0)-n.radius,n.top=(n.top||0)-n.radius,i(new e.Circle(n))},e.Circle.fromObject=function(t){return e.Object._fromObject(e.Circle,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});e.Triangle?e.warn("fabric.Triangle is already defined"):(e.Triangle=e.util.createClass(e.Object,{type:"triangle",width:100,height:100,_render:function(t){var e=this.width/2,i=this.height/2;t.beginPath(),t.moveTo(-e,i),t.lineTo(0,-i),t.lineTo(e,i),t.closePath(),this._renderPaintInOrder(t)},_toSVG:function(){var t=this.width/2,e=this.height/2;return["']}}),e.Triangle.fromObject=function(t){return e.Object._fromObject(e.Triangle,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=2*Math.PI;e.Ellipse?e.warn("fabric.Ellipse is already defined."):(e.Ellipse=e.util.createClass(e.Object,{type:"ellipse",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this.set("rx",t&&t.rx||0),this.set("ry",t&&t.ry||0)},_set:function(t,e){switch(this.callSuper("_set",t,e),t){case"rx":this.rx=e,this.set("width",2*e);break;case"ry":this.ry=e,this.set("height",2*e)}return this},getRx:function(){return this.get("rx")*this.get("scaleX")},getRy:function(){return this.get("ry")*this.get("scaleY")},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']},_render:function(t){t.beginPath(),t.save(),t.transform(1,0,0,this.ry/this.rx,0,0),t.arc(0,0,this.rx,0,i,!1),t.restore(),this._renderPaintInOrder(t)}}),e.Ellipse.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("cx cy rx ry".split(" ")),e.Ellipse.fromElement=function(t,i){var r=e.parseAttributes(t,e.Ellipse.ATTRIBUTE_NAMES);r.left=(r.left||0)-r.rx,r.top=(r.top||0)-r.ry,i(new e.Ellipse(r))},e.Ellipse.fromObject=function(t){return e.Object._fromObject(e.Ellipse,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});e.Rect?e.warn("fabric.Rect is already defined"):(e.Rect=e.util.createClass(e.Object,{stateProperties:e.Object.prototype.stateProperties.concat("rx","ry"),type:"rect",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(t){var e=this.rx?Math.min(this.rx,this.width/2):0,i=this.ry?Math.min(this.ry,this.height/2):0,r=this.width,n=this.height,s=-this.width/2,o=-this.height/2,a=0!==e||0!==i,h=.4477152502;t.beginPath(),t.moveTo(s+e,o),t.lineTo(s+r-e,o),a&&t.bezierCurveTo(s+r-h*e,o,s+r,o+h*i,s+r,o+i),t.lineTo(s+r,o+n-i),a&&t.bezierCurveTo(s+r,o+n-h*i,s+r-h*e,o+n,s+r-e,o+n),t.lineTo(s+e,o+n),a&&t.bezierCurveTo(s+h*e,o+n,s,o+n-h*i,s,o+n-i),t.lineTo(s,o+i),a&&t.bezierCurveTo(s,o+h*i,s+h*e,o,s+e,o),t.closePath(),this._renderPaintInOrder(t)},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']}}),e.Rect.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x y rx ry width height".split(" ")),e.Rect.fromElement=function(t,i,r){if(!t)return i(null);r=r||{};var n=e.parseAttributes(t,e.Rect.ATTRIBUTE_NAMES);n.left=n.left||0,n.top=n.top||0,n.height=n.height||0,n.width=n.width||0;var s=new e.Rect(Object.assign({},r,n));s.visible=s.visible&&s.width>0&&s.height>0,i(s)},e.Rect.fromObject=function(t){return e.Object._fromObject(e.Rect,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.array.min,n=e.util.array.max,s=e.util.toFixed,o=e.util.projectStrokeOnPoints;e.Polyline?e.warn("fabric.Polyline is already defined"):(e.Polyline=e.util.createClass(e.Object,{type:"polyline",points:null,exactBoundingBox:!1,cacheProperties:e.Object.prototype.cacheProperties.concat("points"),initialize:function(t,e){e=e||{},this.points=t||[],this.callSuper("initialize",e),this._setPositionDimensions(e)},_projectStrokeOnPoints:function(){return o(this.points,this,!0)},_setPositionDimensions:function(t){t||(t={});var e,i=this._calcDimensions(t),r=this.exactBoundingBox?this.strokeWidth:0;this.width=i.width-r,this.height=i.height-r,t.fromSVG||(e=this.translateToGivenOrigin({x:i.left-this.strokeWidth/2+r/2,y:i.top-this.strokeWidth/2+r/2},"left","top",this.originX,this.originY)),void 0===t.left&&(this.left=t.fromSVG?i.left:e.x),void 0===t.top&&(this.top=t.fromSVG?i.top:e.y),this.pathOffset={x:i.left+this.width/2+r/2,y:i.top+this.height/2+r/2}},_calcDimensions:function(){var t=this.exactBoundingBox?this._projectStrokeOnPoints():this.points,e=r(t,"x")||0,i=r(t,"y")||0;return{left:e,top:i,width:(n(t,"x")||0)-e,height:(n(t,"y")||0)-i}},toObject:function(t){return i(this.callSuper("toObject",t),{points:this.points.concat()})},_toSVG:function(){for(var t=[],i=this.pathOffset.x,r=this.pathOffset.y,n=e.Object.NUM_FRACTION_DIGITS,o=0,a=this.points.length;o\n']},commonRender:function(t){var e,i=this.points.length,r=this.pathOffset.x,n=this.pathOffset.y;if(!i||isNaN(this.points[i-1].y))return!1;t.beginPath(),t.moveTo(this.points[0].x-r,this.points[0].y-n);for(var s=0;s"},toObject:function(t){return n(this.callSuper("toObject",t),{path:this.path.map((function(t){return t.slice()}))})},toDatalessObject:function(t){var e=this.toObject(["sourcePath"].concat(t));return e.sourcePath&&delete e.path,e},_toSVG:function(){return["\n"]},_getOffsetTransform:function(){var t=e.Object.NUM_FRACTION_DIGITS;return" translate("+o(-this.pathOffset.x,t)+", "+o(-this.pathOffset.y,t)+")"},toClipPathSVG:function(t){var e=this._getOffsetTransform();return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},toSVG:function(t){var e=this._getOffsetTransform();return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},complexity:function(){return this.path.length},_calcDimensions:function(){for(var t,n,s=[],o=[],a=0,h=0,c=0,l=0,u=0,f=this.path.length;u0){var r=this._activeObjects.indexOf(i);r>-1&&(this._activeObjects.splice(r,1),this._set("dirty",!0))}},_watchObject:function(t,e){var i=t?"on":"off";t&&this._watchObject(!1,e),e[i]("changed",this.__objectMonitor),e[i]("modified",this.__objectMonitor),e[i]("selected",this.__objectSelectionTracker),e[i]("deselected",this.__objectSelectionDisposer)},canEnterGroup:function(t){return t===this||this.isDescendantOf(t)?(console.error("fabric.Group: circular object trees are not supported, this call has no effect"),!1):-1===this._objects.indexOf(t)||(console.error("fabric.Group: duplicate objects are not supported inside group, this call has no effect"),!1)},enterGroup:function(t,e){return t.group&&t.group.remove(t),this._enterGroup(t,e),!0},_enterGroup:function(t,e){e&&s(t,i(r(this.calcTransformMatrix()),t.calcTransformMatrix())),this._shouldSetNestedCoords()&&t.setCoords(),t._set("group",this),t._set("canvas",this.canvas),this.interactive&&this._watchObject(!0,t);var n=this.canvas&&this.canvas.getActiveObject&&this.canvas.getActiveObject();n&&(n===t||t.isDescendantOf(n))&&this._activeObjects.push(t)},exitGroup:function(t,e){this._exitGroup(t,e),t._set("canvas",void 0)},_exitGroup:function(t,e){t._set("group",void 0),e||(s(t,i(this.calcTransformMatrix(),t.calcTransformMatrix())),t.setCoords()),this._watchObject(!1,t);var r=this._activeObjects.length>0?this._activeObjects.indexOf(t):-1;r>-1&&this._activeObjects.splice(r,1)},_onAfterObjectsChange:function(t,e){this._applyLayoutStrategy({type:t,targets:e}),this._set("dirty",!0)},_onObjectAdded:function(t){this.enterGroup(t,!0),t.fire("added",{target:this})},_onRelativeObjectAdded:function(t){this.enterGroup(t,!1),t.fire("added",{target:this})},_onObjectRemoved:function(t,e){this.exitGroup(t,e),t.fire("removed",{target:this})},shouldCache:function(){var t=e.Object.prototype.shouldCache.call(this);if(t)for(var i=0;is.targets.length){var o=s.targets.concat(this);return this.prepareBoundingBox(t,o,s)}if("fit-content"===t||"fit-content-lazy"===t||"fixed"===t&&("initialization"===s.type||"imperative"===s.type))return this.prepareBoundingBox(t,i,s);if("clip-path"===t&&this.clipPath){var a=this.clipPath,h=a._getTransformedDimensions();if(a.absolutePositioned&&("initialization"===s.type||"layout_change"===s.type)){var c=a.getCenterPoint();if(this.group){var l=r(this.group.calcTransformMatrix());c=n(c,l)}return{centerX:c.x,centerY:c.y,width:h.x,height:h.y}}if(!a.absolutePositioned){var u,f=a.getRelativeCenterPoint();c=n(f,this.calcOwnMatrix(),!0);if("initialization"===s.type||"layout_change"===s.type){var d=this.prepareBoundingBox(t,i,s)||{};return{centerX:(u=new e.Point(d.centerX||0,d.centerY||0)).x+c.x,centerY:u.y+c.y,correctionX:d.correctionX-c.x,correctionY:d.correctionY-c.y,width:a.width,height:a.height}}return{centerX:(u=this.getRelativeCenterPoint()).x+c.x,centerY:u.y+c.y,width:h.x,height:h.y}}}else if("svg"===t&&"initialization"===s.type){d=this.getObjectsBoundingBox(i,!0)||{};return Object.assign(d,{correctionX:-d.offsetX||0,correctionY:-d.offsetY||0})}},prepareBoundingBox:function(t,e,i){return"initialization"===i.type?this.prepareInitialBoundingBox(t,e,i):"imperative"===i.type&&i.context?Object.assign(this.getObjectsBoundingBox(e)||{},i.context):this.getObjectsBoundingBox(e)},prepareInitialBoundingBox:function(t,i,r){var n=r.options||{},s="number"==typeof n.left,o="number"==typeof n.top,a="number"==typeof n.width,h="number"==typeof n.height;if(!(s&&o&&a&&h&&r.objectsRelativeToGroup||0===i.length)){var c=this.getObjectsBoundingBox(i)||{},l=a?this.width:c.width||0,u=h?this.height:c.height||0,f=new e.Point(c.centerX||0,c.centerY||0),d=new e.Point(this.resolveOriginX(this.originX),this.resolveOriginY(this.originY)),g=new e.Point(l,u),p=this._getTransformedDimensions({width:0,height:0}),v=this._getTransformedDimensions({width:l,height:u,strokeWidth:0}),m=this._getTransformedDimensions({width:c.width,height:c.height,strokeWidth:0}),b=new e.Point(0,0),y=d.scalarAdd(.5),_=v.multiply(y),x=new e.Point(a?m.x/2:_.x,h?m.y/2:_.y),C=new e.Point(s?this.left-(v.x+p.x)*d.x:f.x-x.x,o?this.top-(v.y+p.y)*d.y:f.y-x.y),w=new e.Point(s?C.x-f.x+m.x*(a?.5:0):-(a?.5*(v.x-p.x):v.x*y.x),o?C.y-f.y+m.y*(h?.5:0):-(h?.5*(v.y-p.y):v.y*y.y)).add(b),S=new e.Point(a?-v.x/2:0,h?-v.y/2:0).add(w);return{centerX:C.x,centerY:C.y,correctionX:S.x,correctionY:S.y,width:g.x,height:g.y}}},getObjectsBoundingBox:function(t,i){if(0===t.length)return null;var r,s,a,h,c,l;t.forEach((function(t,i){if(r=t.getRelativeCenterPoint(),s=t._getTransformedDimensions().scalarDivideEquals(2),t.angle){var n=o(t.angle),u=Math.abs(e.util.sin(n)),f=Math.abs(e.util.cos(n)),d=s.x*f+s.y*u,g=s.x*u+s.y*f;s=new e.Point(d,g)}c=r.subtract(s),l=r.add(s),0===i?(a=new e.Point(Math.min(c.x,l.x),Math.min(c.y,l.y)),h=new e.Point(Math.max(c.x,l.x),Math.max(c.y,l.y))):(a.setXY(Math.min(a.x,c.x,l.x),Math.min(a.y,c.y,l.y)),h.setXY(Math.max(h.x,c.x,l.x),Math.max(h.y,c.y,l.y)))}));var u=h.subtract(a),f=i?u.scalarDivide(2):a.midPointFrom(h),d=n(a,this.calcOwnMatrix()),g=n(f,this.calcOwnMatrix());return{offsetX:d.x,offsetY:d.y,centerX:g.x,centerY:g.y,width:u.x,height:u.y}},onLayout:function(){},__serializeObjects:function(t,e){var i=this.includeDefaultValues;return this._objects.filter((function(t){return!t.excludeFromExport})).map((function(r){var n=r.includeDefaultValues;r.includeDefaultValues=i;var s=r[t||"toObject"](e);return r.includeDefaultValues=n,s}))},toObject:function(t){var e=this.callSuper("toObject",["layout","subTargetCheck","interactive"].concat(t));return e.objects=this.__serializeObjects("toObject",t),e},toString:function(){return"#"},dispose:function(){this._activeObjects=[],this.forEachObject((function(t){this._watchObject(!1,t),t.dispose&&t.dispose()}),this),this.callSuper("dispose")},_createSVGBgRect:function(t){if(!this.backgroundColor)return"";var i=e.Rect.prototype._toSVG.call(this,t),r=i.indexOf("COMMON_PARTS");return i[r]='for="group" ',i.join("")},_toSVG:function(t){var e=["\n"],i=this._createSVGBgRect(t);i&&e.push("\t\t",i);for(var r=0;r\n"),e},getSvgStyles:function(){var t=void 0!==this.opacity&&1!==this.opacity?"opacity: "+this.opacity+";":"",e=this.visible?"":" visibility: hidden;";return[t,this.getSvgFilter(),e].join("")},toClipPathSVG:function(t){var e=[],i=this._createSVGBgRect(t);i&&e.push("\t",i);for(var r=0;r"},shouldCache:function(){return!1},isOnACache:function(){return!1},_renderControls:function(t,e,i){t.save(),t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,this.callSuper("_renderControls",t,e);for(var r=Object.assign({hasControls:!1},i,{forActiveSelection:!0}),n=0;n\n','\t\n',"\n"),o=' clip-path="url(#imageCrop_'+h+')" '}if(this.imageSmoothing||(a='" image-rendering="optimizeSpeed'),i.push("\t\n"),this.stroke||this.strokeDashArray){var c=this.fill;this.fill=null,t=["\t\n'],this.fill=c}return e="fill"!==this.paintFirst?e.concat(t,i):e.concat(i,t)},getSrc:function(t){var e=t?this._element:this._originalElement;return e?e.toDataURL?e.toDataURL():this.srcFromAttribute?e.getAttribute("src"):e.src:this.src||""},setSrc:function(t,e){var i=this;return fabric.util.loadImage(t,e).then((function(t){return i.setElement(t,e),i._setWidthHeight(),i}))},toString:function(){return'#'},applyResizeFilters:function(){var t=this.resizeFilter,e=this.minimumScaleTrigger,i=this.getTotalObjectScaling(),r=i.x,n=i.y,s=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||r>e&&n>e)return this._element=s,this._filterScalingX=1,this._filterScalingY=1,this._lastScaleX=r,void(this._lastScaleY=n);fabric.filterBackend||(fabric.filterBackend=fabric.initFilterBackend());var o=fabric.util.createCanvasElement(),a=this._filteredEl?this.cacheKey+"_filtered":this.cacheKey,h=s.width,c=s.height;o.width=h,o.height=c,this._element=o,this._lastScaleX=t.scaleX=r,this._lastScaleY=t.scaleY=n,fabric.filterBackend.applyFilters([t],s,h,c,this._element,a),this._filterScalingX=o.width/this._originalElement.width,this._filterScalingY=o.height/this._originalElement.height},applyFilters:function(t){if(t=(t=t||this.filters||[]).filter((function(t){return t&&!t.isNeutralState()})),this.set("dirty",!0),this.removeTexture(this.cacheKey+"_filtered"),0===t.length)return this._element=this._originalElement,this._filteredEl=null,this._filterScalingX=1,this._filterScalingY=1,this;var e=this._originalElement,i=e.naturalWidth||e.width,r=e.naturalHeight||e.height;if(this._element===this._originalElement){var n=fabric.util.createCanvasElement();n.width=i,n.height=r,this._element=n,this._filteredEl=n}else this._element=this._filteredEl,this._filteredEl.getContext("2d").clearRect(0,0,i,r),this._lastScaleX=1,this._lastScaleY=1;return fabric.filterBackend||(fabric.filterBackend=fabric.initFilterBackend()),fabric.filterBackend.applyFilters(t,this._originalElement,i,r,this._element,this.cacheKey),this._originalElement.width===this._element.width&&this._originalElement.height===this._element.height||(this._filterScalingX=this._element.width/this._originalElement.width,this._filterScalingY=this._element.height/this._originalElement.height),this},_render:function(t){fabric.util.setImageSmoothing(t,this.imageSmoothing),!0!==this.isMoving&&this.resizeFilter&&this._needsResize()&&this.applyResizeFilters(),this._stroke(t),this._renderPaintInOrder(t)},drawCacheOnCanvas:function(t){fabric.util.setImageSmoothing(t,this.imageSmoothing),fabric.Object.prototype.drawCacheOnCanvas.call(this,t)},shouldCache:function(){return this.needsItsOwnCache()},_renderFill:function(t){var e=this._element;if(e){var i=this._filterScalingX,r=this._filterScalingY,n=this.width,s=this.height,o=Math.min,a=Math.max,h=a(this.cropX,0),c=a(this.cropY,0),l=e.naturalWidth||e.width,u=e.naturalHeight||e.height,f=h*i,d=c*r,g=o(n*i,l-f),p=o(s*r,u-d),v=-n/2,m=-s/2,b=o(n,l/i-h),y=o(s,u/r-c);e&&t.drawImage(e,f,d,g,p,v,m,b,y)}},_needsResize:function(){var t=this.getTotalObjectScaling();return t.x!==this._lastScaleX||t.y!==this._lastScaleY},_resetWidthHeight:function(){this.set(this.getOriginalSize())},_initElement:function(t,e){this.setElement(fabric.util.getById(t),e),fabric.util.addClass(this.getElement(),fabric.Image.CSS_CANVAS)},_initConfig:function(t){t||(t={}),this.setOptions(t),this._setWidthHeight(t)},_setWidthHeight:function(t){t||(t={});var e=this.getElement();this.width=t.width||e.naturalWidth||e.width||0,this.height=t.height||e.naturalHeight||e.height||0},parsePreserveAspectRatioAttribute:function(){var t,e=fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio||""),i=this._element.width,r=this._element.height,n=1,s=1,o=0,a=0,h=0,c=0,l=this.width,u=this.height,f={width:l,height:u};return!e||"none"===e.alignX&&"none"===e.alignY?(n=l/i,s=u/r):("meet"===e.meetOrSlice&&(t=(l-i*(n=s=fabric.util.findScaleToFit(this._element,f)))/2,"Min"===e.alignX&&(o=-t),"Max"===e.alignX&&(o=t),t=(u-r*s)/2,"Min"===e.alignY&&(a=-t),"Max"===e.alignY&&(a=t)),"slice"===e.meetOrSlice&&(t=i-l/(n=s=fabric.util.findScaleToCover(this._element,f)),"Mid"===e.alignX&&(h=t/2),"Max"===e.alignX&&(h=t),t=r-u/s,"Mid"===e.alignY&&(c=t/2),"Max"===e.alignY&&(c=t),i=l/n,r=u/s)),{width:i,height:r,scaleX:n,scaleY:s,offsetLeft:o,offsetTop:a,cropX:h,cropY:c}}}),fabric.Image.CSS_CANVAS="canvas-img",fabric.Image.prototype.getSvgSrc=fabric.Image.prototype.getSrc,fabric.Image.fromObject=function(t){var e=Object.assign({},t),i=e.filters,r=e.resizeFilter;return delete e.resizeFilter,delete e.filters,Promise.all([fabric.util.loadImage(e.src,{crossOrigin:t.crossOrigin}),i&&fabric.util.enlivenObjects(i,"fabric.Image.filters"),r&&fabric.util.enlivenObjects([r],"fabric.Image.filters"),fabric.util.enlivenObjectEnlivables(e)]).then((function(t){return e.filters=t[1]||[],e.resizeFilter=t[2]&&t[2][0],new fabric.Image(t[0],Object.assign(e,t[3]))}))},fabric.Image.fromURL=function(t,e){return fabric.util.loadImage(t,e||{}).then((function(t){return new fabric.Image(t,e)}))},fabric.Image.ATTRIBUTE_NAMES=fabric.SHARED_ATTRIBUTES.concat("x y width height preserveAspectRatio xlink:href crossOrigin image-rendering".split(" ")),fabric.Image.fromElement=function(t,e,i){var r=fabric.parseAttributes(t,fabric.Image.ATTRIBUTE_NAMES);fabric.Image.fromURL(r["xlink:href"],Object.assign({},i||{},r)).then((function(t){e(t)}))})}(void 0!==t?t:window),fabric.util.object.extend(fabric.Object.prototype,{_getAngleValueForStraighten:function(){var t=this.angle%360;return t>0?90*Math.round((t-1)/90):90*Math.round(t/90)},straighten:function(){return this.rotate(this._getAngleValueForStraighten())},fxStraighten:function(t){var e=function(){},i=(t=t||{}).onComplete||e,r=t.onChange||e,n=this;return fabric.util.animate({target:this,startValue:this.get("angle"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(t){n.rotate(t),r()},onComplete:function(){n.setCoords(),i()}})}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{straightenObject:function(t){return t.straighten(),this.requestRenderAll(),this},fxStraightenObject:function(t){return t.fxStraighten({onChange:this.requestRenderAllBound})}}),function(t){function e(t,e){var i="precision "+e+" float;\nvoid main(){}",r=t.createShader(t.FRAGMENT_SHADER);return t.shaderSource(r,i),t.compileShader(r),!!t.getShaderParameter(r,t.COMPILE_STATUS)}function i(t){t&&t.tileSize&&(this.tileSize=t.tileSize),this.setupGLContext(this.tileSize,this.tileSize),this.captureGPUInfo()}fabric.isWebglSupported=function(t){if(fabric.isLikelyNode)return!1;t=t||fabric.WebglFilterBackend.prototype.tileSize;var i=document.createElement("canvas"),r=i.getContext("webgl")||i.getContext("experimental-webgl"),n=!1;if(r){fabric.maxTextureSize=r.getParameter(r.MAX_TEXTURE_SIZE),n=fabric.maxTextureSize>=t;for(var s=["highp","mediump","lowp"],o=0;o<3;o++)if(e(r,s[o])){fabric.webGlPrecision=s[o];break}}return this.isSupported=n,n},fabric.WebglFilterBackend=i,i.prototype={tileSize:2048,resources:{},setupGLContext:function(t,e){this.dispose(),this.createWebGLCanvas(t,e),this.aPosition=new Float32Array([0,0,0,1,1,0,1,1]),this.chooseFastestCopyGLTo2DMethod(t,e)},chooseFastestCopyGLTo2DMethod:function(t,e){var i,r=void 0!==window.performance;try{new ImageData(1,1),i=!0}catch(t){i=!1}var n="undefined"!=typeof ArrayBuffer,s="undefined"!=typeof Uint8ClampedArray;if(r&&i&&n&&s){var o=fabric.util.createCanvasElement(),a=new ArrayBuffer(t*e*4);if(fabric.forceGLPutImageData)return this.imageBuffer=a,void(this.copyGLTo2D=m);var h,c,l={imageBuffer:a,destinationWidth:t,destinationHeight:e,targetCanvas:o};o.width=t,o.height=e,h=window.performance.now(),v.call(l,this.gl,l),c=window.performance.now()-h,h=window.performance.now(),m.call(l,this.gl,l),c>window.performance.now()-h?(this.imageBuffer=a,this.copyGLTo2D=m):this.copyGLTo2D=v}},createWebGLCanvas:function(t,e){var i=fabric.util.createCanvasElement();i.width=t,i.height=e;var r={alpha:!0,premultipliedAlpha:!1,depth:!1,stencil:!1,antialias:!1},n=i.getContext("webgl",r);n||(n=i.getContext("experimental-webgl",r)),n&&(n.clearColor(0,0,0,0),this.canvas=i,this.gl=n)},applyFilters:function(t,e,i,r,n,s){var o,a=this.gl;s&&(o=this.getCachedTexture(s,e));var h={originalWidth:e.width||e.originalWidth,originalHeight:e.height||e.originalHeight,sourceWidth:i,sourceHeight:r,destinationWidth:i,destinationHeight:r,context:a,sourceTexture:this.createTexture(a,i,r,!o&&e),targetTexture:this.createTexture(a,i,r),originalTexture:o||this.createTexture(a,i,r,!o&&e),passes:t.length,webgl:!0,aPosition:this.aPosition,programCache:this.programCache,pass:0,filterBackend:this,targetCanvas:n},c=a.createFramebuffer();return a.bindFramebuffer(a.FRAMEBUFFER,c),t.forEach((function(t){t&&t.applyTo(h)})),function(t){var e=t.targetCanvas,i=e.width,r=e.height,n=t.destinationWidth,s=t.destinationHeight;i===n&&r===s||(e.width=n,e.height=s)}(h),this.copyGLTo2D(a,h),a.bindTexture(a.TEXTURE_2D,null),a.deleteTexture(h.sourceTexture),a.deleteTexture(h.targetTexture),a.deleteFramebuffer(c),n.getContext("2d").setTransform(1,0,0,1,0,0),h},dispose:function(){this.canvas&&(this.canvas=null,this.gl=null),this.clearWebGLCaches()},clearWebGLCaches:function(){this.programCache={},this.textureCache={}},createTexture:function(t,e,i,r){var n=t.createTexture();return t.bindTexture(t.TEXTURE_2D,n),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),r?t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,r):t.texImage2D(t.TEXTURE_2D,0,t.RGBA,e,i,0,t.RGBA,t.UNSIGNED_BYTE,null),n},getCachedTexture:function(t,e){if(this.textureCache[t])return this.textureCache[t];var i=this.createTexture(this.gl,e.width,e.height,e);return this.textureCache[t]=i,i},evictCachesForKey:function(t){this.textureCache[t]&&(this.gl.deleteTexture(this.textureCache[t]),delete this.textureCache[t])},copyGLTo2D:v,captureGPUInfo:function(){if(this.gpuInfo)return this.gpuInfo;var t=this.gl,e={renderer:"",vendor:""};if(!t)return e;var i=t.getExtension("WEBGL_debug_renderer_info");if(i){var r=t.getParameter(i.UNMASKED_RENDERER_WEBGL),n=t.getParameter(i.UNMASKED_VENDOR_WEBGL);r&&(e.renderer=r.toLowerCase()),n&&(e.vendor=n.toLowerCase())}return this.gpuInfo=e,e}}}(void 0!==t||window),function(t){var e=function(){};function i(){}fabric.Canvas2dFilterBackend=i,i.prototype={evictCachesForKey:e,dispose:e,clearWebGLCaches:e,resources:{},applyFilters:function(t,e,i,r,n){var s=n.getContext("2d");s.drawImage(e,0,0,i,r);var o={sourceWidth:i,sourceHeight:r,imageData:s.getImageData(0,0,i,r),originalEl:e,originalImageData:s.getImageData(0,0,i,r),canvasEl:n,ctx:s,filterBackend:this};return t.forEach((function(t){t.applyTo(o)})),o.imageData.width===i&&o.imageData.height===r||(n.width=o.imageData.width,n.height=o.imageData.height),s.putImageData(o.imageData,0,0),o}}}(void 0!==t||window),fabric.Image=fabric.Image||{},fabric.Image.filters=fabric.Image.filters||{},fabric.Image.filters.BaseFilter=fabric.util.createClass({type:"BaseFilter",vertexSource:"attribute vec2 aPosition;\nvarying vec2 vTexCoord;\nvoid main() {\nvTexCoord = aPosition;\ngl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n}",fragmentSource:"precision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D uTexture;\nvoid main() {\ngl_FragColor = texture2D(uTexture, vTexCoord);\n}",initialize:function(t){t&&this.setOptions(t)},setOptions:function(t){for(var e in t)this[e]=t[e]},createProgram:function(t,e,i){e=e||this.fragmentSource,i=i||this.vertexSource,"highp"!==fabric.webGlPrecision&&(e=e.replace(/precision highp float/g,"precision "+fabric.webGlPrecision+" float"));var r=t.createShader(t.VERTEX_SHADER);if(t.shaderSource(r,i),t.compileShader(r),!t.getShaderParameter(r,t.COMPILE_STATUS))throw new Error("Vertex shader compile error for "+this.type+": "+t.getShaderInfoLog(r));var n=t.createShader(t.FRAGMENT_SHADER);if(t.shaderSource(n,e),t.compileShader(n),!t.getShaderParameter(n,t.COMPILE_STATUS))throw new Error("Fragment shader compile error for "+this.type+": "+t.getShaderInfoLog(n));var s=t.createProgram();if(t.attachShader(s,r),t.attachShader(s,n),t.linkProgram(s),!t.getProgramParameter(s,t.LINK_STATUS))throw new Error('Shader link error for "${this.type}" '+t.getProgramInfoLog(s));var o=this.getAttributeLocations(t,s),a=this.getUniformLocations(t,s)||{};return a.uStepW=t.getUniformLocation(s,"uStepW"),a.uStepH=t.getUniformLocation(s,"uStepH"),{program:s,attributeLocations:o,uniformLocations:a}},getAttributeLocations:function(t,e){return{aPosition:t.getAttribLocation(e,"aPosition")}},getUniformLocations:function(){return{}},sendAttributeData:function(t,e,i){var r=e.aPosition,n=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,n),t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,0,0),t.bufferData(t.ARRAY_BUFFER,i,t.STATIC_DRAW)},_setupFrameBuffer:function(t){var e,i,r=t.context;t.passes>1?(e=t.destinationWidth,i=t.destinationHeight,t.sourceWidth===e&&t.sourceHeight===i||(r.deleteTexture(t.targetTexture),t.targetTexture=t.filterBackend.createTexture(r,e,i)),r.framebufferTexture2D(r.FRAMEBUFFER,r.COLOR_ATTACHMENT0,r.TEXTURE_2D,t.targetTexture,0)):(r.bindFramebuffer(r.FRAMEBUFFER,null),r.finish())},_swapTextures:function(t){t.passes--,t.pass++;var e=t.targetTexture;t.targetTexture=t.sourceTexture,t.sourceTexture=e},isNeutralState:function(){var t=this.mainParameter,e=fabric.Image.filters[this.type].prototype;if(t){if(Array.isArray(e[t])){for(var i=e[t].length;i--;)if(this[t][i]!==e[t][i])return!1;return!0}return e[t]===this[t]}return!1},applyTo:function(t){t.webgl?(this._setupFrameBuffer(t),this.applyToWebGL(t),this._swapTextures(t)):this.applyTo2d(t)},retrieveShader:function(t){return t.programCache.hasOwnProperty(this.type)||(t.programCache[this.type]=this.createProgram(t.context)),t.programCache[this.type]},applyToWebGL:function(t){var e=t.context,i=this.retrieveShader(t);0===t.pass&&t.originalTexture?e.bindTexture(e.TEXTURE_2D,t.originalTexture):e.bindTexture(e.TEXTURE_2D,t.sourceTexture),e.useProgram(i.program),this.sendAttributeData(e,i.attributeLocations,t.aPosition),e.uniform1f(i.uniformLocations.uStepW,1/t.sourceWidth),e.uniform1f(i.uniformLocations.uStepH,1/t.sourceHeight),this.sendUniformData(e,i.uniformLocations),e.viewport(0,0,t.destinationWidth,t.destinationHeight),e.drawArrays(e.TRIANGLE_STRIP,0,4)},bindAdditionalTexture:function(t,e,i){t.activeTexture(i),t.bindTexture(t.TEXTURE_2D,e),t.activeTexture(t.TEXTURE0)},unbindAdditionalTexture:function(t,e){t.activeTexture(e),t.bindTexture(t.TEXTURE_2D,null),t.activeTexture(t.TEXTURE0)},getMainParameter:function(){return this[this.mainParameter]},setMainParameter:function(t){this[this.mainParameter]=t},sendUniformData:function(){},createHelpLayer:function(t){if(!t.helpLayer){var e=document.createElement("canvas");e.width=t.sourceWidth,e.height=t.sourceHeight,t.helpLayer=e}},toObject:function(){var t={type:this.type},e=this.mainParameter;return e&&(t[e]=this[e]),t},toJSON:function(){return this.toObject()}}),fabric.Image.filters.BaseFilter.fromObject=function(t){return Promise.resolve(new fabric.Image.filters[t.type](t))},function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.ColorMatrix=r(i.BaseFilter,{type:"ColorMatrix",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nuniform mat4 uColorMatrix;\nuniform vec4 uConstants;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\ncolor *= uColorMatrix;\ncolor += uConstants;\ngl_FragColor = color;\n}",matrix:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],mainParameter:"matrix",colorsOnly:!0,initialize:function(t){this.callSuper("initialize",t),this.matrix=this.matrix.slice(0)},applyTo2d:function(t){var e,i,r,n,s,o=t.imageData.data,a=o.length,h=this.matrix,c=this.colorsOnly;for(s=0;s=_||o<0||o>=y||(h=4*(a*y+o),c=v[d*m+f],e+=p[h]*c,i+=p[h+1]*c,r+=p[h+2]*c,w||(n+=p[h+3]*c));C[s]=e,C[s+1]=i,C[s+2]=r,C[s+3]=w?p[s+3]:n}t.imageData=x},getUniformLocations:function(t,e){return{uMatrix:t.getUniformLocation(e,"uMatrix"),uOpaque:t.getUniformLocation(e,"uOpaque"),uHalfSize:t.getUniformLocation(e,"uHalfSize"),uSize:t.getUniformLocation(e,"uSize")}},sendUniformData:function(t,e){t.uniform1fv(e.uMatrix,this.matrix)},toObject:function(){return i(this.callSuper("toObject"),{opaque:this.opaque,matrix:this.matrix})}}),e.Image.filters.Convolute.fromObject=e.Image.filters.BaseFilter.fromObject}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Grayscale=r(i.BaseFilter,{type:"Grayscale",fragmentSource:{average:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat average = (color.r + color.b + color.g) / 3.0;\ngl_FragColor = vec4(average, average, average, color.a);\n}",lightness:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\ngl_FragColor = vec4(average, average, average, col.a);\n}",luminosity:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\ngl_FragColor = vec4(average, average, average, col.a);\n}"},mode:"average",mainParameter:"mode",applyTo2d:function(t){var e,i,r=t.imageData.data,n=r.length,s=this.mode;for(e=0;ec[0]&&n>c[1]&&s>c[2]&&r 0.0) {\n"+this.fragmentSource[t]+"}\n}"},retrieveShader:function(t){var e,i=this.type+"_"+this.mode;return t.programCache.hasOwnProperty(i)||(e=this.buildSource(this.mode),t.programCache[i]=this.createProgram(t.context,e)),t.programCache[i]},applyTo2d:function(t){var i,r,n,s,o,a,h,c=t.imageData.data,l=c.length,u=1-this.alpha;i=(h=new e.Color(this.color).getSource())[0]*this.alpha,r=h[1]*this.alpha,n=h[2]*this.alpha;for(var f=0;f=t||e<=-t)return 0;if(e<1.1920929e-7&&e>-1.1920929e-7)return 1;var i=(e*=Math.PI)/t;return a(e)/e*a(i)/i}},applyTo2d:function(t){var e=t.imageData,i=this.scaleX,r=this.scaleY;this.rcpScaleX=1/i,this.rcpScaleY=1/r;var n,s=e.width,a=e.height,h=o(s*i),c=o(a*r);"sliceHack"===this.resizeType?n=this.sliceByTwo(t,s,a,h,c):"hermite"===this.resizeType?n=this.hermiteFastResize(t,s,a,h,c):"bilinear"===this.resizeType?n=this.bilinearFiltering(t,s,a,h,c):"lanczos"===this.resizeType&&(n=this.lanczosResize(t,s,a,h,c)),t.imageData=n},sliceByTwo:function(t,i,n,s,o){var a,h,c=t.imageData,l=.5,u=!1,f=!1,d=i*l,g=n*l,p=e.filterBackend.resources,v=0,m=0,b=i,y=0;for(p.sliceByTwo||(p.sliceByTwo=document.createElement("canvas")),((a=p.sliceByTwo).width<1.5*i||a.height=e)){M=r(1e3*s(S-x.x)),_[M]||(_[M]={});for(var F=C.y-y;F<=C.y+y;F++)F<0||F>=o||(D=r(1e3*s(F-x.y)),_[M][D]||(_[M][D]=d(n(i(M*v,2)+i(D*m,2))/1e3)),(T=_[M][D])>0&&(P+=T,k+=T*l[O=4*(F*e+S)],j+=T*l[O+1],E+=T*l[O+2],A+=T*l[O+3]))}f[O=4*(w*a+h)]=k/P,f[O+1]=j/P,f[O+2]=E/P,f[O+3]=A/P}return++h1&&D<-1||(y=2*D*D*D-3*D*D+1)>0&&(T+=y*d[(M=4*(A+P*e))+3],x+=y,d[M+3]<255&&(y=y*d[M+3]/250),C+=y*d[M],w+=y*d[M+1],S+=y*d[M+2],_+=y)}p[b]=C/_,p[b+1]=w/_,p[b+2]=S/_,p[b+3]=T/x}return g},toObject:function(){return{type:this.type,scaleX:this.scaleX,scaleY:this.scaleY,resizeType:this.resizeType,lanczosLobes:this.lanczosLobes}}}),e.Image.filters.Resize.fromObject=e.Image.filters.BaseFilter.fromObject}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Contrast=r(i.BaseFilter,{type:"Contrast",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uContrast;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\ncolor.rgb = contrastF * (color.rgb - 0.5) + 0.5;\ngl_FragColor = color;\n}",contrast:0,mainParameter:"contrast",applyTo2d:function(t){if(0!==this.contrast){var e,i=t.imageData.data,r=i.length,n=Math.floor(255*this.contrast),s=259*(n+255)/(255*(259-n));for(e=0;e1&&(e=1/this.aspectRatio):this.aspectRatio<1&&(e=this.aspectRatio),t=e*this.blur*.12,this.horizontal?i[0]=t:i[1]=t,i}}),i.Blur.fromObject=e.Image.filters.BaseFilter.fromObject}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Gamma=r(i.BaseFilter,{type:"Gamma",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform vec3 uGamma;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nvec3 correction = (1.0 / uGamma);\ncolor.r = pow(color.r, correction.r);\ncolor.g = pow(color.g, correction.g);\ncolor.b = pow(color.b, correction.b);\ngl_FragColor = color;\ngl_FragColor.rgb *= color.a;\n}",gamma:[1,1,1],mainParameter:"gamma",initialize:function(t){this.gamma=[1,1,1],i.BaseFilter.prototype.initialize.call(this,t)},applyTo2d:function(t){var e,i=t.imageData.data,r=this.gamma,n=i.length,s=1/r[0],o=1/r[1],a=1/r[2];for(this.rVals||(this.rVals=new Uint8Array(256),this.gVals=new Uint8Array(256),this.bVals=new Uint8Array(256)),e=0,n=256;e'},_getCacheCanvasDimensions:function(){var t=this.callSuper("_getCacheCanvasDimensions"),e=this.fontSize;return t.width+=e*t.zoomX,t.height+=e*t.zoomY,t},_render:function(t){var e=this.path;e&&!e.isNotVisible()&&e._render(t),this._setTextStyles(t),this._renderTextLinesBackground(t),this._renderTextDecoration(t,"underline"),this._renderText(t),this._renderTextDecoration(t,"overline"),this._renderTextDecoration(t,"linethrough")},_renderText:function(t){"stroke"===this.paintFirst?(this._renderTextStroke(t),this._renderTextFill(t)):(this._renderTextFill(t),this._renderTextStroke(t))},_setTextStyles:function(t,e,i){if(t.textBaseline="alphabetical",this.path)switch(this.pathAlign){case"center":t.textBaseline="middle";break;case"ascender":t.textBaseline="top";break;case"descender":t.textBaseline="bottom"}t.font=this._getFontDeclaration(e,i)},calcTextWidth:function(){for(var t=this.getLineWidth(0),e=1,i=this._textLines.length;et&&(t=r)}return t},_renderTextLine:function(t,e,i,r,n,s){this._renderChars(t,e,i,r,n,s)},_renderTextLinesBackground:function(t){if(this.textBackgroundColor||this.styleHas("textBackgroundColor")){for(var e,i,r,n,s,o,a,h=t.fillStyle,c=this._getLeftOffset(),l=this._getTopOffset(),u=0,f=0,d=this.path,g=0,p=this._textLines.length;g=0:ia?u%=a:u<0&&(u+=a),this._setGraphemeOnPath(u,s,o),u+=s.kernedWidth}return{width:h,numOfSpaces:0}},_setGraphemeOnPath:function(t,i,r){var n=t+i.kernedWidth/2,s=this.path,o=e.util.getPointOnPath(s.path,n,s.segmentsInfo);i.renderLeft=o.x-r.x,i.renderTop=o.y-r.y,i.angle=o.angle+("right"===this.pathSide?Math.PI:0)},_getGraphemeBox:function(t,e,i,r,n){var s,o=this.getCompleteStyleDeclaration(e,i),a=r?this.getCompleteStyleDeclaration(e,i-1):{},h=this._measureChar(t,o,r,a),c=h.kernedWidth,l=h.width;0!==this.charSpacing&&(l+=s=this._getWidthOfCharSpacing(),c+=s);var u={width:l,left:0,height:o.fontSize,kernedWidth:c,deltaY:o.deltaY};if(i>0&&!n){var f=this.__charBounds[e][i-1];u.left=f.left+f.width+h.kernedWidth-h.width}return u},getHeightOfLine:function(t){if(this.__lineHeights[t])return this.__lineHeights[t];for(var e=this._textLines[t],i=this.getHeightOfChar(t,0),r=1,n=e.length;r0){var P=b+s+u;"rtl"===this.direction&&(P=this.width-P-f),c&&m&&(t.fillStyle=m,t.fillRect(P,l+C*r+o,f,this.fontSize/15)),u=d.left,f=d.width,c=g,m=v,r=n,o=a}else f+=d.kernedWidth;P=b+s+u;"rtl"===this.direction&&(P=this.width-P-f),t.fillStyle=v,g&&v&&t.fillRect(P,l+C*r+o,f-x,this.fontSize/15),y+=i}else y+=i;this._removeShadow(t)}},_getFontDeclaration:function(t,i){var r=t||this,n=this.fontFamily,s=e.Text.genericFonts.indexOf(n.toLowerCase())>-1,o=void 0===n||n.indexOf("'")>-1||n.indexOf(",")>-1||n.indexOf('"')>-1||s?r.fontFamily:'"'+r.fontFamily+'"';return[e.isLikelyNode?r.fontWeight:r.fontStyle,e.isLikelyNode?r.fontStyle:r.fontWeight,i?this.CACHE_FONT_SIZE+"px":r.fontSize+"px",o].join(" ")},render:function(t){this.visible&&(this.canvas&&this.canvas.skipOffscreen&&!this.group&&!this.isOnScreen()||(this._shouldClearDimensionCache()&&this.initDimensions(),this.callSuper("render",t)))},graphemeSplit:function(t){return e.util.string.graphemeSplit(t)},_splitTextIntoLines:function(t){for(var e=t.split(this._reNewline),i=new Array(e.length),r=["\n"],n=[],s=0;s0?o:0)},"rtl"===this.direction&&("right"===this.textAlign||"justify"===this.textAlign||"justify-right"===this.textAlign?n.left*=-1:"left"===this.textAlign||"justify-left"===this.textAlign?n.left=e-(o>0?o:0):"center"!==this.textAlign&&"justify-center"!==this.textAlign||(n.left=e-(o>0?o:0))),this.cursorOffsetCache=n,this.cursorOffsetCache},renderCursor:function(t,e){var i=this.get2DCursorLocation(),r=i.lineIndex,n=i.charIndex>0?i.charIndex-1:0,s=this.getValueOfPropertyAt(r,n,"fontSize"),o=this.scaleX*this.canvas.getZoom(),a=this.cursorWidth/o,h=t.topOffset,c=this.getValueOfPropertyAt(r,n,"deltaY");h+=(1-this._fontSizeFraction)*this.getHeightOfLine(r)/this.lineHeight-s*(1-this._fontSizeFraction),this.inCompositionMode&&this.renderSelection(t,e),e.fillStyle=this.cursorColor||this.getValueOfPropertyAt(r,n,"fill"),e.globalAlpha=this.__isMousedown?1:this._currentCursorOpacity,e.fillRect(t.left+t.leftOffset-a/2,h+t.top+c,a,s)},renderSelection:function(t,e){for(var i=this.inCompositionMode?this.hiddenTextarea.selectionStart:this.selectionStart,r=this.inCompositionMode?this.hiddenTextarea.selectionEnd:this.selectionEnd,n=-1!==this.textAlign.indexOf("justify"),s=this.get2DCursorLocation(i),o=this.get2DCursorLocation(r),a=s.lineIndex,h=o.lineIndex,c=s.charIndex<0?0:s.charIndex,l=o.charIndex<0?0:o.charIndex,u=a;u<=h;u++){var f,d=this._getLineLeftOffset(u)||0,g=this.getHeightOfLine(u),p=0,v=0;if(u===a&&(p=this.__charBounds[a][c].left),u>=a&&u1)&&(g/=this.lineHeight);var b=t.left+d+p,y=v-p,_=g,x=0;this.inCompositionMode?(e.fillStyle=this.compositionColor||"black",_=1,x=g):e.fillStyle=this.selectionColor,"rtl"===this.direction&&("right"===this.textAlign||"justify"===this.textAlign||"justify-right"===this.textAlign?b=this.width-b-y:"left"===this.textAlign||"justify-left"===this.textAlign?b=t.left+d-v:"center"!==this.textAlign&&"justify-center"!==this.textAlign||(b=t.left+d-v)),e.fillRect(b,t.top+t.topOffset+x,y,_),t.topOffset+=f}},getCurrentCharFontSize:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fontSize")},getCurrentCharColor:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fill")},_getCurrentCharIndex:function(){var t=this.get2DCursorLocation(this.selectionStart,!0),e=t.charIndex>0?t.charIndex-1:0;return{l:t.lineIndex,c:e}}}),fabric.IText.fromObject=function(t){return fabric.Object._fromObject(fabric.IText,t,"text")},function(t){var e=e.global;e.util.object.extend(e.IText.prototype,{initBehavior:function(){this.initAddedHandler(),this.initRemovedHandler(),this.initCursorSelectionHandlers(),this.initDoubleClickSimulation(),this.mouseMoveHandler=this.mouseMoveHandler.bind(this)},onDeselect:function(){this.isEditing&&this.exitEditing(),this.selected=!1},initAddedHandler:function(){var t=this;this.on("added",(function(e){var i=e.target;i&&(i._hasITextHandlers||(i._hasITextHandlers=!0,t._initCanvasHandlers(i)),i._iTextInstances=i._iTextInstances||[],i._iTextInstances.push(t))}))},initRemovedHandler:function(){var t=this;this.on("removed",(function(i){var r=i.target;r&&(r._iTextInstances=r._iTextInstances||[],e.util.removeFromArray(r._iTextInstances,t),0===r._iTextInstances.length&&(r._hasITextHandlers=!1,t._removeCanvasHandlers(r)))}))},_initCanvasHandlers:function(t){t._mouseUpITextHandler=function(){t._iTextInstances&&t._iTextInstances.forEach((function(t){t.__isMousedown=!1}))},t.on("mouse:up",t._mouseUpITextHandler)},_removeCanvasHandlers:function(t){t.off("mouse:up",t._mouseUpITextHandler)},_tick:function(){this._currentTickState=this._animateCursor(this,1,this.cursorDuration,"_onTickComplete")},_animateCursor:function(t,e,i,r){var n;return n={isAborted:!1,abort:function(){this.isAborted=!0}},t.animate("_currentCursorOpacity",e,{duration:i,onComplete:function(){n.isAborted||t[r]()},onChange:function(){t.canvas&&t.selectionStart===t.selectionEnd&&t.renderCursorOrSelection()},abort:function(){return n.isAborted}}),n},_onTickComplete:function(){var t=this;this._cursorTimeout1&&clearTimeout(this._cursorTimeout1),this._cursorTimeout1=setTimeout((function(){t._currentTickCompleteState=t._animateCursor(t,0,this.cursorDuration/2,"_tick")}),100)},initDelayedCursor:function(t){var e=this,i=t?0:this.cursorDelay;this.abortCursorAnimation(),this._currentCursorOpacity=1,i?this._cursorTimeout2=setTimeout((function(){e._tick()}),i):this._tick()},abortCursorAnimation:function(){var t=this._currentTickState||this._currentTickCompleteState,e=this.canvas;this._currentTickState&&this._currentTickState.abort(),this._currentTickCompleteState&&this._currentTickCompleteState.abort(),clearTimeout(this._cursorTimeout1),clearTimeout(this._cursorTimeout2),this._currentCursorOpacity=0,t&&e&&e.clearContext(e.contextTop||e.contextContainer)},selectAll:function(){return this.selectionStart=0,this.selectionEnd=this._text.length,this._fireSelectionChanged(),this._updateTextarea(),this},getSelectedText:function(){return this._text.slice(this.selectionStart,this.selectionEnd).join("")},findWordBoundaryLeft:function(t){var e=0,i=t-1;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i--;for(;/\S/.test(this._text[i])&&i>-1;)e++,i--;return t-e},findWordBoundaryRight:function(t){var e=0,i=t;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i++;for(;/\S/.test(this._text[i])&&i-1;)e++,i--;return t-e},findLineBoundaryRight:function(t){for(var e=0,i=t;!/\n/.test(this._text[i])&&i0&&nthis.__selectionStartOnMouseDown?(this.selectionStart=this.__selectionStartOnMouseDown,this.selectionEnd=e):(this.selectionStart=e,this.selectionEnd=this.__selectionStartOnMouseDown),this.selectionStart===i&&this.selectionEnd===r||(this.restartCursorIfNeeded(),this._fireSelectionChanged(),this._updateTextarea(),this.renderCursorOrSelection()))}},_setEditingProps:function(){this.hoverCursor="text",this.canvas&&(this.canvas.defaultCursor=this.canvas.moveCursor="text"),this.borderColor=this.editingBorderColor,this.hasControls=this.selectable=!1,this.lockMovementX=this.lockMovementY=!0},fromStringToGraphemeSelection:function(t,e,i){var r=i.slice(0,t),n=this.graphemeSplit(r).length;if(t===e)return{selectionStart:n,selectionEnd:n};var s=i.slice(t,e);return{selectionStart:n,selectionEnd:n+this.graphemeSplit(s).length}},fromGraphemeToStringSelection:function(t,e,i){var r=i.slice(0,t).join("").length;return t===e?{selectionStart:r,selectionEnd:r}:{selectionStart:r,selectionEnd:r+i.slice(t,e).join("").length}},_updateTextarea:function(){if(this.cursorOffsetCache={},this.hiddenTextarea){if(!this.inCompositionMode){var t=this.fromGraphemeToStringSelection(this.selectionStart,this.selectionEnd,this._text);this.hiddenTextarea.selectionStart=t.selectionStart,this.hiddenTextarea.selectionEnd=t.selectionEnd}this.updateTextareaPosition()}},updateFromTextArea:function(){if(this.hiddenTextarea){this.cursorOffsetCache={},this.text=this.hiddenTextarea.value,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords());var t=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value);this.selectionEnd=this.selectionStart=t.selectionEnd,this.inCompositionMode||(this.selectionStart=t.selectionStart),this.updateTextareaPosition()}},updateTextareaPosition:function(){if(this.selectionStart===this.selectionEnd){var t=this._calcTextareaPosition();this.hiddenTextarea.style.left=t.left,this.hiddenTextarea.style.top=t.top}},_calcTextareaPosition:function(){if(!this.canvas)return{x:1,y:1};var t=this.inCompositionMode?this.compositionStart:this.selectionStart,i=this._getCursorBoundaries(t),r=this.get2DCursorLocation(t),n=r.lineIndex,s=r.charIndex,o=this.getValueOfPropertyAt(n,s,"fontSize")*this.lineHeight,a=i.leftOffset,h=this.calcTransformMatrix(),c={x:i.left+a,y:i.top+i.topOffset+o},l=this.canvas.getRetinaScaling(),u=this.canvas.upperCanvasEl,f=u.width/l,d=u.height/l,g=f-o,p=d-o,v=u.clientWidth/f,m=u.clientHeight/d;return c=e.util.transformPoint(c,h),(c=e.util.transformPoint(c,this.canvas.viewportTransform)).x*=v,c.y*=m,c.x<0&&(c.x=0),c.x>g&&(c.x=g),c.y<0&&(c.y=0),c.y>p&&(c.y=p),c.x+=this.canvas._offset.left,c.y+=this.canvas._offset.top,{left:c.x+"px",top:c.y+"px",fontSize:o+"px",charHeight:o}},_saveEditingProps:function(){this._savedProps={hasControls:this.hasControls,borderColor:this.borderColor,lockMovementX:this.lockMovementX,lockMovementY:this.lockMovementY,hoverCursor:this.hoverCursor,selectable:this.selectable,defaultCursor:this.canvas&&this.canvas.defaultCursor,moveCursor:this.canvas&&this.canvas.moveCursor}},_restoreEditingProps:function(){this._savedProps&&(this.hoverCursor=this._savedProps.hoverCursor,this.hasControls=this._savedProps.hasControls,this.borderColor=this._savedProps.borderColor,this.selectable=this._savedProps.selectable,this.lockMovementX=this._savedProps.lockMovementX,this.lockMovementY=this._savedProps.lockMovementY,this.canvas&&(this.canvas.defaultCursor=this._savedProps.defaultCursor,this.canvas.moveCursor=this._savedProps.moveCursor),delete this._savedProps)},exitEditing:function(){var t=this._textBeforeEdit!==this.text,e=this.hiddenTextarea;return this.selected=!1,this.isEditing=!1,this.selectionEnd=this.selectionStart,e&&(e.blur&&e.blur(),e.parentNode&&e.parentNode.removeChild(e)),this.hiddenTextarea=null,this.abortCursorAnimation(),this._restoreEditingProps(),this._currentCursorOpacity=0,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this.fire("editing:exited"),t&&this.fire("modified"),this.canvas&&(this.canvas.off("mouse:move",this.mouseMoveHandler),this.canvas.fire("text:editing:exited",{target:this}),t&&this.canvas.fire("object:modified",{target:this})),this},_removeExtraneousStyles:function(){for(var t in this.styles)this._textLines[t]||delete this.styles[t]},removeStyleFromTo:function(t,e){var i,r,n=this.get2DCursorLocation(t,!0),s=this.get2DCursorLocation(e,!0),o=n.lineIndex,a=n.charIndex,h=s.lineIndex,c=s.charIndex;if(o!==h){if(this.styles[o])for(i=a;i=c&&(r[l-f]=r[u],delete r[u])}},shiftLineStyles:function(t,e){var i=Object.assign({},this.styles);for(var r in this.styles){var n=parseInt(r,10);n>t&&(this.styles[n+e]=i[n],i[n-e]||delete this.styles[n])}},restartCursorIfNeeded:function(){this._currentTickState&&!this._currentTickState.isAborted&&this._currentTickCompleteState&&!this._currentTickCompleteState.isAborted||this.initDelayedCursor()},insertNewlineStyleObject:function(t,e,i,r){var n,s={},o=!1,a=this._unwrappedTextLines[t].length===e;for(var h in i||(i=1),this.shiftLineStyles(t,i),this.styles[t]&&(n=this.styles[t][0===e?e:e-1]),this.styles[t]){var c=parseInt(h,10);c>=e&&(o=!0,s[c-e]=this.styles[t][h],a&&0===e||delete this.styles[t][h])}var l=!1;for(o&&!a&&(this.styles[t+i]=s,l=!0),l&&i--;i>0;)r&&r[i-1]?this.styles[t+i]={0:Object.assign({},r[i-1])}:n?this.styles[t+i]={0:Object.assign({},n)}:delete this.styles[t+i],i--;this._forceClearCache=!0},insertCharStyleObject:function(t,e,i,r){this.styles||(this.styles={});var n=this.styles[t],s=n?Object.assign({},n):{};for(var o in i||(i=1),s){var a=parseInt(o,10);a>=e&&(n[a+i]=s[a],s[a-i]||delete n[a])}if(this._forceClearCache=!0,r)for(;i--;)Object.keys(r[i]).length&&(this.styles[t]||(this.styles[t]={}),this.styles[t][e+i]=Object.assign({},r[i]));else if(n)for(var h=n[e?e-1:1];h&&i--;)this.styles[t][e+i]=Object.assign({},h)},insertNewStyleBlock:function(t,e,i){for(var r=this.get2DCursorLocation(e,!0),n=[0],s=0,o=0;o0&&(this.insertCharStyleObject(r.lineIndex,r.charIndex,n[0],i),i=i&&i.slice(n[0]+1)),s&&this.insertNewlineStyleObject(r.lineIndex,r.charIndex+n[0],s);for(o=1;o0?this.insertCharStyleObject(r.lineIndex+o,0,n[o],i):i&&this.styles[r.lineIndex+o]&&i[0]&&(this.styles[r.lineIndex+o][0]=i[0]),i=i&&i.slice(n[o]+1);n[o]>0&&this.insertCharStyleObject(r.lineIndex+o,0,n[o],i)},setSelectionStartEndWithShift:function(t,e,i){i<=t?(e===t?this._selectionDirection="left":"right"===this._selectionDirection&&(this._selectionDirection="left",this.selectionEnd=t),this.selectionStart=i):i>t&&it?this.selectionStart=t:this.selectionStart<0&&(this.selectionStart=0),this.selectionEnd>t?this.selectionEnd=t:this.selectionEnd<0&&(this.selectionEnd=0)}})}(void 0!==t||window),fabric.util.object.extend(fabric.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+new Date,this.__lastLastClickTime=+new Date,this.__lastPointer={},this.on("mousedown",this.onMouseDown)},onMouseDown:function(t){if(this.canvas){this.__newClickTime=+new Date;var e=t.pointer;this.isTripleClick(e)&&(this.fire("tripleclick",t),this._stopEvent(t.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=e,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected}},isTripleClick:function(t){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===t.x&&this.__lastPointer.y===t.y},_stopEvent:function(t){t.preventDefault&&t.preventDefault(),t.stopPropagation&&t.stopPropagation()},initCursorSelectionHandlers:function(){this.initMousedownHandler(),this.initMouseupHandler(),this.initClicks()},doubleClickHandler:function(t){this.isEditing&&this.selectWord(this.getSelectionStartFromPointer(t.e))},tripleClickHandler:function(t){this.isEditing&&this.selectLine(this.getSelectionStartFromPointer(t.e))},initClicks:function(){this.on("mousedblclick",this.doubleClickHandler),this.on("tripleclick",this.tripleClickHandler)},_mouseDownHandler:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.__isMousedown=!0,this.selected&&(this.inCompositionMode=!1,this.setCursorByClick(t.e)),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.selectionStart===this.selectionEnd&&this.abortCursorAnimation(),this.renderCursorOrSelection()))},_mouseDownHandlerBefore:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.selected=this===this.canvas._activeObject)},initMousedownHandler:function(){this.on("mousedown",this._mouseDownHandler),this.on("mousedown:before",this._mouseDownHandlerBefore)},initMouseupHandler:function(){this.on("mouseup",this.mouseUpHandler)},mouseUpHandler:function(t){if(this.__isMousedown=!1,!(!this.editable||this.group&&!this.group.interactive||t.transform&&t.transform.actionPerformed||t.e.button&&1!==t.e.button)){if(this.canvas){var e=this.canvas._activeObject;if(e&&e!==this)return}this.__lastSelected&&!this.__corner?(this.selected=!1,this.__lastSelected=!1,this.enterEditing(t.e),this.selectionStart===this.selectionEnd?this.initDelayedCursor(!0):this.renderCursorOrSelection()):this.selected=!0}},setCursorByClick:function(t){var e=this.getSelectionStartFromPointer(t),i=this.selectionStart,r=this.selectionEnd;t.shiftKey?this.setSelectionStartEndWithShift(i,r,e):(this.selectionStart=e,this.selectionEnd=e),this.isEditing&&(this._fireSelectionChanged(),this._updateTextarea())},getSelectionStartFromPointer:function(t){for(var e,i=this.getLocalPointer(t),r=0,n=0,s=0,o=0,a=0,h=0,c=this._textLines.length;h0&&(o+=this._textLines[h-1].length+this.missingNewlineOffset(h-1));n=Math.abs(this._getLineLeftOffset(a))*this.scaleX,e=this._textLines[a],"rtl"===this.direction&&(i.x=this.width*this.scaleX-i.x);for(var l=0,u=e.length;ls||o<0?0:1);return this.flipX&&(a=n-a),a>this._text.length&&(a=this._text.length),a}}),fabric.util.object.extend(fabric.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=fabric.document.createElement("textarea"),this.hiddenTextarea.setAttribute("autocapitalize","off"),this.hiddenTextarea.setAttribute("autocorrect","off"),this.hiddenTextarea.setAttribute("autocomplete","off"),this.hiddenTextarea.setAttribute("spellcheck","false"),this.hiddenTextarea.setAttribute("data-fabric-hiddentextarea",""),this.hiddenTextarea.setAttribute("wrap","off");var t=this._calcTextareaPosition();this.hiddenTextarea.style.cssText="position: absolute; top: "+t.top+"; left: "+t.left+"; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; padding-top: "+t.fontSize+";",this.hiddenTextareaContainer?this.hiddenTextareaContainer.appendChild(this.hiddenTextarea):fabric.document.body.appendChild(this.hiddenTextarea),fabric.util.addListener(this.hiddenTextarea,"blur",this.blur.bind(this)),fabric.util.addListener(this.hiddenTextarea,"keydown",this.onKeyDown.bind(this)),fabric.util.addListener(this.hiddenTextarea,"keyup",this.onKeyUp.bind(this)),fabric.util.addListener(this.hiddenTextarea,"input",this.onInput.bind(this)),fabric.util.addListener(this.hiddenTextarea,"copy",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"cut",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"paste",this.paste.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionstart",this.onCompositionStart.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionupdate",this.onCompositionUpdate.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionend",this.onCompositionEnd.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(fabric.util.addListener(this.canvas.upperCanvasEl,"click",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},keysMap:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorRight",36:"moveCursorLeft",37:"moveCursorLeft",38:"moveCursorUp",39:"moveCursorRight",40:"moveCursorDown"},keysMapRtl:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorLeft",36:"moveCursorRight",37:"moveCursorRight",38:"moveCursorUp",39:"moveCursorLeft",40:"moveCursorDown"},ctrlKeysMapUp:{67:"copy",88:"cut"},ctrlKeysMapDown:{65:"selectAll"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},blur:function(){this.abortCursorAnimation()},onKeyDown:function(t){if(this.isEditing){var e="rtl"===this.direction?this.keysMapRtl:this.keysMap;if(t.keyCode in e)this[e[t.keyCode]](t);else{if(!(t.keyCode in this.ctrlKeysMapDown)||!t.ctrlKey&&!t.metaKey)return;this[this.ctrlKeysMapDown[t.keyCode]](t)}t.stopImmediatePropagation(),t.preventDefault(),t.keyCode>=33&&t.keyCode<=40?(this.inCompositionMode=!1,this.clearContextTop(),this.renderCursorOrSelection()):this.canvas&&this.canvas.requestRenderAll()}},onKeyUp:function(t){!this.isEditing||this._copyDone||this.inCompositionMode?this._copyDone=!1:t.keyCode in this.ctrlKeysMapUp&&(t.ctrlKey||t.metaKey)&&(this[this.ctrlKeysMapUp[t.keyCode]](t),t.stopImmediatePropagation(),t.preventDefault(),this.canvas&&this.canvas.requestRenderAll())},onInput:function(t){var e=this.fromPaste;if(this.fromPaste=!1,t&&t.stopPropagation(),this.isEditing){var i,r,n,s,o,a=this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText,h=this._text.length,c=a.length,l=c-h,u=this.selectionStart,f=this.selectionEnd,d=u!==f;if(""===this.hiddenTextarea.value)return this.styles={},this.updateFromTextArea(),this.fire("changed"),void(this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll()));var g=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value),p=u>g.selectionStart;d?(i=this._text.slice(u,f),l+=f-u):c0&&(r+=(i=this.__charBounds[t][e-1]).left+i.width),r},getDownCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),r=this.get2DCursorLocation(i),n=r.lineIndex;if(n===this._textLines.length-1||t.metaKey||34===t.keyCode)return this._text.length-i;var s=r.charIndex,o=this._getWidthBeforeCursor(n,s),a=this._getIndexOnLine(n+1,o);return this._textLines[n].slice(s).length+a+1+this.missingNewlineOffset(n)},_getSelectionForOffset:function(t,e){return t.shiftKey&&this.selectionStart!==this.selectionEnd&&e?this.selectionEnd:this.selectionStart},getUpCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),r=this.get2DCursorLocation(i),n=r.lineIndex;if(0===n||t.metaKey||33===t.keyCode)return-i;var s=r.charIndex,o=this._getWidthBeforeCursor(n,s),a=this._getIndexOnLine(n-1,o),h=this._textLines[n].slice(0,s),c=this.missingNewlineOffset(n-1);return-this._textLines[n-1].length+a-h.length+(1-c)},_getIndexOnLine:function(t,e){for(var i,r,n=this._textLines[t],s=this._getLineLeftOffset(t),o=0,a=0,h=n.length;ae){r=!0;var c=s-i,l=s,u=Math.abs(c-e);o=Math.abs(l-e)=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorUpOrDown("Down",t)},moveCursorUp:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorUpOrDown("Up",t)},_moveCursorUpOrDown:function(t,e){var i=this["get"+t+"CursorOffset"](e,"right"===this._selectionDirection);e.shiftKey?this.moveCursorWithShift(i):this.moveCursorWithoutShift(i),0!==i&&(this.setSelectionInBoundaries(),this.abortCursorAnimation(),this._currentCursorOpacity=1,this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorWithShift:function(t){var e="left"===this._selectionDirection?this.selectionStart+t:this.selectionEnd+t;return this.setSelectionStartEndWithShift(this.selectionStart,this.selectionEnd,e),0!==t},moveCursorWithoutShift:function(t){return t<0?(this.selectionStart+=t,this.selectionEnd=this.selectionStart):(this.selectionEnd+=t,this.selectionStart=this.selectionEnd),0!==t},moveCursorLeft:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorLeftOrRight("Left",t)},_move:function(t,e,i){var r;if(t.altKey)r=this["findWordBoundary"+i](this[e]);else{if(!t.metaKey&&35!==t.keyCode&&36!==t.keyCode)return this[e]+="Left"===i?-1:1,!0;r=this["findLineBoundary"+i](this[e])}if(void 0!==typeof r&&this[e]!==r)return this[e]=r,!0},_moveLeft:function(t,e){return this._move(t,e,"Left")},_moveRight:function(t,e){return this._move(t,e,"Right")},moveCursorLeftWithoutShift:function(t){var e=!0;return this._selectionDirection="left",this.selectionEnd===this.selectionStart&&0!==this.selectionStart&&(e=this._moveLeft(t,"selectionStart")),this.selectionEnd=this.selectionStart,e},moveCursorLeftWithShift:function(t){return"right"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveLeft(t,"selectionEnd"):0!==this.selectionStart?(this._selectionDirection="left",this._moveLeft(t,"selectionStart")):void 0},moveCursorRight:function(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorLeftOrRight("Right",t)},_moveCursorLeftOrRight:function(t,e){var i="moveCursor"+t+"With";this._currentCursorOpacity=1,e.shiftKey?i+="Shift":i+="outShift",this[i](e)&&(this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorRightWithShift:function(t){return"left"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveRight(t,"selectionStart"):this.selectionEnd!==this._text.length?(this._selectionDirection="right",this._moveRight(t,"selectionEnd")):void 0},moveCursorRightWithoutShift:function(t){var e=!0;return this._selectionDirection="right",this.selectionStart===this.selectionEnd?(e=this._moveRight(t,"selectionStart"),this.selectionEnd=this.selectionStart):this.selectionStart=this.selectionEnd,e},removeChars:function(t,e){void 0===e&&(e=t+1),this.removeStyleFromTo(t,e),this._text.splice(t,e-t),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()},insertChars:function(t,e,i,r){void 0===r&&(r=i),r>i&&this.removeStyleFromTo(i,r);var n=this.graphemeSplit(t);this.insertNewStyleBlock(n,i,e),this._text=[].concat(this._text.slice(0,i),n,this._text.slice(r)),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()}}),function(t){var e=fabric.util.toFixed,i=/ +/g;fabric.util.object.extend(fabric.Text.prototype,{_toSVG:function(){var t=this._getSVGLeftTopOffsets(),e=this._getSVGTextAndBg(t.textTop,t.textLeft);return this._wrapSVGTextAndBg(e)},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,noStyle:!0,withShadow:!0})},_getSVGLeftTopOffsets:function(){return{textLeft:-this.width/2,textTop:-this.height/2,lineTop:this.getHeightOfLine(0)}},_wrapSVGTextAndBg:function(t){var e=this.getSvgTextDecoration(this);return[t.textBgRects.join(""),'\t\t",t.textSpans.join(""),"\n"]},_getSVGTextAndBg:function(t,e){var i,r=[],n=[],s=t;this._setSVGBg(n);for(var o=0,a=this._textLines.length;o",fabric.util.string.escapeXml(t),""].join("")},_setSVGTextLineText:function(t,e,i,r){var n,s,o,a,h,c=this.getHeightOfLine(e),l=-1!==this.textAlign.indexOf("justify"),u="",f=0,d=this._textLines[e];r+=c*(1-this._fontSizeFraction)/this.lineHeight;for(var g=0,p=d.length-1;g<=p;g++)h=g===p||this.charSpacing,u+=d[g],o=this.__charBounds[e][g],0===f?(i+=o.kernedWidth-o.width,f+=o.width):f+=o.kernedWidth,l&&!h&&this._reSpaceAndTab.test(d[g])&&(h=!0),h||(n=n||this.getCompleteStyleDeclaration(e,g),s=this.getCompleteStyleDeclaration(e,g+1),h=this._hasStyleChangedForSvg(n,s)),h&&(a=this._getStyleDeclaration(e,g)||{},t.push(this._createTextCharSpan(u,a,i,r)),u="",n=s,"rtl"===this.direction?i-=f:i+=f,f=0)},_pushTextBgRect:function(t,i,r,n,s,o){var a=fabric.Object.NUM_FRACTION_DIGITS;t.push("\t\t\n')},_setSVGTextLineBg:function(t,e,i,r){for(var n,s,o=this._textLines[e],a=this.getHeightOfLine(e)/this.lineHeight,h=0,c=0,l=this.getValueOfPropertyAt(e,0,"textBackgroundColor"),u=0,f=o.length;uthis.width&&this._set("width",this.dynamicMinWidth),-1!==this.textAlign.indexOf("justify")&&this.enlargeSpaces(),this.height=this.calcTextHeight(),this.saveState({propertySet:"_dimensionAffectingProps"}))},_generateStyleMap:function(t){for(var e=0,i=0,r=0,n={},s=0;s0?(i=0,r++,e++):!this.splitByGrapheme&&this._reSpaceAndTab.test(t.graphemeText[r])&&s>0&&(i++,r++),n[s]={line:e,offset:i},r+=t.graphemeLines[s].length,i+=t.graphemeLines[s].length;return n},styleHas:function(t,i){if(this._styleMap&&!this.isWrapping){var r=this._styleMap[i];r&&(i=r.line)}return e.Text.prototype.styleHas.call(this,t,i)},isEmptyStyles:function(t){if(!this.styles)return!0;var e,i,r=0,n=!1,s=this._styleMap[t],o=this._styleMap[t+1];for(var a in s&&(t=s.line,r=s.offset),o&&(n=o.line===t,e=o.offset),i=void 0===t?this.styles:{line:this.styles[t]})for(var h in i[a])if(h>=r&&(!n||hb&&!p?(o.push(a),a=[],n=f,p=!0):n+=v,p||s||a.push(u),a=a.concat(c),d=s?0:this._measureWord([u],e,l),l++,p=!1;return y&&o.push(a),g+r>this.dynamicMinWidth&&(this.dynamicMinWidth=g-v+r),o},isEndOfWrapping:function(t){return!this._styleMap[t+1]||this._styleMap[t+1].line!==this._styleMap[t].line},missingNewlineOffset:function(t){return this.splitByGrapheme?this.isEndOfWrapping(t)?1:0:1},_splitTextIntoLines:function(t){for(var i=e.Text.prototype._splitTextIntoLines.call(this,t),r=this._wrapText(i.lines,this.width),n=new Array(r.length),s=0;s',this.eraser.toSVG(t),"","\n"].join("")):""},_createBaseClipPathSVGMarkup:function(t,e){return[this._createEraserSVGMarkup(e&&e.reviver),n.call(this,t,e)].join("")},_createBaseSVGMarkup:function(t,e){return[this._createEraserSVGMarkup(e&&e.reviver),s.call(this,t,e)].join("")}}),fabric.util.object.extend(fabric.Group.prototype,{_addEraserPathToObjects:function(t){return Promise.all(this._objects.map((function(e){return fabric.EraserBrush.prototype._addPathToObjectEraser.call(fabric.EraserBrush.prototype,e,t)})))},applyEraserToObjects:function(){var t=this,e=this.eraser;return Promise.resolve().then((function(){if(e){delete t.eraser;var i=t.calcTransformMatrix();return e.clone().then((function(e){var r=t.clipPath;return Promise.all(e.getObjects("path").map((function(e){var n=fabric.util.multiplyTransformMatrices(i,e.calcTransformMatrix());return fabric.util.applyTransformToObject(e,n),r?r.clone().then((function(r){var n=fabric.EraserBrush.prototype.applyClipPathToPath.call(fabric.EraserBrush.prototype,e,r,i);return t._addEraserPathToObjects(n)}),["absolutePositioned","inverted"]):t._addEraserPathToObjects(e)})))}))}}))}}),fabric.Eraser=fabric.util.createClass(fabric.Group,{type:"eraser",originX:"center",originY:"center",layout:"fixed",drawObject:function(t){t.save(),t.fillStyle="black",t.fillRect(-this.width/2,-this.height/2,this.width,this.height),t.restore(),this.callSuper("drawObject",t)},_toSVG:function(t){var e=["\n"],i=["\n'].join("");e.push("\t\t",i);for(var r=0,n=this._objects.length;r\n"),e}}),fabric.Eraser.fromObject=function(t){var e=t.objects||[],i=fabric.util.object.clone(t,!0);return delete i.objects,Promise.all([fabric.util.enlivenObjects(e),fabric.util.enlivenObjectEnlivables(i)]).then((function(t){return new fabric.Eraser(t[0],Object.assign(i,t[1]),!0)}))};var o=fabric.Canvas.prototype._renderOverlay;fabric.util.object.extend(fabric.Canvas.prototype,{isErasing:function(){return this.isDrawingMode&&this.freeDrawingBrush&&"eraser"===this.freeDrawingBrush.type&&this.freeDrawingBrush._isErasing},_renderOverlay:function(t){o.call(this,t),this.isErasing()&&this.freeDrawingBrush._render()}}),fabric.EraserBrush=fabric.util.createClass(fabric.PencilBrush,{type:"eraser",inverted:!1,erasingWidthAliasing:4,_isErasing:!1,_isErasable:function(t){return!1!==t.erasable},_prepareCollectionTraversal:function(t,e,i,r){e.forEach((function(e){var n=!1;if(e.forEachObject&&"deep"===e.erasable)this._prepareCollectionTraversal(e,e._objects,i,r);else if(!this.inverted&&e.erasable&&e.visible)e.visible=!1,r.visibility.push(e),n=!0;else if(this.inverted&&e.erasable&&e.eraser&&e.visible){var s=e.eraser;e.eraser=void 0,e.dirty=!0,r.eraser.push([e,s]),n=!0}n&&t instanceof fabric.Object&&(t.dirty=!0,r.collection.push(t))}),this)},preparePattern:function(t){this._patternCanvas||(this._patternCanvas=fabric.util.createCanvasElement());var e=this._patternCanvas;t=t||this.canvas._objectsToRender||this.canvas._objects,e.width=this.canvas.width,e.height=this.canvas.height;var i=e.getContext("2d");if(this.canvas._isRetinaScaling()){var r=this.canvas.getRetinaScaling();this.canvas.__initRetinaScaling(r,e,i)}var n=this.canvas.backgroundImage,s=n&&this._isErasable(n),a=this.canvas.overlayImage,h=a&&this._isErasable(a);if(!this.inverted&&(n&&!s||this.canvas.backgroundColor))s&&(this.canvas.backgroundImage=void 0),this.canvas._renderBackground(i),s&&(this.canvas.backgroundImage=n);else if(this.inverted){(l=n&&n.eraser)&&(n.eraser=void 0,n.dirty=!0),this.canvas._renderBackground(i),l&&(n.eraser=l,n.dirty=!0)}i.save(),i.transform.apply(i,this.canvas.viewportTransform);var c={visibility:[],eraser:[],collection:[]};if(this._prepareCollectionTraversal(this.canvas,t,i,c),this.canvas._renderObjects(i,t),c.visibility.forEach((function(t){t.visible=!0})),c.eraser.forEach((function(t){var e=t[0],i=t[1];e.eraser=i,e.dirty=!0})),c.collection.forEach((function(t){t.dirty=!0})),i.restore(),!this.inverted&&(a&&!h||this.canvas.overlayColor))h&&(this.canvas.overlayImage=void 0),o.call(this.canvas,i),h&&(this.canvas.overlayImage=a);else if(this.inverted){var l;(l=a&&a.eraser)&&(a.eraser=void 0,a.dirty=!0),o.call(this.canvas,i),l&&(a.eraser=l,a.dirty=!0)}},_setBrushStyles:function(t){this.callSuper("_setBrushStyles",t),t.strokeStyle="black"},_saveAndTransform:function(t){this.callSuper("_saveAndTransform",t),this._setBrushStyles(t),t.globalCompositeOperation=t===this.canvas.getContext()?"destination-out":"destination-in"},needsFullRender:function(){return!0},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this._prepareForDrawing(t),this._captureDrawingPath(t),this.preparePattern(),this._isErasing=!0,this.canvas.fire("erasing:start"),this._render())},_render:function(){var t,e=this.width,i=1/this.canvas.getRetinaScaling();t=this.canvas.getContext(),e-this.erasingWidthAliasing>0&&(this.width=e-this.erasingWidthAliasing,this.callSuper("_render",t),this.width=e),t=this.canvas.contextTop,this.canvas.clearContext(t),t.save(),t.scale(i,i),t.drawImage(this._patternCanvas,0,0),t.restore(),this.callSuper("_render",t)},createPath:function(t){var e=this.callSuper("createPath",t);return e.globalCompositeOperation=this.inverted?"source-over":"destination-out",e.stroke=this.inverted?"white":"black",e},applyClipPathToPath:function(t,e,i){var r=fabric.util.invertTransform(t.calcTransformMatrix()),n=e.calcTransformMatrix(),s=e.absolutePositioned?r:fabric.util.multiplyTransformMatrices(r,i);return e.absolutePositioned=!1,fabric.util.applyTransformToObject(e,fabric.util.multiplyTransformMatrices(s,n)),t.clipPath=t.clipPath?fabric.util.mergeClipPaths(e,t.clipPath):e,t},clonePathWithClipPath:function(t,e){var i=e.calcTransformMatrix(),r=e.clipPath,n=this;return Promise.all([t.clone(),r.clone(["absolutePositioned","inverted"])]).then((function(t){return n.applyClipPathToPath(t[0],t[1],i)}))},_addPathToObjectEraser:function(t,e,i){var r=this;if(t.forEachObject&&"deep"===t.erasable){var n=t._objects.filter((function(t){return t.erasable}));return n.length>0&&t.clipPath?this.clonePathWithClipPath(e,t).then((function(t){return Promise.all(n.map((function(e){return r._addPathToObjectEraser(e,t,i)})))})):n.length>0?Promise.all(n.map((function(t){return r._addPathToObjectEraser(t,e,i)}))):void 0}var s=t.eraser;return s||(s=new fabric.Eraser,t.eraser=s),e.clone().then((function(e){var r=fabric.util.multiplyTransformMatrices(fabric.util.invertTransform(t.calcTransformMatrix()),e.calcTransformMatrix());return fabric.util.applyTransformToObject(e,r),s.add(e),t.set("dirty",!0),t.fire("erasing:end",{path:e}),i&&(t.group?i.subTargets:i.targets).push(t),e}))},applyEraserToCanvas:function(t,e){var i=this.canvas;return Promise.all(["backgroundImage","overlayImage"].map((function(r){var n=i[r];return n&&n.erasable&&this._addPathToObjectEraser(n,t).then((function(t){return e&&(e.drawables[r]=n),t}))}),this))},_finalizeAndAddPath:function(){var t=this.canvas.contextTop,e=this.canvas;t.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate)),e.clearContext(e.contextTop),this._isErasing=!1;var i=this._points&&this._points.length>1?this.convertPointsToSVGPath(this._points):null;if(!i||this._isEmptySVGPath(i))return e.fire("erasing:end"),void e.requestRenderAll();var r=this.createPath(i);r.setCoords(),e.fire("before:path:created",{path:r});var n=this,s={targets:[],subTargets:[],drawables:{}},o=e._objects.map((function(t){return t.erasable&&t.intersectsWithObject(r,!0,!0)&&n._addPathToObjectEraser(t,r,s)}));return o.push(n.applyEraserToCanvas(r,s)),Promise.all(o).then((function(){e.fire("erasing:end",Object.assign(s,{path:r})),e.requestRenderAll(),n._resetShadow(),e.fire("path:created",{path:r})}))}})}(void 0!==t||window),t.fabric=g,Object.defineProperty(t,"__esModule",{value:!0}),t}({}); diff --git a/index.js b/index.js index b2ae1beddab..14a79d4ad70 100644 --- a/index.js +++ b/index.js @@ -95,6 +95,8 @@ import './src/mixins/itext.svg_export.js'; // optional itext import './src/shapes/textbox.class.js'; // optional textbox import './src/mixins/default_controls.js'; // optional interaction // extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect -import './src/mixins/eraser_brush.mixin.js'; // optional erasing +// import './src/mixins/eraser_brush.mixin.js'; // optional erasing -export { fabric }; +module.exports = { + fabric: fabric, +}; diff --git a/rollup.config.js b/rollup.config.js index 6a90b529f9c..4d3632636b5 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -9,11 +9,11 @@ export default { name: 'fabric', format: 'iife', }, - { - file: './dist/fabric.min.js', - format: 'iife', - name: 'fabric', - plugins: [terser()], - }, + // { + // file: './dist/fabric.min.js', + // format: 'iife', + // name: 'fabric', + // plugins: [terser()], + // }, ], }; diff --git a/src/brushes/base_brush.class.js b/src/brushes/base_brush.class.js index 8f5105c45c1..f740840edc2 100644 --- a/src/brushes/base_brush.class.js +++ b/src/brushes/base_brush.class.js @@ -1,140 +1,143 @@ -/** - * BaseBrush class - * @class fabric.BaseBrush - * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo} - */ -fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ { - - /** - * Color of a brush - * @type String - * @default - */ - color: 'rgb(0, 0, 0)', - - /** - * Width of a brush, has to be a Number, no string literals - * @type Number - * @default - */ - width: 1, - - /** - * Shadow object representing shadow of this shape. - * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), - * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 - * @type fabric.Shadow - * @default - */ - shadow: null, - - /** - * Line endings style of a brush (one of "butt", "round", "square") - * @type String - * @default - */ - strokeLineCap: 'round', - - /** - * Corner style of a brush (one of "bevel", "round", "miter") - * @type String - * @default - */ - strokeLineJoin: 'round', - - /** - * Maximum miter length (used for strokeLineJoin = "miter") of a brush's - * @type Number - * @default - */ - strokeMiterLimit: 10, - - /** - * Stroke Dash Array. - * @type Array - * @default - */ - strokeDashArray: null, - - /** - * When `true`, the free drawing is limited to the whiteboard size. Default to false. - * @type Boolean - * @default false - */ - - limitedToCanvasSize: false, - - - /** - * Sets brush styles - * @private - * @param {CanvasRenderingContext2D} ctx - */ - _setBrushStyles: function (ctx) { - ctx.strokeStyle = this.color; - ctx.lineWidth = this.width; - ctx.lineCap = this.strokeLineCap; - ctx.miterLimit = this.strokeMiterLimit; - ctx.lineJoin = this.strokeLineJoin; - ctx.setLineDash(this.strokeDashArray || []); - }, - - /** - * Sets the transformation on given context - * @param {RenderingContext2d} ctx context to render on - * @private - */ - _saveAndTransform: function(ctx) { - var v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - }, - +(function(global) { + var fabric = global.fabric; /** - * Sets brush shadow styles - * @private + * BaseBrush class + * @class fabric.BaseBrush + * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo} */ - _setShadow: function() { - if (!this.shadow) { - return; + fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ { + + /** + * Color of a brush + * @type String + * @default + */ + color: 'rgb(0, 0, 0)', + + /** + * Width of a brush, has to be a Number, no string literals + * @type Number + * @default + */ + width: 1, + + /** + * Shadow object representing shadow of this shape. + * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), + * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 + * @type fabric.Shadow + * @default + */ + shadow: null, + + /** + * Line endings style of a brush (one of "butt", "round", "square") + * @type String + * @default + */ + strokeLineCap: 'round', + + /** + * Corner style of a brush (one of "bevel", "round", "miter") + * @type String + * @default + */ + strokeLineJoin: 'round', + + /** + * Maximum miter length (used for strokeLineJoin = "miter") of a brush's + * @type Number + * @default + */ + strokeMiterLimit: 10, + + /** + * Stroke Dash Array. + * @type Array + * @default + */ + strokeDashArray: null, + + /** + * When `true`, the free drawing is limited to the whiteboard size. Default to false. + * @type Boolean + * @default false + */ + + limitedToCanvasSize: false, + + + /** + * Sets brush styles + * @private + * @param {CanvasRenderingContext2D} ctx + */ + _setBrushStyles: function (ctx) { + ctx.strokeStyle = this.color; + ctx.lineWidth = this.width; + ctx.lineCap = this.strokeLineCap; + ctx.miterLimit = this.strokeMiterLimit; + ctx.lineJoin = this.strokeLineJoin; + ctx.setLineDash(this.strokeDashArray || []); + }, + + /** + * Sets the transformation on given context + * @param {RenderingContext2d} ctx context to render on + * @private + */ + _saveAndTransform: function(ctx) { + var v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + }, + + /** + * Sets brush shadow styles + * @private + */ + _setShadow: function() { + if (!this.shadow) { + return; + } + + var canvas = this.canvas, + shadow = this.shadow, + ctx = canvas.contextTop, + zoom = canvas.getZoom(); + if (canvas && canvas._isRetinaScaling()) { + zoom *= fabric.devicePixelRatio; + } + + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * zoom; + ctx.shadowOffsetX = shadow.offsetX * zoom; + ctx.shadowOffsetY = shadow.offsetY * zoom; + }, + + needsFullRender: function() { + var color = new fabric.Color(this.color); + return color.getAlpha() < 1 || !!this.shadow; + }, + + /** + * Removes brush shadow styles + * @private + */ + _resetShadow: function() { + var ctx = this.canvas.contextTop; + + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, + + /** + * Check is pointer is outside canvas boundaries + * @param {Object} pointer + * @private + */ + _isOutSideCanvas: function(pointer) { + return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); } - - var canvas = this.canvas, - shadow = this.shadow, - ctx = canvas.contextTop, - zoom = canvas.getZoom(); - if (canvas && canvas._isRetinaScaling()) { - zoom *= fabric.devicePixelRatio; - } - - ctx.shadowColor = shadow.color; - ctx.shadowBlur = shadow.blur * zoom; - ctx.shadowOffsetX = shadow.offsetX * zoom; - ctx.shadowOffsetY = shadow.offsetY * zoom; - }, - - needsFullRender: function() { - var color = new fabric.Color(this.color); - return color.getAlpha() < 1 || !!this.shadow; - }, - - /** - * Removes brush shadow styles - * @private - */ - _resetShadow: function() { - var ctx = this.canvas.contextTop; - - ctx.shadowColor = ''; - ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; - }, - - /** - * Check is pointer is outside canvas boundaries - * @param {Object} pointer - * @private - */ - _isOutSideCanvas: function(pointer) { - return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/brushes/circle_brush.class.js b/src/brushes/circle_brush.class.js index 93b51ed6b2e..ac24fb3663f 100644 --- a/src/brushes/circle_brush.class.js +++ b/src/brushes/circle_brush.class.js @@ -1,144 +1,147 @@ -/** - * CircleBrush class - * @class fabric.CircleBrush - */ -fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ { - - /** - * Width of a brush - * @type Number - * @default - */ - width: 10, - +(function(global) { + var fabric = global.fabric; /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.CircleBrush} Instance of a circle brush + * CircleBrush class + * @class fabric.CircleBrush */ - initialize: function(canvas) { - this.canvas = canvas; - this.points = []; - }, - - /** - * Invoked inside on mouse down and mouse move - * @param {Object} pointer - */ - drawDot: function(pointer) { - var point = this.addPoint(pointer), - ctx = this.canvas.contextTop; - this._saveAndTransform(ctx); - this.dot(ctx, point); - ctx.restore(); - }, - - dot: function(ctx, point) { - ctx.fillStyle = point.fill; - ctx.beginPath(); - ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); - ctx.closePath(); - ctx.fill(); - }, - - /** - * Invoked on mouse down - */ - onMouseDown: function(pointer) { - this.points.length = 0; - this.canvas.clearContext(this.canvas.contextTop); - this._setShadow(); - this.drawDot(pointer); - }, - - /** - * Render the full state of the brush - * @private - */ - _render: function() { - var ctx = this.canvas.contextTop, i, len, - points = this.points; - this._saveAndTransform(ctx); - for (i = 0, len = points.length; i < len; i++) { - this.dot(ctx, points[i]); - } - ctx.restore(); - }, - - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer) { - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - if (this.needsFullRender()) { + fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ { + + /** + * Width of a brush + * @type Number + * @default + */ + width: 10, + + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.CircleBrush} Instance of a circle brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.points = []; + }, + + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + drawDot: function(pointer) { + var point = this.addPoint(pointer), + ctx = this.canvas.contextTop; + this._saveAndTransform(ctx); + this.dot(ctx, point); + ctx.restore(); + }, + + dot: function(ctx, point) { + ctx.fillStyle = point.fill; + ctx.beginPath(); + ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); + ctx.closePath(); + ctx.fill(); + }, + + /** + * Invoked on mouse down + */ + onMouseDown: function(pointer) { + this.points.length = 0; this.canvas.clearContext(this.canvas.contextTop); - this.addPoint(pointer); - this._render(); - } - else { + this._setShadow(); this.drawDot(pointer); - } - }, - - /** - * Invoked on mouse up - */ - onMouseUp: function() { - var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len; - this.canvas.renderOnAddRemove = false; - - var circles = []; - - for (i = 0, len = this.points.length; i < len; i++) { - var point = this.points[i], - circle = new fabric.Circle({ - radius: point.radius, - left: point.x, - top: point.y, - originX: 'center', - originY: 'center', - fill: point.fill - }); - - this.shadow && (circle.shadow = new fabric.Shadow(this.shadow)); - - circles.push(circle); - } - var group = new fabric.Group(circles); - group.canvas = this.canvas; + }, + + /** + * Render the full state of the brush + * @private + */ + _render: function() { + var ctx = this.canvas.contextTop, i, len, + points = this.points; + this._saveAndTransform(ctx); + for (i = 0, len = points.length; i < len; i++) { + this.dot(ctx, points[i]); + } + ctx.restore(); + }, + + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this.needsFullRender()) { + this.canvas.clearContext(this.canvas.contextTop); + this.addPoint(pointer); + this._render(); + } + else { + this.drawDot(pointer); + } + }, + + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len; + this.canvas.renderOnAddRemove = false; + + var circles = []; + + for (i = 0, len = this.points.length; i < len; i++) { + var point = this.points[i], + circle = new fabric.Circle({ + radius: point.radius, + left: point.x, + top: point.y, + originX: 'center', + originY: 'center', + fill: point.fill + }); + + this.shadow && (circle.shadow = new fabric.Shadow(this.shadow)); + + circles.push(circle); + } + var group = new fabric.Group(circles); + group.canvas = this.canvas; + + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); - this.canvas.fire('before:path:created', { path: group }); - this.canvas.add(group); - this.canvas.fire('path:created', { path: group }); + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, - this.canvas.clearContext(this.canvas.contextTop); - this._resetShadow(); - this.canvas.renderOnAddRemove = originalRenderOnAddRemove; - this.canvas.requestRenderAll(); - }, + /** + * @param {Object} pointer + * @return {fabric.Point} Just added pointer point + */ + addPoint: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y), - /** - * @param {Object} pointer - * @return {fabric.Point} Just added pointer point - */ - addPoint: function(pointer) { - var pointerPoint = new fabric.Point(pointer.x, pointer.y), - - circleRadius = fabric.util.getRandomInt( - Math.max(0, this.width - 20), this.width + 20) / 2, + circleRadius = fabric.util.getRandomInt( + Math.max(0, this.width - 20), this.width + 20) / 2, - circleColor = new fabric.Color(this.color) - .setAlpha(fabric.util.getRandomInt(0, 100) / 100) - .toRgba(); + circleColor = new fabric.Color(this.color) + .setAlpha(fabric.util.getRandomInt(0, 100) / 100) + .toRgba(); - pointerPoint.radius = circleRadius; - pointerPoint.fill = circleColor; + pointerPoint.radius = circleRadius; + pointerPoint.fill = circleColor; - this.points.push(pointerPoint); + this.points.push(pointerPoint); - return pointerPoint; - } -}); + return pointerPoint; + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/brushes/pattern_brush.class.js b/src/brushes/pattern_brush.class.js index 5d5fa0d842c..26e0e5bb841 100644 --- a/src/brushes/pattern_brush.class.js +++ b/src/brushes/pattern_brush.class.js @@ -1,61 +1,64 @@ -/** - * PatternBrush class - * @class fabric.PatternBrush - * @extends fabric.BaseBrush - */ -fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ { +(function(global) { + var fabric = global.fabric; + /** + * PatternBrush class + * @class fabric.PatternBrush + * @extends fabric.BaseBrush + */ + fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ { - getPatternSrc: function() { + getPatternSrc: function() { - var dotWidth = 20, - dotDistance = 5, - patternCanvas = fabric.util.createCanvasElement(), - patternCtx = patternCanvas.getContext('2d'); + var dotWidth = 20, + dotDistance = 5, + patternCanvas = fabric.util.createCanvasElement(), + patternCtx = patternCanvas.getContext('2d'); - patternCanvas.width = patternCanvas.height = dotWidth + dotDistance; + patternCanvas.width = patternCanvas.height = dotWidth + dotDistance; - patternCtx.fillStyle = this.color; - patternCtx.beginPath(); - patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false); - patternCtx.closePath(); - patternCtx.fill(); + patternCtx.fillStyle = this.color; + patternCtx.beginPath(); + patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false); + patternCtx.closePath(); + patternCtx.fill(); - return patternCanvas; - }, + return patternCanvas; + }, - getPatternSrcFunction: function() { - return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"'); - }, + getPatternSrcFunction: function() { + return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"'); + }, - /** - * Creates "pattern" instance property - * @param {CanvasRenderingContext2D} ctx - */ - getPattern: function(ctx) { - return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat'); - }, + /** + * Creates "pattern" instance property + * @param {CanvasRenderingContext2D} ctx + */ + getPattern: function(ctx) { + return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat'); + }, - /** - * Sets brush styles - * @param {CanvasRenderingContext2D} ctx - */ - _setBrushStyles: function(ctx) { - this.callSuper('_setBrushStyles', ctx); - ctx.strokeStyle = this.getPattern(ctx); - }, + /** + * Sets brush styles + * @param {CanvasRenderingContext2D} ctx + */ + _setBrushStyles: function(ctx) { + this.callSuper('_setBrushStyles', ctx); + ctx.strokeStyle = this.getPattern(ctx); + }, - /** - * Creates path - */ - createPath: function(pathData) { - var path = this.callSuper('createPath', pathData), - topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2); - - path.stroke = new fabric.Pattern({ - source: this.source || this.getPatternSrcFunction(), - offsetX: -topLeft.x, - offsetY: -topLeft.y - }); - return path; - } -}); + /** + * Creates path + */ + createPath: function(pathData) { + var path = this.callSuper('createPath', pathData), + topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2); + + path.stroke = new fabric.Pattern({ + source: this.source || this.getPatternSrcFunction(), + offsetX: -topLeft.x, + offsetY: -topLeft.y + }); + return path; + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 0dd6e39cc49..3221ec16191 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -1,309 +1,311 @@ -/** - * PencilBrush class - * @class fabric.PencilBrush - * @extends fabric.BaseBrush - */ -fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { - +(function(global) { + var fabric = global.fabric; /** - * Discard points that are less than `decimate` pixel distant from each other - * @type Number - * @default 0.4 + * PencilBrush class + * @class fabric.PencilBrush + * @extends fabric.BaseBrush */ - decimate: 0.4, + fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { - /** - * Draws a straight line between last recorded point to current pointer - * Used for `shift` functionality - * - * @type boolean - * @default false - */ - drawStraightLine: false, + /** + * Discard points that are less than `decimate` pixel distant from each other + * @type Number + * @default 0.4 + */ + decimate: 0.4, - /** - * The event modifier key that makes the brush draw a straight line. - * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. - * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} - */ - straightLineKey: 'shiftKey', + /** + * Draws a straight line between last recorded point to current pointer + * Used for `shift` functionality + * + * @type boolean + * @default false + */ + drawStraightLine: false, - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.PencilBrush} Instance of a pencil brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this._points = []; - }, + /** + * The event modifier key that makes the brush draw a straight line. + * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. + * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} + */ + straightLineKey: 'shiftKey', - needsFullRender: function () { - return this.callSuper('needsFullRender') || this._hasStraightLine; - }, + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.PencilBrush} Instance of a pencil brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this._points = []; + }, - /** - * Invoked inside on mouse down and mouse move - * @param {Object} pointer - */ - _drawSegment: function (ctx, p1, p2) { - var midPoint = p1.midPointFrom(p2); - ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); - return midPoint; - }, + needsFullRender: function () { + return this.callSuper('needsFullRender') || this._hasStraightLine; + }, - /** - * Invoked on mouse down - * @param {Object} pointer - */ - onMouseDown: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this.drawStraightLine = options.e[this.straightLineKey]; - this._prepareForDrawing(pointer); - // capture coordinates immediately - // this allows to draw dots (when movement never occurs) - this._captureDrawingPath(pointer); - this._render(); - }, + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + _drawSegment: function (ctx, p1, p2) { + var midPoint = p1.midPointFrom(p2); + ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); + return midPoint; + }, - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this.drawStraightLine = options.e[this.straightLineKey]; - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - if (this._captureDrawingPath(pointer) && this._points.length > 1) { - if (this.needsFullRender()) { - // redraw curve - // clear top canvas - this.canvas.clearContext(this.canvas.contextTop); - this._render(); + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; } - else { - var points = this._points, length = points.length, ctx = this.canvas.contextTop; - // draw the curve update - this._saveAndTransform(ctx); - if (this.oldEnd) { - ctx.beginPath(); - ctx.moveTo(this.oldEnd.x, this.oldEnd.y); + this.drawStraightLine = options.e[this.straightLineKey]; + this._prepareForDrawing(pointer); + // capture coordinates immediately + // this allows to draw dots (when movement never occurs) + this._captureDrawingPath(pointer); + this._render(); + }, + + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this.drawStraightLine = options.e[this.straightLineKey]; + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this._captureDrawingPath(pointer) && this._points.length > 1) { + if (this.needsFullRender()) { + // redraw curve + // clear top canvas + this.canvas.clearContext(this.canvas.contextTop); + this._render(); + } + else { + var points = this._points, length = points.length, ctx = this.canvas.contextTop; + // draw the curve update + this._saveAndTransform(ctx); + if (this.oldEnd) { + ctx.beginPath(); + ctx.moveTo(this.oldEnd.x, this.oldEnd.y); + } + this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); + ctx.stroke(); + ctx.restore(); } - this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); - ctx.stroke(); - ctx.restore(); } - } - }, + }, - /** - * Invoked on mouse up - */ - onMouseUp: function(options) { - if (!this.canvas._isMainEvent(options.e)) { - return true; - } - this.drawStraightLine = false; - this.oldEnd = undefined; - this._finalizeAndAddPath(); - return false; - }, + /** + * Invoked on mouse up + */ + onMouseUp: function(options) { + if (!this.canvas._isMainEvent(options.e)) { + return true; + } + this.drawStraightLine = false; + this.oldEnd = undefined; + this._finalizeAndAddPath(); + return false; + }, - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _prepareForDrawing: function(pointer) { + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _prepareForDrawing: function(pointer) { - var p = new fabric.Point(pointer.x, pointer.y); + var p = new fabric.Point(pointer.x, pointer.y); - this._reset(); - this._addPoint(p); - this.canvas.contextTop.moveTo(p.x, p.y); - }, + this._reset(); + this._addPoint(p); + this.canvas.contextTop.moveTo(p.x, p.y); + }, - /** - * @private - * @param {fabric.Point} point Point to be added to points array - */ - _addPoint: function(point) { - if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { - return false; - } - if (this.drawStraightLine && this._points.length > 1) { - this._hasStraightLine = true; - this._points.pop(); - } - this._points.push(point); - return true; - }, + /** + * @private + * @param {fabric.Point} point Point to be added to points array + */ + _addPoint: function(point) { + if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { + return false; + } + if (this.drawStraightLine && this._points.length > 1) { + this._hasStraightLine = true; + this._points.pop(); + } + this._points.push(point); + return true; + }, - /** - * Clear points array and set contextTop canvas style. - * @private - */ - _reset: function() { - this._points = []; - this._setBrushStyles(this.canvas.contextTop); - this._setShadow(); - this._hasStraightLine = false; - }, + /** + * Clear points array and set contextTop canvas style. + * @private + */ + _reset: function() { + this._points = []; + this._setBrushStyles(this.canvas.contextTop); + this._setShadow(); + this._hasStraightLine = false; + }, - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _captureDrawingPath: function(pointer) { - var pointerPoint = new fabric.Point(pointer.x, pointer.y); - return this._addPoint(pointerPoint); - }, + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _captureDrawingPath: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y); + return this._addPoint(pointerPoint); + }, - /** - * Draw a smooth path on the topCanvas using quadraticCurveTo - * @private - * @param {CanvasRenderingContext2D} [ctx] - */ - _render: function(ctx) { - var i, len, - p1 = this._points[0], - p2 = this._points[1]; - ctx = ctx || this.canvas.contextTop; - this._saveAndTransform(ctx); - ctx.beginPath(); - //if we only have 2 points in the path and they are the same - //it means that the user only clicked the canvas without moving the mouse - //then we should be drawing a dot. A path isn't drawn between two identical dots - //that's why we set them apart a bit - if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { - var width = this.width / 1000; - p1 = new fabric.Point(p1.x, p1.y); - p2 = new fabric.Point(p2.x, p2.y); - p1.x -= width; - p2.x += width; - } - ctx.moveTo(p1.x, p1.y); + /** + * Draw a smooth path on the topCanvas using quadraticCurveTo + * @private + * @param {CanvasRenderingContext2D} [ctx] + */ + _render: function(ctx) { + var i, len, + p1 = this._points[0], + p2 = this._points[1]; + ctx = ctx || this.canvas.contextTop; + this._saveAndTransform(ctx); + ctx.beginPath(); + //if we only have 2 points in the path and they are the same + //it means that the user only clicked the canvas without moving the mouse + //then we should be drawing a dot. A path isn't drawn between two identical dots + //that's why we set them apart a bit + if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { + var width = this.width / 1000; + p1 = new fabric.Point(p1.x, p1.y); + p2 = new fabric.Point(p2.x, p2.y); + p1.x -= width; + p2.x += width; + } + ctx.moveTo(p1.x, p1.y); - for (i = 1, len = this._points.length; i < len; i++) { - // we pick the point between pi + 1 & pi + 2 as the - // end point and p1 as our control point. - this._drawSegment(ctx, p1, p2); - p1 = this._points[i]; - p2 = this._points[i + 1]; - } - // Draw last line as a straight line while - // we wait for the next point to be able to calculate - // the bezier control point - ctx.lineTo(p1.x, p1.y); - ctx.stroke(); - ctx.restore(); - }, + for (i = 1, len = this._points.length; i < len; i++) { + // we pick the point between pi + 1 & pi + 2 as the + // end point and p1 as our control point. + this._drawSegment(ctx, p1, p2); + p1 = this._points[i]; + p2 = this._points[i + 1]; + } + // Draw last line as a straight line while + // we wait for the next point to be able to calculate + // the bezier control point + ctx.lineTo(p1.x, p1.y); + ctx.stroke(); + ctx.restore(); + }, - /** - * Converts points to SVG path - * @param {Array} points Array of points - * @return {(string|number)[][]} SVG path commands - */ - convertPointsToSVGPath: function (points) { - var correction = this.width / 1000; - return fabric.util.getSmoothPathFromPoints(points, correction); - }, + /** + * Converts points to SVG path + * @param {Array} points Array of points + * @return {(string|number)[][]} SVG path commands + */ + convertPointsToSVGPath: function (points) { + var correction = this.width / 1000; + return fabric.util.getSmoothPathFromPoints(points, correction); + }, - /** - * @private - * @param {(string|number)[][]} pathData SVG path commands - * @returns {boolean} - */ - _isEmptySVGPath: function (pathData) { - var pathString = fabric.util.joinPath(pathData); - return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; - }, + /** + * @private + * @param {(string|number)[][]} pathData SVG path commands + * @returns {boolean} + */ + _isEmptySVGPath: function (pathData) { + var pathString = fabric.util.joinPath(pathData); + return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; + }, - /** - * Creates fabric.Path object to add on canvas - * @param {(string|number)[][]} pathData Path data - * @return {fabric.Path} Path to add on canvas - */ - createPath: function(pathData) { - var path = new fabric.Path(pathData, { - fill: null, - stroke: this.color, - strokeWidth: this.width, - strokeLineCap: this.strokeLineCap, - strokeMiterLimit: this.strokeMiterLimit, - strokeLineJoin: this.strokeLineJoin, - strokeDashArray: this.strokeDashArray, - }); - if (this.shadow) { - this.shadow.affectStroke = true; - path.shadow = new fabric.Shadow(this.shadow); - } + /** + * Creates fabric.Path object to add on canvas + * @param {(string|number)[][]} pathData Path data + * @return {fabric.Path} Path to add on canvas + */ + createPath: function(pathData) { + var path = new fabric.Path(pathData, { + fill: null, + stroke: this.color, + strokeWidth: this.width, + strokeLineCap: this.strokeLineCap, + strokeMiterLimit: this.strokeMiterLimit, + strokeLineJoin: this.strokeLineJoin, + strokeDashArray: this.strokeDashArray, + }); + if (this.shadow) { + this.shadow.affectStroke = true; + path.shadow = new fabric.Shadow(this.shadow); + } - return path; - }, + return path; + }, - /** - * Decimate points array with the decimate value - */ - decimatePoints: function(points, distance) { - if (points.length <= 2) { - return points; - } - var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), - i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], - cDistance; - for (i = 1; i < l - 1; i++) { - cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); - if (cDistance >= adjustedDistance) { - lastPoint = points[i]; - newPoints.push(lastPoint); + /** + * Decimate points array with the decimate value + */ + decimatePoints: function(points, distance) { + if (points.length <= 2) { + return points; } - } + var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), + i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], + cDistance; + for (i = 1; i < l - 1; i++) { + cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); + if (cDistance >= adjustedDistance) { + lastPoint = points[i]; + newPoints.push(lastPoint); + } + } + /** + * Add the last point from the original line to the end of the array. + * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. + */ + newPoints.push(points[l]); + return newPoints; + }, + /** - * Add the last point from the original line to the end of the array. - * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. + * On mouseup after drawing the path on contextTop canvas + * we use the points captured to create an new fabric path object + * and add it to the fabric canvas. */ - newPoints.push(points[l]); - return newPoints; - }, + _finalizeAndAddPath: function() { + var ctx = this.canvas.contextTop; + ctx.closePath(); + if (this.decimate) { + this._points = this.decimatePoints(this._points, this.decimate); + } + var pathData = this.convertPointsToSVGPath(this._points); + if (this._isEmptySVGPath(pathData)) { + // do not create 0 width/height paths, as they are + // rendered inconsistently across browsers + // Firefox 4, for example, renders a dot, + // whereas Chrome 10 renders nothing + this.canvas.requestRenderAll(); + return; + } - /** - * On mouseup after drawing the path on contextTop canvas - * we use the points captured to create an new fabric path object - * and add it to the fabric canvas. - */ - _finalizeAndAddPath: function() { - var ctx = this.canvas.contextTop; - ctx.closePath(); - if (this.decimate) { - this._points = this.decimatePoints(this._points, this.decimate); - } - var pathData = this.convertPointsToSVGPath(this._points); - if (this._isEmptySVGPath(pathData)) { - // do not create 0 width/height paths, as they are - // rendered inconsistently across browsers - // Firefox 4, for example, renders a dot, - // whereas Chrome 10 renders nothing + var path = this.createPath(pathData); + this.canvas.clearContext(this.canvas.contextTop); + this.canvas.fire('before:path:created', { path: path }); + this.canvas.add(path); this.canvas.requestRenderAll(); - return; - } + path.setCoords(); + this._resetShadow(); - var path = this.createPath(pathData); - this.canvas.clearContext(this.canvas.contextTop); - this.canvas.fire('before:path:created', { path: path }); - this.canvas.add(path); - this.canvas.requestRenderAll(); - path.setCoords(); - this._resetShadow(); - - - // fire event 'path' created - this.canvas.fire('path:created', { path: path }); - } -}); + // fire event 'path' created + this.canvas.fire('path:created', { path: path }); + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/brushes/spray_brush.class.js b/src/brushes/spray_brush.class.js index 43e3dd4e3ca..3e8888402d4 100644 --- a/src/brushes/spray_brush.class.js +++ b/src/brushes/spray_brush.class.js @@ -1,224 +1,227 @@ -/** - * SprayBrush class - * @class fabric.SprayBrush - */ -fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ { - - /** - * Width of a spray - * @type Number - * @default - */ - width: 10, - - /** - * Density of a spray (number of dots per chunk) - * @type Number - * @default - */ - density: 20, - +(function(global) { + var fabric = global.fabric; /** - * Width of spray dots - * @type Number - * @default + * SprayBrush class + * @class fabric.SprayBrush */ - dotWidth: 1, - - /** - * Width variance of spray dots - * @type Number - * @default - */ - dotWidthVariance: 1, - - /** - * Whether opacity of a dot should be random - * @type Boolean - * @default - */ - randomOpacity: false, - - /** - * Whether overlapping dots (rectangles) should be removed (for performance reasons) - * @type Boolean - * @default - */ - optimizeOverlapping: true, - - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.SprayBrush} Instance of a spray brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this.sprayChunks = []; - }, - - /** - * Invoked on mouse down - * @param {Object} pointer - */ - onMouseDown: function(pointer) { - this.sprayChunks.length = 0; - this.canvas.clearContext(this.canvas.contextTop); - this._setShadow(); - - this.addSprayChunk(pointer); - this.render(this.sprayChunkPoints); - }, - - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer) { - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - this.addSprayChunk(pointer); - this.render(this.sprayChunkPoints); - }, + fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ { + + /** + * Width of a spray + * @type Number + * @default + */ + width: 10, + + /** + * Density of a spray (number of dots per chunk) + * @type Number + * @default + */ + density: 20, + + /** + * Width of spray dots + * @type Number + * @default + */ + dotWidth: 1, + + /** + * Width variance of spray dots + * @type Number + * @default + */ + dotWidthVariance: 1, + + /** + * Whether opacity of a dot should be random + * @type Boolean + * @default + */ + randomOpacity: false, + + /** + * Whether overlapping dots (rectangles) should be removed (for performance reasons) + * @type Boolean + * @default + */ + optimizeOverlapping: true, + + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.SprayBrush} Instance of a spray brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.sprayChunks = []; + }, + + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer) { + this.sprayChunks.length = 0; + this.canvas.clearContext(this.canvas.contextTop); + this._setShadow(); + + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, + + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, + + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove; + this.canvas.renderOnAddRemove = false; + + var rects = []; + + for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + var sprayChunk = this.sprayChunks[i]; + + for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) { + + var rect = new fabric.Rect({ + width: sprayChunk[j].width, + height: sprayChunk[j].width, + left: sprayChunk[j].x + 1, + top: sprayChunk[j].y + 1, + originX: 'center', + originY: 'center', + fill: this.color + }); + rects.push(rect); + } + } - /** - * Invoked on mouse up - */ - onMouseUp: function() { - var originalRenderOnAddRemove = this.canvas.renderOnAddRemove; - this.canvas.renderOnAddRemove = false; - - var rects = []; - - for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { - var sprayChunk = this.sprayChunks[i]; - - for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) { - - var rect = new fabric.Rect({ - width: sprayChunk[j].width, - height: sprayChunk[j].width, - left: sprayChunk[j].x + 1, - top: sprayChunk[j].y + 1, - originX: 'center', - originY: 'center', - fill: this.color - }); - rects.push(rect); + if (this.optimizeOverlapping) { + rects = this._getOptimizedRects(rects); } - } - if (this.optimizeOverlapping) { - rects = this._getOptimizedRects(rects); - } + var group = new fabric.Group(rects, { + objectCaching: true, + layout: 'fixed', + subTargetCheck: false, + interactive: false + }); + this.shadow && group.set('shadow', new fabric.Shadow(this.shadow)); + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); + + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, + + /** + * @private + * @param {Array} rects + */ + _getOptimizedRects: function(rects) { + + // avoid creating duplicate rects at the same coordinates + var uniqueRects = { }, key, i, len; + + for (i = 0, len = rects.length; i < len; i++) { + key = rects[i].left + '' + rects[i].top; + if (!uniqueRects[key]) { + uniqueRects[key] = rects[i]; + } + } + var uniqueRectsArray = []; + for (key in uniqueRects) { + uniqueRectsArray.push(uniqueRects[key]); + } - var group = new fabric.Group(rects, { - objectCaching: true, - layout: 'fixed', - subTargetCheck: false, - interactive: false - }); - this.shadow && group.set('shadow', new fabric.Shadow(this.shadow)); - this.canvas.fire('before:path:created', { path: group }); - this.canvas.add(group); - this.canvas.fire('path:created', { path: group }); - - this.canvas.clearContext(this.canvas.contextTop); - this._resetShadow(); - this.canvas.renderOnAddRemove = originalRenderOnAddRemove; - this.canvas.requestRenderAll(); - }, + return uniqueRectsArray; + }, - /** - * @private - * @param {Array} rects - */ - _getOptimizedRects: function(rects) { + /** + * Render new chunk of spray brush + */ + render: function(sprayChunk) { + var ctx = this.canvas.contextTop, i, len; + ctx.fillStyle = this.color; - // avoid creating duplicate rects at the same coordinates - var uniqueRects = { }, key, i, len; + this._saveAndTransform(ctx); - for (i = 0, len = rects.length; i < len; i++) { - key = rects[i].left + '' + rects[i].top; - if (!uniqueRects[key]) { - uniqueRects[key] = rects[i]; + for (i = 0, len = sprayChunk.length; i < len; i++) { + var point = sprayChunk[i]; + if (typeof point.opacity !== 'undefined') { + ctx.globalAlpha = point.opacity; + } + ctx.fillRect(point.x, point.y, point.width, point.width); } - } - var uniqueRectsArray = []; - for (key in uniqueRects) { - uniqueRectsArray.push(uniqueRects[key]); - } - - return uniqueRectsArray; - }, + ctx.restore(); + }, - /** - * Render new chunk of spray brush - */ - render: function(sprayChunk) { - var ctx = this.canvas.contextTop, i, len; - ctx.fillStyle = this.color; + /** + * Render all spray chunks + */ + _render: function() { + var ctx = this.canvas.contextTop, i, ilen; + ctx.fillStyle = this.color; - this._saveAndTransform(ctx); + this._saveAndTransform(ctx); - for (i = 0, len = sprayChunk.length; i < len; i++) { - var point = sprayChunk[i]; - if (typeof point.opacity !== 'undefined') { - ctx.globalAlpha = point.opacity; + for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + this.render(this.sprayChunks[i]); } - ctx.fillRect(point.x, point.y, point.width, point.width); - } - ctx.restore(); - }, + ctx.restore(); + }, - /** - * Render all spray chunks - */ - _render: function() { - var ctx = this.canvas.contextTop, i, ilen; - ctx.fillStyle = this.color; + /** + * @param {Object} pointer + */ + addSprayChunk: function(pointer) { + this.sprayChunkPoints = []; - this._saveAndTransform(ctx); + var x, y, width, radius = this.width / 2, i; - for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { - this.render(this.sprayChunks[i]); - } - ctx.restore(); - }, + for (i = 0; i < this.density; i++) { - /** - * @param {Object} pointer - */ - addSprayChunk: function(pointer) { - this.sprayChunkPoints = []; - - var x, y, width, radius = this.width / 2, i; - - for (i = 0; i < this.density; i++) { + x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius); + y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius); - x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius); - y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius); + if (this.dotWidthVariance) { + width = fabric.util.getRandomInt( + // bottom clamp width to 1 + Math.max(1, this.dotWidth - this.dotWidthVariance), + this.dotWidth + this.dotWidthVariance); + } + else { + width = this.dotWidth; + } - if (this.dotWidthVariance) { - width = fabric.util.getRandomInt( - // bottom clamp width to 1 - Math.max(1, this.dotWidth - this.dotWidthVariance), - this.dotWidth + this.dotWidthVariance); - } - else { - width = this.dotWidth; - } + var point = new fabric.Point(x, y); + point.width = width; - var point = new fabric.Point(x, y); - point.width = width; + if (this.randomOpacity) { + point.opacity = fabric.util.getRandomInt(0, 100) / 100; + } - if (this.randomOpacity) { - point.opacity = fabric.util.getRandomInt(0, 100) / 100; + this.sprayChunkPoints.push(point); } - this.sprayChunkPoints.push(point); + this.sprayChunks.push(this.sprayChunkPoints); } - - this.sprayChunks.push(this.sprayChunkPoints); - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/canvas.class.js b/src/canvas.class.js index 40f3b86e556..05a6c727e6b 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -1,8 +1,10 @@ -var getPointer = fabric.util.getPointer, - degreesToRadians = fabric.util.degreesToRadians, - isTouchEvent = fabric.util.isTouchEvent; +(function(global) { -/** + var fabric = global.fabric, getPointer = fabric.util.getPointer, + degreesToRadians = fabric.util.degreesToRadians, + isTouchEvent = fabric.util.isTouchEvent; + + /** * Canvas class * @class fabric.Canvas * @extends fabric.StaticCanvas @@ -63,33 +65,33 @@ var getPointer = fabric.util.getPointer, * }); * */ -fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { + fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { - /** + /** * Constructor * @param {HTMLElement | String} el <canvas> element to initialize instance on * @param {Object} [options] Options object * @return {Object} thisArg */ - initialize: function(el, options) { - options || (options = { }); - this.renderAndResetBound = this.renderAndReset.bind(this); - this.requestRenderAllBound = this.requestRenderAll.bind(this); - this._initStatic(el, options); - this._initInteractive(); - this._createCacheCanvas(); - }, + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + this._initInteractive(); + this._createCacheCanvas(); + }, - /** + /** * When true, objects can be transformed by one side (unproportionally) * when dragged on the corners that normally would not do that. * @type Boolean * @default * @since fabric 4.0 // changed name and default value */ - uniformScaling: true, + uniformScaling: true, - /** + /** * Indicates which key switches uniform scaling. * values: 'altKey', 'shiftKey', 'ctrlKey'. * If `null` or 'none' or any other string that is not a modifier key @@ -101,27 +103,27 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @type String * @default */ - uniScaleKey: 'shiftKey', + uniScaleKey: 'shiftKey', - /** + /** * When true, objects use center point as the origin of scale transformation. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). * @since 1.3.4 * @type Boolean * @default */ - centeredScaling: false, + centeredScaling: false, - /** + /** * When true, objects use center point as the origin of rotate transformation. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). * @since 1.3.4 * @type Boolean * @default */ - centeredRotation: false, + centeredRotation: false, - /** + /** * Indicates which key enable centered Transform * values: 'altKey', 'shiftKey', 'ctrlKey'. * If `null` or 'none' or any other string that is not a modifier key @@ -130,9 +132,9 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @type String * @default */ - centeredKey: 'altKey', + centeredKey: 'altKey', - /** + /** * Indicates which key enable alternate action on corner * values: 'altKey', 'shiftKey', 'ctrlKey'. * If `null` or 'none' or any other string that is not a modifier key @@ -141,23 +143,23 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @type String * @default */ - altActionKey: 'shiftKey', + altActionKey: 'shiftKey', - /** + /** * Indicates that canvas is interactive. This property should not be changed. * @type Boolean * @default */ - interactive: true, + interactive: true, - /** + /** * Indicates whether group selection should be enabled * @type Boolean * @default */ - selection: true, + selection: true, - /** + /** * Indicates which key or keys enable multiple click selection * Pass value as a string or array of strings * values: 'altKey', 'shiftKey', 'ctrlKey'. @@ -167,9 +169,9 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @type String|Array * @default */ - selectionKey: 'shiftKey', + selectionKey: 'shiftKey', - /** + /** * Indicates which key enable alternative selection * in case of target overlapping with active object * values: 'altKey', 'shiftKey', 'ctrlKey'. @@ -181,101 +183,101 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @type null|String * @default */ - altSelectionKey: null, + altSelectionKey: null, - /** + /** * Color of selection * @type String * @default */ - selectionColor: 'rgba(100, 100, 255, 0.3)', // blue + selectionColor: 'rgba(100, 100, 255, 0.3)', // blue - /** + /** * Default dash array pattern * If not empty the selection border is dashed * @type Array */ - selectionDashArray: [], + selectionDashArray: [], - /** + /** * Color of the border of selection (usually slightly darker than color of selection itself) * @type String * @default */ - selectionBorderColor: 'rgba(255, 255, 255, 0.3)', + selectionBorderColor: 'rgba(255, 255, 255, 0.3)', - /** + /** * Width of a line used in object/group selection * @type Number * @default */ - selectionLineWidth: 1, + selectionLineWidth: 1, - /** + /** * Select only shapes that are fully contained in the dragged selection rectangle. * @type Boolean * @default */ - selectionFullyContained: false, + selectionFullyContained: false, - /** + /** * Default cursor value used when hovering over an object on canvas * @type String * @default */ - hoverCursor: 'move', + hoverCursor: 'move', - /** + /** * Default cursor value used when moving an object on canvas * @type String * @default */ - moveCursor: 'move', + moveCursor: 'move', - /** + /** * Default cursor value used for the entire canvas * @type String * @default */ - defaultCursor: 'default', + defaultCursor: 'default', - /** + /** * Cursor value used during free drawing * @type String * @default */ - freeDrawingCursor: 'crosshair', + freeDrawingCursor: 'crosshair', - /** + /** * Cursor value used for disabled elements ( corners with disabled action ) * @type String * @since 2.0.0 * @default */ - notAllowedCursor: 'not-allowed', + notAllowedCursor: 'not-allowed', - /** + /** * Default element class that's given to wrapper (div) element of canvas * @type String * @default */ - containerClass: 'canvas-container', + containerClass: 'canvas-container', - /** + /** * When true, object detection happens on per-pixel basis rather than on per-bounding-box * @type Boolean * @default */ - perPixelTargetFind: false, + perPixelTargetFind: false, - /** + /** * Number of pixels around target pixel to tolerate (consider active) during object detection * @type Number * @default */ - targetFindTolerance: 0, + targetFindTolerance: 0, - /** + /** * When true, target detection is skipped. Target detection will return always undefined. * click selection won't work anymore, events will fire with no targets. * if something is selected before setting it to true, it will be deselected at the first click. @@ -284,9 +286,9 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @type Boolean * @default */ - skipTargetFind: false, + skipTargetFind: false, - /** + /** * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. * After mousedown, mousemove creates a shape, * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. @@ -294,306 +296,306 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @type Boolean * @default */ - isDrawingMode: false, + isDrawingMode: false, - /** + /** * Indicates whether objects should remain in current stack position when selected. * When false objects are brought to top and rendered as part of the selection group * @type Boolean * @default */ - preserveObjectStacking: false, + preserveObjectStacking: false, - /** + /** * Indicates the angle that an object will lock to while rotating. * @type Number * @since 1.6.7 * @default */ - snapAngle: 0, + snapAngle: 0, - /** + /** * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. * When `null`, the snapThreshold will default to the snapAngle. * @type null|Number * @since 1.6.7 * @default */ - snapThreshold: null, + snapThreshold: null, - /** + /** * Indicates if the right click on canvas can output the context menu or not * @type Boolean * @since 1.6.5 * @default */ - stopContextMenu: false, + stopContextMenu: false, - /** + /** * Indicates if the canvas can fire right click events * @type Boolean * @since 1.6.5 * @default */ - fireRightClick: false, + fireRightClick: false, - /** + /** * Indicates if the canvas can fire middle click events * @type Boolean * @since 1.7.8 * @default */ - fireMiddleClick: false, + fireMiddleClick: false, - /** + /** * Keep track of the subTargets for Mouse Events * @type fabric.Object[] */ - targets: [], + targets: [], - /** + /** * When the option is enabled, PointerEvent is used instead of MouseEvent. * @type Boolean * @default */ - enablePointerEvents: false, + enablePointerEvents: false, - /** + /** * Keep track of the hovered target * @type fabric.Object * @private */ - _hoveredTarget: null, + _hoveredTarget: null, - /** + /** * hold the list of nested targets hovered * @type fabric.Object[] * @private */ - _hoveredTargets: [], + _hoveredTargets: [], - /** + /** * hold the list of objects to render * @type fabric.Object[] * @private */ - _objectsToRender: undefined, + _objectsToRender: undefined, - /** + /** * @private */ - _initInteractive: function() { - this._currentTransform = null; - this._groupSelector = null; - this._initWrapperElement(); - this._createUpperCanvas(); - this._initEventListeners(); + _initInteractive: function() { + this._currentTransform = null; + this._groupSelector = null; + this._initWrapperElement(); + this._createUpperCanvas(); + this._initEventListeners(); - this._initRetinaScaling(); + this._initRetinaScaling(); - this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); + this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); - this.calcOffset(); - }, + this.calcOffset(); + }, - /** + /** * @private * @param {fabric.Object} obj Object that was added */ - _onObjectAdded: function (obj) { - this._objectsToRender = undefined; - this.callSuper('_onObjectAdded', obj); - }, + _onObjectAdded: function (obj) { + this._objectsToRender = undefined; + this.callSuper('_onObjectAdded', obj); + }, - /** + /** * @private * @param {fabric.Object} obj Object that was removed */ - _onObjectRemoved: function (obj) { - this._objectsToRender = undefined; - // removing active object should fire "selection:cleared" events - if (obj === this._activeObject) { - this.fire('before:selection:cleared', { target: obj }); - this._discardActiveObject(); - this.fire('selection:cleared', { target: obj }); - obj.fire('deselected'); - } - if (obj === this._hoveredTarget) { - this._hoveredTarget = null; - this._hoveredTargets = []; - } - this.callSuper('_onObjectRemoved', obj); - }, + _onObjectRemoved: function (obj) { + this._objectsToRender = undefined; + // removing active object should fire "selection:cleared" events + if (obj === this._activeObject) { + this.fire('before:selection:cleared', { target: obj }); + this._discardActiveObject(); + this.fire('selection:cleared', { target: obj }); + obj.fire('deselected'); + } + if (obj === this._hoveredTarget) { + this._hoveredTarget = null; + this._hoveredTargets = []; + } + this.callSuper('_onObjectRemoved', obj); + }, - /** + /** * Divides objects in two groups, one to render immediately * and one to render as activeGroup. * @return {Array} objects to render immediately and pushes the other in the activeGroup. */ - _chooseObjectsToRender: function() { - var activeObjects = this.getActiveObjects(), - object, objsToRender, activeGroupObjects; - - if (!this.preserveObjectStacking && activeObjects.length > 1) { - objsToRender = []; - activeGroupObjects = []; - for (var i = 0, length = this._objects.length; i < length; i++) { - object = this._objects[i]; - if (activeObjects.indexOf(object) === -1 ) { - objsToRender.push(object); + _chooseObjectsToRender: function() { + var activeObjects = this.getActiveObjects(), + object, objsToRender, activeGroupObjects; + + if (!this.preserveObjectStacking && activeObjects.length > 1) { + objsToRender = []; + activeGroupObjects = []; + for (var i = 0, length = this._objects.length; i < length; i++) { + object = this._objects[i]; + if (activeObjects.indexOf(object) === -1 ) { + objsToRender.push(object); + } + else { + activeGroupObjects.push(object); + } } - else { - activeGroupObjects.push(object); + if (activeObjects.length > 1) { + this._activeObject._objects = activeGroupObjects; } + objsToRender.push.apply(objsToRender, activeGroupObjects); } - if (activeObjects.length > 1) { - this._activeObject._objects = activeGroupObjects; + // in case a single object is selected render it's entire parent above the other objects + else if (!this.preserveObjectStacking && activeObjects.length === 1) { + var target = activeObjects[0], ancestors = target.getAncestors(true); + var topAncestor = ancestors.length === 0 ? target : ancestors.pop(); + objsToRender = this._objects.slice(); + var index = objsToRender.indexOf(topAncestor); + index > -1 && objsToRender.splice(objsToRender.indexOf(topAncestor), 1); + objsToRender.push(topAncestor); } - objsToRender.push.apply(objsToRender, activeGroupObjects); - } - // in case a single object is selected render it's entire parent above the other objects - else if (!this.preserveObjectStacking && activeObjects.length === 1) { - var target = activeObjects[0], ancestors = target.getAncestors(true); - var topAncestor = ancestors.length === 0 ? target : ancestors.pop(); - objsToRender = this._objects.slice(); - var index = objsToRender.indexOf(topAncestor); - index > -1 && objsToRender.splice(objsToRender.indexOf(topAncestor), 1); - objsToRender.push(topAncestor); - } - else { - objsToRender = this._objects; - } - return objsToRender; - }, + else { + objsToRender = this._objects; + } + return objsToRender; + }, - /** + /** * Renders both the top canvas and the secondary container canvas. * @return {fabric.Canvas} instance * @chainable */ - renderAll: function () { - if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { - this.clearContext(this.contextTop); - this.contextTopDirty = false; - } - if (this.hasLostContext) { - this.renderTopLayer(this.contextTop); - this.hasLostContext = false; - } - var canvasToDrawOn = this.contextContainer; - !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender()); - this.renderCanvas(canvasToDrawOn, this._objectsToRender); - return this; - }, - - renderTopLayer: function(ctx) { - ctx.save(); - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this.freeDrawingBrush && this.freeDrawingBrush._render(); - this.contextTopDirty = true; - } - // we render the top context - last object - if (this.selection && this._groupSelector) { - this._drawSelection(ctx); - this.contextTopDirty = true; - } - ctx.restore(); - }, + renderAll: function () { + if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { + this.clearContext(this.contextTop); + this.contextTopDirty = false; + } + if (this.hasLostContext) { + this.renderTopLayer(this.contextTop); + this.hasLostContext = false; + } + var canvasToDrawOn = this.contextContainer; + !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender()); + this.renderCanvas(canvasToDrawOn, this._objectsToRender); + return this; + }, + + renderTopLayer: function(ctx) { + ctx.save(); + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._render(); + this.contextTopDirty = true; + } + // we render the top context - last object + if (this.selection && this._groupSelector) { + this._drawSelection(ctx); + this.contextTopDirty = true; + } + ctx.restore(); + }, - /** + /** * Method to render only the top canvas. * Also used to render the group selection box. * @return {fabric.Canvas} thisArg * @chainable */ - renderTop: function () { - var ctx = this.contextTop; - this.clearContext(ctx); - this.renderTopLayer(ctx); - this.fire('after:render'); - return this; - }, + renderTop: function () { + var ctx = this.contextTop; + this.clearContext(ctx); + this.renderTopLayer(ctx); + this.fire('after:render'); + return this; + }, - /** + /** * @private */ - _normalizePointer: function (object, pointer) { - var m = object.calcTransformMatrix(), - invertedM = fabric.util.invertTransform(m), - vptPointer = this.restorePointerVpt(pointer); - return fabric.util.transformPoint(vptPointer, invertedM); - }, + _normalizePointer: function (object, pointer) { + var m = object.calcTransformMatrix(), + invertedM = fabric.util.invertTransform(m), + vptPointer = this.restorePointerVpt(pointer); + return fabric.util.transformPoint(vptPointer, invertedM); + }, - /** + /** * Returns true if object is transparent at a certain location * @param {fabric.Object} target Object to check * @param {Number} x Left coordinate * @param {Number} y Top coordinate * @return {Boolean} */ - isTargetTransparent: function (target, x, y) { - // in case the target is the activeObject, we cannot execute this optimization - // because we need to draw controls too. - if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { - var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), - targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), - targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); + isTargetTransparent: function (target, x, y) { + // in case the target is the activeObject, we cannot execute this optimization + // because we need to draw controls too. + if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { + var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), + targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), + targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); - var isTransparent = fabric.util.isTransparent( - target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); + var isTransparent = fabric.util.isTransparent( + target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); - return isTransparent; - } + return isTransparent; + } - var ctx = this.contextCache, - originalColor = target.selectionBackgroundColor, v = this.viewportTransform; + var ctx = this.contextCache, + originalColor = target.selectionBackgroundColor, v = this.viewportTransform; - target.selectionBackgroundColor = ''; + target.selectionBackgroundColor = ''; - this.clearContext(ctx); + this.clearContext(ctx); - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - target.render(ctx); - ctx.restore(); + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + target.render(ctx); + ctx.restore(); - target.selectionBackgroundColor = originalColor; + target.selectionBackgroundColor = originalColor; - var isTransparent = fabric.util.isTransparent( - ctx, x, y, this.targetFindTolerance); + var isTransparent = fabric.util.isTransparent( + ctx, x, y, this.targetFindTolerance); - return isTransparent; - }, + return isTransparent; + }, - /** + /** * takes an event and determines if selection key has been pressed * @private * @param {Event} e Event object */ - _isSelectionKeyPressed: function(e) { - var selectionKeyPressed = false; + _isSelectionKeyPressed: function(e) { + var selectionKeyPressed = false; - if (Array.isArray(this.selectionKey)) { - selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); - } - else { - selectionKeyPressed = e[this.selectionKey]; - } + if (Array.isArray(this.selectionKey)) { + selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); + } + else { + selectionKeyPressed = e[this.selectionKey]; + } - return selectionKeyPressed; - }, + return selectionKeyPressed; + }, - /** + /** * @private * @param {Event} e Event object * @param {fabric.Object} target */ - _shouldClearSelection: function (e, target) { - var activeObjects = this.getActiveObjects(), - activeObject = this._activeObject; + _shouldClearSelection: function (e, target) { + var activeObjects = this.getActiveObjects(), + activeObject = this._activeObject; - return ( - !target + return ( + !target || (target && activeObject && @@ -608,10 +610,10 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C !target.selectable && activeObject && activeObject !== target) - ); - }, + ); + }, - /** + /** * centeredScaling from object can't override centeredScaling from canvas. * this should be fixed, since object setting should take precedence over canvas. * also this should be something that will be migrated in the control properties. @@ -621,169 +623,169 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @param {String} action * @param {Boolean} altKey */ - _shouldCenterTransform: function (target, action, altKey) { - if (!target) { - return; - } + _shouldCenterTransform: function (target, action, altKey) { + if (!target) { + return; + } - var centerTransform; + var centerTransform; - if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { - centerTransform = this.centeredScaling || target.centeredScaling; - } - else if (action === 'rotate') { - centerTransform = this.centeredRotation || target.centeredRotation; - } + if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { + centerTransform = this.centeredScaling || target.centeredScaling; + } + else if (action === 'rotate') { + centerTransform = this.centeredRotation || target.centeredRotation; + } - return centerTransform ? !altKey : altKey; - }, + return centerTransform ? !altKey : altKey; + }, - /** + /** * should disappear before release 4.0 * @private */ - _getOriginFromCorner: function(target, corner) { - var origin = { - x: target.originX, - y: target.originY - }; + _getOriginFromCorner: function(target, corner) { + var origin = { + x: target.originX, + y: target.originY + }; - if (corner === 'ml' || corner === 'tl' || corner === 'bl') { - origin.x = 'right'; - } - else if (corner === 'mr' || corner === 'tr' || corner === 'br') { - origin.x = 'left'; - } + if (corner === 'ml' || corner === 'tl' || corner === 'bl') { + origin.x = 'right'; + } + else if (corner === 'mr' || corner === 'tr' || corner === 'br') { + origin.x = 'left'; + } - if (corner === 'tl' || corner === 'mt' || corner === 'tr') { - origin.y = 'bottom'; - } - else if (corner === 'bl' || corner === 'mb' || corner === 'br') { - origin.y = 'top'; - } - return origin; - }, + if (corner === 'tl' || corner === 'mt' || corner === 'tr') { + origin.y = 'bottom'; + } + else if (corner === 'bl' || corner === 'mb' || corner === 'br') { + origin.y = 'top'; + } + return origin; + }, - /** + /** * @private * @param {Boolean} alreadySelected true if target is already selected * @param {String} corner a string representing the corner ml, mr, tl ... * @param {Event} e Event object * @param {fabric.Object} [target] inserted back to help overriding. Unused */ - _getActionFromCorner: function(alreadySelected, corner, e, target) { - if (!corner || !alreadySelected) { - return 'drag'; - } - var control = target.controls[corner]; - return control.getActionName(e, control, target); - }, + _getActionFromCorner: function(alreadySelected, corner, e, target) { + if (!corner || !alreadySelected) { + return 'drag'; + } + var control = target.controls[corner]; + return control.getActionName(e, control, target); + }, - /** + /** * @private * @param {Event} e Event object * @param {fabric.Object} target */ - _setupCurrentTransform: function (e, target, alreadySelected) { - if (!target) { - return; - } - var pointer = this.getPointer(e); - if (target.group) { - // transform pointer to target's containing coordinate plane - pointer = fabric.util.transformPoint(pointer, fabric.util.invertTransform(target.group.calcTransformMatrix())); - } - var corner = target.__corner, - control = target.controls[corner], - actionHandler = (alreadySelected && corner) ? - control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, - action = this._getActionFromCorner(alreadySelected, corner, e, target), - origin = this._getOriginFromCorner(target, corner), - altKey = e[this.centeredKey], - /** + _setupCurrentTransform: function (e, target, alreadySelected) { + if (!target) { + return; + } + var pointer = this.getPointer(e); + if (target.group) { + // transform pointer to target's containing coordinate plane + pointer = fabric.util.transformPoint(pointer, fabric.util.invertTransform(target.group.calcTransformMatrix())); + } + var corner = target.__corner, + control = target.controls[corner], + actionHandler = (alreadySelected && corner) ? + control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, + action = this._getActionFromCorner(alreadySelected, corner, e, target), + origin = this._getOriginFromCorner(target, corner), + altKey = e[this.centeredKey], + /** * relative to target's containing coordinate plane * both agree on every point **/ - transform = { - target: target, - action: action, - actionHandler: actionHandler, - corner: corner, - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - offsetX: pointer.x - target.left, - offsetY: pointer.y - target.top, - originX: origin.x, - originY: origin.y, - ex: pointer.x, - ey: pointer.y, - lastX: pointer.x, - lastY: pointer.y, - theta: degreesToRadians(target.angle), - width: target.width * target.scaleX, - shiftKey: e.shiftKey, - altKey: altKey, - original: fabric.util.saveObjectTransform(target), - }; - - if (this._shouldCenterTransform(target, action, altKey)) { - transform.originX = 'center'; - transform.originY = 'center'; - } - transform.original.originX = origin.x; - transform.original.originY = origin.y; - this._currentTransform = transform; - this._beforeTransform(e); - }, + transform = { + target: target, + action: action, + actionHandler: actionHandler, + corner: corner, + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + offsetX: pointer.x - target.left, + offsetY: pointer.y - target.top, + originX: origin.x, + originY: origin.y, + ex: pointer.x, + ey: pointer.y, + lastX: pointer.x, + lastY: pointer.y, + theta: degreesToRadians(target.angle), + width: target.width * target.scaleX, + shiftKey: e.shiftKey, + altKey: altKey, + original: fabric.util.saveObjectTransform(target), + }; + + if (this._shouldCenterTransform(target, action, altKey)) { + transform.originX = 'center'; + transform.originY = 'center'; + } + transform.original.originX = origin.x; + transform.original.originY = origin.y; + this._currentTransform = transform; + this._beforeTransform(e); + }, - /** + /** * Set the cursor type of the canvas element * @param {String} value Cursor type of the canvas element. * @see http://www.w3.org/TR/css3-ui/#cursor */ - setCursor: function (value) { - this.upperCanvasEl.style.cursor = value; - }, + setCursor: function (value) { + this.upperCanvasEl.style.cursor = value; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx to draw the selection on */ - _drawSelection: function (ctx) { - var selector = this._groupSelector, - viewportStart = new fabric.Point(selector.ex, selector.ey), - start = fabric.util.transformPoint(viewportStart, this.viewportTransform), - viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), - extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), - minX = Math.min(start.x, extent.x), - minY = Math.min(start.y, extent.y), - maxX = Math.max(start.x, extent.x), - maxY = Math.max(start.y, extent.y), - strokeOffset = this.selectionLineWidth / 2; - - if (this.selectionColor) { - ctx.fillStyle = this.selectionColor; - ctx.fillRect(minX, minY, maxX - minX, maxY - minY); - } - - if (!this.selectionLineWidth || !this.selectionBorderColor) { - return; - } - ctx.lineWidth = this.selectionLineWidth; - ctx.strokeStyle = this.selectionBorderColor; - - minX += strokeOffset; - minY += strokeOffset; - maxX -= strokeOffset; - maxY -= strokeOffset; - // selection border - fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); - ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); - }, + _drawSelection: function (ctx) { + var selector = this._groupSelector, + viewportStart = new fabric.Point(selector.ex, selector.ey), + start = fabric.util.transformPoint(viewportStart, this.viewportTransform), + viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), + extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), + minX = Math.min(start.x, extent.x), + minY = Math.min(start.y, extent.y), + maxX = Math.max(start.x, extent.x), + maxY = Math.max(start.y, extent.y), + strokeOffset = this.selectionLineWidth / 2; + + if (this.selectionColor) { + ctx.fillStyle = this.selectionColor; + ctx.fillRect(minX, minY, maxX - minX, maxY - minY); + } - /** + if (!this.selectionLineWidth || !this.selectionBorderColor) { + return; + } + ctx.lineWidth = this.selectionLineWidth; + ctx.strokeStyle = this.selectionBorderColor; + + minX += strokeOffset; + minY += strokeOffset; + maxX -= strokeOffset; + maxY -= strokeOffset; + // selection border + fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); + ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); + }, + + /** * Method that determines what object we are clicking on * the skipGroup parameter is for internal use, is needed for shift+click action * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target @@ -792,52 +794,52 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through * @return {fabric.Object} the target found */ - findTarget: function (e, skipGroup) { - if (this.skipTargetFind) { - return; - } + findTarget: function (e, skipGroup) { + if (this.skipTargetFind) { + return; + } - var ignoreZoom = true, - pointer = this.getPointer(e, ignoreZoom), - activeObject = this._activeObject, - aObjects = this.getActiveObjects(), - activeTarget, activeTargetSubs, - isTouch = isTouchEvent(e), - shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; - - // first check current group (if one exists) - // active group does not check sub targets like normal groups. - // if active group just exits. - this.targets = []; - - // if we hit the corner of an activeObject, let's return that. - if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { - return activeObject; - } - if (aObjects.length > 1 && activeObject.type === 'activeSelection' + var ignoreZoom = true, + pointer = this.getPointer(e, ignoreZoom), + activeObject = this._activeObject, + aObjects = this.getActiveObjects(), + activeTarget, activeTargetSubs, + isTouch = isTouchEvent(e), + shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; + + // first check current group (if one exists) + // active group does not check sub targets like normal groups. + // if active group just exits. + this.targets = []; + + // if we hit the corner of an activeObject, let's return that. + if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { + return activeObject; + } + if (aObjects.length > 1 && activeObject.type === 'activeSelection' && !skipGroup && this.searchPossibleTargets([activeObject], pointer)) { - return activeObject; - } - if (aObjects.length === 1 && - activeObject === this.searchPossibleTargets([activeObject], pointer)) { - if (!this.preserveObjectStacking) { return activeObject; } - else { - activeTarget = activeObject; - activeTargetSubs = this.targets; - this.targets = []; + if (aObjects.length === 1 && + activeObject === this.searchPossibleTargets([activeObject], pointer)) { + if (!this.preserveObjectStacking) { + return activeObject; + } + else { + activeTarget = activeObject; + activeTargetSubs = this.targets; + this.targets = []; + } } - } - var target = this.searchPossibleTargets(this._objects, pointer); - if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { - target = activeTarget; - this.targets = activeTargetSubs; - } - return target; - }, + var target = this.searchPossibleTargets(this._objects, pointer); + if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { + target = activeTarget; + this.targets = activeTargetSubs; + } + return target; + }, - /** + /** * Checks point is inside the object. * @param {Object} [pointer] x,y object of point coordinates we want to check. * @param {fabric.Object} obj Object to test against @@ -845,79 +847,79 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @return {Boolean} true if point is contained within an area of given object * @private */ - _checkTarget: function(pointer, obj, globalPointer) { - if (obj && + _checkTarget: function(pointer, obj, globalPointer) { + if (obj && obj.visible && obj.evented && // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html obj.containsPoint(pointer) - ) { - if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { - var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); - if (!isTransparent) { + ) { + if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { + var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); + if (!isTransparent) { + return true; + } + } + else { return true; } } - else { - return true; - } - } - }, + }, - /** + /** * Internal Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted * @param {Array} [objects] objects array to look into * @param {Object} [pointer] x,y object of point coordinates we want to check. * @return {fabric.Object} **top most object from given `objects`** that contains pointer * @private */ - _searchPossibleTargets: function(objects, pointer) { - // Cache all targets where their bounding box contains point. - var target, i = objects.length, subTarget; - // Do not check for currently grouped objects, since we check the parent group itself. - // until we call this function specifically to search inside the activeGroup - while (i--) { - var objToCheck = objects[i]; - var pointerToUse = objToCheck.group ? - this._normalizePointer(objToCheck.group, pointer) : pointer; - if (this._checkTarget(pointerToUse, objToCheck, pointer)) { - target = objects[i]; - if (target.subTargetCheck && Array.isArray(target._objects)) { - subTarget = this._searchPossibleTargets(target._objects, pointer); - subTarget && this.targets.push(subTarget); + _searchPossibleTargets: function(objects, pointer) { + // Cache all targets where their bounding box contains point. + var target, i = objects.length, subTarget; + // Do not check for currently grouped objects, since we check the parent group itself. + // until we call this function specifically to search inside the activeGroup + while (i--) { + var objToCheck = objects[i]; + var pointerToUse = objToCheck.group ? + this._normalizePointer(objToCheck.group, pointer) : pointer; + if (this._checkTarget(pointerToUse, objToCheck, pointer)) { + target = objects[i]; + if (target.subTargetCheck && Array.isArray(target._objects)) { + subTarget = this._searchPossibleTargets(target._objects, pointer); + subTarget && this.targets.push(subTarget); + } + break; } - break; } - } - return target; - }, + return target; + }, - /** + /** * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted * @see {@link fabric.Canvas#_searchPossibleTargets} * @param {Array} [objects] objects array to look into * @param {Object} [pointer] x,y object of point coordinates we want to check. * @return {fabric.Object} **top most object on screen** that contains pointer */ - searchPossibleTargets: function (objects, pointer) { - var target = this._searchPossibleTargets(objects, pointer); - return target && target.interactive && this.targets[0] ? this.targets[0] : target; - }, + searchPossibleTargets: function (objects, pointer) { + var target = this._searchPossibleTargets(objects, pointer); + return target && target.interactive && this.targets[0] ? this.targets[0] : target; + }, - /** + /** * Returns pointer coordinates without the effect of the viewport * @param {Object} pointer with "x" and "y" number values * @return {Object} object with "x" and "y" number values */ - restorePointerVpt: function(pointer) { - return fabric.util.transformPoint( - pointer, - fabric.util.invertTransform(this.viewportTransform) - ); - }, + restorePointerVpt: function(pointer) { + return fabric.util.transformPoint( + pointer, + fabric.util.invertTransform(this.viewportTransform) + ); + }, - /** + /** * Returns pointer coordinates relative to canvas. * Can return coordinates with or without viewportTransform. * ignoreVpt false gives back coordinates that represent @@ -935,265 +937,265 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @param {Boolean} ignoreVpt * @return {Object} object with "x" and "y" number values */ - getPointer: function (e, ignoreVpt) { - // return cached values if we are in the event processing chain - if (this._absolutePointer && !ignoreVpt) { - return this._absolutePointer; - } - if (this._pointer && ignoreVpt) { - return this._pointer; - } + getPointer: function (e, ignoreVpt) { + // return cached values if we are in the event processing chain + if (this._absolutePointer && !ignoreVpt) { + return this._absolutePointer; + } + if (this._pointer && ignoreVpt) { + return this._pointer; + } - var pointer = getPointer(e), - upperCanvasEl = this.upperCanvasEl, - bounds = upperCanvasEl.getBoundingClientRect(), - boundsWidth = bounds.width || 0, - boundsHeight = bounds.height || 0, - cssScale; + var pointer = getPointer(e), + upperCanvasEl = this.upperCanvasEl, + bounds = upperCanvasEl.getBoundingClientRect(), + boundsWidth = bounds.width || 0, + boundsHeight = bounds.height || 0, + cssScale; - if (!boundsWidth || !boundsHeight ) { - if ('top' in bounds && 'bottom' in bounds) { - boundsHeight = Math.abs( bounds.top - bounds.bottom ); + if (!boundsWidth || !boundsHeight ) { + if ('top' in bounds && 'bottom' in bounds) { + boundsHeight = Math.abs( bounds.top - bounds.bottom ); + } + if ('right' in bounds && 'left' in bounds) { + boundsWidth = Math.abs( bounds.right - bounds.left ); + } } - if ('right' in bounds && 'left' in bounds) { - boundsWidth = Math.abs( bounds.right - bounds.left ); + + this.calcOffset(); + pointer.x = pointer.x - this._offset.left; + pointer.y = pointer.y - this._offset.top; + if (!ignoreVpt) { + pointer = this.restorePointerVpt(pointer); } - } - this.calcOffset(); - pointer.x = pointer.x - this._offset.left; - pointer.y = pointer.y - this._offset.top; - if (!ignoreVpt) { - pointer = this.restorePointerVpt(pointer); - } + var retinaScaling = this.getRetinaScaling(); + if (retinaScaling !== 1) { + pointer.x /= retinaScaling; + pointer.y /= retinaScaling; + } - var retinaScaling = this.getRetinaScaling(); - if (retinaScaling !== 1) { - pointer.x /= retinaScaling; - pointer.y /= retinaScaling; - } + if (boundsWidth === 0 || boundsHeight === 0) { + // If bounds are not available (i.e. not visible), do not apply scale. + cssScale = { width: 1, height: 1 }; + } + else { + cssScale = { + width: upperCanvasEl.width / boundsWidth, + height: upperCanvasEl.height / boundsHeight + }; + } - if (boundsWidth === 0 || boundsHeight === 0) { - // If bounds are not available (i.e. not visible), do not apply scale. - cssScale = { width: 1, height: 1 }; - } - else { - cssScale = { - width: upperCanvasEl.width / boundsWidth, - height: upperCanvasEl.height / boundsHeight + return { + x: pointer.x * cssScale.width, + y: pointer.y * cssScale.height }; - } - - return { - x: pointer.x * cssScale.width, - y: pointer.y * cssScale.height - }; - }, + }, - /** + /** * @private * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized */ - _createUpperCanvas: function () { - var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), - lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; + _createUpperCanvas: function () { + var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), + lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; - // there is no need to create a new upperCanvas element if we have already one. - if (upperCanvasEl) { - upperCanvasEl.className = ''; - } - else { - upperCanvasEl = this._createCanvasElement(); - this.upperCanvasEl = upperCanvasEl; - } - fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); - this.upperCanvasEl.setAttribute('data-fabric', 'top'); - this.wrapperEl.appendChild(upperCanvasEl); + // there is no need to create a new upperCanvas element if we have already one. + if (upperCanvasEl) { + upperCanvasEl.className = ''; + } + else { + upperCanvasEl = this._createCanvasElement(); + this.upperCanvasEl = upperCanvasEl; + } + fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); + this.upperCanvasEl.setAttribute('data-fabric', 'top'); + this.wrapperEl.appendChild(upperCanvasEl); - this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); - this._applyCanvasStyle(upperCanvasEl); - this.contextTop = upperCanvasEl.getContext('2d'); - }, + this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); + this._applyCanvasStyle(upperCanvasEl); + this.contextTop = upperCanvasEl.getContext('2d'); + }, - /** + /** * @private */ - _createCacheCanvas: function () { - this.cacheCanvasEl = this._createCanvasElement(); - this.cacheCanvasEl.setAttribute('width', this.width); - this.cacheCanvasEl.setAttribute('height', this.height); - this.contextCache = this.cacheCanvasEl.getContext('2d'); - }, + _createCacheCanvas: function () { + this.cacheCanvasEl = this._createCanvasElement(); + this.cacheCanvasEl.setAttribute('width', this.width); + this.cacheCanvasEl.setAttribute('height', this.height); + this.contextCache = this.cacheCanvasEl.getContext('2d'); + }, - /** + /** * @private */ - _initWrapperElement: function () { - if (this.wrapperEl) { - return; - } - this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { - 'class': this.containerClass - }); - this.wrapperEl.setAttribute('data-fabric', 'wrapper'); - fabric.util.setStyle(this.wrapperEl, { - width: this.width + 'px', - height: this.height + 'px', - position: 'relative' - }); - fabric.util.makeElementUnselectable(this.wrapperEl); - }, + _initWrapperElement: function () { + if (this.wrapperEl) { + return; + } + this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { + 'class': this.containerClass + }); + this.wrapperEl.setAttribute('data-fabric', 'wrapper'); + fabric.util.setStyle(this.wrapperEl, { + width: this.width + 'px', + height: this.height + 'px', + position: 'relative' + }); + fabric.util.makeElementUnselectable(this.wrapperEl); + }, - /** + /** * @private * @param {HTMLElement} element canvas element to apply styles on */ - _applyCanvasStyle: function (element) { - var width = this.width || element.width, - height = this.height || element.height; - - fabric.util.setStyle(element, { - position: 'absolute', - width: width + 'px', - height: height + 'px', - left: 0, - top: 0, - 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', - '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' - }); - element.width = width; - element.height = height; - fabric.util.makeElementUnselectable(element); - }, + _applyCanvasStyle: function (element) { + var width = this.width || element.width, + height = this.height || element.height; + + fabric.util.setStyle(element, { + position: 'absolute', + width: width + 'px', + height: height + 'px', + left: 0, + top: 0, + 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', + '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' + }); + element.width = width; + element.height = height; + fabric.util.makeElementUnselectable(element); + }, - /** + /** * Copy the entire inline style from one element (fromEl) to another (toEl) * @private * @param {Element} fromEl Element style is copied from * @param {Element} toEl Element copied style is applied to */ - _copyCanvasStyle: function (fromEl, toEl) { - toEl.style.cssText = fromEl.style.cssText; - }, + _copyCanvasStyle: function (fromEl, toEl) { + toEl.style.cssText = fromEl.style.cssText; + }, - /** + /** * Returns context of top canvas where interactions are drawn * @returns {CanvasRenderingContext2D} */ - getTopContext: function () { - return this.contextTop; - }, + getTopContext: function () { + return this.contextTop; + }, - /** + /** * Returns context of canvas where object selection is drawn * @alias * @return {CanvasRenderingContext2D} */ - getSelectionContext: function() { - return this.contextTop; - }, + getSelectionContext: function() { + return this.contextTop; + }, - /** + /** * Returns <canvas> element on which object selection is drawn * @return {HTMLCanvasElement} */ - getSelectionElement: function () { - return this.upperCanvasEl; - }, + getSelectionElement: function () { + return this.upperCanvasEl; + }, - /** + /** * Returns currently active object * @return {fabric.Object} active object */ - getActiveObject: function () { - return this._activeObject; - }, + getActiveObject: function () { + return this._activeObject; + }, - /** + /** * Returns an array with the current selected objects * @return {fabric.Object} active object */ - getActiveObjects: function () { - var active = this._activeObject; - if (active) { - if (active.type === 'activeSelection' && active._objects) { - return active._objects.slice(0); - } - else { - return [active]; + getActiveObjects: function () { + var active = this._activeObject; + if (active) { + if (active.type === 'activeSelection' && active._objects) { + return active._objects.slice(0); + } + else { + return [active]; + } } - } - return []; - }, + return []; + }, - /** + /** * @private * Compares the old activeObject with the current one and fires correct events * @param {fabric.Object} obj old activeObject */ - _fireSelectionEvents: function(oldObjects, e) { - var somethingChanged = false, objects = this.getActiveObjects(), - added = [], removed = [], invalidate = false; - oldObjects.forEach(function(oldObject) { - if (objects.indexOf(oldObject) === -1) { - somethingChanged = true; - oldObject.fire('deselected', { + _fireSelectionEvents: function(oldObjects, e) { + var somethingChanged = false, objects = this.getActiveObjects(), + added = [], removed = [], invalidate = false; + oldObjects.forEach(function(oldObject) { + if (objects.indexOf(oldObject) === -1) { + somethingChanged = true; + oldObject.fire('deselected', { + e: e, + target: oldObject + }); + removed.push(oldObject); + } + }); + objects.forEach(function(object) { + if (oldObjects.indexOf(object) === -1) { + somethingChanged = true; + object.fire('selected', { + e: e, + target: object + }); + added.push(object); + } + }); + if (oldObjects.length > 0 && objects.length > 0) { + invalidate = true; + somethingChanged && this.fire('selection:updated', { e: e, - target: oldObject + selected: added, + deselected: removed, }); - removed.push(oldObject); } - }); - objects.forEach(function(object) { - if (oldObjects.indexOf(object) === -1) { - somethingChanged = true; - object.fire('selected', { + else if (objects.length > 0) { + invalidate = true; + this.fire('selection:created', { e: e, - target: object + selected: added, }); - added.push(object); } - }); - if (oldObjects.length > 0 && objects.length > 0) { - invalidate = true; - somethingChanged && this.fire('selection:updated', { - e: e, - selected: added, - deselected: removed, - }); - } - else if (objects.length > 0) { - invalidate = true; - this.fire('selection:created', { - e: e, - selected: added, - }); - } - else if (oldObjects.length > 0) { - invalidate = true; - this.fire('selection:cleared', { - e: e, - deselected: removed, - }); - } - invalidate && (this._objectsToRender = undefined); - }, + else if (oldObjects.length > 0) { + invalidate = true; + this.fire('selection:cleared', { + e: e, + deselected: removed, + }); + } + invalidate && (this._objectsToRender = undefined); + }, - /** + /** * Sets given object as the only active object on canvas * @param {fabric.Object} object Object to set as an active one * @param {Event} [e] Event (passed along when firing "object:selected") * @return {fabric.Canvas} thisArg * @chainable */ - setActiveObject: function (object, e) { - var currentActives = this.getActiveObjects(); - this._setActiveObject(object, e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + setActiveObject: function (object, e) { + var currentActives = this.getActiveObjects(); + this._setActiveObject(object, e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** + /** * This is a private method for now. * This is supposed to be equivalent to setActiveObject but without firing * any event. There is commitment to have this stay this way. @@ -1203,21 +1205,21 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @param {Event} [e] Event (passed along when firing "object:selected") * @return {Boolean} true if the selection happened */ - _setActiveObject: function(object, e) { - if (this._activeObject === object) { - return false; - } - if (!this._discardActiveObject(e, object)) { - return false; - } - if (object.onSelect({ e: e })) { - return false; - } - this._activeObject = object; - return true; - }, + _setActiveObject: function(object, e) { + if (this._activeObject === object) { + return false; + } + if (!this._discardActiveObject(e, object)) { + return false; + } + if (object.onSelect({ e: e })) { + return false; + } + this._activeObject = object; + return true; + }, - /** + /** * This is a private method for now. * This is supposed to be equivalent to discardActiveObject but without firing * any events. There is commitment to have this stay this way. @@ -1227,19 +1229,19 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @return {Boolean} true if the selection happened * @private */ - _discardActiveObject: function(e, object) { - var obj = this._activeObject; - if (obj) { - // onDeselect return TRUE to cancel selection; - if (obj.onDeselect({ e: e, object: object })) { - return false; + _discardActiveObject: function(e, object) { + var obj = this._activeObject; + if (obj) { + // onDeselect return TRUE to cancel selection; + if (obj.onDeselect({ e: e, object: object })) { + return false; + } + this._activeObject = null; } - this._activeObject = null; - } - return true; - }, + return true; + }, - /** + /** * Discards currently active object and fire events. If the function is called by fabric * as a consequence of a mouse event, the event is passed as a parameter and * sent to the fire function for the custom events. When used as a method the @@ -1248,127 +1250,128 @@ fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.C * @return {fabric.Canvas} thisArg * @chainable */ - discardActiveObject: function (e) { - var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); - if (currentActives.length) { - this.fire('before:selection:cleared', { target: activeObject, e: e }); - } - this._discardActiveObject(e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + discardActiveObject: function (e) { + var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); + if (currentActives.length) { + this.fire('before:selection:cleared', { target: activeObject, e: e }); + } + this._discardActiveObject(e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** + /** * Clears a canvas element and removes all event listeners * @return {fabric.Canvas} thisArg * @chainable */ - dispose: function () { - var wrapperEl = this.wrapperEl, - lowerCanvasEl = this.lowerCanvasEl, - upperCanvasEl = this.upperCanvasEl, - cacheCanvasEl = this.cacheCanvasEl; - this.removeListeners(); - this.callSuper('dispose'); - wrapperEl.removeChild(upperCanvasEl); - wrapperEl.removeChild(lowerCanvasEl); - this.contextCache = null; - this.contextTop = null; - fabric.util.cleanUpJsdomNode(upperCanvasEl); - this.upperCanvasEl = undefined; - fabric.util.cleanUpJsdomNode(cacheCanvasEl); - this.cacheCanvasEl = undefined; - if (wrapperEl.parentNode) { - wrapperEl.parentNode.replaceChild(lowerCanvasEl, wrapperEl); - } - delete this.wrapperEl; - return this; - }, + dispose: function () { + var wrapperEl = this.wrapperEl, + lowerCanvasEl = this.lowerCanvasEl, + upperCanvasEl = this.upperCanvasEl, + cacheCanvasEl = this.cacheCanvasEl; + this.removeListeners(); + this.callSuper('dispose'); + wrapperEl.removeChild(upperCanvasEl); + wrapperEl.removeChild(lowerCanvasEl); + this.contextCache = null; + this.contextTop = null; + fabric.util.cleanUpJsdomNode(upperCanvasEl); + this.upperCanvasEl = undefined; + fabric.util.cleanUpJsdomNode(cacheCanvasEl); + this.cacheCanvasEl = undefined; + if (wrapperEl.parentNode) { + wrapperEl.parentNode.replaceChild(lowerCanvasEl, wrapperEl); + } + delete this.wrapperEl; + return this; + }, - /** + /** * Clears all contexts (background, main, top) of an instance * @return {fabric.Canvas} thisArg * @chainable */ - clear: function () { - // this.discardActiveGroup(); - this.discardActiveObject(); - this.clearContext(this.contextTop); - return this.callSuper('clear'); - }, + clear: function () { + // this.discardActiveGroup(); + this.discardActiveObject(); + this.clearContext(this.contextTop); + return this.callSuper('clear'); + }, - /** + /** * Draws objects' controls (borders/controls) * @param {CanvasRenderingContext2D} ctx Context to render controls on */ - drawControls: function(ctx) { - var activeObject = this._activeObject; + drawControls: function(ctx) { + var activeObject = this._activeObject; - if (activeObject) { - activeObject._renderControls(ctx); - } - }, + if (activeObject) { + activeObject._renderControls(ctx); + } + }, - /** + /** * @private */ - _toObject: function(instance, methodName, propertiesToInclude) { - //If the object is part of the current selection group, it should - //be transformed appropriately - //i.e. it should be serialised as it would appear if the selection group - //were to be destroyed. - var originalProperties = this._realizeGroupTransformOnObject(instance), - object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); - //Undo the damage we did by changing all of its properties - originalProperties && instance.set(originalProperties); - return object; - }, - - /** + _toObject: function(instance, methodName, propertiesToInclude) { + //If the object is part of the current selection group, it should + //be transformed appropriately + //i.e. it should be serialised as it would appear if the selection group + //were to be destroyed. + var originalProperties = this._realizeGroupTransformOnObject(instance), + object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); + //Undo the damage we did by changing all of its properties + originalProperties && instance.set(originalProperties); + return object; + }, + + /** * Realises an object's group transformation on it * @private * @param {fabric.Object} [instance] the object to transform (gets mutated) * @returns the original values of instance which were changed */ - _realizeGroupTransformOnObject: function(instance) { - if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { - var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; - //Copy all the positionally relevant properties across now - var originalValues = {}; - layoutProps.forEach(function(prop) { - originalValues[prop] = instance[prop]; - }); - fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); - return originalValues; - } - else { - return null; - } - }, + _realizeGroupTransformOnObject: function(instance) { + if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { + var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; + //Copy all the positionally relevant properties across now + var originalValues = {}; + layoutProps.forEach(function(prop) { + originalValues[prop] = instance[prop]; + }); + fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); + return originalValues; + } + else { + return null; + } + }, - /** + /** * @private */ - _setSVGObject: function(markup, instance, reviver) { - //If the object is in a selection group, simulate what would happen to that - //object when the group is deselected - var originalProperties = this._realizeGroupTransformOnObject(instance); - this.callSuper('_setSVGObject', markup, instance, reviver); - originalProperties && instance.set(originalProperties); - }, - - setViewportTransform: function (vpt) { - if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { - this._activeObject.clearContextTop(); + _setSVGObject: function(markup, instance, reviver) { + //If the object is in a selection group, simulate what would happen to that + //object when the group is deselected + var originalProperties = this._realizeGroupTransformOnObject(instance); + this.callSuper('_setSVGObject', markup, instance, reviver); + originalProperties && instance.set(originalProperties); + }, + + setViewportTransform: function (vpt) { + if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { + this._activeObject.clearContextTop(); + } + fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); } - fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); - } -}); + }); -// copying static properties manually to work around Opera's bug, -// where "prototype" property is enumerable and overrides existing prototype -for (var prop in fabric.StaticCanvas) { - if (prop !== 'prototype') { - fabric.Canvas[prop] = fabric.StaticCanvas[prop]; + // copying static properties manually to work around Opera's bug, + // where "prototype" property is enumerable and overrides existing prototype + for (var prop in fabric.StaticCanvas) { + if (prop !== 'prototype') { + fabric.Canvas[prop] = fabric.StaticCanvas[prop]; + } } -} +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/color.class.js b/src/color.class.js index a26c9769bfb..2f73b9cd50e 100644 --- a/src/color.class.js +++ b/src/color.class.js @@ -1,625 +1,627 @@ -var fabric = exports.fabric || (exports.fabric = { }); - -/** - * Color class - * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; - * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. - * - * @class fabric.Color - * @param {String} color optional in hex or rgb(a) or hsl format or from known color list - * @return {fabric.Color} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} - */ -function Color(color) { - if (!color) { - this.setSource([0, 0, 0, 1]); - } - else { - this._tryParsingColor(color); - } -} - -fabric.Color = Color; - -fabric.Color.prototype = /** @lends fabric.Color.prototype */ { - +(function(global) { + var fabric = global.fabric || (global.fabric = { }); /** - * @private - * @param {String|Array} color Color value to parse + * Color class + * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; + * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. + * + * @class fabric.Color + * @param {String} color optional in hex or rgb(a) or hsl format or from known color list + * @return {fabric.Color} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} */ - _tryParsingColor: function(color) { - var source; - - if (color in Color.colorNameMap) { - color = Color.colorNameMap[color]; + function Color(color) { + if (!color) { + this.setSource([0, 0, 0, 1]); } - - if (color === 'transparent') { - source = [255, 255, 255, 0]; + else { + this._tryParsingColor(color); } + } - if (!source) { - source = Color.sourceFromHex(color); - } - if (!source) { - source = Color.sourceFromRgb(color); - } - if (!source) { - source = Color.sourceFromHsl(color); - } - if (!source) { - //if color is not recognize let's make black as canvas does - source = [0, 0, 0, 1]; - } - if (source) { - this.setSource(source); - } - }, + fabric.Color = Color; - /** - * Adapted from https://github.com/mjijackson - * @private - * @param {Number} r Red color value - * @param {Number} g Green color value - * @param {Number} b Blue color value - * @return {Array} Hsl color - */ - _rgbToHsl: function(r, g, b) { - r /= 255; g /= 255; b /= 255; + fabric.Color.prototype = /** @lends fabric.Color.prototype */ { - var h, s, l, - max = fabric.util.array.max([r, g, b]), - min = fabric.util.array.min([r, g, b]); + /** + * @private + * @param {String|Array} color Color value to parse + */ + _tryParsingColor: function(color) { + var source; - l = (max + min) / 2; + if (color in Color.colorNameMap) { + color = Color.colorNameMap[color]; + } - if (max === min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; + if (color === 'transparent') { + source = [255, 255, 255, 0]; } - h /= 6; - } - return [ - Math.round(h * 360), - Math.round(s * 100), - Math.round(l * 100) - ]; - }, + if (!source) { + source = Color.sourceFromHex(color); + } + if (!source) { + source = Color.sourceFromRgb(color); + } + if (!source) { + source = Color.sourceFromHsl(color); + } + if (!source) { + //if color is not recognize let's make black as canvas does + source = [0, 0, 0, 1]; + } + if (source) { + this.setSource(source); + } + }, + + /** + * Adapted from https://github.com/mjijackson + * @private + * @param {Number} r Red color value + * @param {Number} g Green color value + * @param {Number} b Blue color value + * @return {Array} Hsl color + */ + _rgbToHsl: function(r, g, b) { + r /= 255; g /= 255; b /= 255; + + var h, s, l, + max = fabric.util.array.max([r, g, b]), + min = fabric.util.array.min([r, g, b]); + + l = (max + min) / 2; + + if (max === min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } - /** - * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @return {Array} - */ - getSource: function() { - return this._source; - }, + return [ + Math.round(h * 360), + Math.round(s * 100), + Math.round(l * 100) + ]; + }, + + /** + * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @return {Array} + */ + getSource: function() { + return this._source; + }, + + /** + * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @param {Array} source + */ + setSource: function(source) { + this._source = source; + }, + + /** + * Returns color representation in RGB format + * @return {String} ex: rgb(0-255,0-255,0-255) + */ + toRgb: function() { + var source = this.getSource(); + return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; + }, + + /** + * Returns color representation in RGBA format + * @return {String} ex: rgba(0-255,0-255,0-255,0-1) + */ + toRgba: function() { + var source = this.getSource(); + return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; + }, + + /** + * Returns color representation in HSL format + * @return {String} ex: hsl(0-360,0%-100%,0%-100%) + */ + toHsl: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); + + return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; + }, + + /** + * Returns color representation in HSLA format + * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) + */ + toHsla: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); + + return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; + }, + + /** + * Returns color representation in HEX format + * @return {String} ex: FF5555 + */ + toHex: function() { + var source = this.getSource(), r, g, b; + + r = source[0].toString(16); + r = (r.length === 1) ? ('0' + r) : r; + + g = source[1].toString(16); + g = (g.length === 1) ? ('0' + g) : g; + + b = source[2].toString(16); + b = (b.length === 1) ? ('0' + b) : b; + + return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); + }, + + /** + * Returns color representation in HEXA format + * @return {String} ex: FF5555CC + */ + toHexa: function() { + var source = this.getSource(), a; + + a = Math.round(source[3] * 255); + a = a.toString(16); + a = (a.length === 1) ? ('0' + a) : a; + + return this.toHex() + a.toUpperCase(); + }, + + /** + * Gets value of alpha channel for this color + * @return {Number} 0-1 + */ + getAlpha: function() { + return this.getSource()[3]; + }, + + /** + * Sets value of alpha channel for this color + * @param {Number} alpha Alpha value 0-1 + * @return {fabric.Color} thisArg + */ + setAlpha: function(alpha) { + var source = this.getSource(); + source[3] = alpha; + this.setSource(source); + return this; + }, + + /** + * Transforms color to its grayscale representation + * @return {fabric.Color} thisArg + */ + toGrayscale: function() { + var source = this.getSource(), + average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), + currentAlpha = source[3]; + this.setSource([average, average, average, currentAlpha]); + return this; + }, + + /** + * Transforms color to its black and white representation + * @param {Number} threshold + * @return {fabric.Color} thisArg + */ + toBlackWhite: function(threshold) { + var source = this.getSource(), + average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), + currentAlpha = source[3]; + + threshold = threshold || 127; + + average = (Number(average) < Number(threshold)) ? 0 : 255; + this.setSource([average, average, average, currentAlpha]); + return this; + }, + + /** + * Overlays color with another color + * @param {String|fabric.Color} otherColor + * @return {fabric.Color} thisArg + */ + overlayWith: function(otherColor) { + if (!(otherColor instanceof Color)) { + otherColor = new Color(otherColor); + } - /** - * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @param {Array} source - */ - setSource: function(source) { - this._source = source; - }, + var result = [], + alpha = this.getAlpha(), + otherAlpha = 0.5, + source = this.getSource(), + otherSource = otherColor.getSource(), i; - /** - * Returns color representation in RGB format - * @return {String} ex: rgb(0-255,0-255,0-255) - */ - toRgb: function() { - var source = this.getSource(); - return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; - }, + for (i = 0; i < 3; i++) { + result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); + } + + result[3] = alpha; + this.setSource(result); + return this; + } + }; /** - * Returns color representation in RGBA format - * @return {String} ex: rgba(0-255,0-255,0-255,0-1) + * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) + * @static + * @field + * @memberOf fabric.Color */ - toRgba: function() { - var source = this.getSource(); - return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; - }, + // eslint-disable-next-line max-len + fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; /** - * Returns color representation in HSL format - * @return {String} ex: hsl(0-360,0%-100%,0%-100%) + * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) + * @static + * @field + * @memberOf fabric.Color */ - toHsl: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); - - return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; - }, + fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; /** - * Returns color representation in HSLA format - * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) + * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) + * @static + * @field + * @memberOf fabric.Color */ - toHsla: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); - - return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; - }, + fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; /** - * Returns color representation in HEX format - * @return {String} ex: FF5555 + * Map of the 148 color names with HEX code + * @static + * @field + * @memberOf fabric.Color + * @see: https://www.w3.org/TR/css3-color/#svg-color */ - toHex: function() { - var source = this.getSource(), r, g, b; - - r = source[0].toString(16); - r = (r.length === 1) ? ('0' + r) : r; - - g = source[1].toString(16); - g = (g.length === 1) ? ('0' + g) : g; - - b = source[2].toString(16); - b = (b.length === 1) ? ('0' + b) : b; - - return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); - }, + fabric.Color.colorNameMap = { + aliceblue: '#F0F8FF', + antiquewhite: '#FAEBD7', + aqua: '#00FFFF', + aquamarine: '#7FFFD4', + azure: '#F0FFFF', + beige: '#F5F5DC', + bisque: '#FFE4C4', + black: '#000000', + blanchedalmond: '#FFEBCD', + blue: '#0000FF', + blueviolet: '#8A2BE2', + brown: '#A52A2A', + burlywood: '#DEB887', + cadetblue: '#5F9EA0', + chartreuse: '#7FFF00', + chocolate: '#D2691E', + coral: '#FF7F50', + cornflowerblue: '#6495ED', + cornsilk: '#FFF8DC', + crimson: '#DC143C', + cyan: '#00FFFF', + darkblue: '#00008B', + darkcyan: '#008B8B', + darkgoldenrod: '#B8860B', + darkgray: '#A9A9A9', + darkgrey: '#A9A9A9', + darkgreen: '#006400', + darkkhaki: '#BDB76B', + darkmagenta: '#8B008B', + darkolivegreen: '#556B2F', + darkorange: '#FF8C00', + darkorchid: '#9932CC', + darkred: '#8B0000', + darksalmon: '#E9967A', + darkseagreen: '#8FBC8F', + darkslateblue: '#483D8B', + darkslategray: '#2F4F4F', + darkslategrey: '#2F4F4F', + darkturquoise: '#00CED1', + darkviolet: '#9400D3', + deeppink: '#FF1493', + deepskyblue: '#00BFFF', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1E90FF', + firebrick: '#B22222', + floralwhite: '#FFFAF0', + forestgreen: '#228B22', + fuchsia: '#FF00FF', + gainsboro: '#DCDCDC', + ghostwhite: '#F8F8FF', + gold: '#FFD700', + goldenrod: '#DAA520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#ADFF2F', + honeydew: '#F0FFF0', + hotpink: '#FF69B4', + indianred: '#CD5C5C', + indigo: '#4B0082', + ivory: '#FFFFF0', + khaki: '#F0E68C', + lavender: '#E6E6FA', + lavenderblush: '#FFF0F5', + lawngreen: '#7CFC00', + lemonchiffon: '#FFFACD', + lightblue: '#ADD8E6', + lightcoral: '#F08080', + lightcyan: '#E0FFFF', + lightgoldenrodyellow: '#FAFAD2', + lightgray: '#D3D3D3', + lightgrey: '#D3D3D3', + lightgreen: '#90EE90', + lightpink: '#FFB6C1', + lightsalmon: '#FFA07A', + lightseagreen: '#20B2AA', + lightskyblue: '#87CEFA', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#B0C4DE', + lightyellow: '#FFFFE0', + lime: '#00FF00', + limegreen: '#32CD32', + linen: '#FAF0E6', + magenta: '#FF00FF', + maroon: '#800000', + mediumaquamarine: '#66CDAA', + mediumblue: '#0000CD', + mediumorchid: '#BA55D3', + mediumpurple: '#9370DB', + mediumseagreen: '#3CB371', + mediumslateblue: '#7B68EE', + mediumspringgreen: '#00FA9A', + mediumturquoise: '#48D1CC', + mediumvioletred: '#C71585', + midnightblue: '#191970', + mintcream: '#F5FFFA', + mistyrose: '#FFE4E1', + moccasin: '#FFE4B5', + navajowhite: '#FFDEAD', + navy: '#000080', + oldlace: '#FDF5E6', + olive: '#808000', + olivedrab: '#6B8E23', + orange: '#FFA500', + orangered: '#FF4500', + orchid: '#DA70D6', + palegoldenrod: '#EEE8AA', + palegreen: '#98FB98', + paleturquoise: '#AFEEEE', + palevioletred: '#DB7093', + papayawhip: '#FFEFD5', + peachpuff: '#FFDAB9', + peru: '#CD853F', + pink: '#FFC0CB', + plum: '#DDA0DD', + powderblue: '#B0E0E6', + purple: '#800080', + rebeccapurple: '#663399', + red: '#FF0000', + rosybrown: '#BC8F8F', + royalblue: '#4169E1', + saddlebrown: '#8B4513', + salmon: '#FA8072', + sandybrown: '#F4A460', + seagreen: '#2E8B57', + seashell: '#FFF5EE', + sienna: '#A0522D', + silver: '#C0C0C0', + skyblue: '#87CEEB', + slateblue: '#6A5ACD', + slategray: '#708090', + slategrey: '#708090', + snow: '#FFFAFA', + springgreen: '#00FF7F', + steelblue: '#4682B4', + tan: '#D2B48C', + teal: '#008080', + thistle: '#D8BFD8', + tomato: '#FF6347', + turquoise: '#40E0D0', + violet: '#EE82EE', + wheat: '#F5DEB3', + white: '#FFFFFF', + whitesmoke: '#F5F5F5', + yellow: '#FFFF00', + yellowgreen: '#9ACD32' + }; /** - * Returns color representation in HEXA format - * @return {String} ex: FF5555CC + * @private + * @param {Number} p + * @param {Number} q + * @param {Number} t + * @return {Number} */ - toHexa: function() { - var source = this.getSource(), a; - - a = Math.round(source[3] * 255); - a = a.toString(16); - a = (a.length === 1) ? ('0' + a) : a; - - return this.toHex() + a.toUpperCase(); - }, + function hue2rgb(p, q, t) { + if (t < 0) { + t += 1; + } + if (t > 1) { + t -= 1; + } + if (t < 1 / 6) { + return p + (q - p) * 6 * t; + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + return p; + } /** - * Gets value of alpha channel for this color - * @return {Number} 0-1 + * Returns new color object, when given a color in RGB format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255) + * @return {fabric.Color} */ - getAlpha: function() { - return this.getSource()[3]; - }, + fabric.Color.fromRgb = function(color) { + return Color.fromSource(Color.sourceFromRgb(color)); + }; /** - * Sets value of alpha channel for this color - * @param {Number} alpha Alpha value 0-1 - * @return {fabric.Color} thisArg + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) + * @return {Array} source */ - setAlpha: function(alpha) { - var source = this.getSource(); - source[3] = alpha; - this.setSource(source); - return this; - }, + fabric.Color.sourceFromRgb = function(color) { + var match = color.match(Color.reRGBa); + if (match) { + var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), + g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), + b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); + + return [ + parseInt(r, 10), + parseInt(g, 10), + parseInt(b, 10), + match[4] ? parseFloat(match[4]) : 1 + ]; + } + }; /** - * Transforms color to its grayscale representation - * @return {fabric.Color} thisArg + * Returns new color object, when given a color in RGBA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} */ - toGrayscale: function() { - var source = this.getSource(), - average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), - currentAlpha = source[3]; - this.setSource([average, average, average, currentAlpha]); - return this; - }, + fabric.Color.fromRgba = Color.fromRgb; /** - * Transforms color to its black and white representation - * @param {Number} threshold - * @return {fabric.Color} thisArg + * Returns new color object, when given a color in HSL format + * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) + * @memberOf fabric.Color + * @return {fabric.Color} */ - toBlackWhite: function(threshold) { - var source = this.getSource(), - average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), - currentAlpha = source[3]; - - threshold = threshold || 127; - - average = (Number(average) < Number(threshold)) ? 0 : 255; - this.setSource([average, average, average, currentAlpha]); - return this; - }, + fabric.Color.fromHsl = function(color) { + return Color.fromSource(Color.sourceFromHsl(color)); + }; /** - * Overlays color with another color - * @param {String|fabric.Color} otherColor - * @return {fabric.Color} thisArg + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. + * Adapted from https://github.com/mjijackson + * @memberOf fabric.Color + * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) + * @return {Array} source + * @see http://http://www.w3.org/TR/css3-color/#hsl-color */ - overlayWith: function(otherColor) { - if (!(otherColor instanceof Color)) { - otherColor = new Color(otherColor); + fabric.Color.sourceFromHsl = function(color) { + var match = color.match(Color.reHSLa); + if (!match) { + return; } - var result = [], - alpha = this.getAlpha(), - otherAlpha = 0.5, - source = this.getSource(), - otherSource = otherColor.getSource(), i; + var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, + s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), + l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), + r, g, b; - for (i = 0; i < 3; i++) { - result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); + if (s === 0) { + r = g = b = l; } + else { + var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, + p = l * 2 - q; - result[3] = alpha; - this.setSource(result); - return this; - } -}; - -/** - * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) - * @static - * @field - * @memberOf fabric.Color - */ -// eslint-disable-next-line max-len -fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; - -/** - * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) - * @static - * @field - * @memberOf fabric.Color - */ -fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; - -/** - * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) - * @static - * @field - * @memberOf fabric.Color - */ -fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; - -/** - * Map of the 148 color names with HEX code - * @static - * @field - * @memberOf fabric.Color - * @see: https://www.w3.org/TR/css3-color/#svg-color - */ -fabric.Color.colorNameMap = { - aliceblue: '#F0F8FF', - antiquewhite: '#FAEBD7', - aqua: '#00FFFF', - aquamarine: '#7FFFD4', - azure: '#F0FFFF', - beige: '#F5F5DC', - bisque: '#FFE4C4', - black: '#000000', - blanchedalmond: '#FFEBCD', - blue: '#0000FF', - blueviolet: '#8A2BE2', - brown: '#A52A2A', - burlywood: '#DEB887', - cadetblue: '#5F9EA0', - chartreuse: '#7FFF00', - chocolate: '#D2691E', - coral: '#FF7F50', - cornflowerblue: '#6495ED', - cornsilk: '#FFF8DC', - crimson: '#DC143C', - cyan: '#00FFFF', - darkblue: '#00008B', - darkcyan: '#008B8B', - darkgoldenrod: '#B8860B', - darkgray: '#A9A9A9', - darkgrey: '#A9A9A9', - darkgreen: '#006400', - darkkhaki: '#BDB76B', - darkmagenta: '#8B008B', - darkolivegreen: '#556B2F', - darkorange: '#FF8C00', - darkorchid: '#9932CC', - darkred: '#8B0000', - darksalmon: '#E9967A', - darkseagreen: '#8FBC8F', - darkslateblue: '#483D8B', - darkslategray: '#2F4F4F', - darkslategrey: '#2F4F4F', - darkturquoise: '#00CED1', - darkviolet: '#9400D3', - deeppink: '#FF1493', - deepskyblue: '#00BFFF', - dimgray: '#696969', - dimgrey: '#696969', - dodgerblue: '#1E90FF', - firebrick: '#B22222', - floralwhite: '#FFFAF0', - forestgreen: '#228B22', - fuchsia: '#FF00FF', - gainsboro: '#DCDCDC', - ghostwhite: '#F8F8FF', - gold: '#FFD700', - goldenrod: '#DAA520', - gray: '#808080', - grey: '#808080', - green: '#008000', - greenyellow: '#ADFF2F', - honeydew: '#F0FFF0', - hotpink: '#FF69B4', - indianred: '#CD5C5C', - indigo: '#4B0082', - ivory: '#FFFFF0', - khaki: '#F0E68C', - lavender: '#E6E6FA', - lavenderblush: '#FFF0F5', - lawngreen: '#7CFC00', - lemonchiffon: '#FFFACD', - lightblue: '#ADD8E6', - lightcoral: '#F08080', - lightcyan: '#E0FFFF', - lightgoldenrodyellow: '#FAFAD2', - lightgray: '#D3D3D3', - lightgrey: '#D3D3D3', - lightgreen: '#90EE90', - lightpink: '#FFB6C1', - lightsalmon: '#FFA07A', - lightseagreen: '#20B2AA', - lightskyblue: '#87CEFA', - lightslategray: '#778899', - lightslategrey: '#778899', - lightsteelblue: '#B0C4DE', - lightyellow: '#FFFFE0', - lime: '#00FF00', - limegreen: '#32CD32', - linen: '#FAF0E6', - magenta: '#FF00FF', - maroon: '#800000', - mediumaquamarine: '#66CDAA', - mediumblue: '#0000CD', - mediumorchid: '#BA55D3', - mediumpurple: '#9370DB', - mediumseagreen: '#3CB371', - mediumslateblue: '#7B68EE', - mediumspringgreen: '#00FA9A', - mediumturquoise: '#48D1CC', - mediumvioletred: '#C71585', - midnightblue: '#191970', - mintcream: '#F5FFFA', - mistyrose: '#FFE4E1', - moccasin: '#FFE4B5', - navajowhite: '#FFDEAD', - navy: '#000080', - oldlace: '#FDF5E6', - olive: '#808000', - olivedrab: '#6B8E23', - orange: '#FFA500', - orangered: '#FF4500', - orchid: '#DA70D6', - palegoldenrod: '#EEE8AA', - palegreen: '#98FB98', - paleturquoise: '#AFEEEE', - palevioletred: '#DB7093', - papayawhip: '#FFEFD5', - peachpuff: '#FFDAB9', - peru: '#CD853F', - pink: '#FFC0CB', - plum: '#DDA0DD', - powderblue: '#B0E0E6', - purple: '#800080', - rebeccapurple: '#663399', - red: '#FF0000', - rosybrown: '#BC8F8F', - royalblue: '#4169E1', - saddlebrown: '#8B4513', - salmon: '#FA8072', - sandybrown: '#F4A460', - seagreen: '#2E8B57', - seashell: '#FFF5EE', - sienna: '#A0522D', - silver: '#C0C0C0', - skyblue: '#87CEEB', - slateblue: '#6A5ACD', - slategray: '#708090', - slategrey: '#708090', - snow: '#FFFAFA', - springgreen: '#00FF7F', - steelblue: '#4682B4', - tan: '#D2B48C', - teal: '#008080', - thistle: '#D8BFD8', - tomato: '#FF6347', - turquoise: '#40E0D0', - violet: '#EE82EE', - wheat: '#F5DEB3', - white: '#FFFFFF', - whitesmoke: '#F5F5F5', - yellow: '#FFFF00', - yellowgreen: '#9ACD32' -}; - -/** - * @private - * @param {Number} p - * @param {Number} q - * @param {Number} t - * @return {Number} - */ -function hue2rgb(p, q, t) { - if (t < 0) { - t += 1; - } - if (t > 1) { - t -= 1; - } - if (t < 1 / 6) { - return p + (q - p) * 6 * t; - } - if (t < 1 / 2) { - return q; - } - if (t < 2 / 3) { - return p + (q - p) * (2 / 3 - t) * 6; - } - return p; -} - -/** - * Returns new color object, when given a color in RGB format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255) - * @return {fabric.Color} - */ -fabric.Color.fromRgb = function(color) { - return Color.fromSource(Color.sourceFromRgb(color)); -}; - -/** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) - * @return {Array} source - */ -fabric.Color.sourceFromRgb = function(color) { - var match = color.match(Color.reRGBa); - if (match) { - var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), - g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), - b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } return [ - parseInt(r, 10), - parseInt(g, 10), - parseInt(b, 10), + Math.round(r * 255), + Math.round(g * 255), + Math.round(b * 255), match[4] ? parseFloat(match[4]) : 1 ]; - } -}; - -/** - * Returns new color object, when given a color in RGBA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} - */ -fabric.Color.fromRgba = Color.fromRgb; - -/** - * Returns new color object, when given a color in HSL format - * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) - * @memberOf fabric.Color - * @return {fabric.Color} - */ -fabric.Color.fromHsl = function(color) { - return Color.fromSource(Color.sourceFromHsl(color)); -}; - -/** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. - * Adapted from https://github.com/mjijackson - * @memberOf fabric.Color - * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) - * @return {Array} source - * @see http://http://www.w3.org/TR/css3-color/#hsl-color - */ -fabric.Color.sourceFromHsl = function(color) { - var match = color.match(Color.reHSLa); - if (!match) { - return; - } + }; - var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, - s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), - l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), - r, g, b; + /** + * Returns new color object, when given a color in HSLA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ + fabric.Color.fromHsla = Color.fromHsl; - if (s === 0) { - r = g = b = l; - } - else { - var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, - p = l * 2 - q; + /** + * Returns new color object, when given a color in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color Color value ex: FF5555 + * @return {fabric.Color} + */ + fabric.Color.fromHex = function(color) { + return Color.fromSource(Color.sourceFromHex(color)); + }; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); - } + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color ex: FF5555 or FF5544CC (RGBa) + * @return {Array} source + */ + fabric.Color.sourceFromHex = function(color) { + if (color.match(Color.reHex)) { + var value = color.slice(color.indexOf('#') + 1), + isShortNotation = (value.length === 3 || value.length === 4), + isRGBa = (value.length === 8 || value.length === 4), + r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), + g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), + b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), + a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; + + return [ + parseInt(r, 16), + parseInt(g, 16), + parseInt(b, 16), + parseFloat((parseInt(a, 16) / 255).toFixed(2)) + ]; + } + }; - return [ - Math.round(r * 255), - Math.round(g * 255), - Math.round(b * 255), - match[4] ? parseFloat(match[4]) : 1 - ]; -}; - -/** - * Returns new color object, when given a color in HSLA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} - */ -fabric.Color.fromHsla = Color.fromHsl; - -/** - * Returns new color object, when given a color in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color Color value ex: FF5555 - * @return {fabric.Color} - */ -fabric.Color.fromHex = function(color) { - return Color.fromSource(Color.sourceFromHex(color)); -}; - -/** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color ex: FF5555 or FF5544CC (RGBa) - * @return {Array} source - */ -fabric.Color.sourceFromHex = function(color) { - if (color.match(Color.reHex)) { - var value = color.slice(color.indexOf('#') + 1), - isShortNotation = (value.length === 3 || value.length === 4), - isRGBa = (value.length === 8 || value.length === 4), - r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), - g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), - b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), - a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; + /** + * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) + * @static + * @memberOf fabric.Color + * @param {Array} source + * @return {fabric.Color} + */ + fabric.Color.fromSource = function(source) { + var oColor = new Color(); + oColor.setSource(source); + return oColor; + }; - return [ - parseInt(r, 16), - parseInt(g, 16), - parseInt(b, 16), - parseFloat((parseInt(a, 16) / 255).toFixed(2)) - ]; - } -}; - -/** - * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) - * @static - * @memberOf fabric.Color - * @param {Array} source - * @return {fabric.Color} - */ -fabric.Color.fromSource = function(source) { - var oColor = new Color(); - oColor.setSource(source); - return oColor; -}; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/control.class.js b/src/control.class.js index 08b05338ca9..e98ae521150 100644 --- a/src/control.class.js +++ b/src/control.class.js @@ -1,333 +1,337 @@ -var fabric = exports.fabric || (exports.fabric = { }); +(function(global) { -function Control(options) { - for (var i in options) { - this[i] = options[i]; - } -} - -fabric.Control = Control; - -fabric.Control.prototype = /** @lends fabric.Control.prototype */ { - - /** - * keep track of control visibility. - * mainly for backward compatibility. - * if you do not want to see a control, you can remove it - * from the controlset. - * @type {Boolean} - * @default true - */ - visible: true, - - /** - * Name of the action that the control will likely execute. - * This is optional. FabricJS uses to identify what the user is doing for some - * extra optimizations. If you are writing a custom control and you want to know - * somewhere else in the code what is going on, you can use this string here. - * you can also provide a custom getActionName if your control run multiple actions - * depending on some external state. - * default to scale since is the most common, used on 4 corners by default - * @type {String} - * @default 'scale' - */ - actionName: 'scale', - - /** - * Drawing angle of the control. - * NOT used for now, but name marked as needed for internal logic - * example: to reuse the same drawing function for different rotated controls - * @type {Number} - * @default 0 - */ - angle: 0, - - /** - * Relative position of the control. X - * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 - */ - x: 0, - - /** - * Relative position of the control. Y - * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 - */ - y: 0, - - /** - * Horizontal offset of the control from the defined position. In pixels - * Positive offset moves the control to the right, negative to the left. - * It used when you want to have position of control that does not scale with - * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on - * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will - * stay 30 pixels no matter how the object is big. Another example is having 2 - * controls in the corner, that stay in the same position when the object scale. - * of the bounding box. - * @type {Number} - * @default 0 - */ - offsetX: 0, - - /** - * Vertical offset of the control from the defined position. In pixels - * Positive offset moves the control to the bottom, negative to the top. - * @type {Number} - * @default 0 - */ - offsetY: 0, - - /** - * Sets the length of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeX: null, - - /** - * Sets the height of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeY: null, - - /** - * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeX: null, - - /** - * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeY: null, - - /** - * Css cursor style to display when the control is hovered. - * if the method `cursorStyleHandler` is provided, this property is ignored. - * @type {String} - * @default 'crosshair' - */ - cursorStyle: 'crosshair', - - /** - * If controls has an offsetY or offsetX, draw a line that connects - * the control to the bounding box - * @type {Boolean} - * @default false - */ - withConnection: false, - - /** - * The control actionHandler, provide one to handle action ( control being moved ) - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - actionHandler: function(/* eventData, transformData, x, y */) { }, - - /** - * The control handler for mouse down, provide one to handle mouse down on control - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - mouseDownHandler: function(/* eventData, transformData, x, y */) { }, - - /** - * The control mouseUpHandler, provide one to handle an effect on mouse up. - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - mouseUpHandler: function(/* eventData, transformData, x, y */) { }, - - /** - * Returns control actionHandler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getActionHandler: function(/* eventData, fabricObject, control */) { - return this.actionHandler; - }, - - /** - * Returns control mouseDown handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getMouseDownHandler: function(/* eventData, fabricObject, control */) { - return this.mouseDownHandler; - }, - - /** - * Returns control mouseUp handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getMouseUpHandler: function(/* eventData, fabricObject, control */) { - return this.mouseUpHandler; - }, - - /** - * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate - * function you can pass one in the constructor - * the cursorStyle property - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} - */ - cursorStyleHandler: function(eventData, control /* fabricObject */) { - return control.cursorStyle; - }, - - /** - * Returns the action name. The basic implementation just return the actionName property. - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} - */ - getActionName: function(eventData, control /* fabricObject */) { - return control.actionName; - }, - - /** - * Returns controls visibility - * @param {fabric.Object} object on which the control is displayed - * @param {String} controlKey key where the control is memorized on the - * @return {Boolean} - */ - getVisibility: function(fabricObject, controlKey) { - var objectVisibility = fabricObject._controlsVisibility; - if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { - return objectVisibility[controlKey]; - } - return this.visible; - }, - - /** - * Sets controls visibility - * @param {Boolean} visibility for the object - * @return {Void} - */ - setVisibility: function(visibility /* name, fabricObject */) { - this.visible = visibility; - }, - - - positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { - var point = fabric.util.transformPoint({ - x: this.x * dim.x + this.offsetX, - y: this.y * dim.y + this.offsetY }, finalMatrix); - return point; - }, - - /** - * Returns the coords for this control based on object values. - * @param {Number} objectAngle angle from the fabric object holding the control - * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if - * isTouch is true) - * @param {Number} centerX x coordinate where the control center should be - * @param {Number} centerY y coordinate where the control center should be - * @param {boolean} isTouch true if touch corner, false if normal corner - */ - calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { - var cosHalfOffset, - sinHalfOffset, - cosHalfOffsetComp, - sinHalfOffsetComp, - xSize = (isTouch) ? this.touchSizeX : this.sizeX, - ySize = (isTouch) ? this.touchSizeY : this.sizeY; - if (xSize && ySize && xSize !== ySize) { - // handle rectangular corners - var controlTriangleAngle = Math.atan2(ySize, xSize); - var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; - var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); - // use complementary angle for two corners - cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); - sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); - } - else { - // handle square corners - // use default object corner size unless size is defined - var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; - /* 0.7071067812 stands for sqrt(2)/2 */ - cornerHypotenuse = cornerSize * 0.7071067812; - // complementary angles are equal since they're both 45 degrees - var newTheta = fabric.util.degreesToRadians(45 - objectAngle); - cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); - } + var fabric = global.fabric || (global.fabric = { }); - return { - tl: { - x: centerX - sinHalfOffsetComp, - y: centerY - cosHalfOffsetComp, - }, - tr: { - x: centerX + cosHalfOffset, - y: centerY - sinHalfOffset, - }, - bl: { - x: centerX - cosHalfOffset, - y: centerY + sinHalfOffset, - }, - br: { - x: centerX + sinHalfOffsetComp, - y: centerY + cosHalfOffsetComp, - }, - }; - }, - - /** - * Render function for the control. - * When this function runs the context is unscaled. unrotate. Just retina scaled. - * all the functions will have to translate to the point left,top before starting Drawing - * if they want to draw a control where the position is detected. - * left and top are the result of the positionHandler function - * @param {RenderingContext2D} ctx the context where the control will be drawn - * @param {Number} left position of the canvas where we are about to render the control. - * @param {Number} top position of the canvas where we are about to render the control. - * @param {Object} styleOverride - * @param {fabric.Object} fabricObject the object where the control is about to be rendered - */ - render: function(ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { - case 'circle': - fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); - break; - default: - fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); + function Control(options) { + for (var i in options) { + this[i] = options[i]; } - }, -}; + } + + fabric.Control = Control; + + fabric.Control.prototype = /** @lends fabric.Control.prototype */ { + + /** + * keep track of control visibility. + * mainly for backward compatibility. + * if you do not want to see a control, you can remove it + * from the controlset. + * @type {Boolean} + * @default true + */ + visible: true, + + /** + * Name of the action that the control will likely execute. + * This is optional. FabricJS uses to identify what the user is doing for some + * extra optimizations. If you are writing a custom control and you want to know + * somewhere else in the code what is going on, you can use this string here. + * you can also provide a custom getActionName if your control run multiple actions + * depending on some external state. + * default to scale since is the most common, used on 4 corners by default + * @type {String} + * @default 'scale' + */ + actionName: 'scale', + + /** + * Drawing angle of the control. + * NOT used for now, but name marked as needed for internal logic + * example: to reuse the same drawing function for different rotated controls + * @type {Number} + * @default 0 + */ + angle: 0, + + /** + * Relative position of the control. X + * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + x: 0, + + /** + * Relative position of the control. Y + * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + y: 0, + + /** + * Horizontal offset of the control from the defined position. In pixels + * Positive offset moves the control to the right, negative to the left. + * It used when you want to have position of control that does not scale with + * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on + * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will + * stay 30 pixels no matter how the object is big. Another example is having 2 + * controls in the corner, that stay in the same position when the object scale. + * of the bounding box. + * @type {Number} + * @default 0 + */ + offsetX: 0, + + /** + * Vertical offset of the control from the defined position. In pixels + * Positive offset moves the control to the bottom, negative to the top. + * @type {Number} + * @default 0 + */ + offsetY: 0, + + /** + * Sets the length of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeX: null, + + /** + * Sets the height of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeY: null, + + /** + * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeX: null, + + /** + * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeY: null, + + /** + * Css cursor style to display when the control is hovered. + * if the method `cursorStyleHandler` is provided, this property is ignored. + * @type {String} + * @default 'crosshair' + */ + cursorStyle: 'crosshair', + + /** + * If controls has an offsetY or offsetX, draw a line that connects + * the control to the bounding box + * @type {Boolean} + * @default false + */ + withConnection: false, + + /** + * The control actionHandler, provide one to handle action ( control being moved ) + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + actionHandler: function(/* eventData, transformData, x, y */) { }, + + /** + * The control handler for mouse down, provide one to handle mouse down on control + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseDownHandler: function(/* eventData, transformData, x, y */) { }, + + /** + * The control mouseUpHandler, provide one to handle an effect on mouse up. + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseUpHandler: function(/* eventData, transformData, x, y */) { }, + + /** + * Returns control actionHandler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getActionHandler: function(/* eventData, fabricObject, control */) { + return this.actionHandler; + }, + + /** + * Returns control mouseDown handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseDownHandler: function(/* eventData, fabricObject, control */) { + return this.mouseDownHandler; + }, + + /** + * Returns control mouseUp handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseUpHandler: function(/* eventData, fabricObject, control */) { + return this.mouseUpHandler; + }, + + /** + * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate + * function you can pass one in the constructor + * the cursorStyle property + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + cursorStyleHandler: function(eventData, control /* fabricObject */) { + return control.cursorStyle; + }, + + /** + * Returns the action name. The basic implementation just return the actionName property. + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + getActionName: function(eventData, control /* fabricObject */) { + return control.actionName; + }, + + /** + * Returns controls visibility + * @param {fabric.Object} object on which the control is displayed + * @param {String} controlKey key where the control is memorized on the + * @return {Boolean} + */ + getVisibility: function(fabricObject, controlKey) { + var objectVisibility = fabricObject._controlsVisibility; + if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { + return objectVisibility[controlKey]; + } + return this.visible; + }, + + /** + * Sets controls visibility + * @param {Boolean} visibility for the object + * @return {Void} + */ + setVisibility: function(visibility /* name, fabricObject */) { + this.visible = visibility; + }, + + + positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { + var point = fabric.util.transformPoint({ + x: this.x * dim.x + this.offsetX, + y: this.y * dim.y + this.offsetY }, finalMatrix); + return point; + }, + + /** + * Returns the coords for this control based on object values. + * @param {Number} objectAngle angle from the fabric object holding the control + * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if + * isTouch is true) + * @param {Number} centerX x coordinate where the control center should be + * @param {Number} centerY y coordinate where the control center should be + * @param {boolean} isTouch true if touch corner, false if normal corner + */ + calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { + var cosHalfOffset, + sinHalfOffset, + cosHalfOffsetComp, + sinHalfOffsetComp, + xSize = (isTouch) ? this.touchSizeX : this.sizeX, + ySize = (isTouch) ? this.touchSizeY : this.sizeY; + if (xSize && ySize && xSize !== ySize) { + // handle rectangular corners + var controlTriangleAngle = Math.atan2(ySize, xSize); + var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; + var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); + // use complementary angle for two corners + cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); + sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); + } + else { + // handle square corners + // use default object corner size unless size is defined + var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; + /* 0.7071067812 stands for sqrt(2)/2 */ + cornerHypotenuse = cornerSize * 0.7071067812; + // complementary angles are equal since they're both 45 degrees + var newTheta = fabric.util.degreesToRadians(45 - objectAngle); + cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); + } + + return { + tl: { + x: centerX - sinHalfOffsetComp, + y: centerY - cosHalfOffsetComp, + }, + tr: { + x: centerX + cosHalfOffset, + y: centerY - sinHalfOffset, + }, + bl: { + x: centerX - cosHalfOffset, + y: centerY + sinHalfOffset, + }, + br: { + x: centerX + sinHalfOffsetComp, + y: centerY + cosHalfOffsetComp, + }, + }; + }, + + /** + * Render function for the control. + * When this function runs the context is unscaled. unrotate. Just retina scaled. + * all the functions will have to translate to the point left,top before starting Drawing + * if they want to draw a control where the position is detected. + * left and top are the result of the positionHandler function + * @param {RenderingContext2D} ctx the context where the control will be drawn + * @param {Number} left position of the canvas where we are about to render the control. + * @param {Number} top position of the canvas where we are about to render the control. + * @param {Object} styleOverride + * @param {fabric.Object} fabricObject the object where the control is about to be rendered + */ + render: function(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { + case 'circle': + fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); + break; + default: + fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); + } + }, + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/controls.actions.js b/src/controls.actions.js index 11bd289b1e8..c12dc55555a 100644 --- a/src/controls.actions.js +++ b/src/controls.actions.js @@ -1,161 +1,162 @@ -var fabric = exports.fabric || (exports.fabric = { }), - scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], - skewMap = ['ns', 'nesw', 'ew', 'nwse'], - controls = {}, - LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', - opposite = { - top: BOTTOM, - bottom: TOP, - left: RIGHT, - right: LEFT, - center: CENTER, - }, radiansToDegrees = fabric.util.radiansToDegrees, - sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); - -/** +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], + skewMap = ['ns', 'nesw', 'ew', 'nwse'], + controls = {}, + LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', + opposite = { + top: BOTTOM, + bottom: TOP, + left: RIGHT, + right: LEFT, + center: CENTER, + }, radiansToDegrees = fabric.util.radiansToDegrees, + sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); + + /** * Combine control position and object angle to find the control direction compared * to the object center. * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls * @param {fabric.Control} control the control class * @return {Number} 0 - 7 a quadrant number */ -function findCornerQuadrant(fabricObject, control) { - // angle is relative to canvas plane - var angle = fabricObject.getTotalAngle(); - var cornerAngle = angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; - return Math.round((cornerAngle % 360) / 45); -} - -function fireEvent(eventName, options) { - var target = options.transform.target, - canvas = target.canvas; - canvas && canvas.fire('object:' + eventName, Object.assign({}, options, { target: target })); - target.fire(eventName, options); -} - -/** + function findCornerQuadrant(fabricObject, control) { + // angle is relative to canvas plane + var angle = fabricObject.getTotalAngle(); + var cornerAngle = angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; + return Math.round((cornerAngle % 360) / 45); + } + + function fireEvent(eventName, options) { + var target = options.transform.target, + canvas = target.canvas; + canvas && canvas.fire('object:' + eventName, Object.assign({}, options, { target: target })); + target.fire(eventName, options); + } + + /** * Inspect event and fabricObject properties to understand if the scaling action * @param {Event} eventData from the user action * @param {fabric.Object} fabricObject the fabric object about to scale * @return {Boolean} true if scale is proportional */ -function scaleIsProportional(eventData, fabricObject) { - var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, - uniformIsToggled = eventData[uniScaleKey]; - return (canvas.uniformScaling && !uniformIsToggled) || + function scaleIsProportional(eventData, fabricObject) { + var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, + uniformIsToggled = eventData[uniScaleKey]; + return (canvas.uniformScaling && !uniformIsToggled) || (!canvas.uniformScaling && uniformIsToggled); -} + } -/** + /** * Checks if transform is centered * @param {Object} transform transform data * @return {Boolean} true if transform is centered */ -function isTransformCentered(transform) { - return transform.originX === CENTER && transform.originY === CENTER; -} + function isTransformCentered(transform) { + return transform.originX === CENTER && transform.originY === CENTER; + } -/** + /** * Inspect fabricObject to understand if the current scaling action is allowed * @param {fabric.Object} fabricObject the fabric object about to scale * @param {String} by 'x' or 'y' or '' * @param {Boolean} scaleProportionally true if we are trying to scale proportionally * @return {Boolean} true if scaling is not allowed at current conditions */ -function scalingIsForbidden(fabricObject, by, scaleProportionally) { - var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; - if (lockX && lockY) { - return true; - } - if (!by && (lockX || lockY) && scaleProportionally) { - return true; - } - if (lockX && by === 'x') { - return true; - } - if (lockY && by === 'y') { - return true; + function scalingIsForbidden(fabricObject, by, scaleProportionally) { + var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; + if (lockX && lockY) { + return true; + } + if (!by && (lockX || lockY) && scaleProportionally) { + return true; + } + if (lockX && by === 'x') { + return true; + } + if (lockY && by === 'y') { + return true; + } + return false; } - return false; -} -/** + /** * return the correct cursor style for the scale action * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ -function scaleCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed', - scaleProportionally = scaleIsProportional(eventData, fabricObject), - by = ''; - if (control.x !== 0 && control.y === 0) { - by = 'x'; - } - else if (control.x === 0 && control.y !== 0) { - by = 'y'; - } - if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { - return notAllowed; + function scaleCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed', + scaleProportionally = scaleIsProportional(eventData, fabricObject), + by = ''; + if (control.x !== 0 && control.y === 0) { + by = 'x'; + } + else if (control.x === 0 && control.y !== 0) { + by = 'y'; + } + if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control); + return scaleMap[n] + '-resize'; } - var n = findCornerQuadrant(fabricObject, control); - return scaleMap[n] + '-resize'; -} -/** + /** * return the correct cursor style for the skew action * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ -function skewCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed'; - if (control.x !== 0 && fabricObject.lockSkewingY) { - return notAllowed; - } - if (control.y !== 0 && fabricObject.lockSkewingX) { - return notAllowed; + function skewCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed'; + if (control.x !== 0 && fabricObject.lockSkewingY) { + return notAllowed; + } + if (control.y !== 0 && fabricObject.lockSkewingX) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control) % 4; + return skewMap[n] + '-resize'; } - var n = findCornerQuadrant(fabricObject, control) % 4; - return skewMap[n] + '-resize'; -} -/** + /** * Combine skew and scale style handlers to cover fabric standard use case * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ -function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { - if (eventData[fabricObject.canvas.altActionKey]) { - return controls.skewCursorStyleHandler(eventData, control, fabricObject); + function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { + if (eventData[fabricObject.canvas.altActionKey]) { + return controls.skewCursorStyleHandler(eventData, control, fabricObject); + } + return controls.scaleCursorStyleHandler(eventData, control, fabricObject); } - return controls.scaleCursorStyleHandler(eventData, control, fabricObject); -} -/** + /** * Inspect event, control and fabricObject to return the correct action name * @param {Event} eventData the javascript event that is causing the scale * @param {fabric.Control} control the control that is interested in the action * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} an action name */ -function scaleOrSkewActionName(eventData, control, fabricObject) { - var isAlternative = eventData[fabricObject.canvas.altActionKey]; - if (control.x === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewX' : 'scaleY'; - } - if (control.y === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewY' : 'scaleX'; + function scaleOrSkewActionName(eventData, control, fabricObject) { + var isAlternative = eventData[fabricObject.canvas.altActionKey]; + if (control.x === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewX' : 'scaleY'; + } + if (control.y === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewY' : 'scaleX'; + } } -} -/** + /** * Find the correct style for the control that is used for rotation. * this function is very simple and it just take care of not-allowed or standard cursor * @param {Event} eventData the javascript event that is causing the scale @@ -163,56 +164,56 @@ function scaleOrSkewActionName(eventData, control, fabricObject) { * @param {fabric.Object} fabricObject the fabric object that is interested in the action * @return {String} a valid css string for the cursor */ -function rotationStyleHandler(eventData, control, fabricObject) { - if (fabricObject.lockRotation) { - return 'not-allowed'; + function rotationStyleHandler(eventData, control, fabricObject) { + if (fabricObject.lockRotation) { + return 'not-allowed'; + } + return control.cursorStyle; } - return control.cursorStyle; -} -function commonEventInfo(eventData, transform, x, y) { - return { - e: eventData, - transform: transform, - pointer: { - x: x, - y: y, - } - }; -} + function commonEventInfo(eventData, transform, x, y) { + return { + e: eventData, + transform: transform, + pointer: { + x: x, + y: y, + } + }; + } -/** + /** * Wrap an action handler with saving/restoring object position on the transform. * this is the code that permits to objects to keep their position while transforming. * @param {Function} actionHandler the function to wrap * @return {Function} a function with an action handler signature */ -function wrapWithFixedAnchor(actionHandler) { - return function(eventData, transform, x, y) { - var target = transform.target, centerPoint = target.getRelativeCenterPoint(), - constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), - actionPerformed = actionHandler(eventData, transform, x, y); - target.setPositionByOrigin(constraint, transform.originX, transform.originY); - return actionPerformed; - }; -} - -/** + function wrapWithFixedAnchor(actionHandler) { + return function(eventData, transform, x, y) { + var target = transform.target, centerPoint = target.getRelativeCenterPoint(), + constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), + actionPerformed = actionHandler(eventData, transform, x, y); + target.setPositionByOrigin(constraint, transform.originX, transform.originY); + return actionPerformed; + }; + } + + /** * Wrap an action handler with firing an event if the action is performed * @param {Function} actionHandler the function to wrap * @return {Function} a function with an action handler signature */ -function wrapWithFireEvent(eventName, actionHandler) { - return function(eventData, transform, x, y) { - var actionPerformed = actionHandler(eventData, transform, x, y); - if (actionPerformed) { - fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); - } - return actionPerformed; - }; -} + function wrapWithFireEvent(eventName, actionHandler) { + return function(eventData, transform, x, y) { + var actionPerformed = actionHandler(eventData, transform, x, y); + if (actionPerformed) { + fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); + } + return actionPerformed; + }; + } -/** + /** * Transforms a point described by x and y in a distance from the top left corner of the object * bounding box. * @param {Object} transform @@ -222,137 +223,137 @@ function wrapWithFireEvent(eventName, actionHandler) { * @param {number} y * @return {Fabric.Point} the normalized point */ -function getLocalPoint(transform, originX, originY, x, y) { - var target = transform.target, - control = target.controls[transform.corner], - zoom = target.canvas.getZoom(), - padding = target.padding / zoom, - localPoint = target.normalizePoint(new fabric.Point(x, y), originX, originY); - if (localPoint.x >= padding) { - localPoint.x -= padding; - } - if (localPoint.x <= -padding) { - localPoint.x += padding; - } - if (localPoint.y >= padding) { - localPoint.y -= padding; - } - if (localPoint.y <= padding) { - localPoint.y += padding; + function getLocalPoint(transform, originX, originY, x, y) { + var target = transform.target, + control = target.controls[transform.corner], + zoom = target.canvas.getZoom(), + padding = target.padding / zoom, + localPoint = target.normalizePoint(new fabric.Point(x, y), originX, originY); + if (localPoint.x >= padding) { + localPoint.x -= padding; + } + if (localPoint.x <= -padding) { + localPoint.x += padding; + } + if (localPoint.y >= padding) { + localPoint.y -= padding; + } + if (localPoint.y <= padding) { + localPoint.y += padding; + } + localPoint.x -= control.offsetX; + localPoint.y -= control.offsetY; + return localPoint; } - localPoint.x -= control.offsetX; - localPoint.y -= control.offsetY; - return localPoint; -} -/** + /** * Detect if the fabric object is flipped on one side. * @param {fabric.Object} target * @return {Boolean} true if one flip, but not two. */ -function targetHasOneFlip(target) { - return target.flipX !== target.flipY; -} + function targetHasOneFlip(target) { + return target.flipX !== target.flipY; + } -/** + /** * Utility function to compensate the scale factor when skew is applied on both axes * @private */ -function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { - if (target[oppositeSkew] !== 0) { - var newDim = target._getTransformedDimensions()[axis]; - var newValue = reference / newDim * target[scaleToCompensate]; - target.set(scaleToCompensate, newValue); + function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { + if (target[oppositeSkew] !== 0) { + var newDim = target._getTransformedDimensions()[axis]; + var newValue = reference / newDim * target[scaleToCompensate]; + target.set(scaleToCompensate, newValue); + } } -} -/** + /** * Action handler for skewing on the X axis * @private */ -function skewObjectX(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions({ skewX: 0, skewY: target.skewY }), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, - currentSkew = target.skewX, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; - } - else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; + function skewObjectX(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions({ skewX: 0, skewY: target.skewY }), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, + currentSkew = target.skewX, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; + } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; + } + if (targetHasOneFlip(target)) { + newSkew = -newSkew; + } } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().y; + target.set('skewX', newSkew); + compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); } + return hasSkewed; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().y; - target.set('skewX', newSkew); - compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); - } - return hasSkewed; -} -/** + /** * Action handler for skewing on the Y axis * @private */ -function skewObjectY(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions({ skewX: target.skewX, skewY: 0 }), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, - currentSkew = target.skewY, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; - } - else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; + function skewObjectY(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions({ skewX: target.skewX, skewY: 0 }), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, + currentSkew = target.skewY, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; + } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; + } + if (targetHasOneFlip(target)) { + newSkew = -newSkew; + } } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().x; + target.set('skewY', newSkew); + compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); } + return hasSkewed; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().x; - target.set('skewY', newSkew); - compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); - } - return hasSkewed; -} -/** + /** * Wrapped Action handler for skewing on the Y axis, takes care of the * skew direction and determine the correct transform origin for the anchor point * @param {Event} eventData javascript event that is doing the transform @@ -361,48 +362,48 @@ function skewObjectY(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function skewHandlerX(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewX > 0 and originY bottom we anchor on right - // if skewX > 0 and originY top we anchor on left - // if skewX < 0 and originY bottom we anchor on left - // if skewX < 0 and originY top we anchor on right - // if skewX is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; - if (target.lockSkewingX) { - return false; - } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.x > 0) { - // we are pulling right, anchor left; - originX = LEFT; - } - else { - // we are pulling right, anchor right - originX = RIGHT; - } - } - else { - if (currentSkew > 0) { - originX = originY === TOP ? LEFT : RIGHT; + function skewHandlerX(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewX > 0 and originY bottom we anchor on right + // if skewX > 0 and originY top we anchor on left + // if skewX < 0 and originY bottom we anchor on left + // if skewX < 0 and originY top we anchor on right + // if skewX is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; + if (target.lockSkewingX) { + return false; } - if (currentSkew < 0) { - originX = originY === TOP ? RIGHT : LEFT; + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.x > 0) { + // we are pulling right, anchor left; + originX = LEFT; + } + else { + // we are pulling right, anchor right + originX = RIGHT; + } } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originX = originX === LEFT ? RIGHT : LEFT; + else { + if (currentSkew > 0) { + originX = originY === TOP ? LEFT : RIGHT; + } + if (currentSkew < 0) { + originX = originY === TOP ? RIGHT : LEFT; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originX = originX === LEFT ? RIGHT : LEFT; + } } - } - // once we have the origin, we find the anchor point - transform.originX = originX; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); - return finalHandler(eventData, transform, x, y); -} + // once we have the origin, we find the anchor point + transform.originX = originX; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); + return finalHandler(eventData, transform, x, y); + } -/** + /** * Wrapped Action handler for skewing on the Y axis, takes care of the * skew direction and determine the correct transform origin for the anchor point * @param {Event} eventData javascript event that is doing the transform @@ -411,48 +412,48 @@ function skewHandlerX(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function skewHandlerY(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewY > 0 and originX left we anchor on top - // if skewY > 0 and originX right we anchor on bottom - // if skewY < 0 and originX left we anchor on bottom - // if skewY < 0 and originX right we anchor on top - // if skewY is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; - if (target.lockSkewingY) { - return false; - } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.y > 0) { - // we are pulling down, anchor up; - originY = TOP; - } - else { - // we are pulling up, anchor down - originY = BOTTOM; - } - } - else { - if (currentSkew > 0) { - originY = originX === LEFT ? TOP : BOTTOM; + function skewHandlerY(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewY > 0 and originX left we anchor on top + // if skewY > 0 and originX right we anchor on bottom + // if skewY < 0 and originX left we anchor on bottom + // if skewY < 0 and originX right we anchor on top + // if skewY is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; + if (target.lockSkewingY) { + return false; } - if (currentSkew < 0) { - originY = originX === LEFT ? BOTTOM : TOP; + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.y > 0) { + // we are pulling down, anchor up; + originY = TOP; + } + else { + // we are pulling up, anchor down + originY = BOTTOM; + } } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originY = originY === TOP ? BOTTOM : TOP; + else { + if (currentSkew > 0) { + originY = originX === LEFT ? TOP : BOTTOM; + } + if (currentSkew < 0) { + originY = originX === LEFT ? BOTTOM : TOP; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originY = originY === TOP ? BOTTOM : TOP; + } } - } - // once we have the origin, we find the anchor point - transform.originY = originY; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); - return finalHandler(eventData, transform, x, y); -} + // once we have the origin, we find the anchor point + transform.originY = originY; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); + return finalHandler(eventData, transform, x, y); + } -/** + /** * Action handler for rotation and snapping, without anchor point. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -462,46 +463,46 @@ function skewHandlerY(eventData, transform, x, y) { * @return {Boolean} true if some change happened * @private */ -function rotationWithSnapping(eventData, transform, x, y) { - var t = transform, - target = t.target, - pivotPoint = target.translateToOriginPoint(target.getRelativeCenterPoint(), t.originX, t.originY); + function rotationWithSnapping(eventData, transform, x, y) { + var t = transform, + target = t.target, + pivotPoint = target.translateToOriginPoint(target.getRelativeCenterPoint(), t.originX, t.originY); - if (target.lockRotation) { - return false; - } - - var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), - curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), - angle = radiansToDegrees(curAngle - lastAngle + t.theta), - hasRotated = true; - - if (target.snapAngle > 0) { - var snapAngle = target.snapAngle, - snapThreshold = target.snapThreshold || snapAngle, - rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, - leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; + if (target.lockRotation) { + return false; + } - if (Math.abs(angle - leftAngleLocked) < snapThreshold) { - angle = leftAngleLocked; + var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), + curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), + angle = radiansToDegrees(curAngle - lastAngle + t.theta), + hasRotated = true; + + if (target.snapAngle > 0) { + var snapAngle = target.snapAngle, + snapThreshold = target.snapThreshold || snapAngle, + rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, + leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; + + if (Math.abs(angle - leftAngleLocked) < snapThreshold) { + angle = leftAngleLocked; + } + else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { + angle = rightAngleLocked; + } } - else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { - angle = rightAngleLocked; + + // normalize angle to positive value + if (angle < 0) { + angle = 360 + angle; } - } + angle %= 360; - // normalize angle to positive value - if (angle < 0) { - angle = 360 + angle; + hasRotated = target.angle !== angle; + target.angle = angle; + return hasRotated; } - angle %= 360; - hasRotated = target.angle !== angle; - target.angle = angle; - return hasRotated; -} - -/** + /** * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -513,91 +514,91 @@ function rotationWithSnapping(eventData, transform, x, y) { * @return {Boolean} true if some change happened * @private */ -function scaleObject(eventData, transform, x, y, options) { - options = options || {}; - var target = transform.target, - lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, - by = options.by, newPoint, scaleX, scaleY, dim, - scaleProportionally = scaleIsProportional(eventData, target), - forbidScaling = scalingIsForbidden(target, by, scaleProportionally), - signX, signY, gestureScale = transform.gestureScale; - - if (forbidScaling) { - return false; - } - if (gestureScale) { - scaleX = transform.scaleX * gestureScale; - scaleY = transform.scaleY * gestureScale; - } - else { - newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); - // use of sign: We use sign to detect change of direction of an action. sign usually change when - // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling - // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily - // cross many time the origin point and flip the object. so we need a way to filter out the noise. - // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. - signX = by !== 'y' ? sign(newPoint.x) : 1; - signY = by !== 'x' ? sign(newPoint.y) : 1; - if (!transform.signX) { - transform.signX = signX; - } - if (!transform.signY) { - transform.signY = signY; - } - - if (target.lockScalingFlip && - (transform.signX !== signX || transform.signY !== signY) - ) { + function scaleObject(eventData, transform, x, y, options) { + options = options || {}; + var target = transform.target, + lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, + by = options.by, newPoint, scaleX, scaleY, dim, + scaleProportionally = scaleIsProportional(eventData, target), + forbidScaling = scalingIsForbidden(target, by, scaleProportionally), + signX, signY, gestureScale = transform.gestureScale; + + if (forbidScaling) { return false; } - - dim = target._getTransformedDimensions(); - // missing detection of flip and logic to switch the origin - if (scaleProportionally && !by) { - // uniform scaling - var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), - original = transform.original, - originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + - Math.abs(dim.y * original.scaleY / target.scaleY), - scale = distance / originalDistance; - scaleX = original.scaleX * scale; - scaleY = original.scaleY * scale; + if (gestureScale) { + scaleX = transform.scaleX * gestureScale; + scaleY = transform.scaleY * gestureScale; } else { - scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); - scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); - } - // if we are scaling by center, we need to double the scale - if (isTransformCentered(transform)) { - scaleX *= 2; - scaleY *= 2; + newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // use of sign: We use sign to detect change of direction of an action. sign usually change when + // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling + // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily + // cross many time the origin point and flip the object. so we need a way to filter out the noise. + // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. + signX = by !== 'y' ? sign(newPoint.x) : 1; + signY = by !== 'x' ? sign(newPoint.y) : 1; + if (!transform.signX) { + transform.signX = signX; + } + if (!transform.signY) { + transform.signY = signY; + } + + if (target.lockScalingFlip && + (transform.signX !== signX || transform.signY !== signY) + ) { + return false; + } + + dim = target._getTransformedDimensions(); + // missing detection of flip and logic to switch the origin + if (scaleProportionally && !by) { + // uniform scaling + var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), + original = transform.original, + originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + + Math.abs(dim.y * original.scaleY / target.scaleY), + scale = distance / originalDistance; + scaleX = original.scaleX * scale; + scaleY = original.scaleY * scale; + } + else { + scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); + scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); + } + // if we are scaling by center, we need to double the scale + if (isTransformCentered(transform)) { + scaleX *= 2; + scaleY *= 2; + } + if (transform.signX !== signX && by !== 'y') { + transform.originX = opposite[transform.originX]; + scaleX *= -1; + transform.signX = signX; + } + if (transform.signY !== signY && by !== 'x') { + transform.originY = opposite[transform.originY]; + scaleY *= -1; + transform.signY = signY; + } } - if (transform.signX !== signX && by !== 'y') { - transform.originX = opposite[transform.originX]; - scaleX *= -1; - transform.signX = signX; + // minScale is taken are in the setter. + var oldScaleX = target.scaleX, oldScaleY = target.scaleY; + if (!by) { + !lockScalingX && target.set('scaleX', scaleX); + !lockScalingY && target.set('scaleY', scaleY); } - if (transform.signY !== signY && by !== 'x') { - transform.originY = opposite[transform.originY]; - scaleY *= -1; - transform.signY = signY; + else { + // forbidden cases already handled on top here. + by === 'x' && target.set('scaleX', scaleX); + by === 'y' && target.set('scaleY', scaleY); } + return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; } - // minScale is taken are in the setter. - var oldScaleX = target.scaleX, oldScaleY = target.scaleY; - if (!by) { - !lockScalingX && target.set('scaleX', scaleX); - !lockScalingY && target.set('scaleY', scaleY); - } - else { - // forbidden cases already handled on top here. - by === 'x' && target.set('scaleX', scaleX); - by === 'y' && target.set('scaleY', scaleY); - } - return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; -} -/** + /** * Generic scaling logic, to scale from corners either equally or freely. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -606,11 +607,11 @@ function scaleObject(eventData, transform, x, y, options) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function scaleObjectFromCorner(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y); -} + function scaleObjectFromCorner(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y); + } -/** + /** * Scaling logic for the X axis. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -619,11 +620,11 @@ function scaleObjectFromCorner(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function scaleObjectX(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'x' }); -} + function scaleObjectX(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'x' }); + } -/** + /** * Scaling logic for the Y axis. * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -632,11 +633,11 @@ function scaleObjectX(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function scaleObjectY(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'y' }); -} + function scaleObjectY(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'y' }); + } -/** + /** * Composed action handler to either scale Y or skew X * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -645,15 +646,15 @@ function scaleObjectY(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function scalingYOrSkewingX(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerX(eventData, transform, x, y); + function scalingYOrSkewingX(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerX(eventData, transform, x, y); + } + return controls.scalingY(eventData, transform, x, y); } - return controls.scalingY(eventData, transform, x, y); -} -/** + /** * Composed action handler to either scale X or skew Y * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -662,15 +663,15 @@ function scalingYOrSkewingX(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function scalingXOrSkewingY(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerY(eventData, transform, x, y); + function scalingXOrSkewingY(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerY(eventData, transform, x, y); + } + return controls.scalingX(eventData, transform, x, y); } - return controls.scalingX(eventData, transform, x, y); -} -/** + /** * Action handler to change textbox width * Needs to be wrapped with `wrapWithFixedAnchor` to be effective * @param {Event} eventData javascript event that is doing the transform @@ -679,25 +680,25 @@ function scalingXOrSkewingY(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if some change happened */ -function changeWidth(eventData, transform, x, y) { - var localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); - // make sure the control changes width ONLY from it's side of target - if (transform.originX === 'center' || + function changeWidth(eventData, transform, x, y) { + var localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // make sure the control changes width ONLY from it's side of target + if (transform.originX === 'center' || (transform.originX === 'right' && localPoint.x < 0) || (transform.originX === 'left' && localPoint.x > 0)) { - var target = transform.target, - strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), - multiplier = isTransformCentered(transform) ? 2 : 1, - oldWidth = target.width, - newWidth = Math.ceil(Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding); - target.set('width', Math.max(newWidth, 0)); - // check against actual target width in case `newWidth` was rejected - return oldWidth !== target.width; + var target = transform.target, + strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), + multiplier = isTransformCentered(transform) ? 2 : 1, + oldWidth = target.width, + newWidth = Math.ceil(Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding); + target.set('width', Math.max(newWidth, 0)); + // check against actual target width in case `newWidth` was rejected + return oldWidth !== target.width; + } + return false; } - return false; -} -/** + /** * Action handler * @private * @param {Event} eventData javascript event that is doing the transform @@ -706,37 +707,39 @@ function changeWidth(eventData, transform, x, y) { * @param {number} y current mouse y position, canvas normalized * @return {Boolean} true if the translation occurred */ -function dragHandler(eventData, transform, x, y) { - var target = transform.target, - newLeft = x - transform.offsetX, - newTop = y - transform.offsetY, - moveX = !target.get('lockMovementX') && target.left !== newLeft, - moveY = !target.get('lockMovementY') && target.top !== newTop; - moveX && target.set('left', newLeft); - moveY && target.set('top', newTop); - if (moveX || moveY) { - fireEvent('moving', commonEventInfo(eventData, transform, x, y)); - } - return moveX || moveY; -} - -controls.scaleCursorStyleHandler = scaleCursorStyleHandler; -controls.skewCursorStyleHandler = skewCursorStyleHandler; -controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; -controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); -controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); -controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); -controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); -controls.scalingYOrSkewingX = scalingYOrSkewingX; -controls.scalingXOrSkewingY = scalingXOrSkewingY; -controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); -controls.skewHandlerX = skewHandlerX; -controls.skewHandlerY = skewHandlerY; -controls.dragHandler = dragHandler; -controls.scaleOrSkewActionName = scaleOrSkewActionName; -controls.rotationStyleHandler = rotationStyleHandler; -controls.fireEvent = fireEvent; -controls.wrapWithFixedAnchor = wrapWithFixedAnchor; -controls.wrapWithFireEvent = wrapWithFireEvent; -controls.getLocalPoint = getLocalPoint; -fabric.controlsUtils = controls; + function dragHandler(eventData, transform, x, y) { + var target = transform.target, + newLeft = x - transform.offsetX, + newTop = y - transform.offsetY, + moveX = !target.get('lockMovementX') && target.left !== newLeft, + moveY = !target.get('lockMovementY') && target.top !== newTop; + moveX && target.set('left', newLeft); + moveY && target.set('top', newTop); + if (moveX || moveY) { + fireEvent('moving', commonEventInfo(eventData, transform, x, y)); + } + return moveX || moveY; + } + + controls.scaleCursorStyleHandler = scaleCursorStyleHandler; + controls.skewCursorStyleHandler = skewCursorStyleHandler; + controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; + controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); + controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); + controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); + controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); + controls.scalingYOrSkewingX = scalingYOrSkewingX; + controls.scalingXOrSkewingY = scalingXOrSkewingY; + controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); + controls.skewHandlerX = skewHandlerX; + controls.skewHandlerY = skewHandlerY; + controls.dragHandler = dragHandler; + controls.scaleOrSkewActionName = scaleOrSkewActionName; + controls.rotationStyleHandler = rotationStyleHandler; + controls.fireEvent = fireEvent; + controls.wrapWithFixedAnchor = wrapWithFixedAnchor; + controls.wrapWithFireEvent = wrapWithFireEvent; + controls.getLocalPoint = getLocalPoint; + fabric.controlsUtils = controls; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/controls.render.js b/src/controls.render.js index a8cd2cd5127..0b36223299f 100644 --- a/src/controls.render.js +++ b/src/controls.render.js @@ -1,95 +1,98 @@ -var fabric = exports.fabric || (exports.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians, - controls = fabric.controlsUtils; +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians, + controls = fabric.controlsUtils; -/** - * Render a round control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - */ -function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), - myLeft = left, - myTop = top, size; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // as soon as fabric react v5, remove ie11, use proper ellipse code. - if (xSize > ySize) { - size = xSize; - ctx.scale(1.0, ySize / xSize); - myTop = top * xSize / ySize; + /** + * Render a round control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ + function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), + myLeft = left, + myTop = top, size; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // as soon as fabric react v5, remove ie11, use proper ellipse code. + if (xSize > ySize) { + size = xSize; + ctx.scale(1.0, ySize / xSize); + myTop = top * xSize / ySize; + } + else if (ySize > xSize) { + size = ySize; + ctx.scale(xSize / ySize, 1.0); + myLeft = left * ySize / xSize; + } + else { + size = xSize; + } + // this is still wrong + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); + ctx[methodName](); + if (stroke) { + ctx.stroke(); + } + ctx.restore(); } - else if (ySize > xSize) { - size = ySize; - ctx.scale(xSize / ySize, 1.0); - myLeft = left * ySize / xSize; - } - else { - size = xSize; - } - // this is still wrong - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); - ctx[methodName](); - if (stroke) { - ctx.stroke(); - } - ctx.restore(); -} -/** - * Render a square control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - */ -function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && ( - styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor - ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // this is still wrong - ctx.lineWidth = 1; - ctx.translate(left, top); - // angle is relative to canvas plane - var angle = fabricObject.getTotalAngle(); - ctx.rotate(degreesToRadians(angle)); - // this does not work, and fixed with ( && ) does not make sense. - // to have real transparent corners we need the controls on upperCanvas - // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); - ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); - if (stroke) { - ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + /** + * Render a square control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ + function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && ( + styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor + ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // this is still wrong + ctx.lineWidth = 1; + ctx.translate(left, top); + // angle is relative to canvas plane + var angle = fabricObject.getTotalAngle(); + ctx.rotate(degreesToRadians(angle)); + // this does not work, and fixed with ( && ) does not make sense. + // to have real transparent corners we need the controls on upperCanvas + // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); + if (stroke) { + ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + } + ctx.restore(); } - ctx.restore(); -} -controls.renderCircleControl = renderCircleControl; -controls.renderSquareControl = renderSquareControl; + controls.renderCircleControl = renderCircleControl; + controls.renderSquareControl = renderSquareControl; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/elements_parser.js b/src/elements_parser.js index 47e898b9e66..1fd81301e62 100644 --- a/src/elements_parser.js +++ b/src/elements_parser.js @@ -1,152 +1,156 @@ -fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) { - this.elements = elements; - this.callback = callback; - this.options = options; - this.reviver = reviver; - this.svgUid = (options && options.svgUid) || 0; - this.parsingOptions = parsingOptions; - this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g; - this.doc = doc; -}; +(function(global) { + var fabric = global.fabric; -(function(proto) { - proto.parse = function() { - this.instances = new Array(this.elements.length); - this.numElements = this.elements.length; - this.createObjects(); + fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) { + this.elements = elements; + this.callback = callback; + this.options = options; + this.reviver = reviver; + this.svgUid = (options && options.svgUid) || 0; + this.parsingOptions = parsingOptions; + this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g; + this.doc = doc; }; - proto.createObjects = function() { - var _this = this; - this.elements.forEach(function(element, i) { - element.setAttribute('svgUid', _this.svgUid); - _this.createObject(element, i); - }); - }; + (function(proto) { + proto.parse = function() { + this.instances = new Array(this.elements.length); + this.numElements = this.elements.length; + this.createObjects(); + }; - proto.findTag = function(el) { - return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))]; - }; + proto.createObjects = function() { + var _this = this; + this.elements.forEach(function(element, i) { + element.setAttribute('svgUid', _this.svgUid); + _this.createObject(element, i); + }); + }; + + proto.findTag = function(el) { + return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))]; + }; - proto.createObject = function(el, index) { - var klass = this.findTag(el); - if (klass && klass.fromElement) { - try { - klass.fromElement(el, this.createCallback(index, el), this.options); + proto.createObject = function(el, index) { + var klass = this.findTag(el); + if (klass && klass.fromElement) { + try { + klass.fromElement(el, this.createCallback(index, el), this.options); + } + catch (err) { + fabric.log(err); + } } - catch (err) { - fabric.log(err); + else { + this.checkIfDone(); } - } - else { - this.checkIfDone(); - } - }; + }; - proto.createCallback = function(index, el) { - var _this = this; - return function(obj) { - var _options; - _this.resolveGradient(obj, el, 'fill'); - _this.resolveGradient(obj, el, 'stroke'); - if (obj instanceof fabric.Image && obj._originalElement) { - _options = obj.parsePreserveAspectRatioAttribute(el); - } - obj._removeTransformMatrix(_options); - _this.resolveClipPath(obj, el); - _this.reviver && _this.reviver(el, obj); - _this.instances[index] = obj; - _this.checkIfDone(); + proto.createCallback = function(index, el) { + var _this = this; + return function(obj) { + var _options; + _this.resolveGradient(obj, el, 'fill'); + _this.resolveGradient(obj, el, 'stroke'); + if (obj instanceof fabric.Image && obj._originalElement) { + _options = obj.parsePreserveAspectRatioAttribute(el); + } + obj._removeTransformMatrix(_options); + _this.resolveClipPath(obj, el); + _this.reviver && _this.reviver(el, obj); + _this.instances[index] = obj; + _this.checkIfDone(); + }; }; - }; - proto.extractPropertyDefinition = function(obj, property, storage) { - var value = obj[property], regex = this.regexUrl; - if (!regex.test(value)) { - return; - } - regex.lastIndex = 0; - var id = regex.exec(value)[1]; - regex.lastIndex = 0; - return fabric[storage][this.svgUid][id]; - }; + proto.extractPropertyDefinition = function(obj, property, storage) { + var value = obj[property], regex = this.regexUrl; + if (!regex.test(value)) { + return; + } + regex.lastIndex = 0; + var id = regex.exec(value)[1]; + regex.lastIndex = 0; + return fabric[storage][this.svgUid][id]; + }; - proto.resolveGradient = function(obj, el, property) { - var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs'); - if (gradientDef) { - var opacityAttr = el.getAttribute(property + '-opacity'); - var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options); - obj.set(property, gradient); - } - }; + proto.resolveGradient = function(obj, el, property) { + var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs'); + if (gradientDef) { + var opacityAttr = el.getAttribute(property + '-opacity'); + var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options); + obj.set(property, gradient); + } + }; - proto.createClipPathCallback = function(obj, container) { - return function(_newObj) { - _newObj._removeTransformMatrix(); - _newObj.fillRule = _newObj.clipRule; - container.push(_newObj); + proto.createClipPathCallback = function(obj, container) { + return function(_newObj) { + _newObj._removeTransformMatrix(); + _newObj.fillRule = _newObj.clipRule; + container.push(_newObj); + }; }; - }; - proto.resolveClipPath = function(obj, usingElement) { - var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'), - element, klass, objTransformInv, container, gTransform, options; - if (clipPath) { - container = []; - objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); - // move the clipPath tag as sibling to the real element that is using it - var clipPathTag = clipPath[0].parentNode; - var clipPathOwner = usingElement; - while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) { - clipPathOwner = clipPathOwner.parentNode; - } - clipPathOwner.parentNode.appendChild(clipPathTag); - for (var i = 0; i < clipPath.length; i++) { - element = clipPath[i]; - klass = this.findTag(element); - klass.fromElement( - element, - this.createClipPathCallback(obj, container), - this.options + proto.resolveClipPath = function(obj, usingElement) { + var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'), + element, klass, objTransformInv, container, gTransform, options; + if (clipPath) { + container = []; + objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); + // move the clipPath tag as sibling to the real element that is using it + var clipPathTag = clipPath[0].parentNode; + var clipPathOwner = usingElement; + while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) { + clipPathOwner = clipPathOwner.parentNode; + } + clipPathOwner.parentNode.appendChild(clipPathTag); + for (var i = 0; i < clipPath.length; i++) { + element = clipPath[i]; + klass = this.findTag(element); + klass.fromElement( + element, + this.createClipPathCallback(obj, container), + this.options + ); + } + if (container.length === 1) { + clipPath = container[0]; + } + else { + clipPath = new fabric.Group(container); + } + gTransform = fabric.util.multiplyTransformMatrices( + objTransformInv, + clipPath.calcTransformMatrix() ); - } - if (container.length === 1) { - clipPath = container[0]; + if (clipPath.clipPath) { + this.resolveClipPath(clipPath, clipPathOwner); + } + var options = fabric.util.qrDecompose(gTransform); + clipPath.flipX = false; + clipPath.flipY = false; + clipPath.set('scaleX', options.scaleX); + clipPath.set('scaleY', options.scaleY); + clipPath.angle = options.angle; + clipPath.skewX = options.skewX; + clipPath.skewY = 0; + clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center'); + obj.clipPath = clipPath; } else { - clipPath = new fabric.Group(container); + // if clip-path does not resolve to any element, delete the property. + delete obj.clipPath; } - gTransform = fabric.util.multiplyTransformMatrices( - objTransformInv, - clipPath.calcTransformMatrix() - ); - if (clipPath.clipPath) { - this.resolveClipPath(clipPath, clipPathOwner); - } - var options = fabric.util.qrDecompose(gTransform); - clipPath.flipX = false; - clipPath.flipY = false; - clipPath.set('scaleX', options.scaleX); - clipPath.set('scaleY', options.scaleY); - clipPath.angle = options.angle; - clipPath.skewX = options.skewX; - clipPath.skewY = 0; - clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center'); - obj.clipPath = clipPath; - } - else { - // if clip-path does not resolve to any element, delete the property. - delete obj.clipPath; - } - }; + }; - proto.checkIfDone = function() { - if (--this.numElements === 0) { - this.instances = this.instances.filter(function(el) { - // eslint-disable-next-line no-eq-null, eqeqeq - return el != null; - }); - this.callback(this.instances, this.elements); - } - }; -})(fabric.ElementsParser.prototype); + proto.checkIfDone = function() { + if (--this.numElements === 0) { + this.instances = this.instances.filter(function(el) { + // eslint-disable-next-line no-eq-null, eqeqeq + return el != null; + }); + this.callback(this.instances, this.elements); + } + }; + })(fabric.ElementsParser.prototype); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/2d_backend.class.js b/src/filters/2d_backend.class.js index 14888f98e40..1da233bab24 100644 --- a/src/filters/2d_backend.class.js +++ b/src/filters/2d_backend.class.js @@ -1,59 +1,62 @@ -var noop = function() {}; +(function(global) { + var fabric = global.fabric, noop = function() {}; -fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; + fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; -/** - * Canvas 2D filter backend. - */ -function Canvas2dFilterBackend() {}; + /** + * Canvas 2D filter backend. + */ + function Canvas2dFilterBackend() {}; -Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { - evictCachesForKey: noop, - dispose: noop, - clearWebGLCaches: noop, + Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { + evictCachesForKey: noop, + dispose: noop, + clearWebGLCaches: noop, - /** - * Experimental. This object is a sort of repository of help layers used to avoid - * of recreating them during frequent filtering. If you are previewing a filter with - * a slider you probably do not want to create help layers every filter step. - * in this object there will be appended some canvases, created once, resized sometimes - * cleared never. Clearing is left to the developer. - **/ - resources: { + /** + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { - }, + }, - /** - * Apply a set of filters against a source image and draw the filtered output - * to the provided destination canvas. - * - * @param {EnhancedFilter} filters The filter to apply. - * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. - * @param {Number} sourceWidth The width of the source input. - * @param {Number} sourceHeight The height of the source input. - * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. - */ - applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { - var ctx = targetCanvas.getContext('2d'); - ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); - var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var pipelineState = { - sourceWidth: sourceWidth, - sourceHeight: sourceHeight, - imageData: imageData, - originalEl: sourceElement, - originalImageData: originalImageData, - canvasEl: targetCanvas, - ctx: ctx, - filterBackend: this, - }; - filters.forEach(function(filter) { filter.applyTo(pipelineState); }); - if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { - targetCanvas.width = pipelineState.imageData.width; - targetCanvas.height = pipelineState.imageData.height; - } - ctx.putImageData(pipelineState.imageData, 0, 0); - return pipelineState; - }, -}; + /** + * Apply a set of filters against a source image and draw the filtered output + * to the provided destination canvas. + * + * @param {EnhancedFilter} filters The filter to apply. + * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. + * @param {Number} sourceWidth The width of the source input. + * @param {Number} sourceHeight The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + */ + applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { + var ctx = targetCanvas.getContext('2d'); + ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); + var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var pipelineState = { + sourceWidth: sourceWidth, + sourceHeight: sourceHeight, + imageData: imageData, + originalEl: sourceElement, + originalImageData: originalImageData, + canvasEl: targetCanvas, + ctx: ctx, + filterBackend: this, + }; + filters.forEach(function(filter) { filter.applyTo(pipelineState); }); + if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { + targetCanvas.width = pipelineState.imageData.width; + targetCanvas.height = pipelineState.imageData.height; + } + ctx.putImageData(pipelineState.imageData, 0, 0); + return pipelineState; + }, + + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/base_filter.class.js b/src/filters/base_filter.class.js index bb55d5d439a..247bfd3b0af 100644 --- a/src/filters/base_filter.class.js +++ b/src/filters/base_filter.class.js @@ -1,366 +1,368 @@ -/** - * @namespace fabric.Image.filters - * @memberOf fabric.Image - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters} - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - */ -fabric.Image = fabric.Image || { }; -fabric.Image.filters = fabric.Image.filters || { }; - -/** - * Root filter class from which all filter classes inherit from - * @class fabric.Image.filters.BaseFilter - * @memberOf fabric.Image.filters - */ -fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ { - +(function(global) { + var fabric = global.fabric; /** - * Filter type - * @param {String} type - * @default + * @namespace fabric.Image.filters + * @memberOf fabric.Image + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters} + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} */ - type: 'BaseFilter', + fabric.Image.filters = fabric.Image.filters || { }; /** - * Array of attributes to send with buffers. do not modify - * @private + * Root filter class from which all filter classes inherit from + * @class fabric.Image.filters.BaseFilter + * @memberOf fabric.Image.filters */ + fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ { - vertexSource: 'attribute vec2 aPosition;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vTexCoord = aPosition;\n' + - 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + - '}', + /** + * Filter type + * @param {String} type + * @default + */ + type: 'BaseFilter', - fragmentSource: 'precision highp float;\n' + - 'varying vec2 vTexCoord;\n' + - 'uniform sampler2D uTexture;\n' + - 'void main() {\n' + - 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + - '}', + /** + * Array of attributes to send with buffers. do not modify + * @private + */ - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - if (options) { - this.setOptions(options); - } - }, + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', - /** - * Sets filter's properties from options - * @param {Object} [options] Options object - */ - setOptions: function(options) { - for (var prop in options) { - this[prop] = options[prop]; - } - }, + fragmentSource: 'precision highp float;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform sampler2D uTexture;\n' + + 'void main() {\n' + + 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + + '}', - /** - * Compile this filter's shader program. - * - * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation. - * @param {String} fragmentSource fragmentShader source for compilation - * @param {String} vertexSource vertexShader source for compilation - */ - createProgram: function(gl, fragmentSource, vertexSource) { - fragmentSource = fragmentSource || this.fragmentSource; - vertexSource = vertexSource || this.vertexSource; - if (fabric.webGlPrecision !== 'highp'){ - fragmentSource = fragmentSource.replace( - /precision highp float/g, - 'precision ' + fabric.webGlPrecision + ' float' - ); - } - var vertexShader = gl.createShader(gl.VERTEX_SHADER); - gl.shaderSource(vertexShader, vertexSource); - gl.compileShader(vertexShader); - if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Vertex shader compile error for ' + this.type + ': ' + - gl.getShaderInfoLog(vertexShader) - ); - } + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, - var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(fragmentShader, fragmentSource); - gl.compileShader(fragmentShader); - if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Fragment shader compile error for ' + this.type + ': ' + - gl.getShaderInfoLog(fragmentShader) - ); - } + /** + * Sets filter's properties from options + * @param {Object} [options] Options object + */ + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, - var program = gl.createProgram(); - gl.attachShader(program, vertexShader); - gl.attachShader(program, fragmentShader); - gl.linkProgram(program); - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Shader link error for "${this.type}" ' + - gl.getProgramInfoLog(program) - ); - } + /** + * Compile this filter's shader program. + * + * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation. + * @param {String} fragmentSource fragmentShader source for compilation + * @param {String} vertexSource vertexShader source for compilation + */ + createProgram: function(gl, fragmentSource, vertexSource) { + fragmentSource = fragmentSource || this.fragmentSource; + vertexSource = vertexSource || this.vertexSource; + if (fabric.webGlPrecision !== 'highp'){ + fragmentSource = fragmentSource.replace( + /precision highp float/g, + 'precision ' + fabric.webGlPrecision + ' float' + ); + } + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader, vertexSource); + gl.compileShader(vertexShader); + if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Vertex shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(vertexShader) + ); + } - var attributeLocations = this.getAttributeLocations(gl, program); - var uniformLocations = this.getUniformLocations(gl, program) || { }; - uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW'); - uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH'); - return { - program: program, - attributeLocations: attributeLocations, - uniformLocations: uniformLocations - }; - }, + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Fragment shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(fragmentShader) + ); + } - /** - * Return a map of attribute names to WebGLAttributeLocation objects. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {WebGLShaderProgram} program The shader program from which to take attribute locations. - * @returns {Object} A map of attribute names to attribute locations. - */ - getAttributeLocations: function(gl, program) { - return { - aPosition: gl.getAttribLocation(program, 'aPosition'), - }; - }, + var program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Shader link error for "${this.type}" ' + + gl.getProgramInfoLog(program) + ); + } - /** - * Return a map of uniform names to WebGLUniformLocation objects. - * - * Intended to be overridden by subclasses. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {WebGLShaderProgram} program The shader program from which to take uniform locations. - * @returns {Object} A map of uniform names to uniform locations. - */ - getUniformLocations: function (/* gl, program */) { - // in case i do not need any special uniform i need to return an empty object - return { }; - }, + var attributeLocations = this.getAttributeLocations(gl, program); + var uniformLocations = this.getUniformLocations(gl, program) || { }; + uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW'); + uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH'); + return { + program: program, + attributeLocations: attributeLocations, + uniformLocations: uniformLocations + }; + }, - /** - * Send attribute data from this filter to its shader program on the GPU. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {Object} attributeLocations A map of shader attribute names to their locations. - */ - sendAttributeData: function(gl, attributeLocations, aPositionData) { - var attributeLocation = attributeLocations.aPosition; - var buffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, buffer); - gl.enableVertexAttribArray(attributeLocation); - gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); - gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW); - }, + /** + * Return a map of attribute names to WebGLAttributeLocation objects. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take attribute locations. + * @returns {Object} A map of attribute names to attribute locations. + */ + getAttributeLocations: function(gl, program) { + return { + aPosition: gl.getAttribLocation(program, 'aPosition'), + }; + }, + + /** + * Return a map of uniform names to WebGLUniformLocation objects. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take uniform locations. + * @returns {Object} A map of uniform names to uniform locations. + */ + getUniformLocations: function (/* gl, program */) { + // in case i do not need any special uniform i need to return an empty object + return { }; + }, - _setupFrameBuffer: function(options) { - var gl = options.context, width, height; - if (options.passes > 1) { - width = options.destinationWidth; - height = options.destinationHeight; - if (options.sourceWidth !== width || options.sourceHeight !== height) { - gl.deleteTexture(options.targetTexture); - options.targetTexture = options.filterBackend.createTexture(gl, width, height); + /** + * Send attribute data from this filter to its shader program on the GPU. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} attributeLocations A map of shader attribute names to their locations. + */ + sendAttributeData: function(gl, attributeLocations, aPositionData) { + var attributeLocation = attributeLocations.aPosition; + var buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.enableVertexAttribArray(attributeLocation); + gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); + gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW); + }, + + _setupFrameBuffer: function(options) { + var gl = options.context, width, height; + if (options.passes > 1) { + width = options.destinationWidth; + height = options.destinationHeight; + if (options.sourceWidth !== width || options.sourceHeight !== height) { + gl.deleteTexture(options.targetTexture); + options.targetTexture = options.filterBackend.createTexture(gl, width, height); + } + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, + options.targetTexture, 0); } - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, - options.targetTexture, 0); - } - else { - // draw last filter on canvas and not to framebuffer. - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.finish(); - } - }, + else { + // draw last filter on canvas and not to framebuffer. + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + gl.finish(); + } + }, - _swapTextures: function(options) { - options.passes--; - options.pass++; - var temp = options.targetTexture; - options.targetTexture = options.sourceTexture; - options.sourceTexture = temp; - }, + _swapTextures: function(options) { + options.passes--; + options.pass++; + var temp = options.targetTexture; + options.targetTexture = options.sourceTexture; + options.sourceTexture = temp; + }, - /** - * Generic isNeutral implementation for one parameter based filters. - * Used only in image applyFilters to discard filters that will not have an effect - * on the image - * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter ) - * @param {Object} options - **/ - isNeutralState: function(/* options */) { - var main = this.mainParameter, - _class = fabric.Image.filters[this.type].prototype; - if (main) { - if (Array.isArray(_class[main])) { - for (var i = _class[main].length; i--;) { - if (this[main][i] !== _class[main][i]) { - return false; + /** + * Generic isNeutral implementation for one parameter based filters. + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter ) + * @param {Object} options + **/ + isNeutralState: function(/* options */) { + var main = this.mainParameter, + _class = fabric.Image.filters[this.type].prototype; + if (main) { + if (Array.isArray(_class[main])) { + for (var i = _class[main].length; i--;) { + if (this[main][i] !== _class[main][i]) { + return false; + } } + return true; + } + else { + return _class[main] === this[main]; } - return true; } else { - return _class[main] === this[main]; + return false; } - } - else { - return false; - } - }, + }, - /** - * Apply this filter to the input image data provided. - * - * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyTo: function(options) { - if (options.webgl) { - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - } - else { - this.applyTo2d(options); - } - }, + /** + * Apply this filter to the input image data provided. + * + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + if (options.webgl) { + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - if (!options.programCache.hasOwnProperty(this.type)) { - options.programCache[this.type] = this.createProgram(options.context); - } - return options.programCache[this.type]; - }, + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + if (!options.programCache.hasOwnProperty(this.type)) { + options.programCache[this.type] = this.createProgram(options.context); + } + return options.programCache[this.type]; + }, - /** - * Apply this filter using webgl. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.originalTexture The texture of the original input image. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyToWebGL: function(options) { - var gl = options.context; - var shader = this.retrieveShader(options); - if (options.pass === 0 && options.originalTexture) { - gl.bindTexture(gl.TEXTURE_2D, options.originalTexture); - } - else { - gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture); - } - gl.useProgram(shader.program); - this.sendAttributeData(gl, shader.attributeLocations, options.aPosition); + /** + * Apply this filter using webgl. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.originalTexture The texture of the original input image. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyToWebGL: function(options) { + var gl = options.context; + var shader = this.retrieveShader(options); + if (options.pass === 0 && options.originalTexture) { + gl.bindTexture(gl.TEXTURE_2D, options.originalTexture); + } + else { + gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture); + } + gl.useProgram(shader.program); + this.sendAttributeData(gl, shader.attributeLocations, options.aPosition); - gl.uniform1f(shader.uniformLocations.uStepW, 1 / options.sourceWidth); - gl.uniform1f(shader.uniformLocations.uStepH, 1 / options.sourceHeight); + gl.uniform1f(shader.uniformLocations.uStepW, 1 / options.sourceWidth); + gl.uniform1f(shader.uniformLocations.uStepH, 1 / options.sourceHeight); - this.sendUniformData(gl, shader.uniformLocations); - gl.viewport(0, 0, options.destinationWidth, options.destinationHeight); - gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); - }, + this.sendUniformData(gl, shader.uniformLocations); + gl.viewport(0, 0, options.destinationWidth, options.destinationHeight); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); + }, - bindAdditionalTexture: function(gl, texture, textureUnit) { - gl.activeTexture(textureUnit); - gl.bindTexture(gl.TEXTURE_2D, texture); - // reset active texture to 0 as usual - gl.activeTexture(gl.TEXTURE0); - }, + bindAdditionalTexture: function(gl, texture, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, texture); + // reset active texture to 0 as usual + gl.activeTexture(gl.TEXTURE0); + }, - unbindAdditionalTexture: function(gl, textureUnit) { - gl.activeTexture(textureUnit); - gl.bindTexture(gl.TEXTURE_2D, null); - gl.activeTexture(gl.TEXTURE0); - }, + unbindAdditionalTexture: function(gl, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.activeTexture(gl.TEXTURE0); + }, - getMainParameter: function() { - return this[this.mainParameter]; - }, + getMainParameter: function() { + return this[this.mainParameter]; + }, - setMainParameter: function(value) { - this[this.mainParameter] = value; - }, + setMainParameter: function(value) { + this[this.mainParameter] = value; + }, - /** - * Send uniform data from this filter to its shader program on the GPU. - * - * Intended to be overridden by subclasses. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {Object} uniformLocations A map of shader uniform names to their locations. - */ - sendUniformData: function(/* gl, uniformLocations */) { - // Intentionally left blank. Override me in subclasses. - }, + /** + * Send uniform data from this filter to its shader program on the GPU. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} uniformLocations A map of shader uniform names to their locations. + */ + sendUniformData: function(/* gl, uniformLocations */) { + // Intentionally left blank. Override me in subclasses. + }, - /** - * If needed by a 2d filter, this functions can create an helper canvas to be used - * remember that options.targetCanvas is available for use till end of chain. - */ - createHelpLayer: function(options) { - if (!options.helpLayer) { - var helpLayer = document.createElement('canvas'); - helpLayer.width = options.sourceWidth; - helpLayer.height = options.sourceHeight; - options.helpLayer = helpLayer; - } - }, + /** + * If needed by a 2d filter, this functions can create an helper canvas to be used + * remember that options.targetCanvas is available for use till end of chain. + */ + createHelpLayer: function(options) { + if (!options.helpLayer) { + var helpLayer = document.createElement('canvas'); + helpLayer.width = options.sourceWidth; + helpLayer.height = options.sourceHeight; + options.helpLayer = helpLayer; + } + }, - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - var object = { type: this.type }, mainP = this.mainParameter; - if (mainP) { - object[mainP] = this[mainP]; + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + var object = { type: this.type }, mainP = this.mainParameter; + if (mainP) { + object[mainP] = this[mainP]; + } + return object; + }, + + /** + * Returns a JSON representation of an instance + * @return {Object} JSON + */ + toJSON: function() { + // delegate, not alias + return this.toObject(); } - return object; - }, + }); /** - * Returns a JSON representation of an instance - * @return {Object} JSON + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - toJSON: function() { - // delegate, not alias - return this.toObject(); - } -}); - -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.BaseFilter.fromObject = function(object) { - return Promise.resolve(new fabric.Image.filters[object.type](object)); -}; + fabric.Image.filters.BaseFilter.fromObject = function(object) { + return Promise.resolve(new fabric.Image.filters[object.type](object)); + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/blendcolor_filter.class.js b/src/filters/blendcolor_filter.class.js index df2fca45dd5..4452792ad14 100644 --- a/src/filters/blendcolor_filter.class.js +++ b/src/filters/blendcolor_filter.class.js @@ -1,245 +1,250 @@ -var fabric = exports.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - -/** - * Color Blend filter class - * @class fabric.Image.filter.BlendColor - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); - * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - -filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { - type: 'BlendColor', +(function(global) { + 'use strict'; - /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - * @type String - * @default - **/ - color: '#F95C63', - - /** - * Blend mode for the filter: one of multiply, add, diff, screen, subtract, - * darken, lighten, overlay, exclusion, tint. - * @type String - * @default - **/ - mode: 'multiply', + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * alpha value. represent the strength of the blend color operation. - * @type Number - * @default - **/ - alpha: 1, - - /** - * Fragment source for the Multiply program + * Color Blend filter class + * @class fabric.Image.filter.BlendColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ - fragmentSource: { - multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', - screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', - add: 'gl_FragColor.rgb += uColor.rgb;\n', - diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', - subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', - lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', - darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', - exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', - overlay: 'if (uColor.r < 0.5) {\n' + - 'gl_FragColor.r *= 2.0 * uColor.r;\n' + - '} else {\n' + - 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + - '}\n' + - 'if (uColor.g < 0.5) {\n' + - 'gl_FragColor.g *= 2.0 * uColor.g;\n' + - '} else {\n' + - 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + - '}\n' + - 'if (uColor.b < 0.5) {\n' + - 'gl_FragColor.b *= 2.0 * uColor.b;\n' + - '} else {\n' + - 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + - '}\n', - tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + - 'gl_FragColor.rgb += uColor.rgb;\n', - }, - /** - * build the fragment source for the filters, joining the common part with - * the specific one. - * @param {String} mode the mode of the filter, a key of this.fragmentSource - * @return {String} the source to be compiled - * @private - */ - buildSource: function(mode) { - return 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'gl_FragColor = color;\n' + - 'if (color.a > 0.0) {\n' + - this.fragmentSource[mode] + + filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { + type: 'BlendColor', + + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + * @type String + * @default + **/ + color: '#F95C63', + + /** + * Blend mode for the filter: one of multiply, add, diff, screen, subtract, + * darken, lighten, overlay, exclusion, tint. + * @type String + * @default + **/ + mode: 'multiply', + + /** + * alpha value. represent the strength of the blend color operation. + * @type Number + * @default + **/ + alpha: 1, + + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', + screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', + add: 'gl_FragColor.rgb += uColor.rgb;\n', + diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', + subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', + lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', + darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', + exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', + overlay: 'if (uColor.r < 0.5) {\n' + + 'gl_FragColor.r *= 2.0 * uColor.r;\n' + + '} else {\n' + + 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + '}\n' + - '}'; - }, - - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode, shaderSource; - if (!options.programCache.hasOwnProperty(cacheKey)) { - shaderSource = this.buildSource(this.mode); - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, - - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, iLen = data.length, - tr, tg, tb, - r, g, b, - source, alpha1 = 1 - this.alpha; - - source = new fabric.Color(this.color).getSource(); - tr = source[0] * this.alpha; - tg = source[1] * this.alpha; - tb = source[2] * this.alpha; - - for (var i = 0; i < iLen; i += 4) { - - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - break; - case 'screen': - data[i] = 255 - (255 - r) * (255 - tr) / 255; - data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; - data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; - break; - case 'add': - data[i] = r + tr; - data[i + 1] = g + tg; - data[i + 2] = b + tb; - break; - case 'diff': - case 'difference': - data[i] = Math.abs(r - tr); - data[i + 1] = Math.abs(g - tg); - data[i + 2] = Math.abs(b - tb); - break; - case 'subtract': - data[i] = r - tr; - data[i + 1] = g - tg; - data[i + 2] = b - tb; - break; - case 'darken': - data[i] = Math.min(r, tr); - data[i + 1] = Math.min(g, tg); - data[i + 2] = Math.min(b, tb); - break; - case 'lighten': - data[i] = Math.max(r, tr); - data[i + 1] = Math.max(g, tg); - data[i + 2] = Math.max(b, tb); - break; - case 'overlay': - data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); - data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); - data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); - break; - case 'exclusion': - data[i] = tr + r - ((2 * tr * r) / 255); - data[i + 1] = tg + g - ((2 * tg * g) / 255); - data[i + 2] = tb + b - ((2 * tb * b) / 255); - break; - case 'tint': - data[i] = tr + r * alpha1; - data[i + 1] = tg + g * alpha1; - data[i + 2] = tb + b * alpha1; + 'if (uColor.g < 0.5) {\n' + + 'gl_FragColor.g *= 2.0 * uColor.g;\n' + + '} else {\n' + + 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + + '}\n' + + 'if (uColor.b < 0.5) {\n' + + 'gl_FragColor.b *= 2.0 * uColor.b;\n' + + '} else {\n' + + 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + + '}\n', + tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + + 'gl_FragColor.rgb += uColor.rgb;\n', + }, + + /** + * build the fragment source for the filters, joining the common part with + * the specific one. + * @param {String} mode the mode of the filter, a key of this.fragmentSource + * @return {String} the source to be compiled + * @private + */ + buildSource: function(mode) { + return 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'gl_FragColor = color;\n' + + 'if (color.a > 0.0) {\n' + + this.fragmentSource[mode] + + '}\n' + + '}'; + }, + + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode, shaderSource; + if (!options.programCache.hasOwnProperty(cacheKey)) { + shaderSource = this.buildSource(this.mode); + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, + + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, iLen = data.length, + tr, tg, tb, + r, g, b, + source, alpha1 = 1 - this.alpha; + + source = new fabric.Color(this.color).getSource(); + tr = source[0] * this.alpha; + tg = source[1] * this.alpha; + tb = source[2] * this.alpha; + + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + break; + case 'screen': + data[i] = 255 - (255 - r) * (255 - tr) / 255; + data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; + data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; + break; + case 'add': + data[i] = r + tr; + data[i + 1] = g + tg; + data[i + 2] = b + tb; + break; + case 'diff': + case 'difference': + data[i] = Math.abs(r - tr); + data[i + 1] = Math.abs(g - tg); + data[i + 2] = Math.abs(b - tb); + break; + case 'subtract': + data[i] = r - tr; + data[i + 1] = g - tg; + data[i + 2] = b - tb; + break; + case 'darken': + data[i] = Math.min(r, tr); + data[i + 1] = Math.min(g, tg); + data[i + 2] = Math.min(b, tb); + break; + case 'lighten': + data[i] = Math.max(r, tr); + data[i + 1] = Math.max(g, tg); + data[i + 2] = Math.max(b, tb); + break; + case 'overlay': + data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); + data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); + data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); + break; + case 'exclusion': + data[i] = tr + r - ((2 * tr * r) / 255); + data[i + 1] = tg + g - ((2 * tg * g) / 255); + data[i + 2] = tb + b - ((2 * tb * b) / 255); + break; + case 'tint': + data[i] = tr + r * alpha1; + data[i + 1] = tg + g * alpha1; + data[i + 2] = tb + b * alpha1; + } } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColor: gl.getUniformLocation(program, 'uColor'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(); + source[0] = this.alpha * source[0] / 255; + source[1] = this.alpha * source[1] / 255; + source[2] = this.alpha * source[2] / 255; + source[3] = this.alpha; + gl.uniform4fv(uniformLocations.uColor, source); + }, + + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + color: this.color, + mode: this.mode, + alpha: this.alpha + }; } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uColor: gl.getUniformLocation(program, 'uColor'), - }; - }, + }); /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(); - source[0] = this.alpha * source[0] / 255; - source[1] = this.alpha * source[1] / 255; - source[2] = this.alpha * source[2] / 255; - source[3] = this.alpha; - gl.uniform4fv(uniformLocations.uColor, source); - }, + fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - color: this.color, - mode: this.mode, - alpha: this.alpha - }; - } -}); - -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/blendimage_filter.class.js b/src/filters/blendimage_filter.class.js index af2df137be4..db830b1dcff 100644 --- a/src/filters/blendimage_filter.class.js +++ b/src/filters/blendimage_filter.class.js @@ -1,239 +1,244 @@ -var fabric = exports.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - -/** - * Image Blend filter class - * @class fabric.Image.filter.BlendImage - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); - * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - -filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { - type: 'BlendImage', +(function(global) { + 'use strict'; - /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - **/ - image: null, - - /** - * Blend mode for the filter (one of "multiply", "mask") - * @type String - * @default - **/ - mode: 'multiply', - - /** - * alpha value. represent the strength of the blend image operation. - * not implemented. - **/ - alpha: 1, - - vertexSource: 'attribute vec2 aPosition;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'uniform mat3 uTransformMatrix;\n' + - 'void main() {\n' + - 'vTexCoord = aPosition;\n' + - 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + - 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + - '}', + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Fragment source for the Multiply program + * Image Blend filter class + * @class fabric.Image.filter.BlendImage + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ - fragmentSource: { - multiply: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.rgba *= color2.rgba;\n' + - 'gl_FragColor = color;\n' + - '}', - mask: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + + + filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { + type: 'BlendImage', + + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + **/ + image: null, + + /** + * Blend mode for the filter (one of "multiply", "mask") + * @type String + * @default + **/ + mode: 'multiply', + + /** + * alpha value. represent the strength of the blend image operation. + * not implemented. + **/ + alpha: 1, + + vertexSource: 'attribute vec2 aPosition;\n' + 'varying vec2 vTexCoord;\n' + 'varying vec2 vTexCoord2;\n' + + 'uniform mat3 uTransformMatrix;\n' + 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.a = color2.a;\n' + - 'gl_FragColor = color;\n' + + 'vTexCoord = aPosition;\n' + + 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + '}', - }, - - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - var shaderSource = this.fragmentSource[this.mode]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, - - applyToWebGL: function(options) { - // load texture to blend. - var gl = options.context, - texture = this.createTexture(options.filterBackend, this.image); - this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); - this.callSuper('applyToWebGL', options); - this.unbindAdditionalTexture(gl, gl.TEXTURE1); - }, - - createTexture: function(backend, image) { - return backend.getCachedTexture(image.cacheKey, image._element); - }, - /** - * Calculate a transformMatrix to adapt the image to blend over - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - calculateMatrix: function() { - var image = this.image, - width = image._element.width, - height = image._element.height; - return [ - 1 / image.scaleX, 0, 0, - 0, 1 / image.scaleY, 0, - -image.left / width, -image.top / height, 1 - ]; - }, - - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - resources = options.filterBackend.resources, - data = imageData.data, iLen = data.length, - width = imageData.width, - height = imageData.height, - tr, tg, tb, ta, - r, g, b, a, - canvas1, context, image = this.image, blendData; - - if (!resources.blendImage) { - resources.blendImage = fabric.util.createCanvasElement(); - } - canvas1 = resources.blendImage; - context = canvas1.getContext('2d'); - if (canvas1.width !== width || canvas1.height !== height) { - canvas1.width = width; - canvas1.height = height; - } - else { - context.clearRect(0, 0, width, height); - } - context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); - context.drawImage(image._element, 0, 0, width, height); - blendData = context.getImageData(0, 0, width, height).data; - for (var i = 0; i < iLen; i += 4) { - - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - a = data[i + 3]; - - tr = blendData[i]; - tg = blendData[i + 1]; - tb = blendData[i + 2]; - ta = blendData[i + 3]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - data[i + 3] = a * ta / 255; - break; - case 'mask': - data[i + 3] = ta; - break; + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.rgba *= color2.rgba;\n' + + 'gl_FragColor = color;\n' + + '}', + mask: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.a = color2.a;\n' + + 'gl_FragColor = color;\n' + + '}', + }, + + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + var shaderSource = this.fragmentSource[this.mode]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, + + applyToWebGL: function(options) { + // load texture to blend. + var gl = options.context, + texture = this.createTexture(options.filterBackend, this.image); + this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); + this.callSuper('applyToWebGL', options); + this.unbindAdditionalTexture(gl, gl.TEXTURE1); + }, + + createTexture: function(backend, image) { + return backend.getCachedTexture(image.cacheKey, image._element); + }, + + /** + * Calculate a transformMatrix to adapt the image to blend over + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + calculateMatrix: function() { + var image = this.image, + width = image._element.width, + height = image._element.height; + return [ + 1 / image.scaleX, 0, 0, + 0, 1 / image.scaleY, 0, + -image.left / width, -image.top / height, 1 + ]; + }, + + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + resources = options.filterBackend.resources, + data = imageData.data, iLen = data.length, + width = imageData.width, + height = imageData.height, + tr, tg, tb, ta, + r, g, b, a, + canvas1, context, image = this.image, blendData; + + if (!resources.blendImage) { + resources.blendImage = fabric.util.createCanvasElement(); + } + canvas1 = resources.blendImage; + context = canvas1.getContext('2d'); + if (canvas1.width !== width || canvas1.height !== height) { + canvas1.width = width; + canvas1.height = height; + } + else { + context.clearRect(0, 0, width, height); + } + context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); + context.drawImage(image._element, 0, 0, width, height); + blendData = context.getImageData(0, 0, width, height).data; + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + a = data[i + 3]; + + tr = blendData[i]; + tg = blendData[i + 1]; + tb = blendData[i + 2]; + ta = blendData[i + 3]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + data[i + 3] = a * ta / 255; + break; + case 'mask': + data[i + 3] = ta; + break; + } } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), + uImage: gl.getUniformLocation(program, 'uImage'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var matrix = this.calculateMatrix(); + gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. + gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); + }, + + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + image: this.image && this.image.toObject(), + mode: this.mode, + alpha: this.alpha + }; } - }, + }); /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - getUniformLocations: function(gl, program) { - return { - uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), - uImage: gl.getUniformLocation(program, 'uImage'), - }; - }, + fabric.Image.filters.BlendImage.fromObject = function(object) { + return fabric.Image.fromObject(object.image).then(function(image) { + return new fabric.Image.filters.BlendImage(Object.assign({}, object, { image: image })); + }); + }; - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var matrix = this.calculateMatrix(); - gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. - gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); - }, - - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - image: this.image && this.image.toObject(), - mode: this.mode, - alpha: this.alpha - }; - } -}); - -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.BlendImage.fromObject = function(object) { - return fabric.Image.fromObject(object.image).then(function(image) { - return new fabric.Image.filters.BlendImage(Object.assign({}, object, { image: image })); - }); -}; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/blur_filter.class.js b/src/filters/blur_filter.class.js index 593d489a016..41cdfc92556 100644 --- a/src/filters/blur_filter.class.js +++ b/src/filters/blur_filter.class.js @@ -1,27 +1,31 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - -/** - * Blur filter class - * @class fabric.Image.filters.Blur - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Blur({ - * blur: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ -filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { - - type: 'Blur', - - /* +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Blur filter class + * @class fabric.Image.filters.Blur + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Blur({ + * blur: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { + + type: 'Blur', + + /* 'gl_FragColor = vec4(0.0);', 'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;', 'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;', @@ -40,175 +44,177 @@ filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.B 'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;', */ - /* eslint-disable max-len */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec2 uDelta;\n' + - 'varying vec2 vTexCoord;\n' + - 'const float nSamples = 15.0;\n' + - 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + - 'float random(vec3 scale) {\n' + - /* use the fragment position for a different seed per-pixel */ - 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + - '}\n' + - 'void main() {\n' + - 'vec4 color = vec4(0.0);\n' + - 'float total = 0.0;\n' + - 'float offset = random(v3offset);\n' + - 'for (float t = -nSamples; t <= nSamples; t++) {\n' + - 'float percent = (t + offset - 0.5) / nSamples;\n' + - 'float weight = 1.0 - abs(percent);\n' + - 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + - 'total += weight;\n' + + /* eslint-disable max-len */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n' + + 'const float nSamples = 15.0;\n' + + 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + + 'float random(vec3 scale) {\n' + + /* use the fragment position for a different seed per-pixel */ + 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + '}\n' + - 'gl_FragColor = color / total;\n' + - '}', - /* eslint-enable max-len */ - - /** - * blur value, in percentage of image dimensions. - * specific to keep the image blur constant at different resolutions - * range between 0 and 1. - * @type Number - * @default - */ - blur: 0, - - mainParameter: 'blur', - - applyTo: function(options) { - if (options.webgl) { - // this aspectRatio is used to give the same blur to vertical and horizontal - this.aspectRatio = options.sourceWidth / options.sourceHeight; - options.passes++; - this._setupFrameBuffer(options); - this.horizontal = true; - this.applyToWebGL(options); - this._swapTextures(options); - this._setupFrameBuffer(options); - this.horizontal = false; - this.applyToWebGL(options); - this._swapTextures(options); - } - else { - this.applyTo2d(options); - } - }, - - applyTo2d: function(options) { - // paint canvasEl with current image data. - //options.ctx.putImageData(options.imageData, 0, 0); - options.imageData = this.simpleBlur(options); - }, - - simpleBlur: function(options) { - var resources = options.filterBackend.resources, canvas1, canvas2, - width = options.imageData.width, - height = options.imageData.height; - - if (!resources.blurLayer1) { - resources.blurLayer1 = fabric.util.createCanvasElement(); - resources.blurLayer2 = fabric.util.createCanvasElement(); - } - canvas1 = resources.blurLayer1; - canvas2 = resources.blurLayer2; - if (canvas1.width !== width || canvas1.height !== height) { - canvas2.width = canvas1.width = width; - canvas2.height = canvas1.height = height; - } - var ctx1 = canvas1.getContext('2d'), - ctx2 = canvas2.getContext('2d'), - nSamples = 15, - random, percent, j, i, - blur = this.blur * 0.06 * 0.5; - - // load first canvas - ctx1.putImageData(options.imageData, 0, 0); - ctx2.clearRect(0, 0, width, height); - - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * width + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, j, random); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * height + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, random, j); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - options.ctx.drawImage(canvas1, 0, 0); - var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); - ctx1.globalAlpha = 1; - ctx1.clearRect(0, 0, canvas1.width, canvas1.height); - return newImageData; - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - delta: gl.getUniformLocation(program, 'uDelta'), - }; - }, + 'void main() {\n' + + 'vec4 color = vec4(0.0);\n' + + 'float total = 0.0;\n' + + 'float offset = random(v3offset);\n' + + 'for (float t = -nSamples; t <= nSamples; t++) {\n' + + 'float percent = (t + offset - 0.5) / nSamples;\n' + + 'float weight = 1.0 - abs(percent);\n' + + 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + + 'total += weight;\n' + + '}\n' + + 'gl_FragColor = color / total;\n' + + '}', + /* eslint-enable max-len */ + + /** + * blur value, in percentage of image dimensions. + * specific to keep the image blur constant at different resolutions + * range between 0 and 1. + * @type Number + * @default + */ + blur: 0, + + mainParameter: 'blur', + + applyTo: function(options) { + if (options.webgl) { + // this aspectRatio is used to give the same blur to vertical and horizontal + this.aspectRatio = options.sourceWidth / options.sourceHeight; + options.passes++; + this._setupFrameBuffer(options); + this.horizontal = true; + this.applyToWebGL(options); + this._swapTextures(options); + this._setupFrameBuffer(options); + this.horizontal = false; + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, + + applyTo2d: function(options) { + // paint canvasEl with current image data. + //options.ctx.putImageData(options.imageData, 0, 0); + options.imageData = this.simpleBlur(options); + }, + + simpleBlur: function(options) { + var resources = options.filterBackend.resources, canvas1, canvas2, + width = options.imageData.width, + height = options.imageData.height; + + if (!resources.blurLayer1) { + resources.blurLayer1 = fabric.util.createCanvasElement(); + resources.blurLayer2 = fabric.util.createCanvasElement(); + } + canvas1 = resources.blurLayer1; + canvas2 = resources.blurLayer2; + if (canvas1.width !== width || canvas1.height !== height) { + canvas2.width = canvas1.width = width; + canvas2.height = canvas1.height = height; + } + var ctx1 = canvas1.getContext('2d'), + ctx2 = canvas2.getContext('2d'), + nSamples = 15, + random, percent, j, i, + blur = this.blur * 0.06 * 0.5; + + // load first canvas + ctx1.putImageData(options.imageData, 0, 0); + ctx2.clearRect(0, 0, width, height); + + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * width + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, j, random); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * height + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, random, j); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + options.ctx.drawImage(canvas1, 0, 0); + var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); + ctx1.globalAlpha = 1; + ctx1.clearRect(0, 0, canvas1.width, canvas1.height); + return newImageData; + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + delta: gl.getUniformLocation(program, 'uDelta'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var delta = this.chooseRightDelta(); + gl.uniform2fv(uniformLocations.delta, delta); + }, + + /** + * choose right value of image percentage to blur with + * @returns {Array} a numeric array with delta values + */ + chooseRightDelta: function() { + var blurScale = 1, delta = [0, 0], blur; + if (this.horizontal) { + if (this.aspectRatio > 1) { + // image is wide, i want to shrink radius horizontal + blurScale = 1 / this.aspectRatio; + } + } + else { + if (this.aspectRatio < 1) { + // image is tall, i want to shrink radius vertical + blurScale = this.aspectRatio; + } + } + blur = blurScale * this.blur * 0.12; + if (this.horizontal) { + delta[0] = blur; + } + else { + delta[1] = blur; + } + return delta; + }, + }); /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - sendUniformData: function(gl, uniformLocations) { - var delta = this.chooseRightDelta(); - gl.uniform2fv(uniformLocations.delta, delta); - }, + filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * choose right value of image percentage to blur with - * @returns {Array} a numeric array with delta values - */ - chooseRightDelta: function() { - var blurScale = 1, delta = [0, 0], blur; - if (this.horizontal) { - if (this.aspectRatio > 1) { - // image is wide, i want to shrink radius horizontal - blurScale = 1 / this.aspectRatio; - } - } - else { - if (this.aspectRatio < 1) { - // image is tall, i want to shrink radius vertical - blurScale = this.aspectRatio; - } - } - blur = blurScale * this.blur * 0.12; - if (this.horizontal) { - delta[0] = blur; - } - else { - delta[1] = blur; - } - return delta; - }, -}); - -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/brightness_filter.class.js b/src/filters/brightness_filter.class.js index 8a8931d1c2a..f35a22fe3ff 100644 --- a/src/filters/brightness_filter.class.js +++ b/src/filters/brightness_filter.class.js @@ -1,106 +1,112 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** - * Brightness filter class - * @class fabric.Image.filters.Brightness - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Brightness({ - * brightness: 0.05 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ -filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { + 'use strict'; - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Brightness', + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Fragment source for the brightness program + * Brightness filter class + * @class fabric.Image.filters.Brightness + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Brightness({ + * brightness: 0.05 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uBrightness;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color.rgb += uBrightness;\n' + - 'gl_FragColor = color;\n' + - '}', + filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { - /** - * Brightness value, from -1 to 1. - * translated to -255 to 255 for 2d - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Number} brightness - * @default - */ - brightness: 0, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Brightness', - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'brightness', + /** + * Fragment source for the brightness program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uBrightness;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color.rgb += uBrightness;\n' + + 'gl_FragColor = color;\n' + + '}', - /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.brightness === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - brightness = Math.round(this.brightness * 255); - for (i = 0; i < len; i += 4) { - data[i] = data[i] + brightness; - data[i + 1] = data[i + 1] + brightness; - data[i + 2] = data[i + 2] + brightness; - } - }, + /** + * Brightness value, from -1 to 1. + * translated to -255 to 255 for 2d + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Number} brightness + * @default + */ + brightness: 0, - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uBrightness: gl.getUniformLocation(program, 'uBrightness'), - }; - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'brightness', + + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.brightness === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + brightness = Math.round(this.brightness * 255); + for (i = 0; i < len; i += 4) { + data[i] = data[i] + brightness; + data[i + 1] = data[i + 1] + brightness; + data[i + 2] = data[i + 2] + brightness; + } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uBrightness: gl.getUniformLocation(program, 'uBrightness'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBrightness, this.brightness); + }, + }); /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBrightness, this.brightness); - }, -}); + fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/colormatrix_filter.class.js b/src/filters/colormatrix_filter.class.js index ee61200a126..43074b8e57e 100644 --- a/src/filters/colormatrix_filter.class.js +++ b/src/filters/colormatrix_filter.class.js @@ -1,153 +1,158 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** - * Color Matrix filter class - * @class fabric.Image.filters.ColorMatrix - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} - * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} - * @example Kodachrome filter - * var filter = new fabric.Image.filters.ColorMatrix({ - * matrix: [ - 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, - -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, - -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, - 0, 0, 0, 1, 0 - ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ -filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Filter type - * @param {String} type - * @default + * Color Matrix filter class + * @class fabric.Image.filters.ColorMatrix + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} + * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} + * @example Kodachrome filter + * var filter = new fabric.Image.filters.ColorMatrix({ + * matrix: [ + 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, + -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, + -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, + 0, 0, 0, 1, 0 + ] + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - type: 'ColorMatrix', + filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'varying vec2 vTexCoord;\n' + - 'uniform mat4 uColorMatrix;\n' + - 'uniform vec4 uConstants;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color *= uColorMatrix;\n' + - 'color += uConstants;\n' + - 'gl_FragColor = color;\n' + - '}', + /** + * Filter type + * @param {String} type + * @default + */ + type: 'ColorMatrix', - /** - * Colormatrix for pixels. - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Array} matrix array of 20 numbers. - * @default - */ - matrix: [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ], + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform mat4 uColorMatrix;\n' + + 'uniform vec4 uConstants;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color *= uColorMatrix;\n' + + 'color += uConstants;\n' + + 'gl_FragColor = color;\n' + + '}', - mainParameter: 'matrix', + /** + * Colormatrix for pixels. + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ], - /** - * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario - * to save some calculation - * @type Boolean - * @default true - */ - colorsOnly: true, + mainParameter: 'matrix', - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.matrix = this.matrix.slice(0); - }, + /** + * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario + * to save some calculation + * @type Boolean + * @default true + */ + colorsOnly: true, - /** - * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = data.length, - m = this.matrix, - r, g, b, a, i, colorsOnly = this.colorsOnly; + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.matrix = this.matrix.slice(0); + }, - for (i = 0; i < iLen; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - if (colorsOnly) { - data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; - } - else { - a = data[i + 3]; - data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; - data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; + /** + * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = data.length, + m = this.matrix, + r, g, b, a, i, colorsOnly = this.colorsOnly; + + for (i = 0; i < iLen; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + if (colorsOnly) { + data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; + } + else { + a = data[i + 3]; + data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; + data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; + } } - } - }, + }, - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), - uConstants: gl.getUniformLocation(program, 'uConstants'), - }; - }, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), + uConstants: gl.getUniformLocation(program, 'uConstants'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var m = this.matrix, + matrix = [ + m[0], m[1], m[2], m[3], + m[5], m[6], m[7], m[8], + m[10], m[11], m[12], m[13], + m[15], m[16], m[17], m[18] + ], + constants = [m[4], m[9], m[14], m[19]]; + gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); + gl.uniform4fv(uniformLocations.uConstants, constants); + }, + }); /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - sendUniformData: function(gl, uniformLocations) { - var m = this.matrix, - matrix = [ - m[0], m[1], m[2], m[3], - m[5], m[6], m[7], m[8], - m[10], m[11], m[12], m[13], - m[15], m[16], m[17], m[18] - ], - constants = [m[4], m[9], m[14], m[19]]; - gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); - gl.uniform4fv(uniformLocations.uConstants, constants); - }, -}); - -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/composed_filter.class.js b/src/filters/composed_filter.class.js index ac506260ea2..70e6e81f5a5 100644 --- a/src/filters/composed_filter.class.js +++ b/src/filters/composed_filter.class.js @@ -1,66 +1,71 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** - * A container class that knows how to apply a sequence of filters to an input image. - */ -filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { + 'use strict'; - type: 'Composed', + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * A non sparse array of filters to apply + * A container class that knows how to apply a sequence of filters to an input image. */ - subFilters: [], + filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.subFilters = this.subFilters.slice(0); - }, + type: 'Composed', - /** - * Apply this container's filters to the input image provided. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be applied. - */ - applyTo: function(options) { - options.passes += this.subFilters.length - 1; - this.subFilters.forEach(function(filter) { - filter.applyTo(options); - }); - }, + /** + * A non sparse array of filters to apply + */ + subFilters: [], - /** - * Serialize this filter into JSON. - * - * @returns {Object} A JSON representation of this filter. - */ - toObject: function() { - return fabric.util.object.extend(this.callSuper('toObject'), { - subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), - }); - }, + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.subFilters = this.subFilters.slice(0); + }, + + /** + * Apply this container's filters to the input image provided. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be applied. + */ + applyTo: function(options) { + options.passes += this.subFilters.length - 1; + this.subFilters.forEach(function(filter) { + filter.applyTo(options); + }); + }, - isNeutralState: function() { - return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); - } -}); + /** + * Serialize this filter into JSON. + * + * @returns {Object} A JSON representation of this filter. + */ + toObject: function() { + return fabric.util.object.extend(this.callSuper('toObject'), { + subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), + }); + }, -/** - * Deserialize a JSON definition of a ComposedFilter into a concrete instance. - */ -fabric.Image.filters.Composed.fromObject = function(object) { - var filters = object.subFilters || []; - return Promise.all(filters.map(function(filter) { - return fabric.Image.filters[filter.type].fromObject(filter); - })).then(function(enlivedFilters) { - return new fabric.Image.filters.Composed({ subFilters: enlivedFilters }); + isNeutralState: function() { + return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); + } }); -}; + + /** + * Deserialize a JSON definition of a ComposedFilter into a concrete instance. + */ + fabric.Image.filters.Composed.fromObject = function(object) { + var filters = object.subFilters || []; + return Promise.all(filters.map(function(filter) { + return fabric.Image.filters[filter.type].fromObject(filter); + })).then(function(enlivedFilters) { + return new fabric.Image.filters.Composed({ subFilters: enlivedFilters }); + }); + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/contrast_filter.class.js b/src/filters/contrast_filter.class.js index 72ea912d980..2fc8c1310dc 100644 --- a/src/filters/contrast_filter.class.js +++ b/src/filters/contrast_filter.class.js @@ -1,106 +1,112 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** - * Contrast filter class - * @class fabric.Image.filters.Contrast - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Contrast({ - * contrast: 0.25 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ -filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Filter type - * @param {String} type - * @default + * Contrast filter class + * @class fabric.Image.filters.Contrast + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Contrast({ + * contrast: 0.25 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - type: 'Contrast', + filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uContrast;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + - 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + - 'gl_FragColor = color;\n' + - '}', + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Contrast', - /** - * contrast value, range from -1 to 1. - * @param {Number} contrast - * @default 0 - */ - contrast: 0, + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uContrast;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + + 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + + 'gl_FragColor = color;\n' + + '}', - mainParameter: 'contrast', + /** + * contrast value, range from -1 to 1. + * @param {Number} contrast + * @default 0 + */ + contrast: 0, - /** - * Constructor - * @memberOf fabric.Image.filters.Contrast.prototype - * @param {Object} [options] Options object - * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) - */ + mainParameter: 'contrast', - /** - * Apply the Contrast operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - if (this.contrast === 0) { - return; - } - var imageData = options.imageData, i, len, - data = imageData.data, len = data.length, - contrast = Math.floor(this.contrast * 255), - contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); + /** + * Constructor + * @memberOf fabric.Image.filters.Contrast.prototype + * @param {Object} [options] Options object + * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) + */ - for (i = 0; i < len; i += 4) { - data[i] = contrastF * (data[i] - 128) + 128; - data[i + 1] = contrastF * (data[i + 1] - 128) + 128; - data[i + 2] = contrastF * (data[i + 2] - 128) + 128; - } - }, + /** + * Apply the Contrast operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + if (this.contrast === 0) { + return; + } + var imageData = options.imageData, i, len, + data = imageData.data, len = data.length, + contrast = Math.floor(this.contrast * 255), + contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uContrast: gl.getUniformLocation(program, 'uContrast'), - }; - }, + for (i = 0; i < len; i += 4) { + data[i] = contrastF * (data[i] - 128) + 128; + data[i + 1] = contrastF * (data[i + 1] - 128) + 128; + data[i + 2] = contrastF * (data[i + 2] - 128) + 128; + } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uContrast: gl.getUniformLocation(program, 'uContrast'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uContrast, this.contrast); + }, + }); /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uContrast, this.contrast); - }, -}); + fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/convolute_filter.class.js b/src/filters/convolute_filter.class.js index 16e5f142dbf..f65150c52e4 100644 --- a/src/filters/convolute_filter.class.js +++ b/src/filters/convolute_filter.class.js @@ -1,9 +1,13 @@ -var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Adapted from html5rocks article * @class fabric.Image.filters.Convolute * @memberOf fabric.Image.filters @@ -48,30 +52,30 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.applyFilters(); * canvas.renderAll(); */ -filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { + filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Convolute', + type: 'Convolute', - /* + /* * Opaque value (true/false) */ - opaque: false, + opaque: false, - /* + /* * matrix for the filter, max 9x9 */ - matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], + matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], - /** + /** * Fragment source for the brightness program */ - fragmentSource: { - Convolute_3_1: 'precision highp float;\n' + + fragmentSource: { + Convolute_3_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[9];\n' + 'uniform float uStepW;\n' + @@ -87,7 +91,7 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_3_0: 'precision highp float;\n' + + Convolute_3_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[9];\n' + 'uniform float uStepW;\n' + @@ -105,7 +109,7 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - Convolute_5_1: 'precision highp float;\n' + + Convolute_5_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[25];\n' + 'uniform float uStepW;\n' + @@ -121,7 +125,7 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_5_0: 'precision highp float;\n' + + Convolute_5_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[25];\n' + 'uniform float uStepW;\n' + @@ -139,7 +143,7 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - Convolute_7_1: 'precision highp float;\n' + + Convolute_7_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[49];\n' + 'uniform float uStepW;\n' + @@ -155,7 +159,7 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_7_0: 'precision highp float;\n' + + Convolute_7_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[49];\n' + 'uniform float uStepW;\n' + @@ -173,7 +177,7 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - Convolute_9_1: 'precision highp float;\n' + + Convolute_9_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[81];\n' + 'uniform float uStepW;\n' + @@ -189,7 +193,7 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt '}\n' + 'gl_FragColor = color;\n' + '}', - Convolute_9_0: 'precision highp float;\n' + + Convolute_9_0: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uMatrix[81];\n' + 'uniform float uStepW;\n' + @@ -207,9 +211,9 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt 'gl_FragColor = color;\n' + 'gl_FragColor.a = alpha;\n' + '}', - }, + }, - /** + /** * Constructor * @memberOf fabric.Image.filters.Convolute.prototype * @param {Object} [options] Options object @@ -218,128 +222,130 @@ filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filt */ - /** + /** * Retrieves the cached shader. * @param {Object} options * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - retrieveShader: function(options) { - var size = Math.sqrt(this.matrix.length); - var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); - var shaderSource = this.fragmentSource[cacheKey]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + retrieveShader: function(options) { + var size = Math.sqrt(this.matrix.length); + var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); + var shaderSource = this.fragmentSource[cacheKey]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - /** + /** * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - weights = this.matrix, - side = Math.round(Math.sqrt(weights.length)), - halfSide = Math.floor(side / 2), - sw = imageData.width, - sh = imageData.height, - output = options.ctx.createImageData(sw, sh), - dst = output.data, - // go through the destination image pixels - alphaFac = this.opaque ? 1 : 0, - r, g, b, a, dstOff, - scx, scy, srcOff, wt, - x, y, cx, cy; + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + weights = this.matrix, + side = Math.round(Math.sqrt(weights.length)), + halfSide = Math.floor(side / 2), + sw = imageData.width, + sh = imageData.height, + output = options.ctx.createImageData(sw, sh), + dst = output.data, + // go through the destination image pixels + alphaFac = this.opaque ? 1 : 0, + r, g, b, a, dstOff, + scx, scy, srcOff, wt, + x, y, cx, cy; - for (y = 0; y < sh; y++) { - for (x = 0; x < sw; x++) { - dstOff = (y * sw + x) * 4; - // calculate the weighed sum of the source image pixels that - // fall under the convolution matrix - r = 0; g = 0; b = 0; a = 0; + for (y = 0; y < sh; y++) { + for (x = 0; x < sw; x++) { + dstOff = (y * sw + x) * 4; + // calculate the weighed sum of the source image pixels that + // fall under the convolution matrix + r = 0; g = 0; b = 0; a = 0; - for (cy = 0; cy < side; cy++) { - for (cx = 0; cx < side; cx++) { - scy = y + cy - halfSide; - scx = x + cx - halfSide; + for (cy = 0; cy < side; cy++) { + for (cx = 0; cx < side; cx++) { + scy = y + cy - halfSide; + scx = x + cx - halfSide; - // eslint-disable-next-line max-depth - if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { - continue; - } + // eslint-disable-next-line max-depth + if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { + continue; + } - srcOff = (scy * sw + scx) * 4; - wt = weights[cy * side + cx]; + srcOff = (scy * sw + scx) * 4; + wt = weights[cy * side + cx]; - r += data[srcOff] * wt; - g += data[srcOff + 1] * wt; - b += data[srcOff + 2] * wt; - // eslint-disable-next-line max-depth - if (!alphaFac) { - a += data[srcOff + 3] * wt; + r += data[srcOff] * wt; + g += data[srcOff + 1] * wt; + b += data[srcOff + 2] * wt; + // eslint-disable-next-line max-depth + if (!alphaFac) { + a += data[srcOff + 3] * wt; + } } } - } - dst[dstOff] = r; - dst[dstOff + 1] = g; - dst[dstOff + 2] = b; - if (!alphaFac) { - dst[dstOff + 3] = a; - } - else { - dst[dstOff + 3] = data[dstOff + 3]; + dst[dstOff] = r; + dst[dstOff + 1] = g; + dst[dstOff + 2] = b; + if (!alphaFac) { + dst[dstOff + 3] = a; + } + else { + dst[dstOff + 3] = data[dstOff + 3]; + } } } - } - options.imageData = output; - }, + options.imageData = output; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uMatrix: gl.getUniformLocation(program, 'uMatrix'), - uOpaque: gl.getUniformLocation(program, 'uOpaque'), - uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), - uSize: gl.getUniformLocation(program, 'uSize'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uMatrix: gl.getUniformLocation(program, 'uMatrix'), + uOpaque: gl.getUniformLocation(program, 'uOpaque'), + uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), + uSize: gl.getUniformLocation(program, 'uSize'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1fv(uniformLocations.uMatrix, this.matrix); - }, + sendUniformData: function(gl, uniformLocations) { + gl.uniform1fv(uniformLocations.uMatrix, this.matrix); + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return extend(this.callSuper('toObject'), { - opaque: this.opaque, - matrix: this.matrix - }); - } -}); + toObject: function() { + return extend(this.callSuper('toObject'), { + opaque: this.opaque, + matrix: this.matrix + }); + } + }); -/** + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/filter_boilerplate.js b/src/filters/filter_boilerplate.js index 83874b72e56..e25a5a95686 100644 --- a/src/filters/filter_boilerplate.js +++ b/src/filters/filter_boilerplate.js @@ -1,104 +1,110 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** - * MyFilter filter class - * @class fabric.Image.filters.MyFilter - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.MyFilter#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.MyFilter({ - * add here an example of how to use your filter - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ -filters.MyFilter = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.MyFilter.prototype */ { + 'use strict'; - /** - * Filter type - * @param {String} type - * @default - */ - type: 'MyFilter', + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Fragment source for the myParameter program + * MyFilter filter class + * @class fabric.Image.filters.MyFilter + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.MyFilter#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.MyFilter({ + * add here an example of how to use your filter + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMyParameter;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - // add your gl code here - 'gl_FragColor = color;\n' + - '}', + filters.MyFilter = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.MyFilter.prototype */ { - /** - * MyFilter value, from -1 to 1. - * translated to -255 to 255 for 2d - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Number} myParameter - * @default - */ - myParameter: 0, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'MyFilter', - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'myParameter', + /** + * Fragment source for the myParameter program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMyParameter;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + // add your gl code here + 'gl_FragColor = color;\n' + + '}', - /** - * Apply the MyFilter operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.myParameter === 0) { - // early return if the parameter value has a neutral value - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length; - for (i = 0; i < len; i += 4) { - // insert here your code to modify data[i] - } - }, + /** + * MyFilter value, from -1 to 1. + * translated to -255 to 255 for 2d + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Number} myParameter + * @default + */ + myParameter: 0, - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uMyParameter: gl.getUniformLocation(program, 'uMyParameter'), - }; - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'myParameter', + + /** + * Apply the MyFilter operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.myParameter === 0) { + // early return if the parameter value has a neutral value + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length; + for (i = 0; i < len; i += 4) { + // insert here your code to modify data[i] + } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uMyParameter: gl.getUniformLocation(program, 'uMyParameter'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uMyParameter, this.myParameter); + }, + }); /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uMyParameter, this.myParameter); - }, -}); + fabric.Image.filters.MyFilter.fromObject = fabric.Image.filters.BaseFilter.fromObject; -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.MyFilter.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/filter_generator.js b/src/filters/filter_generator.js index 578a5e838ab..88a4b823fbd 100644 --- a/src/filters/filter_generator.js +++ b/src/filters/filter_generator.js @@ -1,80 +1,85 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -var matrices = { - Brownie: [ - 0.59970,0.34553,-0.27082,0,0.186, - -0.03770,0.86095,0.15059,0,-0.1449, - 0.24113,-0.07441,0.44972,0,-0.02965, - 0,0,0,1,0 - ], - Vintage: [ - 0.62793,0.32021,-0.03965,0,0.03784, - 0.02578,0.64411,0.03259,0,0.02926, - 0.04660,-0.08512,0.52416,0,0.02023, - 0,0,0,1,0 - ], - Kodachrome: [ - 1.12855,-0.39673,-0.03992,0,0.24991, - -0.16404,1.08352,-0.05498,0,0.09698, - -0.16786,-0.56034,1.60148,0,0.13972, - 0,0,0,1,0 - ], - Technicolor: [ - 1.91252,-0.85453,-0.09155,0,0.04624, - -0.30878,1.76589,-0.10601,0,-0.27589, - -0.23110,-0.75018,1.84759,0,0.12137, - 0,0,0,1,0 - ], - Polaroid: [ - 1.438,-0.062,-0.062,0,0, - -0.122,1.378,-0.122,0,0, - -0.016,-0.016,1.483,0,0, - 0,0,0,1,0 - ], - Sepia: [ - 0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0 - ], - BlackWhite: [ - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 0, 0, 0, 1, 0, - ] -}; + 'use strict'; -for (var key in matrices) { - filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Filter type - * @param {String} type - * @default - */ - type: key, + var matrices = { + Brownie: [ + 0.59970,0.34553,-0.27082,0,0.186, + -0.03770,0.86095,0.15059,0,-0.1449, + 0.24113,-0.07441,0.44972,0,-0.02965, + 0,0,0,1,0 + ], + Vintage: [ + 0.62793,0.32021,-0.03965,0,0.03784, + 0.02578,0.64411,0.03259,0,0.02926, + 0.04660,-0.08512,0.52416,0,0.02023, + 0,0,0,1,0 + ], + Kodachrome: [ + 1.12855,-0.39673,-0.03992,0,0.24991, + -0.16404,1.08352,-0.05498,0,0.09698, + -0.16786,-0.56034,1.60148,0,0.13972, + 0,0,0,1,0 + ], + Technicolor: [ + 1.91252,-0.85453,-0.09155,0,0.04624, + -0.30878,1.76589,-0.10601,0,-0.27589, + -0.23110,-0.75018,1.84759,0,0.12137, + 0,0,0,1,0 + ], + Polaroid: [ + 1.438,-0.062,-0.062,0,0, + -0.122,1.378,-0.122,0,0, + -0.016,-0.016,1.483,0,0, + 0,0,0,1,0 + ], + Sepia: [ + 0.393, 0.769, 0.189, 0, 0, + 0.349, 0.686, 0.168, 0, 0, + 0.272, 0.534, 0.131, 0, 0, + 0, 0, 0, 1, 0 + ], + BlackWhite: [ + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 0, 0, 0, 1, 0, + ] + }; - /** - * Colormatrix for the effect - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * @param {Array} matrix array of 20 numbers. - * @default - */ - matrix: matrices[key], + for (var key in matrices) { + filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { - /** - * Lock the matrix export for this kind of static, parameter less filters. - */ - mainParameter: false, - /** - * Lock the colormatrix on the color part, skipping alpha - */ - colorsOnly: true, + /** + * Filter type + * @param {String} type + * @default + */ + type: key, - }); - fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; -} + /** + * Colormatrix for the effect + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: matrices[key], + + /** + * Lock the matrix export for this kind of static, parameter less filters. + */ + mainParameter: false, + /** + * Lock the colormatrix on the color part, skipping alpha + */ + colorsOnly: true, + + }); + fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; + } +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/gamma_filter.class.js b/src/filters/gamma_filter.class.js index 3cc266111cb..e61dabf4f54 100644 --- a/src/filters/gamma_filter.class.js +++ b/src/filters/gamma_filter.class.js @@ -1,129 +1,135 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** - * Gamma filter class - * @class fabric.Image.filters.Gamma - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Gamma({ - * gamma: [1, 0.5, 2.1] - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ -filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * Filter type - * @param {String} type - * @default + * Gamma filter class + * @class fabric.Image.filters.Gamma + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Gamma({ + * gamma: [1, 0.5, 2.1] + * }); + * object.filters.push(filter); + * object.applyFilters(); */ - type: 'Gamma', + filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec3 uGamma;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec3 correction = (1.0 / uGamma);\n' + - 'color.r = pow(color.r, correction.r);\n' + - 'color.g = pow(color.g, correction.g);\n' + - 'color.b = pow(color.b, correction.b);\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.rgb *= color.a;\n' + - '}', + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Gamma', - /** - * Gamma array value, from 0.01 to 2.2. - * @param {Array} gamma - * @default - */ - gamma: [1, 1, 1], + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec3 uGamma;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec3 correction = (1.0 / uGamma);\n' + + 'color.r = pow(color.r, correction.r);\n' + + 'color.g = pow(color.g, correction.g);\n' + + 'color.b = pow(color.b, correction.b);\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.rgb *= color.a;\n' + + '}', - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'gamma', + /** + * Gamma array value, from 0.01 to 2.2. + * @param {Array} gamma + * @default + */ + gamma: [1, 1, 1], - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.gamma = [1, 1, 1]; - filters.BaseFilter.prototype.initialize.call(this, options); - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'gamma', - /** - * Apply the Gamma operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, data = imageData.data, - gamma = this.gamma, len = data.length, - rInv = 1 / gamma[0], gInv = 1 / gamma[1], - bInv = 1 / gamma[2], i; + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.gamma = [1, 1, 1]; + filters.BaseFilter.prototype.initialize.call(this, options); + }, - if (!this.rVals) { - // eslint-disable-next-line - this.rVals = new Uint8Array(256); - // eslint-disable-next-line - this.gVals = new Uint8Array(256); - // eslint-disable-next-line - this.bVals = new Uint8Array(256); - } + /** + * Apply the Gamma operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, data = imageData.data, + gamma = this.gamma, len = data.length, + rInv = 1 / gamma[0], gInv = 1 / gamma[1], + bInv = 1 / gamma[2], i; - // This is an optimization - pre-compute a look-up table for each color channel - // instead of performing these pow calls for each pixel in the image. - for (i = 0, len = 256; i < len; i++) { - this.rVals[i] = Math.pow(i / 255, rInv) * 255; - this.gVals[i] = Math.pow(i / 255, gInv) * 255; - this.bVals[i] = Math.pow(i / 255, bInv) * 255; - } - for (i = 0, len = data.length; i < len; i += 4) { - data[i] = this.rVals[data[i]]; - data[i + 1] = this.gVals[data[i + 1]]; - data[i + 2] = this.bVals[data[i + 2]]; - } - }, + if (!this.rVals) { + // eslint-disable-next-line + this.rVals = new Uint8Array(256); + // eslint-disable-next-line + this.gVals = new Uint8Array(256); + // eslint-disable-next-line + this.bVals = new Uint8Array(256); + } - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uGamma: gl.getUniformLocation(program, 'uGamma'), - }; - }, + // This is an optimization - pre-compute a look-up table for each color channel + // instead of performing these pow calls for each pixel in the image. + for (i = 0, len = 256; i < len; i++) { + this.rVals[i] = Math.pow(i / 255, rInv) * 255; + this.gVals[i] = Math.pow(i / 255, gInv) * 255; + this.bVals[i] = Math.pow(i / 255, bInv) * 255; + } + for (i = 0, len = data.length; i < len; i += 4) { + data[i] = this.rVals[data[i]]; + data[i + 1] = this.gVals[data[i + 1]]; + data[i + 2] = this.bVals[data[i + 2]]; + } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uGamma: gl.getUniformLocation(program, 'uGamma'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform3fv(uniformLocations.uGamma, this.gamma); + }, + }); /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + * Create filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @returns {Promise} */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform3fv(uniformLocations.uGamma, this.gamma); - }, -}); + fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; -/** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ -fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/grayscale_filter.class.js b/src/filters/grayscale_filter.class.js index bc501204170..81bbedca3ea 100644 --- a/src/filters/grayscale_filter.class.js +++ b/src/filters/grayscale_filter.class.js @@ -1,8 +1,12 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Grayscale image filter class * @class fabric.Image.filters.Grayscale * @memberOf fabric.Image.filters @@ -13,17 +17,17 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.filters.push(filter); * object.applyFilters(); */ -filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { + filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Grayscale', + type: 'Grayscale', - fragmentSource: { - average: 'precision highp float;\n' + + fragmentSource: { + average: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'varying vec2 vTexCoord;\n' + 'void main() {\n' + @@ -31,7 +35,7 @@ filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filt 'float average = (color.r + color.b + color.g) / 3.0;\n' + 'gl_FragColor = vec4(average, average, average, color.a);\n' + '}', - lightness: 'precision highp float;\n' + + lightness: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform int uMode;\n' + 'varying vec2 vTexCoord;\n' + @@ -40,7 +44,7 @@ filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filt 'float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\n' + 'gl_FragColor = vec4(average, average, average, col.a);\n' + '}', - luminosity: 'precision highp float;\n' + + luminosity: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform int uMode;\n' + 'varying vec2 vTexCoord;\n' + @@ -49,99 +53,101 @@ filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filt 'float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\n' + 'gl_FragColor = vec4(average, average, average, col.a);\n' + '}', - }, + }, - /** + /** * Grayscale mode, between 'average', 'lightness', 'luminosity' * @param {String} type * @default */ - mode: 'average', + mode: 'average', - mainParameter: 'mode', + mainParameter: 'mode', - /** + /** * Apply the Grayscale operation to a Uint8Array representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8Array to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length, value, - mode = this.mode; - for (i = 0; i < len; i += 4) { - if (mode === 'average') { - value = (data[i] + data[i + 1] + data[i + 2]) / 3; - } - else if (mode === 'lightness') { - value = (Math.min(data[i], data[i + 1], data[i + 2]) + + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length, value, + mode = this.mode; + for (i = 0; i < len; i += 4) { + if (mode === 'average') { + value = (data[i] + data[i + 1] + data[i + 2]) / 3; + } + else if (mode === 'lightness') { + value = (Math.min(data[i], data[i + 1], data[i + 2]) + Math.max(data[i], data[i + 1], data[i + 2])) / 2; + } + else if (mode === 'luminosity') { + value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; + } + data[i] = value; + data[i + 1] = value; + data[i + 2] = value; } - else if (mode === 'luminosity') { - value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; - } - data[i] = value; - data[i + 1] = value; - data[i + 2] = value; - } - }, + }, - /** + /** * Retrieves the cached shader. * @param {Object} options * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var shaderSource = this.fragmentSource[this.mode]; - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var shaderSource = this.fragmentSource[this.mode]; + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uMode: gl.getUniformLocation(program, 'uMode'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uMode: gl.getUniformLocation(program, 'uMode'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - // default average mode. - var mode = 1; - gl.uniform1i(uniformLocations.uMode, mode); - }, + sendUniformData: function(gl, uniformLocations) { + // default average mode. + var mode = 1; + gl.uniform1i(uniformLocations.uMode, mode); + }, - /** + /** * Grayscale filter isNeutralState implementation * The filter is never neutral * on the image **/ - isNeutralState: function() { - return false; - }, -}); + isNeutralState: function() { + return false; + }, + }); -/** + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/hue_rotation.class.js b/src/filters/hue_rotation.class.js index 142988bca57..06e9fdb502e 100644 --- a/src/filters/hue_rotation.class.js +++ b/src/filters/hue_rotation.class.js @@ -1,8 +1,12 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * HueRotation filter class * @class fabric.Image.filters.HueRotation * @memberOf fabric.Image.filters @@ -16,62 +20,62 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.filters.push(filter); * object.applyFilters(); */ -filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { + filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'HueRotation', + type: 'HueRotation', - /** + /** * HueRotation value, from -1 to 1. * the unit is radians * @param {Number} myParameter * @default */ - rotation: 0, + rotation: 0, - /** + /** * Describe the property that is the filter parameter * @param {String} m * @default */ - mainParameter: 'rotation', + mainParameter: 'rotation', - calculateMatrix: function() { - var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), - aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; - this.matrix = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ]; - this.matrix[0] = cos + OneMinusCos / 3; - this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[6] = cos + aThird * OneMinusCos; - this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[12] = cos + aThird * OneMinusCos; - }, + calculateMatrix: function() { + var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), + aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; + this.matrix = [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ]; + this.matrix[0] = cos + OneMinusCos / 3; + this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[6] = cos + aThird * OneMinusCos; + this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[12] = cos + aThird * OneMinusCos; + }, - /** + /** * HueRotation isNeutralState implementation * Used only in image applyFilters to discard filters that will not have an effect * on the image * @param {Object} options **/ - isNeutralState: function(options) { - this.calculateMatrix(); - return filters.BaseFilter.prototype.isNeutralState.call(this, options); - }, + isNeutralState: function(options) { + this.calculateMatrix(); + return filters.BaseFilter.prototype.isNeutralState.call(this, options); + }, - /** + /** * Apply this filter to the input image data provided. * * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. @@ -84,17 +88,19 @@ filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.f * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - applyTo: function(options) { - this.calculateMatrix(); - filters.BaseFilter.prototype.applyTo.call(this, options); - }, + applyTo: function(options) { + this.calculateMatrix(); + filters.BaseFilter.prototype.applyTo.call(this, options); + }, -}); + }); -/** + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/invert_filter.class.js b/src/filters/invert_filter.class.js index 0d47dfe45ee..eb77a09725b 100644 --- a/src/filters/invert_filter.class.js +++ b/src/filters/invert_filter.class.js @@ -1,8 +1,12 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Invert filter class * @class fabric.Image.filters.Invert * @memberOf fabric.Image.filters @@ -13,23 +17,23 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.filters.push(filter); * object.applyFilters(canvas.renderAll.bind(canvas)); */ -filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { + filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Invert', + type: 'Invert', - /** + /** * Invert also alpha. * @param {Boolean} alpha * @default **/ - alpha: false, + alpha: false, - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform int uInvert;\n' + 'uniform int uAlpha;\n' + @@ -47,75 +51,78 @@ filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters '}\n' + '}', - /** + /** * Filter invert. if false, does nothing * @param {Boolean} invert * @default */ - invert: true, + invert: true, - mainParameter: 'invert', + mainParameter: 'invert', - /** + /** * Apply the Invert operation to a Uint8Array representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8Array to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length; - for (i = 0; i < len; i += 4) { - data[i] = 255 - data[i]; - data[i + 1] = 255 - data[i + 1]; - data[i + 2] = 255 - data[i + 2]; - - if (this.alpha) { - data[i + 3] = 255 - data[i + 3]; + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length; + for (i = 0; i < len; i += 4) { + data[i] = 255 - data[i]; + data[i + 1] = 255 - data[i + 1]; + data[i + 2] = 255 - data[i + 2]; + + if (this.alpha) { + data[i + 3] = 255 - data[i + 3]; + } } - } - }, + }, - /** + /** * Invert filter isNeutralState implementation * Used only in image applyFilters to discard filters that will not have an effect * on the image * @param {Object} options **/ - isNeutralState: function() { - return !this.invert; - }, + isNeutralState: function() { + return !this.invert; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uInvert: gl.getUniformLocation(program, 'uInvert'), - uAlpha: gl.getUniformLocation(program, 'uAlpha'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uInvert: gl.getUniformLocation(program, 'uInvert'), + uAlpha: gl.getUniformLocation(program, 'uAlpha'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1i(uniformLocations.uInvert, this.invert); - gl.uniform1i(uniformLocations.uAlpha, this.alpha); - }, -}); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1i(uniformLocations.uInvert, this.invert); + gl.uniform1i(uniformLocations.uAlpha, this.alpha); + }, + }); -/** + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; + + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/noise_filter.class.js b/src/filters/noise_filter.class.js index 830035105e5..fc34d51a956 100644 --- a/src/filters/noise_filter.class.js +++ b/src/filters/noise_filter.class.js @@ -1,9 +1,13 @@ -var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Noise filter class * @class fabric.Image.filters.Noise * @memberOf fabric.Image.filters @@ -18,19 +22,19 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.applyFilters(); * canvas.renderAll(); */ -filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { + filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Noise', + type: 'Noise', - /** + /** * Fragment source for the noise program */ - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uStepH;\n' + 'uniform float uNoise;\n' + @@ -45,83 +49,85 @@ filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters. 'gl_FragColor = color;\n' + '}', - /** + /** * Describe the property that is the filter parameter * @param {String} m * @default */ - mainParameter: 'noise', + mainParameter: 'noise', - /** + /** * Noise value, from * @param {Number} noise * @default */ - noise: 0, + noise: 0, - /** + /** * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - if (this.noise === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - noise = this.noise, rand; + applyTo2d: function(options) { + if (this.noise === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + noise = this.noise, rand; - for (i = 0, len = data.length; i < len; i += 4) { + for (i = 0, len = data.length; i < len; i += 4) { - rand = (0.5 - Math.random()) * noise; + rand = (0.5 - Math.random()) * noise; - data[i] += rand; - data[i + 1] += rand; - data[i + 2] += rand; - } - }, + data[i] += rand; + data[i + 1] += rand; + data[i + 2] += rand; + } + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uNoise: gl.getUniformLocation(program, 'uNoise'), - uSeed: gl.getUniformLocation(program, 'uSeed'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uNoise: gl.getUniformLocation(program, 'uNoise'), + uSeed: gl.getUniformLocation(program, 'uSeed'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uNoise, this.noise / 255); - gl.uniform1f(uniformLocations.uSeed, Math.random()); - }, + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uNoise, this.noise / 255); + gl.uniform1f(uniformLocations.uSeed, Math.random()); + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return extend(this.callSuper('toObject'), { - noise: this.noise - }); - } -}); - -/** + toObject: function() { + return extend(this.callSuper('toObject'), { + noise: this.noise + }); + } + }); + + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/pixelate_filter.class.js b/src/filters/pixelate_filter.class.js index c957df64d63..6e67d8505ec 100644 --- a/src/filters/pixelate_filter.class.js +++ b/src/filters/pixelate_filter.class.js @@ -1,8 +1,12 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Pixelate filter class * @class fabric.Image.filters.Pixelate * @memberOf fabric.Image.filters @@ -16,23 +20,23 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.filters.push(filter); * object.applyFilters(); */ -filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { + filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Pixelate', + type: 'Pixelate', - blocksize: 4, + blocksize: 4, - mainParameter: 'blocksize', + mainParameter: 'blocksize', - /** + /** * Fragment source for the Pixelate program */ - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uBlocksize;\n' + 'uniform float uStepW;\n' + @@ -50,81 +54,83 @@ filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filte 'gl_FragColor = color;\n' + '}', - /** + /** * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = imageData.height, - jLen = imageData.width, - index, i, j, r, g, b, a, - _i, _j, _iLen, _jLen; - - for (i = 0; i < iLen; i += this.blocksize) { - for (j = 0; j < jLen; j += this.blocksize) { - - index = (i * 4) * jLen + (j * 4); - - r = data[index]; - g = data[index + 1]; - b = data[index + 2]; - a = data[index + 3]; - - _iLen = Math.min(i + this.blocksize, iLen); - _jLen = Math.min(j + this.blocksize, jLen); - for (_i = i; _i < _iLen; _i++) { - for (_j = j; _j < _jLen; _j++) { - index = (_i * 4) * jLen + (_j * 4); - data[index] = r; - data[index + 1] = g; - data[index + 2] = b; - data[index + 3] = a; + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = imageData.height, + jLen = imageData.width, + index, i, j, r, g, b, a, + _i, _j, _iLen, _jLen; + + for (i = 0; i < iLen; i += this.blocksize) { + for (j = 0; j < jLen; j += this.blocksize) { + + index = (i * 4) * jLen + (j * 4); + + r = data[index]; + g = data[index + 1]; + b = data[index + 2]; + a = data[index + 3]; + + _iLen = Math.min(i + this.blocksize, iLen); + _jLen = Math.min(j + this.blocksize, jLen); + for (_i = i; _i < _iLen; _i++) { + for (_j = j; _j < _jLen; _j++) { + index = (_i * 4) * jLen + (_j * 4); + data[index] = r; + data[index + 1] = g; + data[index + 2] = b; + data[index + 3] = a; + } } } } - } - }, + }, - /** + /** * Indicate when the filter is not gonna apply changes to the image **/ - isNeutralState: function() { - return this.blocksize === 1; - }, + isNeutralState: function() { + return this.blocksize === 1; + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), - uStepW: gl.getUniformLocation(program, 'uStepW'), - uStepH: gl.getUniformLocation(program, 'uStepH'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), + uStepW: gl.getUniformLocation(program, 'uStepW'), + uStepH: gl.getUniformLocation(program, 'uStepH'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); - }, -}); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); + }, + }); -/** + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/removecolor_filter.class.js b/src/filters/removecolor_filter.class.js index 4aa06fd9a79..2604483d2d7 100644 --- a/src/filters/removecolor_filter.class.js +++ b/src/filters/removecolor_filter.class.js @@ -1,9 +1,13 @@ -var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Remove white filter class * @class fabric.Image.filters.RemoveColor * @memberOf fabric.Image.filters @@ -18,26 +22,26 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.applyFilters(); * canvas.renderAll(); */ -filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { + filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'RemoveColor', + type: 'RemoveColor', - /** + /** * Color to remove, in any format understood by fabric.Color. * @param {String} type * @default */ - color: '#FFFFFF', + color: '#FFFFFF', - /** + /** * Fragment source for the brightness program */ - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform vec4 uLow;\n' + 'uniform vec4 uHigh;\n' + @@ -49,19 +53,19 @@ filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.fi '}\n' + '}', - /** + /** * distance to actual color, as value up or down from each r,g,b * between 0 and 1 **/ - distance: 0.02, + distance: 0.02, - /** + /** * For color to remove inside distance, use alpha channel for a smoother deletion * NOT IMPLEMENTED YET **/ - useAlpha: false, + useAlpha: false, - /** + /** * Constructor * @memberOf fabric.Image.filters.RemoveWhite.prototype * @param {Object} [options] Options object @@ -69,98 +73,100 @@ filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.fi * @param {Number} [options.distance=10] Distance value */ - /** + /** * Applies filter to canvas element * @param {Object} canvasEl Canvas element to apply filter to */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - distance = this.distance * 255, - r, g, b, - source = new fabric.Color(this.color).getSource(), - lowC = [ - source[0] - distance, - source[1] - distance, - source[2] - distance, - ], - highC = [ - source[0] + distance, - source[1] + distance, - source[2] + distance, - ]; - - - for (i = 0; i < data.length; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - - if (r > lowC[0] && + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + distance = this.distance * 255, + r, g, b, + source = new fabric.Color(this.color).getSource(), + lowC = [ + source[0] - distance, + source[1] - distance, + source[2] - distance, + ], + highC = [ + source[0] + distance, + source[1] + distance, + source[2] + distance, + ]; + + + for (i = 0; i < data.length; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + if (r > lowC[0] && g > lowC[1] && b > lowC[2] && r < highC[0] && g < highC[1] && b < highC[2]) { - data[i + 3] = 0; + data[i + 3] = 0; + } } - } - }, + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uLow: gl.getUniformLocation(program, 'uLow'), - uHigh: gl.getUniformLocation(program, 'uHigh'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uLow: gl.getUniformLocation(program, 'uLow'), + uHigh: gl.getUniformLocation(program, 'uHigh'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(), - distance = parseFloat(this.distance), - lowC = [ - 0 + source[0] / 255 - distance, - 0 + source[1] / 255 - distance, - 0 + source[2] / 255 - distance, - 1 - ], - highC = [ - source[0] / 255 + distance, - source[1] / 255 + distance, - source[2] / 255 + distance, - 1 - ]; - gl.uniform4fv(uniformLocations.uLow, lowC); - gl.uniform4fv(uniformLocations.uHigh, highC); - }, + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(), + distance = parseFloat(this.distance), + lowC = [ + 0 + source[0] / 255 - distance, + 0 + source[1] / 255 - distance, + 0 + source[2] / 255 - distance, + 1 + ], + highC = [ + source[0] / 255 + distance, + source[1] / 255 + distance, + source[2] / 255 + distance, + 1 + ]; + gl.uniform4fv(uniformLocations.uLow, lowC); + gl.uniform4fv(uniformLocations.uHigh, highC); + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return extend(this.callSuper('toObject'), { - color: this.color, - distance: this.distance - }); - } -}); - -/** + toObject: function() { + return extend(this.callSuper('toObject'), { + color: this.color, + distance: this.distance + }); + } + }); + + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/resize_filter.class.js b/src/filters/resize_filter.class.js index f9d6c1b5f53..f85e15df6fb 100644 --- a/src/filters/resize_filter.class.js +++ b/src/filters/resize_filter.class.js @@ -1,10 +1,14 @@ -var fabric = exports.fabric || (exports.fabric = { }), pow = Math.pow, floor = Math.floor, - sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, - ceil = Math.ceil, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor, + sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, + ceil = Math.ceil, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Resize image filter class * @class fabric.Image.filters.Resize * @memberOf fabric.Image.filters @@ -15,132 +19,132 @@ var fabric = exports.fabric || (exports.fabric = { }), pow = Math.pow, floor = * object.filters.push(filter); * object.applyFilters(canvas.renderAll.bind(canvas)); */ -filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { + filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Resize', + type: 'Resize', - /** + /** * Resize type * for webgl resizeType is just lanczos, for canvas2d can be: * bilinear, hermite, sliceHack, lanczos. * @param {String} resizeType * @default */ - resizeType: 'hermite', + resizeType: 'hermite', - /** + /** * Scale factor for resizing, x axis * @param {Number} scaleX * @default */ - scaleX: 1, + scaleX: 1, - /** + /** * Scale factor for resizing, y axis * @param {Number} scaleY * @default */ - scaleY: 1, + scaleY: 1, - /** + /** * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos * @param {Number} lanczosLobes * @default */ - lanczosLobes: 3, + lanczosLobes: 3, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uDelta: gl.getUniformLocation(program, 'uDelta'), - uTaps: gl.getUniformLocation(program, 'uTaps'), - }; - }, - - /** + getUniformLocations: function(gl, program) { + return { + uDelta: gl.getUniformLocation(program, 'uDelta'), + uTaps: gl.getUniformLocation(program, 'uTaps'), + }; + }, + + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); - gl.uniform1fv(uniformLocations.uTaps, this.taps); - }, + sendUniformData: function(gl, uniformLocations) { + gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); + gl.uniform1fv(uniformLocations.uTaps, this.taps); + }, - /** + /** * Retrieves the cached shader. * @param {Object} options * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - retrieveShader: function(options) { - var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var fragmentShader = this.generateShader(filterWindow); - options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); - } - return options.programCache[cacheKey]; - }, - - getFilterWindow: function() { - var scale = this.tempScale; - return Math.ceil(this.lanczosLobes / scale); - }, - - getTaps: function() { - var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, - filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); - for (var i = 1; i <= filterWindow; i++) { - taps[i - 1] = lobeFunction(i * scale); - } - return taps; - }, + retrieveShader: function(options) { + var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var fragmentShader = this.generateShader(filterWindow); + options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); + } + return options.programCache[cacheKey]; + }, + + getFilterWindow: function() { + var scale = this.tempScale; + return Math.ceil(this.lanczosLobes / scale); + }, + + getTaps: function() { + var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, + filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); + for (var i = 1; i <= filterWindow; i++) { + taps[i - 1] = lobeFunction(i * scale); + } + return taps; + }, - /** + /** * Generate vertex and shader sources from the necessary steps numbers * @param {Number} filterWindow */ - generateShader: function(filterWindow) { - var offsets = new Array(filterWindow), - fragmentShader = this.fragmentSourceTOP, filterWindow; + generateShader: function(filterWindow) { + var offsets = new Array(filterWindow), + fragmentShader = this.fragmentSourceTOP, filterWindow; - for (var i = 1; i <= filterWindow; i++) { - offsets[i - 1] = i + '.0 * uDelta'; - } + for (var i = 1; i <= filterWindow; i++) { + offsets[i - 1] = i + '.0 * uDelta'; + } - fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; - fragmentShader += 'void main() {\n'; - fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; - fragmentShader += ' float sum = 1.0;\n'; - - offsets.forEach(function(offset, i) { - fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; - }); - fragmentShader += ' gl_FragColor = color / sum;\n'; - fragmentShader += '}'; - return fragmentShader; - }, - - fragmentSourceTOP: 'precision highp float;\n' + + fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; + fragmentShader += 'void main() {\n'; + fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; + fragmentShader += ' float sum = 1.0;\n'; + + offsets.forEach(function(offset, i) { + fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; + }); + fragmentShader += ' gl_FragColor = color / sum;\n'; + fragmentShader += '}'; + return fragmentShader; + }, + + fragmentSourceTOP: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform vec2 uDelta;\n' + 'varying vec2 vTexCoord;\n', - /** + /** * Apply the resize filter to the image * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. * @@ -152,90 +156,90 @@ filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters * @param {WebGLRenderingContext} options.context The GL context used for rendering. * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ - applyTo: function(options) { - if (options.webgl) { - options.passes++; - this.width = options.sourceWidth; - this.horizontal = true; - this.dW = Math.round(this.width * this.scaleX); - this.dH = options.sourceHeight; - this.tempScale = this.dW / this.width; - this.taps = this.getTaps(); - options.destinationWidth = this.dW; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceWidth = options.destinationWidth; - - this.height = options.sourceHeight; - this.horizontal = false; - this.dH = Math.round(this.height * this.scaleY); - this.tempScale = this.dH / this.height; - this.taps = this.getTaps(); - options.destinationHeight = this.dH; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceHeight = options.destinationHeight; - } - else { - this.applyTo2d(options); - } - }, - - isNeutralState: function() { - return this.scaleX === 1 && this.scaleY === 1; - }, - - lanczosCreate: function(lobes) { - return function(x) { - if (x >= lobes || x <= -lobes) { - return 0.0; + applyTo: function(options) { + if (options.webgl) { + options.passes++; + this.width = options.sourceWidth; + this.horizontal = true; + this.dW = Math.round(this.width * this.scaleX); + this.dH = options.sourceHeight; + this.tempScale = this.dW / this.width; + this.taps = this.getTaps(); + options.destinationWidth = this.dW; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceWidth = options.destinationWidth; + + this.height = options.sourceHeight; + this.horizontal = false; + this.dH = Math.round(this.height * this.scaleY); + this.tempScale = this.dH / this.height; + this.taps = this.getTaps(); + options.destinationHeight = this.dH; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceHeight = options.destinationHeight; } - if (x < 1.19209290E-07 && x > -1.19209290E-07) { - return 1.0; + else { + this.applyTo2d(options); } - x *= Math.PI; - var xx = x / lobes; - return (sin(x) / x) * sin(xx) / xx; - }; - }, + }, - /** + isNeutralState: function() { + return this.scaleX === 1 && this.scaleY === 1; + }, + + lanczosCreate: function(lobes) { + return function(x) { + if (x >= lobes || x <= -lobes) { + return 0.0; + } + if (x < 1.19209290E-07 && x > -1.19209290E-07) { + return 1.0; + } + x *= Math.PI; + var xx = x / lobes; + return (sin(x) / x) * sin(xx) / xx; + }; + }, + + /** * Applies filter to canvas element * @memberOf fabric.Image.filters.Resize.prototype * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} scaleX * @param {Number} scaleY */ - applyTo2d: function(options) { - var imageData = options.imageData, - scaleX = this.scaleX, - scaleY = this.scaleY; + applyTo2d: function(options) { + var imageData = options.imageData, + scaleX = this.scaleX, + scaleY = this.scaleY; - this.rcpScaleX = 1 / scaleX; - this.rcpScaleY = 1 / scaleY; + this.rcpScaleX = 1 / scaleX; + this.rcpScaleY = 1 / scaleY; - var oW = imageData.width, oH = imageData.height, - dW = round(oW * scaleX), dH = round(oH * scaleY), - newData; + var oW = imageData.width, oH = imageData.height, + dW = round(oW * scaleX), dH = round(oH * scaleY), + newData; - if (this.resizeType === 'sliceHack') { - newData = this.sliceByTwo(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'hermite') { - newData = this.hermiteFastResize(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'bilinear') { - newData = this.bilinearFiltering(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'lanczos') { - newData = this.lanczosResize(options, oW, oH, dW, dH); - } - options.imageData = newData; - }, + if (this.resizeType === 'sliceHack') { + newData = this.sliceByTwo(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'hermite') { + newData = this.hermiteFastResize(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'bilinear') { + newData = this.bilinearFiltering(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'lanczos') { + newData = this.lanczosResize(options, oW, oH, dW, dH); + } + options.imageData = newData; + }, - /** + /** * Filter sliceByTwo * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -244,52 +248,52 @@ filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters * @param {Number} dH Destination Height * @returns {ImageData} */ - sliceByTwo: function(options, oW, oH, dW, dH) { - var imageData = options.imageData, - mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, - stepH = oH * mult, resources = fabric.filterBackend.resources, - tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; - if (!resources.sliceByTwo) { - resources.sliceByTwo = document.createElement('canvas'); - } - tmpCanvas = resources.sliceByTwo; - if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { - tmpCanvas.width = oW * 1.5; - tmpCanvas.height = oH; - } - ctx = tmpCanvas.getContext('2d'); - ctx.clearRect(0, 0, oW * 1.5, oH); - ctx.putImageData(imageData, 0, 0); - - dW = floor(dW); - dH = floor(dH); - - while (!doneW || !doneH) { - oW = stepW; - oH = stepH; - if (dW < floor(stepW * mult)) { - stepW = floor(stepW * mult); - } - else { - stepW = dW; - doneW = true; + sliceByTwo: function(options, oW, oH, dW, dH) { + var imageData = options.imageData, + mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, + stepH = oH * mult, resources = fabric.filterBackend.resources, + tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; + if (!resources.sliceByTwo) { + resources.sliceByTwo = document.createElement('canvas'); } - if (dH < floor(stepH * mult)) { - stepH = floor(stepH * mult); + tmpCanvas = resources.sliceByTwo; + if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { + tmpCanvas.width = oW * 1.5; + tmpCanvas.height = oH; } - else { - stepH = dH; - doneH = true; + ctx = tmpCanvas.getContext('2d'); + ctx.clearRect(0, 0, oW * 1.5, oH); + ctx.putImageData(imageData, 0, 0); + + dW = floor(dW); + dH = floor(dH); + + while (!doneW || !doneH) { + oW = stepW; + oH = stepH; + if (dW < floor(stepW * mult)) { + stepW = floor(stepW * mult); + } + else { + stepW = dW; + doneW = true; + } + if (dH < floor(stepH * mult)) { + stepH = floor(stepH * mult); + } + else { + stepH = dH; + doneH = true; + } + ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); + sX = dX; + sY = dY; + dY += stepH; } - ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); - sX = dX; - sY = dY; - dY += stepH; - } - return ctx.getImageData(sX, sY, dW, dH); - }, + return ctx.getImageData(sX, sY, dW, dH); + }, - /** + /** * Filter lanczosResize * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -298,73 +302,73 @@ filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters * @param {Number} dH Destination Height * @returns {ImageData} */ - lanczosResize: function(options, oW, oH, dW, dH) { - - function process(u) { - var v, i, weight, idx, a, red, green, - blue, alpha, fX, fY; - center.x = (u + 0.5) * ratioX; - icenter.x = floor(center.x); - for (v = 0; v < dH; v++) { - center.y = (v + 0.5) * ratioY; - icenter.y = floor(center.y); - a = 0; red = 0; green = 0; blue = 0; alpha = 0; - for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { - if (i < 0 || i >= oW) { - continue; - } - fX = floor(1000 * abs(i - center.x)); - if (!cacheLanc[fX]) { - cacheLanc[fX] = { }; - } - for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { - if (j < 0 || j >= oH) { + lanczosResize: function(options, oW, oH, dW, dH) { + + function process(u) { + var v, i, weight, idx, a, red, green, + blue, alpha, fX, fY; + center.x = (u + 0.5) * ratioX; + icenter.x = floor(center.x); + for (v = 0; v < dH; v++) { + center.y = (v + 0.5) * ratioY; + icenter.y = floor(center.y); + a = 0; red = 0; green = 0; blue = 0; alpha = 0; + for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { + if (i < 0 || i >= oW) { continue; } - fY = floor(1000 * abs(j - center.y)); - if (!cacheLanc[fX][fY]) { - cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); + fX = floor(1000 * abs(i - center.x)); + if (!cacheLanc[fX]) { + cacheLanc[fX] = { }; } - weight = cacheLanc[fX][fY]; - if (weight > 0) { - idx = (j * oW + i) * 4; - a += weight; - red += weight * srcData[idx]; - green += weight * srcData[idx + 1]; - blue += weight * srcData[idx + 2]; - alpha += weight * srcData[idx + 3]; + for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { + if (j < 0 || j >= oH) { + continue; + } + fY = floor(1000 * abs(j - center.y)); + if (!cacheLanc[fX][fY]) { + cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); + } + weight = cacheLanc[fX][fY]; + if (weight > 0) { + idx = (j * oW + i) * 4; + a += weight; + red += weight * srcData[idx]; + green += weight * srcData[idx + 1]; + blue += weight * srcData[idx + 2]; + alpha += weight * srcData[idx + 3]; + } } } + idx = (v * dW + u) * 4; + destData[idx] = red / a; + destData[idx + 1] = green / a; + destData[idx + 2] = blue / a; + destData[idx + 3] = alpha / a; } - idx = (v * dW + u) * 4; - destData[idx] = red / a; - destData[idx + 1] = green / a; - destData[idx + 2] = blue / a; - destData[idx + 3] = alpha / a; - } - if (++u < dW) { - return process(u); - } - else { - return destImg; + if (++u < dW) { + return process(u); + } + else { + return destImg; + } } - } - var srcData = options.imageData.data, - destImg = options.ctx.createImageData(dW, dH), - destData = destImg.data, - lanczos = this.lanczosCreate(this.lanczosLobes), - ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, - rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, - range2X = ceil(ratioX * this.lanczosLobes / 2), - range2Y = ceil(ratioY * this.lanczosLobes / 2), - cacheLanc = { }, center = { }, icenter = { }; + var srcData = options.imageData.data, + destImg = options.ctx.createImageData(dW, dH), + destData = destImg.data, + lanczos = this.lanczosCreate(this.lanczosLobes), + ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, + rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, + range2X = ceil(ratioX * this.lanczosLobes / 2), + range2Y = ceil(ratioY * this.lanczosLobes / 2), + cacheLanc = { }, center = { }, icenter = { }; - return process(0); - }, + return process(0); + }, - /** + /** * bilinearFiltering * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -373,36 +377,36 @@ filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters * @param {Number} dH Destination Height * @returns {ImageData} */ - bilinearFiltering: function(options, oW, oH, dW, dH) { - var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, - color, offset = 0, origPix, ratioX = this.rcpScaleX, - ratioY = this.rcpScaleY, - w4 = 4 * (oW - 1), img = options.imageData, - pixels = img.data, destImage = options.ctx.createImageData(dW, dH), - destPixels = destImage.data; - for (i = 0; i < dH; i++) { - for (j = 0; j < dW; j++) { - x = floor(ratioX * j); - y = floor(ratioY * i); - xDiff = ratioX * j - x; - yDiff = ratioY * i - y; - origPix = 4 * (y * oW + x); - - for (chnl = 0; chnl < 4; chnl++) { - a = pixels[origPix + chnl]; - b = pixels[origPix + 4 + chnl]; - c = pixels[origPix + w4 + chnl]; - d = pixels[origPix + w4 + 4 + chnl]; - color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + + bilinearFiltering: function(options, oW, oH, dW, dH) { + var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, + color, offset = 0, origPix, ratioX = this.rcpScaleX, + ratioY = this.rcpScaleY, + w4 = 4 * (oW - 1), img = options.imageData, + pixels = img.data, destImage = options.ctx.createImageData(dW, dH), + destPixels = destImage.data; + for (i = 0; i < dH; i++) { + for (j = 0; j < dW; j++) { + x = floor(ratioX * j); + y = floor(ratioY * i); + xDiff = ratioX * j - x; + yDiff = ratioY * i - y; + origPix = 4 * (y * oW + x); + + for (chnl = 0; chnl < 4; chnl++) { + a = pixels[origPix + chnl]; + b = pixels[origPix + 4 + chnl]; + c = pixels[origPix + w4 + chnl]; + d = pixels[origPix + w4 + 4 + chnl]; + color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + c * yDiff * (1 - xDiff) + d * xDiff * yDiff; - destPixels[offset++] = color; + destPixels[offset++] = color; + } } } - } - return destImage; - }, + return destImage; + }, - /** + /** * hermiteFastResize * @param {Object} canvasEl Canvas element to apply filter to * @param {Number} oW Original Width @@ -411,73 +415,75 @@ filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters * @param {Number} dH Destination Height * @returns {ImageData} */ - hermiteFastResize: function(options, oW, oH, dW, dH) { - var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, - ratioWHalf = ceil(ratioW / 2), - ratioHHalf = ceil(ratioH / 2), - img = options.imageData, data = img.data, - img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; - for (var j = 0; j < dH; j++) { - for (var i = 0; i < dW; i++) { - var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, - gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; - for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { - var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, - centerX = (i + 0.5) * ratioW, w0 = dy * dy; - for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { - var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, - w = sqrt(w0 + dx * dx); - /* eslint-disable max-depth */ - if (w > 1 && w < -1) { - continue; - } - //hermite filter - weight = 2 * w * w * w - 3 * w * w + 1; - if (weight > 0) { - dx = 4 * (xx + yy * oW); - //alpha - gxA += weight * data[dx + 3]; - weightsAlpha += weight; - //colors - if (data[dx + 3] < 255) { - weight = weight * data[dx + 3] / 250; + hermiteFastResize: function(options, oW, oH, dW, dH) { + var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, + ratioWHalf = ceil(ratioW / 2), + ratioHHalf = ceil(ratioH / 2), + img = options.imageData, data = img.data, + img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; + for (var j = 0; j < dH; j++) { + for (var i = 0; i < dW; i++) { + var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, + gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; + for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { + var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, + centerX = (i + 0.5) * ratioW, w0 = dy * dy; + for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { + var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, + w = sqrt(w0 + dx * dx); + /* eslint-disable max-depth */ + if (w > 1 && w < -1) { + continue; + } + //hermite filter + weight = 2 * w * w * w - 3 * w * w + 1; + if (weight > 0) { + dx = 4 * (xx + yy * oW); + //alpha + gxA += weight * data[dx + 3]; + weightsAlpha += weight; + //colors + if (data[dx + 3] < 255) { + weight = weight * data[dx + 3] / 250; + } + gxR += weight * data[dx]; + gxG += weight * data[dx + 1]; + gxB += weight * data[dx + 2]; + weights += weight; } - gxR += weight * data[dx]; - gxG += weight * data[dx + 1]; - gxB += weight * data[dx + 2]; - weights += weight; + /* eslint-enable max-depth */ } - /* eslint-enable max-depth */ } + data2[x2] = gxR / weights; + data2[x2 + 1] = gxG / weights; + data2[x2 + 2] = gxB / weights; + data2[x2 + 3] = gxA / weightsAlpha; } - data2[x2] = gxR / weights; - data2[x2 + 1] = gxG / weights; - data2[x2 + 2] = gxB / weights; - data2[x2 + 3] = gxA / weightsAlpha; } - } - return img2; - }, + return img2; + }, - /** + /** * Returns object representation of an instance * @return {Object} Object representation of an instance */ - toObject: function() { - return { - type: this.type, - scaleX: this.scaleX, - scaleY: this.scaleY, - resizeType: this.resizeType, - lanczosLobes: this.lanczosLobes - }; - } -}); - -/** + toObject: function() { + return { + type: this.type, + scaleX: this.scaleX, + scaleY: this.scaleY, + resizeType: this.resizeType, + lanczosLobes: this.lanczosLobes + }; + } + }); + + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/saturate_filter.class.js b/src/filters/saturate_filter.class.js index 3cae389c285..e0b3a10a11d 100644 --- a/src/filters/saturate_filter.class.js +++ b/src/filters/saturate_filter.class.js @@ -1,8 +1,12 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Saturate filter class * @class fabric.Image.filters.Saturation * @memberOf fabric.Image.filters @@ -16,16 +20,16 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.filters.push(filter); * object.applyFilters(); */ -filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { + filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Saturation', + type: 'Saturation', - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uSaturation;\n' + 'varying vec2 vTexCoord;\n' + @@ -39,7 +43,7 @@ filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.fil 'gl_FragColor = color;\n' + '}', - /** + /** * Saturation value, from -1 to 1. * Increases/decreases the color saturation. * A value of 0 has no effect. @@ -47,66 +51,68 @@ filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.fil * @param {Number} saturation * @default */ - saturation: 0, + saturation: 0, - mainParameter: 'saturation', + mainParameter: 'saturation', - /** + /** * Constructor * @memberOf fabric.Image.filters.Saturate.prototype * @param {Object} [options] Options object * @param {Number} [options.saturate=0] Value to saturate the image (-1...1) */ - /** + /** * Apply the Saturation operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - if (this.saturation === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.saturation, i, max; + applyTo2d: function(options) { + if (this.saturation === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.saturation, i, max; - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; - } - }, + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; + } + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uSaturation: gl.getUniformLocation(program, 'uSaturation'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uSaturation: gl.getUniformLocation(program, 'uSaturation'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uSaturation, -this.saturation); - }, -}); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uSaturation, -this.saturation); + }, + }); -/** + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/vibrance_filter.class.js b/src/filters/vibrance_filter.class.js index e3f9dd2b8ed..ec23e362621 100644 --- a/src/filters/vibrance_filter.class.js +++ b/src/filters/vibrance_filter.class.js @@ -1,8 +1,12 @@ -var fabric = exports.fabric || (exports.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +(function(global) { -/** + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** * Vibrance filter class * @class fabric.Image.filters.Vibrance * @memberOf fabric.Image.filters @@ -16,16 +20,16 @@ var fabric = exports.fabric || (exports.fabric = { }), * object.filters.push(filter); * object.applyFilters(); */ -filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { + filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { - /** + /** * Filter type * @param {String} type * @default */ - type: 'Vibrance', + type: 'Vibrance', - fragmentSource: 'precision highp float;\n' + + fragmentSource: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + 'uniform float uVibrance;\n' + 'varying vec2 vTexCoord;\n' + @@ -40,7 +44,7 @@ filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filte 'gl_FragColor = color;\n' + '}', - /** + /** * Vibrance value, from -1 to 1. * Increases/decreases the saturation of more muted colors with less effect on saturated colors. * A value of 0 has no effect. @@ -48,68 +52,70 @@ filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filte * @param {Number} vibrance * @default */ - vibrance: 0, + vibrance: 0, - mainParameter: 'vibrance', + mainParameter: 'vibrance', - /** + /** * Constructor * @memberOf fabric.Image.filters.Vibrance.prototype * @param {Object} [options] Options object * @param {Number} [options.vibrance=0] Vibrance value for the image (between -1 and 1) */ - /** + /** * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image. * * @param {Object} options * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - applyTo2d: function(options) { - if (this.vibrance === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.vibrance, i, max, avg, amt; + applyTo2d: function(options) { + if (this.vibrance === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.vibrance, i, max, avg, amt; - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - avg = (data[i] + data[i + 1] + data[i + 2]) / 3; - amt = ((Math.abs(max - avg) * 2 / 255) * adjust); - data[i] += max !== data[i] ? (max - data[i]) * amt : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; - } - }, + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + amt = ((Math.abs(max - avg) * 2 / 255) * adjust); + data[i] += max !== data[i] ? (max - data[i]) * amt : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; + } + }, - /** + /** * Return WebGL uniform locations for this filter's shader. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - getUniformLocations: function(gl, program) { - return { - uVibrance: gl.getUniformLocation(program, 'uVibrance'), - }; - }, + getUniformLocations: function(gl, program) { + return { + uVibrance: gl.getUniformLocation(program, 'uVibrance'), + }; + }, - /** + /** * Send data from this filter to its shader program's uniforms. * * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); - }, -}); + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); + }, + }); -/** + /** * Create filter instance from an object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/filters/webgl_backend.class.js b/src/filters/webgl_backend.class.js index 655644cc132..da3807c2697 100644 --- a/src/filters/webgl_backend.class.js +++ b/src/filters/webgl_backend.class.js @@ -1,174 +1,176 @@ -/** +(function(global) { + var fabric = global.fabric; + /** * Tests if webgl supports certain precision * @param {WebGL} Canvas WebGL context to test on * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp' * @returns {Boolean} Whether the user's browser WebGL supports given precision. */ -function testPrecision(gl, precision){ - var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; - var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(fragmentShader, fragmentSource); - gl.compileShader(fragmentShader); - if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { - return false; + function testPrecision(gl, precision){ + var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + return false; + } + return true; } - return true; -} -/** + /** * Indicate whether this filtering backend is supported by the user's browser. * @param {Number} tileSize check if the tileSize is supported * @returns {Boolean} Whether the user's browser supports WebGL. */ -fabric.isWebglSupported = function(tileSize) { - if (fabric.isLikelyNode) { - return false; - } - tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; - var canvas = document.createElement('canvas'); - var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); - var isSupported = false; - // eslint-disable-next-line + fabric.isWebglSupported = function(tileSize) { + if (fabric.isLikelyNode) { + return false; + } + tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; + var canvas = document.createElement('canvas'); + var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); + var isSupported = false; + // eslint-disable-next-line if (gl) { - fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); - isSupported = fabric.maxTextureSize >= tileSize; - var precisions = ['highp', 'mediump', 'lowp']; - for (var i = 0; i < 3; i++){ - if (testPrecision(gl, precisions[i])){ - fabric.webGlPrecision = precisions[i]; - break; - }; + fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); + isSupported = fabric.maxTextureSize >= tileSize; + var precisions = ['highp', 'mediump', 'lowp']; + for (var i = 0; i < 3; i++){ + if (testPrecision(gl, precisions[i])){ + fabric.webGlPrecision = precisions[i]; + break; + }; + } } - } - this.isSupported = isSupported; - return isSupported; -}; + this.isSupported = isSupported; + return isSupported; + }; -fabric.WebglFilterBackend = WebglFilterBackend; + fabric.WebglFilterBackend = WebglFilterBackend; -/** + /** * WebGL filter backend. */ -function WebglFilterBackend(options) { - if (options && options.tileSize) { - this.tileSize = options.tileSize; - } - this.setupGLContext(this.tileSize, this.tileSize); - this.captureGPUInfo(); -}; + function WebglFilterBackend(options) { + if (options && options.tileSize) { + this.tileSize = options.tileSize; + } + this.setupGLContext(this.tileSize, this.tileSize); + this.captureGPUInfo(); + }; -WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { + WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { - tileSize: 2048, + tileSize: 2048, - /** + /** * Experimental. This object is a sort of repository of help layers used to avoid * of recreating them during frequent filtering. If you are previewing a filter with * a slider you probably do not want to create help layers every filter step. * in this object there will be appended some canvases, created once, resized sometimes * cleared never. Clearing is left to the developer. **/ - resources: { + resources: { - }, + }, - /** + /** * Setup a WebGL context suitable for filtering, and bind any needed event handlers. */ - setupGLContext: function(width, height) { - this.dispose(); - this.createWebGLCanvas(width, height); - // eslint-disable-next-line + setupGLContext: function(width, height) { + this.dispose(); + this.createWebGLCanvas(width, height); + // eslint-disable-next-line this.aPosition = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]); - this.chooseFastestCopyGLTo2DMethod(width, height); - }, + this.chooseFastestCopyGLTo2DMethod(width, height); + }, - /** + /** * Pick a method to copy data from GL context to 2d canvas. In some browsers using * putImageData is faster than drawImage for that specific operation. */ - chooseFastestCopyGLTo2DMethod: function(width, height) { - var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; - try { - new ImageData(1, 1); - canUseImageData = true; - } - catch (e) { - canUseImageData = false; - } - // eslint-disable-next-line no-undef - var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; - // eslint-disable-next-line no-undef - var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; + chooseFastestCopyGLTo2DMethod: function(width, height) { + var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; + try { + new ImageData(1, 1); + canUseImageData = true; + } + catch (e) { + canUseImageData = false; + } + // eslint-disable-next-line no-undef + var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; + // eslint-disable-next-line no-undef + var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; - if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { - return; - } + if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { + return; + } - var targetCanvas = fabric.util.createCanvasElement(); - // eslint-disable-next-line no-undef - var imageBuffer = new ArrayBuffer(width * height * 4); - if (fabric.forceGLPutImageData) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - return; - } - var testContext = { - imageBuffer: imageBuffer, - destinationWidth: width, - destinationHeight: height, - targetCanvas: targetCanvas - }; - var startTime, drawImageTime, putImageDataTime; - targetCanvas.width = width; - targetCanvas.height = height; + var targetCanvas = fabric.util.createCanvasElement(); + // eslint-disable-next-line no-undef + var imageBuffer = new ArrayBuffer(width * height * 4); + if (fabric.forceGLPutImageData) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + return; + } + var testContext = { + imageBuffer: imageBuffer, + destinationWidth: width, + destinationHeight: height, + targetCanvas: targetCanvas + }; + var startTime, drawImageTime, putImageDataTime; + targetCanvas.width = width; + targetCanvas.height = height; - startTime = window.performance.now(); - copyGLTo2DDrawImage.call(testContext, this.gl, testContext); - drawImageTime = window.performance.now() - startTime; + startTime = window.performance.now(); + copyGLTo2DDrawImage.call(testContext, this.gl, testContext); + drawImageTime = window.performance.now() - startTime; - startTime = window.performance.now(); - copyGLTo2DPutImageData.call(testContext, this.gl, testContext); - putImageDataTime = window.performance.now() - startTime; + startTime = window.performance.now(); + copyGLTo2DPutImageData.call(testContext, this.gl, testContext); + putImageDataTime = window.performance.now() - startTime; - if (drawImageTime > putImageDataTime) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - } - else { - this.copyGLTo2D = copyGLTo2DDrawImage; - } - }, + if (drawImageTime > putImageDataTime) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + } + else { + this.copyGLTo2D = copyGLTo2DDrawImage; + } + }, - /** + /** * Create a canvas element and associated WebGL context and attaches them as * class properties to the GLFilterBackend class. */ - createWebGLCanvas: function(width, height) { - var canvas = fabric.util.createCanvasElement(); - canvas.width = width; - canvas.height = height; - var glOptions = { - alpha: true, - premultipliedAlpha: false, - depth: false, - stencil: false, - antialias: false - }, - gl = canvas.getContext('webgl', glOptions); - if (!gl) { - gl = canvas.getContext('experimental-webgl', glOptions); - } - if (!gl) { - return; - } - gl.clearColor(0, 0, 0, 0); - // this canvas can fire webglcontextlost and webglcontextrestored - this.canvas = canvas; - this.gl = gl; - }, + createWebGLCanvas: function(width, height) { + var canvas = fabric.util.createCanvasElement(); + canvas.width = width; + canvas.height = height; + var glOptions = { + alpha: true, + premultipliedAlpha: false, + depth: false, + stencil: false, + antialias: false + }, + gl = canvas.getContext('webgl', glOptions); + if (!gl) { + gl = canvas.getContext('experimental-webgl', glOptions); + } + if (!gl) { + return; + } + gl.clearColor(0, 0, 0, 0); + // this canvas can fire webglcontextlost and webglcontextrestored + this.canvas = canvas; + this.gl = gl; + }, - /** + /** * Attempts to apply the requested filters to the source provided, drawing the filtered output * to the provided target canvas. * @@ -180,65 +182,65 @@ WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ * @param {String|undefined} cacheKey A key used to cache resources related to the source. If * omitted, caching will be skipped. */ - applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { - var gl = this.gl; - var cachedTexture; - if (cacheKey) { - cachedTexture = this.getCachedTexture(cacheKey, source); - } - var pipelineState = { - originalWidth: source.width || source.originalWidth, - originalHeight: source.height || source.originalHeight, - sourceWidth: width, - sourceHeight: height, - destinationWidth: width, - destinationHeight: height, - context: gl, - sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), - targetTexture: this.createTexture(gl, width, height), - originalTexture: cachedTexture || + applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { + var gl = this.gl; + var cachedTexture; + if (cacheKey) { + cachedTexture = this.getCachedTexture(cacheKey, source); + } + var pipelineState = { + originalWidth: source.width || source.originalWidth, + originalHeight: source.height || source.originalHeight, + sourceWidth: width, + sourceHeight: height, + destinationWidth: width, + destinationHeight: height, + context: gl, + sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), + targetTexture: this.createTexture(gl, width, height), + originalTexture: cachedTexture || this.createTexture(gl, width, height, !cachedTexture && source), - passes: filters.length, - webgl: true, - aPosition: this.aPosition, - programCache: this.programCache, - pass: 0, - filterBackend: this, - targetCanvas: targetCanvas - }; - var tempFbo = gl.createFramebuffer(); - gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); - filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); - resizeCanvasIfNeeded(pipelineState); - this.copyGLTo2D(gl, pipelineState); - gl.bindTexture(gl.TEXTURE_2D, null); - gl.deleteTexture(pipelineState.sourceTexture); - gl.deleteTexture(pipelineState.targetTexture); - gl.deleteFramebuffer(tempFbo); - targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); - return pipelineState; - }, + passes: filters.length, + webgl: true, + aPosition: this.aPosition, + programCache: this.programCache, + pass: 0, + filterBackend: this, + targetCanvas: targetCanvas + }; + var tempFbo = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); + filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); + resizeCanvasIfNeeded(pipelineState); + this.copyGLTo2D(gl, pipelineState); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.deleteTexture(pipelineState.sourceTexture); + gl.deleteTexture(pipelineState.targetTexture); + gl.deleteFramebuffer(tempFbo); + targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); + return pipelineState; + }, - /** + /** * Detach event listeners, remove references, and clean up caches. */ - dispose: function() { - if (this.canvas) { - this.canvas = null; - this.gl = null; - } - this.clearWebGLCaches(); - }, + dispose: function() { + if (this.canvas) { + this.canvas = null; + this.gl = null; + } + this.clearWebGLCaches(); + }, - /** + /** * Wipe out WebGL-related caches. */ - clearWebGLCaches: function() { - this.programCache = {}; - this.textureCache = {}; - }, + clearWebGLCaches: function() { + this.programCache = {}; + this.textureCache = {}; + }, - /** + /** * Create a WebGL texture object. * * Accepts specific dimensions to initialize the texture to or a source image. @@ -249,23 +251,23 @@ WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data. * @returns {WebGLTexture} */ - createTexture: function(gl, width, height, textureImageSource) { - var texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - if (textureImageSource) { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); - } - else { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - } - return texture; - }, + createTexture: function(gl, width, height, textureImageSource) { + var texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + if (textureImageSource) { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); + } + else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + } + return texture; + }, - /** + /** * Can be optionally used to get a texture from the cache array * * If an existing texture is not found, a new texture is created and cached. @@ -274,63 +276,64 @@ WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the * texture cache entry if one does not already exist. */ - getCachedTexture: function(uniqueId, textureImageSource) { - if (this.textureCache[uniqueId]) { - return this.textureCache[uniqueId]; - } - else { - var texture = this.createTexture( - this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); - this.textureCache[uniqueId] = texture; - return texture; - } - }, + getCachedTexture: function(uniqueId, textureImageSource) { + if (this.textureCache[uniqueId]) { + return this.textureCache[uniqueId]; + } + else { + var texture = this.createTexture( + this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); + this.textureCache[uniqueId] = texture; + return texture; + } + }, - /** + /** * Clear out cached resources related to a source image that has been * filtered previously. * * @param {String} cacheKey The cache key provided when the source image was filtered. */ - evictCachesForKey: function(cacheKey) { - if (this.textureCache[cacheKey]) { - this.gl.deleteTexture(this.textureCache[cacheKey]); - delete this.textureCache[cacheKey]; - } - }, + evictCachesForKey: function(cacheKey) { + if (this.textureCache[cacheKey]) { + this.gl.deleteTexture(this.textureCache[cacheKey]); + delete this.textureCache[cacheKey]; + } + }, - copyGLTo2D: copyGLTo2DDrawImage, + copyGLTo2D: copyGLTo2DDrawImage, - /** + /** * Attempt to extract GPU information strings from a WebGL context. * * Useful information when debugging or blacklisting specific GPUs. * * @returns {Object} A GPU info object with renderer and vendor strings. */ - captureGPUInfo: function() { - if (this.gpuInfo) { - return this.gpuInfo; - } - var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; - if (!gl) { - return gpuInfo; - } - var ext = gl.getExtension('WEBGL_debug_renderer_info'); - if (ext) { - var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); - var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); - if (renderer) { - gpuInfo.renderer = renderer.toLowerCase(); + captureGPUInfo: function() { + if (this.gpuInfo) { + return this.gpuInfo; } - if (vendor) { - gpuInfo.vendor = vendor.toLowerCase(); + var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; + if (!gl) { + return gpuInfo; } - } - this.gpuInfo = gpuInfo; - return gpuInfo; - }, -}; + var ext = gl.getExtension('WEBGL_debug_renderer_info'); + if (ext) { + var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); + var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); + if (renderer) { + gpuInfo.renderer = renderer.toLowerCase(); + } + if (vendor) { + gpuInfo.vendor = vendor.toLowerCase(); + } + } + this.gpuInfo = gpuInfo; + return gpuInfo; + }, + }; +})(typeof exports !== 'undefined' ? exports : window); function resizeCanvasIfNeeded(pipelineState) { var targetCanvas = pipelineState.targetCanvas, diff --git a/src/globalFabric.js b/src/globalFabric.js index 525356d95dc..3eb63d166b3 100644 --- a/src/globalFabric.js +++ b/src/globalFabric.js @@ -1,4 +1,6 @@ -if (typeof document !== 'undefined' && typeof window !== 'undefined') { - // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) - window.fabric = fabric; -} +(function(global) { + if (typeof document !== 'undefined' && typeof window !== 'undefined') { + // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) + global.fabric = fabric; + } +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/gradient.class.js b/src/gradient.class.js index a5651ddcd48..733dc0302c2 100644 --- a/src/gradient.class.js +++ b/src/gradient.class.js @@ -1,97 +1,99 @@ -/* _FROM_SVG_START_ */ -function getColorStop(el, multiplier) { - var style = el.getAttribute('style'), - offset = el.getAttribute('offset') || 0, - color, colorAlpha, opacity, i; - - // convert percents to absolute values - offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); - offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; - if (style) { - var keyValuePairs = style.split(/\s*;\s*/); - - if (keyValuePairs[keyValuePairs.length - 1] === '') { - keyValuePairs.pop(); - } +(function(global) { + var fabric = global.fabric; + /* _FROM_SVG_START_ */ + function getColorStop(el, multiplier) { + var style = el.getAttribute('style'), + offset = el.getAttribute('offset') || 0, + color, colorAlpha, opacity, i; + + // convert percents to absolute values + offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); + offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; + if (style) { + var keyValuePairs = style.split(/\s*;\s*/); + + if (keyValuePairs[keyValuePairs.length - 1] === '') { + keyValuePairs.pop(); + } - for (i = keyValuePairs.length; i--; ) { + for (i = keyValuePairs.length; i--; ) { - var split = keyValuePairs[i].split(/\s*:\s*/), - key = split[0].trim(), - value = split[1].trim(); + var split = keyValuePairs[i].split(/\s*:\s*/), + key = split[0].trim(), + value = split[1].trim(); - if (key === 'stop-color') { - color = value; - } - else if (key === 'stop-opacity') { - opacity = value; + if (key === 'stop-color') { + color = value; + } + else if (key === 'stop-opacity') { + opacity = value; + } } } + + if (!color) { + color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; + } + if (!opacity) { + opacity = el.getAttribute('stop-opacity'); + } + + color = new fabric.Color(color); + colorAlpha = color.getAlpha(); + opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); + opacity *= colorAlpha * multiplier; + + return { + offset: offset, + color: color.toRgb(), + opacity: opacity + }; } - if (!color) { - color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; + function getLinearCoords(el) { + return { + x1: el.getAttribute('x1') || 0, + y1: el.getAttribute('y1') || 0, + x2: el.getAttribute('x2') || '100%', + y2: el.getAttribute('y2') || 0 + }; } - if (!opacity) { - opacity = el.getAttribute('stop-opacity'); + + function getRadialCoords(el) { + return { + x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', + y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', + r1: 0, + x2: el.getAttribute('cx') || '50%', + y2: el.getAttribute('cy') || '50%', + r2: el.getAttribute('r') || '50%' + }; } + /* _FROM_SVG_END_ */ - color = new fabric.Color(color); - colorAlpha = color.getAlpha(); - opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); - opacity *= colorAlpha * multiplier; - - return { - offset: offset, - color: color.toRgb(), - opacity: opacity - }; -} - -function getLinearCoords(el) { - return { - x1: el.getAttribute('x1') || 0, - y1: el.getAttribute('y1') || 0, - x2: el.getAttribute('x2') || '100%', - y2: el.getAttribute('y2') || 0 - }; -} - -function getRadialCoords(el) { - return { - x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', - y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', - r1: 0, - x2: el.getAttribute('cx') || '50%', - y2: el.getAttribute('cy') || '50%', - r2: el.getAttribute('r') || '50%' - }; -} -/* _FROM_SVG_END_ */ - -/** + /** * Gradient class * @class fabric.Gradient * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients} * @see {@link fabric.Gradient#initialize} for constructor definition */ -fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { + fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { - /** + /** * Horizontal offset for aligning gradients coming from SVG when outside pathgroups * @type Number * @default 0 */ - offsetX: 0, + offsetX: 0, - /** + /** * Vertical offset for aligning gradients coming from SVG when outside pathgroups * @type Number * @default 0 */ - offsetY: 0, + offsetY: 0, - /** + /** * A transform matrix to apply to the gradient before painting. * Imported from svg gradients, is not applied with the current transform in the center. * Before this transform is applied, the origin point is at the top left corner of the object @@ -99,9 +101,9 @@ fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype * * @type Number[] * @default null */ - gradientTransform: null, + gradientTransform: null, - /** + /** * coordinates units for coords. * If `pixels`, the number of coords are in the same unit of width / height. * If set as `percentage` the coords are still a number, but 1 means 100% of width @@ -110,16 +112,16 @@ fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype * * @type String * @default 'pixels' */ - gradientUnits: 'pixels', + gradientUnits: 'pixels', - /** + /** * Gradient type linear or radial * @type String * @default 'pixels' */ - type: 'linear', + type: 'linear', - /** + /** * Constructor * @param {Object} options Options object with type, coords, gradientUnits and colorStops * @param {Object} [options.type] gradient type linear or radial @@ -136,220 +138,220 @@ fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype * * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle * @return {fabric.Gradient} thisArg */ - initialize: function(options) { - options || (options = { }); - options.coords || (options.coords = { }); + initialize: function(options) { + options || (options = { }); + options.coords || (options.coords = { }); - var coords, _this = this; + var coords, _this = this; - // sets everything, then coords and colorstops get sets again - Object.keys(options).forEach(function(option) { - _this[option] = options[option]; - }); + // sets everything, then coords and colorstops get sets again + Object.keys(options).forEach(function(option) { + _this[option] = options[option]; + }); - if (this.id) { - this.id += '_' + fabric.Object.__uid++; - } - else { - this.id = fabric.Object.__uid++; - } + if (this.id) { + this.id += '_' + fabric.Object.__uid++; + } + else { + this.id = fabric.Object.__uid++; + } - coords = { - x1: options.coords.x1 || 0, - y1: options.coords.y1 || 0, - x2: options.coords.x2 || 0, - y2: options.coords.y2 || 0 - }; + coords = { + x1: options.coords.x1 || 0, + y1: options.coords.y1 || 0, + x2: options.coords.x2 || 0, + y2: options.coords.y2 || 0 + }; - if (this.type === 'radial') { - coords.r1 = options.coords.r1 || 0; - coords.r2 = options.coords.r2 || 0; - } + if (this.type === 'radial') { + coords.r1 = options.coords.r1 || 0; + coords.r2 = options.coords.r2 || 0; + } - this.coords = coords; - this.colorStops = options.colorStops.slice(); - }, + this.coords = coords; + this.colorStops = options.colorStops.slice(); + }, - /** + /** * Adds another colorStop * @param {Object} colorStop Object with offset and color * @return {fabric.Gradient} thisArg */ - addColorStop: function(colorStops) { - for (var position in colorStops) { - var color = new fabric.Color(colorStops[position]); - this.colorStops.push({ - offset: parseFloat(position), - color: color.toRgb(), - opacity: color.getAlpha() - }); - } - return this; - }, + addColorStop: function(colorStops) { + for (var position in colorStops) { + var color = new fabric.Color(colorStops[position]); + this.colorStops.push({ + offset: parseFloat(position), + color: color.toRgb(), + opacity: color.getAlpha() + }); + } + return this; + }, - /** + /** * Returns object representation of a gradient * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} */ - toObject: function(propertiesToInclude) { - var object = { - type: this.type, - coords: this.coords, - colorStops: this.colorStops, - offsetX: this.offsetX, - offsetY: this.offsetY, - gradientUnits: this.gradientUnits, - gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); - - return object; - }, - - /* _TO_SVG_START_ */ - /** + toObject: function(propertiesToInclude) { + var object = { + type: this.type, + coords: this.coords, + colorStops: this.colorStops, + offsetX: this.offsetX, + offsetY: this.offsetY, + gradientUnits: this.gradientUnits, + gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); + + return object; + }, + + /* _TO_SVG_START_ */ + /** * Returns SVG representation of an gradient * @param {Object} object Object to create a gradient for * @return {String} SVG representation of an gradient (linear/radial) */ - toSVG: function(object, options) { - var coords = this.coords, i, len, options = options || {}, - markup, commonAttributes, colorStops = this.colorStops, - needsSwap = coords.r1 > coords.r2, - transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), - offsetX = -this.offsetX, offsetY = -this.offsetY, - withViewport = !!options.additionalTransform, - gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; - // colorStops must be sorted ascending - colorStops.sort(function(a, b) { - return a.offset - b.offset; - }); + toSVG: function(object, options) { + var coords = this.coords, i, len, options = options || {}, + markup, commonAttributes, colorStops = this.colorStops, + needsSwap = coords.r1 > coords.r2, + transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), + offsetX = -this.offsetX, offsetY = -this.offsetY, + withViewport = !!options.additionalTransform, + gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; + // colorStops must be sorted ascending + colorStops.sort(function(a, b) { + return a.offset - b.offset; + }); - if (gradientUnits === 'objectBoundingBox') { - offsetX /= object.width; - offsetY /= object.height; - } - else { - offsetX += object.width / 2; - offsetY += object.height / 2; - } - if (object.type === 'path' && this.gradientUnits !== 'percentage') { - offsetX -= object.pathOffset.x; - offsetY -= object.pathOffset.y; - } + if (gradientUnits === 'objectBoundingBox') { + offsetX /= object.width; + offsetY /= object.height; + } + else { + offsetX += object.width / 2; + offsetY += object.height / 2; + } + if (object.type === 'path' && this.gradientUnits !== 'percentage') { + offsetX -= object.pathOffset.x; + offsetY -= object.pathOffset.y; + } - transform[4] -= offsetX; - transform[5] -= offsetY; + transform[4] -= offsetX; + transform[5] -= offsetY; - commonAttributes = 'id="SVGID_' + this.id + + commonAttributes = 'id="SVGID_' + this.id + '" gradientUnits="' + gradientUnits + '"'; - commonAttributes += ' gradientTransform="' + (withViewport ? - options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; - - if (this.type === 'linear') { - markup = [ - '\n' - ]; - } - else if (this.type === 'radial') { - // svg radial gradient has just 1 radius. the biggest. - markup = [ - '\n' - ]; - } + commonAttributes += ' gradientTransform="' + (withViewport ? + options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; + + if (this.type === 'linear') { + markup = [ + '\n' + ]; + } + else if (this.type === 'radial') { + // svg radial gradient has just 1 radius. the biggest. + markup = [ + '\n' + ]; + } - if (this.type === 'radial') { - if (needsSwap) { - // svg goes from internal to external radius. if radius are inverted, swap color stops. - colorStops = colorStops.concat(); - colorStops.reverse(); - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset = 1 - colorStops[i].offset; + if (this.type === 'radial') { + if (needsSwap) { + // svg goes from internal to external radius. if radius are inverted, swap color stops. + colorStops = colorStops.concat(); + colorStops.reverse(); + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset = 1 - colorStops[i].offset; + } } - } - var minRadius = Math.min(coords.r1, coords.r2); - if (minRadius > 0) { - // i have to shift all colorStops and add new one in 0. - var maxRadius = Math.max(coords.r1, coords.r2), - percentageShift = minRadius / maxRadius; - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); + var minRadius = Math.min(coords.r1, coords.r2); + if (minRadius > 0) { + // i have to shift all colorStops and add new one in 0. + var maxRadius = Math.max(coords.r1, coords.r2), + percentageShift = minRadius / maxRadius; + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); + } } } - } - for (i = 0, len = colorStops.length; i < len; i++) { - var colorStop = colorStops[i]; - markup.push( - '\n' - ); - } + for (i = 0, len = colorStops.length; i < len; i++) { + var colorStop = colorStops[i]; + markup.push( + '\n' + ); + } - markup.push((this.type === 'linear' ? '\n' : '\n')); + markup.push((this.type === 'linear' ? '\n' : '\n')); - return markup.join(''); - }, - /* _TO_SVG_END_ */ + return markup.join(''); + }, + /* _TO_SVG_END_ */ - /** + /** * Returns an instance of CanvasGradient * @param {CanvasRenderingContext2D} ctx Context to render on * @return {CanvasGradient} */ - toLive: function(ctx) { - var gradient, coords = this.coords, i, len; + toLive: function(ctx) { + var gradient, coords = this.coords, i, len; - if (!this.type) { - return; - } + if (!this.type) { + return; + } - if (this.type === 'linear') { - gradient = ctx.createLinearGradient( - coords.x1, coords.y1, coords.x2, coords.y2); - } - else if (this.type === 'radial') { - gradient = ctx.createRadialGradient( - coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); - } + if (this.type === 'linear') { + gradient = ctx.createLinearGradient( + coords.x1, coords.y1, coords.x2, coords.y2); + } + else if (this.type === 'radial') { + gradient = ctx.createRadialGradient( + coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); + } - for (i = 0, len = this.colorStops.length; i < len; i++) { - var color = this.colorStops[i].color, - opacity = this.colorStops[i].opacity, - offset = this.colorStops[i].offset; + for (i = 0, len = this.colorStops.length; i < len; i++) { + var color = this.colorStops[i].color, + opacity = this.colorStops[i].opacity, + offset = this.colorStops[i].offset; - if (typeof opacity !== 'undefined') { - color = new fabric.Color(color).setAlpha(opacity).toRgba(); + if (typeof opacity !== 'undefined') { + color = new fabric.Color(color).setAlpha(opacity).toRgba(); + } + gradient.addColorStop(offset, color); } - gradient.addColorStop(offset, color); - } - return gradient; - } -}); + return gradient; + } + }); -fabric.util.object.extend(fabric.Gradient, { + fabric.util.object.extend(fabric.Gradient, { - /* _FROM_SVG_START_ */ - /** + /* _FROM_SVG_START_ */ + /** * Returns {@link fabric.Gradient} instance from an SVG element * @static * @memberOf fabric.Gradient @@ -366,8 +368,8 @@ fabric.util.object.extend(fabric.Gradient, { * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement */ - fromElement: function(el, instance, opacityAttr, svgOptions) { - /** + fromElement: function(el, instance, opacityAttr, svgOptions) { + /** * @example: * * @@ -400,86 +402,87 @@ fabric.util.object.extend(fabric.Gradient, { * */ - var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); - multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; - if (isNaN(multiplier)) { - multiplier = 1; - } + var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); + multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; + if (isNaN(multiplier)) { + multiplier = 1; + } - var colorStopEls = el.getElementsByTagName('stop'), - type, - gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? - 'pixels' : 'percentage', - gradientTransform = el.getAttribute('gradientTransform') || '', - colorStops = [], - coords, i, offsetX = 0, offsetY = 0, - transformMatrix; - if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { - type = 'linear'; - coords = getLinearCoords(el); - } - else { - type = 'radial'; - coords = getRadialCoords(el); - } + var colorStopEls = el.getElementsByTagName('stop'), + type, + gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? + 'pixels' : 'percentage', + gradientTransform = el.getAttribute('gradientTransform') || '', + colorStops = [], + coords, i, offsetX = 0, offsetY = 0, + transformMatrix; + if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { + type = 'linear'; + coords = getLinearCoords(el); + } + else { + type = 'radial'; + coords = getRadialCoords(el); + } - for (i = colorStopEls.length; i--; ) { - colorStops.push(getColorStop(colorStopEls[i], multiplier)); - } + for (i = colorStopEls.length; i--; ) { + colorStops.push(getColorStop(colorStopEls[i], multiplier)); + } - transformMatrix = fabric.parseTransformAttribute(gradientTransform); + transformMatrix = fabric.parseTransformAttribute(gradientTransform); - __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); + __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); - if (gradientUnits === 'pixels') { - offsetX = -instance.left; - offsetY = -instance.top; - } + if (gradientUnits === 'pixels') { + offsetX = -instance.left; + offsetY = -instance.top; + } - var gradient = new fabric.Gradient({ - id: el.getAttribute('id'), - type: type, - coords: coords, - colorStops: colorStops, - gradientUnits: gradientUnits, - gradientTransform: transformMatrix, - offsetX: offsetX, - offsetY: offsetY, - }); + var gradient = new fabric.Gradient({ + id: el.getAttribute('id'), + type: type, + coords: coords, + colorStops: colorStops, + gradientUnits: gradientUnits, + gradientTransform: transformMatrix, + offsetX: offsetX, + offsetY: offsetY, + }); - return gradient; - } - /* _FROM_SVG_END_ */ -}); + return gradient; + } + /* _FROM_SVG_END_ */ + }); -/** + /** * @private */ -function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { - var propValue, finalValue; - Object.keys(options).forEach(function(prop) { - propValue = options[prop]; - if (propValue === 'Infinity') { - finalValue = 1; - } - else if (propValue === '-Infinity') { - finalValue = 0; - } - else { - finalValue = parseFloat(options[prop], 10); - if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { - finalValue *= 0.01; - if (gradientUnits === 'pixels') { - // then we need to fix those percentages here in svg parsing - if (prop === 'x1' || prop === 'x2' || prop === 'r2') { - finalValue *= svgOptions.viewBoxWidth || svgOptions.width; - } - if (prop === 'y1' || prop === 'y2') { - finalValue *= svgOptions.viewBoxHeight || svgOptions.height; + function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { + var propValue, finalValue; + Object.keys(options).forEach(function(prop) { + propValue = options[prop]; + if (propValue === 'Infinity') { + finalValue = 1; + } + else if (propValue === '-Infinity') { + finalValue = 0; + } + else { + finalValue = parseFloat(options[prop], 10); + if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { + finalValue *= 0.01; + if (gradientUnits === 'pixels') { + // then we need to fix those percentages here in svg parsing + if (prop === 'x1' || prop === 'x2' || prop === 'r2') { + finalValue *= svgOptions.viewBoxWidth || svgOptions.width; + } + if (prop === 'y1' || prop === 'y2') { + finalValue *= svgOptions.viewBoxHeight || svgOptions.height; + } } } } - } - options[prop] = finalValue; - }); -} + options[prop] = finalValue; + }); + } +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/intersection.class.js b/src/intersection.class.js index 0c396ae51ea..fe16b68cb46 100644 --- a/src/intersection.class.js +++ b/src/intersection.class.js @@ -1,47 +1,47 @@ -/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ -var fabric = exports.fabric || (exports.fabric = { }); - -/** +(function(global) { + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ + var fabric = global.fabric || (global.fabric = { }); + /** * Intersection class * @class fabric.Intersection * @memberOf fabric * @constructor */ -function Intersection(status) { - this.status = status; - this.points = []; -} + function Intersection(status) { + this.status = status; + this.points = []; + } -fabric.Intersection = Intersection; + fabric.Intersection = Intersection; -fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { + fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { - constructor: Intersection, + constructor: Intersection, - /** + /** * Appends a point to intersection * @param {fabric.Point} point * @return {fabric.Intersection} thisArg * @chainable */ - appendPoint: function (point) { - this.points.push(point); - return this; - }, + appendPoint: function (point) { + this.points.push(point); + return this; + }, - /** + /** * Appends points to intersection * @param {Array} points * @return {fabric.Intersection} thisArg * @chainable */ - appendPoints: function (points) { - this.points = this.points.concat(points); - return this; - } -}; + appendPoints: function (points) { + this.points = this.points.concat(points); + return this; + } + }; -/** + /** * Checks if one line intersects another * TODO: rename in intersectSegmentSegment * @static @@ -51,34 +51,34 @@ fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { * @param {fabric.Point} b2 * @return {fabric.Intersection} */ -fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { - var result, - uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), - ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), - uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); - if (uB !== 0) { - var ua = uaT / uB, - ub = ubT / uB; - if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { - result = new Intersection('Intersection'); - result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); + fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { + var result, + uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), + ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), + uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); + if (uB !== 0) { + var ua = uaT / uB, + ub = ubT / uB; + if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { + result = new Intersection('Intersection'); + result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); + } + else { + result = new Intersection(); + } } else { - result = new Intersection(); - } - } - else { - if (uaT === 0 || ubT === 0) { - result = new Intersection('Coincident'); + if (uaT === 0 || ubT === 0) { + result = new Intersection('Coincident'); + } + else { + result = new Intersection('Parallel'); + } } - else { - result = new Intersection('Parallel'); - } - } - return result; -}; + return result; + }; -/** + /** * Checks if line intersects polygon * TODO: rename in intersectSegmentPolygon * fix detection of coincident @@ -88,49 +88,49 @@ fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { * @param {Array} points * @return {fabric.Intersection} */ -fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { - var result = new Intersection(), - length = points.length, - b1, b2, inter, i; + fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { + var result = new Intersection(), + length = points.length, + b1, b2, inter, i; - for (i = 0; i < length; i++) { - b1 = points[i]; - b2 = points[(i + 1) % length]; - inter = Intersection.intersectLineLine(a1, a2, b1, b2); + for (i = 0; i < length; i++) { + b1 = points[i]; + b2 = points[(i + 1) % length]; + inter = Intersection.intersectLineLine(a1, a2, b1, b2); - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; -}; + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; -/** + /** * Checks if polygon intersects another polygon * @static * @param {Array} points1 * @param {Array} points2 * @return {fabric.Intersection} */ -fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { - var result = new Intersection(), - length = points1.length, i; + fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { + var result = new Intersection(), + length = points1.length, i; - for (i = 0; i < length; i++) { - var a1 = points1[i], - a2 = points1[(i + 1) % length], - inter = Intersection.intersectLinePolygon(a1, a2, points2); + for (i = 0; i < length; i++) { + var a1 = points1[i], + a2 = points1[(i + 1) % length], + inter = Intersection.intersectLinePolygon(a1, a2, points2); - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; -}; + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; -/** + /** * Checks if polygon intersects rectangle * @static * @param {Array} points @@ -138,24 +138,26 @@ fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { * @param {fabric.Point} r2 * @return {fabric.Intersection} */ -fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { - var min = r1.min(r2), - max = r1.max(r2), - topRight = new fabric.Point(max.x, min.y), - bottomLeft = new fabric.Point(min.x, max.y), - inter1 = Intersection.intersectLinePolygon(min, topRight, points), - inter2 = Intersection.intersectLinePolygon(topRight, max, points), - inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), - inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), - result = new Intersection(); - - result.appendPoints(inter1.points); - result.appendPoints(inter2.points); - result.appendPoints(inter3.points); - result.appendPoints(inter4.points); - - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; -}; + fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { + var min = r1.min(r2), + max = r1.max(r2), + topRight = new fabric.Point(max.x, min.y), + bottomLeft = new fabric.Point(min.x, max.y), + inter1 = Intersection.intersectLinePolygon(min, topRight, points), + inter2 = Intersection.intersectLinePolygon(topRight, max, points), + inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), + inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), + result = new Intersection(); + + result.appendPoints(inter1.points); + result.appendPoints(inter2.points); + result.appendPoints(inter3.points); + result.appendPoints(inter4.points); + + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/log.js b/src/log.js index d09cf1e5085..15fe75a708b 100644 --- a/src/log.js +++ b/src/log.js @@ -1,11 +1,14 @@ -/** - * Wrapper around `console.log` (when available) - * @param {*} [values] Values to log - */ -fabric.log = console.log; +(function(global) { + var fabric = global.fabric || (global.fabric = { }); + /** + * Wrapper around `console.log` (when available) + * @param {*} [values] Values to log + */ + fabric.log = console.log; -/** - * Wrapper around `console.warn` (when available) - * @param {*} [values] Values to log as a warning - */ -fabric.warn = console.warn; + /** + * Wrapper around `console.warn` (when available) + * @param {*} [values] Values to log as a warning + */ + fabric.warn = console.warn; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/animation.mixin.js b/src/mixins/animation.mixin.js index 04b415dba12..ca9182ab3d9 100644 --- a/src/mixins/animation.mixin.js +++ b/src/mixins/animation.mixin.js @@ -1,226 +1,229 @@ -fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - - /** - * Animation duration (in ms) for fx* methods - * @type Number - * @default - */ - FX_DURATION: 500, - - /** - * Centers object horizontally with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxCenterObjectH: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.getX(), - endValue: this.getCenterPoint().x, - duration: this.FX_DURATION, - onChange: function(value) { - object.setX(value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function() { - object.setCoords(); - onComplete(); - } - }); - }, - - /** - * Centers object vertically with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxCenterObjectV: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.getY(), - endValue: this.getCenterPoint().y, - duration: this.FX_DURATION, - onChange: function(value) { - object.setY(value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function() { - object.setCoords(); - onComplete(); - } - }); - }, - - /** - * Same as `fabric.Canvas#remove` but animated - * @param {fabric.Object} object Object to remove - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxRemove: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.opacity, - endValue: 0, - duration: this.FX_DURATION, - onChange: function(value) { - object.set('opacity', value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function () { - _this.remove(object); - onComplete(); - } - }); - } -}); - -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Animates object's properties - * @param {String|Object} property Property to animate (if string) or properties to animate (if object) - * @param {Number|Object} value Value to animate property to (if string was given first) or options object - * @return {fabric.Object} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation} - * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties) - * - * As object — multiple properties - * - * object.animate({ left: ..., top: ... }); - * object.animate({ left: ..., top: ... }, { duration: ... }); - * - * As string — one property - * - * object.animate('left', ...); - * object.animate('left', { duration: ... }); - * - */ - animate: function () { - if (arguments[0] && typeof arguments[0] === 'object') { - var propsToAnimate = [], prop, skipCallbacks, out = []; - for (prop in arguments[0]) { - propsToAnimate.push(prop); +(function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + + /** + * Animation duration (in ms) for fx* methods + * @type Number + * @default + */ + FX_DURATION: 500, + + /** + * Centers object horizontally with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxCenterObjectH: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.getX(), + endValue: this.getCenterPoint().x, + duration: this.FX_DURATION, + onChange: function(value) { + object.setX(value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); + } + }); + }, + + /** + * Centers object vertically with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxCenterObjectV: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.getY(), + endValue: this.getCenterPoint().y, + duration: this.FX_DURATION, + onChange: function(value) { + object.setY(value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); + } + }); + }, + + /** + * Same as `fabric.Canvas#remove` but animated + * @param {fabric.Object} object Object to remove + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxRemove: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.opacity, + endValue: 0, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('opacity', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function () { + _this.remove(object); + onComplete(); + } + }); + } + }); + + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Animates object's properties + * @param {String|Object} property Property to animate (if string) or properties to animate (if object) + * @param {Number|Object} value Value to animate property to (if string was given first) or options object + * @return {fabric.Object} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation} + * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties) + * + * As object — multiple properties + * + * object.animate({ left: ..., top: ... }); + * object.animate({ left: ..., top: ... }, { duration: ... }); + * + * As string — one property + * + * object.animate('left', ...); + * object.animate('left', { duration: ... }); + * + */ + animate: function () { + if (arguments[0] && typeof arguments[0] === 'object') { + var propsToAnimate = [], prop, skipCallbacks, out = []; + for (prop in arguments[0]) { + propsToAnimate.push(prop); + } + for (var i = 0, len = propsToAnimate.length; i < len; i++) { + prop = propsToAnimate[i]; + skipCallbacks = i !== len - 1; + out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks)); + } + return out; } - for (var i = 0, len = propsToAnimate.length; i < len; i++) { - prop = propsToAnimate[i]; - skipCallbacks = i !== len - 1; - out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks)); + else { + return this._animate.apply(this, arguments); } - return out; - } - else { - return this._animate.apply(this, arguments); - } - }, - - /** - * @private - * @param {String} property Property to animate - * @param {String} to Value to animate to - * @param {Object} [options] Options object - * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked - */ - _animate: function(property, to, options, skipCallbacks) { - var _this = this, propPair; + }, - to = to.toString(); + /** + * @private + * @param {String} property Property to animate + * @param {String} to Value to animate to + * @param {Object} [options] Options object + * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked + */ + _animate: function(property, to, options, skipCallbacks) { + var _this = this, propPair; - options = Object.assign({}, options); + to = to.toString(); - if (~property.indexOf('.')) { - propPair = property.split('.'); - } + options = Object.assign({}, options); - var propIsColor = - _this.colorProperties.indexOf(property) > -1 || - (propPair && _this.colorProperties.indexOf(propPair[1]) > -1); + if (~property.indexOf('.')) { + propPair = property.split('.'); + } - var currentValue = propPair - ? this.get(propPair[0])[propPair[1]] - : this.get(property); + var propIsColor = + _this.colorProperties.indexOf(property) > -1 || + (propPair && _this.colorProperties.indexOf(propPair[1]) > -1); - if (!('from' in options)) { - options.from = currentValue; - } + var currentValue = propPair + ? this.get(propPair[0])[propPair[1]] + : this.get(property); - if (!propIsColor) { - if (~to.indexOf('=')) { - to = currentValue + parseFloat(to.replace('=', '')); + if (!('from' in options)) { + options.from = currentValue; } - else { - to = parseFloat(to); - } - } - var _options = { - target: this, - startValue: options.from, - endValue: to, - byValue: options.by, - easing: options.easing, - duration: options.duration, - abort: options.abort && function(value, valueProgress, timeProgress) { - return options.abort.call(_this, value, valueProgress, timeProgress); - }, - onChange: function (value, valueProgress, timeProgress) { - if (propPair) { - _this[propPair[0]][propPair[1]] = value; + if (!propIsColor) { + if (~to.indexOf('=')) { + to = currentValue + parseFloat(to.replace('=', '')); } else { - _this.set(property, value); - } - if (skipCallbacks) { - return; + to = parseFloat(to); } - options.onChange && options.onChange(value, valueProgress, timeProgress); - }, - onComplete: function (value, valueProgress, timeProgress) { - if (skipCallbacks) { - return; + } + + var _options = { + target: this, + startValue: options.from, + endValue: to, + byValue: options.by, + easing: options.easing, + duration: options.duration, + abort: options.abort && function(value, valueProgress, timeProgress) { + return options.abort.call(_this, value, valueProgress, timeProgress); + }, + onChange: function (value, valueProgress, timeProgress) { + if (propPair) { + _this[propPair[0]][propPair[1]] = value; + } + else { + _this.set(property, value); + } + if (skipCallbacks) { + return; + } + options.onChange && options.onChange(value, valueProgress, timeProgress); + }, + onComplete: function (value, valueProgress, timeProgress) { + if (skipCallbacks) { + return; + } + + _this.setCoords(); + options.onComplete && options.onComplete(value, valueProgress, timeProgress); } + }; - _this.setCoords(); - options.onComplete && options.onComplete(value, valueProgress, timeProgress); + if (propIsColor) { + return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options); + } + else { + return fabric.util.animate(_options); } - }; - - if (propIsColor) { - return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options); - } - else { - return fabric.util.animate(_options); } - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/canvas_dataurl_exporter.mixin.js b/src/mixins/canvas_dataurl_exporter.mixin.js index f84072c01aa..e234886f9d5 100644 --- a/src/mixins/canvas_dataurl_exporter.mixin.js +++ b/src/mixins/canvas_dataurl_exporter.mixin.js @@ -1,103 +1,106 @@ -fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { +(function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately - * @param {Object} [options] Options object - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 - * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. - * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format - * @see {@link https://jsfiddle.net/xsjua1rd/ demo} - * @example Generate jpeg dataURL with lower quality - * var dataURL = canvas.toDataURL({ - * format: 'jpeg', - * quality: 0.8 - * }); - * @example Generate cropped png dataURL (clipping of canvas) - * var dataURL = canvas.toDataURL({ - * format: 'png', - * left: 100, - * top: 100, - * width: 200, - * height: 200 - * }); - * @example Generate double scaled png dataURL - * var dataURL = canvas.toDataURL({ - * format: 'png', - * multiplier: 2 - * }); - * @example Generate dataURL with objects that overlap a specified object - * var myObject; - * var dataURL = canvas.toDataURL({ - * filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject) - * }); - */ - toDataURL: function (options) { - options || (options = { }); + /** + * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately + * @param {Object} [options] Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 + * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + * @see {@link https://jsfiddle.net/xsjua1rd/ demo} + * @example Generate jpeg dataURL with lower quality + * var dataURL = canvas.toDataURL({ + * format: 'jpeg', + * quality: 0.8 + * }); + * @example Generate cropped png dataURL (clipping of canvas) + * var dataURL = canvas.toDataURL({ + * format: 'png', + * left: 100, + * top: 100, + * width: 200, + * height: 200 + * }); + * @example Generate double scaled png dataURL + * var dataURL = canvas.toDataURL({ + * format: 'png', + * multiplier: 2 + * }); + * @example Generate dataURL with objects that overlap a specified object + * var myObject; + * var dataURL = canvas.toDataURL({ + * filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject) + * }); + */ + toDataURL: function (options) { + options || (options = { }); - var format = options.format || 'png', - quality = options.quality || 1, - multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), - canvasEl = this.toCanvasElement(multiplier, options); - return fabric.util.toDataURL(canvasEl, format, quality); - }, + var format = options.format || 'png', + quality = options.quality || 1, + multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), + canvasEl = this.toCanvasElement(multiplier, options); + return fabric.util.toDataURL(canvasEl, format, quality); + }, - /** - * Create a new HTMLCanvas element painted with the current canvas content. - * No need to resize the actual one or repaint it. - * Will transfer object ownership to a new canvas, paint it, and set everything back. - * This is an intermediary step used to get to a dataUrl but also it is useful to - * create quick image copies of a canvas without passing for the dataUrl string - * @param {Number} [multiplier] a zoom factor. - * @param {Object} [options] Cropping informations - * @param {Number} [options.left] Cropping left offset. - * @param {Number} [options.top] Cropping top offset. - * @param {Number} [options.width] Cropping width. - * @param {Number} [options.height] Cropping height. - * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. - */ - toCanvasElement: function (multiplier, options) { - multiplier = multiplier || 1; - options = options || { }; - var scaledWidth = (options.width || this.width) * multiplier, - scaledHeight = (options.height || this.height) * multiplier, - zoom = this.getZoom(), - originalWidth = this.width, - originalHeight = this.height, - newZoom = zoom * multiplier, - vp = this.viewportTransform, - translateX = (vp[4] - (options.left || 0)) * multiplier, - translateY = (vp[5] - (options.top || 0)) * multiplier, - originalInteractive = this.interactive, - newVp = [newZoom, 0, 0, newZoom, translateX, translateY], - originalRetina = this.enableRetinaScaling, - canvasEl = fabric.util.createCanvasElement(), - originalContextTop = this.contextTop, - objectsToRender = options.filter ? this._objects.filter(options.filter) : this._objects; - canvasEl.width = scaledWidth; - canvasEl.height = scaledHeight; - this.contextTop = null; - this.enableRetinaScaling = false; - this.interactive = false; - this.viewportTransform = newVp; - this.width = scaledWidth; - this.height = scaledHeight; - this.calcViewportBoundaries(); - this.renderCanvas(canvasEl.getContext('2d'), objectsToRender); - this.viewportTransform = vp; - this.width = originalWidth; - this.height = originalHeight; - this.calcViewportBoundaries(); - this.interactive = originalInteractive; - this.enableRetinaScaling = originalRetina; - this.contextTop = originalContextTop; - return canvasEl; - }, -}); + /** + * Create a new HTMLCanvas element painted with the current canvas content. + * No need to resize the actual one or repaint it. + * Will transfer object ownership to a new canvas, paint it, and set everything back. + * This is an intermediary step used to get to a dataUrl but also it is useful to + * create quick image copies of a canvas without passing for the dataUrl string + * @param {Number} [multiplier] a zoom factor. + * @param {Object} [options] Cropping informations + * @param {Number} [options.left] Cropping left offset. + * @param {Number} [options.top] Cropping top offset. + * @param {Number} [options.width] Cropping width. + * @param {Number} [options.height] Cropping height. + * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. + */ + toCanvasElement: function (multiplier, options) { + multiplier = multiplier || 1; + options = options || { }; + var scaledWidth = (options.width || this.width) * multiplier, + scaledHeight = (options.height || this.height) * multiplier, + zoom = this.getZoom(), + originalWidth = this.width, + originalHeight = this.height, + newZoom = zoom * multiplier, + vp = this.viewportTransform, + translateX = (vp[4] - (options.left || 0)) * multiplier, + translateY = (vp[5] - (options.top || 0)) * multiplier, + originalInteractive = this.interactive, + newVp = [newZoom, 0, 0, newZoom, translateX, translateY], + originalRetina = this.enableRetinaScaling, + canvasEl = fabric.util.createCanvasElement(), + originalContextTop = this.contextTop, + objectsToRender = options.filter ? this._objects.filter(options.filter) : this._objects; + canvasEl.width = scaledWidth; + canvasEl.height = scaledHeight; + this.contextTop = null; + this.enableRetinaScaling = false; + this.interactive = false; + this.viewportTransform = newVp; + this.width = scaledWidth; + this.height = scaledHeight; + this.calcViewportBoundaries(); + this.renderCanvas(canvasEl.getContext('2d'), objectsToRender); + this.viewportTransform = vp; + this.width = originalWidth; + this.height = originalHeight; + this.calcViewportBoundaries(); + this.interactive = originalInteractive; + this.enableRetinaScaling = originalRetina; + this.contextTop = originalContextTop; + return canvasEl; + }, + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js index 4f49326bcc0..31585741db0 100644 --- a/src/mixins/canvas_events.mixin.js +++ b/src/mixins/canvas_events.mixin.js @@ -1,536 +1,539 @@ -var addListener = fabric.util.addListener, - removeListener = fabric.util.removeListener, - RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, - addEventOptions = { passive: false }; +(function(global) { -function checkClick(e, value) { - return e.button && (e.button === value - 1); -} + var fabric = global.fabric, + addListener = fabric.util.addListener, + removeListener = fabric.util.removeListener, + RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, + addEventOptions = { passive: false }; -fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + function checkClick(e, value) { + return e.button && (e.button === value - 1); + } + + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** + /** * Contains the id of the touch event that owns the fabric transform * @type Number * @private */ - mainTouchId: null, + mainTouchId: null, - /** + /** * Adds mouse listeners to canvas * @private */ - _initEventListeners: function () { - // in case we initialized the class twice. This should not happen normally - // but in some kind of applications where the canvas element may be changed - // this is a workaround to having double listeners. - this.removeListeners(); - this._bindEvents(); - this.addOrRemove(addListener, 'add'); - }, + _initEventListeners: function () { + // in case we initialized the class twice. This should not happen normally + // but in some kind of applications where the canvas element may be changed + // this is a workaround to having double listeners. + this.removeListeners(); + this._bindEvents(); + this.addOrRemove(addListener, 'add'); + }, - /** + /** * return an event prefix pointer or mouse. * @private */ - _getEventPrefix: function () { - return this.enablePointerEvents ? 'pointer' : 'mouse'; - }, - - addOrRemove: function(functor, eventjsFunctor) { - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - functor(fabric.window, 'resize', this._onResize); - functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); - functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); - functor(canvasElement, 'wheel', this._onMouseWheel); - functor(canvasElement, 'contextmenu', this._onContextMenu); - functor(canvasElement, 'dblclick', this._onDoubleClick); - functor(canvasElement, 'dragover', this._onDragOver); - functor(canvasElement, 'dragenter', this._onDragEnter); - functor(canvasElement, 'dragleave', this._onDragLeave); - functor(canvasElement, 'drop', this._onDrop); - if (!this.enablePointerEvents) { - functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); - } - if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { - eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); - eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); - eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); - eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); - eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); - } - }, + _getEventPrefix: function () { + return this.enablePointerEvents ? 'pointer' : 'mouse'; + }, + + addOrRemove: function(functor, eventjsFunctor) { + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + functor(fabric.window, 'resize', this._onResize); + functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); + functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); + functor(canvasElement, 'wheel', this._onMouseWheel); + functor(canvasElement, 'contextmenu', this._onContextMenu); + functor(canvasElement, 'dblclick', this._onDoubleClick); + functor(canvasElement, 'dragover', this._onDragOver); + functor(canvasElement, 'dragenter', this._onDragEnter); + functor(canvasElement, 'dragleave', this._onDragLeave); + functor(canvasElement, 'drop', this._onDrop); + if (!this.enablePointerEvents) { + functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); + } + if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { + eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); + eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); + eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); + eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); + eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); + } + }, - /** + /** * Removes all event listeners */ - removeListeners: function() { - this.addOrRemove(removeListener, 'remove'); - // if you dispose on a mouseDown, before mouse up, you need to clean document to... - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - }, + removeListeners: function() { + this.addOrRemove(removeListener, 'remove'); + // if you dispose on a mouseDown, before mouse up, you need to clean document to... + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + }, - /** + /** * @private */ - _bindEvents: function() { - if (this.eventsBound) { - // for any reason we pass here twice we do not want to bind events twice. - return; - } - this._onMouseDown = this._onMouseDown.bind(this); - this._onTouchStart = this._onTouchStart.bind(this); - this._onMouseMove = this._onMouseMove.bind(this); - this._onMouseUp = this._onMouseUp.bind(this); - this._onTouchEnd = this._onTouchEnd.bind(this); - this._onResize = this._onResize.bind(this); - this._onGesture = this._onGesture.bind(this); - this._onDrag = this._onDrag.bind(this); - this._onShake = this._onShake.bind(this); - this._onLongPress = this._onLongPress.bind(this); - this._onOrientationChange = this._onOrientationChange.bind(this); - this._onMouseWheel = this._onMouseWheel.bind(this); - this._onMouseOut = this._onMouseOut.bind(this); - this._onMouseEnter = this._onMouseEnter.bind(this); - this._onContextMenu = this._onContextMenu.bind(this); - this._onDoubleClick = this._onDoubleClick.bind(this); - this._onDragOver = this._onDragOver.bind(this); - this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); - this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); - this._onDrop = this._onDrop.bind(this); - this.eventsBound = true; - }, - - /** + _bindEvents: function() { + if (this.eventsBound) { + // for any reason we pass here twice we do not want to bind events twice. + return; + } + this._onMouseDown = this._onMouseDown.bind(this); + this._onTouchStart = this._onTouchStart.bind(this); + this._onMouseMove = this._onMouseMove.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); + this._onTouchEnd = this._onTouchEnd.bind(this); + this._onResize = this._onResize.bind(this); + this._onGesture = this._onGesture.bind(this); + this._onDrag = this._onDrag.bind(this); + this._onShake = this._onShake.bind(this); + this._onLongPress = this._onLongPress.bind(this); + this._onOrientationChange = this._onOrientationChange.bind(this); + this._onMouseWheel = this._onMouseWheel.bind(this); + this._onMouseOut = this._onMouseOut.bind(this); + this._onMouseEnter = this._onMouseEnter.bind(this); + this._onContextMenu = this._onContextMenu.bind(this); + this._onDoubleClick = this._onDoubleClick.bind(this); + this._onDragOver = this._onDragOver.bind(this); + this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); + this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); + this._onDrop = this._onDrop.bind(this); + this.eventsBound = true; + }, + + /** * @private * @param {Event} [e] Event object fired on Event.js gesture * @param {Event} [self] Inner Event object */ - _onGesture: function(e, self) { - this.__onTransformGesture && this.__onTransformGesture(e, self); - }, + _onGesture: function(e, self) { + this.__onTransformGesture && this.__onTransformGesture(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js drag * @param {Event} [self] Inner Event object */ - _onDrag: function(e, self) { - this.__onDrag && this.__onDrag(e, self); - }, + _onDrag: function(e, self) { + this.__onDrag && this.__onDrag(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on wheel event */ - _onMouseWheel: function(e) { - this.__onMouseWheel(e); - }, + _onMouseWheel: function(e) { + this.__onMouseWheel(e); + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onMouseOut: function(e) { - var target = this._hoveredTarget; - this.fire('mouse:out', { target: target, e: e }); - this._hoveredTarget = null; - target && target.fire('mouseout', { e: e }); - - var _this = this; - this._hoveredTargets.forEach(function(_target){ - _this.fire('mouse:out', { target: target, e: e }); - _target && target.fire('mouseout', { e: e }); - }); - this._hoveredTargets = []; - - if (this._iTextInstances) { - this._iTextInstances.forEach(function(obj) { - if (obj.isEditing) { - obj.hiddenTextarea.focus(); - } + _onMouseOut: function(e) { + var target = this._hoveredTarget; + this.fire('mouse:out', { target: target, e: e }); + this._hoveredTarget = null; + target && target.fire('mouseout', { e: e }); + + var _this = this; + this._hoveredTargets.forEach(function(_target){ + _this.fire('mouse:out', { target: target, e: e }); + _target && target.fire('mouseout', { e: e }); }); - } - }, + this._hoveredTargets = []; - /** + if (this._iTextInstances) { + this._iTextInstances.forEach(function(obj) { + if (obj.isEditing) { + obj.hiddenTextarea.focus(); + } + }); + } + }, + + /** * @private * @param {Event} e Event object fired on mouseenter */ - _onMouseEnter: function(e) { - // This find target and consequent 'mouse:over' is used to - // clear old instances on hovered target. - // calling findTarget has the side effect of killing target.__corner. - // as a short term fix we are not firing this if we are currently transforming. - // as a long term fix we need to separate the action of finding a target with the - // side effects we added to it. - if (!this._currentTransform && !this.findTarget(e)) { - this.fire('mouse:over', { target: null, e: e }); - this._hoveredTarget = null; - this._hoveredTargets = []; - } - }, + _onMouseEnter: function(e) { + // This find target and consequent 'mouse:over' is used to + // clear old instances on hovered target. + // calling findTarget has the side effect of killing target.__corner. + // as a short term fix we are not firing this if we are currently transforming. + // as a long term fix we need to separate the action of finding a target with the + // side effects we added to it. + if (!this._currentTransform && !this.findTarget(e)) { + this.fire('mouse:over', { target: null, e: e }); + this._hoveredTarget = null; + this._hoveredTargets = []; + } + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js orientation change * @param {Event} [self] Inner Event object */ - _onOrientationChange: function(e, self) { - this.__onOrientationChange && this.__onOrientationChange(e, self); - }, + _onOrientationChange: function(e, self) { + this.__onOrientationChange && this.__onOrientationChange(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js shake * @param {Event} [self] Inner Event object */ - _onShake: function(e, self) { - this.__onShake && this.__onShake(e, self); - }, + _onShake: function(e, self) { + this.__onShake && this.__onShake(e, self); + }, - /** + /** * @private * @param {Event} [e] Event object fired on Event.js shake * @param {Event} [self] Inner Event object */ - _onLongPress: function(e, self) { - this.__onLongPress && this.__onLongPress(e, self); - }, + _onLongPress: function(e, self) { + this.__onLongPress && this.__onLongPress(e, self); + }, - /** + /** * prevent default to allow drop event to be fired * @private * @param {Event} [e] Event object fired on Event.js shake */ - _onDragOver: function(e) { - e.preventDefault(); - var target = this._simpleEventHandler('dragover', e); - this._fireEnterLeaveEvents(target, e); - }, + _onDragOver: function(e) { + e.preventDefault(); + var target = this._simpleEventHandler('dragover', e); + this._fireEnterLeaveEvents(target, e); + }, - /** + /** * `drop:before` is a an event that allow you to schedule logic * before the `drop` event. Prefer `drop` event always, but if you need * to run some drop-disabling logic on an event, since there is no way * to handle event handlers ordering, use `drop:before` * @param {Event} e */ - _onDrop: function (e) { - this._simpleEventHandler('drop:before', e); - return this._simpleEventHandler('drop', e); - }, + _onDrop: function (e) { + this._simpleEventHandler('drop:before', e); + return this._simpleEventHandler('drop', e); + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onContextMenu: function (e) { - this._simpleEventHandler('contextmenu:before', e); - if (this.stopContextMenu) { - e.stopPropagation(); - e.preventDefault(); - } - this._simpleEventHandler('contextmenu', e); - return false; - }, + _onContextMenu: function (e) { + this._simpleEventHandler('contextmenu:before', e); + if (this.stopContextMenu) { + e.stopPropagation(); + e.preventDefault(); + } + this._simpleEventHandler('contextmenu', e); + return false; + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onDoubleClick: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'dblclick'); - this._resetTransformEventData(e); - }, + _onDoubleClick: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'dblclick'); + this._resetTransformEventData(e); + }, - /** + /** * Return a the id of an event. * returns either the pointerId or the identifier or 0 for the mouse event * @private * @param {Event} evt Event object */ - getPointerId: function(evt) { - var changedTouches = evt.changedTouches; + getPointerId: function(evt) { + var changedTouches = evt.changedTouches; - if (changedTouches) { - return changedTouches[0] && changedTouches[0].identifier; - } + if (changedTouches) { + return changedTouches[0] && changedTouches[0].identifier; + } - if (this.enablePointerEvents) { - return evt.pointerId; - } + if (this.enablePointerEvents) { + return evt.pointerId; + } - return -1; - }, + return -1; + }, - /** + /** * Determines if an event has the id of the event that is considered main * @private * @param {evt} event Event object */ - _isMainEvent: function(evt) { - if (evt.isPrimary === true) { - return true; - } - if (evt.isPrimary === false) { - return false; - } - if (evt.type === 'touchend' && evt.touches.length === 0) { + _isMainEvent: function(evt) { + if (evt.isPrimary === true) { + return true; + } + if (evt.isPrimary === false) { + return false; + } + if (evt.type === 'touchend' && evt.touches.length === 0) { + return true; + } + if (evt.changedTouches) { + return evt.changedTouches[0].identifier === this.mainTouchId; + } return true; - } - if (evt.changedTouches) { - return evt.changedTouches[0].identifier === this.mainTouchId; - } - return true; - }, + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onTouchStart: function(e) { - e.preventDefault(); - if (this.mainTouchId === null) { - this.mainTouchId = this.getPointerId(e); - } - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - // Unbind mousedown to prevent double triggers from touch devices - removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - }, - - /** + _onTouchStart: function(e) { + e.preventDefault(); + if (this.mainTouchId === null) { + this.mainTouchId = this.getPointerId(e); + } + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + // Unbind mousedown to prevent double triggers from touch devices + removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + }, + + /** * @private * @param {Event} e Event object fired on mousedown */ - _onMouseDown: function (e) { - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - }, + _onMouseDown: function (e) { + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onTouchEnd: function(e) { - if (e.touches.length > 0) { - // if there are still touches stop here - return; - } - this.__onMouseUp(e); - this._resetTransformEventData(); - this.mainTouchId = null; - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - var _this = this; - if (this._willAddMouseDown) { - clearTimeout(this._willAddMouseDown); - } - this._willAddMouseDown = setTimeout(function() { - // Wait 400ms before rebinding mousedown to prevent double triggers - // from touch devices - addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); - _this._willAddMouseDown = 0; - }, 400); - }, + _onTouchEnd: function(e) { + if (e.touches.length > 0) { + // if there are still touches stop here + return; + } + this.__onMouseUp(e); + this._resetTransformEventData(); + this.mainTouchId = null; + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + var _this = this; + if (this._willAddMouseDown) { + clearTimeout(this._willAddMouseDown); + } + this._willAddMouseDown = setTimeout(function() { + // Wait 400ms before rebinding mousedown to prevent double triggers + // from touch devices + addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); + _this._willAddMouseDown = 0; + }, 400); + }, - /** + /** * @private * @param {Event} e Event object fired on mouseup */ - _onMouseUp: function (e) { - this.__onMouseUp(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - if (this._isMainEvent(e)) { - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - } - }, + _onMouseUp: function (e) { + this.__onMouseUp(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + if (this._isMainEvent(e)) { + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + } + }, - /** + /** * @private * @param {Event} e Event object fired on mousemove */ - _onMouseMove: function (e) { - !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); - this.__onMouseMove(e); - }, + _onMouseMove: function (e) { + !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); + this.__onMouseMove(e); + }, - /** + /** * @private */ - _onResize: function () { - this.calcOffset(); - }, + _onResize: function () { + this.calcOffset(); + }, - /** + /** * Decides whether the canvas should be redrawn in mouseup and mousedown events. * @private * @param {Object} target */ - _shouldRender: function(target) { - var activeObject = this._activeObject; + _shouldRender: function(target) { + var activeObject = this._activeObject; - if ( - !!activeObject !== !!target || + if ( + !!activeObject !== !!target || (activeObject && target && (activeObject !== target)) - ) { - // this covers: switch of target, from target to no target, selection of target - // multiSelection with key and mouse - return true; - } - else if (activeObject && activeObject.isEditing) { - // if we mouse up/down over a editing textbox a cursor change, - // there is no need to re render + ) { + // this covers: switch of target, from target to no target, selection of target + // multiSelection with key and mouse + return true; + } + else if (activeObject && activeObject.isEditing) { + // if we mouse up/down over a editing textbox a cursor change, + // there is no need to re render + return false; + } return false; - } - return false; - }, + }, - /** + /** * Method that defines the actions when mouse is released on canvas. * The method resets the currentTransform parameters, store the image corner * position in the image object and render the canvas on top. * @private * @param {Event} e Event object fired on mouseup */ - __onMouseUp: function (e) { - var target, transform = this._currentTransform, - groupSelector = this._groupSelector, shouldRender = false, - isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); - this._cacheTransformEventData(e); - target = this._target; - this._handleEvent(e, 'up:before'); - // if right/middle click just fire events and return - // target undefined will make the _handleEvent search the target - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'up', RIGHT_CLICK, isClick); - } - return; - } + __onMouseUp: function (e) { + var target, transform = this._currentTransform, + groupSelector = this._groupSelector, shouldRender = false, + isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); + this._cacheTransformEventData(e); + target = this._target; + this._handleEvent(e, 'up:before'); + // if right/middle click just fire events and return + // target undefined will make the _handleEvent search the target + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'up', RIGHT_CLICK, isClick); + } + return; + } - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); + } + this._resetTransformEventData(); + return; } - this._resetTransformEventData(); - return; - } - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this._onMouseUpInDrawingMode(e); - return; - } + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this._onMouseUpInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } - if (transform) { - this._finalizeCurrentTransform(e); - shouldRender = transform.actionPerformed; - } - if (!isClick) { - var targetWasActive = target === this._activeObject; - this._maybeGroupObjects(e); - if (!shouldRender) { - shouldRender = ( - this._shouldRender(target) || + if (!this._isMainEvent(e)) { + return; + } + if (transform) { + this._finalizeCurrentTransform(e); + shouldRender = transform.actionPerformed; + } + if (!isClick) { + var targetWasActive = target === this._activeObject; + this._maybeGroupObjects(e); + if (!shouldRender) { + shouldRender = ( + this._shouldRender(target) || (!targetWasActive && target === this._activeObject) + ); + } + } + var corner, pointer; + if (target) { + corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) ); + if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { + this.setActiveObject(target, e); + shouldRender = true; + } + else { + var control = target.controls[corner], + mouseUpHandler = control && control.getMouseUpHandler(e, target, control); + if (mouseUpHandler) { + pointer = this.getPointer(e); + mouseUpHandler(e, transform, pointer.x, pointer.y); + } + } + target.isMoving = false; } - } - var corner, pointer; - if (target) { - corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) - ); - if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { - this.setActiveObject(target, e); - shouldRender = true; + // if we are ending up a transform on a different control or a new object + // fire the original mouse up from the corner that started the transform + if (transform && (transform.target !== target || transform.corner !== corner)) { + var originalControl = transform.target && transform.target.controls[transform.corner], + originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); + pointer = pointer || this.getPointer(e); + originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); } - else { - var control = target.controls[corner], - mouseUpHandler = control && control.getMouseUpHandler(e, target, control); - if (mouseUpHandler) { - pointer = this.getPointer(e); - mouseUpHandler(e, transform, pointer.x, pointer.y); - } + this._setCursorFromEvent(e, target); + this._handleEvent(e, 'up', LEFT_CLICK, isClick); + this._groupSelector = null; + this._currentTransform = null; + // reset the target information about which corner is selected + target && (target.__corner = 0); + if (shouldRender) { + this.requestRenderAll(); } - target.isMoving = false; - } - // if we are ending up a transform on a different control or a new object - // fire the original mouse up from the corner that started the transform - if (transform && (transform.target !== target || transform.corner !== corner)) { - var originalControl = transform.target && transform.target.controls[transform.corner], - originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); - pointer = pointer || this.getPointer(e); - originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); - } - this._setCursorFromEvent(e, target); - this._handleEvent(e, 'up', LEFT_CLICK, isClick); - this._groupSelector = null; - this._currentTransform = null; - // reset the target information about which corner is selected - target && (target.__corner = 0); - if (shouldRender) { - this.requestRenderAll(); - } - else if (!isClick) { - this.renderTop(); - } - }, + else if (!isClick) { + this.renderTop(); + } + }, - /** + /** * @private * Handle event firing for target and subtargets * @param {Event} e event from mouse * @param {String} eventType event to fire (up, down or move) * @return {Fabric.Object} target return the the target found, for internal reasons. */ - _simpleEventHandler: function(eventType, e) { - var target = this.findTarget(e), - targets = this.targets, - options = { - e: e, - target: target, - subTargets: targets, - }; - this.fire(eventType, options); - target && target.fire(eventType, options); - if (!targets) { + _simpleEventHandler: function(eventType, e) { + var target = this.findTarget(e), + targets = this.targets, + options = { + e: e, + target: target, + subTargets: targets, + }; + this.fire(eventType, options); + target && target.fire(eventType, options); + if (!targets) { + return target; + } + for (var i = 0; i < targets.length; i++) { + targets[i].fire(eventType, options); + } return target; - } - for (var i = 0; i < targets.length; i++) { - targets[i].fire(eventType, options); - } - return target; - }, + }, - /** + /** * @private * Handle event firing for target and subtargets * @param {Event} e event from mouse @@ -539,94 +542,94 @@ fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prot * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. */ - _handleEvent: function(e, eventType, button, isClick) { - var target = this._target, - targets = this.targets || [], - options = { - e: e, - target: target, - subTargets: targets, - button: button || LEFT_CLICK, - isClick: isClick || false, - pointer: this._pointer, - absolutePointer: this._absolutePointer, - transform: this._currentTransform - }; - if (eventType === 'up') { - options.currentTarget = this.findTarget(e); - options.currentSubTargets = this.targets; - } - this.fire('mouse:' + eventType, options); - target && target.fire('mouse' + eventType, options); - for (var i = 0; i < targets.length; i++) { - targets[i].fire('mouse' + eventType, options); - } - }, + _handleEvent: function(e, eventType, button, isClick) { + var target = this._target, + targets = this.targets || [], + options = { + e: e, + target: target, + subTargets: targets, + button: button || LEFT_CLICK, + isClick: isClick || false, + pointer: this._pointer, + absolutePointer: this._absolutePointer, + transform: this._currentTransform + }; + if (eventType === 'up') { + options.currentTarget = this.findTarget(e); + options.currentSubTargets = this.targets; + } + this.fire('mouse:' + eventType, options); + target && target.fire('mouse' + eventType, options); + for (var i = 0; i < targets.length; i++) { + targets[i].fire('mouse' + eventType, options); + } + }, - /** + /** * @private * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event */ - _finalizeCurrentTransform: function(e) { + _finalizeCurrentTransform: function(e) { - var transform = this._currentTransform, - target = transform.target, - options = { - e: e, - target: target, - transform: transform, - action: transform.action, - }; + var transform = this._currentTransform, + target = transform.target, + options = { + e: e, + target: target, + transform: transform, + action: transform.action, + }; - if (target._scaling) { - target._scaling = false; - } + if (target._scaling) { + target._scaling = false; + } - target.setCoords(); + target.setCoords(); - if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { - this._fire('modified', options); - } - }, + if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { + this._fire('modified', options); + } + }, - /** + /** * @private * @param {Event} e Event object fired on mousedown */ - _onMouseDownInDrawingMode: function(e) { - this._isCurrentlyDrawing = true; - if (this.getActiveObject()) { - this.discardActiveObject(e).requestRenderAll(); - } - var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); - this._handleEvent(e, 'down'); - }, + _onMouseDownInDrawingMode: function(e) { + this._isCurrentlyDrawing = true; + if (this.getActiveObject()) { + this.discardActiveObject(e).requestRenderAll(); + } + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); + this._handleEvent(e, 'down'); + }, - /** + /** * @private * @param {Event} e Event object fired on mousemove */ - _onMouseMoveInDrawingMode: function(e) { - if (this._isCurrentlyDrawing) { - var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); - } - this.setCursor(this.freeDrawingCursor); - this._handleEvent(e, 'move'); - }, + _onMouseMoveInDrawingMode: function(e) { + if (this._isCurrentlyDrawing) { + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); + } + this.setCursor(this.freeDrawingCursor); + this._handleEvent(e, 'move'); + }, - /** + /** * @private * @param {Event} e Event object fired on mouseup */ - _onMouseUpInDrawingMode: function(e) { - var pointer = this.getPointer(e); - this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); - this._handleEvent(e, 'up'); - }, + _onMouseUpInDrawingMode: function(e) { + var pointer = this.getPointer(e); + this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); + this._handleEvent(e, 'up'); + }, - /** + /** * Method that defines the actions when mouse is clicked on canvas. * The method inits the currentTransform parameters and renders all the * canvas so the current image can be placed on the top canvas and the rest @@ -634,127 +637,127 @@ fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prot * @private * @param {Event} e Event object fired on mousedown */ - __onMouseDown: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'down:before'); - var target = this._target; - // if right click just fire events - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'down', RIGHT_CLICK); + __onMouseDown: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'down:before'); + var target = this._target; + // if right click just fire events + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'down', RIGHT_CLICK); + } + return; } - return; - } - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'down', MIDDLE_CLICK); + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'down', MIDDLE_CLICK); + } + return; } - return; - } - if (this.isDrawingMode) { - this._onMouseDownInDrawingMode(e); - return; - } + if (this.isDrawingMode) { + this._onMouseDownInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } + if (!this._isMainEvent(e)) { + return; + } - // ignore if some object is being transformed at this moment - if (this._currentTransform) { - return; - } + // ignore if some object is being transformed at this moment + if (this._currentTransform) { + return; + } - var pointer = this._pointer; - // save pointer for check in __onMouseUp event - this._previousPointer = pointer; - var shouldRender = this._shouldRender(target), - shouldGroup = this._shouldGroup(e, target); - if (this._shouldClearSelection(e, target)) { - this.discardActiveObject(e); - } - else if (shouldGroup) { - this._handleGrouping(e, target); - target = this._activeObject; - } + var pointer = this._pointer; + // save pointer for check in __onMouseUp event + this._previousPointer = pointer; + var shouldRender = this._shouldRender(target), + shouldGroup = this._shouldGroup(e, target); + if (this._shouldClearSelection(e, target)) { + this.discardActiveObject(e); + } + else if (shouldGroup) { + this._handleGrouping(e, target); + target = this._activeObject; + } - if (this.selection && (!target || + if (this.selection && (!target || (!target.selectable && !target.isEditing && target !== this._activeObject))) { - this._groupSelector = { - ex: this._absolutePointer.x, - ey: this._absolutePointer.y, - top: 0, - left: 0 - }; - } + this._groupSelector = { + ex: this._absolutePointer.x, + ey: this._absolutePointer.y, + top: 0, + left: 0 + }; + } - if (target) { - var alreadySelected = target === this._activeObject; - if (target.selectable && target.activeOn === 'down') { - this.setActiveObject(target, e); - } - var corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) - ); - target.__corner = corner; - if (target === this._activeObject && (corner || !shouldGroup)) { - this._setupCurrentTransform(e, target, alreadySelected); - var control = target.controls[corner], - pointer = this.getPointer(e), - mouseDownHandler = control && control.getMouseDownHandler(e, target, control); - if (mouseDownHandler) { - mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); + if (target) { + var alreadySelected = target === this._activeObject; + if (target.selectable && target.activeOn === 'down') { + this.setActiveObject(target, e); + } + var corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + target.__corner = corner; + if (target === this._activeObject && (corner || !shouldGroup)) { + this._setupCurrentTransform(e, target, alreadySelected); + var control = target.controls[corner], + pointer = this.getPointer(e), + mouseDownHandler = control && control.getMouseDownHandler(e, target, control); + if (mouseDownHandler) { + mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); + } } } - } - var invalidate = shouldRender || shouldGroup; - // we clear `_objectsToRender` in case of a change in order to repopulate it at rendering - // run before firing the `down` event to give the dev a chance to populate it themselves - invalidate && (this._objectsToRender = undefined); - this._handleEvent(e, 'down'); - // we must renderAll so that we update the visuals - invalidate && this.requestRenderAll(); - }, - - /** + var invalidate = shouldRender || shouldGroup; + // we clear `_objectsToRender` in case of a change in order to repopulate it at rendering + // run before firing the `down` event to give the dev a chance to populate it themselves + invalidate && (this._objectsToRender = undefined); + this._handleEvent(e, 'down'); + // we must renderAll so that we update the visuals + invalidate && this.requestRenderAll(); + }, + + /** * reset cache form common information needed during event processing * @private */ - _resetTransformEventData: function() { - this._target = null; - this._pointer = null; - this._absolutePointer = null; - }, + _resetTransformEventData: function() { + this._target = null; + this._pointer = null; + this._absolutePointer = null; + }, - /** + /** * Cache common information needed during event processing * @private * @param {Event} e Event object fired on event */ - _cacheTransformEventData: function(e) { - // reset in order to avoid stale caching - this._resetTransformEventData(); - this._pointer = this.getPointer(e, true); - this._absolutePointer = this.restorePointerVpt(this._pointer); - this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; - }, + _cacheTransformEventData: function(e) { + // reset in order to avoid stale caching + this._resetTransformEventData(); + this._pointer = this.getPointer(e, true); + this._absolutePointer = this.restorePointerVpt(this._pointer); + this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; + }, - /** + /** * @private */ - _beforeTransform: function(e) { - var t = this._currentTransform; - this.stateful && t.target.saveState(); - this.fire('before:transform', { - e: e, - transform: t, - }); - }, + _beforeTransform: function(e) { + var t = this._currentTransform; + this.stateful && t.target.saveState(); + this.fire('before:transform', { + e: e, + transform: t, + }); + }, - /** + /** * Method that defines the actions when mouse is hovering the canvas. * The currentTransform parameter will define whether the user is rotating/scaling/translating * an image or neither of them (only hovering). A group selection is also possible and would cancel @@ -763,99 +766,99 @@ fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prot * @private * @param {Event} e Event object fired on mousemove */ - __onMouseMove: function (e) { - this._handleEvent(e, 'move:before'); - this._cacheTransformEventData(e); - var target, pointer; + __onMouseMove: function (e) { + this._handleEvent(e, 'move:before'); + this._cacheTransformEventData(e); + var target, pointer; - if (this.isDrawingMode) { - this._onMouseMoveInDrawingMode(e); - return; - } + if (this.isDrawingMode) { + this._onMouseMoveInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } + if (!this._isMainEvent(e)) { + return; + } - var groupSelector = this._groupSelector; + var groupSelector = this._groupSelector; - // We initially clicked in an empty area, so we draw a box for multiple selection - if (groupSelector) { - pointer = this._absolutePointer; + // We initially clicked in an empty area, so we draw a box for multiple selection + if (groupSelector) { + pointer = this._absolutePointer; - groupSelector.left = pointer.x - groupSelector.ex; - groupSelector.top = pointer.y - groupSelector.ey; + groupSelector.left = pointer.x - groupSelector.ex; + groupSelector.top = pointer.y - groupSelector.ey; - this.renderTop(); - } - else if (!this._currentTransform) { - target = this.findTarget(e) || null; - this._setCursorFromEvent(e, target); - this._fireOverOutEvents(target, e); - } - else { - this._transformObject(e); - } - this._handleEvent(e, 'move'); - this._resetTransformEventData(); - }, + this.renderTop(); + } + else if (!this._currentTransform) { + target = this.findTarget(e) || null; + this._setCursorFromEvent(e, target); + this._fireOverOutEvents(target, e); + } + else { + this._transformObject(e); + } + this._handleEvent(e, 'move'); + this._resetTransformEventData(); + }, - /** + /** * Manage the mouseout, mouseover events for the fabric object on the canvas * @param {Fabric.Object} target the target where the target from the mousemove event * @param {Event} e Event object fired on mousemove * @private */ - _fireOverOutEvents: function(target, e) { - var _hoveredTarget = this._hoveredTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); - - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _hoveredTarget, - evtOut: 'mouseout', - canvasEvtOut: 'mouse:out', - evtIn: 'mouseover', - canvasEvtIn: 'mouse:over', - }); - for (var i = 0; i < length; i++){ - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], + _fireOverOutEvents: function(target, e) { + var _hoveredTarget = this._hoveredTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); + + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _hoveredTarget, evtOut: 'mouseout', + canvasEvtOut: 'mouse:out', evtIn: 'mouseover', + canvasEvtIn: 'mouse:over', }); - } - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - }, + for (var i = 0; i < length; i++){ + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], + evtOut: 'mouseout', + evtIn: 'mouseover', + }); + } + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + }, - /** + /** * Manage the dragEnter, dragLeave events for the fabric objects on the canvas * @param {Fabric.Object} target the target where the target from the onDrag event * @param {Event} e Event object fired on ondrag * @private */ - _fireEnterLeaveEvents: function(target, e) { - var _draggedoverTarget = this._draggedoverTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); + _fireEnterLeaveEvents: function(target, e) { + var _draggedoverTarget = this._draggedoverTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _draggedoverTarget, - evtOut: 'dragleave', - evtIn: 'dragenter', - }); - for (var i = 0; i < length; i++) { - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _draggedoverTarget, evtOut: 'dragleave', evtIn: 'dragenter', }); - } - this._draggedoverTarget = target; - }, + for (var i = 0; i < length; i++) { + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], + evtOut: 'dragleave', + evtIn: 'dragenter', + }); + } + this._draggedoverTarget = target; + }, - /** + /** * Manage the synthetic in/out events for the fabric objects on the canvas * @param {Fabric.Object} target the target where the target from the supported events * @param {Event} e Event object fired @@ -867,125 +870,126 @@ fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prot * @param {String} config.evtIn name of the event to fire for in * @private */ - fireSyntheticInOutEvents: function(target, e, config) { - var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, - targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; - if (targetChanged) { - inOpt = { e: e, target: target, previousTarget: oldTarget }; - outOpt = { e: e, target: oldTarget, nextTarget: target }; - } - inFires = target && targetChanged; - outFires = oldTarget && targetChanged; - if (outFires) { - canvasEvtOut && this.fire(canvasEvtOut, outOpt); - oldTarget.fire(config.evtOut, outOpt); - } - if (inFires) { - canvasEvtIn && this.fire(canvasEvtIn, inOpt); - target.fire(config.evtIn, inOpt); - } - }, + fireSyntheticInOutEvents: function(target, e, config) { + var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, + targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; + if (targetChanged) { + inOpt = { e: e, target: target, previousTarget: oldTarget }; + outOpt = { e: e, target: oldTarget, nextTarget: target }; + } + inFires = target && targetChanged; + outFires = oldTarget && targetChanged; + if (outFires) { + canvasEvtOut && this.fire(canvasEvtOut, outOpt); + oldTarget.fire(config.evtOut, outOpt); + } + if (inFires) { + canvasEvtIn && this.fire(canvasEvtIn, inOpt); + target.fire(config.evtIn, inOpt); + } + }, - /** + /** * Method that defines actions when an Event Mouse Wheel * @param {Event} e Event object fired on mouseup */ - __onMouseWheel: function(e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'wheel'); - this._resetTransformEventData(); - }, + __onMouseWheel: function(e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'wheel'); + this._resetTransformEventData(); + }, - /** + /** * @private * @param {Event} e Event fired on mousemove */ - _transformObject: function(e) { - var pointer = this.getPointer(e), - transform = this._currentTransform, - target = transform.target, - // transform pointer to target's containing coordinate plane - // both pointer and object should agree on every point - localPointer = target.group ? - fabric.util.sendPointToPlane(pointer, null, target.group.calcTransformMatrix()) : - pointer; + _transformObject: function(e) { + var pointer = this.getPointer(e), + transform = this._currentTransform, + target = transform.target, + // transform pointer to target's containing coordinate plane + // both pointer and object should agree on every point + localPointer = target.group ? + fabric.util.sendPointToPlane(pointer, null, target.group.calcTransformMatrix()) : + pointer; - transform.reset = false; - transform.shiftKey = e.shiftKey; - transform.altKey = e[this.centeredKey]; + transform.reset = false; + transform.shiftKey = e.shiftKey; + transform.altKey = e[this.centeredKey]; - this._performTransformAction(e, transform, localPointer); - transform.actionPerformed && this.requestRenderAll(); - }, + this._performTransformAction(e, transform, localPointer); + transform.actionPerformed && this.requestRenderAll(); + }, - /** + /** * @private */ - _performTransformAction: function(e, transform, pointer) { - var x = pointer.x, - y = pointer.y, - action = transform.action, - actionPerformed = false, - actionHandler = transform.actionHandler; - // this object could be created from the function in the control handlers + _performTransformAction: function(e, transform, pointer) { + var x = pointer.x, + y = pointer.y, + action = transform.action, + actionPerformed = false, + actionHandler = transform.actionHandler; + // this object could be created from the function in the control handlers - if (actionHandler) { - actionPerformed = actionHandler(e, transform, x, y); - } - if (action === 'drag' && actionPerformed) { - transform.target.isMoving = true; - this.setCursor(transform.target.moveCursor || this.moveCursor); - } - transform.actionPerformed = transform.actionPerformed || actionPerformed; - }, + if (actionHandler) { + actionPerformed = actionHandler(e, transform, x, y); + } + if (action === 'drag' && actionPerformed) { + transform.target.isMoving = true; + this.setCursor(transform.target.moveCursor || this.moveCursor); + } + transform.actionPerformed = transform.actionPerformed || actionPerformed; + }, - /** + /** * @private */ - _fire: fabric.controlsUtils.fireEvent, + _fire: fabric.controlsUtils.fireEvent, - /** + /** * Sets the cursor depending on where the canvas is being hovered. * Note: very buggy in Opera * @param {Event} e Event object * @param {Object} target Object that the mouse is hovering, if so. */ - _setCursorFromEvent: function (e, target) { - if (!target) { - this.setCursor(this.defaultCursor); - return false; - } - var hoverCursor = target.hoverCursor || this.hoverCursor, - activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? - this._activeObject : null, - // only show proper corner when group selection is not active - corner = (!activeSelection || !activeSelection.contains(target)) + _setCursorFromEvent: function (e, target) { + if (!target) { + this.setCursor(this.defaultCursor); + return false; + } + var hoverCursor = target.hoverCursor || this.hoverCursor, + activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? + this._activeObject : null, + // only show proper corner when group selection is not active + corner = (!activeSelection || !activeSelection.contains(target)) // here we call findTargetCorner always with undefined for the touch parameter. // we assume that if you are using a cursor you do not need to interact with // the bigger touch area. && target._findTargetCorner(this.getPointer(e, true)); - if (!corner) { - if (target.subTargetCheck){ - // hoverCursor should come from top-most subTarget, - // so we walk the array backwards - this.targets.concat().reverse().map(function(_target){ - hoverCursor = _target.hoverCursor || hoverCursor; - }); + if (!corner) { + if (target.subTargetCheck){ + // hoverCursor should come from top-most subTarget, + // so we walk the array backwards + this.targets.concat().reverse().map(function(_target){ + hoverCursor = _target.hoverCursor || hoverCursor; + }); + } + this.setCursor(hoverCursor); } - this.setCursor(hoverCursor); - } - else { - this.setCursor(this.getCornerCursor(corner, target, e)); - } - }, + else { + this.setCursor(this.getCornerCursor(corner, target, e)); + } + }, - /** + /** * @private */ - getCornerCursor: function(corner, target, e) { - var control = target.controls[corner]; - return control.cursorStyleHandler(e, control, target); - } -}); + getCornerCursor: function(corner, target, e) { + var control = target.controls[corner]; + return control.cursorStyleHandler(e, control, target); + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/canvas_gestures.mixin.js b/src/mixins/canvas_gestures.mixin.js index cfcac8e462a..f74b83ac687 100644 --- a/src/mixins/canvas_gestures.mixin.js +++ b/src/mixins/canvas_gestures.mixin.js @@ -7,141 +7,143 @@ * - touch:shake * - touch:longpress */ +(function(global) { -var degreesToRadians = fabric.util.degreesToRadians, - radiansToDegrees = fabric.util.radiansToDegrees; + var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians, + radiansToDegrees = fabric.util.radiansToDegrees; -fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + /** * Method that defines actions when an Event.js gesture is detected on an object. Currently only supports * 2 finger gestures. * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onTransformGesture: function(e, self) { + __onTransformGesture: function(e, self) { - if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) { - return; - } + if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) { + return; + } - var target = this.findTarget(e); - if ('undefined' !== typeof target) { - this.__gesturesParams = { - e: e, - self: self, - target: target - }; + var target = this.findTarget(e); + if ('undefined' !== typeof target) { + this.__gesturesParams = { + e: e, + self: self, + target: target + }; - this.__gesturesRenderer(); - } + this.__gesturesRenderer(); + } - this.fire('touch:gesture', { - target: target, e: e, self: self - }); - }, - __gesturesParams: null, - __gesturesRenderer: function() { + this.fire('touch:gesture', { + target: target, e: e, self: self + }); + }, + __gesturesParams: null, + __gesturesRenderer: function() { - if (this.__gesturesParams === null || this._currentTransform === null) { - return; - } + if (this.__gesturesParams === null || this._currentTransform === null) { + return; + } - var self = this.__gesturesParams.self, - t = this._currentTransform, - e = this.__gesturesParams.e; + var self = this.__gesturesParams.self, + t = this._currentTransform, + e = this.__gesturesParams.e; - t.action = 'scale'; - t.originX = t.originY = 'center'; + t.action = 'scale'; + t.originX = t.originY = 'center'; - this._scaleObjectBy(self.scale, e); + this._scaleObjectBy(self.scale, e); - if (self.rotation !== 0) { - t.action = 'rotate'; - this._rotateObjectByAngle(self.rotation, e); - } + if (self.rotation !== 0) { + t.action = 'rotate'; + this._rotateObjectByAngle(self.rotation, e); + } - this.requestRenderAll(); + this.requestRenderAll(); - t.action = 'drag'; - }, + t.action = 'drag'; + }, - /** + /** * Method that defines actions when an Event.js drag is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onDrag: function(e, self) { - this.fire('touch:drag', { - e: e, self: self - }); - }, + __onDrag: function(e, self) { + this.fire('touch:drag', { + e: e, self: self + }); + }, - /** + /** * Method that defines actions when an Event.js orientation event is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onOrientationChange: function(e, self) { - this.fire('touch:orientation', { - e: e, self: self - }); - }, + __onOrientationChange: function(e, self) { + this.fire('touch:orientation', { + e: e, self: self + }); + }, - /** + /** * Method that defines actions when an Event.js shake event is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onShake: function(e, self) { - this.fire('touch:shake', { - e: e, self: self - }); - }, + __onShake: function(e, self) { + this.fire('touch:shake', { + e: e, self: self + }); + }, - /** + /** * Method that defines actions when an Event.js longpress event is detected. * * @param {Event} e Event object by Event.js * @param {Event} self Event proxy object by Event.js */ - __onLongPress: function(e, self) { - this.fire('touch:longpress', { - e: e, self: self - }); - }, + __onLongPress: function(e, self) { + this.fire('touch:longpress', { + e: e, self: self + }); + }, - /** + /** * Scales an object by a factor * @param {Number} s The scale factor to apply to the current scale level * @param {Event} e Event object by Event.js */ - _scaleObjectBy: function(s, e) { - var t = this._currentTransform, - target = t.target; - t.gestureScale = s; - target._scaling = true; - return fabric.controlsUtils.scalingEqually(e, t, 0, 0); - }, - - /** + _scaleObjectBy: function(s, e) { + var t = this._currentTransform, + target = t.target; + t.gestureScale = s; + target._scaling = true; + return fabric.controlsUtils.scalingEqually(e, t, 0, 0); + }, + + /** * Rotates object by an angle * @param {Number} curAngle The angle of rotation in degrees * @param {Event} e Event object by Event.js */ - _rotateObjectByAngle: function(curAngle, e) { - var t = this._currentTransform; - - if (t.target.get('lockRotation')) { - return; + _rotateObjectByAngle: function(curAngle, e) { + var t = this._currentTransform; + + if (t.target.get('lockRotation')) { + return; + } + t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta)); + this._fire('rotating', { + target: t.target, + e: e, + transform: t, + }); } - t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta)); - this._fire('rotating', { - target: t.target, - e: e, - transform: t, - }); - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/canvas_grouping.mixin.js b/src/mixins/canvas_grouping.mixin.js index 63c73331aa0..ca655a0b1d9 100644 --- a/src/mixins/canvas_grouping.mixin.js +++ b/src/mixins/canvas_grouping.mixin.js @@ -1,18 +1,21 @@ -var min = Math.min, - max = Math.max; +(function(global) { -fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + var fabric = global.fabric, + min = Math.min, + max = Math.max; - /** + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + + /** * @private * @param {Event} e Event object * @param {fabric.Object} target * @return {Boolean} */ - _shouldGroup: function(e, target) { - var activeObject = this._activeObject; - // check if an active object exists on canvas and if the user is pressing the `selectionKey` while canvas supports multi selection. - return !!activeObject && this._isSelectionKeyPressed(e) && this.selection + _shouldGroup: function(e, target) { + var activeObject = this._activeObject; + // check if an active object exists on canvas and if the user is pressing the `selectionKey` while canvas supports multi selection. + return !!activeObject && this._isSelectionKeyPressed(e) && this.selection // on top of that the user also has to hit a target that is selectable. && !!target && target.selectable // if all pre-requisite pass, the target is either something different from the current @@ -24,163 +27,165 @@ fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prot && !target.isDescendantOf(activeObject) && !activeObject.isDescendantOf(target) // target accepts selection && !target.onSelect({ e: e }); - }, + }, - /** + /** * @private * @param {Event} e Event object * @param {fabric.Object} target */ - _handleGrouping: function (e, target) { - var activeObject = this._activeObject; - // avoid multi select when shift click on a corner - if (activeObject.__corner) { - return; - } - if (target === activeObject) { - // if it's a group, find target again, using activeGroup objects - target = this.findTarget(e, true); - // if even object is not found or we are on activeObjectCorner, bail out - if (!target || !target.selectable) { + _handleGrouping: function (e, target) { + var activeObject = this._activeObject; + // avoid multi select when shift click on a corner + if (activeObject.__corner) { return; } - } - if (activeObject && activeObject.type === 'activeSelection') { - this._updateActiveSelection(target, e); - } - else { - this._createActiveSelection(target, e); - } - }, + if (target === activeObject) { + // if it's a group, find target again, using activeGroup objects + target = this.findTarget(e, true); + // if even object is not found or we are on activeObjectCorner, bail out + if (!target || !target.selectable) { + return; + } + } + if (activeObject && activeObject.type === 'activeSelection') { + this._updateActiveSelection(target, e); + } + else { + this._createActiveSelection(target, e); + } + }, - /** + /** * @private */ - _updateActiveSelection: function(target, e) { - var activeSelection = this._activeObject, - currentActiveObjects = activeSelection._objects.slice(0); - if (target.group === activeSelection) { - activeSelection.remove(target); - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - if (activeSelection.size() === 1) { - // activate last remaining object - this._setActiveObject(activeSelection.item(0), e); + _updateActiveSelection: function(target, e) { + var activeSelection = this._activeObject, + currentActiveObjects = activeSelection._objects.slice(0); + if (target.group === activeSelection) { + activeSelection.remove(target); + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + if (activeSelection.size() === 1) { + // activate last remaining object + this._setActiveObject(activeSelection.item(0), e); + } } - } - else { - activeSelection.add(target); - this._hoveredTarget = activeSelection; - this._hoveredTargets = this.targets.concat(); - } - this._fireSelectionEvents(currentActiveObjects, e); - }, + else { + activeSelection.add(target); + this._hoveredTarget = activeSelection; + this._hoveredTargets = this.targets.concat(); + } + this._fireSelectionEvents(currentActiveObjects, e); + }, - /** + /** * @private */ - _createActiveSelection: function(target, e) { - var currentActives = this.getActiveObjects(), group = this._createGroup(target); - this._hoveredTarget = group; - // ISSUE 4115: should we consider subTargets here? - // this._hoveredTargets = []; - // this._hoveredTargets = this.targets.concat(); - this._setActiveObject(group, e); - this._fireSelectionEvents(currentActives, e); - }, - - - /** + _createActiveSelection: function(target, e) { + var currentActives = this.getActiveObjects(), group = this._createGroup(target); + this._hoveredTarget = group; + // ISSUE 4115: should we consider subTargets here? + // this._hoveredTargets = []; + // this._hoveredTargets = this.targets.concat(); + this._setActiveObject(group, e); + this._fireSelectionEvents(currentActives, e); + }, + + + /** * @private * @param {Object} target * @returns {fabric.ActiveSelection} */ - _createGroup: function(target) { - var activeObject = this._activeObject; - var groupObjects = target.isInFrontOf(activeObject) ? - [activeObject, target] : - [target, activeObject]; - activeObject.isEditing && activeObject.exitEditing(); - // handle case: target is nested - return new fabric.ActiveSelection(groupObjects, { - canvas: this - }); - }, - - /** + _createGroup: function(target) { + var activeObject = this._activeObject; + var groupObjects = target.isInFrontOf(activeObject) ? + [activeObject, target] : + [target, activeObject]; + activeObject.isEditing && activeObject.exitEditing(); + // handle case: target is nested + return new fabric.ActiveSelection(groupObjects, { + canvas: this + }); + }, + + /** * @private * @param {Event} e mouse event */ - _groupSelectedObjects: function (e) { + _groupSelectedObjects: function (e) { - var group = this._collectObjects(e), - aGroup; + var group = this._collectObjects(e), + aGroup; - // do not create group for 1 element only - if (group.length === 1) { - this.setActiveObject(group[0], e); - } - else if (group.length > 1) { - aGroup = new fabric.ActiveSelection(group.reverse(), { - canvas: this - }); - this.setActiveObject(aGroup, e); - } - }, + // do not create group for 1 element only + if (group.length === 1) { + this.setActiveObject(group[0], e); + } + else if (group.length > 1) { + aGroup = new fabric.ActiveSelection(group.reverse(), { + canvas: this + }); + this.setActiveObject(aGroup, e); + } + }, - /** + /** * @private */ - _collectObjects: function(e) { - var group = [], - currentObject, - x1 = this._groupSelector.ex, - y1 = this._groupSelector.ey, - x2 = x1 + this._groupSelector.left, - y2 = y1 + this._groupSelector.top, - selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), - selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), - allowIntersect = !this.selectionFullyContained, - isClick = x1 === x2 && y1 === y2; - // we iterate reverse order to collect top first in case of click. - for (var i = this._objects.length; i--; ) { - currentObject = this._objects[i]; - - if (!currentObject || !currentObject.selectable || !currentObject.visible) { - continue; - } + _collectObjects: function(e) { + var group = [], + currentObject, + x1 = this._groupSelector.ex, + y1 = this._groupSelector.ey, + x2 = x1 + this._groupSelector.left, + y2 = y1 + this._groupSelector.top, + selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), + selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), + allowIntersect = !this.selectionFullyContained, + isClick = x1 === x2 && y1 === y2; + // we iterate reverse order to collect top first in case of click. + for (var i = this._objects.length; i--; ) { + currentObject = this._objects[i]; + + if (!currentObject || !currentObject.selectable || !currentObject.visible) { + continue; + } - if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || + if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) || (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) || (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true)) - ) { - group.push(currentObject); - // only add one object if it's a click - if (isClick) { - break; + ) { + group.push(currentObject); + // only add one object if it's a click + if (isClick) { + break; + } } } - } - if (group.length > 1) { - group = group.filter(function(object) { - return !object.onSelect({ e: e }); - }); - } + if (group.length > 1) { + group = group.filter(function(object) { + return !object.onSelect({ e: e }); + }); + } - return group; - }, + return group; + }, - /** + /** * @private */ - _maybeGroupObjects: function(e) { - if (this.selection && this._groupSelector) { - this._groupSelectedObjects(e); + _maybeGroupObjects: function(e) { + if (this.selection && this._groupSelector) { + this._groupSelectedObjects(e); + } + this.setCursor(this.defaultCursor); + // clear selection and current transformation + this._groupSelector = null; } - this.setCursor(this.defaultCursor); - // clear selection and current transformation - this._groupSelector = null; - } -}); + }); + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/canvas_serialization.mixin.js b/src/mixins/canvas_serialization.mixin.js index e3496d51d73..b5ae8fff9b5 100644 --- a/src/mixins/canvas_serialization.mixin.js +++ b/src/mixins/canvas_serialization.mixin.js @@ -1,116 +1,119 @@ -fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Populates canvas with data from the specified JSON. - * JSON format must conform to the one of {@link fabric.Canvas#toJSON} - * @param {String|Object} json JSON string or object - * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. - * @return {Promise} instance - * @chainable - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} - * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo} - * @example loadFromJSON - * canvas.loadFromJSON(json).then((canvas) => canvas.requestRenderAll()); - * @example loadFromJSON with reviver - * canvas.loadFromJSON(json, function(o, object) { - * // `o` = json object - * // `object` = fabric.Object instance - * // ... do some stuff ... - * }).then((canvas) => { - * ... canvas is restored, add your code. - * }); - */ - loadFromJSON: function (json, reviver) { - if (!json) { - return; - } +(function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + /** + * Populates canvas with data from the specified JSON. + * JSON format must conform to the one of {@link fabric.Canvas#toJSON} + * @param {String|Object} json JSON string or object + * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. + * @return {Promise} instance + * @chainable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} + * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo} + * @example loadFromJSON + * canvas.loadFromJSON(json).then((canvas) => canvas.requestRenderAll()); + * @example loadFromJSON with reviver + * canvas.loadFromJSON(json, function(o, object) { + * // `o` = json object + * // `object` = fabric.Object instance + * // ... do some stuff ... + * }).then((canvas) => { + * ... canvas is restored, add your code. + * }); + */ + loadFromJSON: function (json, reviver) { + if (!json) { + return; + } - // serialize if it wasn't already - var serialized = (typeof json === 'string') - ? JSON.parse(json) - : Object.assign({}, json); + // serialize if it wasn't already + var serialized = (typeof json === 'string') + ? JSON.parse(json) + : Object.assign({}, json); - var _this = this, - renderOnAddRemove = this.renderOnAddRemove; + var _this = this, + renderOnAddRemove = this.renderOnAddRemove; - this.renderOnAddRemove = false; + this.renderOnAddRemove = false; - return fabric.util.enlivenObjects(serialized.objects || [], '', reviver) - .then(function(enlived) { - _this.clear(); - return fabric.util.enlivenObjectEnlivables({ - backgroundImage: serialized.backgroundImage, - backgroundColor: serialized.background, - overlayImage: serialized.overlayImage, - overlayColor: serialized.overlay, - clipPath: serialized.clipPath, - }) - .then(function(enlivedMap) { - _this.__setupCanvas(serialized, enlived, renderOnAddRemove); - _this.set(enlivedMap); - return _this; - }); - }); - }, + return fabric.util.enlivenObjects(serialized.objects || [], '', reviver) + .then(function(enlived) { + _this.clear(); + return fabric.util.enlivenObjectEnlivables({ + backgroundImage: serialized.backgroundImage, + backgroundColor: serialized.background, + overlayImage: serialized.overlayImage, + overlayColor: serialized.overlay, + clipPath: serialized.clipPath, + }) + .then(function(enlivedMap) { + _this.__setupCanvas(serialized, enlived, renderOnAddRemove); + _this.set(enlivedMap); + return _this; + }); + }); + }, - /** - * @private - * @param {Object} serialized Object with background and overlay information - * @param {Array} enlivenedObjects canvas objects - * @param {boolean} renderOnAddRemove renderOnAddRemove setting for the canvas - */ - __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove) { - var _this = this; - enlivenedObjects.forEach(function(obj, index) { - // we splice the array just in case some custom classes restored from JSON - // will add more object to canvas at canvas init. - _this.insertAt(obj, index); - }); - this.renderOnAddRemove = renderOnAddRemove; - // remove parts i cannot set as options - delete serialized.objects; - delete serialized.backgroundImage; - delete serialized.overlayImage; - delete serialized.background; - delete serialized.overlay; - // this._initOptions does too many things to just - // call it. Normally loading an Object from JSON - // create the Object instance. Here the Canvas is - // already an instance and we are just loading things over it - this._setOptions(serialized); - }, + /** + * @private + * @param {Object} serialized Object with background and overlay information + * @param {Array} enlivenedObjects canvas objects + * @param {boolean} renderOnAddRemove renderOnAddRemove setting for the canvas + */ + __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove) { + var _this = this; + enlivenedObjects.forEach(function(obj, index) { + // we splice the array just in case some custom classes restored from JSON + // will add more object to canvas at canvas init. + _this.insertAt(obj, index); + }); + this.renderOnAddRemove = renderOnAddRemove; + // remove parts i cannot set as options + delete serialized.objects; + delete serialized.backgroundImage; + delete serialized.overlayImage; + delete serialized.background; + delete serialized.overlay; + // this._initOptions does too many things to just + // call it. Normally loading an Object from JSON + // create the Object instance. Here the Canvas is + // already an instance and we are just loading things over it + this._setOptions(serialized); + }, - /** - * Clones canvas instance - * @param {Array} [properties] Array of properties to include in the cloned canvas and children - * @returns {Promise} - */ - clone: function (properties) { - var data = JSON.stringify(this.toJSON(properties)); - return this.cloneWithoutData().then(function(clone) { - return clone.loadFromJSON(data); - }); - }, + /** + * Clones canvas instance + * @param {Array} [properties] Array of properties to include in the cloned canvas and children + * @returns {Promise} + */ + clone: function (properties) { + var data = JSON.stringify(this.toJSON(properties)); + return this.cloneWithoutData().then(function(clone) { + return clone.loadFromJSON(data); + }); + }, - /** - * Clones canvas instance without cloning existing data. - * This essentially copies canvas dimensions, clipping properties, etc. - * but leaves data empty (so that you can populate it with your own) - * @returns {Promise} - */ - cloneWithoutData: function() { - var el = fabric.util.createCanvasElement(); + /** + * Clones canvas instance without cloning existing data. + * This essentially copies canvas dimensions, clipping properties, etc. + * but leaves data empty (so that you can populate it with your own) + * @returns {Promise} + */ + cloneWithoutData: function() { + var el = fabric.util.createCanvasElement(); - el.width = this.width; - el.height = this.height; - // this seems wrong. either Canvas or StaticCanvas - var clone = new fabric.Canvas(el); - var data = {}; - if (this.backgroundImage) { - data.backgroundImage = this.backgroundImage.toObject(); - } - if (this.backgroundColor) { - data.background = this.backgroundColor.toObject ? this.backgroundColor.toObject() : this.backgroundColor; + el.width = this.width; + el.height = this.height; + // this seems wrong. either Canvas or StaticCanvas + var clone = new fabric.Canvas(el); + var data = {}; + if (this.backgroundImage) { + data.backgroundImage = this.backgroundImage.toObject(); + } + if (this.backgroundColor) { + data.background = this.backgroundColor.toObject ? this.backgroundColor.toObject() : this.backgroundColor; + } + return clone.loadFromJSON(data); } - return clone.loadFromJSON(data); - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/collection.mixin.js b/src/mixins/collection.mixin.js index 252ca8c96ef..a403493858b 100644 --- a/src/mixins/collection.mixin.js +++ b/src/mixins/collection.mixin.js @@ -1,162 +1,165 @@ -/** - * @namespace fabric.Collection - */ -fabric.Collection = { - +(function(global){ + var fabric = global.fabric; /** - * @type {fabric.Object[]} + * @namespace fabric.Collection */ - _objects: [], + fabric.Collection = { - /** - * Adds objects to collection, Canvas or Group, then renders canvas - * (if `renderOnAddRemove` is not `false`). - * Objects should be instances of (or inherit from) fabric.Object - * @private - * @param {fabric.Object[]} objects to add - * @param {(object:fabric.Object) => any} [callback] - * @returns {number} new array length - */ - add: function (objects, callback) { - var size = this._objects.push.apply(this._objects, objects); - if (callback) { - for (var i = 0; i < objects.length; i++) { - callback.call(this, objects[i]); + /** + * @type {fabric.Object[]} + */ + _objects: [], + + /** + * Adds objects to collection, Canvas or Group, then renders canvas + * (if `renderOnAddRemove` is not `false`). + * Objects should be instances of (or inherit from) fabric.Object + * @private + * @param {fabric.Object[]} objects to add + * @param {(object:fabric.Object) => any} [callback] + * @returns {number} new array length + */ + add: function (objects, callback) { + var size = this._objects.push.apply(this._objects, objects); + if (callback) { + for (var i = 0; i < objects.length; i++) { + callback.call(this, objects[i]); + } } - } - return size; - }, + return size; + }, - /** - * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) - * An object should be an instance of (or inherit from) fabric.Object - * @private - * @param {fabric.Object|fabric.Object[]} objects Object(s) to insert - * @param {Number} index Index to insert object at - * @param {(object:fabric.Object) => any} [callback] - * @returns {number} new array length - */ - insertAt: function (objects, index, callback) { - var args = [index, 0].concat(objects); - this._objects.splice.apply(this._objects, args); - if (callback) { - for (var i = 2; i < args.length; i++) { - callback.call(this, args[i]); + /** + * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) + * An object should be an instance of (or inherit from) fabric.Object + * @private + * @param {fabric.Object|fabric.Object[]} objects Object(s) to insert + * @param {Number} index Index to insert object at + * @param {(object:fabric.Object) => any} [callback] + * @returns {number} new array length + */ + insertAt: function (objects, index, callback) { + var args = [index, 0].concat(objects); + this._objects.splice.apply(this._objects, args); + if (callback) { + for (var i = 2; i < args.length; i++) { + callback.call(this, args[i]); + } } - } - return this._objects.length; - }, + return this._objects.length; + }, - /** - * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) - * @private - * @param {fabric.Object[]} objectsToRemove objects to remove - * @param {(object:fabric.Object) => any} [callback] function to call for each object removed - * @returns {fabric.Object[]} removed objects - */ - remove: function(objectsToRemove, callback) { - var objects = this._objects, removed = []; - for (var i = 0, object, index; i < objectsToRemove.length; i++) { - object = objectsToRemove[i]; - index = objects.indexOf(object); - // only call onObjectRemoved if an object was actually removed - if (index !== -1) { - objects.splice(index, 1); - removed.push(object); - callback && callback.call(this, object); + /** + * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) + * @private + * @param {fabric.Object[]} objectsToRemove objects to remove + * @param {(object:fabric.Object) => any} [callback] function to call for each object removed + * @returns {fabric.Object[]} removed objects + */ + remove: function(objectsToRemove, callback) { + var objects = this._objects, removed = []; + for (var i = 0, object, index; i < objectsToRemove.length; i++) { + object = objectsToRemove[i]; + index = objects.indexOf(object); + // only call onObjectRemoved if an object was actually removed + if (index !== -1) { + objects.splice(index, 1); + removed.push(object); + callback && callback.call(this, object); + } } - } - return removed; - }, + return removed; + }, - /** - * Executes given function for each object in this group - * @param {Function} callback - * Callback invoked with current object as first argument, - * index - as second and an array of all objects - as third. - * Callback is invoked in a context of Global Object (e.g. `window`) - * when no `context` argument is given - * - * @param {Object} context Context (aka thisObject) - * @return {Self} thisArg - * @chainable - */ - forEachObject: function(callback, context) { - var objects = this.getObjects(); - for (var i = 0; i < objects.length; i++) { - callback.call(context, objects[i], i, objects); - } - return this; - }, + /** + * Executes given function for each object in this group + * @param {Function} callback + * Callback invoked with current object as first argument, + * index - as second and an array of all objects - as third. + * Callback is invoked in a context of Global Object (e.g. `window`) + * when no `context` argument is given + * + * @param {Object} context Context (aka thisObject) + * @return {Self} thisArg + * @chainable + */ + forEachObject: function(callback, context) { + var objects = this.getObjects(); + for (var i = 0; i < objects.length; i++) { + callback.call(context, objects[i], i, objects); + } + return this; + }, - /** - * Returns an array of children objects of this instance - * @param {...String} [types] When specified, only objects of these types are returned - * @return {Array} - */ - getObjects: function() { - if (arguments.length === 0) { - return this._objects.concat(); - } - var types = Array.from(arguments); - return this._objects.filter(function (o) { - return types.indexOf(o.type) > -1; - }); - }, + /** + * Returns an array of children objects of this instance + * @param {...String} [types] When specified, only objects of these types are returned + * @return {Array} + */ + getObjects: function() { + if (arguments.length === 0) { + return this._objects.concat(); + } + var types = Array.from(arguments); + return this._objects.filter(function (o) { + return types.indexOf(o.type) > -1; + }); + }, - /** - * Returns object at specified index - * @param {Number} index - * @return {Self} thisArg - */ - item: function (index) { - return this._objects[index]; - }, + /** + * Returns object at specified index + * @param {Number} index + * @return {Self} thisArg + */ + item: function (index) { + return this._objects[index]; + }, - /** - * Returns true if collection contains no objects - * @return {Boolean} true if collection is empty - */ - isEmpty: function () { - return this._objects.length === 0; - }, + /** + * Returns true if collection contains no objects + * @return {Boolean} true if collection is empty + */ + isEmpty: function () { + return this._objects.length === 0; + }, - /** - * Returns a size of a collection (i.e: length of an array containing its objects) - * @return {Number} Collection size - */ - size: function() { - return this._objects.length; - }, + /** + * Returns a size of a collection (i.e: length of an array containing its objects) + * @return {Number} Collection size + */ + size: function() { + return this._objects.length; + }, - /** - * Returns true if collection contains an object.\ - * **Prefer using {@link `fabric.Object#isDescendantOf`} for performance reasons** - * instead of a.contains(b) use b.isDescendantOf(a) - * @param {Object} object Object to check against - * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects` - * @return {Boolean} `true` if collection contains an object - */ - contains: function (object, deep) { - if (this._objects.indexOf(object) > -1) { - return true; - } - else if (deep) { - return this._objects.some(function (obj) { - return typeof obj.contains === 'function' && obj.contains(object, true); - }); - } - return false; - }, + /** + * Returns true if collection contains an object.\ + * **Prefer using {@link `fabric.Object#isDescendantOf`} for performance reasons** + * instead of a.contains(b) use b.isDescendantOf(a) + * @param {Object} object Object to check against + * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects` + * @return {Boolean} `true` if collection contains an object + */ + contains: function (object, deep) { + if (this._objects.indexOf(object) > -1) { + return true; + } + else if (deep) { + return this._objects.some(function (obj) { + return typeof obj.contains === 'function' && obj.contains(object, true); + }); + } + return false; + }, - /** - * Returns number representation of a collection complexity - * @return {Number} complexity - */ - complexity: function () { - return this._objects.reduce(function (memo, current) { - memo += current.complexity ? current.complexity() : 0; - return memo; - }, 0); - } -}; + /** + * Returns number representation of a collection complexity + * @return {Number} complexity + */ + complexity: function () { + return this._objects.reduce(function (memo, current) { + memo += current.complexity ? current.complexity() : 0; + return memo; + }, 0); + } + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/default_controls.js b/src/mixins/default_controls.js index 1b47c567521..d19c21296e6 100644 --- a/src/mixins/default_controls.js +++ b/src/mixins/default_controls.js @@ -1,111 +1,114 @@ -var controlsUtils = fabric.controlsUtils, - scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, - scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, - scalingEqually = controlsUtils.scalingEqually, - scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, - scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, - scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, - objectControls = fabric.Object.prototype.controls; +(function(global) { -objectControls.ml = new fabric.Control({ - x: -0.5, - y: 0, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, -}); + var fabric = global.fabric, controlsUtils = fabric.controlsUtils, + scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, + scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, + scalingEqually = controlsUtils.scalingEqually, + scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, + scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, + scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, + objectControls = fabric.Object.prototype.controls; -objectControls.mr = new fabric.Control({ - x: 0.5, - y: 0, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, -}); - -objectControls.mb = new fabric.Control({ - x: 0, - y: 0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, -}); - -objectControls.mt = new fabric.Control({ - x: 0, - y: -0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, -}); - -objectControls.tl = new fabric.Control({ - x: -0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually -}); + objectControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, + }); -objectControls.tr = new fabric.Control({ - x: 0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually -}); + objectControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, + }); -objectControls.bl = new fabric.Control({ - x: -0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually -}); + objectControls.mb = new fabric.Control({ + x: 0, + y: 0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); -objectControls.br = new fabric.Control({ - x: 0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually -}); + objectControls.mt = new fabric.Control({ + x: 0, + y: -0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); -objectControls.mtr = new fabric.Control({ - x: 0, - y: -0.5, - actionHandler: controlsUtils.rotationWithSnapping, - cursorStyleHandler: controlsUtils.rotationStyleHandler, - offsetY: -40, - withConnection: true, - actionName: 'rotate', -}); + objectControls.tl = new fabric.Control({ + x: -0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); -if (fabric.Textbox) { - // this is breaking the prototype inheritance, no time / ideas to fix it. - // is important to document that if you want to have all objects to have a - // specific custom control, you have to add it to Object prototype and to Textbox - // prototype. The controls are shared as references. So changes to control `tr` - // can still apply to all objects if needed. - var textBoxControls = fabric.Textbox.prototype.controls = { }; + objectControls.tr = new fabric.Control({ + x: 0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); - textBoxControls.mtr = objectControls.mtr; - textBoxControls.tr = objectControls.tr; - textBoxControls.br = objectControls.br; - textBoxControls.tl = objectControls.tl; - textBoxControls.bl = objectControls.bl; - textBoxControls.mt = objectControls.mt; - textBoxControls.mb = objectControls.mb; + objectControls.bl = new fabric.Control({ + x: -0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); - textBoxControls.mr = new fabric.Control({ + objectControls.br = new fabric.Control({ x: 0.5, - y: 0, - actionHandler: controlsUtils.changeWidth, - cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually }); - textBoxControls.ml = new fabric.Control({ - x: -0.5, - y: 0, - actionHandler: controlsUtils.changeWidth, - cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', + objectControls.mtr = new fabric.Control({ + x: 0, + y: -0.5, + actionHandler: controlsUtils.rotationWithSnapping, + cursorStyleHandler: controlsUtils.rotationStyleHandler, + offsetY: -40, + withConnection: true, + actionName: 'rotate', }); -} + + if (fabric.Textbox) { + // this is breaking the prototype inheritance, no time / ideas to fix it. + // is important to document that if you want to have all objects to have a + // specific custom control, you have to add it to Object prototype and to Textbox + // prototype. The controls are shared as references. So changes to control `tr` + // can still apply to all objects if needed. + var textBoxControls = fabric.Textbox.prototype.controls = { }; + + textBoxControls.mtr = objectControls.mtr; + textBoxControls.tr = objectControls.tr; + textBoxControls.br = objectControls.br; + textBoxControls.tl = objectControls.tl; + textBoxControls.bl = objectControls.bl; + textBoxControls.mt = objectControls.mt; + textBoxControls.mb = objectControls.mb; + + textBoxControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); + + textBoxControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); + } +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/eraser_brush.mixin.js b/src/mixins/eraser_brush.mixin.js index 1f38f2b2c81..9619bba1431 100644 --- a/src/mixins/eraser_brush.mixin.js +++ b/src/mixins/eraser_brush.mixin.js @@ -1,784 +1,786 @@ -/** ERASER_START */ - -var __drawClipPath = fabric.Object.prototype._drawClipPath; -var _needsItsOwnCache = fabric.Object.prototype.needsItsOwnCache; -var _toObject = fabric.Object.prototype.toObject; -var _getSvgCommons = fabric.Object.prototype.getSvgCommons; -var __createBaseClipPathSVGMarkup = fabric.Object.prototype._createBaseClipPathSVGMarkup; -var __createBaseSVGMarkup = fabric.Object.prototype._createBaseSVGMarkup; - -fabric.Object.prototype.cacheProperties.push('eraser'); -fabric.Object.prototype.stateProperties.push('eraser'); - -/** - * @fires erasing:end - */ -fabric.util.object.extend(fabric.Object.prototype, { - /** - * Indicates whether this object can be erased by {@link fabric.EraserBrush} - * The `deep` option introduces fine grained control over a group's `erasable` property. - * When set to `deep` the eraser will erase nested objects if they are erasable, leaving the group and the other objects untouched. - * When set to `true` the eraser will erase the entire group. Once the group changes the eraser is propagated to its children for proper functionality. - * When set to `false` the eraser will leave all objects including the group untouched. - * @tutorial {@link http://fabricjs.com/erasing#erasable_property} - * @type boolean | 'deep' - * @default true - */ - erasable: true, - - /** - * @tutorial {@link http://fabricjs.com/erasing#eraser} - * @type fabric.Eraser - */ - eraser: undefined, - - /** - * @override - * @returns Boolean - */ - needsItsOwnCache: function () { - return _needsItsOwnCache.call(this) || !!this.eraser; - }, - - /** - * draw eraser above clip path - * @override - * @private - * @param {CanvasRenderingContext2D} ctx - * @param {fabric.Object} clipPath - */ - _drawClipPath: function (ctx, clipPath) { - __drawClipPath.call(this, ctx, clipPath); - if (this.eraser) { - // update eraser size to match instance - var size = this._getNonTransformedDimensions(); - this.eraser.isType('eraser') && this.eraser.set({ - width: size.x, - height: size.y - }); - __drawClipPath.call(this, ctx, this.eraser); - } - }, - - /** - * Returns an object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function (propertiesToInclude) { - var object = _toObject.call(this, ['erasable'].concat(propertiesToInclude)); - if (this.eraser && !this.eraser.excludeFromExport) { - object.eraser = this.eraser.toObject(propertiesToInclude); - } - return object; - }, - - /* _TO_SVG_START_ */ - /** - * Returns id attribute for svg output - * @override - * @return {String} - */ - getSvgCommons: function () { - return _getSvgCommons.call(this) + (this.eraser ? 'mask="url(#' + this.eraser.clipPathId + ')" ' : ''); - }, - - /** - * create svg markup for eraser - * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 - * must be called before object markup creation as it relies on the `clipPathId` property of the mask - * @param {Function} [reviver] - * @returns - */ - _createEraserSVGMarkup: function (reviver) { - if (this.eraser) { - this.eraser.clipPathId = 'MASK_' + fabric.Object.__uid++; - return [ - '', - this.eraser.toSVG(reviver), - '', '\n' - ].join(''); - } - return ''; - }, - - /** - * @private - */ - _createBaseClipPathSVGMarkup: function (objectMarkup, options) { - return [ - this._createEraserSVGMarkup(options && options.reviver), - __createBaseClipPathSVGMarkup.call(this, objectMarkup, options) - ].join(''); - }, - - /** - * @private - */ - _createBaseSVGMarkup: function (objectMarkup, options) { - return [ - this._createEraserSVGMarkup(options && options.reviver), - __createBaseSVGMarkup.call(this, objectMarkup, options) - ].join(''); - } - /* _TO_SVG_END_ */ -}); - -fabric.util.object.extend(fabric.Group.prototype, { - /** - * @private - * @param {fabric.Path} path - * @returns {Promise} - */ - _addEraserPathToObjects: function (path) { - return Promise.all(this._objects.map(function (object) { - return fabric.EraserBrush.prototype._addPathToObjectEraser.call( - fabric.EraserBrush.prototype, - object, - path - ); - })); - }, - - /** - * Applies the group's eraser to its objects - * @tutorial {@link http://fabricjs.com/erasing#erasable_property} - * @returns {Promise} - */ - applyEraserToObjects: function () { - var _this = this, eraser = this.eraser; - return Promise.resolve() - .then(function () { - if (eraser) { - delete _this.eraser; - var transform = _this.calcTransformMatrix(); - return eraser.clone() - .then(function (eraser) { - var clipPath = _this.clipPath; - return Promise.all(eraser.getObjects('path') - .map(function (path) { - // first we transform the path from the group's coordinate system to the canvas' - var originalTransform = fabric.util.multiplyTransformMatrices( - transform, - path.calcTransformMatrix() - ); - fabric.util.applyTransformToObject(path, originalTransform); - return clipPath ? - clipPath.clone() - .then(function (_clipPath) { - var eraserPath = fabric.EraserBrush.prototype.applyClipPathToPath.call( - fabric.EraserBrush.prototype, - path, - _clipPath, - transform - ); - return _this._addEraserPathToObjects(eraserPath); - }, ['absolutePositioned', 'inverted']) : - _this._addEraserPathToObjects(path); - })); - }); - } - }); - } -}); - -/** - * An object's Eraser - * @private - * @class fabric.Eraser - * @extends fabric.Group - * @memberof fabric - */ -fabric.Eraser = fabric.util.createClass(fabric.Group, { - /** - * @readonly - * @static - */ - type: 'eraser', - - /** - * @default - */ - originX: 'center', - - /** - * @default - */ - originY: 'center', +(function (global) { + /** ERASER_START */ - /** - * eraser should retain size - * dimensions should not change when paths are added or removed - * handled by {@link fabric.Object#_drawClipPath} - * @override - * @private - */ - layout: 'fixed', - - drawObject: function (ctx) { - ctx.save(); - ctx.fillStyle = 'black'; - ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); - ctx.restore(); - this.callSuper('drawObject', ctx); - }, + var fabric = global.fabric, __drawClipPath = fabric.Object.prototype._drawClipPath; + var _needsItsOwnCache = fabric.Object.prototype.needsItsOwnCache; + var _toObject = fabric.Object.prototype.toObject; + var _getSvgCommons = fabric.Object.prototype.getSvgCommons; + var __createBaseClipPathSVGMarkup = fabric.Object.prototype._createBaseClipPathSVGMarkup; + var __createBaseSVGMarkup = fabric.Object.prototype._createBaseSVGMarkup; - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 - * for masking we need to add a white rect before all paths - * - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - _toSVG: function (reviver) { - var svgString = ['\n']; - var x = -this.width / 2, y = -this.height / 2; - var rectSvg = [ - '\n' - ].join(''); - svgString.push('\t\t', rectSvg); - for (var i = 0, len = this._objects.length; i < len; i++) { - svgString.push('\t\t', this._objects[i].toSVG(reviver)); - } - svgString.push('\n'); - return svgString; - }, - /* _TO_SVG_END_ */ -}); - -/** - * Returns instance from an object representation - * @static - * @memberOf fabric.Eraser - * @param {Object} object Object to create an Eraser from - * @returns {Promise} - */ -fabric.Eraser.fromObject = function (object) { - var objects = object.objects || [], - options = fabric.util.object.clone(object, true); - delete options.objects; - return Promise.all([ - fabric.util.enlivenObjects(objects), - fabric.util.enlivenObjectEnlivables(options) - ]).then(function (enlivedProps) { - return new fabric.Eraser(enlivedProps[0], Object.assign(options, enlivedProps[1]), true); - }); -}; - -var __renderOverlay = fabric.Canvas.prototype._renderOverlay; -/** - * @fires erasing:start - * @fires erasing:end - */ -fabric.util.object.extend(fabric.Canvas.prototype, { - /** - * Used by {@link #renderAll} - * @returns boolean - */ - isErasing: function () { - return ( - this.isDrawingMode && - this.freeDrawingBrush && - this.freeDrawingBrush.type === 'eraser' && - this.freeDrawingBrush._isErasing - ); - }, + fabric.Object.prototype.cacheProperties.push('eraser'); + fabric.Object.prototype.stateProperties.push('eraser'); /** - * While erasing the brush clips out the erasing path from canvas - * so we need to render it on top of canvas every render - * @param {CanvasRenderingContext2D} ctx + * @fires erasing:end */ - _renderOverlay: function (ctx) { - __renderOverlay.call(this, ctx); - this.isErasing() && this.freeDrawingBrush._render(); - } -}); - -/** - * EraserBrush class - * Supports selective erasing meaning that only erasable objects are affected by the eraser brush. - * Supports **inverted** erasing meaning that the brush can "undo" erasing. - * - * In order to support selective erasing, the brush clips the entire canvas - * and then draws all non-erasable objects over the erased path using a pattern brush so to speak (masking). - * If brush is **inverted** there is no need to clip canvas. The brush draws all erasable objects without their eraser. - * This achieves the desired effect of seeming to erase or unerase only erasable objects. - * After erasing is done the created path is added to all intersected objects' `eraser` property. - * - * In order to update the EraserBrush call `preparePattern`. - * It may come in handy when canvas changes during erasing (i.e animations) and you want the eraser to reflect the changes. - * - * @tutorial {@link http://fabricjs.com/erasing} - * @class fabric.EraserBrush - * @extends fabric.PencilBrush - * @memberof fabric - */ -fabric.EraserBrush = fabric.util.createClass( - fabric.PencilBrush, - /** @lends fabric.EraserBrush.prototype */ { - type: 'eraser', + fabric.util.object.extend(fabric.Object.prototype, { + /** + * Indicates whether this object can be erased by {@link fabric.EraserBrush} + * The `deep` option introduces fine grained control over a group's `erasable` property. + * When set to `deep` the eraser will erase nested objects if they are erasable, leaving the group and the other objects untouched. + * When set to `true` the eraser will erase the entire group. Once the group changes the eraser is propagated to its children for proper functionality. + * When set to `false` the eraser will leave all objects including the group untouched. + * @tutorial {@link http://fabricjs.com/erasing#erasable_property} + * @type boolean | 'deep' + * @default true + */ + erasable: true, /** - * When set to `true` the brush will create a visual effect of undoing erasing - * @type boolean + * @tutorial {@link http://fabricjs.com/erasing#eraser} + * @type fabric.Eraser */ - inverted: false, + eraser: undefined, /** - * Used to fix https://github.com/fabricjs/fabric.js/issues/7984 - * Reduces the path width while clipping the main context, resulting in a better visual overlap of both contexts - * @type number + * @override + * @returns Boolean */ - erasingWidthAliasing: 4, + needsItsOwnCache: function () { + return _needsItsOwnCache.call(this) || !!this.eraser; + }, /** + * draw eraser above clip path + * @override * @private + * @param {CanvasRenderingContext2D} ctx + * @param {fabric.Object} clipPath */ - _isErasing: false, + _drawClipPath: function (ctx, clipPath) { + __drawClipPath.call(this, ctx, clipPath); + if (this.eraser) { + // update eraser size to match instance + var size = this._getNonTransformedDimensions(); + this.eraser.isType('eraser') && this.eraser.set({ + width: size.x, + height: size.y + }); + __drawClipPath.call(this, ctx, this.eraser); + } + }, /** - * - * @private - * @param {fabric.Object} object - * @returns boolean + * Returns an object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance */ - _isErasable: function (object) { - return object.erasable !== false; + toObject: function (propertiesToInclude) { + var object = _toObject.call(this, ['erasable'].concat(propertiesToInclude)); + if (this.eraser && !this.eraser.excludeFromExport) { + object.eraser = this.eraser.toObject(propertiesToInclude); + } + return object; }, + /* _TO_SVG_START_ */ /** - * @private - * This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\ - * Iterates over collections to allow nested selective erasing.\ - * Prepares objects before rendering the pattern brush.\ - * If brush is **NOT** inverted render all non-erasable objects.\ - * If brush is inverted render all objects, erasable objects without their eraser. - * This will render the erased parts as if they were not erased in the first place, achieving an undo effect. - * - * @param {fabric.Collection} collection - * @param {fabric.Object[]} objects - * @param {CanvasRenderingContext2D} ctx - * @param {{ visibility: fabric.Object[], eraser: fabric.Object[], collection: fabric.Object[] }} restorationContext + * Returns id attribute for svg output + * @override + * @return {String} */ - _prepareCollectionTraversal: function (collection, objects, ctx, restorationContext) { - objects.forEach(function (obj) { - var dirty = false; - if (obj.forEachObject && obj.erasable === 'deep') { - // traverse - this._prepareCollectionTraversal(obj, obj._objects, ctx, restorationContext); - } - else if (!this.inverted && obj.erasable && obj.visible) { - // render only non-erasable objects - obj.visible = false; - restorationContext.visibility.push(obj); - dirty = true; - } - else if (this.inverted && obj.erasable && obj.eraser && obj.visible) { - // render all objects without eraser - var eraser = obj.eraser; - obj.eraser = undefined; - obj.dirty = true; - restorationContext.eraser.push([obj, eraser]); - dirty = true; - } - if (dirty && collection instanceof fabric.Object) { - collection.dirty = true; - restorationContext.collection.push(collection); - } - }, this); + getSvgCommons: function () { + return _getSvgCommons.call(this) + (this.eraser ? 'mask="url(#' + this.eraser.clipPathId + ')" ' : ''); }, /** - * Prepare the pattern for the erasing brush - * This pattern will be drawn on the top context after clipping the main context, - * achieving a visual effect of erasing only erasable objects - * @private - * @param {fabric.Object[]} [objects] override default behavior by passing objects to render on pattern + * create svg markup for eraser + * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 + * must be called before object markup creation as it relies on the `clipPathId` property of the mask + * @param {Function} [reviver] + * @returns */ - preparePattern: function (objects) { - if (!this._patternCanvas) { - this._patternCanvas = fabric.util.createCanvasElement(); - } - var canvas = this._patternCanvas; - objects = objects || this.canvas._objectsToRender || this.canvas._objects; - canvas.width = this.canvas.width; - canvas.height = this.canvas.height; - var patternCtx = canvas.getContext('2d'); - if (this.canvas._isRetinaScaling()) { - var retinaScaling = this.canvas.getRetinaScaling(); - this.canvas.__initRetinaScaling(retinaScaling, canvas, patternCtx); - } - var backgroundImage = this.canvas.backgroundImage, - bgErasable = backgroundImage && this._isErasable(backgroundImage), - overlayImage = this.canvas.overlayImage, - overlayErasable = overlayImage && this._isErasable(overlayImage); - if (!this.inverted && ((backgroundImage && !bgErasable) || !!this.canvas.backgroundColor)) { - if (bgErasable) { this.canvas.backgroundImage = undefined; } - this.canvas._renderBackground(patternCtx); - if (bgErasable) { this.canvas.backgroundImage = backgroundImage; } - } - else if (this.inverted) { - var eraser = backgroundImage && backgroundImage.eraser; - if (eraser) { - backgroundImage.eraser = undefined; - backgroundImage.dirty = true; - } - this.canvas._renderBackground(patternCtx); - if (eraser) { - backgroundImage.eraser = eraser; - backgroundImage.dirty = true; - } - } - patternCtx.save(); - patternCtx.transform.apply(patternCtx, this.canvas.viewportTransform); - var restorationContext = { visibility: [], eraser: [], collection: [] }; - this._prepareCollectionTraversal(this.canvas, objects, patternCtx, restorationContext); - this.canvas._renderObjects(patternCtx, objects); - restorationContext.visibility.forEach(function (obj) { obj.visible = true; }); - restorationContext.eraser.forEach(function (entry) { - var obj = entry[0], eraser = entry[1]; - obj.eraser = eraser; - obj.dirty = true; - }); - restorationContext.collection.forEach(function (obj) { obj.dirty = true; }); - patternCtx.restore(); - if (!this.inverted && ((overlayImage && !overlayErasable) || !!this.canvas.overlayColor)) { - if (overlayErasable) { this.canvas.overlayImage = undefined; } - __renderOverlay.call(this.canvas, patternCtx); - if (overlayErasable) { this.canvas.overlayImage = overlayImage; } - } - else if (this.inverted) { - var eraser = overlayImage && overlayImage.eraser; - if (eraser) { - overlayImage.eraser = undefined; - overlayImage.dirty = true; - } - __renderOverlay.call(this.canvas, patternCtx); - if (eraser) { - overlayImage.eraser = eraser; - overlayImage.dirty = true; - } + _createEraserSVGMarkup: function (reviver) { + if (this.eraser) { + this.eraser.clipPathId = 'MASK_' + fabric.Object.__uid++; + return [ + '', + this.eraser.toSVG(reviver), + '', '\n' + ].join(''); } + return ''; }, /** - * Sets brush styles * @private - * @param {CanvasRenderingContext2D} ctx */ - _setBrushStyles: function (ctx) { - this.callSuper('_setBrushStyles', ctx); - ctx.strokeStyle = 'black'; + _createBaseClipPathSVGMarkup: function (objectMarkup, options) { + return [ + this._createEraserSVGMarkup(options && options.reviver), + __createBaseClipPathSVGMarkup.call(this, objectMarkup, options) + ].join(''); }, /** - * **Customiztion** - * - * if you need the eraser to update on each render (i.e animating during erasing) override this method by **adding** the following (performance may suffer): - * @example - * ``` - * if(ctx === this.canvas.contextTop) { - * this.preparePattern(); - * } - * ``` - * - * @override fabric.BaseBrush#_saveAndTransform - * @param {CanvasRenderingContext2D} ctx + * @private */ - _saveAndTransform: function (ctx) { - this.callSuper('_saveAndTransform', ctx); - this._setBrushStyles(ctx); - ctx.globalCompositeOperation = ctx === this.canvas.getContext() ? 'destination-out' : 'destination-in'; - }, + _createBaseSVGMarkup: function (objectMarkup, options) { + return [ + this._createEraserSVGMarkup(options && options.reviver), + __createBaseSVGMarkup.call(this, objectMarkup, options) + ].join(''); + } + /* _TO_SVG_END_ */ + }); + fabric.util.object.extend(fabric.Group.prototype, { /** - * We indicate {@link fabric.PencilBrush} to repaint itself if necessary - * @returns + * @private + * @param {fabric.Path} path + * @returns {Promise} */ - needsFullRender: function () { - return true; + _addEraserPathToObjects: function (path) { + return Promise.all(this._objects.map(function (object) { + return fabric.EraserBrush.prototype._addPathToObjectEraser.call( + fabric.EraserBrush.prototype, + object, + path + ); + })); }, /** - * - * @param {fabric.Point} pointer - * @param {fabric.IEvent} options - * @returns + * Applies the group's eraser to its objects + * @tutorial {@link http://fabricjs.com/erasing#erasable_property} + * @returns {Promise} */ - onMouseDown: function (pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this._prepareForDrawing(pointer); - // capture coordinates immediately - // this allows to draw dots (when movement never occurs) - this._captureDrawingPath(pointer); - - // prepare for erasing - this.preparePattern(); - this._isErasing = true; - this.canvas.fire('erasing:start'); - this._render(); - }, + applyEraserToObjects: function () { + var _this = this, eraser = this.eraser; + return Promise.resolve() + .then(function () { + if (eraser) { + delete _this.eraser; + var transform = _this.calcTransformMatrix(); + return eraser.clone() + .then(function (eraser) { + var clipPath = _this.clipPath; + return Promise.all(eraser.getObjects('path') + .map(function (path) { + // first we transform the path from the group's coordinate system to the canvas' + var originalTransform = fabric.util.multiplyTransformMatrices( + transform, + path.calcTransformMatrix() + ); + fabric.util.applyTransformToObject(path, originalTransform); + return clipPath ? + clipPath.clone() + .then(function (_clipPath) { + var eraserPath = fabric.EraserBrush.prototype.applyClipPathToPath.call( + fabric.EraserBrush.prototype, + path, + _clipPath, + transform + ); + return _this._addEraserPathToObjects(eraserPath); + }, ['absolutePositioned', 'inverted']) : + _this._addEraserPathToObjects(path); + })); + }); + } + }); + } + }); + /** + * An object's Eraser + * @private + * @class fabric.Eraser + * @extends fabric.Group + * @memberof fabric + */ + fabric.Eraser = fabric.util.createClass(fabric.Group, { /** - * Rendering Logic: - * 1. Use brush to clip canvas by rendering it on top of canvas (unnecessary if `inverted === true`) - * 2. Render brush with canvas pattern on top context - * - * @todo provide a better solution to https://github.com/fabricjs/fabric.js/issues/7984 + * @readonly + * @static */ - _render: function () { - var ctx, lineWidth = this.width; - var t = this.canvas.getRetinaScaling(), s = 1 / t; - // clip canvas - ctx = this.canvas.getContext(); - // a hack that fixes https://github.com/fabricjs/fabric.js/issues/7984 by reducing path width - // the issue's cause is unknown at time of writing (@ShaMan123 06/2022) - if (lineWidth - this.erasingWidthAliasing > 0) { - this.width = lineWidth - this.erasingWidthAliasing; - this.callSuper('_render', ctx); - this.width = lineWidth; - } - // render brush and mask it with pattern - ctx = this.canvas.contextTop; - this.canvas.clearContext(ctx); - ctx.save(); - ctx.scale(s, s); - ctx.drawImage(this._patternCanvas, 0, 0); - ctx.restore(); - this.callSuper('_render', ctx); - }, + type: 'eraser', /** - * Creates fabric.Path object - * @override - * @private - * @param {(string|number)[][]} pathData Path data - * @return {fabric.Path} Path to add on canvas - * @returns + * @default */ - createPath: function (pathData) { - var path = this.callSuper('createPath', pathData); - path.globalCompositeOperation = this.inverted ? 'source-over' : 'destination-out'; - path.stroke = this.inverted ? 'white' : 'black'; - return path; - }, + originX: 'center', /** - * Utility to apply a clip path to a path. - * Used to preserve clipping on eraser paths in nested objects. - * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. - * @param {fabric.Path} path The eraser path in canvas coordinate plane - * @param {fabric.Object} clipPath The clipPath to apply to the path - * @param {number[]} clipPathContainerTransformMatrix The transform matrix of the object that the clip path belongs to - * @returns {fabric.Path} path with clip path + * @default */ - applyClipPathToPath: function (path, clipPath, clipPathContainerTransformMatrix) { - var pathInvTransform = fabric.util.invertTransform(path.calcTransformMatrix()), - clipPathTransform = clipPath.calcTransformMatrix(), - transform = clipPath.absolutePositioned ? - pathInvTransform : - fabric.util.multiplyTransformMatrices( - pathInvTransform, - clipPathContainerTransformMatrix - ); - // when passing down a clip path it becomes relative to the parent - // so we transform it acoordingly and set `absolutePositioned` to false - clipPath.absolutePositioned = false; - fabric.util.applyTransformToObject( - clipPath, - fabric.util.multiplyTransformMatrices( - transform, - clipPathTransform - ) - ); - // We need to clip `path` with both `clipPath` and it's own clip path if existing (`path.clipPath`) - // so in turn `path` erases an object only where it overlaps with all it's clip paths, regardless of how many there are. - // this is done because both clip paths may have nested clip paths of their own (this method walks down a collection => this may reccur), - // so we can't assign one to the other's clip path property. - path.clipPath = path.clipPath ? fabric.util.mergeClipPaths(clipPath, path.clipPath) : clipPath; - return path; - }, + originY: 'center', /** - * Utility to apply a clip path to a path. - * Used to preserve clipping on eraser paths in nested objects. - * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. - * @param {fabric.Path} path The eraser path - * @param {fabric.Object} object The clipPath to apply to path belongs to object - * @returns {Promise} + * eraser should retain size + * dimensions should not change when paths are added or removed + * handled by {@link fabric.Object#_drawClipPath} + * @override + * @private */ - clonePathWithClipPath: function (path, object) { - var objTransform = object.calcTransformMatrix(); - var clipPath = object.clipPath; - var _this = this; - return Promise.all([ - path.clone(), - clipPath.clone(['absolutePositioned', 'inverted']) - ]).then(function (clones) { - return _this.applyClipPathToPath(clones[0], clones[1], objTransform); - }); + layout: 'fixed', + + drawObject: function (ctx) { + ctx.save(); + ctx.fillStyle = 'black'; + ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); + ctx.restore(); + this.callSuper('drawObject', ctx); }, + /* _TO_SVG_START_ */ /** - * Adds path to object's eraser, walks down object's descendants if necessary + * Returns svg representation of an instance + * use to achieve erasing for svg, credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649 + * for masking we need to add a white rect before all paths * - * @public - * @fires erasing:end on object - * @param {fabric.Object} obj - * @param {fabric.Path} path - * @param {Object} [context] context to assign erased objects to - * @returns {Promise} + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance */ - _addPathToObjectEraser: function (obj, path, context) { - var _this = this; - // object is collection, i.e group - if (obj.forEachObject && obj.erasable === 'deep') { - var targets = obj._objects.filter(function (_obj) { - return _obj.erasable; - }); - if (targets.length > 0 && obj.clipPath) { - return this.clonePathWithClipPath(path, obj) - .then(function (_path) { - return Promise.all(targets.map(function (_obj) { - return _this._addPathToObjectEraser(_obj, _path, context); - })); - }); - } - else if (targets.length > 0) { - return Promise.all(targets.map(function (_obj) { - return _this._addPathToObjectEraser(_obj, path, context); - })); - } - return; - } - // prepare eraser - var eraser = obj.eraser; - if (!eraser) { - eraser = new fabric.Eraser(); - obj.eraser = eraser; + _toSVG: function (reviver) { + var svgString = ['\n']; + var x = -this.width / 2, y = -this.height / 2; + var rectSvg = [ + '\n' + ].join(''); + svgString.push('\t\t', rectSvg); + for (var i = 0, len = this._objects.length; i < len; i++) { + svgString.push('\t\t', this._objects[i].toSVG(reviver)); } - // clone and add path - return path.clone() - .then(function (path) { - // http://fabricjs.com/using-transformations - var desiredTransform = fabric.util.multiplyTransformMatrices( - fabric.util.invertTransform( - obj.calcTransformMatrix() - ), - path.calcTransformMatrix() - ); - fabric.util.applyTransformToObject(path, desiredTransform); - eraser.add(path); - obj.set('dirty', true); - obj.fire('erasing:end', { - path: path - }); - if (context) { - (obj.group ? context.subTargets : context.targets).push(obj); - //context.paths.set(obj, path); - } - return path; - }); + svgString.push('\n'); + return svgString; }, + /* _TO_SVG_END_ */ + }); + /** + * Returns instance from an object representation + * @static + * @memberOf fabric.Eraser + * @param {Object} object Object to create an Eraser from + * @returns {Promise} + */ + fabric.Eraser.fromObject = function (object) { + var objects = object.objects || [], + options = fabric.util.object.clone(object, true); + delete options.objects; + return Promise.all([ + fabric.util.enlivenObjects(objects), + fabric.util.enlivenObjectEnlivables(options) + ]).then(function (enlivedProps) { + return new fabric.Eraser(enlivedProps[0], Object.assign(options, enlivedProps[1]), true); + }); + }; + + var __renderOverlay = fabric.Canvas.prototype._renderOverlay; + /** + * @fires erasing:start + * @fires erasing:end + */ + fabric.util.object.extend(fabric.Canvas.prototype, { /** - * Add the eraser path to canvas drawables' clip paths - * - * @param {fabric.Canvas} source - * @param {fabric.Canvas} path - * @param {Object} [context] context to assign erased objects to - * @returns {Promise} eraser paths + * Used by {@link #renderAll} + * @returns boolean */ - applyEraserToCanvas: function (path, context) { - var canvas = this.canvas; - return Promise.all([ - 'backgroundImage', - 'overlayImage', - ].map(function (prop) { - var drawable = canvas[prop]; - return drawable && drawable.erasable && - this._addPathToObjectEraser(drawable, path) - .then(function (path) { - if (context) { - context.drawables[prop] = drawable; - //context.paths.set(drawable, path); - } - return path; - }); - }, this)); + isErasing: function () { + return ( + this.isDrawingMode && + this.freeDrawingBrush && + this.freeDrawingBrush.type === 'eraser' && + this.freeDrawingBrush._isErasing + ); }, /** - * On mouseup after drawing the path on contextTop canvas - * we use the points captured to create an new fabric path object - * and add it to every intersected erasable object. + * While erasing the brush clips out the erasing path from canvas + * so we need to render it on top of canvas every render + * @param {CanvasRenderingContext2D} ctx */ - _finalizeAndAddPath: function () { - var ctx = this.canvas.contextTop, canvas = this.canvas; - ctx.closePath(); - if (this.decimate) { - this._points = this.decimatePoints(this._points, this.decimate); - } - - // clear - canvas.clearContext(canvas.contextTop); - this._isErasing = false; - - var pathData = this._points && this._points.length > 1 ? - this.convertPointsToSVGPath(this._points) : - null; - if (!pathData || this._isEmptySVGPath(pathData)) { - canvas.fire('erasing:end'); - // do not create 0 width/height paths, as they are - // rendered inconsistently across browsers - // Firefox 4, for example, renders a dot, - // whereas Chrome 10 renders nothing - canvas.requestRenderAll(); - return; - } + _renderOverlay: function (ctx) { + __renderOverlay.call(this, ctx); + this.isErasing() && this.freeDrawingBrush._render(); + } + }); - var path = this.createPath(pathData); - // needed for `intersectsWithObject` - path.setCoords(); - // commense event sequence - canvas.fire('before:path:created', { path: path }); - - // finalize erasing - var _this = this; - var context = { - targets: [], - subTargets: [], - //paths: new Map(), - drawables: {} - }; - var tasks = canvas._objects.map(function (obj) { - return obj.erasable && obj.intersectsWithObject(path, true, true) && - _this._addPathToObjectEraser(obj, path, context); - }); - tasks.push(_this.applyEraserToCanvas(path, context)); - return Promise.all(tasks) - .then(function () { - // fire erasing:end - canvas.fire('erasing:end', Object.assign(context, { - path: path - })); + /** + * EraserBrush class + * Supports selective erasing meaning that only erasable objects are affected by the eraser brush. + * Supports **inverted** erasing meaning that the brush can "undo" erasing. + * + * In order to support selective erasing, the brush clips the entire canvas + * and then draws all non-erasable objects over the erased path using a pattern brush so to speak (masking). + * If brush is **inverted** there is no need to clip canvas. The brush draws all erasable objects without their eraser. + * This achieves the desired effect of seeming to erase or unerase only erasable objects. + * After erasing is done the created path is added to all intersected objects' `eraser` property. + * + * In order to update the EraserBrush call `preparePattern`. + * It may come in handy when canvas changes during erasing (i.e animations) and you want the eraser to reflect the changes. + * + * @tutorial {@link http://fabricjs.com/erasing} + * @class fabric.EraserBrush + * @extends fabric.PencilBrush + * @memberof fabric + */ + fabric.EraserBrush = fabric.util.createClass( + fabric.PencilBrush, + /** @lends fabric.EraserBrush.prototype */ { + type: 'eraser', + + /** + * When set to `true` the brush will create a visual effect of undoing erasing + * @type boolean + */ + inverted: false, + + /** + * Used to fix https://github.com/fabricjs/fabric.js/issues/7984 + * Reduces the path width while clipping the main context, resulting in a better visual overlap of both contexts + * @type number + */ + erasingWidthAliasing: 4, + + /** + * @private + */ + _isErasing: false, + + /** + * + * @private + * @param {fabric.Object} object + * @returns boolean + */ + _isErasable: function (object) { + return object.erasable !== false; + }, + + /** + * @private + * This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\ + * Iterates over collections to allow nested selective erasing.\ + * Prepares objects before rendering the pattern brush.\ + * If brush is **NOT** inverted render all non-erasable objects.\ + * If brush is inverted render all objects, erasable objects without their eraser. + * This will render the erased parts as if they were not erased in the first place, achieving an undo effect. + * + * @param {fabric.Collection} collection + * @param {fabric.Object[]} objects + * @param {CanvasRenderingContext2D} ctx + * @param {{ visibility: fabric.Object[], eraser: fabric.Object[], collection: fabric.Object[] }} restorationContext + */ + _prepareCollectionTraversal: function (collection, objects, ctx, restorationContext) { + objects.forEach(function (obj) { + var dirty = false; + if (obj.forEachObject && obj.erasable === 'deep') { + // traverse + this._prepareCollectionTraversal(obj, obj._objects, ctx, restorationContext); + } + else if (!this.inverted && obj.erasable && obj.visible) { + // render only non-erasable objects + obj.visible = false; + restorationContext.visibility.push(obj); + dirty = true; + } + else if (this.inverted && obj.erasable && obj.eraser && obj.visible) { + // render all objects without eraser + var eraser = obj.eraser; + obj.eraser = undefined; + obj.dirty = true; + restorationContext.eraser.push([obj, eraser]); + dirty = true; + } + if (dirty && collection instanceof fabric.Object) { + collection.dirty = true; + restorationContext.collection.push(collection); + } + }, this); + }, + + /** + * Prepare the pattern for the erasing brush + * This pattern will be drawn on the top context after clipping the main context, + * achieving a visual effect of erasing only erasable objects + * @private + * @param {fabric.Object[]} [objects] override default behavior by passing objects to render on pattern + */ + preparePattern: function (objects) { + if (!this._patternCanvas) { + this._patternCanvas = fabric.util.createCanvasElement(); + } + var canvas = this._patternCanvas; + objects = objects || this.canvas._objectsToRender || this.canvas._objects; + canvas.width = this.canvas.width; + canvas.height = this.canvas.height; + var patternCtx = canvas.getContext('2d'); + if (this.canvas._isRetinaScaling()) { + var retinaScaling = this.canvas.getRetinaScaling(); + this.canvas.__initRetinaScaling(retinaScaling, canvas, patternCtx); + } + var backgroundImage = this.canvas.backgroundImage, + bgErasable = backgroundImage && this._isErasable(backgroundImage), + overlayImage = this.canvas.overlayImage, + overlayErasable = overlayImage && this._isErasable(overlayImage); + if (!this.inverted && ((backgroundImage && !bgErasable) || !!this.canvas.backgroundColor)) { + if (bgErasable) { this.canvas.backgroundImage = undefined; } + this.canvas._renderBackground(patternCtx); + if (bgErasable) { this.canvas.backgroundImage = backgroundImage; } + } + else if (this.inverted) { + var eraser = backgroundImage && backgroundImage.eraser; + if (eraser) { + backgroundImage.eraser = undefined; + backgroundImage.dirty = true; + } + this.canvas._renderBackground(patternCtx); + if (eraser) { + backgroundImage.eraser = eraser; + backgroundImage.dirty = true; + } + } + patternCtx.save(); + patternCtx.transform.apply(patternCtx, this.canvas.viewportTransform); + var restorationContext = { visibility: [], eraser: [], collection: [] }; + this._prepareCollectionTraversal(this.canvas, objects, patternCtx, restorationContext); + this.canvas._renderObjects(patternCtx, objects); + restorationContext.visibility.forEach(function (obj) { obj.visible = true; }); + restorationContext.eraser.forEach(function (entry) { + var obj = entry[0], eraser = entry[1]; + obj.eraser = eraser; + obj.dirty = true; + }); + restorationContext.collection.forEach(function (obj) { obj.dirty = true; }); + patternCtx.restore(); + if (!this.inverted && ((overlayImage && !overlayErasable) || !!this.canvas.overlayColor)) { + if (overlayErasable) { this.canvas.overlayImage = undefined; } + __renderOverlay.call(this.canvas, patternCtx); + if (overlayErasable) { this.canvas.overlayImage = overlayImage; } + } + else if (this.inverted) { + var eraser = overlayImage && overlayImage.eraser; + if (eraser) { + overlayImage.eraser = undefined; + overlayImage.dirty = true; + } + __renderOverlay.call(this.canvas, patternCtx); + if (eraser) { + overlayImage.eraser = eraser; + overlayImage.dirty = true; + } + } + }, + + /** + * Sets brush styles + * @private + * @param {CanvasRenderingContext2D} ctx + */ + _setBrushStyles: function (ctx) { + this.callSuper('_setBrushStyles', ctx); + ctx.strokeStyle = 'black'; + }, + + /** + * **Customiztion** + * + * if you need the eraser to update on each render (i.e animating during erasing) override this method by **adding** the following (performance may suffer): + * @example + * ``` + * if(ctx === this.canvas.contextTop) { + * this.preparePattern(); + * } + * ``` + * + * @override fabric.BaseBrush#_saveAndTransform + * @param {CanvasRenderingContext2D} ctx + */ + _saveAndTransform: function (ctx) { + this.callSuper('_saveAndTransform', ctx); + this._setBrushStyles(ctx); + ctx.globalCompositeOperation = ctx === this.canvas.getContext() ? 'destination-out' : 'destination-in'; + }, + + /** + * We indicate {@link fabric.PencilBrush} to repaint itself if necessary + * @returns + */ + needsFullRender: function () { + return true; + }, + + /** + * + * @param {fabric.Point} pointer + * @param {fabric.IEvent} options + * @returns + */ + onMouseDown: function (pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this._prepareForDrawing(pointer); + // capture coordinates immediately + // this allows to draw dots (when movement never occurs) + this._captureDrawingPath(pointer); + + // prepare for erasing + this.preparePattern(); + this._isErasing = true; + this.canvas.fire('erasing:start'); + this._render(); + }, + + /** + * Rendering Logic: + * 1. Use brush to clip canvas by rendering it on top of canvas (unnecessary if `inverted === true`) + * 2. Render brush with canvas pattern on top context + * + * @todo provide a better solution to https://github.com/fabricjs/fabric.js/issues/7984 + */ + _render: function () { + var ctx, lineWidth = this.width; + var t = this.canvas.getRetinaScaling(), s = 1 / t; + // clip canvas + ctx = this.canvas.getContext(); + // a hack that fixes https://github.com/fabricjs/fabric.js/issues/7984 by reducing path width + // the issue's cause is unknown at time of writing (@ShaMan123 06/2022) + if (lineWidth - this.erasingWidthAliasing > 0) { + this.width = lineWidth - this.erasingWidthAliasing; + this.callSuper('_render', ctx); + this.width = lineWidth; + } + // render brush and mask it with pattern + ctx = this.canvas.contextTop; + this.canvas.clearContext(ctx); + ctx.save(); + ctx.scale(s, s); + ctx.drawImage(this._patternCanvas, 0, 0); + ctx.restore(); + this.callSuper('_render', ctx); + }, + + /** + * Creates fabric.Path object + * @override + * @private + * @param {(string|number)[][]} pathData Path data + * @return {fabric.Path} Path to add on canvas + * @returns + */ + createPath: function (pathData) { + var path = this.callSuper('createPath', pathData); + path.globalCompositeOperation = this.inverted ? 'source-over' : 'destination-out'; + path.stroke = this.inverted ? 'white' : 'black'; + return path; + }, + + /** + * Utility to apply a clip path to a path. + * Used to preserve clipping on eraser paths in nested objects. + * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. + * @param {fabric.Path} path The eraser path in canvas coordinate plane + * @param {fabric.Object} clipPath The clipPath to apply to the path + * @param {number[]} clipPathContainerTransformMatrix The transform matrix of the object that the clip path belongs to + * @returns {fabric.Path} path with clip path + */ + applyClipPathToPath: function (path, clipPath, clipPathContainerTransformMatrix) { + var pathInvTransform = fabric.util.invertTransform(path.calcTransformMatrix()), + clipPathTransform = clipPath.calcTransformMatrix(), + transform = clipPath.absolutePositioned ? + pathInvTransform : + fabric.util.multiplyTransformMatrices( + pathInvTransform, + clipPathContainerTransformMatrix + ); + // when passing down a clip path it becomes relative to the parent + // so we transform it acoordingly and set `absolutePositioned` to false + clipPath.absolutePositioned = false; + fabric.util.applyTransformToObject( + clipPath, + fabric.util.multiplyTransformMatrices( + transform, + clipPathTransform + ) + ); + // We need to clip `path` with both `clipPath` and it's own clip path if existing (`path.clipPath`) + // so in turn `path` erases an object only where it overlaps with all it's clip paths, regardless of how many there are. + // this is done because both clip paths may have nested clip paths of their own (this method walks down a collection => this may reccur), + // so we can't assign one to the other's clip path property. + path.clipPath = path.clipPath ? fabric.util.mergeClipPaths(clipPath, path.clipPath) : clipPath; + return path; + }, + + /** + * Utility to apply a clip path to a path. + * Used to preserve clipping on eraser paths in nested objects. + * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects. + * @param {fabric.Path} path The eraser path + * @param {fabric.Object} object The clipPath to apply to path belongs to object + * @returns {Promise} + */ + clonePathWithClipPath: function (path, object) { + var objTransform = object.calcTransformMatrix(); + var clipPath = object.clipPath; + var _this = this; + return Promise.all([ + path.clone(), + clipPath.clone(['absolutePositioned', 'inverted']) + ]).then(function (clones) { + return _this.applyClipPathToPath(clones[0], clones[1], objTransform); + }); + }, + + /** + * Adds path to object's eraser, walks down object's descendants if necessary + * + * @public + * @fires erasing:end on object + * @param {fabric.Object} obj + * @param {fabric.Path} path + * @param {Object} [context] context to assign erased objects to + * @returns {Promise} + */ + _addPathToObjectEraser: function (obj, path, context) { + var _this = this; + // object is collection, i.e group + if (obj.forEachObject && obj.erasable === 'deep') { + var targets = obj._objects.filter(function (_obj) { + return _obj.erasable; + }); + if (targets.length > 0 && obj.clipPath) { + return this.clonePathWithClipPath(path, obj) + .then(function (_path) { + return Promise.all(targets.map(function (_obj) { + return _this._addPathToObjectEraser(_obj, _path, context); + })); + }); + } + else if (targets.length > 0) { + return Promise.all(targets.map(function (_obj) { + return _this._addPathToObjectEraser(_obj, path, context); + })); + } + return; + } + // prepare eraser + var eraser = obj.eraser; + if (!eraser) { + eraser = new fabric.Eraser(); + obj.eraser = eraser; + } + // clone and add path + return path.clone() + .then(function (path) { + // http://fabricjs.com/using-transformations + var desiredTransform = fabric.util.multiplyTransformMatrices( + fabric.util.invertTransform( + obj.calcTransformMatrix() + ), + path.calcTransformMatrix() + ); + fabric.util.applyTransformToObject(path, desiredTransform); + eraser.add(path); + obj.set('dirty', true); + obj.fire('erasing:end', { + path: path + }); + if (context) { + (obj.group ? context.subTargets : context.targets).push(obj); + //context.paths.set(obj, path); + } + return path; + }); + }, + + /** + * Add the eraser path to canvas drawables' clip paths + * + * @param {fabric.Canvas} source + * @param {fabric.Canvas} path + * @param {Object} [context] context to assign erased objects to + * @returns {Promise} eraser paths + */ + applyEraserToCanvas: function (path, context) { + var canvas = this.canvas; + return Promise.all([ + 'backgroundImage', + 'overlayImage', + ].map(function (prop) { + var drawable = canvas[prop]; + return drawable && drawable.erasable && + this._addPathToObjectEraser(drawable, path) + .then(function (path) { + if (context) { + context.drawables[prop] = drawable; + //context.paths.set(drawable, path); + } + return path; + }); + }, this)); + }, + + /** + * On mouseup after drawing the path on contextTop canvas + * we use the points captured to create an new fabric path object + * and add it to every intersected erasable object. + */ + _finalizeAndAddPath: function () { + var ctx = this.canvas.contextTop, canvas = this.canvas; + ctx.closePath(); + if (this.decimate) { + this._points = this.decimatePoints(this._points, this.decimate); + } + // clear + canvas.clearContext(canvas.contextTop); + this._isErasing = false; + + var pathData = this._points && this._points.length > 1 ? + this.convertPointsToSVGPath(this._points) : + null; + if (!pathData || this._isEmptySVGPath(pathData)) { + canvas.fire('erasing:end'); + // do not create 0 width/height paths, as they are + // rendered inconsistently across browsers + // Firefox 4, for example, renders a dot, + // whereas Chrome 10 renders nothing canvas.requestRenderAll(); - _this._resetShadow(); + return; + } - // fire event 'path' created - canvas.fire('path:created', { path: path }); + var path = this.createPath(pathData); + // needed for `intersectsWithObject` + path.setCoords(); + // commense event sequence + canvas.fire('before:path:created', { path: path }); + + // finalize erasing + var _this = this; + var context = { + targets: [], + subTargets: [], + //paths: new Map(), + drawables: {} + }; + var tasks = canvas._objects.map(function (obj) { + return obj.erasable && obj.intersectsWithObject(path, true, true) && + _this._addPathToObjectEraser(obj, path, context); }); + tasks.push(_this.applyEraserToCanvas(path, context)); + return Promise.all(tasks) + .then(function () { + // fire erasing:end + canvas.fire('erasing:end', Object.assign(context, { + path: path + })); + + canvas.requestRenderAll(); + _this._resetShadow(); + + // fire event 'path' created + canvas.fire('path:created', { path: path }); + }); + } } - } -); + ); -/** ERASER_END */ + /** ERASER_END */ +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js index 03a6be2b6fb..21921b43393 100644 --- a/src/mixins/itext.svg_export.js +++ b/src/mixins/itext.svg_export.js @@ -1,210 +1,211 @@ /* _TO_SVG_START_ */ -var toFixed = fabric.util.toFixed, - multipleSpacesRegex = / +/g; +(function(global) { + var fabric = global.fabric, toFixed = fabric.util.toFixed, + multipleSpacesRegex = / +/g; -fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** + /** * Returns SVG representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - _toSVG: function() { - var offsets = this._getSVGLeftTopOffsets(), - textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); - return this._wrapSVGTextAndBg(textAndBg); - }, + _toSVG: function() { + var offsets = this._getSVGLeftTopOffsets(), + textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); + return this._wrapSVGTextAndBg(textAndBg); + }, - /** + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup( - this._toSVG(), - { reviver: reviver, noStyle: true, withShadow: true } - ); - }, - - /** + toSVG: function(reviver) { + return this._createBaseSVGMarkup( + this._toSVG(), + { reviver: reviver, noStyle: true, withShadow: true } + ); + }, + + /** * @private */ - _getSVGLeftTopOffsets: function() { - return { - textLeft: -this.width / 2, - textTop: -this.height / 2, - lineTop: this.getHeightOfLine(0) - }; - }, - - /** + _getSVGLeftTopOffsets: function() { + return { + textLeft: -this.width / 2, + textTop: -this.height / 2, + lineTop: this.getHeightOfLine(0) + }; + }, + + /** * @private */ - _wrapSVGTextAndBg: function(textAndBg) { - var noShadow = true, - textDecoration = this.getSvgTextDecoration(this); - return [ - textAndBg.textBgRects.join(''), - '\t\t', - textAndBg.textSpans.join(''), - '\n' - ]; - }, - - /** + _wrapSVGTextAndBg: function(textAndBg) { + var noShadow = true, + textDecoration = this.getSvgTextDecoration(this); + return [ + textAndBg.textBgRects.join(''), + '\t\t', + textAndBg.textSpans.join(''), + '\n' + ]; + }, + + /** * @private * @param {Number} textTopOffset Text top offset * @param {Number} textLeftOffset Text left offset * @return {Object} */ - _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { - var textSpans = [], - textBgRects = [], - height = textTopOffset, lineOffset; - // bounding-box background - this._setSVGBg(textBgRects); - - // text and text-background - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineOffset = this._getLineLeftOffset(i); - if (this.direction === 'rtl') { - lineOffset += this.width; - } - if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { - this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); + _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { + var textSpans = [], + textBgRects = [], + height = textTopOffset, lineOffset; + // bounding-box background + this._setSVGBg(textBgRects); + + // text and text-background + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineOffset = this._getLineLeftOffset(i); + if (this.direction === 'rtl') { + lineOffset += this.width; + } + if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { + this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); + } + this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); + height += this.getHeightOfLine(i); } - this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); - height += this.getHeightOfLine(i); - } - return { - textSpans: textSpans, - textBgRects: textBgRects - }; - }, + return { + textSpans: textSpans, + textBgRects: textBgRects + }; + }, - /** + /** * @private */ - _createTextCharSpan: function(_char, styleDecl, left, top) { - var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), - styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), - fillStyles = styleProps ? 'style="' + styleProps + '"' : '', - dy = styleDecl.deltaY, dySpan = '', - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - if (dy) { - dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; - } - return [ - '', - fabric.util.string.escapeXml(_char), - '' - ].join(''); - }, - - _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, style, - boxWidth = 0, - line = this._textLines[lineIndex], - timeToRender; - - textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - textLeftOffset += charBox.kernedWidth - charBox.width; - boxWidth += charBox.width; - } - else { - boxWidth += charBox.kernedWidth; + _createTextCharSpan: function(_char, styleDecl, left, top) { + var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), + styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), + fillStyles = styleProps ? 'style="' + styleProps + '"' : '', + dy = styleDecl.deltaY, dySpan = '', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + if (dy) { + dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; + return [ + '', + fabric.util.string.escapeXml(_char), + '' + ].join(''); + }, + + _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, style, + boxWidth = 0, + line = this._textLines[lineIndex], + timeToRender; + + textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + textLeftOffset += charBox.kernedWidth - charBox.width; + boxWidth += charBox.width; + } + else { + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; + } + } + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); + } + if (timeToRender) { + style = this._getStyleDeclaration(lineIndex, i) || { }; + textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); + charsToRender = ''; + actualStyle = nextStyle; + if (this.direction === 'rtl') { + textLeftOffset -= boxWidth; + } + else { + textLeftOffset += boxWidth; + } + boxWidth = 0; } } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); - } - if (timeToRender) { - style = this._getStyleDeclaration(lineIndex, i) || { }; - textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); - charsToRender = ''; - actualStyle = nextStyle; - if (this.direction === 'rtl') { - textLeftOffset -= boxWidth; + }, + + _pushTextBgRect: function(textBgRects, color, left, top, width, height) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + }, + + _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { + var line = this._textLines[i], + heightOfLine = this.getHeightOfLine(i) / this.lineHeight, + boxWidth = 0, + boxStart = 0, + charBox, currentColor, + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (currentColor !== lastColor) { + lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; } else { - textLeftOffset += boxWidth; + boxWidth += charBox.kernedWidth; } - boxWidth = 0; - } - } - }, - - _pushTextBgRect: function(textBgRects, color, left, top, width, height) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - }, - - _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { - var line = this._textLines[i], - heightOfLine = this.getHeightOfLine(i) / this.lineHeight, - boxWidth = 0, - boxStart = 0, - charBox, currentColor, - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (currentColor !== lastColor) { - lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; } - else { - boxWidth += charBox.kernedWidth; - } - } - currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - }, + currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + }, - /** + /** * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1 * @@ -212,37 +213,38 @@ fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototyp * @param {*} value * @return {String} */ - _getFillAttributes: function(value) { - var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; - if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { - return 'fill="' + value + '"'; - } - return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; - }, - - /** + _getFillAttributes: function(value) { + var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; + if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { + return 'fill="' + value + '"'; + } + return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; + }, + + /** * @private */ - _getSVGLineTopOffset: function(lineIndex) { - var lineTopOffset = 0, lastHeight = 0; - for (var j = 0; j < lineIndex; j++) { - lineTopOffset += this.getHeightOfLine(j); - } - lastHeight = this.getHeightOfLine(j); - return { - lineTop: lineTopOffset, - offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) - }; - }, - - /** + _getSVGLineTopOffset: function(lineIndex) { + var lineTopOffset = 0, lastHeight = 0; + for (var j = 0; j < lineIndex; j++) { + lineTopOffset += this.getHeightOfLine(j); + } + lastHeight = this.getHeightOfLine(j); + return { + lineTop: lineTopOffset, + offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) + }; + }, + + /** * Returns styles-string for svg-export * @param {Boolean} skipShadow a boolean to skip shadow filter output * @return {String} */ - getSvgStyles: function(skipShadow) { - var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); - return svgStyle + ' white-space: pre;'; - }, -}); + getSvgStyles: function(skipShadow) { + var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); + return svgStyle + ' white-space: pre;'; + }, + }); +})(typeof exports !== 'undefined' ? exports : window); /* _TO_SVG_END_ */ diff --git a/src/mixins/itext_behavior.mixin.js b/src/mixins/itext_behavior.mixin.js index 35c09fd27f1..5418cb91dfb 100644 --- a/src/mixins/itext_behavior.mixin.js +++ b/src/mixins/itext_behavior.mixin.js @@ -1,735 +1,737 @@ -fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { +(function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** + /** * Initializes all the interactive behavior of IText */ - initBehavior: function() { - this.initAddedHandler(); - this.initRemovedHandler(); - this.initCursorSelectionHandlers(); - this.initDoubleClickSimulation(); - this.mouseMoveHandler = this.mouseMoveHandler.bind(this); - }, + initBehavior: function() { + this.initAddedHandler(); + this.initRemovedHandler(); + this.initCursorSelectionHandlers(); + this.initDoubleClickSimulation(); + this.mouseMoveHandler = this.mouseMoveHandler.bind(this); + }, - onDeselect: function() { - this.isEditing && this.exitEditing(); - this.selected = false; - }, + onDeselect: function() { + this.isEditing && this.exitEditing(); + this.selected = false; + }, - /** + /** * Initializes "added" event handler */ - initAddedHandler: function() { - var _this = this; - this.on('added', function (opt) { - // make sure we listen to the canvas added event - var canvas = opt.target; - if (canvas) { - if (!canvas._hasITextHandlers) { - canvas._hasITextHandlers = true; - _this._initCanvasHandlers(canvas); + initAddedHandler: function() { + var _this = this; + this.on('added', function (opt) { + // make sure we listen to the canvas added event + var canvas = opt.target; + if (canvas) { + if (!canvas._hasITextHandlers) { + canvas._hasITextHandlers = true; + _this._initCanvasHandlers(canvas); + } + canvas._iTextInstances = canvas._iTextInstances || []; + canvas._iTextInstances.push(_this); } - canvas._iTextInstances = canvas._iTextInstances || []; - canvas._iTextInstances.push(_this); - } - }); - }, - - initRemovedHandler: function() { - var _this = this; - this.on('removed', function (opt) { - // make sure we listen to the canvas removed event - var canvas = opt.target; - if (canvas) { - canvas._iTextInstances = canvas._iTextInstances || []; - fabric.util.removeFromArray(canvas._iTextInstances, _this); - if (canvas._iTextInstances.length === 0) { - canvas._hasITextHandlers = false; - _this._removeCanvasHandlers(canvas); + }); + }, + + initRemovedHandler: function() { + var _this = this; + this.on('removed', function (opt) { + // make sure we listen to the canvas removed event + var canvas = opt.target; + if (canvas) { + canvas._iTextInstances = canvas._iTextInstances || []; + fabric.util.removeFromArray(canvas._iTextInstances, _this); + if (canvas._iTextInstances.length === 0) { + canvas._hasITextHandlers = false; + _this._removeCanvasHandlers(canvas); + } } - } - }); - }, + }); + }, - /** + /** * register canvas event to manage exiting on other instances * @private */ - _initCanvasHandlers: function(canvas) { - canvas._mouseUpITextHandler = function() { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.__isMousedown = false; - }); - } - }; - canvas.on('mouse:up', canvas._mouseUpITextHandler); - }, + _initCanvasHandlers: function(canvas) { + canvas._mouseUpITextHandler = function() { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.__isMousedown = false; + }); + } + }; + canvas.on('mouse:up', canvas._mouseUpITextHandler); + }, - /** + /** * remove canvas event to manage exiting on other instances * @private */ - _removeCanvasHandlers: function(canvas) { - canvas.off('mouse:up', canvas._mouseUpITextHandler); - }, + _removeCanvasHandlers: function(canvas) { + canvas.off('mouse:up', canvas._mouseUpITextHandler); + }, - /** + /** * @private */ - _tick: function() { - this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); - }, + _tick: function() { + this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); + }, - /** + /** * @private */ - _animateCursor: function(obj, targetOpacity, duration, completeMethod) { + _animateCursor: function(obj, targetOpacity, duration, completeMethod) { - var tickState; + var tickState; - tickState = { - isAborted: false, - abort: function() { - this.isAborted = true; - }, - }; + tickState = { + isAborted: false, + abort: function() { + this.isAborted = true; + }, + }; - obj.animate('_currentCursorOpacity', targetOpacity, { - duration: duration, - onComplete: function() { - if (!tickState.isAborted) { - obj[completeMethod](); - } - }, - onChange: function() { - // we do not want to animate a selection, only cursor - if (obj.canvas && obj.selectionStart === obj.selectionEnd) { - obj.renderCursorOrSelection(); + obj.animate('_currentCursorOpacity', targetOpacity, { + duration: duration, + onComplete: function() { + if (!tickState.isAborted) { + obj[completeMethod](); + } + }, + onChange: function() { + // we do not want to animate a selection, only cursor + if (obj.canvas && obj.selectionStart === obj.selectionEnd) { + obj.renderCursorOrSelection(); + } + }, + abort: function() { + return tickState.isAborted; } - }, - abort: function() { - return tickState.isAborted; - } - }); - return tickState; - }, + }); + return tickState; + }, - /** + /** * @private */ - _onTickComplete: function() { + _onTickComplete: function() { - var _this = this; + var _this = this; - if (this._cursorTimeout1) { - clearTimeout(this._cursorTimeout1); - } - this._cursorTimeout1 = setTimeout(function() { - _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); - }, 100); - }, + if (this._cursorTimeout1) { + clearTimeout(this._cursorTimeout1); + } + this._cursorTimeout1 = setTimeout(function() { + _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); + }, 100); + }, - /** + /** * Initializes delayed cursor */ - initDelayedCursor: function(restart) { - var _this = this, - delay = restart ? 0 : this.cursorDelay; + initDelayedCursor: function(restart) { + var _this = this, + delay = restart ? 0 : this.cursorDelay; - this.abortCursorAnimation(); - this._currentCursorOpacity = 1; - if (delay) { - this._cursorTimeout2 = setTimeout(function () { - _this._tick(); - }, delay); - } - else { - this._tick(); - } - }, + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + if (delay) { + this._cursorTimeout2 = setTimeout(function () { + _this._tick(); + }, delay); + } + else { + this._tick(); + } + }, - /** + /** * Aborts cursor animation and clears all timeouts */ - abortCursorAnimation: function() { - var shouldClear = this._currentTickState || this._currentTickCompleteState, - canvas = this.canvas; - this._currentTickState && this._currentTickState.abort(); - this._currentTickCompleteState && this._currentTickCompleteState.abort(); + abortCursorAnimation: function() { + var shouldClear = this._currentTickState || this._currentTickCompleteState, + canvas = this.canvas; + this._currentTickState && this._currentTickState.abort(); + this._currentTickCompleteState && this._currentTickCompleteState.abort(); - clearTimeout(this._cursorTimeout1); - clearTimeout(this._cursorTimeout2); + clearTimeout(this._cursorTimeout1); + clearTimeout(this._cursorTimeout2); - this._currentCursorOpacity = 0; - // to clear just itext area we need to transform the context - // it may not be worth it - if (shouldClear && canvas) { - canvas.clearContext(canvas.contextTop || canvas.contextContainer); - } + this._currentCursorOpacity = 0; + // to clear just itext area we need to transform the context + // it may not be worth it + if (shouldClear && canvas) { + canvas.clearContext(canvas.contextTop || canvas.contextContainer); + } - }, + }, - /** + /** * Selects entire text * @return {fabric.IText} thisArg * @chainable */ - selectAll: function() { - this.selectionStart = 0; - this.selectionEnd = this._text.length; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + selectAll: function() { + this.selectionStart = 0; + this.selectionEnd = this._text.length; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** + /** * Returns selected text * @return {String} */ - getSelectedText: function() { - return this._text.slice(this.selectionStart, this.selectionEnd).join(''); - }, + getSelectedText: function() { + return this._text.slice(this.selectionStart, this.selectionEnd).join(''); + }, - /** + /** * Find new selection index representing start of current word according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findWordBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; + findWordBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; - // remove space before cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { + // remove space before cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { + offset++; + index--; + } + } + while (/\S/.test(this._text[index]) && index > -1) { offset++; index--; } - } - while (/\S/.test(this._text[index]) && index > -1) { - offset++; - index--; - } - return startFrom - offset; - }, + return startFrom - offset; + }, - /** + /** * Find new selection index representing end of current word according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findWordBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; + findWordBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; - // remove space after cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { + // remove space after cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { + offset++; + index++; + } + } + while (/\S/.test(this._text[index]) && index < this._text.length) { offset++; index++; } - } - while (/\S/.test(this._text[index]) && index < this._text.length) { - offset++; - index++; - } - return startFrom + offset; - }, + return startFrom + offset; + }, - /** + /** * Find new selection index representing start of current line according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findLineBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; + findLineBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; - while (!/\n/.test(this._text[index]) && index > -1) { - offset++; - index--; - } + while (!/\n/.test(this._text[index]) && index > -1) { + offset++; + index--; + } - return startFrom - offset; - }, + return startFrom - offset; + }, - /** + /** * Find new selection index representing end of current line according to current selection index * @param {Number} startFrom Current selection index * @return {Number} New selection index */ - findLineBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; + findLineBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; - while (!/\n/.test(this._text[index]) && index < this._text.length) { - offset++; - index++; - } + while (!/\n/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } - return startFrom + offset; - }, + return startFrom + offset; + }, - /** + /** * Finds index corresponding to beginning or end of a word * @param {Number} selectionStart Index of a character * @param {Number} direction 1 or -1 * @return {Number} Index of the beginning or end of a word */ - searchWordBoundary: function(selectionStart, direction) { - var text = this._text, - index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, - _char = text[index], - // wrong - reNonWord = fabric.reNonWord; + searchWordBoundary: function(selectionStart, direction) { + var text = this._text, + index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, + _char = text[index], + // wrong + reNonWord = fabric.reNonWord; - while (!reNonWord.test(_char) && index > 0 && index < text.length) { - index += direction; - _char = text[index]; - } - if (reNonWord.test(_char)) { - index += direction === 1 ? 0 : 1; - } - return index; - }, + while (!reNonWord.test(_char) && index > 0 && index < text.length) { + index += direction; + _char = text[index]; + } + if (reNonWord.test(_char)) { + index += direction === 1 ? 0 : 1; + } + return index; + }, - /** + /** * Selects a word based on the index * @param {Number} selectionStart Index of a character */ - selectWord: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ - newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ + selectWord: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ + newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - }, + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + }, - /** + /** * Selects a line based on the index * @param {Number} selectionStart Index of a character * @return {fabric.IText} thisArg * @chainable */ - selectLine: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.findLineBoundaryLeft(selectionStart), - newSelectionEnd = this.findLineBoundaryRight(selectionStart); + selectLine: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.findLineBoundaryLeft(selectionStart), + newSelectionEnd = this.findLineBoundaryRight(selectionStart); - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** + /** * Enters editing state * @return {fabric.IText} thisArg * @chainable */ - enterEditing: function(e) { - if (this.isEditing || !this.editable) { - return; - } + enterEditing: function(e) { + if (this.isEditing || !this.editable) { + return; + } - if (this.canvas) { - this.canvas.calcOffset(); - this.exitEditingOnOthers(this.canvas); - } + if (this.canvas) { + this.canvas.calcOffset(); + this.exitEditingOnOthers(this.canvas); + } - this.isEditing = true; + this.isEditing = true; - this.initHiddenTextarea(e); - this.hiddenTextarea.focus(); - this.hiddenTextarea.value = this.text; - this._updateTextarea(); - this._saveEditingProps(); - this._setEditingProps(); - this._textBeforeEdit = this.text; + this.initHiddenTextarea(e); + this.hiddenTextarea.focus(); + this.hiddenTextarea.value = this.text; + this._updateTextarea(); + this._saveEditingProps(); + this._setEditingProps(); + this._textBeforeEdit = this.text; - this._tick(); - this.fire('editing:entered'); - this._fireSelectionChanged(); - if (!this.canvas) { + this._tick(); + this.fire('editing:entered'); + this._fireSelectionChanged(); + if (!this.canvas) { + return this; + } + this.canvas.fire('text:editing:entered', { target: this }); + this.initMouseMoveHandler(); + this.canvas.requestRenderAll(); return this; - } - this.canvas.fire('text:editing:entered', { target: this }); - this.initMouseMoveHandler(); - this.canvas.requestRenderAll(); - return this; - }, - - exitEditingOnOthers: function(canvas) { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.selected = false; - if (obj.isEditing) { - obj.exitEditing(); - } - }); - } - }, + }, - /** + exitEditingOnOthers: function(canvas) { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.selected = false; + if (obj.isEditing) { + obj.exitEditing(); + } + }); + } + }, + + /** * Initializes "mousemove" event handler */ - initMouseMoveHandler: function() { - this.canvas.on('mouse:move', this.mouseMoveHandler); - }, + initMouseMoveHandler: function() { + this.canvas.on('mouse:move', this.mouseMoveHandler); + }, - /** + /** * @private */ - mouseMoveHandler: function(options) { - if (!this.__isMousedown || !this.isEditing) { - return; - } + mouseMoveHandler: function(options) { + if (!this.__isMousedown || !this.isEditing) { + return; + } - var newSelectionStart = this.getSelectionStartFromPointer(options.e), - currentStart = this.selectionStart, - currentEnd = this.selectionEnd; - if ( - (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) + var newSelectionStart = this.getSelectionStartFromPointer(options.e), + currentStart = this.selectionStart, + currentEnd = this.selectionEnd; + if ( + (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) && (currentStart === newSelectionStart || currentEnd === newSelectionStart) - ) { - return; - } - if (newSelectionStart > this.__selectionStartOnMouseDown) { - this.selectionStart = this.__selectionStartOnMouseDown; - this.selectionEnd = newSelectionStart; - } - else { - this.selectionStart = newSelectionStart; - this.selectionEnd = this.__selectionStartOnMouseDown; - } - if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { - this.restartCursorIfNeeded(); - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - } - }, + ) { + return; + } + if (newSelectionStart > this.__selectionStartOnMouseDown) { + this.selectionStart = this.__selectionStartOnMouseDown; + this.selectionEnd = newSelectionStart; + } + else { + this.selectionStart = newSelectionStart; + this.selectionEnd = this.__selectionStartOnMouseDown; + } + if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { + this.restartCursorIfNeeded(); + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + } + }, - /** + /** * @private */ - _setEditingProps: function() { - this.hoverCursor = 'text'; + _setEditingProps: function() { + this.hoverCursor = 'text'; - if (this.canvas) { - this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; - } + if (this.canvas) { + this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; + } - this.borderColor = this.editingBorderColor; - this.hasControls = this.selectable = false; - this.lockMovementX = this.lockMovementY = true; - }, + this.borderColor = this.editingBorderColor; + this.hasControls = this.selectable = false; + this.lockMovementX = this.lockMovementY = true; + }, - /** + /** * convert from textarea to grapheme indexes */ - fromStringToGraphemeSelection: function(start, end, text) { - var smallerTextStart = text.slice(0, start), - graphemeStart = this.graphemeSplit(smallerTextStart).length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = text.slice(start, end), - graphemeEnd = this.graphemeSplit(smallerTextEnd).length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + fromStringToGraphemeSelection: function(start, end, text) { + var smallerTextStart = text.slice(0, start), + graphemeStart = this.graphemeSplit(smallerTextStart).length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = text.slice(start, end), + graphemeEnd = this.graphemeSplit(smallerTextEnd).length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - /** + /** * convert from fabric to textarea values */ - fromGraphemeToStringSelection: function(start, end, _text) { - var smallerTextStart = _text.slice(0, start), - graphemeStart = smallerTextStart.join('').length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = _text.slice(start, end), - graphemeEnd = smallerTextEnd.join('').length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + fromGraphemeToStringSelection: function(start, end, _text) { + var smallerTextStart = _text.slice(0, start), + graphemeStart = smallerTextStart.join('').length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = _text.slice(start, end), + graphemeEnd = smallerTextEnd.join('').length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - /** + /** * @private */ - _updateTextarea: function() { - this.cursorOffsetCache = { }; - if (!this.hiddenTextarea) { - return; - } - if (!this.inCompositionMode) { - var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); - this.hiddenTextarea.selectionStart = newSelection.selectionStart; - this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; - } - this.updateTextareaPosition(); - }, + _updateTextarea: function() { + this.cursorOffsetCache = { }; + if (!this.hiddenTextarea) { + return; + } + if (!this.inCompositionMode) { + var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); + this.hiddenTextarea.selectionStart = newSelection.selectionStart; + this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; + } + this.updateTextareaPosition(); + }, - /** + /** * @private */ - updateFromTextArea: function() { - if (!this.hiddenTextarea) { - return; - } - this.cursorOffsetCache = { }; - this.text = this.hiddenTextarea.value; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - var newSelection = this.fromStringToGraphemeSelection( - this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); - this.selectionEnd = this.selectionStart = newSelection.selectionEnd; - if (!this.inCompositionMode) { - this.selectionStart = newSelection.selectionStart; - } - this.updateTextareaPosition(); - }, + updateFromTextArea: function() { + if (!this.hiddenTextarea) { + return; + } + this.cursorOffsetCache = { }; + this.text = this.hiddenTextarea.value; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + var newSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); + this.selectionEnd = this.selectionStart = newSelection.selectionEnd; + if (!this.inCompositionMode) { + this.selectionStart = newSelection.selectionStart; + } + this.updateTextareaPosition(); + }, - /** + /** * @private */ - updateTextareaPosition: function() { - if (this.selectionStart === this.selectionEnd) { - var style = this._calcTextareaPosition(); - this.hiddenTextarea.style.left = style.left; - this.hiddenTextarea.style.top = style.top; - } - }, + updateTextareaPosition: function() { + if (this.selectionStart === this.selectionEnd) { + var style = this._calcTextareaPosition(); + this.hiddenTextarea.style.left = style.left; + this.hiddenTextarea.style.top = style.top; + } + }, - /** + /** * @private * @return {Object} style contains style for hiddenTextarea */ - _calcTextareaPosition: function() { - if (!this.canvas) { - return { x: 1, y: 1 }; - } - var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, - boundaries = this._getCursorBoundaries(desiredPosition), - cursorLocation = this.get2DCursorLocation(desiredPosition), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, - leftOffset = boundaries.leftOffset, - m = this.calcTransformMatrix(), - p = { - x: boundaries.left + leftOffset, - y: boundaries.top + boundaries.topOffset + charHeight - }, - retinaScaling = this.canvas.getRetinaScaling(), - upperCanvas = this.canvas.upperCanvasEl, - upperCanvasWidth = upperCanvas.width / retinaScaling, - upperCanvasHeight = upperCanvas.height / retinaScaling, - maxWidth = upperCanvasWidth - charHeight, - maxHeight = upperCanvasHeight - charHeight, - scaleX = upperCanvas.clientWidth / upperCanvasWidth, - scaleY = upperCanvas.clientHeight / upperCanvasHeight; - - p = fabric.util.transformPoint(p, m); - p = fabric.util.transformPoint(p, this.canvas.viewportTransform); - p.x *= scaleX; - p.y *= scaleY; - if (p.x < 0) { - p.x = 0; - } - if (p.x > maxWidth) { - p.x = maxWidth; - } - if (p.y < 0) { - p.y = 0; - } - if (p.y > maxHeight) { - p.y = maxHeight; - } + _calcTextareaPosition: function() { + if (!this.canvas) { + return { x: 1, y: 1 }; + } + var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, + boundaries = this._getCursorBoundaries(desiredPosition), + cursorLocation = this.get2DCursorLocation(desiredPosition), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, + leftOffset = boundaries.leftOffset, + m = this.calcTransformMatrix(), + p = { + x: boundaries.left + leftOffset, + y: boundaries.top + boundaries.topOffset + charHeight + }, + retinaScaling = this.canvas.getRetinaScaling(), + upperCanvas = this.canvas.upperCanvasEl, + upperCanvasWidth = upperCanvas.width / retinaScaling, + upperCanvasHeight = upperCanvas.height / retinaScaling, + maxWidth = upperCanvasWidth - charHeight, + maxHeight = upperCanvasHeight - charHeight, + scaleX = upperCanvas.clientWidth / upperCanvasWidth, + scaleY = upperCanvas.clientHeight / upperCanvasHeight; + + p = fabric.util.transformPoint(p, m); + p = fabric.util.transformPoint(p, this.canvas.viewportTransform); + p.x *= scaleX; + p.y *= scaleY; + if (p.x < 0) { + p.x = 0; + } + if (p.x > maxWidth) { + p.x = maxWidth; + } + if (p.y < 0) { + p.y = 0; + } + if (p.y > maxHeight) { + p.y = maxHeight; + } - // add canvas offset on document - p.x += this.canvas._offset.left; - p.y += this.canvas._offset.top; + // add canvas offset on document + p.x += this.canvas._offset.left; + p.y += this.canvas._offset.top; - return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; - }, + return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; + }, - /** + /** * @private */ - _saveEditingProps: function() { - this._savedProps = { - hasControls: this.hasControls, - borderColor: this.borderColor, - lockMovementX: this.lockMovementX, - lockMovementY: this.lockMovementY, - hoverCursor: this.hoverCursor, - selectable: this.selectable, - defaultCursor: this.canvas && this.canvas.defaultCursor, - moveCursor: this.canvas && this.canvas.moveCursor - }; - }, - - /** + _saveEditingProps: function() { + this._savedProps = { + hasControls: this.hasControls, + borderColor: this.borderColor, + lockMovementX: this.lockMovementX, + lockMovementY: this.lockMovementY, + hoverCursor: this.hoverCursor, + selectable: this.selectable, + defaultCursor: this.canvas && this.canvas.defaultCursor, + moveCursor: this.canvas && this.canvas.moveCursor + }; + }, + + /** * @private */ - _restoreEditingProps: function() { - if (!this._savedProps) { - return; - } + _restoreEditingProps: function() { + if (!this._savedProps) { + return; + } - this.hoverCursor = this._savedProps.hoverCursor; - this.hasControls = this._savedProps.hasControls; - this.borderColor = this._savedProps.borderColor; - this.selectable = this._savedProps.selectable; - this.lockMovementX = this._savedProps.lockMovementX; - this.lockMovementY = this._savedProps.lockMovementY; + this.hoverCursor = this._savedProps.hoverCursor; + this.hasControls = this._savedProps.hasControls; + this.borderColor = this._savedProps.borderColor; + this.selectable = this._savedProps.selectable; + this.lockMovementX = this._savedProps.lockMovementX; + this.lockMovementY = this._savedProps.lockMovementY; - if (this.canvas) { - this.canvas.defaultCursor = this._savedProps.defaultCursor; - this.canvas.moveCursor = this._savedProps.moveCursor; - } + if (this.canvas) { + this.canvas.defaultCursor = this._savedProps.defaultCursor; + this.canvas.moveCursor = this._savedProps.moveCursor; + } - delete this._savedProps; - }, + delete this._savedProps; + }, - /** + /** * Exits from editing state * @return {fabric.IText} thisArg * @chainable */ - exitEditing: function() { - var isTextChanged = (this._textBeforeEdit !== this.text); - var hiddenTextarea = this.hiddenTextarea; - this.selected = false; - this.isEditing = false; + exitEditing: function() { + var isTextChanged = (this._textBeforeEdit !== this.text); + var hiddenTextarea = this.hiddenTextarea; + this.selected = false; + this.isEditing = false; - this.selectionEnd = this.selectionStart; + this.selectionEnd = this.selectionStart; - if (hiddenTextarea) { - hiddenTextarea.blur && hiddenTextarea.blur(); - hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); - } - this.hiddenTextarea = null; - this.abortCursorAnimation(); - this._restoreEditingProps(); - this._currentCursorOpacity = 0; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this.fire('editing:exited'); - isTextChanged && this.fire('modified'); - if (this.canvas) { - this.canvas.off('mouse:move', this.mouseMoveHandler); - this.canvas.fire('text:editing:exited', { target: this }); - isTextChanged && this.canvas.fire('object:modified', { target: this }); - } - return this; - }, + if (hiddenTextarea) { + hiddenTextarea.blur && hiddenTextarea.blur(); + hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); + } + this.hiddenTextarea = null; + this.abortCursorAnimation(); + this._restoreEditingProps(); + this._currentCursorOpacity = 0; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this.fire('editing:exited'); + isTextChanged && this.fire('modified'); + if (this.canvas) { + this.canvas.off('mouse:move', this.mouseMoveHandler); + this.canvas.fire('text:editing:exited', { target: this }); + isTextChanged && this.canvas.fire('object:modified', { target: this }); + } + return this; + }, - /** + /** * @private */ - _removeExtraneousStyles: function() { - for (var prop in this.styles) { - if (!this._textLines[prop]) { - delete this.styles[prop]; + _removeExtraneousStyles: function() { + for (var prop in this.styles) { + if (!this._textLines[prop]) { + delete this.styles[prop]; + } } - } - }, + }, - /** + /** * remove and reflow a style block from start to end. * @param {Number} start linear start position for removal (included in removal) * @param {Number} end linear end position for removal ( excluded from removal ) */ - removeStyleFromTo: function(start, end) { - var cursorStart = this.get2DCursorLocation(start, true), - cursorEnd = this.get2DCursorLocation(end, true), - lineStart = cursorStart.lineIndex, - charStart = cursorStart.charIndex, - lineEnd = cursorEnd.lineIndex, - charEnd = cursorEnd.charIndex, - i, styleObj; - if (lineStart !== lineEnd) { - // step1 remove the trailing of lineStart - if (this.styles[lineStart]) { - for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { - delete this.styles[lineStart][i]; + removeStyleFromTo: function(start, end) { + var cursorStart = this.get2DCursorLocation(start, true), + cursorEnd = this.get2DCursorLocation(end, true), + lineStart = cursorStart.lineIndex, + charStart = cursorStart.charIndex, + lineEnd = cursorEnd.lineIndex, + charEnd = cursorEnd.charIndex, + i, styleObj; + if (lineStart !== lineEnd) { + // step1 remove the trailing of lineStart + if (this.styles[lineStart]) { + for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { + delete this.styles[lineStart][i]; + } } - } - // step2 move the trailing of lineEnd to lineStart if needed - if (this.styles[lineEnd]) { - for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { - styleObj = this.styles[lineEnd][i]; - if (styleObj) { - this.styles[lineStart] || (this.styles[lineStart] = { }); - this.styles[lineStart][charStart + i - charEnd] = styleObj; + // step2 move the trailing of lineEnd to lineStart if needed + if (this.styles[lineEnd]) { + for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { + styleObj = this.styles[lineEnd][i]; + if (styleObj) { + this.styles[lineStart] || (this.styles[lineStart] = { }); + this.styles[lineStart][charStart + i - charEnd] = styleObj; + } } } - } - // step3 detects lines will be completely removed. - for (i = lineStart + 1; i <= lineEnd; i++) { - delete this.styles[i]; - } - // step4 shift remaining lines. - this.shiftLineStyles(lineEnd, lineStart - lineEnd); - } - else { - // remove and shift left on the same line - if (this.styles[lineStart]) { - styleObj = this.styles[lineStart]; - var diff = charEnd - charStart, numericChar, _char; - for (i = charStart; i < charEnd; i++) { - delete styleObj[i]; + // step3 detects lines will be completely removed. + for (i = lineStart + 1; i <= lineEnd; i++) { + delete this.styles[i]; } - for (_char in this.styles[lineStart]) { - numericChar = parseInt(_char, 10); - if (numericChar >= charEnd) { - styleObj[numericChar - diff] = styleObj[_char]; - delete styleObj[_char]; + // step4 shift remaining lines. + this.shiftLineStyles(lineEnd, lineStart - lineEnd); + } + else { + // remove and shift left on the same line + if (this.styles[lineStart]) { + styleObj = this.styles[lineStart]; + var diff = charEnd - charStart, numericChar, _char; + for (i = charStart; i < charEnd; i++) { + delete styleObj[i]; + } + for (_char in this.styles[lineStart]) { + numericChar = parseInt(_char, 10); + if (numericChar >= charEnd) { + styleObj[numericChar - diff] = styleObj[_char]; + delete styleObj[_char]; + } } } } - } - }, + }, - /** + /** * Shifts line styles up or down * @param {Number} lineIndex Index of a line * @param {Number} offset Can any number? */ - shiftLineStyles: function(lineIndex, offset) { - // shift all line styles by offset upward or downward - // do not clone deep. we need new array, not new style objects - var clonedStyles = Object.assign({}, this.styles); - for (var line in this.styles) { - var numericLine = parseInt(line, 10); - if (numericLine > lineIndex) { - this.styles[numericLine + offset] = clonedStyles[numericLine]; - if (!clonedStyles[numericLine - offset]) { - delete this.styles[numericLine]; + shiftLineStyles: function(lineIndex, offset) { + // shift all line styles by offset upward or downward + // do not clone deep. we need new array, not new style objects + var clonedStyles = Object.assign({}, this.styles); + for (var line in this.styles) { + var numericLine = parseInt(line, 10); + if (numericLine > lineIndex) { + this.styles[numericLine + offset] = clonedStyles[numericLine]; + if (!clonedStyles[numericLine - offset]) { + delete this.styles[numericLine]; + } } } - } - }, + }, - restartCursorIfNeeded: function() { - if (!this._currentTickState || this._currentTickState.isAborted + restartCursorIfNeeded: function() { + if (!this._currentTickState || this._currentTickState.isAborted || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted - ) { - this.initDelayedCursor(); - } - }, + ) { + this.initDelayedCursor(); + } + }, - /** + /** * Handle insertion of more consecutive style lines for when one or more * newlines gets added to the text. Since current style needs to be shifted * first we shift the current style of the number lines needed, then we add @@ -739,203 +741,204 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot * @param {Number} qty number of lines to add * @param {Array} copiedStyle Array of objects styles */ - insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { - var currentCharStyle, - newLineStyles = {}, - somethingAdded = false, - isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; + insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { + var currentCharStyle, + newLineStyles = {}, + somethingAdded = false, + isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; - qty || (qty = 1); - this.shiftLineStyles(lineIndex, qty); - if (this.styles[lineIndex]) { - currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; - } - // we clone styles of all chars - // after cursor onto the current line - for (var index in this.styles[lineIndex]) { - var numIndex = parseInt(index, 10); - if (numIndex >= charIndex) { - somethingAdded = true; - newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; - // remove lines from the previous line since they're on a new line now - if (!(isEndOfLine && charIndex === 0)) { - delete this.styles[lineIndex][index]; + qty || (qty = 1); + this.shiftLineStyles(lineIndex, qty); + if (this.styles[lineIndex]) { + currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; + } + // we clone styles of all chars + // after cursor onto the current line + for (var index in this.styles[lineIndex]) { + var numIndex = parseInt(index, 10); + if (numIndex >= charIndex) { + somethingAdded = true; + newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; + // remove lines from the previous line since they're on a new line now + if (!(isEndOfLine && charIndex === 0)) { + delete this.styles[lineIndex][index]; + } } } - } - var styleCarriedOver = false; - if (somethingAdded && !isEndOfLine) { - // if is end of line, the extra style we copied - // is probably not something we want - this.styles[lineIndex + qty] = newLineStyles; - styleCarriedOver = true; - } - if (styleCarriedOver) { - // skip the last line of since we already prepared it. - qty--; - } - // for the all the lines or all the other lines - // we clone current char style onto the next (otherwise empty) line - while (qty > 0) { - if (copiedStyle && copiedStyle[qty - 1]) { - this.styles[lineIndex + qty] = { 0: Object.assign({}, copiedStyle[qty - 1]) }; + var styleCarriedOver = false; + if (somethingAdded && !isEndOfLine) { + // if is end of line, the extra style we copied + // is probably not something we want + this.styles[lineIndex + qty] = newLineStyles; + styleCarriedOver = true; } - else if (currentCharStyle) { - this.styles[lineIndex + qty] = { 0: Object.assign({}, currentCharStyle) }; + if (styleCarriedOver) { + // skip the last line of since we already prepared it. + qty--; } - else { - delete this.styles[lineIndex + qty]; + // for the all the lines or all the other lines + // we clone current char style onto the next (otherwise empty) line + while (qty > 0) { + if (copiedStyle && copiedStyle[qty - 1]) { + this.styles[lineIndex + qty] = { 0: Object.assign({}, copiedStyle[qty - 1]) }; + } + else if (currentCharStyle) { + this.styles[lineIndex + qty] = { 0: Object.assign({}, currentCharStyle) }; + } + else { + delete this.styles[lineIndex + qty]; + } + qty--; } - qty--; - } - this._forceClearCache = true; - }, + this._forceClearCache = true; + }, - /** + /** * Inserts style object for a given line/char index * @param {Number} lineIndex Index of a line * @param {Number} charIndex Index of a char * @param {Number} quantity number Style object to insert, if given * @param {Array} copiedStyle array of style objects */ - insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { - if (!this.styles) { - this.styles = {}; - } - var currentLineStyles = this.styles[lineIndex], - currentLineStylesCloned = currentLineStyles ? Object.assign({}, currentLineStyles) : {}; - - quantity || (quantity = 1); - // shift all char styles by quantity forward - // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 - for (var index in currentLineStylesCloned) { - var numericIndex = parseInt(index, 10); - if (numericIndex >= charIndex) { - currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; - // only delete the style if there was nothing moved there - if (!currentLineStylesCloned[numericIndex - quantity]) { - delete currentLineStyles[numericIndex]; - } + insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { + if (!this.styles) { + this.styles = {}; } - } - this._forceClearCache = true; - if (copiedStyle) { - while (quantity--) { - if (!Object.keys(copiedStyle[quantity]).length) { - continue; + var currentLineStyles = this.styles[lineIndex], + currentLineStylesCloned = currentLineStyles ? Object.assign({}, currentLineStyles) : {}; + + quantity || (quantity = 1); + // shift all char styles by quantity forward + // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 + for (var index in currentLineStylesCloned) { + var numericIndex = parseInt(index, 10); + if (numericIndex >= charIndex) { + currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; + // only delete the style if there was nothing moved there + if (!currentLineStylesCloned[numericIndex - quantity]) { + delete currentLineStyles[numericIndex]; + } } - if (!this.styles[lineIndex]) { - this.styles[lineIndex] = {}; + } + this._forceClearCache = true; + if (copiedStyle) { + while (quantity--) { + if (!Object.keys(copiedStyle[quantity]).length) { + continue; + } + if (!this.styles[lineIndex]) { + this.styles[lineIndex] = {}; + } + this.styles[lineIndex][charIndex + quantity] = Object.assign({}, copiedStyle[quantity]); } - this.styles[lineIndex][charIndex + quantity] = Object.assign({}, copiedStyle[quantity]); + return; } - return; - } - if (!currentLineStyles) { - return; - } - var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; - while (newStyle && quantity--) { - this.styles[lineIndex][charIndex + quantity] = Object.assign({}, newStyle); - } - }, + if (!currentLineStyles) { + return; + } + var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; + while (newStyle && quantity--) { + this.styles[lineIndex][charIndex + quantity] = Object.assign({}, newStyle); + } + }, - /** + /** * Inserts style object(s) * @param {Array} insertedText Characters at the location where style is inserted * @param {Number} start cursor index for inserting style * @param {Array} [copiedStyle] array of style objects to insert. */ - insertNewStyleBlock: function(insertedText, start, copiedStyle) { - var cursorLoc = this.get2DCursorLocation(start, true), - addedLines = [0], linesLength = 0; - // get an array of how many char per lines are being added. - for (var i = 0; i < insertedText.length; i++) { - if (insertedText[i] === '\n') { - linesLength++; - addedLines[linesLength] = 0; + insertNewStyleBlock: function(insertedText, start, copiedStyle) { + var cursorLoc = this.get2DCursorLocation(start, true), + addedLines = [0], linesLength = 0; + // get an array of how many char per lines are being added. + for (var i = 0; i < insertedText.length; i++) { + if (insertedText[i] === '\n') { + linesLength++; + addedLines[linesLength] = 0; + } + else { + addedLines[linesLength]++; + } } - else { - addedLines[linesLength]++; + // for the first line copy the style from the current char position. + if (addedLines[0] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); } - } - // for the first line copy the style from the current char position. - if (addedLines[0] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); - } - linesLength && this.insertNewlineStyleObject( - cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); - for (var i = 1; i < linesLength; i++) { + linesLength && this.insertNewlineStyleObject( + cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); + for (var i = 1; i < linesLength; i++) { + if (addedLines[i] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); + } + else if (copiedStyle) { + // this test is required in order to close #6841 + // when a pasted buffer begins with a newline then + // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] + // may be undefined for some reason + if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { + this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; + } + } + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); + } + // we use i outside the loop to get it like linesLength if (addedLines[i] > 0) { this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); } - else if (copiedStyle) { - // this test is required in order to close #6841 - // when a pasted buffer begins with a newline then - // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] - // may be undefined for some reason - if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { - this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; - } - } - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); - } - // we use i outside the loop to get it like linesLength - if (addedLines[i] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); - } - }, + }, - /** + /** * Set the selectionStart and selectionEnd according to the new position of cursor * mimic the key - mouse navigation when shift is pressed. */ - setSelectionStartEndWithShift: function(start, end, newSelection) { - if (newSelection <= start) { - if (end === start) { - this._selectionDirection = 'left'; + setSelectionStartEndWithShift: function(start, end, newSelection) { + if (newSelection <= start) { + if (end === start) { + this._selectionDirection = 'left'; + } + else if (this._selectionDirection === 'right') { + this._selectionDirection = 'left'; + this.selectionEnd = start; + } + this.selectionStart = newSelection; } - else if (this._selectionDirection === 'right') { - this._selectionDirection = 'left'; - this.selectionEnd = start; + else if (newSelection > start && newSelection < end) { + if (this._selectionDirection === 'right') { + this.selectionEnd = newSelection; + } + else { + this.selectionStart = newSelection; + } } - this.selectionStart = newSelection; - } - else if (newSelection > start && newSelection < end) { - if (this._selectionDirection === 'right') { + else { + // newSelection is > selection start and end + if (end === start) { + this._selectionDirection = 'right'; + } + else if (this._selectionDirection === 'left') { + this._selectionDirection = 'right'; + this.selectionStart = end; + } this.selectionEnd = newSelection; } - else { - this.selectionStart = newSelection; + }, + + setSelectionInBoundaries: function() { + var length = this.text.length; + if (this.selectionStart > length) { + this.selectionStart = length; } - } - else { - // newSelection is > selection start and end - if (end === start) { - this._selectionDirection = 'right'; + else if (this.selectionStart < 0) { + this.selectionStart = 0; } - else if (this._selectionDirection === 'left') { - this._selectionDirection = 'right'; - this.selectionStart = end; + if (this.selectionEnd > length) { + this.selectionEnd = length; + } + else if (this.selectionEnd < 0) { + this.selectionEnd = 0; } - this.selectionEnd = newSelection; - } - }, - - setSelectionInBoundaries: function() { - var length = this.text.length; - if (this.selectionStart > length) { - this.selectionStart = length; - } - else if (this.selectionStart < 0) { - this.selectionStart = 0; - } - if (this.selectionEnd > length) { - this.selectionEnd = length; - } - else if (this.selectionEnd < 0) { - this.selectionEnd = 0; } - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/itext_click_behavior.mixin.js b/src/mixins/itext_click_behavior.mixin.js index b1bac2b8895..efaa560936c 100644 --- a/src/mixins/itext_click_behavior.mixin.js +++ b/src/mixins/itext_click_behavior.mixin.js @@ -1,279 +1,282 @@ -fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** - * Initializes "dbclick" event handler - */ - initDoubleClickSimulation: function() { +(function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + /** + * Initializes "dbclick" event handler + */ + initDoubleClickSimulation: function() { - // for double click - this.__lastClickTime = +new Date(); + // for double click + this.__lastClickTime = +new Date(); - // for triple click - this.__lastLastClickTime = +new Date(); + // for triple click + this.__lastLastClickTime = +new Date(); - this.__lastPointer = { }; + this.__lastPointer = { }; - this.on('mousedown', this.onMouseDown); - }, + this.on('mousedown', this.onMouseDown); + }, - /** - * Default event handler to simulate triple click - * @private - */ - onMouseDown: function(options) { - if (!this.canvas) { - return; - } - this.__newClickTime = +new Date(); - var newPointer = options.pointer; - if (this.isTripleClick(newPointer)) { - this.fire('tripleclick', options); - this._stopEvent(options.e); - } - this.__lastLastClickTime = this.__lastClickTime; - this.__lastClickTime = this.__newClickTime; - this.__lastPointer = newPointer; - this.__lastIsEditing = this.isEditing; - this.__lastSelected = this.selected; - }, - - isTripleClick: function(newPointer) { - return this.__newClickTime - this.__lastClickTime < 500 && - this.__lastClickTime - this.__lastLastClickTime < 500 && - this.__lastPointer.x === newPointer.x && - this.__lastPointer.y === newPointer.y; - }, + /** + * Default event handler to simulate triple click + * @private + */ + onMouseDown: function(options) { + if (!this.canvas) { + return; + } + this.__newClickTime = +new Date(); + var newPointer = options.pointer; + if (this.isTripleClick(newPointer)) { + this.fire('tripleclick', options); + this._stopEvent(options.e); + } + this.__lastLastClickTime = this.__lastClickTime; + this.__lastClickTime = this.__newClickTime; + this.__lastPointer = newPointer; + this.__lastIsEditing = this.isEditing; + this.__lastSelected = this.selected; + }, - /** - * @private - */ - _stopEvent: function(e) { - e.preventDefault && e.preventDefault(); - e.stopPropagation && e.stopPropagation(); - }, + isTripleClick: function(newPointer) { + return this.__newClickTime - this.__lastClickTime < 500 && + this.__lastClickTime - this.__lastLastClickTime < 500 && + this.__lastPointer.x === newPointer.x && + this.__lastPointer.y === newPointer.y; + }, - /** - * Initializes event handlers related to cursor or selection - */ - initCursorSelectionHandlers: function() { - this.initMousedownHandler(); - this.initMouseupHandler(); - this.initClicks(); - }, + /** + * @private + */ + _stopEvent: function(e) { + e.preventDefault && e.preventDefault(); + e.stopPropagation && e.stopPropagation(); + }, - /** - * Default handler for double click, select a word - */ - doubleClickHandler: function(options) { - if (!this.isEditing) { - return; - } - this.selectWord(this.getSelectionStartFromPointer(options.e)); - }, + /** + * Initializes event handlers related to cursor or selection + */ + initCursorSelectionHandlers: function() { + this.initMousedownHandler(); + this.initMouseupHandler(); + this.initClicks(); + }, - /** - * Default handler for triple click, select a line - */ - tripleClickHandler: function(options) { - if (!this.isEditing) { - return; - } - this.selectLine(this.getSelectionStartFromPointer(options.e)); - }, + /** + * Default handler for double click, select a word + */ + doubleClickHandler: function(options) { + if (!this.isEditing) { + return; + } + this.selectWord(this.getSelectionStartFromPointer(options.e)); + }, - /** - * Initializes double and triple click event handlers - */ - initClicks: function() { - this.on('mousedblclick', this.doubleClickHandler); - this.on('tripleclick', this.tripleClickHandler); - }, + /** + * Default handler for triple click, select a line + */ + tripleClickHandler: function(options) { + if (!this.isEditing) { + return; + } + this.selectLine(this.getSelectionStartFromPointer(options.e)); + }, - /** - * Default event handler for the basic functionalities needed on _mouseDown - * can be overridden to do something different. - * Scope of this implementation is: find the click position, set selectionStart - * find selectionEnd, initialize the drawing of either cursor or selection area - * initializing a mousedDown on a text area will cancel fabricjs knowledge of - * current compositionMode. It will be set to false. - */ - _mouseDownHandler: function(options) { - if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { - return; - } + /** + * Initializes double and triple click event handlers + */ + initClicks: function() { + this.on('mousedblclick', this.doubleClickHandler); + this.on('tripleclick', this.tripleClickHandler); + }, - this.__isMousedown = true; + /** + * Default event handler for the basic functionalities needed on _mouseDown + * can be overridden to do something different. + * Scope of this implementation is: find the click position, set selectionStart + * find selectionEnd, initialize the drawing of either cursor or selection area + * initializing a mousedDown on a text area will cancel fabricjs knowledge of + * current compositionMode. It will be set to false. + */ + _mouseDownHandler: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; + } - if (this.selected) { - this.inCompositionMode = false; - this.setCursorByClick(options.e); - } + this.__isMousedown = true; - if (this.isEditing) { - this.__selectionStartOnMouseDown = this.selectionStart; - if (this.selectionStart === this.selectionEnd) { - this.abortCursorAnimation(); + if (this.selected) { + this.inCompositionMode = false; + this.setCursorByClick(options.e); } - this.renderCursorOrSelection(); - } - }, - /** - * Default event handler for the basic functionalities needed on mousedown:before - * can be overridden to do something different. - * Scope of this implementation is: verify the object is already selected when mousing down - */ - _mouseDownHandlerBefore: function(options) { - if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { - return; - } - // we want to avoid that an object that was selected and then becomes unselectable, - // may trigger editing mode in some way. - this.selected = this === this.canvas._activeObject; - }, + if (this.isEditing) { + this.__selectionStartOnMouseDown = this.selectionStart; + if (this.selectionStart === this.selectionEnd) { + this.abortCursorAnimation(); + } + this.renderCursorOrSelection(); + } + }, - /** - * Initializes "mousedown" event handler - */ - initMousedownHandler: function() { - this.on('mousedown', this._mouseDownHandler); - this.on('mousedown:before', this._mouseDownHandlerBefore); - }, + /** + * Default event handler for the basic functionalities needed on mousedown:before + * can be overridden to do something different. + * Scope of this implementation is: verify the object is already selected when mousing down + */ + _mouseDownHandlerBefore: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; + } + // we want to avoid that an object that was selected and then becomes unselectable, + // may trigger editing mode in some way. + this.selected = this === this.canvas._activeObject; + }, - /** - * Initializes "mouseup" event handler - */ - initMouseupHandler: function() { - this.on('mouseup', this.mouseUpHandler); - }, + /** + * Initializes "mousedown" event handler + */ + initMousedownHandler: function() { + this.on('mousedown', this._mouseDownHandler); + this.on('mousedown:before', this._mouseDownHandlerBefore); + }, - /** - * standard handler for mouse up, overridable - * @private - */ - mouseUpHandler: function(options) { - this.__isMousedown = false; - if (!this.editable || - (this.group && !this.group.interactive) || - (options.transform && options.transform.actionPerformed) || - (options.e.button && options.e.button !== 1)) { - return; - } + /** + * Initializes "mouseup" event handler + */ + initMouseupHandler: function() { + this.on('mouseup', this.mouseUpHandler); + }, - if (this.canvas) { - var currentActive = this.canvas._activeObject; - if (currentActive && currentActive !== this) { - // avoid running this logic when there is an active object - // this because is possible with shift click and fast clicks, - // to rapidly deselect and reselect this object and trigger an enterEdit + /** + * standard handler for mouse up, overridable + * @private + */ + mouseUpHandler: function(options) { + this.__isMousedown = false; + if (!this.editable || + (this.group && !this.group.interactive) || + (options.transform && options.transform.actionPerformed) || + (options.e.button && options.e.button !== 1)) { return; } - } - if (this.__lastSelected && !this.__corner) { - this.selected = false; - this.__lastSelected = false; - this.enterEditing(options.e); - if (this.selectionStart === this.selectionEnd) { - this.initDelayedCursor(true); + if (this.canvas) { + var currentActive = this.canvas._activeObject; + if (currentActive && currentActive !== this) { + // avoid running this logic when there is an active object + // this because is possible with shift click and fast clicks, + // to rapidly deselect and reselect this object and trigger an enterEdit + return; + } + } + + if (this.__lastSelected && !this.__corner) { + this.selected = false; + this.__lastSelected = false; + this.enterEditing(options.e); + if (this.selectionStart === this.selectionEnd) { + this.initDelayedCursor(true); + } + else { + this.renderCursorOrSelection(); + } } else { - this.renderCursorOrSelection(); + this.selected = true; } - } - else { - this.selected = true; - } - }, + }, - /** - * Changes cursor location in a text depending on passed pointer (x/y) object - * @param {Event} e Event object - */ - setCursorByClick: function(e) { - var newSelection = this.getSelectionStartFromPointer(e), - start = this.selectionStart, end = this.selectionEnd; - if (e.shiftKey) { - this.setSelectionStartEndWithShift(start, end, newSelection); - } - else { - this.selectionStart = newSelection; - this.selectionEnd = newSelection; - } - if (this.isEditing) { - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, + /** + * Changes cursor location in a text depending on passed pointer (x/y) object + * @param {Event} e Event object + */ + setCursorByClick: function(e) { + var newSelection = this.getSelectionStartFromPointer(e), + start = this.selectionStart, end = this.selectionEnd; + if (e.shiftKey) { + this.setSelectionStartEndWithShift(start, end, newSelection); + } + else { + this.selectionStart = newSelection; + this.selectionEnd = newSelection; + } + if (this.isEditing) { + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - /** - * Returns index of a character corresponding to where an object was clicked - * @param {Event} e Event object - * @return {Number} Index of a character - */ - getSelectionStartFromPointer: function(e) { - var mouseOffset = this.getLocalPointer(e), - prevWidth = 0, - width = 0, - height = 0, - charIndex = 0, - lineIndex = 0, - lineLeftOffset, - line; - for (var i = 0, len = this._textLines.length; i < len; i++) { - if (height <= mouseOffset.y) { - height += this.getHeightOfLine(i) * this.scaleY; - lineIndex = i; - if (i > 0) { - charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1); + /** + * Returns index of a character corresponding to where an object was clicked + * @param {Event} e Event object + * @return {Number} Index of a character + */ + getSelectionStartFromPointer: function(e) { + var mouseOffset = this.getLocalPointer(e), + prevWidth = 0, + width = 0, + height = 0, + charIndex = 0, + lineIndex = 0, + lineLeftOffset, + line; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (height <= mouseOffset.y) { + height += this.getHeightOfLine(i) * this.scaleY; + lineIndex = i; + if (i > 0) { + charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1); + } + } + else { + break; } } - else { - break; + lineLeftOffset = Math.abs(this._getLineLeftOffset(lineIndex)); + width = lineLeftOffset * this.scaleX; + line = this._textLines[lineIndex]; + // handling of RTL: in order to get things work correctly, + // we assume RTL writing is mirrored compared to LTR writing. + // so in position detection we mirror the X offset, and when is time + // of rendering it, we mirror it again. + if (this.direction === 'rtl') { + mouseOffset.x = this.width * this.scaleX - mouseOffset.x; } - } - lineLeftOffset = Math.abs(this._getLineLeftOffset(lineIndex)); - width = lineLeftOffset * this.scaleX; - line = this._textLines[lineIndex]; - // handling of RTL: in order to get things work correctly, - // we assume RTL writing is mirrored compared to LTR writing. - // so in position detection we mirror the X offset, and when is time - // of rendering it, we mirror it again. - if (this.direction === 'rtl') { - mouseOffset.x = this.width * this.scaleX - mouseOffset.x; - } - for (var j = 0, jlen = line.length; j < jlen; j++) { - prevWidth = width; - // i removed something about flipX here, check. - width += this.__charBounds[lineIndex][j].kernedWidth * this.scaleX; - if (width <= mouseOffset.x) { - charIndex++; + for (var j = 0, jlen = line.length; j < jlen; j++) { + prevWidth = width; + // i removed something about flipX here, check. + width += this.__charBounds[lineIndex][j].kernedWidth * this.scaleX; + if (width <= mouseOffset.x) { + charIndex++; + } + else { + break; + } } - else { - break; + return this._getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, charIndex, jlen); + }, + + /** + * @private + */ + _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) { + // we need Math.abs because when width is after the last char, the offset is given as 1, while is 0 + var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth, + distanceBtwNextCharAndCursor = width - mouseOffset.x, + offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor || + distanceBtwNextCharAndCursor < 0 ? 0 : 1, + newSelectionStart = index + offset; + // if object is horizontally flipped, mirror cursor location from the end + if (this.flipX) { + newSelectionStart = jlen - newSelectionStart; } - } - return this._getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, charIndex, jlen); - }, - /** - * @private - */ - _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) { - // we need Math.abs because when width is after the last char, the offset is given as 1, while is 0 - var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth, - distanceBtwNextCharAndCursor = width - mouseOffset.x, - offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor || - distanceBtwNextCharAndCursor < 0 ? 0 : 1, - newSelectionStart = index + offset; - // if object is horizontally flipped, mirror cursor location from the end - if (this.flipX) { - newSelectionStart = jlen - newSelectionStart; - } + if (newSelectionStart > this._text.length) { + newSelectionStart = this._text.length; + } - if (newSelectionStart > this._text.length) { - newSelectionStart = this._text.length; + return newSelectionStart; } - - return newSelectionStart; - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/itext_key_behavior.mixin.js b/src/mixins/itext_key_behavior.mixin.js index dbbb5d7c907..f999326296b 100644 --- a/src/mixins/itext_key_behavior.mixin.js +++ b/src/mixins/itext_key_behavior.mixin.js @@ -1,702 +1,705 @@ -fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - - /** - * Initializes hidden textarea (needed to bring up keyboard in iOS) - */ - initHiddenTextarea: function() { - this.hiddenTextarea = fabric.document.createElement('textarea'); - this.hiddenTextarea.setAttribute('autocapitalize', 'off'); - this.hiddenTextarea.setAttribute('autocorrect', 'off'); - this.hiddenTextarea.setAttribute('autocomplete', 'off'); - this.hiddenTextarea.setAttribute('spellcheck', 'false'); - this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); - this.hiddenTextarea.setAttribute('wrap', 'off'); - var style = this._calcTextareaPosition(); - // line-height: 1px; was removed from the style to fix this: - // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 - this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + - '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + - ' padding-top: ' + style.fontSize + ';'; - - if (this.hiddenTextareaContainer) { - this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); - } - else { - fabric.document.body.appendChild(this.hiddenTextarea); - } - - fabric.util.addListener(this.hiddenTextarea, 'blur', this.blur.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); - - if (!this._clickHandlerInitialized && this.canvas) { - fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this)); - this._clickHandlerInitialized = true; - } - }, - - /** - * For functionalities on keyDown - * Map a special key to a function of the instance/prototype - * If you need different behaviour for ESC or TAB or arrows, you have to change - * this map setting the name of a function that you build on the fabric.Itext or - * your prototype. - * the map change will affect all Instances unless you need for only some text Instances - * in that case you have to clone this object and assign your Instance. - * this.keysMap = Object.assign({}, this.keysMap); - * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] - */ - keysMap: { - 9: 'exitEditing', - 27: 'exitEditing', - 33: 'moveCursorUp', - 34: 'moveCursorDown', - 35: 'moveCursorRight', - 36: 'moveCursorLeft', - 37: 'moveCursorLeft', - 38: 'moveCursorUp', - 39: 'moveCursorRight', - 40: 'moveCursorDown', - }, - - keysMapRtl: { - 9: 'exitEditing', - 27: 'exitEditing', - 33: 'moveCursorUp', - 34: 'moveCursorDown', - 35: 'moveCursorLeft', - 36: 'moveCursorRight', - 37: 'moveCursorRight', - 38: 'moveCursorUp', - 39: 'moveCursorLeft', - 40: 'moveCursorDown', - }, - - /** - * For functionalities on keyUp + ctrl || cmd - */ - ctrlKeysMapUp: { - 67: 'copy', - 88: 'cut' - }, - - /** - * For functionalities on keyDown + ctrl || cmd - */ - ctrlKeysMapDown: { - 65: 'selectAll' - }, - - onClick: function() { - // No need to trigger click event here, focus is enough to have the keyboard appear on Android - this.hiddenTextarea && this.hiddenTextarea.focus(); - }, - - /** - * Override this method to customize cursor behavior on textbox blur - */ - blur: function () { - this.abortCursorAnimation(); - }, - - /** - * Handles keydown event - * only used for arrows and combination of modifier keys. - * @param {Event} e Event object - */ - onKeyDown: function(e) { - if (!this.isEditing) { - return; - } - var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap; - if (e.keyCode in keyMap) { - this[keyMap[e.keyCode]](e); - } - else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) { - this[this.ctrlKeysMapDown[e.keyCode]](e); - } - else { - return; - } - e.stopImmediatePropagation(); - e.preventDefault(); - if (e.keyCode >= 33 && e.keyCode <= 40) { - // if i press an arrow key just update selection - this.inCompositionMode = false; - this.clearContextTop(); - this.renderCursorOrSelection(); - } - else { +(function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + + /** + * Initializes hidden textarea (needed to bring up keyboard in iOS) + */ + initHiddenTextarea: function() { + this.hiddenTextarea = fabric.document.createElement('textarea'); + this.hiddenTextarea.setAttribute('autocapitalize', 'off'); + this.hiddenTextarea.setAttribute('autocorrect', 'off'); + this.hiddenTextarea.setAttribute('autocomplete', 'off'); + this.hiddenTextarea.setAttribute('spellcheck', 'false'); + this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); + this.hiddenTextarea.setAttribute('wrap', 'off'); + var style = this._calcTextareaPosition(); + // line-height: 1px; was removed from the style to fix this: + // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 + this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + + '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + + ' padding-top: ' + style.fontSize + ';'; + + if (this.hiddenTextareaContainer) { + this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); + } + else { + fabric.document.body.appendChild(this.hiddenTextarea); + } + + fabric.util.addListener(this.hiddenTextarea, 'blur', this.blur.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); + + if (!this._clickHandlerInitialized && this.canvas) { + fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this)); + this._clickHandlerInitialized = true; + } + }, + + /** + * For functionalities on keyDown + * Map a special key to a function of the instance/prototype + * If you need different behaviour for ESC or TAB or arrows, you have to change + * this map setting the name of a function that you build on the fabric.Itext or + * your prototype. + * the map change will affect all Instances unless you need for only some text Instances + * in that case you have to clone this object and assign your Instance. + * this.keysMap = Object.assign({}, this.keysMap); + * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] + */ + keysMap: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorRight', + 36: 'moveCursorLeft', + 37: 'moveCursorLeft', + 38: 'moveCursorUp', + 39: 'moveCursorRight', + 40: 'moveCursorDown', + }, + + keysMapRtl: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorLeft', + 36: 'moveCursorRight', + 37: 'moveCursorRight', + 38: 'moveCursorUp', + 39: 'moveCursorLeft', + 40: 'moveCursorDown', + }, + + /** + * For functionalities on keyUp + ctrl || cmd + */ + ctrlKeysMapUp: { + 67: 'copy', + 88: 'cut' + }, + + /** + * For functionalities on keyDown + ctrl || cmd + */ + ctrlKeysMapDown: { + 65: 'selectAll' + }, + + onClick: function() { + // No need to trigger click event here, focus is enough to have the keyboard appear on Android + this.hiddenTextarea && this.hiddenTextarea.focus(); + }, + + /** + * Override this method to customize cursor behavior on textbox blur + */ + blur: function () { + this.abortCursorAnimation(); + }, + + /** + * Handles keydown event + * only used for arrows and combination of modifier keys. + * @param {Event} e Event object + */ + onKeyDown: function(e) { + if (!this.isEditing) { + return; + } + var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap; + if (e.keyCode in keyMap) { + this[keyMap[e.keyCode]](e); + } + else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapDown[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); + if (e.keyCode >= 33 && e.keyCode <= 40) { + // if i press an arrow key just update selection + this.inCompositionMode = false; + this.clearContextTop(); + this.renderCursorOrSelection(); + } + else { + this.canvas && this.canvas.requestRenderAll(); + } + }, + + /** + * Handles keyup event + * We handle KeyUp because ie11 and edge have difficulties copy/pasting + * if a copy/cut event fired, keyup is dismissed + * @param {Event} e Event object + */ + onKeyUp: function(e) { + if (!this.isEditing || this._copyDone || this.inCompositionMode) { + this._copyDone = false; + return; + } + if ((e.keyCode in this.ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapUp[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); this.canvas && this.canvas.requestRenderAll(); - } - }, - - /** - * Handles keyup event - * We handle KeyUp because ie11 and edge have difficulties copy/pasting - * if a copy/cut event fired, keyup is dismissed - * @param {Event} e Event object - */ - onKeyUp: function(e) { - if (!this.isEditing || this._copyDone || this.inCompositionMode) { - this._copyDone = false; - return; - } - if ((e.keyCode in this.ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) { - this[this.ctrlKeysMapUp[e.keyCode]](e); - } - else { - return; - } - e.stopImmediatePropagation(); - e.preventDefault(); - this.canvas && this.canvas.requestRenderAll(); - }, - - /** - * Handles onInput event - * @param {Event} e Event object - */ - onInput: function(e) { - var fromPaste = this.fromPaste; - this.fromPaste = false; - e && e.stopPropagation(); - if (!this.isEditing) { - return; - } - // decisions about style changes. - var nextText = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, - charCount = this._text.length, - nextCharCount = nextText.length, - removedText, insertedText, - charDiff = nextCharCount - charCount, - selectionStart = this.selectionStart, selectionEnd = this.selectionEnd, - selection = selectionStart !== selectionEnd, - copiedStyle, removeFrom, removeTo; - if (this.hiddenTextarea.value === '') { - this.styles = { }; + }, + + /** + * Handles onInput event + * @param {Event} e Event object + */ + onInput: function(e) { + var fromPaste = this.fromPaste; + this.fromPaste = false; + e && e.stopPropagation(); + if (!this.isEditing) { + return; + } + // decisions about style changes. + var nextText = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, + charCount = this._text.length, + nextCharCount = nextText.length, + removedText, insertedText, + charDiff = nextCharCount - charCount, + selectionStart = this.selectionStart, selectionEnd = this.selectionEnd, + selection = selectionStart !== selectionEnd, + copiedStyle, removeFrom, removeTo; + if (this.hiddenTextarea.value === '') { + this.styles = { }; + this.updateFromTextArea(); + this.fire('changed'); + if (this.canvas) { + this.canvas.fire('text:changed', { target: this }); + this.canvas.requestRenderAll(); + } + return; + } + + var textareaSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, + this.hiddenTextarea.selectionEnd, + this.hiddenTextarea.value + ); + var backDelete = selectionStart > textareaSelection.selectionStart; + + if (selection) { + removedText = this._text.slice(selectionStart, selectionEnd); + charDiff += selectionEnd - selectionStart; + } + else if (nextCharCount < charCount) { + if (backDelete) { + removedText = this._text.slice(selectionEnd + charDiff, selectionEnd); + } + else { + removedText = this._text.slice(selectionStart, selectionStart - charDiff); + } + } + insertedText = nextText.slice(textareaSelection.selectionEnd - charDiff, textareaSelection.selectionEnd); + if (removedText && removedText.length) { + if (insertedText.length) { + // let's copy some style before deleting. + // we want to copy the style before the cursor OR the style at the cursor if selection + // is bigger than 0. + copiedStyle = this.getSelectionStyles(selectionStart, selectionStart + 1, false); + // now duplicate the style one for each inserted text. + copiedStyle = insertedText.map(function() { + // this return an array of references, but that is fine since we are + // copying the style later. + return copiedStyle[0]; + }); + } + if (selection) { + removeFrom = selectionStart; + removeTo = selectionEnd; + } + else if (backDelete) { + // detect differences between forwardDelete and backDelete + removeFrom = selectionEnd - removedText.length; + removeTo = selectionEnd; + } + else { + removeFrom = selectionEnd; + removeTo = selectionEnd + removedText.length; + } + this.removeStyleFromTo(removeFrom, removeTo); + } + if (insertedText.length) { + if (fromPaste && insertedText.join('') === fabric.copiedText && !fabric.disableStyleCopyPaste) { + copiedStyle = fabric.copiedTextStyle; + } + this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle); + } this.updateFromTextArea(); this.fire('changed'); if (this.canvas) { this.canvas.fire('text:changed', { target: this }); this.canvas.requestRenderAll(); } - return; - } + }, + /** + * Composition start + */ + onCompositionStart: function() { + this.inCompositionMode = true; + }, + + /** + * Composition end + */ + onCompositionEnd: function() { + this.inCompositionMode = false; + }, + + // /** + // * Composition update + // */ + onCompositionUpdate: function(e) { + this.compositionStart = e.target.selectionStart; + this.compositionEnd = e.target.selectionEnd; + this.updateTextareaPosition(); + }, + + /** + * Copies selected text + * @param {Event} e Event object + */ + copy: function() { + if (this.selectionStart === this.selectionEnd) { + //do not cut-copy if no selection + return; + } - var textareaSelection = this.fromStringToGraphemeSelection( - this.hiddenTextarea.selectionStart, - this.hiddenTextarea.selectionEnd, - this.hiddenTextarea.value - ); - var backDelete = selectionStart > textareaSelection.selectionStart; + fabric.copiedText = this.getSelectedText(); + if (!fabric.disableStyleCopyPaste) { + fabric.copiedTextStyle = this.getSelectionStyles(this.selectionStart, this.selectionEnd, true); + } + else { + fabric.copiedTextStyle = null; + } + this._copyDone = true; + }, + + /** + * Pastes text + * @param {Event} e Event object + */ + paste: function() { + this.fromPaste = true; + }, + + /** + * @private + * @param {Event} e Event object + * @return {Object} Clipboard data object + */ + _getClipboardData: function(e) { + return (e && e.clipboardData) || fabric.window.clipboardData; + }, + + /** + * Finds the width in pixels before the cursor on the same line + * @private + * @param {Number} lineIndex + * @param {Number} charIndex + * @return {Number} widthBeforeCursor width before cursor + */ + _getWidthBeforeCursor: function(lineIndex, charIndex) { + var widthBeforeCursor = this._getLineLeftOffset(lineIndex), bound; + + if (charIndex > 0) { + bound = this.__charBounds[lineIndex][charIndex - 1]; + widthBeforeCursor += bound.left + bound.width; + } + return widthBeforeCursor; + }, + + /** + * Gets start offset of a selection + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getDownCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + // if on last line, down cursor goes to end of line + if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) { + // move to the end of a text + return this._text.length - selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor), + textAfterCursor = this._textLines[lineIndex].slice(charIndex); + return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex); + }, + + /** + * private + * Helps finding if the offset should be counted from Start or End + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + _getSelectionForOffset: function(e, isRight) { + if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) { + return this.selectionEnd; + } + else { + return this.selectionStart; + } + }, + + /** + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getUpCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + if (lineIndex === 0 || e.metaKey || e.keyCode === 33) { + // if on first line, up cursor goes to start of line + return -selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor), + textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex), + missingNewlineOffset = this.missingNewlineOffset(lineIndex - 1); + // return a negative offset + return -this._textLines[lineIndex - 1].length + + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset); + }, + + /** + * for a given width it founds the matching character. + * @private + */ + _getIndexOnLine: function(lineIndex, width) { + + var line = this._textLines[lineIndex], + lineLeftOffset = this._getLineLeftOffset(lineIndex), + widthOfCharsOnLine = lineLeftOffset, + indexOnLine = 0, charWidth, foundMatch; + + for (var j = 0, jlen = line.length; j < jlen; j++) { + charWidth = this.__charBounds[lineIndex][j].width; + widthOfCharsOnLine += charWidth; + if (widthOfCharsOnLine > width) { + foundMatch = true; + var leftEdge = widthOfCharsOnLine - charWidth, + rightEdge = widthOfCharsOnLine, + offsetFromLeftEdge = Math.abs(leftEdge - width), + offsetFromRightEdge = Math.abs(rightEdge - width); + + indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1); + break; + } + } - if (selection) { - removedText = this._text.slice(selectionStart, selectionEnd); - charDiff += selectionEnd - selectionStart; - } - else if (nextCharCount < charCount) { - if (backDelete) { - removedText = this._text.slice(selectionEnd + charDiff, selectionEnd); + // reached end + if (!foundMatch) { + indexOnLine = line.length - 1; + } + + return indexOnLine; + }, + + + /** + * Moves cursor down + * @param {Event} e Event object + */ + moveCursorDown: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; + } + this._moveCursorUpOrDown('Down', e); + }, + + /** + * Moves cursor up + * @param {Event} e Event object + */ + moveCursorUp: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; + } + this._moveCursorUpOrDown('Up', e); + }, + + /** + * Moves cursor up or down, fires the events + * @param {String} direction 'Up' or 'Down' + * @param {Event} e Event object + */ + _moveCursorUpOrDown: function(direction, e) { + // getUpCursorOffset + // getDownCursorOffset + var action = 'get' + direction + 'CursorOffset', + offset = this[action](e, this._selectionDirection === 'right'); + if (e.shiftKey) { + this.moveCursorWithShift(offset); } else { - removedText = this._text.slice(selectionStart, selectionStart - charDiff); + this.moveCursorWithoutShift(offset); } - } - insertedText = nextText.slice(textareaSelection.selectionEnd - charDiff, textareaSelection.selectionEnd); - if (removedText && removedText.length) { - if (insertedText.length) { - // let's copy some style before deleting. - // we want to copy the style before the cursor OR the style at the cursor if selection - // is bigger than 0. - copiedStyle = this.getSelectionStyles(selectionStart, selectionStart + 1, false); - // now duplicate the style one for each inserted text. - copiedStyle = insertedText.map(function() { - // this return an array of references, but that is fine since we are - // copying the style later. - return copiedStyle[0]; - }); + if (offset !== 0) { + this.setSelectionInBoundaries(); + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); } - if (selection) { - removeFrom = selectionStart; - removeTo = selectionEnd; + }, + + /** + * Moves cursor with shift + * @param {Number} offset + */ + moveCursorWithShift: function(offset) { + var newSelection = this._selectionDirection === 'left' + ? this.selectionStart + offset + : this.selectionEnd + offset; + this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection); + return offset !== 0; + }, + + /** + * Moves cursor up without shift + * @param {Number} offset + */ + moveCursorWithoutShift: function(offset) { + if (offset < 0) { + this.selectionStart += offset; + this.selectionEnd = this.selectionStart; } - else if (backDelete) { - // detect differences between forwardDelete and backDelete - removeFrom = selectionEnd - removedText.length; - removeTo = selectionEnd; + else { + this.selectionEnd += offset; + this.selectionStart = this.selectionEnd; + } + return offset !== 0; + }, + + /** + * Moves cursor left + * @param {Event} e Event object + */ + moveCursorLeft: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; + } + this._moveCursorLeftOrRight('Left', e); + }, + + /** + * @private + * @return {Boolean} true if a change happened + */ + _move: function(e, prop, direction) { + var newValue; + if (e.altKey) { + newValue = this['findWordBoundary' + direction](this[prop]); + } + else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) { + newValue = this['findLineBoundary' + direction](this[prop]); } else { - removeFrom = selectionEnd; - removeTo = selectionEnd + removedText.length; - } - this.removeStyleFromTo(removeFrom, removeTo); - } - if (insertedText.length) { - if (fromPaste && insertedText.join('') === fabric.copiedText && !fabric.disableStyleCopyPaste) { - copiedStyle = fabric.copiedTextStyle; - } - this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle); - } - this.updateFromTextArea(); - this.fire('changed'); - if (this.canvas) { - this.canvas.fire('text:changed', { target: this }); - this.canvas.requestRenderAll(); - } - }, - /** - * Composition start - */ - onCompositionStart: function() { - this.inCompositionMode = true; - }, - - /** - * Composition end - */ - onCompositionEnd: function() { - this.inCompositionMode = false; - }, - - // /** - // * Composition update - // */ - onCompositionUpdate: function(e) { - this.compositionStart = e.target.selectionStart; - this.compositionEnd = e.target.selectionEnd; - this.updateTextareaPosition(); - }, - - /** - * Copies selected text - * @param {Event} e Event object - */ - copy: function() { - if (this.selectionStart === this.selectionEnd) { - //do not cut-copy if no selection - return; - } - - fabric.copiedText = this.getSelectedText(); - if (!fabric.disableStyleCopyPaste) { - fabric.copiedTextStyle = this.getSelectionStyles(this.selectionStart, this.selectionEnd, true); - } - else { - fabric.copiedTextStyle = null; - } - this._copyDone = true; - }, - - /** - * Pastes text - * @param {Event} e Event object - */ - paste: function() { - this.fromPaste = true; - }, - - /** - * @private - * @param {Event} e Event object - * @return {Object} Clipboard data object - */ - _getClipboardData: function(e) { - return (e && e.clipboardData) || fabric.window.clipboardData; - }, - - /** - * Finds the width in pixels before the cursor on the same line - * @private - * @param {Number} lineIndex - * @param {Number} charIndex - * @return {Number} widthBeforeCursor width before cursor - */ - _getWidthBeforeCursor: function(lineIndex, charIndex) { - var widthBeforeCursor = this._getLineLeftOffset(lineIndex), bound; - - if (charIndex > 0) { - bound = this.__charBounds[lineIndex][charIndex - 1]; - widthBeforeCursor += bound.left + bound.width; - } - return widthBeforeCursor; - }, - - /** - * Gets start offset of a selection - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - getDownCursorOffset: function(e, isRight) { - var selectionProp = this._getSelectionForOffset(e, isRight), - cursorLocation = this.get2DCursorLocation(selectionProp), - lineIndex = cursorLocation.lineIndex; - // if on last line, down cursor goes to end of line - if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) { - // move to the end of a text - return this._text.length - selectionProp; - } - var charIndex = cursorLocation.charIndex, - widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), - indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor), - textAfterCursor = this._textLines[lineIndex].slice(charIndex); - return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex); - }, - - /** - * private - * Helps finding if the offset should be counted from Start or End - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - _getSelectionForOffset: function(e, isRight) { - if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) { - return this.selectionEnd; - } - else { - return this.selectionStart; - } - }, - - /** - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - getUpCursorOffset: function(e, isRight) { - var selectionProp = this._getSelectionForOffset(e, isRight), - cursorLocation = this.get2DCursorLocation(selectionProp), - lineIndex = cursorLocation.lineIndex; - if (lineIndex === 0 || e.metaKey || e.keyCode === 33) { - // if on first line, up cursor goes to start of line - return -selectionProp; - } - var charIndex = cursorLocation.charIndex, - widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), - indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor), - textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex), - missingNewlineOffset = this.missingNewlineOffset(lineIndex - 1); - // return a negative offset - return -this._textLines[lineIndex - 1].length - + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset); - }, - - /** - * for a given width it founds the matching character. - * @private - */ - _getIndexOnLine: function(lineIndex, width) { - - var line = this._textLines[lineIndex], - lineLeftOffset = this._getLineLeftOffset(lineIndex), - widthOfCharsOnLine = lineLeftOffset, - indexOnLine = 0, charWidth, foundMatch; - - for (var j = 0, jlen = line.length; j < jlen; j++) { - charWidth = this.__charBounds[lineIndex][j].width; - widthOfCharsOnLine += charWidth; - if (widthOfCharsOnLine > width) { - foundMatch = true; - var leftEdge = widthOfCharsOnLine - charWidth, - rightEdge = widthOfCharsOnLine, - offsetFromLeftEdge = Math.abs(leftEdge - width), - offsetFromRightEdge = Math.abs(rightEdge - width); - - indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1); - break; - } - } - - // reached end - if (!foundMatch) { - indexOnLine = line.length - 1; - } - - return indexOnLine; - }, - - - /** - * Moves cursor down - * @param {Event} e Event object - */ - moveCursorDown: function(e) { - if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { - return; - } - this._moveCursorUpOrDown('Down', e); - }, - - /** - * Moves cursor up - * @param {Event} e Event object - */ - moveCursorUp: function(e) { - if (this.selectionStart === 0 && this.selectionEnd === 0) { - return; - } - this._moveCursorUpOrDown('Up', e); - }, - - /** - * Moves cursor up or down, fires the events - * @param {String} direction 'Up' or 'Down' - * @param {Event} e Event object - */ - _moveCursorUpOrDown: function(direction, e) { - // getUpCursorOffset - // getDownCursorOffset - var action = 'get' + direction + 'CursorOffset', - offset = this[action](e, this._selectionDirection === 'right'); - if (e.shiftKey) { - this.moveCursorWithShift(offset); - } - else { - this.moveCursorWithoutShift(offset); - } - if (offset !== 0) { - this.setSelectionInBoundaries(); - this.abortCursorAnimation(); - this._currentCursorOpacity = 1; - this.initDelayedCursor(); - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, - - /** - * Moves cursor with shift - * @param {Number} offset - */ - moveCursorWithShift: function(offset) { - var newSelection = this._selectionDirection === 'left' - ? this.selectionStart + offset - : this.selectionEnd + offset; - this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection); - return offset !== 0; - }, - - /** - * Moves cursor up without shift - * @param {Number} offset - */ - moveCursorWithoutShift: function(offset) { - if (offset < 0) { - this.selectionStart += offset; - this.selectionEnd = this.selectionStart; - } - else { - this.selectionEnd += offset; - this.selectionStart = this.selectionEnd; - } - return offset !== 0; - }, - - /** - * Moves cursor left - * @param {Event} e Event object - */ - moveCursorLeft: function(e) { - if (this.selectionStart === 0 && this.selectionEnd === 0) { - return; - } - this._moveCursorLeftOrRight('Left', e); - }, - - /** - * @private - * @return {Boolean} true if a change happened - */ - _move: function(e, prop, direction) { - var newValue; - if (e.altKey) { - newValue = this['findWordBoundary' + direction](this[prop]); - } - else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) { - newValue = this['findLineBoundary' + direction](this[prop]); - } - else { - this[prop] += direction === 'Left' ? -1 : 1; - return true; - } - if (typeof newValue !== undefined && this[prop] !== newValue) { - this[prop] = newValue; - return true; - } - }, - - /** - * @private - */ - _moveLeft: function(e, prop) { - return this._move(e, prop, 'Left'); - }, - - /** - * @private - */ - _moveRight: function(e, prop) { - return this._move(e, prop, 'Right'); - }, - - /** - * Moves cursor left without keeping selection - * @param {Event} e - */ - moveCursorLeftWithoutShift: function(e) { - var change = true; - this._selectionDirection = 'left'; - - // only move cursor when there is no selection, - // otherwise we discard it, and leave cursor on same place - if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) { - change = this._moveLeft(e, 'selectionStart'); - - } - this.selectionEnd = this.selectionStart; - return change; - }, - - /** - * Moves cursor left while keeping selection - * @param {Event} e - */ - moveCursorLeftWithShift: function(e) { - if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) { - return this._moveLeft(e, 'selectionEnd'); - } - else if (this.selectionStart !== 0){ + this[prop] += direction === 'Left' ? -1 : 1; + return true; + } + if (typeof newValue !== undefined && this[prop] !== newValue) { + this[prop] = newValue; + return true; + } + }, + + /** + * @private + */ + _moveLeft: function(e, prop) { + return this._move(e, prop, 'Left'); + }, + + /** + * @private + */ + _moveRight: function(e, prop) { + return this._move(e, prop, 'Right'); + }, + + /** + * Moves cursor left without keeping selection + * @param {Event} e + */ + moveCursorLeftWithoutShift: function(e) { + var change = true; this._selectionDirection = 'left'; - return this._moveLeft(e, 'selectionStart'); - } - }, - - /** - * Moves cursor right - * @param {Event} e Event object - */ - moveCursorRight: function(e) { - if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { - return; - } - this._moveCursorLeftOrRight('Right', e); - }, - - /** - * Moves cursor right or Left, fires event - * @param {String} direction 'Left', 'Right' - * @param {Event} e Event object - */ - _moveCursorLeftOrRight: function(direction, e) { - var actionName = 'moveCursor' + direction + 'With'; - this._currentCursorOpacity = 1; - - if (e.shiftKey) { - actionName += 'Shift'; - } - else { - actionName += 'outShift'; - } - if (this[actionName](e)) { - this.abortCursorAnimation(); - this.initDelayedCursor(); - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, - - /** - * Moves cursor right while keeping selection - * @param {Event} e - */ - moveCursorRightWithShift: function(e) { - if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) { - return this._moveRight(e, 'selectionStart'); - } - else if (this.selectionEnd !== this._text.length) { - this._selectionDirection = 'right'; - return this._moveRight(e, 'selectionEnd'); - } - }, - - /** - * Moves cursor right without keeping selection - * @param {Event} e Event object - */ - moveCursorRightWithoutShift: function(e) { - var changed = true; - this._selectionDirection = 'right'; - - if (this.selectionStart === this.selectionEnd) { - changed = this._moveRight(e, 'selectionStart'); + + // only move cursor when there is no selection, + // otherwise we discard it, and leave cursor on same place + if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) { + change = this._moveLeft(e, 'selectionStart'); + + } this.selectionEnd = this.selectionStart; - } - else { - this.selectionStart = this.selectionEnd; - } - return changed; - }, - - /** - * Removes characters from start/end - * start/end ar per grapheme position in _text array. - * - * @param {Number} start - * @param {Number} end default to start + 1 - */ - removeChars: function(start, end) { - if (typeof end === 'undefined') { - end = start + 1; - } - this.removeStyleFromTo(start, end); - this._text.splice(start, end - start); - this.text = this._text.join(''); - this.set('dirty', true); - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this._removeExtraneousStyles(); - }, - - /** - * insert characters at start position, before start position. - * start equal 1 it means the text get inserted between actual grapheme 0 and 1 - * if style array is provided, it must be as the same length of text in graphemes - * if end is provided and is bigger than start, old text is replaced. - * start/end ar per grapheme position in _text array. - * - * @param {String} text text to insert - * @param {Array} style array of style objects - * @param {Number} start - * @param {Number} end default to start + 1 - */ - insertChars: function(text, style, start, end) { - if (typeof end === 'undefined') { - end = start; - } - if (end > start) { + return change; + }, + + /** + * Moves cursor left while keeping selection + * @param {Event} e + */ + moveCursorLeftWithShift: function(e) { + if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) { + return this._moveLeft(e, 'selectionEnd'); + } + else if (this.selectionStart !== 0){ + this._selectionDirection = 'left'; + return this._moveLeft(e, 'selectionStart'); + } + }, + + /** + * Moves cursor right + * @param {Event} e Event object + */ + moveCursorRight: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; + } + this._moveCursorLeftOrRight('Right', e); + }, + + /** + * Moves cursor right or Left, fires event + * @param {String} direction 'Left', 'Right' + * @param {Event} e Event object + */ + _moveCursorLeftOrRight: function(direction, e) { + var actionName = 'moveCursor' + direction + 'With'; + this._currentCursorOpacity = 1; + + if (e.shiftKey) { + actionName += 'Shift'; + } + else { + actionName += 'outShift'; + } + if (this[actionName](e)) { + this.abortCursorAnimation(); + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, + + /** + * Moves cursor right while keeping selection + * @param {Event} e + */ + moveCursorRightWithShift: function(e) { + if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) { + return this._moveRight(e, 'selectionStart'); + } + else if (this.selectionEnd !== this._text.length) { + this._selectionDirection = 'right'; + return this._moveRight(e, 'selectionEnd'); + } + }, + + /** + * Moves cursor right without keeping selection + * @param {Event} e Event object + */ + moveCursorRightWithoutShift: function(e) { + var changed = true; + this._selectionDirection = 'right'; + + if (this.selectionStart === this.selectionEnd) { + changed = this._moveRight(e, 'selectionStart'); + this.selectionEnd = this.selectionStart; + } + else { + this.selectionStart = this.selectionEnd; + } + return changed; + }, + + /** + * Removes characters from start/end + * start/end ar per grapheme position in _text array. + * + * @param {Number} start + * @param {Number} end default to start + 1 + */ + removeChars: function(start, end) { + if (typeof end === 'undefined') { + end = start + 1; + } this.removeStyleFromTo(start, end); - } - var graphemes = this.graphemeSplit(text); - this.insertNewStyleBlock(graphemes, start, style); - this._text = [].concat(this._text.slice(0, start), graphemes, this._text.slice(end)); - this.text = this._text.join(''); - this.set('dirty', true); - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this._removeExtraneousStyles(); - }, - -}); + this._text.splice(start, end - start); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this._removeExtraneousStyles(); + }, + + /** + * insert characters at start position, before start position. + * start equal 1 it means the text get inserted between actual grapheme 0 and 1 + * if style array is provided, it must be as the same length of text in graphemes + * if end is provided and is bigger than start, old text is replaced. + * start/end ar per grapheme position in _text array. + * + * @param {String} text text to insert + * @param {Array} style array of style objects + * @param {Number} start + * @param {Number} end default to start + 1 + */ + insertChars: function(text, style, start, end) { + if (typeof end === 'undefined') { + end = start; + } + if (end > start) { + this.removeStyleFromTo(start, end); + } + var graphemes = this.graphemeSplit(text); + this.insertNewStyleBlock(graphemes, start, style); + this._text = [].concat(this._text.slice(0, start), graphemes, this._text.slice(end)); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this._removeExtraneousStyles(); + }, + + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/object.svg_export.js b/src/mixins/object.svg_export.js index f0159d39f88..646f95459f0 100644 --- a/src/mixins/object.svg_export.js +++ b/src/mixins/object.svg_export.js @@ -1,256 +1,259 @@ /* _TO_SVG_START_ */ -function getSvgColorString(prop, value) { - if (!value) { - return prop + ': none; '; - } - else if (value.toLive) { - return prop + ': url(#SVGID_' + value.id + '); '; - } - else { - var color = new fabric.Color(value), - str = prop + ': ' + color.toRgb() + '; ', - opacity = color.getAlpha(); - if (opacity !== 1) { - //change the color in rgb + opacity - str += prop + '-opacity: ' + opacity.toString() + '; '; +(function(global) { + var fabric = global.fabric; + function getSvgColorString(prop, value) { + if (!value) { + return prop + ': none; '; + } + else if (value.toLive) { + return prop + ': url(#SVGID_' + value.id + '); '; + } + else { + var color = new fabric.Color(value), + str = prop + ': ' + color.toRgb() + '; ', + opacity = color.getAlpha(); + if (opacity !== 1) { + //change the color in rgb + opacity + str += prop + '-opacity: ' + opacity.toString() + '; '; + } + return str; } - return str; } -} -var toFixed = fabric.util.toFixed; + var toFixed = fabric = global.fabric, toFixed = fabric.util.toFixed; -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** * Returns styles-string for svg-export * @param {Boolean} skipShadow a boolean to skip shadow filter output * @return {String} */ - getSvgStyles: function(skipShadow) { + getSvgStyles: function(skipShadow) { - var fillRule = this.fillRule ? this.fillRule : 'nonzero', - strokeWidth = this.strokeWidth ? this.strokeWidth : '0', - strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', - strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', - strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', - strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', - strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', - opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', - visibility = this.visible ? '' : ' visibility: hidden;', - filter = skipShadow ? '' : this.getSvgFilter(), - fill = getSvgColorString('fill', this.fill), - stroke = getSvgColorString('stroke', this.stroke); + var fillRule = this.fillRule ? this.fillRule : 'nonzero', + strokeWidth = this.strokeWidth ? this.strokeWidth : '0', + strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', + strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', + strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', + strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', + strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', + opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', + visibility = this.visible ? '' : ' visibility: hidden;', + filter = skipShadow ? '' : this.getSvgFilter(), + fill = getSvgColorString('fill', this.fill), + stroke = getSvgColorString('stroke', this.stroke); - return [ - stroke, - 'stroke-width: ', strokeWidth, '; ', - 'stroke-dasharray: ', strokeDashArray, '; ', - 'stroke-linecap: ', strokeLineCap, '; ', - 'stroke-dashoffset: ', strokeDashOffset, '; ', - 'stroke-linejoin: ', strokeLineJoin, '; ', - 'stroke-miterlimit: ', strokeMiterLimit, '; ', - fill, - 'fill-rule: ', fillRule, '; ', - 'opacity: ', opacity, ';', - filter, - visibility - ].join(''); - }, + return [ + stroke, + 'stroke-width: ', strokeWidth, '; ', + 'stroke-dasharray: ', strokeDashArray, '; ', + 'stroke-linecap: ', strokeLineCap, '; ', + 'stroke-dashoffset: ', strokeDashOffset, '; ', + 'stroke-linejoin: ', strokeLineJoin, '; ', + 'stroke-miterlimit: ', strokeMiterLimit, '; ', + fill, + 'fill-rule: ', fillRule, '; ', + 'opacity: ', opacity, ';', + filter, + visibility + ].join(''); + }, - /** + /** * Returns styles-string for svg-export * @param {Object} style the object from which to retrieve style properties * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. * @return {String} */ - getSvgSpanStyles: function(style, useWhiteSpace) { - var term = '; '; - var fontFamily = style.fontFamily ? - 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? - '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; - var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', - fontFamily = fontFamily, - fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', - fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', - fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', - fill = style.fill ? getSvgColorString('fill', style.fill) : '', - stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', - textDecoration = this.getSvgTextDecoration(style), - deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; - if (textDecoration) { - textDecoration = 'text-decoration: ' + textDecoration + term; - } + getSvgSpanStyles: function(style, useWhiteSpace) { + var term = '; '; + var fontFamily = style.fontFamily ? + 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? + '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; + var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', + fontFamily = fontFamily, + fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', + fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', + fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', + fill = style.fill ? getSvgColorString('fill', style.fill) : '', + stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', + textDecoration = this.getSvgTextDecoration(style), + deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; + if (textDecoration) { + textDecoration = 'text-decoration: ' + textDecoration + term; + } - return [ - stroke, - strokeWidth, - fontFamily, - fontSize, - fontStyle, - fontWeight, - textDecoration, - fill, - deltaY, - useWhiteSpace ? 'white-space: pre; ' : '' - ].join(''); - }, + return [ + stroke, + strokeWidth, + fontFamily, + fontSize, + fontStyle, + fontWeight, + textDecoration, + fill, + deltaY, + useWhiteSpace ? 'white-space: pre; ' : '' + ].join(''); + }, - /** + /** * Returns text-decoration property for svg-export * @param {Object} style the object from which to retrieve style properties * @return {String} */ - getSvgTextDecoration: function(style) { - return ['overline', 'underline', 'line-through'].filter(function(decoration) { - return style[decoration.replace('-', '')]; - }).join(' '); - }, + getSvgTextDecoration: function(style) { + return ['overline', 'underline', 'line-through'].filter(function(decoration) { + return style[decoration.replace('-', '')]; + }).join(' '); + }, - /** + /** * Returns filter for svg shadow * @return {String} */ - getSvgFilter: function() { - return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; - }, + getSvgFilter: function() { + return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; + }, - /** + /** * Returns id attribute for svg output * @return {String} */ - getSvgCommons: function() { - return [ - this.id ? 'id="' + this.id + '" ' : '', - this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', - ].join(''); - }, + getSvgCommons: function() { + return [ + this.id ? 'id="' + this.id + '" ' : '', + this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', + ].join(''); + }, - /** + /** * Returns transform-string for svg-export * @param {Boolean} use the full transform or the single object one. * @return {String} */ - getSvgTransform: function(full, additionalTransform) { - var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), - svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); - return svgTransform + + getSvgTransform: function(full, additionalTransform) { + var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), + svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); + return svgTransform + (additionalTransform || '') + '" '; - }, + }, - _setSVGBg: function(textBgRects) { - if (this.backgroundColor) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - } - }, + _setSVGBg: function(textBgRects) { + if (this.backgroundColor) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + } + }, - /** + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + toSVG: function(reviver) { + return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - /** + /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toClipPathSVG: function(reviver) { - return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + toClipPathSVG: function(reviver) { + return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - /** + /** * @private */ - _createBaseClipPathSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var reviver = options.reviver, - additionalTransform = options.additionalTransform || '', - commonPieces = [ - this.getSvgTransform(true, additionalTransform), - this.getSvgCommons(), - ].join(''), - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'); - objectMarkup[index] = commonPieces; - return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); - }, + _createBaseClipPathSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var reviver = options.reviver, + additionalTransform = options.additionalTransform || '', + commonPieces = [ + this.getSvgTransform(true, additionalTransform), + this.getSvgCommons(), + ].join(''), + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'); + objectMarkup[index] = commonPieces; + return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); + }, - /** + /** * @private */ - _createBaseSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var noStyle = options.noStyle, - reviver = options.reviver, - styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', - shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', - clipPath = this.clipPath, - vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', - absoluteClipPath = clipPath && clipPath.absolutePositioned, - stroke = this.stroke, fill = this.fill, shadow = this.shadow, - commonPieces, markup = [], clipPathMarkup, - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'), - additionalTransform = options.additionalTransform; - if (clipPath) { - clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; - clipPathMarkup = '\n' + + _createBaseSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var noStyle = options.noStyle, + reviver = options.reviver, + styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', + shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', + clipPath = this.clipPath, + vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', + absoluteClipPath = clipPath && clipPath.absolutePositioned, + stroke = this.stroke, fill = this.fill, shadow = this.shadow, + commonPieces, markup = [], clipPathMarkup, + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'), + additionalTransform = options.additionalTransform; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + clipPathMarkup = '\n' + clipPath.toClipPathSVG(reviver) + '\n'; - } - if (absoluteClipPath) { + } + if (absoluteClipPath) { + markup.push( + '\n' + ); + } markup.push( - '\n' + '\n' ); - } - markup.push( - '\n' - ); - commonPieces = [ - styleInfo, - vectorEffect, - noStyle ? '' : this.addPaintOrder(), ' ', - additionalTransform ? 'transform="' + additionalTransform + '" ' : '', - ].join(''); - objectMarkup[index] = commonPieces; - if (fill && fill.toLive) { - markup.push(fill.toSVG(this)); - } - if (stroke && stroke.toLive) { - markup.push(stroke.toSVG(this)); - } - if (shadow) { - markup.push(shadow.toSVG(this)); - } - if (clipPath) { - markup.push(clipPathMarkup); - } - markup.push(objectMarkup.join('')); - markup.push('\n'); - absoluteClipPath && markup.push('\n'); - return reviver ? reviver(markup.join('')) : markup.join(''); - }, + commonPieces = [ + styleInfo, + vectorEffect, + noStyle ? '' : this.addPaintOrder(), ' ', + additionalTransform ? 'transform="' + additionalTransform + '" ' : '', + ].join(''); + objectMarkup[index] = commonPieces; + if (fill && fill.toLive) { + markup.push(fill.toSVG(this)); + } + if (stroke && stroke.toLive) { + markup.push(stroke.toSVG(this)); + } + if (shadow) { + markup.push(shadow.toSVG(this)); + } + if (clipPath) { + markup.push(clipPathMarkup); + } + markup.push(objectMarkup.join('')); + markup.push('\n'); + absoluteClipPath && markup.push('\n'); + return reviver ? reviver(markup.join('')) : markup.join(''); + }, - addPaintOrder: function() { - return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; - } -}); + addPaintOrder: function() { + return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; + } + }); +})(typeof exports !== 'undefined' ? exports : window); /* _TO_SVG_END_ */ diff --git a/src/mixins/object_ancestry.mixin.js b/src/mixins/object_ancestry.mixin.js index f066433fd07..0fae04155b0 100644 --- a/src/mixins/object_ancestry.mixin.js +++ b/src/mixins/object_ancestry.mixin.js @@ -1,122 +1,125 @@ -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { +(function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Checks if object is decendant of target - * Should be used instead of @link {fabric.Collection.contains} for performance reasons - * @param {fabric.Object|fabric.StaticCanvas} target - * @returns {boolean} - */ - isDescendantOf: function (target) { - var parent = this.group || this.canvas; - while (parent) { - if (target === parent) { - return true; - } - else if (parent instanceof fabric.StaticCanvas) { - // happens after all parents were traversed through without a match - return false; + /** + * Checks if object is decendant of target + * Should be used instead of @link {fabric.Collection.contains} for performance reasons + * @param {fabric.Object|fabric.StaticCanvas} target + * @returns {boolean} + */ + isDescendantOf: function (target) { + var parent = this.group || this.canvas; + while (parent) { + if (target === parent) { + return true; + } + else if (parent instanceof fabric.StaticCanvas) { + // happens after all parents were traversed through without a match + return false; + } + parent = parent.group || parent.canvas; } - parent = parent.group || parent.canvas; - } - return false; - }, + return false; + }, - /** - * - * @typedef {fabric.Object[] | [...fabric.Object[], fabric.StaticCanvas]} Ancestors - * - * @param {boolean} [strict] returns only ancestors that are objects (without canvas) - * @returns {Ancestors} ancestors from bottom to top - */ - getAncestors: function (strict) { - var ancestors = []; - var parent = this.group || (strict ? undefined : this.canvas); - while (parent) { - ancestors.push(parent); - parent = parent.group || (strict ? undefined : parent.canvas); - } - return ancestors; - }, + /** + * + * @typedef {fabric.Object[] | [...fabric.Object[], fabric.StaticCanvas]} Ancestors + * + * @param {boolean} [strict] returns only ancestors that are objects (without canvas) + * @returns {Ancestors} ancestors from bottom to top + */ + getAncestors: function (strict) { + var ancestors = []; + var parent = this.group || (strict ? undefined : this.canvas); + while (parent) { + ancestors.push(parent); + parent = parent.group || (strict ? undefined : parent.canvas); + } + return ancestors; + }, - /** - * Returns an object that represent the ancestry situation. - * - * @typedef {object} AncestryComparison - * @property {Ancestors} common ancestors of `this` and `other` (may include `this` | `other`) - * @property {Ancestors} fork ancestors that are of `this` only - * @property {Ancestors} otherFork ancestors that are of `other` only - * - * @param {fabric.Object} other - * @param {boolean} [strict] finds only ancestors that are objects (without canvas) - * @returns {AncestryComparison | undefined} - * - */ - findCommonAncestors: function (other, strict) { - if (this === other) { - return { - fork: [], - otherFork: [], - common: [this].concat(this.getAncestors(strict)) - }; - } - else if (!other) { - // meh, warn and inform, and not my issue. - // the argument is NOT optional, we can't end up here. - return undefined; - } - var ancestors = this.getAncestors(strict); - var otherAncestors = other.getAncestors(strict); - // if `this` has no ancestors and `this` is top ancestor of `other` we must handle the following case - if (ancestors.length === 0 && otherAncestors.length > 0 && this === otherAncestors[otherAncestors.length - 1]) { - return { - fork: [], - otherFork: [other].concat(otherAncestors.slice(0, otherAncestors.length - 1)), - common: [this] - }; - } - // compare ancestors - for (var i = 0, ancestor; i < ancestors.length; i++) { - ancestor = ancestors[i]; - if (ancestor === other) { + /** + * Returns an object that represent the ancestry situation. + * + * @typedef {object} AncestryComparison + * @property {Ancestors} common ancestors of `this` and `other` (may include `this` | `other`) + * @property {Ancestors} fork ancestors that are of `this` only + * @property {Ancestors} otherFork ancestors that are of `other` only + * + * @param {fabric.Object} other + * @param {boolean} [strict] finds only ancestors that are objects (without canvas) + * @returns {AncestryComparison | undefined} + * + */ + findCommonAncestors: function (other, strict) { + if (this === other) { return { - fork: [this].concat(ancestors.slice(0, i)), + fork: [], otherFork: [], - common: ancestors.slice(i) + common: [this].concat(this.getAncestors(strict)) }; } - for (var j = 0; j < otherAncestors.length; j++) { - if (this === otherAncestors[j]) { - return { - fork: [], - otherFork: [other].concat(otherAncestors.slice(0, j)), - common: [this].concat(ancestors) - }; - } - if (ancestor === otherAncestors[j]) { + else if (!other) { + // meh, warn and inform, and not my issue. + // the argument is NOT optional, we can't end up here. + return undefined; + } + var ancestors = this.getAncestors(strict); + var otherAncestors = other.getAncestors(strict); + // if `this` has no ancestors and `this` is top ancestor of `other` we must handle the following case + if (ancestors.length === 0 && otherAncestors.length > 0 && this === otherAncestors[otherAncestors.length - 1]) { + return { + fork: [], + otherFork: [other].concat(otherAncestors.slice(0, otherAncestors.length - 1)), + common: [this] + }; + } + // compare ancestors + for (var i = 0, ancestor; i < ancestors.length; i++) { + ancestor = ancestors[i]; + if (ancestor === other) { return { fork: [this].concat(ancestors.slice(0, i)), - otherFork: [other].concat(otherAncestors.slice(0, j)), + otherFork: [], common: ancestors.slice(i) }; } + for (var j = 0; j < otherAncestors.length; j++) { + if (this === otherAncestors[j]) { + return { + fork: [], + otherFork: [other].concat(otherAncestors.slice(0, j)), + common: [this].concat(ancestors) + }; + } + if (ancestor === otherAncestors[j]) { + return { + fork: [this].concat(ancestors.slice(0, i)), + otherFork: [other].concat(otherAncestors.slice(0, j)), + common: ancestors.slice(i) + }; + } + } } - } - // nothing shared - return { - fork: [this].concat(ancestors), - otherFork: [other].concat(otherAncestors), - common: [] - }; - }, + // nothing shared + return { + fork: [this].concat(ancestors), + otherFork: [other].concat(otherAncestors), + common: [] + }; + }, - /** - * - * @param {fabric.Object} other - * @param {boolean} [strict] checks only ancestors that are objects (without canvas) - * @returns {boolean} - */ - hasCommonAncestors: function (other, strict) { - var commonAncestors = this.findCommonAncestors(other, strict); - return commonAncestors && !!commonAncestors.ancestors.length; - } -}); + /** + * + * @param {fabric.Object} other + * @param {boolean} [strict] checks only ancestors that are objects (without canvas) + * @returns {boolean} + */ + hasCommonAncestors: function (other, strict) { + var commonAncestors = this.findCommonAncestors(other, strict); + return commonAncestors && !!commonAncestors.ancestors.length; + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js index 161ef7dcd2d..34aa7a1f549 100644 --- a/src/mixins/object_geometry.mixin.js +++ b/src/mixins/object_geometry.mixin.js @@ -1,20 +1,22 @@ -function arrayFromCoords(coords) { - return [ - new fabric.Point(coords.tl.x, coords.tl.y), - new fabric.Point(coords.tr.x, coords.tr.y), - new fabric.Point(coords.br.x, coords.br.y), - new fabric.Point(coords.bl.x, coords.bl.y) - ]; -} - -var util = fabric.util, - degreesToRadians = util.degreesToRadians, - multiplyMatrices = util.multiplyTransformMatrices, - transformPoint = util.transformPoint; - -util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - - /** +(function(global) { + + function arrayFromCoords(coords) { + return [ + new fabric.Point(coords.tl.x, coords.tl.y), + new fabric.Point(coords.tr.x, coords.tr.y), + new fabric.Point(coords.br.x, coords.br.y), + new fabric.Point(coords.bl.x, coords.bl.y) + ]; + } + + var fabric = global.fabric, util = fabric.util, + degreesToRadians = util.degreesToRadians, + multiplyMatrices = util.multiplyTransformMatrices, + transformPoint = util.transformPoint; + + util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + + /** * Describe object's corner position in canvas element coordinates. * properties are depending on control keys and padding the main controls. * each property is an object with x, y and corner. @@ -24,9 +26,9 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * to draw and locate controls * @memberOf fabric.Object.prototype */ - oCoords: null, + oCoords: null, - /** + /** * Describe object's corner position in canvas object absolute coordinates * properties are tl,tr,bl,br and describe the four main corner. * each property is an object with x, y, instance of Fabric.Point. @@ -38,103 +40,103 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * You can calculate them without updating with @method calcACoords(); * @memberOf fabric.Object.prototype */ - aCoords: null, + aCoords: null, - /** + /** * Describe object's corner position in canvas element coordinates. * includes padding. Used of object detection. * set and refreshed with setCoords. * @memberOf fabric.Object.prototype */ - lineCoords: null, + lineCoords: null, - /** + /** * storage for object transform matrix */ - ownMatrixCache: null, + ownMatrixCache: null, - /** + /** * storage for object full transform matrix */ - matrixCache: null, + matrixCache: null, - /** + /** * custom controls interface * controls are added by default_controls.js */ - controls: { }, + controls: { }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane */ - getX: function () { - return this.getXY().x; - }, + getX: function () { + return this.getXY().x; + }, - /** + /** * @param {number} value x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane */ - setX: function (value) { - this.setXY(this.getXY().setX(value)); - }, + setX: function (value) { + this.setXY(this.getXY().setX(value)); + }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ * if parent is canvas then this property is identical to {@link fabric.Object#getX} */ - getRelativeX: function () { - return this.left; - }, + getRelativeX: function () { + return this.left; + }, - /** + /** * @param {number} value x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ * if parent is canvas then this method is identical to {@link fabric.Object#setX} */ - setRelativeX: function (value) { - this.left = value; - }, + setRelativeX: function (value) { + this.left = value; + }, - /** + /** * @returns {number} y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane */ - getY: function () { - return this.getXY().y; - }, + getY: function () { + return this.getXY().y; + }, - /** + /** * @param {number} value y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane */ - setY: function (value) { - this.setXY(this.getXY().setY(value)); - }, + setY: function (value) { + this.setXY(this.getXY().setY(value)); + }, - /** + /** * @returns {number} y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ * if parent is canvas then this property is identical to {@link fabric.Object#getY} */ - getRelativeY: function () { - return this.top; - }, + getRelativeY: function () { + return this.top; + }, - /** + /** * @param {number} value y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ * if parent is canvas then this property is identical to {@link fabric.Object#setY} */ - setRelativeY: function (value) { - this.top = value; - }, + setRelativeY: function (value) { + this.top = value; + }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in canvas coordinate plane */ - getXY: function () { - var relativePosition = this.getRelativeXY(); - return this.group ? - fabric.util.transformPoint(relativePosition, this.group.calcTransformMatrix()) : - relativePosition; - }, + getXY: function () { + var relativePosition = this.getRelativeXY(); + return this.group ? + fabric.util.transformPoint(relativePosition, this.group.calcTransformMatrix()) : + relativePosition; + }, - /** + /** * Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. * You can specify {@link fabric.Object#originX} and {@link fabric.Object#originY} values, * that otherwise are the object's current values. @@ -144,67 +146,67 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' */ - setXY: function (point, originX, originY) { - if (this.group) { - point = fabric.util.transformPoint( - point, - fabric.util.invertTransform(this.group.calcTransformMatrix()) - ); - } - this.setRelativeXY(point, originX, originY); - }, + setXY: function (point, originX, originY) { + if (this.group) { + point = fabric.util.transformPoint( + point, + fabric.util.invertTransform(this.group.calcTransformMatrix()) + ); + } + this.setRelativeXY(point, originX, originY); + }, - /** + /** * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane */ - getRelativeXY: function () { - return new fabric.Point(this.left, this.top); - }, + getRelativeXY: function () { + return new fabric.Point(this.left, this.top); + }, - /** + /** * As {@link fabric.Object#setXY}, but in current parent's coordinate plane ( the current group if any or the canvas) * @param {fabric.Point} point position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' */ - setRelativeXY: function (point, originX, originY) { - this.setPositionByOrigin(point, originX || this.originX, originY || this.originY); - }, + setRelativeXY: function (point, originX, originY) { + this.setPositionByOrigin(point, originX || this.originX, originY || this.originY); + }, - /** + /** * return correct set of coordinates for intersection * this will return either aCoords or lineCoords. * @param {Boolean} absolute will return aCoords if true or lineCoords * @return {Object} {tl, tr, br, bl} points */ - _getCoords: function(absolute, calculate) { - if (calculate) { - return (absolute ? this.calcACoords() : this.calcLineCoords()); - } - if (!this.aCoords || !this.lineCoords) { - this.setCoords(true); - } - return (absolute ? this.aCoords : this.lineCoords); - }, - - /** + _getCoords: function(absolute, calculate) { + if (calculate) { + return (absolute ? this.calcACoords() : this.calcLineCoords()); + } + if (!this.aCoords || !this.lineCoords) { + this.setCoords(true); + } + return (absolute ? this.aCoords : this.lineCoords); + }, + + /** * return correct set of coordinates for intersection * this will return either aCoords or lineCoords. * The coords are returned in an array. * @return {Array} [tl, tr, br, bl] of points */ - getCoords: function (absolute, calculate) { - var coords = arrayFromCoords(this._getCoords(absolute, calculate)); - if (this.group) { - var t = this.group.calcTransformMatrix(); - return coords.map(function (p) { - return util.transformPoint(p, t); - }); - } - return coords; - }, + getCoords: function (absolute, calculate) { + var coords = arrayFromCoords(this._getCoords(absolute, calculate)); + if (this.group) { + var t = this.group.calcTransformMatrix(); + return coords.map(function (p) { + return util.transformPoint(p, t); + }); + } + return coords; + }, - /** + /** * Checks if object intersects with an area formed by 2 points * @param {Object} pointTL top-left point of area * @param {Object} pointBR bottom-right point of area @@ -212,54 +214,54 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object intersects with an area formed by 2 points */ - intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { - var coords = this.getCoords(absolute, calculate), - intersection = fabric.Intersection.intersectPolygonRectangle( - coords, - pointTL, - pointBR - ); - return intersection.status === 'Intersection'; - }, - - /** + intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { + var coords = this.getCoords(absolute, calculate), + intersection = fabric.Intersection.intersectPolygonRectangle( + coords, + pointTL, + pointBR + ); + return intersection.status === 'Intersection'; + }, + + /** * Checks if object intersects with another object * @param {Object} other Object to test * @param {Boolean} [absolute] use coordinates without viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object intersects with another object */ - intersectsWithObject: function(other, absolute, calculate) { - var intersection = fabric.Intersection.intersectPolygonPolygon( - this.getCoords(absolute, calculate), - other.getCoords(absolute, calculate) - ); + intersectsWithObject: function(other, absolute, calculate) { + var intersection = fabric.Intersection.intersectPolygonPolygon( + this.getCoords(absolute, calculate), + other.getCoords(absolute, calculate) + ); - return intersection.status === 'Intersection' + return intersection.status === 'Intersection' || other.isContainedWithinObject(this, absolute, calculate) || this.isContainedWithinObject(other, absolute, calculate); - }, + }, - /** + /** * Checks if object is fully contained within area of another object * @param {Object} other Object to test * @param {Boolean} [absolute] use coordinates without viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object is fully contained within area of another object */ - isContainedWithinObject: function(other, absolute, calculate) { - var points = this.getCoords(absolute, calculate), - otherCoords = absolute ? other.aCoords : other.lineCoords, - i = 0, lines = other._getImageLines(otherCoords); - for (; i < 4; i++) { - if (!other.containsPoint(points[i], lines)) { - return false; + isContainedWithinObject: function(other, absolute, calculate) { + var points = this.getCoords(absolute, calculate), + otherCoords = absolute ? other.aCoords : other.lineCoords, + i = 0, lines = other._getImageLines(otherCoords); + for (; i < 4; i++) { + if (!other.containsPoint(points[i], lines)) { + return false; + } } - } - return true; - }, + return true; + }, - /** + /** * Checks if object is fully contained within area formed by 2 points * @param {Object} pointTL top-left point of area * @param {Object} pointBR bottom-right point of area @@ -267,18 +269,18 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object is fully contained within area formed by 2 points */ - isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { - var boundingRect = this.getBoundingRect(absolute, calculate); + isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { + var boundingRect = this.getBoundingRect(absolute, calculate); - return ( - boundingRect.left >= pointTL.x && + return ( + boundingRect.left >= pointTL.x && boundingRect.left + boundingRect.width <= pointBR.x && boundingRect.top >= pointTL.y && boundingRect.top + boundingRect.height <= pointBR.y - ); - }, + ); + }, - /** + /** * Checks if point is inside the object * @param {fabric.Point} point Point to check against * @param {Object} [lines] object returned from @method _getImageLines @@ -286,41 +288,41 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if point is inside the object */ - containsPoint: function(point, lines, absolute, calculate) { - var coords = this._getCoords(absolute, calculate), - lines = lines || this._getImageLines(coords), - xPoints = this._findCrossPoints(point, lines); - // if xPoints is odd then point is inside the object - return (xPoints !== 0 && xPoints % 2 === 1); - }, + containsPoint: function(point, lines, absolute, calculate) { + var coords = this._getCoords(absolute, calculate), + lines = lines || this._getImageLines(coords), + xPoints = this._findCrossPoints(point, lines); + // if xPoints is odd then point is inside the object + return (xPoints !== 0 && xPoints % 2 === 1); + }, - /** + /** * Checks if object is contained within the canvas with current viewportTransform * the check is done stopping at first point that appears on screen * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords * @return {Boolean} true if object is fully or partially contained within canvas */ - isOnScreen: function(calculate) { - if (!this.canvas) { - return false; - } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - var points = this.getCoords(true, calculate); - // if some point is on screen, the object is on screen. - if (points.some(function(point) { - return point.x <= pointBR.x && point.x >= pointTL.x && + isOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + var points = this.getCoords(true, calculate); + // if some point is on screen, the object is on screen. + if (points.some(function(point) { + return point.x <= pointBR.x && point.x >= pointTL.x && point.y <= pointBR.y && point.y >= pointTL.y; - })) { - return true; - } - // no points on screen, check intersection with absolute coordinates - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { - return true; - } - return this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, + })) { + return true; + } + // no points on screen, check intersection with absolute coordinates + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + return this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - /** + /** * Checks if the object contains the midpoint between canvas extremities * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen * @private @@ -329,263 +331,263 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * @param {Boolean} calculate use coordinates of current position instead of .oCoords * @return {Boolean} true if the object contains the point */ - _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { - // worst case scenario the object is so big that contains the screen - var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; - if (this.containsPoint(centerPoint, null, true, calculate)) { - return true; - } - return false; - }, + _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { + // worst case scenario the object is so big that contains the screen + var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; + if (this.containsPoint(centerPoint, null, true, calculate)) { + return true; + } + return false; + }, - /** + /** * Checks if object is partially contained within the canvas with current viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords * @return {Boolean} true if object is partially contained within canvas */ - isPartiallyOnScreen: function(calculate) { - if (!this.canvas) { - return false; - } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { - return true; - } - var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { - return (point.x >= pointBR.x || point.x <= pointTL.x) && + isPartiallyOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { + return (point.x >= pointBR.x || point.x <= pointTL.x) && (point.y >= pointBR.y || point.y <= pointTL.y); - }); - return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, + }); + return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - /** + /** * Method that returns an object with the object edges in it, given the coordinates of the corners * @private * @param {Object} oCoords Coordinates of the object corners */ - _getImageLines: function(oCoords) { - - var lines = { - topline: { - o: oCoords.tl, - d: oCoords.tr - }, - rightline: { - o: oCoords.tr, - d: oCoords.br - }, - bottomline: { - o: oCoords.br, - d: oCoords.bl - }, - leftline: { - o: oCoords.bl, - d: oCoords.tl - } - }; - - // // debugging - // if (this.canvas.contextTop) { - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); - // } - - return lines; - }, - - /** + _getImageLines: function(oCoords) { + + var lines = { + topline: { + o: oCoords.tl, + d: oCoords.tr + }, + rightline: { + o: oCoords.tr, + d: oCoords.br + }, + bottomline: { + o: oCoords.br, + d: oCoords.bl + }, + leftline: { + o: oCoords.bl, + d: oCoords.tl + } + }; + + // // debugging + // if (this.canvas.contextTop) { + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + // } + + return lines; + }, + + /** * Helper method to determine how many cross points are between the 4 object edges * and the horizontal line determined by a point on canvas * @private * @param {fabric.Point} point Point to check * @param {Object} lines Coordinates of the object being evaluated */ - // remove yi, not used but left code here just in case. - _findCrossPoints: function(point, lines) { - var b1, b2, a1, a2, xi, // yi, - xcount = 0, - iLine; - - for (var lineKey in lines) { - iLine = lines[lineKey]; - // optimisation 1: line below point. no cross - if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { - continue; - } - // optimisation 2: line above point. no cross - if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { - continue; - } - // optimisation 3: vertical line case - if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { - xi = iLine.o.x; - // yi = point.y; - } - // calculate the intersection point - else { - b1 = 0; - b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); - a1 = point.y - b1 * point.x; - a2 = iLine.o.y - b2 * iLine.o.x; - - xi = -(a1 - a2) / (b1 - b2); - // yi = a1 + b1 * xi; + // remove yi, not used but left code here just in case. + _findCrossPoints: function(point, lines) { + var b1, b2, a1, a2, xi, // yi, + xcount = 0, + iLine; + + for (var lineKey in lines) { + iLine = lines[lineKey]; + // optimisation 1: line below point. no cross + if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { + continue; + } + // optimisation 2: line above point. no cross + if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { + continue; + } + // optimisation 3: vertical line case + if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { + xi = iLine.o.x; + // yi = point.y; + } + // calculate the intersection point + else { + b1 = 0; + b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); + a1 = point.y - b1 * point.x; + a2 = iLine.o.y - b2 * iLine.o.x; + + xi = -(a1 - a2) / (b1 - b2); + // yi = a1 + b1 * xi; + } + // dont count xi < point.x cases + if (xi >= point.x) { + xcount += 1; + } + // optimisation 4: specific for square images + if (xcount === 2) { + break; + } } - // dont count xi < point.x cases - if (xi >= point.x) { - xcount += 1; - } - // optimisation 4: specific for square images - if (xcount === 2) { - break; - } - } - return xcount; - }, + return xcount; + }, - /** + /** * Returns coordinates of object's bounding rectangle (left, top, width, height) * the box is intended as aligned to axis of canvas. * @param {Boolean} [absolute] use coordinates without viewportTransform * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords * @return {Object} Object with left, top, width, height properties */ - getBoundingRect: function(absolute, calculate) { - var coords = this.getCoords(absolute, calculate); - return util.makeBoundingBoxFromPoints(coords); - }, + getBoundingRect: function(absolute, calculate) { + var coords = this.getCoords(absolute, calculate); + return util.makeBoundingBoxFromPoints(coords); + }, - /** + /** * Returns width of an object's bounding box counting transformations * before 2.0 it was named getWidth(); * @return {Number} width value */ - getScaledWidth: function() { - return this._getTransformedDimensions().x; - }, + getScaledWidth: function() { + return this._getTransformedDimensions().x; + }, - /** + /** * Returns height of an object bounding box counting transformations * before 2.0 it was named getHeight(); * @return {Number} height value */ - getScaledHeight: function() { - return this._getTransformedDimensions().y; - }, + getScaledHeight: function() { + return this._getTransformedDimensions().y; + }, - /** + /** * Makes sure the scale is valid and modifies it if necessary * @private * @param {Number} value * @return {Number} */ - _constrainScale: function(value) { - if (Math.abs(value) < this.minScaleLimit) { - if (value < 0) { - return -this.minScaleLimit; + _constrainScale: function(value) { + if (Math.abs(value) < this.minScaleLimit) { + if (value < 0) { + return -this.minScaleLimit; + } + else { + return this.minScaleLimit; + } } - else { - return this.minScaleLimit; + else if (value === 0) { + return 0.0001; } - } - else if (value === 0) { - return 0.0001; - } - return value; - }, - - /** + return value; + }, + + /** * Scales an object (equally by x and y) * @param {Number} value Scale factor * @return {fabric.Object} thisArg * @chainable */ - scale: function(value) { - this._set('scaleX', value); - this._set('scaleY', value); - return this.setCoords(); - }, + scale: function(value) { + this._set('scaleX', value); + this._set('scaleY', value); + return this.setCoords(); + }, - /** + /** * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) * @param {Number} value New width value * @param {Boolean} absolute ignore viewport * @return {fabric.Object} thisArg * @chainable */ - scaleToWidth: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); - return this.scale(value / this.width / boundingRectFactor); - }, + scaleToWidth: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); + return this.scale(value / this.width / boundingRectFactor); + }, - /** + /** * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) * @param {Number} value New height value * @param {Boolean} absolute ignore viewport * @return {fabric.Object} thisArg * @chainable */ - scaleToHeight: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); - return this.scale(value / this.height / boundingRectFactor); - }, - - calcLineCoords: function() { - var vpt = this.getViewportTransform(), - padding = this.padding, angle = degreesToRadians(this.getTotalAngle()), - cos = util.cos(angle), sin = util.sin(angle), - cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, - cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); - - var lineCoords = { - tl: transformPoint(aCoords.tl, vpt), - tr: transformPoint(aCoords.tr, vpt), - bl: transformPoint(aCoords.bl, vpt), - br: transformPoint(aCoords.br, vpt), - }; - - if (padding) { - lineCoords.tl.x -= cosPMinusSinP; - lineCoords.tl.y -= cosPSinP; - lineCoords.tr.x += cosPSinP; - lineCoords.tr.y -= cosPMinusSinP; - lineCoords.bl.x -= cosPSinP; - lineCoords.bl.y += cosPMinusSinP; - lineCoords.br.x += cosPMinusSinP; - lineCoords.br.y += cosPSinP; - } - - return lineCoords; - }, - - calcOCoords: function () { - var vpt = this.getViewportTransform(), - center = this.getCenterPoint(), - tMatrix = [1, 0, 0, 1, center.x, center.y], - rMatrix = util.calcRotateMatrix({ angle: this.getTotalAngle() - (!!this.group && this.flipX ? 180 : 0) }), - positionMatrix = multiplyMatrices(tMatrix, rMatrix), - startMatrix = multiplyMatrices(vpt, positionMatrix), - finalMatrix = multiplyMatrices(startMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), - transformOptions = this.group ? fabric.util.qrDecompose(this.calcTransformMatrix()) : undefined, - dim = this._calculateCurrentDimensions(transformOptions), - coords = {}; - this.forEachControl(function(control, key, fabricObject) { - coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); - }); - - // debug code - /* + scaleToHeight: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); + return this.scale(value / this.height / boundingRectFactor); + }, + + calcLineCoords: function() { + var vpt = this.getViewportTransform(), + padding = this.padding, angle = degreesToRadians(this.getTotalAngle()), + cos = util.cos(angle), sin = util.sin(angle), + cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, + cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); + + var lineCoords = { + tl: transformPoint(aCoords.tl, vpt), + tr: transformPoint(aCoords.tr, vpt), + bl: transformPoint(aCoords.bl, vpt), + br: transformPoint(aCoords.br, vpt), + }; + + if (padding) { + lineCoords.tl.x -= cosPMinusSinP; + lineCoords.tl.y -= cosPSinP; + lineCoords.tr.x += cosPSinP; + lineCoords.tr.y -= cosPMinusSinP; + lineCoords.bl.x -= cosPSinP; + lineCoords.bl.y += cosPMinusSinP; + lineCoords.br.x += cosPMinusSinP; + lineCoords.br.y += cosPSinP; + } + + return lineCoords; + }, + + calcOCoords: function () { + var vpt = this.getViewportTransform(), + center = this.getCenterPoint(), + tMatrix = [1, 0, 0, 1, center.x, center.y], + rMatrix = util.calcRotateMatrix({ angle: this.getTotalAngle() - (!!this.group && this.flipX ? 180 : 0) }), + positionMatrix = multiplyMatrices(tMatrix, rMatrix), + startMatrix = multiplyMatrices(vpt, positionMatrix), + finalMatrix = multiplyMatrices(startMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), + transformOptions = this.group ? fabric.util.qrDecompose(this.calcTransformMatrix()) : undefined, + dim = this._calculateCurrentDimensions(transformOptions), + coords = {}; + this.forEachControl(function(control, key, fabricObject) { + coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); + }); + + // debug code + /* var canvas = this.canvas; setTimeout(function () { if (!canvas) return; @@ -597,26 +599,26 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * }); }, 50); */ - return coords; - }, - - calcACoords: function() { - var rotateMatrix = util.calcRotateMatrix({ angle: this.angle }), - center = this.getRelativeCenterPoint(), - translateMatrix = [1, 0, 0, 1, center.x, center.y], - finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), - dim = this._getTransformedDimensions(), - w = dim.x / 2, h = dim.y / 2; - return { - // corners - tl: transformPoint({ x: -w, y: -h }, finalMatrix), - tr: transformPoint({ x: w, y: -h }, finalMatrix), - bl: transformPoint({ x: -w, y: h }, finalMatrix), - br: transformPoint({ x: w, y: h }, finalMatrix) - }; - }, - - /** + return coords; + }, + + calcACoords: function() { + var rotateMatrix = util.calcRotateMatrix({ angle: this.angle }), + center = this.getRelativeCenterPoint(), + translateMatrix = [1, 0, 0, 1, center.x, center.y], + finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), + dim = this._getTransformedDimensions(), + w = dim.x / 2, h = dim.y / 2; + return { + // corners + tl: transformPoint({ x: -w, y: -h }, finalMatrix), + tr: transformPoint({ x: w, y: -h }, finalMatrix), + bl: transformPoint({ x: -w, y: h }, finalMatrix), + br: transformPoint({ x: w, y: h }, finalMatrix) + }; + }, + + /** * Sets corner and controls position coordinates based on current angle, width and height, left and top. * oCoords are used to find the corners * aCoords are used to quickly find an object on the canvas @@ -627,91 +629,91 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * @return {fabric.Object} thisArg * @chainable */ - setCoords: function(skipCorners) { - this.aCoords = this.calcACoords(); - // in case we are in a group, for how the inner group target check works, - // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. - this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); - if (skipCorners) { + setCoords: function(skipCorners) { + this.aCoords = this.calcACoords(); + // in case we are in a group, for how the inner group target check works, + // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. + this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); + if (skipCorners) { + return this; + } + // set coordinates of the draggable boxes in the corners used to scale/rotate the image + this.oCoords = this.calcOCoords(); + this._setCornerCoords && this._setCornerCoords(); return this; - } - // set coordinates of the draggable boxes in the corners used to scale/rotate the image - this.oCoords = this.calcOCoords(); - this._setCornerCoords && this._setCornerCoords(); - return this; - }, - - transformMatrixKey: function(skipGroup) { - var sep = '_', prefix = ''; - if (!skipGroup && this.group) { - prefix = this.group.transformMatrixKey(skipGroup) + sep; - }; - return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + + }, + + transformMatrixKey: function(skipGroup) { + var sep = '_', prefix = ''; + if (!skipGroup && this.group) { + prefix = this.group.transformMatrixKey(skipGroup) + sep; + }; + return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + sep + this.skewX + sep + this.skewY + sep + this.angle + sep + this.originX + sep + this.originY + sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY; - }, + }, - /** + /** * calculate transform matrix that represents the current transformations from the * object's properties. * @param {Boolean} [skipGroup] return transform matrix for object not counting parent transformations * There are some situation in which this is useful to avoid the fake rotation. * @return {Array} transform matrix for the object */ - calcTransformMatrix: function(skipGroup) { - var matrix = this.calcOwnMatrix(); - if (skipGroup || !this.group) { + calcTransformMatrix: function(skipGroup) { + var matrix = this.calcOwnMatrix(); + if (skipGroup || !this.group) { + return matrix; + } + var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); + if (cache.key === key) { + return cache.value; + } + if (this.group) { + matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); + } + cache.key = key; + cache.value = matrix; return matrix; - } - var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); - if (cache.key === key) { - return cache.value; - } - if (this.group) { - matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); - } - cache.key = key; - cache.value = matrix; - return matrix; - }, - - /** + }, + + /** * calculate transform matrix that represents the current transformations from the * object's properties, this matrix does not include the group transformation * @return {Array} transform matrix for the object */ - calcOwnMatrix: function() { - var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); - if (cache.key === key) { + calcOwnMatrix: function() { + var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); + if (cache.key === key) { + return cache.value; + } + var center = this.getRelativeCenterPoint(), + options = { + angle: this.angle, + translateX: center.x, + translateY: center.y, + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + flipX: this.flipX, + flipY: this.flipY, + }; + cache.key = key; + cache.value = util.composeMatrix(options); return cache.value; - } - var center = this.getRelativeCenterPoint(), - options = { - angle: this.angle, - translateX: center.x, - translateY: center.y, - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: this.skewX, - skewY: this.skewY, - flipX: this.flipX, - flipY: this.flipY, - }; - cache.key = key; - cache.value = util.composeMatrix(options); - return cache.value; - }, - - /** + }, + + /** * Calculate object dimensions from its properties * @private * @returns {fabric.Point} dimensions */ - _getNonTransformedDimensions: function() { - return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth); - }, + _getNonTransformedDimensions: function() { + return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth); + }, - /** + /** * Calculate object bounding box dimensions from its properties scale, skew. * @param {Object} [options] * @param {Number} [options.scaleX] @@ -721,52 +723,53 @@ util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype * * @private * @returns {fabric.Point} dimensions */ - _getTransformedDimensions: function (options) { - options = Object.assign({ - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: this.skewX, - skewY: this.skewY, - width: this.width, - height: this.height, - strokeWidth: this.strokeWidth - }, options || {}); - // stroke is applied before/after transformations are applied according to `strokeUniform` - var preScalingStrokeValue, postScalingStrokeValue, strokeWidth = options.strokeWidth; - if (this.strokeUniform) { - preScalingStrokeValue = 0; - postScalingStrokeValue = strokeWidth; - } - else { - preScalingStrokeValue = strokeWidth; - postScalingStrokeValue = 0; - } - var dimX = options.width + preScalingStrokeValue, - dimY = options.height + preScalingStrokeValue, - finalDimensions, - noSkew = options.skewX === 0 && options.skewY === 0; - if (noSkew) { - finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY); - } - else { - var bbox = util.sizeAfterTransform(dimX, dimY, options); - finalDimensions = new fabric.Point(bbox.x, bbox.y); - } - - return finalDimensions.scalarAddEquals(postScalingStrokeValue); - }, - - /** + _getTransformedDimensions: function (options) { + options = Object.assign({ + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + width: this.width, + height: this.height, + strokeWidth: this.strokeWidth + }, options || {}); + // stroke is applied before/after transformations are applied according to `strokeUniform` + var preScalingStrokeValue, postScalingStrokeValue, strokeWidth = options.strokeWidth; + if (this.strokeUniform) { + preScalingStrokeValue = 0; + postScalingStrokeValue = strokeWidth; + } + else { + preScalingStrokeValue = strokeWidth; + postScalingStrokeValue = 0; + } + var dimX = options.width + preScalingStrokeValue, + dimY = options.height + preScalingStrokeValue, + finalDimensions, + noSkew = options.skewX === 0 && options.skewY === 0; + if (noSkew) { + finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY); + } + else { + var bbox = util.sizeAfterTransform(dimX, dimY, options); + finalDimensions = new fabric.Point(bbox.x, bbox.y); + } + + return finalDimensions.scalarAddEquals(postScalingStrokeValue); + }, + + /** * Calculate object dimensions for controls box, including padding and canvas zoom. * and active selection * @private * @param {object} [options] transform options * @returns {fabric.Point} dimensions */ - _calculateCurrentDimensions: function(options) { - var vpt = this.getViewportTransform(), - dim = this._getTransformedDimensions(options), - p = transformPoint(dim, vpt, true); - return p.scalarAdd(2 * this.padding); - }, -}); + _calculateCurrentDimensions: function(options) { + var vpt = this.getViewportTransform(), + dim = this._getTransformedDimensions(options), + p = transformPoint(dim, vpt, true); + return p.scalarAdd(2 * this.padding); + }, + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index 7326e8d9d59..64589e21e82 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -1,83 +1,85 @@ -var degreesToRadians = fabric.util.degreesToRadians; +(function(global) { -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** + var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians; + + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** * Determines which corner has been clicked * @private * @param {Object} pointer The pointer indicating the mouse position * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found */ - _findTargetCorner: function(pointer, forTouch) { - if (!this.hasControls || (!this.canvas || this.canvas._activeObject !== this)) { - return false; - } - var xPoints, - lines, keys = Object.keys(this.oCoords), - j = keys.length - 1, i; - this.__corner = 0; - - // cycle in reverse order so we pick first the one on top - for (; j >= 0; j--) { - i = keys[j]; - if (!this.isControlVisible(i)) { - continue; + _findTargetCorner: function(pointer, forTouch) { + if (!this.hasControls || (!this.canvas || this.canvas._activeObject !== this)) { + return false; } + var xPoints, + lines, keys = Object.keys(this.oCoords), + j = keys.length - 1, i; + this.__corner = 0; - lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); - // // debugging - // - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + // cycle in reverse order so we pick first the one on top + for (; j >= 0; j--) { + i = keys[j]; + if (!this.isControlVisible(i)) { + continue; + } - xPoints = this._findCrossPoints(pointer, lines); - if (xPoints !== 0 && xPoints % 2 === 1) { - this.__corner = i; - return i; + lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); + // // debugging + // + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + + xPoints = this._findCrossPoints(pointer, lines); + if (xPoints !== 0 && xPoints % 2 === 1) { + this.__corner = i; + return i; + } } - } - return false; - }, + return false; + }, - /** + /** * Calls a function for each control. The function gets called, * with the control, the object that is calling the iterator and the control's key * @param {Function} fn function to iterate over the controls over */ - forEachControl: function(fn) { - for (var i in this.controls) { - fn(this.controls[i], i, this); - }; - }, + forEachControl: function(fn) { + for (var i in this.controls) { + fn(this.controls[i], i, this); + }; + }, - /** + /** * Sets the coordinates of the draggable boxes in the corners of * the image used to scale/rotate it. * note: if we would switch to ROUND corner area, all of this would disappear. * everything would resolve to a single point and a pythagorean theorem for the distance * @private */ - _setCornerCoords: function() { - var coords = this.oCoords; + _setCornerCoords: function() { + var coords = this.oCoords; - for (var control in coords) { - var controlObject = this.controls[control]; - coords[control].corner = controlObject.calcCornerCoords( - this.angle, this.cornerSize, coords[control].x, coords[control].y, false); - coords[control].touchCorner = controlObject.calcCornerCoords( - this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); - } - }, + for (var control in coords) { + var controlObject = this.controls[control]; + coords[control].corner = controlObject.calcCornerCoords( + this.angle, this.cornerSize, coords[control].x, coords[control].y, false); + coords[control].touchCorner = controlObject.calcCornerCoords( + this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); + } + }, - /** + /** * Draws a colored layer behind the object, inside its selection borders. * Requires public options: padding, selectionBackgroundColor * this function is called when the context is transformed @@ -86,60 +88,60 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot * @return {fabric.Object} thisArg * @chainable */ - drawSelectionBackground: function(ctx) { - if (!this.selectionBackgroundColor || + drawSelectionBackground: function(ctx) { + if (!this.selectionBackgroundColor || (this.canvas && !this.canvas.interactive) || (this.canvas && this.canvas._activeObject !== this) - ) { + ) { + return this; + } + ctx.save(); + var center = this.getRelativeCenterPoint(), wh = this._calculateCurrentDimensions(), + vpt = this.canvas.viewportTransform; + ctx.translate(center.x, center.y); + ctx.scale(1 / vpt[0], 1 / vpt[3]); + ctx.rotate(degreesToRadians(this.angle)); + ctx.fillStyle = this.selectionBackgroundColor; + ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); + ctx.restore(); return this; - } - ctx.save(); - var center = this.getRelativeCenterPoint(), wh = this._calculateCurrentDimensions(), - vpt = this.canvas.viewportTransform; - ctx.translate(center.x, center.y); - ctx.scale(1 / vpt[0], 1 / vpt[3]); - ctx.rotate(degreesToRadians(this.angle)); - ctx.fillStyle = this.selectionBackgroundColor; - ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); - ctx.restore(); - return this; - }, + }, - /** + /** * @public override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style. * @param {CanvasRenderingContext2D} ctx ctx is rotated and translated so that (0,0) is at object's center * @param {fabric.Point} size the control box size used */ - strokeBorders: function (ctx, size) { - ctx.strokeRect( - -size.x / 2, - -size.y / 2, - size.x, - size.y - ); - }, + strokeBorders: function (ctx, size) { + ctx.strokeRect( + -size.x / 2, + -size.y / 2, + size.x, + size.y + ); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to draw on * @param {fabric.Point} size * @param {Object} styleOverride object to override the object style */ - _drawBorders: function (ctx, size, styleOverride) { - var options = Object.assign({ - hasControls: this.hasControls, - borderColor: this.borderColor, - borderDashArray: this.borderDashArray - }, styleOverride || {}); - ctx.save(); - ctx.strokeStyle = options.borderColor; - this._setLineDash(ctx, options.borderDashArray); - this.strokeBorders(ctx, size); - options.hasControls && this.drawControlsConnectingLines(ctx, size); - ctx.restore(); - }, + _drawBorders: function (ctx, size, styleOverride) { + var options = Object.assign({ + hasControls: this.hasControls, + borderColor: this.borderColor, + borderDashArray: this.borderDashArray + }, styleOverride || {}); + ctx.save(); + ctx.strokeStyle = options.borderColor; + this._setLineDash(ctx, options.borderDashArray); + this.strokeBorders(ctx, size); + options.hasControls && this.drawControlsConnectingLines(ctx, size); + ctx.restore(); + }, - /** + /** * Draws borders of an object's bounding box. * Requires public properties: width, height * Requires public options: padding, borderColor @@ -149,24 +151,24 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot * @return {fabric.Object} thisArg * @chainable */ - drawBorders: function (ctx, options, styleOverride) { - var size; - if ((styleOverride && styleOverride.forActiveSelection) || this.group) { - var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), - strokeFactor = this.strokeUniform ? - new fabric.Point(0, 0).scalarAddEquals(this.canvas.getZoom()) : - new fabric.Point(options.scaleX, options.scaleY), - stroke = strokeFactor.scalarMultiplyEquals(this.strokeWidth); - size = bbox.addEquals(stroke).scalarAddEquals(this.borderScaleFactor); - } - else { - size = this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor); - } - this._drawBorders(ctx, size, styleOverride); - return this; - }, + drawBorders: function (ctx, options, styleOverride) { + var size; + if ((styleOverride && styleOverride.forActiveSelection) || this.group) { + var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), + strokeFactor = this.strokeUniform ? + new fabric.Point(0, 0).scalarAddEquals(this.canvas.getZoom()) : + new fabric.Point(options.scaleX, options.scaleY), + stroke = strokeFactor.scalarMultiplyEquals(this.strokeWidth); + size = bbox.addEquals(stroke).scalarAddEquals(this.borderScaleFactor); + } + else { + size = this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor); + } + this._drawBorders(ctx, size, styleOverride); + return this; + }, - /** + /** * Draws lines from a borders of an object's bounding box to controls that have `withConnection` property set. * Requires public properties: width, height * Requires public options: padding, borderColor @@ -176,29 +178,29 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot * @return {fabric.Object} thisArg * @chainable */ - drawControlsConnectingLines: function (ctx, size) { - var shouldStroke = false; + drawControlsConnectingLines: function (ctx, size) { + var shouldStroke = false; - ctx.beginPath(); - this.forEachControl(function (control, key, fabricObject) { - // in this moment, the ctx is centered on the object. - // width and height of the above function are the size of the bbox. - if (control.withConnection && control.getVisibility(fabricObject, key)) { - // reset movement for each control - shouldStroke = true; - ctx.moveTo(control.x * size.x, control.y * size.y); - ctx.lineTo( - control.x * size.x + control.offsetX, - control.y * size.y + control.offsetY - ); - } - }); - shouldStroke && ctx.stroke(); + ctx.beginPath(); + this.forEachControl(function (control, key, fabricObject) { + // in this moment, the ctx is centered on the object. + // width and height of the above function are the size of the bbox. + if (control.withConnection && control.getVisibility(fabricObject, key)) { + // reset movement for each control + shouldStroke = true; + ctx.moveTo(control.x * size.x, control.y * size.y); + ctx.lineTo( + control.x * size.x + control.offsetX, + control.y * size.y + control.offsetY + ); + } + }); + shouldStroke && ctx.stroke(); - return this; - }, + return this; + }, - /** + /** * Draws corners of an object's bounding box. * Requires public properties: width, height * Requires public options: cornerSize, padding @@ -207,53 +209,53 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot * @return {fabric.Object} thisArg * @chainable */ - drawControls: function(ctx, styleOverride) { - styleOverride = styleOverride || {}; - ctx.save(); - var retinaScaling = this.canvas.getRetinaScaling(), p; - ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); - ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; - if (!this.transparentCorners) { - ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; - } - this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); - this.setCoords(); - this.forEachControl(function(control, key, fabricObject) { - if (control.getVisibility(fabricObject, key)) { - p = fabricObject.oCoords[key]; - control.render(ctx, p.x, p.y, styleOverride, fabricObject); + drawControls: function(ctx, styleOverride) { + styleOverride = styleOverride || {}; + ctx.save(); + var retinaScaling = this.canvas.getRetinaScaling(), p; + ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); + ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; + if (!this.transparentCorners) { + ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; } - }); - ctx.restore(); + this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); + this.setCoords(); + this.forEachControl(function(control, key, fabricObject) { + if (control.getVisibility(fabricObject, key)) { + p = fabricObject.oCoords[key]; + control.render(ctx, p.x, p.y, styleOverride, fabricObject); + } + }); + ctx.restore(); - return this; - }, + return this; + }, - /** + /** * Returns true if the specified control is visible, false otherwise. * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. * @returns {Boolean} true if the specified control is visible, false otherwise */ - isControlVisible: function(controlKey) { - return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); - }, + isControlVisible: function(controlKey) { + return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); + }, - /** + /** * Sets the visibility of the specified control. * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. * @param {Boolean} visible true to set the specified control visible, false otherwise * @return {fabric.Object} thisArg * @chainable */ - setControlVisible: function(controlKey, visible) { - if (!this._controlsVisibility) { - this._controlsVisibility = {}; - } - this._controlsVisibility[controlKey] = visible; - return this; - }, + setControlVisible: function(controlKey, visible) { + if (!this._controlsVisibility) { + this._controlsVisibility = {}; + } + this._controlsVisibility[controlKey] = visible; + return this; + }, - /** + /** * Sets the visibility state of object controls. * @param {Object} [options] Options object * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it @@ -268,34 +270,35 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot * @return {fabric.Object} thisArg * @chainable */ - setControlsVisibility: function(options) { - options || (options = { }); + setControlsVisibility: function(options) { + options || (options = { }); - for (var p in options) { - this.setControlVisible(p, options[p]); - } - return this; - }, + for (var p in options) { + this.setControlVisible(p, options[p]); + } + return this; + }, - /** + /** * This callback function is called every time _discardActiveObject or _setActiveObject * try to to deselect this object. If the function returns true, the process is cancelled * @param {Object} [options] options sent from the upper functions * @param {Event} [options.e] event if the process is generated by an event */ - onDeselect: function() { - // implemented by sub-classes, as needed. - }, + onDeselect: function() { + // implemented by sub-classes, as needed. + }, - /** + /** * This callback function is called every time _discardActiveObject or _setActiveObject * try to to select this object. If the function returns true, the process is cancelled * @param {Object} [options] options sent from the upper functions * @param {Event} [options.e] event if the process is generated by an event */ - onSelect: function() { - // implemented by sub-classes, as needed. - } -}); + onSelect: function() { + // implemented by sub-classes, as needed. + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/object_origin.mixin.js b/src/mixins/object_origin.mixin.js index 700abb33dba..827f6db2654 100644 --- a/src/mixins/object_origin.mixin.js +++ b/src/mixins/object_origin.mixin.js @@ -1,47 +1,49 @@ -var degreesToRadians = fabric.util.degreesToRadians, - originXOffset = { - left: -0.5, - center: 0, - right: 0.5 - }, - originYOffset = { - top: -0.5, - center: 0, - bottom: 0.5 - }; +(function(global) { + + var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians, + originXOffset = { + left: -0.5, + center: 0, + right: 0.5 + }, + originYOffset = { + top: -0.5, + center: 0, + bottom: 0.5 + }; -/** + /** * @typedef {number | 'left' | 'center' | 'right'} OriginX * @typedef {number | 'top' | 'center' | 'bottom'} OriginY */ -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** + /** * Resolves origin value relative to center * @private * @param {OriginX} originX * @returns number */ - resolveOriginX: function (originX) { - return typeof originX === 'string' ? - originXOffset[originX] : - originX - 0.5; - }, + resolveOriginX: function (originX) { + return typeof originX === 'string' ? + originXOffset[originX] : + originX - 0.5; + }, - /** + /** * Resolves origin value relative to center * @private * @param {OriginY} originY * @returns number */ - resolveOriginY: function (originY) { - return typeof originY === 'string' ? - originYOffset[originY] : - originY - 0.5; - }, + resolveOriginY: function (originY) { + return typeof originY === 'string' ? + originYOffset[originY] : + originY - 0.5; + }, - /** + /** * Translates the coordinates from a set of origin to another (based on the object's dimensions) * @param {fabric.Point} point The point which corresponds to the originX and originY params * @param {OriginX} fromOriginX Horizontal origin: 'left', 'center' or 'right' @@ -50,231 +52,233 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot * @param {OriginY} toOriginY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { - var x = point.x, - y = point.y, - dim, - offsetX = this.resolveOriginX(toOriginX) - this.resolveOriginX(fromOriginX), - offsetY = this.resolveOriginY(toOriginY) - this.resolveOriginY(fromOriginY); - - if (offsetX || offsetY) { - dim = this._getTransformedDimensions(); - x = point.x + offsetX * dim.x; - y = point.y + offsetY * dim.y; - } - - return new fabric.Point(x, y); - }, + translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { + var x = point.x, + y = point.y, + dim, + offsetX = this.resolveOriginX(toOriginX) - this.resolveOriginX(fromOriginX), + offsetY = this.resolveOriginY(toOriginY) - this.resolveOriginY(fromOriginY); - /** + if (offsetX || offsetY) { + dim = this._getTransformedDimensions(); + x = point.x + offsetX * dim.x; + y = point.y + offsetY * dim.y; + } + + return new fabric.Point(x, y); + }, + + /** * Translates the coordinates from origin to center coordinates (based on the object's dimensions) * @param {fabric.Point} point The point which corresponds to the originX and originY params * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - translateToCenterPoint: function(point, originX, originY) { - var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); - if (this.angle) { - return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); - } - return p; - }, + translateToCenterPoint: function(point, originX, originY) { + var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); + if (this.angle) { + return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); + } + return p; + }, - /** + /** * Translates the coordinates from center to origin coordinates (based on the object's dimensions) * @param {fabric.Point} center The point which corresponds to center of the object * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - translateToOriginPoint: function(center, originX, originY) { - var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - if (this.angle) { - return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); - } - return p; - }, + translateToOriginPoint: function(center, originX, originY) { + var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + if (this.angle) { + return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); + } + return p; + }, - /** + /** * Returns the center coordinates of the object relative to canvas * @return {fabric.Point} */ - getCenterPoint: function() { - var relCenter = this.getRelativeCenterPoint(); - return this.group ? - fabric.util.transformPoint(relCenter, this.group.calcTransformMatrix()) : - relCenter; - }, + getCenterPoint: function() { + var relCenter = this.getRelativeCenterPoint(); + return this.group ? + fabric.util.transformPoint(relCenter, this.group.calcTransformMatrix()) : + relCenter; + }, - /** + /** * Returns the center coordinates of the object relative to it's containing group or null * @return {fabric.Point|null} point or null of object has no parent group */ - getCenterPointRelativeToParent: function () { - return this.group ? this.getRelativeCenterPoint() : null; - }, + getCenterPointRelativeToParent: function () { + return this.group ? this.getRelativeCenterPoint() : null; + }, - /** + /** * Returns the center coordinates of the object relative to it's parent * @return {fabric.Point} */ - getRelativeCenterPoint: function () { - return this.translateToCenterPoint(new fabric.Point(this.left, this.top), this.originX, this.originY); - }, + getRelativeCenterPoint: function () { + return this.translateToCenterPoint(new fabric.Point(this.left, this.top), this.originX, this.originY); + }, - /** + /** * Returns the coordinates of the object based on center coordinates * @param {fabric.Point} point The point which corresponds to the originX and originY params * @return {fabric.Point} */ - // getOriginPoint: function(center) { - // return this.translateToOriginPoint(center, this.originX, this.originY); - // }, + // getOriginPoint: function(center) { + // return this.translateToOriginPoint(center, this.originX, this.originY); + // }, - /** + /** * Returns the coordinates of the object as if it has a different origin * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - getPointByOrigin: function(originX, originY) { - var center = this.getRelativeCenterPoint(); - return this.translateToOriginPoint(center, originX, originY); - }, + getPointByOrigin: function(originX, originY) { + var center = this.getRelativeCenterPoint(); + return this.translateToOriginPoint(center, originX, originY); + }, - /** + /** * Returns the normalized point (rotated relative to center) in local coordinates * @param {fabric.Point} point The point relative to instance coordinate system * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {fabric.Point} */ - normalizePoint: function(point, originX, originY) { - var center = this.getRelativeCenterPoint(), p, p2; - if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { - p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - } - else { - p = new fabric.Point(this.left, this.top); - } - - p2 = new fabric.Point(point.x, point.y); - if (this.angle) { - p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); - } - return p2.subtractEquals(p); - }, + normalizePoint: function(point, originX, originY) { + var center = this.getRelativeCenterPoint(), p, p2; + if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { + p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + } + else { + p = new fabric.Point(this.left, this.top); + } - /** + p2 = new fabric.Point(point.x, point.y); + if (this.angle) { + p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); + } + return p2.subtractEquals(p); + }, + + /** * Returns coordinates of a pointer relative to object's top left corner in object's plane * @param {Event} e Event to operate upon * @param {Object} [pointer] Pointer to operate upon (instead of event) * @return {Object} Coordinates of a pointer (x, y) */ - getLocalPointer: function (e, pointer) { - pointer = pointer || this.canvas.getPointer(e); - return fabric.util.transformPoint( - new fabric.Point(pointer.x, pointer.y), - fabric.util.invertTransform(this.calcTransformMatrix()) - ).addEquals(new fabric.Point(this.width / 2, this.height / 2)); - }, + getLocalPointer: function (e, pointer) { + pointer = pointer || this.canvas.getPointer(e); + return fabric.util.transformPoint( + new fabric.Point(pointer.x, pointer.y), + fabric.util.invertTransform(this.calcTransformMatrix()) + ).addEquals(new fabric.Point(this.width / 2, this.height / 2)); + }, - /** + /** * Returns the point in global coordinates * @param {fabric.Point} The point relative to the local coordinate system * @return {fabric.Point} */ - // toGlobalPoint: function(point) { - // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); - // }, + // toGlobalPoint: function(point) { + // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); + // }, - /** + /** * Sets the position of the object taking into consideration the object's origin * @param {fabric.Point} pos The new position of the object * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' * @return {void} */ - setPositionByOrigin: function(pos, originX, originY) { - var center = this.translateToCenterPoint(pos, originX, originY), - position = this.translateToOriginPoint(center, this.originX, this.originY); - this.set('left', position.x); - this.set('top', position.y); - }, + setPositionByOrigin: function(pos, originX, originY) { + var center = this.translateToCenterPoint(pos, originX, originY), + position = this.translateToOriginPoint(center, this.originX, this.originY); + this.set('left', position.x); + this.set('top', position.y); + }, - /** + /** * @param {String} to One of 'left', 'center', 'right' */ - adjustPosition: function(to) { - var angle = degreesToRadians(this.angle), - hypotFull = this.getScaledWidth(), - xFull = fabric.util.cos(angle) * hypotFull, - yFull = fabric.util.sin(angle) * hypotFull, - offsetFrom, offsetTo; - - //TODO: this function does not consider mixed situation like top, center. - if (typeof this.originX === 'string') { - offsetFrom = originXOffset[this.originX]; - } - else { - offsetFrom = this.originX - 0.5; - } - if (typeof to === 'string') { - offsetTo = originXOffset[to]; - } - else { - offsetTo = to - 0.5; - } - this.left += xFull * (offsetTo - offsetFrom); - this.top += yFull * (offsetTo - offsetFrom); - this.setCoords(); - this.originX = to; - }, + adjustPosition: function(to) { + var angle = degreesToRadians(this.angle), + hypotFull = this.getScaledWidth(), + xFull = fabric.util.cos(angle) * hypotFull, + yFull = fabric.util.sin(angle) * hypotFull, + offsetFrom, offsetTo; - /** + //TODO: this function does not consider mixed situation like top, center. + if (typeof this.originX === 'string') { + offsetFrom = originXOffset[this.originX]; + } + else { + offsetFrom = this.originX - 0.5; + } + if (typeof to === 'string') { + offsetTo = originXOffset[to]; + } + else { + offsetTo = to - 0.5; + } + this.left += xFull * (offsetTo - offsetFrom); + this.top += yFull * (offsetTo - offsetFrom); + this.setCoords(); + this.originX = to; + }, + + /** * Sets the origin/position of the object to it's center point * @private * @return {void} */ - _setOriginToCenter: function() { - this._originalOriginX = this.originX; - this._originalOriginY = this.originY; + _setOriginToCenter: function() { + this._originalOriginX = this.originX; + this._originalOriginY = this.originY; - var center = this.getRelativeCenterPoint(); + var center = this.getRelativeCenterPoint(); - this.originX = 'center'; - this.originY = 'center'; + this.originX = 'center'; + this.originY = 'center'; - this.left = center.x; - this.top = center.y; - }, + this.left = center.x; + this.top = center.y; + }, - /** + /** * Resets the origin/position of the object to it's original origin * @private * @return {void} */ - _resetOrigin: function() { - var originPoint = this.translateToOriginPoint( - this.getRelativeCenterPoint(), - this._originalOriginX, - this._originalOriginY); + _resetOrigin: function() { + var originPoint = this.translateToOriginPoint( + this.getRelativeCenterPoint(), + this._originalOriginX, + this._originalOriginY); - this.originX = this._originalOriginX; - this.originY = this._originalOriginY; + this.originX = this._originalOriginX; + this.originY = this._originalOriginY; - this.left = originPoint.x; - this.top = originPoint.y; + this.left = originPoint.x; + this.top = originPoint.y; - this._originalOriginX = null; - this._originalOriginY = null; - }, + this._originalOriginX = null; + this._originalOriginY = null; + }, - /** + /** * @private */ - _getLeftTopCoords: function() { - return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top'); - }, -}); + _getLeftTopCoords: function() { + return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top'); + }, + }); + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/object_stacking.mixin.js b/src/mixins/object_stacking.mixin.js index 6af83291af0..55daec82e26 100644 --- a/src/mixins/object_stacking.mixin.js +++ b/src/mixins/object_stacking.mixin.js @@ -1,110 +1,113 @@ -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { +(function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Moves an object to the bottom of the stack of drawn objects - * @return {fabric.Object} thisArg - * @chainable - */ - sendToBack: function() { - if (this.group) { - fabric.StaticCanvas.prototype.sendToBack.call(this.group, this); - } - else if (this.canvas) { - this.canvas.sendToBack(this); - } - return this; - }, + /** + * Moves an object to the bottom of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + sendToBack: function() { + if (this.group) { + fabric.StaticCanvas.prototype.sendToBack.call(this.group, this); + } + else if (this.canvas) { + this.canvas.sendToBack(this); + } + return this; + }, - /** - * Moves an object to the top of the stack of drawn objects - * @return {fabric.Object} thisArg - * @chainable - */ - bringToFront: function() { - if (this.group) { - fabric.StaticCanvas.prototype.bringToFront.call(this.group, this); - } - else if (this.canvas) { - this.canvas.bringToFront(this); - } - return this; - }, + /** + * Moves an object to the top of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + bringToFront: function() { + if (this.group) { + fabric.StaticCanvas.prototype.bringToFront.call(this.group, this); + } + else if (this.canvas) { + this.canvas.bringToFront(this); + } + return this; + }, - /** - * Moves an object down in stack of drawn objects - * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object - * @return {fabric.Object} thisArg - * @chainable - */ - sendBackwards: function(intersecting) { - if (this.group) { - fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting); - } - else if (this.canvas) { - this.canvas.sendBackwards(this, intersecting); - } - return this; - }, + /** + * Moves an object down in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + sendBackwards: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.sendBackwards(this, intersecting); + } + return this; + }, - /** - * Moves an object up in stack of drawn objects - * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object - * @return {fabric.Object} thisArg - * @chainable - */ - bringForward: function(intersecting) { - if (this.group) { - fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting); - } - else if (this.canvas) { - this.canvas.bringForward(this, intersecting); - } - return this; - }, + /** + * Moves an object up in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + bringForward: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.bringForward(this, intersecting); + } + return this; + }, - /** - * Moves an object to specified level in stack of drawn objects - * @param {Number} index New position of object - * @return {fabric.Object} thisArg - * @chainable - */ - moveTo: function(index) { - if (this.group && this.group.type !== 'activeSelection') { - fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index); - } - else if (this.canvas) { - this.canvas.moveTo(this, index); - } - return this; - }, + /** + * Moves an object to specified level in stack of drawn objects + * @param {Number} index New position of object + * @return {fabric.Object} thisArg + * @chainable + */ + moveTo: function(index) { + if (this.group && this.group.type !== 'activeSelection') { + fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index); + } + else if (this.canvas) { + this.canvas.moveTo(this, index); + } + return this; + }, - /** - * - * @param {fabric.Object} other object to compare against - * @returns {boolean | undefined} if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns `undefined` - */ - isInFrontOf: function (other) { - if (this === other) { - return undefined; - } - var ancestorData = this.findCommonAncestors(other); - if (!ancestorData) { - return undefined; - } - if (ancestorData.fork.includes(other)) { - return true; - } - if (ancestorData.otherFork.includes(this)) { - return false; - } - var firstCommonAncestor = ancestorData.common[0]; - if (!firstCommonAncestor) { - return undefined; + /** + * + * @param {fabric.Object} other object to compare against + * @returns {boolean | undefined} if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns `undefined` + */ + isInFrontOf: function (other) { + if (this === other) { + return undefined; + } + var ancestorData = this.findCommonAncestors(other); + if (!ancestorData) { + return undefined; + } + if (ancestorData.fork.includes(other)) { + return true; + } + if (ancestorData.otherFork.includes(this)) { + return false; + } + var firstCommonAncestor = ancestorData.common[0]; + if (!firstCommonAncestor) { + return undefined; + } + var headOfFork = ancestorData.fork.pop(), + headOfOtherFork = ancestorData.otherFork.pop(), + thisIndex = firstCommonAncestor._objects.indexOf(headOfFork), + otherIndex = firstCommonAncestor._objects.indexOf(headOfOtherFork); + return thisIndex > -1 && thisIndex > otherIndex; } - var headOfFork = ancestorData.fork.pop(), - headOfOtherFork = ancestorData.otherFork.pop(), - thisIndex = firstCommonAncestor._objects.indexOf(headOfFork), - otherIndex = firstCommonAncestor._objects.indexOf(headOfOtherFork); - return thisIndex > -1 && thisIndex > otherIndex; - } -}); + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/object_straightening.mixin.js b/src/mixins/object_straightening.mixin.js index e9924926344..f7217c170b1 100644 --- a/src/mixins/object_straightening.mixin.js +++ b/src/mixins/object_straightening.mixin.js @@ -1,80 +1,83 @@ -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { +(function (global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * @private - * @return {Number} angle value - */ - _getAngleValueForStraighten: function() { - var angle = this.angle % 360; - if (angle > 0) { - return Math.round((angle - 1) / 90) * 90; - } - return Math.round(angle / 90) * 90; - }, + /** + * @private + * @return {Number} angle value + */ + _getAngleValueForStraighten: function() { + var angle = this.angle % 360; + if (angle > 0) { + return Math.round((angle - 1) / 90) * 90; + } + return Math.round(angle / 90) * 90; + }, - /** - * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) - * @return {fabric.Object} thisArg - * @chainable - */ - straighten: function() { - return this.rotate(this._getAngleValueForStraighten()); - }, + /** + * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) + * @return {fabric.Object} thisArg + * @chainable + */ + straighten: function() { + return this.rotate(this._getAngleValueForStraighten()); + }, - /** - * Same as {@link fabric.Object.prototype.straighten} but with animation - * @param {Object} callbacks Object with callback functions - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.Object} thisArg - */ - fxStraighten: function(callbacks) { - callbacks = callbacks || { }; + /** + * Same as {@link fabric.Object.prototype.straighten} but with animation + * @param {Object} callbacks Object with callback functions + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Object} thisArg + */ + fxStraighten: function(callbacks) { + callbacks = callbacks || { }; - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; - return fabric.util.animate({ - target: this, - startValue: this.get('angle'), - endValue: this._getAngleValueForStraighten(), - duration: this.FX_DURATION, - onChange: function(value) { - _this.rotate(value); - onChange(); - }, - onComplete: function() { - _this.setCoords(); - onComplete(); - }, - }); - } -}); + return fabric.util.animate({ + target: this, + startValue: this.get('angle'), + endValue: this._getAngleValueForStraighten(), + duration: this.FX_DURATION, + onChange: function(value) { + _this.rotate(value); + onChange(); + }, + onComplete: function() { + _this.setCoords(); + onComplete(); + }, + }); + } + }); -fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Straightens object, then rerenders canvas - * @param {fabric.Object} object Object to straighten - * @return {fabric.Canvas} thisArg - * @chainable - */ - straightenObject: function (object) { - object.straighten(); - this.requestRenderAll(); - return this; - }, + /** + * Straightens object, then rerenders canvas + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + straightenObject: function (object) { + object.straighten(); + this.requestRenderAll(); + return this; + }, - /** - * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated - * @param {fabric.Object} object Object to straighten - * @return {fabric.Canvas} thisArg - */ - fxStraightenObject: function (object) { - return object.fxStraighten({ - onChange: this.requestRenderAllBound - }); - } -}); + /** + * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + */ + fxStraightenObject: function (object) { + return object.fxStraighten({ + onChange: this.requestRenderAllBound + }); + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/observable.mixin.js b/src/mixins/observable.mixin.js index 0775f7cb8b7..6b23c8a37f1 100644 --- a/src/mixins/observable.mixin.js +++ b/src/mixins/observable.mixin.js @@ -1,22 +1,24 @@ -/** +(function(global) { + var fabric = global.fabric; + /** * @private * @param {String} eventName * @param {Function} handler */ -function _removeEventListener(eventName, handler) { - if (!this.__eventListeners[eventName]) { - return; - } - var eventListener = this.__eventListeners[eventName]; - if (handler) { - eventListener[eventListener.indexOf(handler)] = false; - } - else { - fabric.util.array.fill(eventListener, false); + function _removeEventListener(eventName, handler) { + if (!this.__eventListeners[eventName]) { + return; + } + var eventListener = this.__eventListeners[eventName]; + if (handler) { + eventListener[eventListener.indexOf(handler)] = false; + } + else { + fabric.util.array.fill(eventListener, false); + } } -} -/** + /** * Observes specified event * @memberOf fabric.Observable * @alias on @@ -24,35 +26,35 @@ function _removeEventListener(eventName, handler) { * @param {Function} handler Function that receives a notification when an event of the specified type occurs * @return {Function} disposer */ -function on(eventName, handler) { - if (!this.__eventListeners) { - this.__eventListeners = { }; - } - // one object with key/value pairs was passed - if (arguments.length === 1) { - for (var prop in eventName) { - this.on(prop, eventName[prop]); + function on(eventName, handler) { + if (!this.__eventListeners) { + this.__eventListeners = { }; } - } - else { - if (!this.__eventListeners[eventName]) { - this.__eventListeners[eventName] = []; + // one object with key/value pairs was passed + if (arguments.length === 1) { + for (var prop in eventName) { + this.on(prop, eventName[prop]); + } } - this.__eventListeners[eventName].push(handler); + else { + if (!this.__eventListeners[eventName]) { + this.__eventListeners[eventName] = []; + } + this.__eventListeners[eventName].push(handler); + } + return off.bind(this, eventName, handler); } - return off.bind(this, eventName, handler); -} -function _once(eventName, handler) { - var _handler = function () { - handler.apply(this, arguments); - this.off(eventName, _handler); - }.bind(this); - this.on(eventName, _handler); - return _handler; -} + function _once(eventName, handler) { + var _handler = function () { + handler.apply(this, arguments); + this.off(eventName, _handler); + }.bind(this); + this.on(eventName, _handler); + return _handler; + } -/** + /** * Observes specified event **once** * @memberOf fabric.Observable * @alias once @@ -60,22 +62,22 @@ function _once(eventName, handler) { * @param {Function} handler Function that receives a notification when an event of the specified type occurs * @return {Function} disposer */ -function once(eventName, handler) { - // one object with key/value pairs was passed - if (arguments.length === 1) { - var handlers = {}; - for (var prop in eventName) { - handlers[prop] = _once.call(this, prop, eventName[prop]); + function once(eventName, handler) { + // one object with key/value pairs was passed + if (arguments.length === 1) { + var handlers = {}; + for (var prop in eventName) { + handlers[prop] = _once.call(this, prop, eventName[prop]); + } + return off.bind(this, handlers); + } + else { + var _handler = _once.call(this, eventName, handler); + return off.bind(this, eventName, _handler); } - return off.bind(this, handlers); - } - else { - var _handler = _once.call(this, eventName, handler); - return off.bind(this, eventName, _handler); } -} -/** + /** * Stops event observing for a particular event handler. Calling this method * without arguments removes all handlers for all events * @memberOf fabric.Observable @@ -83,60 +85,61 @@ function once(eventName, handler) { * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) * @param {Function} handler Function to be deleted from EventListeners */ -function off(eventName, handler) { - if (!this.__eventListeners) { - return; - } + function off(eventName, handler) { + if (!this.__eventListeners) { + return; + } - // remove all key/value pairs (event name -> event handler) - if (arguments.length === 0) { - for (eventName in this.__eventListeners) { - _removeEventListener.call(this, eventName); + // remove all key/value pairs (event name -> event handler) + if (arguments.length === 0) { + for (eventName in this.__eventListeners) { + _removeEventListener.call(this, eventName); + } } - } - // one object with key/value pairs was passed - else if (typeof eventName === 'object' && typeof handler === 'undefined') { - for (var prop in eventName) { - _removeEventListener.call(this, prop, eventName[prop]); + // one object with key/value pairs was passed + else if (typeof eventName === 'object' && typeof handler === 'undefined') { + for (var prop in eventName) { + _removeEventListener.call(this, prop, eventName[prop]); + } + } + else { + _removeEventListener.call(this, eventName, handler); } } - else { - _removeEventListener.call(this, eventName, handler); - } -} -/** + /** * Fires event with an optional options object * @memberOf fabric.Observable * @param {String} eventName Event name to fire * @param {Object} [options] Options object */ -function fire(eventName, options) { - if (!this.__eventListeners) { - return; - } + function fire(eventName, options) { + if (!this.__eventListeners) { + return; + } - var listenersForEvent = this.__eventListeners[eventName]; - if (!listenersForEvent) { - return; - } + var listenersForEvent = this.__eventListeners[eventName]; + if (!listenersForEvent) { + return; + } - for (var i = 0, len = listenersForEvent.length; i < len; i++) { - listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); + for (var i = 0, len = listenersForEvent.length; i < len; i++) { + listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); + } + this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { + return value !== false; + }); } - this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { - return value !== false; - }); -} -/** + /** * @namespace fabric.Observable * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events} * @see {@link http://fabricjs.com/events|Events demo} */ -fabric.Observable = { - fire: fire, - on: on, - once: once, - off: off, -}; + fabric.Observable = { + fire: fire, + on: on, + once: once, + off: off, + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/shared_methods.mixin.js b/src/mixins/shared_methods.mixin.js index 312f858c544..42b4f3613cc 100644 --- a/src/mixins/shared_methods.mixin.js +++ b/src/mixins/shared_methods.mixin.js @@ -1,68 +1,71 @@ -/** - * @namespace fabric.CommonMethods - */ -fabric.CommonMethods = { - +(function(global){ + var fabric = global.fabric; /** - * Sets object's properties from options - * @param {Object} [options] Options object + * @namespace fabric.CommonMethods */ - _setOptions: function(options) { - for (var prop in options) { - this.set(prop, options[prop]); - } - }, + fabric.CommonMethods = { - /** - * @private - */ - _setObject: function(obj) { - for (var prop in obj) { - this._set(prop, obj[prop]); - } - }, + /** + * Sets object's properties from options + * @param {Object} [options] Options object + */ + _setOptions: function(options) { + for (var prop in options) { + this.set(prop, options[prop]); + } + }, - /** - * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. - * @param {String|Object} key Property name or object (if object, iterate over the object properties) - * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) - * @return {fabric.Object} thisArg - * @chainable - */ - set: function(key, value) { - if (typeof key === 'object') { - this._setObject(key); - } - else { - this._set(key, value); - } - return this; - }, + /** + * @private + */ + _setObject: function(obj) { + for (var prop in obj) { + this._set(prop, obj[prop]); + } + }, - _set: function(key, value) { - this[key] = value; - }, + /** + * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. + * @param {String|Object} key Property name or object (if object, iterate over the object properties) + * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) + * @return {fabric.Object} thisArg + * @chainable + */ + set: function(key, value) { + if (typeof key === 'object') { + this._setObject(key); + } + else { + this._set(key, value); + } + return this; + }, - /** - * Toggles specified property from `true` to `false` or from `false` to `true` - * @param {String} property Property to toggle - * @return {fabric.Object} thisArg - * @chainable - */ - toggle: function(property) { - var value = this.get(property); - if (typeof value === 'boolean') { - this.set(property, !value); - } - return this; - }, + _set: function(key, value) { + this[key] = value; + }, - /** - * Basic getter - * @param {String} property Property name - * @return {*} value of a property - */ - get: function(property) { - return this[property]; - } -}; + /** + * Toggles specified property from `true` to `false` or from `false` to `true` + * @param {String} property Property to toggle + * @return {fabric.Object} thisArg + * @chainable + */ + toggle: function(property) { + var value = this.get(property); + if (typeof value === 'boolean') { + this.set(property, !value); + } + return this; + }, + + /** + * Basic getter + * @param {String} property Property name + * @return {*} value of a property + */ + get: function(property) { + return this[property]; + } + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/stateful.mixin.js b/src/mixins/stateful.mixin.js index 31f7bbd3269..f44a287e2fb 100644 --- a/src/mixins/stateful.mixin.js +++ b/src/mixins/stateful.mixin.js @@ -1,104 +1,106 @@ -var extend = fabric.util.object.extend, - originalSet = 'stateProperties'; +(function(global) { + var fabric = global.fabric, extend = fabric.util.object.extend, + originalSet = 'stateProperties'; -/* + /* Depends on `stateProperties` */ -function saveProps(origin, destination, props) { - var tmpObj = { }, deep = true; - props.forEach(function(prop) { - tmpObj[prop] = origin[prop]; - }); - - extend(origin[destination], tmpObj, deep); -} + function saveProps(origin, destination, props) { + var tmpObj = { }, deep = true; + props.forEach(function(prop) { + tmpObj[prop] = origin[prop]; + }); -function _isEqual(origValue, currentValue, firstPass) { - if (origValue === currentValue) { - // if the objects are identical, return - return true; + extend(origin[destination], tmpObj, deep); } - else if (Array.isArray(origValue)) { - if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { - return false; + + function _isEqual(origValue, currentValue, firstPass) { + if (origValue === currentValue) { + // if the objects are identical, return + return true; } - for (var i = 0, len = origValue.length; i < len; i++) { - if (!_isEqual(origValue[i], currentValue[i])) { + else if (Array.isArray(origValue)) { + if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { return false; } + for (var i = 0, len = origValue.length; i < len; i++) { + if (!_isEqual(origValue[i], currentValue[i])) { + return false; + } + } + return true; } - return true; - } - else if (origValue && typeof origValue === 'object') { - var keys = Object.keys(origValue), key; - if (!currentValue || + else if (origValue && typeof origValue === 'object') { + var keys = Object.keys(origValue), key; + if (!currentValue || typeof currentValue !== 'object' || (!firstPass && keys.length !== Object.keys(currentValue).length) - ) { - return false; - } - for (var i = 0, len = keys.length; i < len; i++) { - key = keys[i]; - // since clipPath is in the statefull cache list and the clipPath objects - // would be iterated as an object, this would lead to possible infinite recursion - // we do not want to compare those. - if (key === 'canvas' || key === 'group') { - continue; - } - if (!_isEqual(origValue[key], currentValue[key])) { + ) { return false; } + for (var i = 0, len = keys.length; i < len; i++) { + key = keys[i]; + // since clipPath is in the statefull cache list and the clipPath objects + // would be iterated as an object, this would lead to possible infinite recursion + // we do not want to compare those. + if (key === 'canvas' || key === 'group') { + continue; + } + if (!_isEqual(origValue[key], currentValue[key])) { + return false; + } + } + return true; } - return true; } -} -fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** + /** * Returns true if object state (one of its state properties) was changed * @param {String} [propertySet] optional name for the set of property we want to save * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called */ - hasStateChanged: function(propertySet) { - propertySet = propertySet || originalSet; - var dashedPropertySet = '_' + propertySet; - if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { - return true; - } - return !_isEqual(this[dashedPropertySet], this, true); - }, + hasStateChanged: function(propertySet) { + propertySet = propertySet || originalSet; + var dashedPropertySet = '_' + propertySet; + if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { + return true; + } + return !_isEqual(this[dashedPropertySet], this, true); + }, - /** + /** * Saves state of an object * @param {Object} [options] Object with additional `stateProperties` array to include when saving state * @return {fabric.Object} thisArg */ - saveState: function(options) { - var propertySet = options && options.propertySet || originalSet, - destination = '_' + propertySet; - if (!this[destination]) { - return this.setupState(options); - } - saveProps(this, destination, this[propertySet]); - if (options && options.stateProperties) { - saveProps(this, destination, options.stateProperties); - } - return this; - }, + saveState: function(options) { + var propertySet = options && options.propertySet || originalSet, + destination = '_' + propertySet; + if (!this[destination]) { + return this.setupState(options); + } + saveProps(this, destination, this[propertySet]); + if (options && options.stateProperties) { + saveProps(this, destination, options.stateProperties); + } + return this; + }, - /** + /** * Setups state of an object * @param {Object} [options] Object with additional `stateProperties` array to include when saving state * @return {fabric.Object} thisArg */ - setupState: function(options) { - options = options || { }; - var propertySet = options.propertySet || originalSet; - options.propertySet = propertySet; - this['_' + propertySet] = { }; - this.saveState(options); - return this; - } -}); + setupState: function(options) { + options = options || { }; + var propertySet = options.propertySet || originalSet; + options.propertySet = propertySet; + this['_' + propertySet] = { }; + this.saveState(options); + return this; + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/text_style.mixin.js b/src/mixins/text_style.mixin.js index 2d4e0763302..82dedd9b911 100644 --- a/src/mixins/text_style.mixin.js +++ b/src/mixins/text_style.mixin.js @@ -1,56 +1,58 @@ -fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** +(function(global) { + var fabric = global.fabric; + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + /** * Returns true if object has no styling or no styling in a line * @param {Number} lineIndex , lineIndex is on wrapped lines. * @return {Boolean} */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { - return true; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return true; - } - var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return true; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; + } } } - } - return true; - }, + return true; + }, - /** + /** * Returns true if object has a style property or has it ina specified line * This function is used to detect if a text will use a particular property or not. * @param {String} property to check for * @param {Number} lineIndex to check the style on * @return {Boolean} */ - styleHas: function(property, lineIndex) { - if (!this.styles || !property || property === '') { - return false; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return false; - } - var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; - // eslint-disable-next-line - for (var p1 in obj) { + styleHas: function(property, lineIndex) { + if (!this.styles || !property || property === '') { + return false; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return false; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; // eslint-disable-next-line + for (var p1 in obj) { + // eslint-disable-next-line for (var p2 in obj[p1]) { - if (typeof obj[p1][p2][property] !== 'undefined') { - return true; + if (typeof obj[p1][p2][property] !== 'undefined') { + return true; + } } } - } - return false; - }, + return false; + }, - /** + /** * Check if characters in a text have a value for a property * whose value matches the textbox's value for that property. If so, * the character-level property is deleted. If the character @@ -60,131 +62,131 @@ fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototyp * * @param {string} property The property to compare between characters and text. */ - cleanStyle: function(property) { - if (!this.styles || !property || property === '') { - return false; - } - var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, - allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; - // eslint-disable-next-line - for (var p1 in obj) { - letterCount = 0; + cleanStyle: function(property) { + if (!this.styles || !property || property === '') { + return false; + } + var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, + allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; // eslint-disable-next-line + for (var p1 in obj) { + letterCount = 0; + // eslint-disable-next-line for (var p2 in obj[p1]) { - var styleObject = obj[p1][p2], - stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); + var styleObject = obj[p1][p2], + stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); + + stylesCount++; - stylesCount++; + if (stylePropertyHasBeenSet) { + if (!stylePropertyValue) { + stylePropertyValue = styleObject[property]; + } + else if (styleObject[property] !== stylePropertyValue) { + allStyleObjectPropertiesMatch = false; + } - if (stylePropertyHasBeenSet) { - if (!stylePropertyValue) { - stylePropertyValue = styleObject[property]; + if (styleObject[property] === this[property]) { + delete styleObject[property]; + } } - else if (styleObject[property] !== stylePropertyValue) { + else { allStyleObjectPropertiesMatch = false; } - if (styleObject[property] === this[property]) { - delete styleObject[property]; + if (Object.keys(styleObject).length !== 0) { + letterCount++; + } + else { + delete obj[p1][p2]; } - } - else { - allStyleObjectPropertiesMatch = false; } - if (Object.keys(styleObject).length !== 0) { - letterCount++; - } - else { - delete obj[p1][p2]; + if (letterCount === 0) { + delete obj[p1]; } } - - if (letterCount === 0) { - delete obj[p1]; + // if every grapheme has the same style set then + // delete those styles and set it on the parent + for (var i = 0; i < this._textLines.length; i++) { + graphemeCount += this._textLines[i].length; } - } - // if every grapheme has the same style set then - // delete those styles and set it on the parent - for (var i = 0; i < this._textLines.length; i++) { - graphemeCount += this._textLines[i].length; - } - if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { - this[property] = stylePropertyValue; - this.removeStyle(property); - } - }, + if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { + this[property] = stylePropertyValue; + this.removeStyle(property); + } + }, - /** + /** * Remove a style property or properties from all individual character styles * in a text object. Deletes the character style object if it contains no other style * props. Deletes a line style object if it contains no other character styles. * * @param {String} props The property to remove from character styles. */ - removeStyle: function(property) { - if (!this.styles || !property || property === '') { - return; - } - var obj = this.styles, line, lineNum, charNum; - for (lineNum in obj) { - line = obj[lineNum]; - for (charNum in line) { - delete line[charNum][property]; - if (Object.keys(line[charNum]).length === 0) { - delete line[charNum]; - } + removeStyle: function(property) { + if (!this.styles || !property || property === '') { + return; } - if (Object.keys(line).length === 0) { - delete obj[lineNum]; + var obj = this.styles, line, lineNum, charNum; + for (lineNum in obj) { + line = obj[lineNum]; + for (charNum in line) { + delete line[charNum][property]; + if (Object.keys(line[charNum]).length === 0) { + delete line[charNum]; + } + } + if (Object.keys(line).length === 0) { + delete obj[lineNum]; + } } - } - }, + }, - /** + /** * @private */ - _extendStyles: function(index, styles) { - var loc = this.get2DCursorLocation(index); + _extendStyles: function(index, styles) { + var loc = this.get2DCursorLocation(index); - if (!this._getLineStyle(loc.lineIndex)) { - this._setLineStyle(loc.lineIndex); - } + if (!this._getLineStyle(loc.lineIndex)) { + this._setLineStyle(loc.lineIndex); + } - if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { - this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); - } + if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { + this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); + } - fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); - }, + fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); + }, - /** + /** * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles. */ - get2DCursorLocation: function(selectionStart, skipWrapping) { - if (typeof selectionStart === 'undefined') { - selectionStart = this.selectionStart; - } - var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, - len = lines.length; - for (var i = 0; i < len; i++) { - if (selectionStart <= lines[i].length) { - return { - lineIndex: i, - charIndex: selectionStart - }; + get2DCursorLocation: function(selectionStart, skipWrapping) { + if (typeof selectionStart === 'undefined') { + selectionStart = this.selectionStart; } - selectionStart -= lines[i].length + this.missingNewlineOffset(i); - } - return { - lineIndex: i - 1, - charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart - }; - }, + var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, + len = lines.length; + for (var i = 0; i < len; i++) { + if (selectionStart <= lines[i].length) { + return { + lineIndex: i, + charIndex: selectionStart + }; + } + selectionStart -= lines[i].length + this.missingNewlineOffset(i); + } + return { + lineIndex: i - 1, + charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart + }; + }, - /** + /** * Gets style of a current selection/cursor (at the start position) * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used. * @param {Number} [startIndex] Start index to get styles at @@ -192,35 +194,35 @@ fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototyp * @param {Boolean} [complete] get full style or not * @return {Array} styles an array with one, zero or more Style objects */ - getSelectionStyles: function(startIndex, endIndex, complete) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - var styles = []; - for (var i = startIndex; i < endIndex; i++) { - styles.push(this.getStyleAtPosition(i, complete)); - } - return styles; - }, + getSelectionStyles: function(startIndex, endIndex, complete) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + var styles = []; + for (var i = startIndex; i < endIndex; i++) { + styles.push(this.getStyleAtPosition(i, complete)); + } + return styles; + }, - /** + /** * Gets style of a current selection/cursor position * @param {Number} position to get styles at * @param {Boolean} [complete] full style if true * @return {Object} style Style object at a specified index * @private */ - getStyleAtPosition: function(position, complete) { - var loc = this.get2DCursorLocation(position), - style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : - this._getStyleDeclaration(loc.lineIndex, loc.charIndex); - return style || {}; - }, + getStyleAtPosition: function(position, complete) { + var loc = this.get2DCursorLocation(position), + style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : + this._getStyleDeclaration(loc.lineIndex, loc.charIndex); + return style || {}; + }, - /** + /** * Sets style of a current selection, if no selection exist, do not set anything. * @param {Object} [styles] Styles object * @param {Number} [startIndex] Start index to get styles at @@ -228,95 +230,96 @@ fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototyp * @return {fabric.IText} thisArg * @chainable */ - setSelectionStyles: function(styles, startIndex, endIndex) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - for (var i = startIndex; i < endIndex; i++) { - this._extendStyles(i, styles); - } - /* not included in _extendStyles to avoid clearing cache more than once */ - this._forceClearCache = true; - return this; - }, + setSelectionStyles: function(styles, startIndex, endIndex) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + for (var i = startIndex; i < endIndex; i++) { + this._extendStyles(i, styles); + } + /* not included in _extendStyles to avoid clearing cache more than once */ + this._forceClearCache = true; + return this; + }, - /** + /** * get the reference, not a clone, of the style object for a given character * @param {Number} lineIndex * @param {Number} charIndex * @return {Object} style object */ - _getStyleDeclaration: function(lineIndex, charIndex) { - var lineStyle = this.styles && this.styles[lineIndex]; - if (!lineStyle) { - return null; - } - return lineStyle[charIndex]; - }, + _getStyleDeclaration: function(lineIndex, charIndex) { + var lineStyle = this.styles && this.styles[lineIndex]; + if (!lineStyle) { + return null; + } + return lineStyle[charIndex]; + }, - /** + /** * return a new object that contains all the style property for a character * the object returned is newly created * @param {Number} lineIndex of the line where the character is * @param {Number} charIndex position of the character on the line * @return {Object} style object */ - getCompleteStyleDeclaration: function(lineIndex, charIndex) { - var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, - styleObject = { }, prop; - for (var i = 0; i < this._styleProperties.length; i++) { - prop = this._styleProperties[i]; - styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; - } - return styleObject; - }, + getCompleteStyleDeclaration: function(lineIndex, charIndex) { + var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, + styleObject = { }, prop; + for (var i = 0; i < this._styleProperties.length; i++) { + prop = this._styleProperties[i]; + styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; + } + return styleObject; + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @param {Object} style * @private */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - this.styles[lineIndex][charIndex] = style; - }, + _setStyleDeclaration: function(lineIndex, charIndex, style) { + this.styles[lineIndex][charIndex] = style; + }, - /** + /** * * @param {Number} lineIndex * @param {Number} charIndex * @private */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { - delete this.styles[lineIndex][charIndex]; - }, + _deleteStyleDeclaration: function(lineIndex, charIndex) { + delete this.styles[lineIndex][charIndex]; + }, - /** + /** * @param {Number} lineIndex * @return {Boolean} if the line exists or not * @private */ - _getLineStyle: function(lineIndex) { - return !!this.styles[lineIndex]; - }, + _getLineStyle: function(lineIndex) { + return !!this.styles[lineIndex]; + }, - /** + /** * Set the line style to an empty object so that is initialized * @param {Number} lineIndex * @private */ - _setLineStyle: function(lineIndex) { - this.styles[lineIndex] = {}; - }, + _setLineStyle: function(lineIndex) { + this.styles[lineIndex] = {}; + }, - /** + /** * @param {Number} lineIndex * @private */ - _deleteLineStyle: function(lineIndex) { - delete this.styles[lineIndex]; - } -}); + _deleteLineStyle: function(lineIndex) { + delete this.styles[lineIndex]; + } + }); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/parser.js b/src/parser.js index 4597763cfba..3921b5a09b7 100644 --- a/src/parser.js +++ b/src/parser.js @@ -1,195 +1,196 @@ -/** +(function(global) { + /** * @name fabric * @namespace */ -var fabric = exports.fabric || (exports.fabric = { }), - toFixed = fabric.util.toFixed, - parseUnit = fabric.util.parseUnit, - multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, - - svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', - 'image', 'text'], - svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], - svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], - svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], - - attributesMap = { - cx: 'left', - x: 'left', - r: 'radius', - cy: 'top', - y: 'top', - display: 'visible', - visibility: 'visible', - transform: 'transformMatrix', - 'fill-opacity': 'fillOpacity', - 'fill-rule': 'fillRule', - 'font-family': 'fontFamily', - 'font-size': 'fontSize', - 'font-style': 'fontStyle', - 'font-weight': 'fontWeight', - 'letter-spacing': 'charSpacing', - 'paint-order': 'paintFirst', - 'stroke-dasharray': 'strokeDashArray', - 'stroke-dashoffset': 'strokeDashOffset', - 'stroke-linecap': 'strokeLineCap', - 'stroke-linejoin': 'strokeLineJoin', - 'stroke-miterlimit': 'strokeMiterLimit', - 'stroke-opacity': 'strokeOpacity', - 'stroke-width': 'strokeWidth', - 'text-decoration': 'textDecoration', - 'text-anchor': 'textAnchor', - opacity: 'opacity', - 'clip-path': 'clipPath', - 'clip-rule': 'clipRule', - 'vector-effect': 'strokeUniform', - 'image-rendering': 'imageSmoothing', - }, - - colorAttributes = { - stroke: 'strokeOpacity', - fill: 'fillOpacity' - }, - - fSize = 'font-size', cPath = 'clip-path'; - -fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); -fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); -fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); -fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); - -fabric.cssRules = { }; -fabric.gradientDefs = { }; -fabric.clipPaths = { }; - -function normalizeAttr(attr) { - // transform attribute names - if (attr in attributesMap) { - return attributesMap[attr]; + var fabric = global.fabric || (global.fabric = { }), + toFixed = fabric.util.toFixed, + parseUnit = fabric.util.parseUnit, + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + + svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', + 'image', 'text'], + svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], + svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], + svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], + + attributesMap = { + cx: 'left', + x: 'left', + r: 'radius', + cy: 'top', + y: 'top', + display: 'visible', + visibility: 'visible', + transform: 'transformMatrix', + 'fill-opacity': 'fillOpacity', + 'fill-rule': 'fillRule', + 'font-family': 'fontFamily', + 'font-size': 'fontSize', + 'font-style': 'fontStyle', + 'font-weight': 'fontWeight', + 'letter-spacing': 'charSpacing', + 'paint-order': 'paintFirst', + 'stroke-dasharray': 'strokeDashArray', + 'stroke-dashoffset': 'strokeDashOffset', + 'stroke-linecap': 'strokeLineCap', + 'stroke-linejoin': 'strokeLineJoin', + 'stroke-miterlimit': 'strokeMiterLimit', + 'stroke-opacity': 'strokeOpacity', + 'stroke-width': 'strokeWidth', + 'text-decoration': 'textDecoration', + 'text-anchor': 'textAnchor', + opacity: 'opacity', + 'clip-path': 'clipPath', + 'clip-rule': 'clipRule', + 'vector-effect': 'strokeUniform', + 'image-rendering': 'imageSmoothing', + }, + + colorAttributes = { + stroke: 'strokeOpacity', + fill: 'fillOpacity' + }, + + fSize = 'font-size', cPath = 'clip-path'; + + fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); + fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); + fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); + fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); + + fabric.cssRules = { }; + fabric.gradientDefs = { }; + fabric.clipPaths = { }; + + function normalizeAttr(attr) { + // transform attribute names + if (attr in attributesMap) { + return attributesMap[attr]; + } + return attr; } - return attr; -} -function normalizeValue(attr, value, parentAttributes, fontSize) { - var isArray = Array.isArray(value), parsed; + function normalizeValue(attr, value, parentAttributes, fontSize) { + var isArray = Array.isArray(value), parsed; - if ((attr === 'fill' || attr === 'stroke') && value === 'none') { - value = ''; - } - else if (attr === 'strokeUniform') { - return (value === 'non-scaling-stroke'); - } - else if (attr === 'strokeDashArray') { - if (value === 'none') { - value = null; + if ((attr === 'fill' || attr === 'stroke') && value === 'none') { + value = ''; } - else { - value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); + else if (attr === 'strokeUniform') { + return (value === 'non-scaling-stroke'); } - } - else if (attr === 'transformMatrix') { - if (parentAttributes && parentAttributes.transformMatrix) { - value = multiplyTransformMatrices( - parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); + else if (attr === 'strokeDashArray') { + if (value === 'none') { + value = null; + } + else { + value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); + } } - else { - value = fabric.parseTransformAttribute(value); + else if (attr === 'transformMatrix') { + if (parentAttributes && parentAttributes.transformMatrix) { + value = multiplyTransformMatrices( + parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); + } + else { + value = fabric.parseTransformAttribute(value); + } } - } - else if (attr === 'visible') { - value = value !== 'none' && value !== 'hidden'; - // display=none on parent element always takes precedence over child element - if (parentAttributes && parentAttributes.visible === false) { - value = false; + else if (attr === 'visible') { + value = value !== 'none' && value !== 'hidden'; + // display=none on parent element always takes precedence over child element + if (parentAttributes && parentAttributes.visible === false) { + value = false; + } } - } - else if (attr === 'opacity') { - value = parseFloat(value); - if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { - value *= parentAttributes.opacity; + else if (attr === 'opacity') { + value = parseFloat(value); + if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { + value *= parentAttributes.opacity; + } } - } - else if (attr === 'textAnchor' /* text-anchor */) { - value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; - } - else if (attr === 'charSpacing') { - // parseUnit returns px and we convert it to em - parsed = parseUnit(value, fontSize) / fontSize * 1000; - } - else if (attr === 'paintFirst') { - var fillIndex = value.indexOf('fill'); - var strokeIndex = value.indexOf('stroke'); - var value = 'fill'; - if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { - value = 'stroke'; + else if (attr === 'textAnchor' /* text-anchor */) { + value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; } - else if (fillIndex === -1 && strokeIndex > -1) { - value = 'stroke'; + else if (attr === 'charSpacing') { + // parseUnit returns px and we convert it to em + parsed = parseUnit(value, fontSize) / fontSize * 1000; + } + else if (attr === 'paintFirst') { + var fillIndex = value.indexOf('fill'); + var strokeIndex = value.indexOf('stroke'); + var value = 'fill'; + if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { + value = 'stroke'; + } + else if (fillIndex === -1 && strokeIndex > -1) { + value = 'stroke'; + } + } + else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { + return value; + } + else if (attr === 'imageSmoothing') { + return (value === 'optimizeQuality'); + } + else { + parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); } - } - else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { - return value; - } - else if (attr === 'imageSmoothing') { - return (value === 'optimizeQuality'); - } - else { - parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); - } - return (!isArray && isNaN(parsed) ? value : parsed); -} + return (!isArray && isNaN(parsed) ? value : parsed); + } -/** + /** * @private */ -function getSvgRegex(arr) { - return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); -} + function getSvgRegex(arr) { + return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); + } -/** + /** * @private * @param {Object} attributes Array of attributes to parse */ -function _setStrokeFillOpacity(attributes) { - for (var attr in colorAttributes) { + function _setStrokeFillOpacity(attributes) { + for (var attr in colorAttributes) { - if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { - continue; - } + if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { + continue; + } + + if (typeof attributes[attr] === 'undefined') { + if (!fabric.Object.prototype[attr]) { + continue; + } + attributes[attr] = fabric.Object.prototype[attr]; + } - if (typeof attributes[attr] === 'undefined') { - if (!fabric.Object.prototype[attr]) { + if (attributes[attr].indexOf('url(') === 0) { continue; } - attributes[attr] = fabric.Object.prototype[attr]; - } - if (attributes[attr].indexOf('url(') === 0) { - continue; + var color = new fabric.Color(attributes[attr]); + attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); } - - var color = new fabric.Color(attributes[attr]); - attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); + return attributes; } - return attributes; -} -/** + /** * @private */ -function _getMultipleNodes(doc, nodeNames) { - var nodeName, nodeArray = [], nodeList, i, len; - for (i = 0, len = nodeNames.length; i < len; i++) { - nodeName = nodeNames[i]; - nodeList = doc.getElementsByTagName(nodeName); - nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); + function _getMultipleNodes(doc, nodeNames) { + var nodeName, nodeArray = [], nodeList, i, len; + for (i = 0, len = nodeNames.length; i < len; i++) { + nodeName = nodeNames[i]; + nodeList = doc.getElementsByTagName(nodeName); + nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); + } + return nodeArray; } - return nodeArray; -} -/** + /** * Parses "transform" attribute, returning an array of values * @static * @function @@ -197,65 +198,65 @@ function _getMultipleNodes(doc, nodeNames) { * @param {String} attributeValue String containing attribute value * @return {Array} Array of 6 elements representing transformation matrix */ -fabric.parseTransformAttribute = (function() { - function rotateMatrix(matrix, args) { - var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), - x = 0, y = 0; - if (args.length === 3) { - x = args[1]; - y = args[2]; - } + fabric.parseTransformAttribute = (function() { + function rotateMatrix(matrix, args) { + var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), + x = 0, y = 0; + if (args.length === 3) { + x = args[1]; + y = args[2]; + } - matrix[0] = cos; - matrix[1] = sin; - matrix[2] = -sin; - matrix[3] = cos; - matrix[4] = x - (cos * x - sin * y); - matrix[5] = y - (sin * x + cos * y); - } + matrix[0] = cos; + matrix[1] = sin; + matrix[2] = -sin; + matrix[3] = cos; + matrix[4] = x - (cos * x - sin * y); + matrix[5] = y - (sin * x + cos * y); + } - function scaleMatrix(matrix, args) { - var multiplierX = args[0], - multiplierY = (args.length === 2) ? args[1] : args[0]; + function scaleMatrix(matrix, args) { + var multiplierX = args[0], + multiplierY = (args.length === 2) ? args[1] : args[0]; - matrix[0] = multiplierX; - matrix[3] = multiplierY; - } + matrix[0] = multiplierX; + matrix[3] = multiplierY; + } - function skewMatrix(matrix, args, pos) { - matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); - } + function skewMatrix(matrix, args, pos) { + matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); + } - function translateMatrix(matrix, args) { - matrix[4] = args[0]; - if (args.length === 2) { - matrix[5] = args[1]; + function translateMatrix(matrix, args) { + matrix[4] = args[0]; + if (args.length === 2) { + matrix[5] = args[1]; + } } - } - // identity matrix - var iMatrix = fabric.iMatrix, + // identity matrix + var iMatrix = fabric.iMatrix, - // == begin transform regexp - number = fabric.reNum, + // == begin transform regexp + number = fabric.reNum, - commaWsp = fabric.commaWsp, + commaWsp = fabric.commaWsp, - skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', + skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', - skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', + skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', - rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + + rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + '))?\\s*\\))', - scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + + scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\s*\\))', - translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + + translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\s*\\))', - matrix = '(?:(matrix)\\s*\\(\\s*' + + matrix = '(?:(matrix)\\s*\\(\\s*' + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + @@ -264,7 +265,7 @@ fabric.parseTransformAttribute = (function() { '(' + number + ')' + '\\s*\\))', - transform = '(?:' + + transform = '(?:' + matrix + '|' + translate + '|' + scale + '|' + @@ -273,405 +274,405 @@ fabric.parseTransformAttribute = (function() { skewY + ')', - transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', + transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', - transformList = '^\\s*(?:' + transforms + '?)\\s*$', + transformList = '^\\s*(?:' + transforms + '?)\\s*$', - // http://www.w3.org/TR/SVG/coords.html#TransformAttribute - reTransformList = new RegExp(transformList), - // == end transform regexp + // http://www.w3.org/TR/SVG/coords.html#TransformAttribute + reTransformList = new RegExp(transformList), + // == end transform regexp - reTransform = new RegExp(transform, 'g'); + reTransform = new RegExp(transform, 'g'); - return function(attributeValue) { + return function(attributeValue) { - // start with identity matrix - var matrix = iMatrix.concat(), - matrices = []; + // start with identity matrix + var matrix = iMatrix.concat(), + matrices = []; - // return if no argument was given or - // an argument does not match transform attribute regexp - if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { - return matrix; - } - - attributeValue.replace(reTransform, function(match) { - - var m = new RegExp(transform).exec(match).filter(function (match) { - // match !== '' && match != null - return (!!match); - }), - operation = m[1], - args = m.slice(2).map(parseFloat); - - switch (operation) { - case 'translate': - translateMatrix(matrix, args); - break; - case 'rotate': - args[0] = fabric.util.degreesToRadians(args[0]); - rotateMatrix(matrix, args); - break; - case 'scale': - scaleMatrix(matrix, args); - break; - case 'skewX': - skewMatrix(matrix, args, 2); - break; - case 'skewY': - skewMatrix(matrix, args, 1); - break; - case 'matrix': - matrix = args; - break; + // return if no argument was given or + // an argument does not match transform attribute regexp + if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { + return matrix; } - // snapshot current matrix into matrices array - matrices.push(matrix.concat()); - // reset - matrix = iMatrix.concat(); - }); + attributeValue.replace(reTransform, function(match) { + + var m = new RegExp(transform).exec(match).filter(function (match) { + // match !== '' && match != null + return (!!match); + }), + operation = m[1], + args = m.slice(2).map(parseFloat); + + switch (operation) { + case 'translate': + translateMatrix(matrix, args); + break; + case 'rotate': + args[0] = fabric.util.degreesToRadians(args[0]); + rotateMatrix(matrix, args); + break; + case 'scale': + scaleMatrix(matrix, args); + break; + case 'skewX': + skewMatrix(matrix, args, 2); + break; + case 'skewY': + skewMatrix(matrix, args, 1); + break; + case 'matrix': + matrix = args; + break; + } - var combinedMatrix = matrices[0]; - while (matrices.length > 1) { - matrices.shift(); - combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); - } - return combinedMatrix; - }; -})(); + // snapshot current matrix into matrices array + matrices.push(matrix.concat()); + // reset + matrix = iMatrix.concat(); + }); + + var combinedMatrix = matrices[0]; + while (matrices.length > 1) { + matrices.shift(); + combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); + } + return combinedMatrix; + }; + })(typeof exports !== 'undefined' ? exports : window); -/** + /** * @private */ -function parseStyleString(style, oStyle) { - var attr, value; - style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { - var pair = chunk.split(':'); + function parseStyleString(style, oStyle) { + var attr, value; + style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { + var pair = chunk.split(':'); - attr = pair[0].trim().toLowerCase(); - value = pair[1].trim(); + attr = pair[0].trim().toLowerCase(); + value = pair[1].trim(); - oStyle[attr] = value; - }); -} + oStyle[attr] = value; + }); + } -/** + /** * @private */ -function parseStyleObject(style, oStyle) { - var attr, value; - for (var prop in style) { - if (typeof style[prop] === 'undefined') { - continue; - } + function parseStyleObject(style, oStyle) { + var attr, value; + for (var prop in style) { + if (typeof style[prop] === 'undefined') { + continue; + } - attr = prop.toLowerCase(); - value = style[prop]; + attr = prop.toLowerCase(); + value = style[prop]; - oStyle[attr] = value; + oStyle[attr] = value; + } } -} -/** + /** * @private */ -function getGlobalStylesForElement(element, svgUid) { - var styles = { }; - for (var rule in fabric.cssRules[svgUid]) { - if (elementMatchesRule(element, rule.split(' '))) { - for (var property in fabric.cssRules[svgUid][rule]) { - styles[property] = fabric.cssRules[svgUid][rule][property]; + function getGlobalStylesForElement(element, svgUid) { + var styles = { }; + for (var rule in fabric.cssRules[svgUid]) { + if (elementMatchesRule(element, rule.split(' '))) { + for (var property in fabric.cssRules[svgUid][rule]) { + styles[property] = fabric.cssRules[svgUid][rule][property]; + } } } + return styles; } - return styles; -} -/** + /** * @private */ -function elementMatchesRule(element, selectors) { - var firstMatching, parentMatching = true; - //start from rightmost selector. - firstMatching = selectorMatches(element, selectors.pop()); - if (firstMatching && selectors.length) { - parentMatching = doesSomeParentMatch(element, selectors); + function elementMatchesRule(element, selectors) { + var firstMatching, parentMatching = true; + //start from rightmost selector. + firstMatching = selectorMatches(element, selectors.pop()); + if (firstMatching && selectors.length) { + parentMatching = doesSomeParentMatch(element, selectors); + } + return firstMatching && parentMatching && (selectors.length === 0); } - return firstMatching && parentMatching && (selectors.length === 0); -} - -function doesSomeParentMatch(element, selectors) { - var selector, parentMatching = true; - while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { - if (parentMatching) { - selector = selectors.pop(); + + function doesSomeParentMatch(element, selectors) { + var selector, parentMatching = true; + while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { + if (parentMatching) { + selector = selectors.pop(); + } + element = element.parentNode; + parentMatching = selectorMatches(element, selector); } - element = element.parentNode; - parentMatching = selectorMatches(element, selector); + return selectors.length === 0; } - return selectors.length === 0; -} -/** + /** * @private */ -function selectorMatches(element, selector) { - var nodeName = element.nodeName, - classNames = element.getAttribute('class'), - id = element.getAttribute('id'), matcher, i; - // i check if a selector matches slicing away part from it. - // if i get empty string i should match - matcher = new RegExp('^' + nodeName, 'i'); - selector = selector.replace(matcher, ''); - if (id && selector.length) { - matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); + function selectorMatches(element, selector) { + var nodeName = element.nodeName, + classNames = element.getAttribute('class'), + id = element.getAttribute('id'), matcher, i; + // i check if a selector matches slicing away part from it. + // if i get empty string i should match + matcher = new RegExp('^' + nodeName, 'i'); selector = selector.replace(matcher, ''); - } - if (classNames && selector.length) { - classNames = classNames.split(' '); - for (i = classNames.length; i--;) { - matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); + if (id && selector.length) { + matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); selector = selector.replace(matcher, ''); } + if (classNames && selector.length) { + classNames = classNames.split(' '); + for (i = classNames.length; i--;) { + matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); + selector = selector.replace(matcher, ''); + } + } + return selector.length === 0; } - return selector.length === 0; -} -/** + /** * @private * to support IE8 missing getElementById on SVGdocument and on node xmlDOM */ -function elementById(doc, id) { - var el; - doc.getElementById && (el = doc.getElementById(id)); - if (el) { - return el; - } - var node, i, len, nodelist = doc.getElementsByTagName('*'); - for (i = 0, len = nodelist.length; i < len; i++) { - node = nodelist[i]; - if (id === node.getAttribute('id')) { - return node; + function elementById(doc, id) { + var el; + doc.getElementById && (el = doc.getElementById(id)); + if (el) { + return el; + } + var node, i, len, nodelist = doc.getElementsByTagName('*'); + for (i = 0, len = nodelist.length; i < len; i++) { + node = nodelist[i]; + if (id === node.getAttribute('id')) { + return node; + } } } -} -/** + /** * @private */ -function parseUseDirectives(doc) { - var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; - while (nodelist.length && i < nodelist.length) { - var el = nodelist[i], - xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); - - if (xlinkAttribute === null) { - return; - } - - var xlink = xlinkAttribute.slice(1), - x = el.getAttribute('x') || 0, - y = el.getAttribute('y') || 0, - el2 = elementById(doc, xlink).cloneNode(true), - currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', - parentNode, - oldLength = nodelist.length, attr, - j, - attrs, - len, - namespace = fabric.svgNS; - - applyViewboxTransform(el2); - if (/^svg$/i.test(el2.nodeName)) { - var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); - for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { - attr = attrs.item(j); - el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); + function parseUseDirectives(doc) { + var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; + while (nodelist.length && i < nodelist.length) { + var el = nodelist[i], + xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); + + if (xlinkAttribute === null) { + return; } - // el2.firstChild != null - while (el2.firstChild) { - el3.appendChild(el2.firstChild); + + var xlink = xlinkAttribute.slice(1), + x = el.getAttribute('x') || 0, + y = el.getAttribute('y') || 0, + el2 = elementById(doc, xlink).cloneNode(true), + currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', + parentNode, + oldLength = nodelist.length, attr, + j, + attrs, + len, + namespace = fabric.svgNS; + + applyViewboxTransform(el2); + if (/^svg$/i.test(el2.nodeName)) { + var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); + for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); + } + // el2.firstChild != null + while (el2.firstChild) { + el3.appendChild(el2.firstChild); + } + el2 = el3; } - el2 = el3; - } - for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { - attr = attrs.item(j); - if (attr.nodeName === 'x' || attr.nodeName === 'y' || + for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + if (attr.nodeName === 'x' || attr.nodeName === 'y' || attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { - continue; - } + continue; + } - if (attr.nodeName === 'transform') { - currentTrans = attr.nodeValue + ' ' + currentTrans; - } - else { - el2.setAttribute(attr.nodeName, attr.nodeValue); + if (attr.nodeName === 'transform') { + currentTrans = attr.nodeValue + ' ' + currentTrans; + } + else { + el2.setAttribute(attr.nodeName, attr.nodeValue); + } } - } - el2.setAttribute('transform', currentTrans); - el2.setAttribute('instantiated_by_use', '1'); - el2.removeAttribute('id'); - parentNode = el.parentNode; - parentNode.replaceChild(el2, el); - // some browsers do not shorten nodelist after replaceChild (IE8) - if (nodelist.length === oldLength) { - i++; + el2.setAttribute('transform', currentTrans); + el2.setAttribute('instantiated_by_use', '1'); + el2.removeAttribute('id'); + parentNode = el.parentNode; + parentNode.replaceChild(el2, el); + // some browsers do not shorten nodelist after replaceChild (IE8) + if (nodelist.length === oldLength) { + i++; + } } } -} -// http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute -// matches, e.g.: +14.56e-12, etc. -var reViewBoxAttrValue = new RegExp( - '^' + + // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute + // matches, e.g.: +14.56e-12, etc. + var reViewBoxAttrValue = new RegExp( + '^' + '\\s*(' + fabric.reNum + '+)\\s*,?' + '\\s*(' + fabric.reNum + '+)\\s*,?' + '\\s*(' + fabric.reNum + '+)\\s*,?' + '\\s*(' + fabric.reNum + '+)\\s*' + '$' -); + ); -/** + /** * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements */ -function applyViewboxTransform(element) { - if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { - return {}; - } - var viewBoxAttr = element.getAttribute('viewBox'), - scaleX = 1, - scaleY = 1, - minX = 0, - minY = 0, - viewBoxWidth, viewBoxHeight, matrix, el, - widthAttr = element.getAttribute('width'), - heightAttr = element.getAttribute('height'), - x = element.getAttribute('x') || 0, - y = element.getAttribute('y') || 0, - preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', - missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), - missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), - toBeParsed = missingViewBox && missingDimAttr, - parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; - - parsedDim.width = 0; - parsedDim.height = 0; - parsedDim.toBeParsed = toBeParsed; - - if (missingViewBox) { - if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; - matrix = (element.getAttribute('transform') || '') + translateMatrix; - element.setAttribute('transform', matrix); - element.removeAttribute('x'); - element.removeAttribute('y'); + function applyViewboxTransform(element) { + if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { + return {}; + } + var viewBoxAttr = element.getAttribute('viewBox'), + scaleX = 1, + scaleY = 1, + minX = 0, + minY = 0, + viewBoxWidth, viewBoxHeight, matrix, el, + widthAttr = element.getAttribute('width'), + heightAttr = element.getAttribute('height'), + x = element.getAttribute('x') || 0, + y = element.getAttribute('y') || 0, + preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', + missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), + missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), + toBeParsed = missingViewBox && missingDimAttr, + parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; + + parsedDim.width = 0; + parsedDim.height = 0; + parsedDim.toBeParsed = toBeParsed; + + if (missingViewBox) { + if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + matrix = (element.getAttribute('transform') || '') + translateMatrix; + element.setAttribute('transform', matrix); + element.removeAttribute('x'); + element.removeAttribute('y'); + } } - } - - if (toBeParsed) { - return parsedDim; - } - if (missingViewBox) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - // set a transform for elements that have x y and are inner(only) SVGs - return parsedDim; - } - minX = -parseFloat(viewBoxAttr[1]); - minY = -parseFloat(viewBoxAttr[2]); - viewBoxWidth = parseFloat(viewBoxAttr[3]); - viewBoxHeight = parseFloat(viewBoxAttr[4]); - parsedDim.minX = minX; - parsedDim.minY = minY; - parsedDim.viewBoxWidth = viewBoxWidth; - parsedDim.viewBoxHeight = viewBoxHeight; - if (!missingDimAttr) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - scaleX = parsedDim.width / viewBoxWidth; - scaleY = parsedDim.height / viewBoxHeight; - } - else { - parsedDim.width = viewBoxWidth; - parsedDim.height = viewBoxHeight; - } + if (toBeParsed) { + return parsedDim; + } - // default is to preserve aspect ratio - preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); - if (preserveAspectRatio.alignX !== 'none') { - //translate all container for the effect of Mid, Min, Max - if (preserveAspectRatio.meetOrSlice === 'meet') { - scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); - // calculate additional translation to move the viewbox + if (missingViewBox) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + // set a transform for elements that have x y and are inner(only) SVGs + return parsedDim; } - if (preserveAspectRatio.meetOrSlice === 'slice') { - scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); - // calculate additional translation to move the viewbox + minX = -parseFloat(viewBoxAttr[1]); + minY = -parseFloat(viewBoxAttr[2]); + viewBoxWidth = parseFloat(viewBoxAttr[3]); + viewBoxHeight = parseFloat(viewBoxAttr[4]); + parsedDim.minX = minX; + parsedDim.minY = minY; + parsedDim.viewBoxWidth = viewBoxWidth; + parsedDim.viewBoxHeight = viewBoxHeight; + if (!missingDimAttr) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + scaleX = parsedDim.width / viewBoxWidth; + scaleY = parsedDim.height / viewBoxHeight; } - widthDiff = parsedDim.width - viewBoxWidth * scaleX; - heightDiff = parsedDim.height - viewBoxHeight * scaleX; - if (preserveAspectRatio.alignX === 'Mid') { - widthDiff /= 2; + else { + parsedDim.width = viewBoxWidth; + parsedDim.height = viewBoxHeight; } - if (preserveAspectRatio.alignY === 'Mid') { - heightDiff /= 2; + + // default is to preserve aspect ratio + preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); + if (preserveAspectRatio.alignX !== 'none') { + //translate all container for the effect of Mid, Min, Max + if (preserveAspectRatio.meetOrSlice === 'meet') { + scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); + // calculate additional translation to move the viewbox + } + if (preserveAspectRatio.meetOrSlice === 'slice') { + scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); + // calculate additional translation to move the viewbox + } + widthDiff = parsedDim.width - viewBoxWidth * scaleX; + heightDiff = parsedDim.height - viewBoxHeight * scaleX; + if (preserveAspectRatio.alignX === 'Mid') { + widthDiff /= 2; + } + if (preserveAspectRatio.alignY === 'Mid') { + heightDiff /= 2; + } + if (preserveAspectRatio.alignX === 'Min') { + widthDiff = 0; + } + if (preserveAspectRatio.alignY === 'Min') { + heightDiff = 0; + } } - if (preserveAspectRatio.alignX === 'Min') { - widthDiff = 0; + + if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { + return parsedDim; } - if (preserveAspectRatio.alignY === 'Min') { - heightDiff = 0; + if ((x || y) && element.parentNode.nodeName !== '#document') { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; } - } - - if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { - return parsedDim; - } - if ((x || y) && element.parentNode.nodeName !== '#document') { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; - } - matrix = translateMatrix + ' matrix(' + scaleX + + matrix = translateMatrix + ' matrix(' + scaleX + ' 0' + ' 0 ' + scaleY + ' ' + (minX * scaleX + widthDiff) + ' ' + (minY * scaleY + heightDiff) + ') '; - // seems unused. - // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); - if (element.nodeName === 'svg') { - el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); - // element.firstChild != null - while (element.firstChild) { - el.appendChild(element.firstChild); + // seems unused. + // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); + if (element.nodeName === 'svg') { + el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); + // element.firstChild != null + while (element.firstChild) { + el.appendChild(element.firstChild); + } + element.appendChild(el); } - element.appendChild(el); - } - else { - el = element; - el.removeAttribute('x'); - el.removeAttribute('y'); - matrix = el.getAttribute('transform') + matrix; + else { + el = element; + el.removeAttribute('x'); + el.removeAttribute('y'); + matrix = el.getAttribute('transform') + matrix; + } + el.setAttribute('transform', matrix); + return parsedDim; } - el.setAttribute('transform', matrix); - return parsedDim; -} -function hasAncestorWithNodeName(element, nodeName) { - while (element && (element = element.parentNode)) { - if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) + function hasAncestorWithNodeName(element, nodeName) { + while (element && (element = element.parentNode)) { + if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) && !element.getAttribute('instantiated_by_use')) { - return true; + return true; + } } + return false; } - return false; -} -/** + /** * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback * @static * @function @@ -683,92 +684,92 @@ function hasAncestorWithNodeName(element, nodeName) { * @param {Object} [parsingOptions] options for parsing document * @param {String} [parsingOptions.crossOrigin] crossOrigin settings */ -fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { - if (!doc) { - return; - } + fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { + if (!doc) { + return; + } - parseUseDirectives(doc); - - var svgUid = fabric.Object.__uid++, i, len, - options = applyViewboxTransform(doc), - descendants = fabric.util.toArray(doc.getElementsByTagName('*')); - options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; - options.svgUid = svgUid; - - if (descendants.length === 0 && fabric.isLikelyNode) { - // we're likely in node, where "o3-xml" library fails to gEBTN("*") - // https://github.com/ajaxorg/node-o3-xml/issues/21 - descendants = doc.selectNodes('//*[name(.)!="svg"]'); - var arr = []; - for (i = 0, len = descendants.length; i < len; i++) { - arr[i] = descendants[i]; + parseUseDirectives(doc); + + var svgUid = fabric.Object.__uid++, i, len, + options = applyViewboxTransform(doc), + descendants = fabric.util.toArray(doc.getElementsByTagName('*')); + options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; + options.svgUid = svgUid; + + if (descendants.length === 0 && fabric.isLikelyNode) { + // we're likely in node, where "o3-xml" library fails to gEBTN("*") + // https://github.com/ajaxorg/node-o3-xml/issues/21 + descendants = doc.selectNodes('//*[name(.)!="svg"]'); + var arr = []; + for (i = 0, len = descendants.length; i < len; i++) { + arr[i] = descendants[i]; + } + descendants = arr; } - descendants = arr; - } - var elements = descendants.filter(function(el) { - applyViewboxTransform(el); - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && + var elements = descendants.filter(function(el) { + applyViewboxTransform(el); + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement - }); - if (!elements || (elements && !elements.length)) { - callback && callback([], {}); - return; - } - var clipPaths = { }; - descendants.filter(function(el) { - return el.nodeName.replace('svg:', '') === 'clipPath'; - }).forEach(function(el) { - var id = el.getAttribute('id'); - clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); }); - }); - fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); - fabric.cssRules[svgUid] = fabric.getCSSRules(doc); - fabric.clipPaths[svgUid] = clipPaths; - // Precedence of rules: style > class > attribute - fabric.parseElements(elements, function(instances, elements) { - if (callback) { - callback(instances, options, elements, descendants); - delete fabric.gradientDefs[svgUid]; - delete fabric.cssRules[svgUid]; - delete fabric.clipPaths[svgUid]; + if (!elements || (elements && !elements.length)) { + callback && callback([], {}); + return; } - }, Object.assign({}, options), reviver, parsingOptions); -}; - -function recursivelyParseGradientsXlink(doc, gradient) { - var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], - xlinkAttr = 'xlink:href', - xLink = gradient.getAttribute(xlinkAttr).slice(1), - referencedGradient = elementById(doc, xLink); - if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { - recursivelyParseGradientsXlink(doc, referencedGradient); - } - gradientsAttrs.forEach(function(attr) { - if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { - gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); + var clipPaths = { }; + descendants.filter(function(el) { + return el.nodeName.replace('svg:', '') === 'clipPath'; + }).forEach(function(el) { + var id = el.getAttribute('id'); + clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); + }); + }); + fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); + fabric.cssRules[svgUid] = fabric.getCSSRules(doc); + fabric.clipPaths[svgUid] = clipPaths; + // Precedence of rules: style > class > attribute + fabric.parseElements(elements, function(instances, elements) { + if (callback) { + callback(instances, options, elements, descendants); + delete fabric.gradientDefs[svgUid]; + delete fabric.cssRules[svgUid]; + delete fabric.clipPaths[svgUid]; + } + }, Object.assign({}, options), reviver, parsingOptions); + }; + + function recursivelyParseGradientsXlink(doc, gradient) { + var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], + xlinkAttr = 'xlink:href', + xLink = gradient.getAttribute(xlinkAttr).slice(1), + referencedGradient = elementById(doc, xLink); + if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { + recursivelyParseGradientsXlink(doc, referencedGradient); } - }); - if (!gradient.children.length) { - var referenceClone = referencedGradient.cloneNode(true); - while (referenceClone.firstChild) { - gradient.appendChild(referenceClone.firstChild); + gradientsAttrs.forEach(function(attr) { + if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { + gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); + } + }); + if (!gradient.children.length) { + var referenceClone = referencedGradient.cloneNode(true); + while (referenceClone.firstChild) { + gradient.appendChild(referenceClone.firstChild); + } } + gradient.removeAttribute(xlinkAttr); } - gradient.removeAttribute(xlinkAttr); -} -var reFontDeclaration = new RegExp( - '(normal|italic)?\\s*(normal|small-caps)?\\s*' + + var reFontDeclaration = new RegExp( + '(normal|italic)?\\s*(normal|small-caps)?\\s*' + '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + fabric.reNum + '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)'); -fabric.util.object.extend(fabric, { - /** + fabric.util.object.extend(fabric, { + /** * Parses a short font declaration, building adding its properties to a style object * @static * @function @@ -776,38 +777,38 @@ fabric.util.object.extend(fabric, { * @param {String} value font declaration * @param {Object} oStyle definition */ - parseFontDeclaration: function(value, oStyle) { - var match = value.match(reFontDeclaration); + parseFontDeclaration: function(value, oStyle) { + var match = value.match(reFontDeclaration); - if (!match) { - return; - } - var fontStyle = match[1], - // font variant is not used - // fontVariant = match[2], - fontWeight = match[3], - fontSize = match[4], - lineHeight = match[5], - fontFamily = match[6]; - - if (fontStyle) { - oStyle.fontStyle = fontStyle; - } - if (fontWeight) { - oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); - } - if (fontSize) { - oStyle.fontSize = parseUnit(fontSize); - } - if (fontFamily) { - oStyle.fontFamily = fontFamily; - } - if (lineHeight) { - oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; - } - }, + if (!match) { + return; + } + var fontStyle = match[1], + // font variant is not used + // fontVariant = match[2], + fontWeight = match[3], + fontSize = match[4], + lineHeight = match[5], + fontFamily = match[6]; + + if (fontStyle) { + oStyle.fontStyle = fontStyle; + } + if (fontWeight) { + oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); + } + if (fontSize) { + oStyle.fontSize = parseUnit(fontSize); + } + if (fontFamily) { + oStyle.fontFamily = fontFamily; + } + if (lineHeight) { + oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; + } + }, - /** + /** * Parses an SVG document, returning all of the gradient declarations found in it * @static * @function @@ -815,26 +816,26 @@ fabric.util.object.extend(fabric, { * @param {SVGDocument} doc SVG document to parse * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element */ - getGradientDefs: function(doc) { - var tagArray = [ - 'linearGradient', - 'radialGradient', - 'svg:linearGradient', - 'svg:radialGradient'], - elList = _getMultipleNodes(doc, tagArray), - el, j = 0, gradientDefs = { }; - j = elList.length; - while (j--) { - el = elList[j]; - if (el.getAttribute('xlink:href')) { - recursivelyParseGradientsXlink(doc, el); + getGradientDefs: function(doc) { + var tagArray = [ + 'linearGradient', + 'radialGradient', + 'svg:linearGradient', + 'svg:radialGradient'], + elList = _getMultipleNodes(doc, tagArray), + el, j = 0, gradientDefs = { }; + j = elList.length; + while (j--) { + el = elList[j]; + if (el.getAttribute('xlink:href')) { + recursivelyParseGradientsXlink(doc, el); + } + gradientDefs[el.getAttribute('id')] = el; } - gradientDefs[el.getAttribute('id')] = el; - } - return gradientDefs; - }, + return gradientDefs; + }, - /** + /** * Returns an object of attributes' name/value, given element and an array of attribute names; * Parses parent "g" nodes recursively upwards. * @static @@ -843,64 +844,64 @@ fabric.util.object.extend(fabric, { * @param {Array} attributes Array of attributes to parse * @return {Object} object containing parsed attributes' names/values */ - parseAttributes: function(element, attributes, svgUid) { + parseAttributes: function(element, attributes, svgUid) { - if (!element) { - return; - } + if (!element) { + return; + } - var value, - parentAttributes = { }, - fontSize, parentFontSize; + var value, + parentAttributes = { }, + fontSize, parentFontSize; - if (typeof svgUid === 'undefined') { - svgUid = element.getAttribute('svgUid'); - } - // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards - if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { - parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); - } + if (typeof svgUid === 'undefined') { + svgUid = element.getAttribute('svgUid'); + } + // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards + if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { + parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); + } - var ownAttributes = attributes.reduce(function(memo, attr) { - value = element.getAttribute(attr); + var ownAttributes = attributes.reduce(function(memo, attr) { + value = element.getAttribute(attr); if (value) { // eslint-disable-line - memo[attr] = value; + memo[attr] = value; + } + return memo; + }, { }); + // add values parsed from style, which take precedence over attributes + // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) + var cssAttrs = Object.assign( + getGlobalStylesForElement(element, svgUid), + fabric.parseStyleAttribute(element) + ); + ownAttributes = Object.assign( + ownAttributes, + cssAttrs + ); + if (cssAttrs[cPath]) { + element.setAttribute(cPath, cssAttrs[cPath]); + } + fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; + if (ownAttributes[fSize]) { + // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. + ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); } - return memo; - }, { }); - // add values parsed from style, which take precedence over attributes - // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) - var cssAttrs = Object.assign( - getGlobalStylesForElement(element, svgUid), - fabric.parseStyleAttribute(element) - ); - ownAttributes = Object.assign( - ownAttributes, - cssAttrs - ); - if (cssAttrs[cPath]) { - element.setAttribute(cPath, cssAttrs[cPath]); - } - fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; - if (ownAttributes[fSize]) { - // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. - ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); - } - var normalizedAttr, normalizedValue, normalizedStyle = {}; - for (var attr in ownAttributes) { - normalizedAttr = normalizeAttr(attr); - normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); - normalizedStyle[normalizedAttr] = normalizedValue; - } - if (normalizedStyle && normalizedStyle.font) { - fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); - } - var mergedAttrs = Object.assign(parentAttributes, normalizedStyle); - return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); - }, + var normalizedAttr, normalizedValue, normalizedStyle = {}; + for (var attr in ownAttributes) { + normalizedAttr = normalizeAttr(attr); + normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); + normalizedStyle[normalizedAttr] = normalizedValue; + } + if (normalizedStyle && normalizedStyle.font) { + fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); + } + var mergedAttrs = Object.assign(parentAttributes, normalizedStyle); + return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); + }, - /** + /** * Transforms an array of svg elements to corresponding fabric.* instances * @static * @memberOf fabric @@ -909,71 +910,71 @@ fabric.util.object.extend(fabric, { * @param {Object} [options] Options object * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. */ - parseElements: function(elements, callback, options, reviver, parsingOptions) { - new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); - }, + parseElements: function(elements, callback, options, reviver, parsingOptions) { + new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); + }, - /** + /** * Parses "style" attribute, retuning an object with values * @static * @memberOf fabric * @param {SVGElement} element Element to parse * @return {Object} Objects with values parsed from style attribute of an element */ - parseStyleAttribute: function(element) { - var oStyle = { }, - style = element.getAttribute('style'); + parseStyleAttribute: function(element) { + var oStyle = { }, + style = element.getAttribute('style'); - if (!style) { - return oStyle; - } + if (!style) { + return oStyle; + } - if (typeof style === 'string') { - parseStyleString(style, oStyle); - } - else { - parseStyleObject(style, oStyle); - } + if (typeof style === 'string') { + parseStyleString(style, oStyle); + } + else { + parseStyleObject(style, oStyle); + } - return oStyle; - }, + return oStyle; + }, - /** + /** * Parses "points" attribute, returning an array of values * @static * @memberOf fabric * @param {String} points points attribute string * @return {Array} array of points */ - parsePointsAttribute: function(points) { + parsePointsAttribute: function(points) { - // points attribute is required and must not be empty - if (!points) { - return null; - } + // points attribute is required and must not be empty + if (!points) { + return null; + } - // replace commas with whitespace and remove bookending whitespace - points = points.replace(/,/g, ' ').trim(); + // replace commas with whitespace and remove bookending whitespace + points = points.replace(/,/g, ' ').trim(); - points = points.split(/\s+/); - var parsedPoints = [], i, len; + points = points.split(/\s+/); + var parsedPoints = [], i, len; - for (i = 0, len = points.length; i < len; i += 2) { - parsedPoints.push({ - x: parseFloat(points[i]), - y: parseFloat(points[i + 1]) - }); - } + for (i = 0, len = points.length; i < len; i += 2) { + parsedPoints.push({ + x: parseFloat(points[i]), + y: parseFloat(points[i + 1]) + }); + } - // odd number of points is an error - // if (parsedPoints.length % 2 !== 0) { - // return null; - // } + // odd number of points is an error + // if (parsedPoints.length % 2 !== 0) { + // return null; + // } - return parsedPoints; - }, + return parsedPoints; + }, - /** + /** * Returns CSS rules for a given SVG document * @static * @function @@ -981,57 +982,57 @@ fabric.util.object.extend(fabric, { * @param {SVGDocument} doc SVG document to parse * @return {Object} CSS rules of this document */ - getCSSRules: function(doc) { - var styles = doc.getElementsByTagName('style'), i, len, - allRules = { }, rules; - - // very crude parsing of style contents - for (i = 0, len = styles.length; i < len; i++) { - var styleContents = styles[i].textContent; - - // remove comments - styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); - if (styleContents.trim() === '') { - continue; - } - // recovers all the rule in this form `body { style code... }` - // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); - rules = styleContents.split('}'); - // remove empty rules. - rules = rules.filter(function(rule) { return rule.trim(); }); - // at this point we have hopefully an array of rules `body { style code... ` - // eslint-disable-next-line no-loop-func - rules.forEach(function(rule) { - - var match = rule.split('{'), - ruleObj = { }, declaration = match[1].trim(), - propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); - - for (i = 0, len = propertyValuePairs.length; i < len; i++) { - var pair = propertyValuePairs[i].split(':'), - property = pair[0].trim(), - value = pair[1].trim(); - ruleObj[property] = value; + getCSSRules: function(doc) { + var styles = doc.getElementsByTagName('style'), i, len, + allRules = { }, rules; + + // very crude parsing of style contents + for (i = 0, len = styles.length; i < len; i++) { + var styleContents = styles[i].textContent; + + // remove comments + styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); + if (styleContents.trim() === '') { + continue; } - rule = match[0].trim(); - rule.split(',').forEach(function(_rule) { - _rule = _rule.replace(/^svg/i, '').trim(); - if (_rule === '') { - return; - } - if (allRules[_rule]) { - Object.assign(allRules[_rule], ruleObj); - } - else { - allRules[_rule] = Object.assign({}, ruleObj); + // recovers all the rule in this form `body { style code... }` + // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); + rules = styleContents.split('}'); + // remove empty rules. + rules = rules.filter(function(rule) { return rule.trim(); }); + // at this point we have hopefully an array of rules `body { style code... ` + // eslint-disable-next-line no-loop-func + rules.forEach(function(rule) { + + var match = rule.split('{'), + ruleObj = { }, declaration = match[1].trim(), + propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); + + for (i = 0, len = propertyValuePairs.length; i < len; i++) { + var pair = propertyValuePairs[i].split(':'), + property = pair[0].trim(), + value = pair[1].trim(); + ruleObj[property] = value; } + rule = match[0].trim(); + rule.split(',').forEach(function(_rule) { + _rule = _rule.replace(/^svg/i, '').trim(); + if (_rule === '') { + return; + } + if (allRules[_rule]) { + Object.assign(allRules[_rule], ruleObj); + } + else { + allRules[_rule] = Object.assign({}, ruleObj); + } + }); }); - }); - } - return allRules; - }, + } + return allRules; + }, - /** + /** * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy) * @memberOf fabric @@ -1041,29 +1042,29 @@ fabric.util.object.extend(fabric, { * @param {Object} [options] Object containing options for parsing * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources */ - loadSVGFromURL: function(url, callback, reviver, options) { + loadSVGFromURL: function(url, callback, reviver, options) { - url = url.replace(/^\n\s*/, '').trim(); - new fabric.util.request(url, { - method: 'get', - onComplete: onComplete - }); + url = url.replace(/^\n\s*/, '').trim(); + new fabric.util.request(url, { + method: 'get', + onComplete: onComplete + }); - function onComplete(r) { + function onComplete(r) { - var xml = r.responseXML; - if (!xml || !xml.documentElement) { - callback && callback(null); - return false; - } + var xml = r.responseXML; + if (!xml || !xml.documentElement) { + callback && callback(null); + return false; + } - fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { - callback && callback(results, _options, elements, allElements); - }, reviver, options); - } - }, + fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { + callback && callback(results, _options, elements, allElements); + }, reviver, options); + } + }, - /** + /** * Takes string corresponding to an SVG document, and parses it into a set of fabric objects * @memberOf fabric * @param {String} string @@ -1072,11 +1073,13 @@ fabric.util.object.extend(fabric, { * @param {Object} [options] Object containing options for parsing * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources */ - loadSVGFromString: function(string, callback, reviver, options) { - var parser = new fabric.window.DOMParser(), - doc = parser.parseFromString(string.trim(), 'text/xml'); - fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { - callback(results, _options, elements, allElements); - }, reviver, options); - } -}); + loadSVGFromString: function(string, callback, reviver, options) { + var parser = new fabric.window.DOMParser(), + doc = parser.parseFromString(string.trim(), 'text/xml'); + fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { + callback(results, _options, elements, allElements); + }, reviver, options); + } + }); + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/pattern.class.js b/src/pattern.class.js index cc39bcdc90f..b4e4e4e06ab 100644 --- a/src/pattern.class.js +++ b/src/pattern.class.js @@ -1,6 +1,7 @@ -var toFixed = fabric.util.toFixed; +(function(global) { + var fabric = global.fabric, toFixed = fabric.util.toFixed; -/** + /** * Pattern class * @class fabric.Pattern * @see {@link http://fabricjs.com/patterns|Pattern demo} @@ -9,124 +10,124 @@ var toFixed = fabric.util.toFixed; */ -fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { + fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { - /** + /** * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) * @type String * @default */ - repeat: 'repeat', + repeat: 'repeat', - /** + /** * Pattern horizontal offset from object's left/top corner * @type Number * @default */ - offsetX: 0, + offsetX: 0, - /** + /** * Pattern vertical offset from object's left/top corner * @type Number * @default */ - offsetY: 0, + offsetY: 0, - /** + /** * crossOrigin value (one of "", "anonymous", "use-credentials") * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes * @type String * @default */ - crossOrigin: '', + crossOrigin: '', - /** + /** * transform matrix to change the pattern, imported from svgs. * @type Array * @default */ - patternTransform: null, + patternTransform: null, - type: 'pattern', + type: 'pattern', - /** + /** * Constructor * @param {Object} [options] Options object * @param {option.source} [source] the pattern source, eventually empty or a drawable * @return {fabric.Pattern} thisArg */ - initialize: function(options) { - options || (options = { }); - this.id = fabric.Object.__uid++; - this.setOptions(options); - }, + initialize: function(options) { + options || (options = { }); + this.id = fabric.Object.__uid++; + this.setOptions(options); + }, - /** + /** * Returns object representation of a pattern * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of a pattern instance */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - source, object; + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + source, object; - // element - if (typeof this.source.src === 'string') { - source = this.source.src; - } - // element - else if (typeof this.source === 'object' && this.source.toDataURL) { - source = this.source.toDataURL(); - } + // element + if (typeof this.source.src === 'string') { + source = this.source.src; + } + // element + else if (typeof this.source === 'object' && this.source.toDataURL) { + source = this.source.toDataURL(); + } - object = { - type: 'pattern', - source: source, - repeat: this.repeat, - crossOrigin: this.crossOrigin, - offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), - offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), - patternTransform: this.patternTransform ? this.patternTransform.concat() : null - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); - - return object; - }, - - /* _TO_SVG_START_ */ - /** + object = { + type: 'pattern', + source: source, + repeat: this.repeat, + crossOrigin: this.crossOrigin, + offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), + offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), + patternTransform: this.patternTransform ? this.patternTransform.concat() : null + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); + + return object; + }, + + /* _TO_SVG_START_ */ + /** * Returns SVG representation of a pattern * @param {fabric.Object} object * @return {String} SVG representation of a pattern */ - toSVG: function(object) { - var patternSource = typeof this.source === 'function' ? this.source() : this.source, - patternWidth = patternSource.width / object.width, - patternHeight = patternSource.height / object.height, - patternOffsetX = this.offsetX / object.width, - patternOffsetY = this.offsetY / object.height, - patternImgSrc = ''; - if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { - patternHeight = 1; - if (patternOffsetY) { - patternHeight += Math.abs(patternOffsetY); - } - } - if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { - patternWidth = 1; - if (patternOffsetX) { - patternWidth += Math.abs(patternOffsetX); + toSVG: function(object) { + var patternSource = typeof this.source === 'function' ? this.source() : this.source, + patternWidth = patternSource.width / object.width, + patternHeight = patternSource.height / object.height, + patternOffsetX = this.offsetX / object.width, + patternOffsetY = this.offsetY / object.height, + patternImgSrc = ''; + if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { + patternHeight = 1; + if (patternOffsetY) { + patternHeight += Math.abs(patternOffsetY); + } } + if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { + patternWidth = 1; + if (patternOffsetX) { + patternWidth += Math.abs(patternOffsetX); + } - } - if (patternSource.src) { - patternImgSrc = patternSource.src; - } - else if (patternSource.toDataURL) { - patternImgSrc = patternSource.toDataURL(); - } + } + if (patternSource.src) { + patternImgSrc = patternSource.src; + } + else if (patternSource.toDataURL) { + patternImgSrc = patternSource.toDataURL(); + } - return '\n' + '\n'; - }, - /* _TO_SVG_END_ */ + }, + /* _TO_SVG_END_ */ - setOptions: function(options) { - for (var prop in options) { - this[prop] = options[prop]; - } - }, + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, - /** + /** * Returns an instance of CanvasPattern * @param {CanvasRenderingContext2D} ctx Context to create pattern * @return {CanvasPattern} */ - toLive: function(ctx) { - var source = this.source; - // if the image failed to load, return, and allow rest to continue loading - if (!source) { - return ''; - } - - // if an image - if (typeof source.src !== 'undefined') { - if (!source.complete) { + toLive: function(ctx) { + var source = this.source; + // if the image failed to load, return, and allow rest to continue loading + if (!source) { return ''; } - if (source.naturalWidth === 0 || source.naturalHeight === 0) { - return ''; + + // if an image + if (typeof source.src !== 'undefined') { + if (!source.complete) { + return ''; + } + if (source.naturalWidth === 0 || source.naturalHeight === 0) { + return ''; + } } + return ctx.createPattern(source, this.repeat); } - return ctx.createPattern(source, this.repeat); - } -}); - -fabric.Pattern.fromObject = function(object) { - var patternOptions = Object.assign({}, object); - return fabric.util.loadImage(object.source, { crossOrigin: object.crossOrigin }) - .then(function(img) { - patternOptions.source = img; - return new fabric.Pattern(patternOptions); - }); -}; + }); + + fabric.Pattern.fromObject = function(object) { + var patternOptions = Object.assign({}, object); + return fabric.util.loadImage(object.source, { crossOrigin: object.crossOrigin }) + .then(function(img) { + patternOptions.source = img; + return new fabric.Pattern(patternOptions); + }); + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/point.class.js b/src/point.class.js index c20d52a15d4..b88b7f16ab1 100644 --- a/src/point.class.js +++ b/src/point.class.js @@ -1,10 +1,11 @@ -/* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ +(function(global) { + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ -var fabric = exports.fabric || (exports.fabric = { }); + var fabric = global.fabric || (global.fabric = { }); -fabric.Point = Point; + fabric.Point = Point; -/** + /** * Point class * @class fabric.Point * @memberOf fabric @@ -13,328 +14,330 @@ fabric.Point = Point; * @param {Number} y * @return {fabric.Point} thisArg */ -function Point(x, y) { - this.x = x || 0; - this.y = y || 0; -} + function Point(x, y) { + this.x = x || 0; + this.y = y || 0; + } -Point.prototype = /** @lends fabric.Point.prototype */ { + Point.prototype = /** @lends fabric.Point.prototype */ { - type: 'point', + type: 'point', - constructor: Point, + constructor: Point, - /** + /** * Adds another point to this one and returns another one * @param {fabric.Point} that * @return {fabric.Point} new Point instance with added values */ - add: function (that) { - return new Point(this.x + that.x, this.y + that.y); - }, + add: function (that) { + return new Point(this.x + that.x, this.y + that.y); + }, - /** + /** * Adds another point to this one * @param {fabric.Point} that * @return {fabric.Point} thisArg * @chainable */ - addEquals: function (that) { - this.x += that.x; - this.y += that.y; - return this; - }, + addEquals: function (that) { + this.x += that.x; + this.y += that.y; + return this; + }, - /** + /** * Adds value to this point and returns a new one * @param {Number} scalar * @return {fabric.Point} new Point with added value */ - scalarAdd: function (scalar) { - return new Point(this.x + scalar, this.y + scalar); - }, + scalarAdd: function (scalar) { + return new Point(this.x + scalar, this.y + scalar); + }, - /** + /** * Adds value to this point * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarAddEquals: function (scalar) { - this.x += scalar; - this.y += scalar; - return this; - }, + scalarAddEquals: function (scalar) { + this.x += scalar; + this.y += scalar; + return this; + }, - /** + /** * Subtracts another point from this point and returns a new one * @param {fabric.Point} that * @return {fabric.Point} new Point object with subtracted values */ - subtract: function (that) { - return new Point(this.x - that.x, this.y - that.y); - }, + subtract: function (that) { + return new Point(this.x - that.x, this.y - that.y); + }, - /** + /** * Subtracts another point from this point * @param {fabric.Point} that * @return {fabric.Point} thisArg * @chainable */ - subtractEquals: function (that) { - this.x -= that.x; - this.y -= that.y; - return this; - }, + subtractEquals: function (that) { + this.x -= that.x; + this.y -= that.y; + return this; + }, - /** + /** * Subtracts value from this point and returns a new one * @param {Number} scalar * @return {fabric.Point} */ - scalarSubtract: function (scalar) { - return new Point(this.x - scalar, this.y - scalar); - }, + scalarSubtract: function (scalar) { + return new Point(this.x - scalar, this.y - scalar); + }, - /** + /** * Subtracts value from this point * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarSubtractEquals: function (scalar) { - this.x -= scalar; - this.y -= scalar; - return this; - }, + scalarSubtractEquals: function (scalar) { + this.x -= scalar; + this.y -= scalar; + return this; + }, - /** + /** * Multiplies this point by another value and returns a new one * @param {fabric.Point} that * @return {fabric.Point} */ - multiply: function (that) { - return new Point(this.x * that.x, this.y * that.y); - }, + multiply: function (that) { + return new Point(this.x * that.x, this.y * that.y); + }, - /** + /** * Multiplies this point by a value and returns a new one * @param {Number} scalar * @return {fabric.Point} */ - scalarMultiply: function (scalar) { - return new Point(this.x * scalar, this.y * scalar); - }, + scalarMultiply: function (scalar) { + return new Point(this.x * scalar, this.y * scalar); + }, - /** + /** * Multiplies this point by a value * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarMultiplyEquals: function (scalar) { - this.x *= scalar; - this.y *= scalar; - return this; - }, + scalarMultiplyEquals: function (scalar) { + this.x *= scalar; + this.y *= scalar; + return this; + }, - /** + /** * Divides this point by another and returns a new one * @param {fabric.Point} that * @return {fabric.Point} */ - divide: function (that) { - return new Point(this.x / that.x, this.y / that.y); - }, + divide: function (that) { + return new Point(this.x / that.x, this.y / that.y); + }, - /** + /** * Divides this point by a value and returns a new one * @param {Number} scalar * @return {fabric.Point} */ - scalarDivide: function (scalar) { - return new Point(this.x / scalar, this.y / scalar); - }, + scalarDivide: function (scalar) { + return new Point(this.x / scalar, this.y / scalar); + }, - /** + /** * Divides this point by a value * @param {Number} scalar * @return {fabric.Point} thisArg * @chainable */ - scalarDivideEquals: function (scalar) { - this.x /= scalar; - this.y /= scalar; - return this; - }, + scalarDivideEquals: function (scalar) { + this.x /= scalar; + this.y /= scalar; + return this; + }, - /** + /** * Returns true if this point is equal to another one * @param {fabric.Point} that * @return {Boolean} */ - eq: function (that) { - return (this.x === that.x && this.y === that.y); - }, + eq: function (that) { + return (this.x === that.x && this.y === that.y); + }, - /** + /** * Returns true if this point is less than another one * @param {fabric.Point} that * @return {Boolean} */ - lt: function (that) { - return (this.x < that.x && this.y < that.y); - }, + lt: function (that) { + return (this.x < that.x && this.y < that.y); + }, - /** + /** * Returns true if this point is less than or equal to another one * @param {fabric.Point} that * @return {Boolean} */ - lte: function (that) { - return (this.x <= that.x && this.y <= that.y); - }, + lte: function (that) { + return (this.x <= that.x && this.y <= that.y); + }, - /** + /** * Returns true if this point is greater another one * @param {fabric.Point} that * @return {Boolean} */ - gt: function (that) { - return (this.x > that.x && this.y > that.y); - }, + gt: function (that) { + return (this.x > that.x && this.y > that.y); + }, - /** + /** * Returns true if this point is greater than or equal to another one * @param {fabric.Point} that * @return {Boolean} */ - gte: function (that) { - return (this.x >= that.x && this.y >= that.y); - }, + gte: function (that) { + return (this.x >= that.x && this.y >= that.y); + }, - /** + /** * Returns new point which is the result of linear interpolation with this one and another one * @param {fabric.Point} that * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 * @return {fabric.Point} */ - lerp: function (that, t) { - if (typeof t === 'undefined') { - t = 0.5; - } - t = Math.max(Math.min(1, t), 0); - return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); - }, - - /** + lerp: function (that, t) { + if (typeof t === 'undefined') { + t = 0.5; + } + t = Math.max(Math.min(1, t), 0); + return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); + }, + + /** * Returns distance from this point and another one * @param {fabric.Point} that * @return {Number} */ - distanceFrom: function (that) { - var dx = this.x - that.x, - dy = this.y - that.y; - return Math.sqrt(dx * dx + dy * dy); - }, + distanceFrom: function (that) { + var dx = this.x - that.x, + dy = this.y - that.y; + return Math.sqrt(dx * dx + dy * dy); + }, - /** + /** * Returns the point between this point and another one * @param {fabric.Point} that * @return {fabric.Point} */ - midPointFrom: function (that) { - return this.lerp(that); - }, + midPointFrom: function (that) { + return this.lerp(that); + }, - /** + /** * Returns a new point which is the min of this and another one * @param {fabric.Point} that * @return {fabric.Point} */ - min: function (that) { - return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); - }, + min: function (that) { + return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); + }, - /** + /** * Returns a new point which is the max of this and another one * @param {fabric.Point} that * @return {fabric.Point} */ - max: function (that) { - return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); - }, + max: function (that) { + return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); + }, - /** + /** * Returns string representation of this point * @return {String} */ - toString: function () { - return this.x + ',' + this.y; - }, + toString: function () { + return this.x + ',' + this.y; + }, - /** + /** * Sets x/y of this point * @param {Number} x * @param {Number} y * @chainable */ - setXY: function (x, y) { - this.x = x; - this.y = y; - return this; - }, + setXY: function (x, y) { + this.x = x; + this.y = y; + return this; + }, - /** + /** * Sets x of this point * @param {Number} x * @chainable */ - setX: function (x) { - this.x = x; - return this; - }, + setX: function (x) { + this.x = x; + return this; + }, - /** + /** * Sets y of this point * @param {Number} y * @chainable */ - setY: function (y) { - this.y = y; - return this; - }, + setY: function (y) { + this.y = y; + return this; + }, - /** + /** * Sets x/y of this point from another point * @param {fabric.Point} that * @chainable */ - setFromPoint: function (that) { - this.x = that.x; - this.y = that.y; - return this; - }, + setFromPoint: function (that) { + this.x = that.x; + this.y = that.y; + return this; + }, - /** + /** * Swaps x/y of this point and another point * @param {fabric.Point} that */ - swap: function (that) { - var x = this.x, - y = this.y; - this.x = that.x; - this.y = that.y; - that.x = x; - that.y = y; - }, - - /** + swap: function (that) { + var x = this.x, + y = this.y; + this.x = that.x; + this.y = that.y; + that.x = x; + that.y = y; + }, + + /** * return a cloned instance of the point * @return {fabric.Point} */ - clone: function () { - return new Point(this.x, this.y); - } -}; + clone: function () { + return new Point(this.x, this.y); + } + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shadow.class.js b/src/shadow.class.js index 5c4faf85ab9..fdae041a2c8 100644 --- a/src/shadow.class.js +++ b/src/shadow.class.js @@ -1,137 +1,138 @@ -var fabric = exports.fabric || (exports.fabric = { }), - toFixed = fabric.util.toFixed; +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + toFixed = fabric.util.toFixed; -/** + /** * Shadow class * @class fabric.Shadow * @see {@link http://fabricjs.com/shadows|Shadow demo} * @see {@link fabric.Shadow#initialize} for constructor definition */ -fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { + fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { - /** + /** * Shadow color * @type String * @default */ - color: 'rgb(0,0,0)', + color: 'rgb(0,0,0)', - /** + /** * Shadow blur * @type Number */ - blur: 0, + blur: 0, - /** + /** * Shadow horizontal offset * @type Number * @default */ - offsetX: 0, + offsetX: 0, - /** + /** * Shadow vertical offset * @type Number * @default */ - offsetY: 0, + offsetY: 0, - /** + /** * Whether the shadow should affect stroke operations * @type Boolean * @default */ - affectStroke: false, + affectStroke: false, - /** + /** * Indicates whether toObject should include default values * @type Boolean * @default */ - includeDefaultValues: true, + includeDefaultValues: true, - /** + /** * When `false`, the shadow will scale with the object. * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale. * default to false * @type Boolean * @default */ - nonScaling: false, + nonScaling: false, - /** + /** * Constructor * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px") * @return {fabric.Shadow} thisArg */ - initialize: function(options) { + initialize: function(options) { - if (typeof options === 'string') { - options = this._parseShadow(options); - } + if (typeof options === 'string') { + options = this._parseShadow(options); + } - for (var prop in options) { - this[prop] = options[prop]; - } + for (var prop in options) { + this[prop] = options[prop]; + } - this.id = fabric.Object.__uid++; - }, + this.id = fabric.Object.__uid++; + }, - /** + /** * @private * @param {String} shadow Shadow value to parse * @return {Object} Shadow object with color, offsetX, offsetY and blur */ - _parseShadow: function(shadow) { - var shadowStr = shadow.trim(), - offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], - color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; - - return { - color: color.trim(), - offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, - offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, - blur: parseFloat(offsetsAndBlur[3], 10) || 0 - }; - }, + _parseShadow: function(shadow) { + var shadowStr = shadow.trim(), + offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], + color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; - /** + return { + color: color.trim(), + offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, + offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, + blur: parseFloat(offsetsAndBlur[3], 10) || 0 + }; + }, + + /** * Returns a string representation of an instance * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow * @return {String} Returns CSS3 text-shadow declaration */ - toString: function() { - return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); - }, + toString: function() { + return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns SVG representation of a shadow * @param {fabric.Object} object * @return {String} SVG representation of a shadow */ - toSVG: function(object) { - var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - offset = fabric.util.rotateVector( - { x: this.offsetX, y: this.offsetY }, - fabric.util.degreesToRadians(-object.angle)), - BLUR_BOX = 20, color = new fabric.Color(this.color); - - if (object.width && object.height) { - //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion - // we add some extra space to filter box to contain the blur ( 20 ) - fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - } - if (object.flipX) { - offset.x *= -1; - } - if (object.flipY) { - offset.y *= -1; - } + toSVG: function(object) { + var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + offset = fabric.util.rotateVector( + { x: this.offsetX, y: this.offsetY }, + fabric.util.degreesToRadians(-object.angle)), + BLUR_BOX = 20, color = new fabric.Color(this.color); + + if (object.width && object.height) { + //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion + // we add some extra space to filter box to contain the blur ( 20 ) + fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + } + if (object.flipX) { + offset.x *= -1; + } + if (object.flipY) { + offset.y *= -1; + } - return ( - '\n' + '\t\n' + @@ -144,41 +145,43 @@ fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { '\t\t\n' + '\t\n' + '\n'); - }, - /* _TO_SVG_END_ */ + }, + /* _TO_SVG_END_ */ - /** + /** * Returns object representation of a shadow * @return {Object} Object representation of a shadow instance */ - toObject: function() { - if (this.includeDefaultValues) { - return { - color: this.color, - blur: this.blur, - offsetX: this.offsetX, - offsetY: this.offsetY, - affectStroke: this.affectStroke, - nonScaling: this.nonScaling - }; - } - var obj = { }, proto = fabric.Shadow.prototype; - - ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { - if (this[prop] !== proto[prop]) { - obj[prop] = this[prop]; + toObject: function() { + if (this.includeDefaultValues) { + return { + color: this.color, + blur: this.blur, + offsetX: this.offsetX, + offsetY: this.offsetY, + affectStroke: this.affectStroke, + nonScaling: this.nonScaling + }; } - }, this); + var obj = { }, proto = fabric.Shadow.prototype; - return obj; - } -}); + ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { + if (this[prop] !== proto[prop]) { + obj[prop] = this[prop]; + } + }, this); -/** + return obj; + } + }); + + /** * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") * @static * @field * @memberOf fabric.Shadow */ -// eslint-disable-next-line max-len -fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; + // eslint-disable-next-line max-len + fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/active_selection.class.js b/src/shapes/active_selection.class.js index 42791ec507b..f9c6b1d3b7f 100644 --- a/src/shapes/active_selection.class.js +++ b/src/shapes/active_selection.class.js @@ -1,37 +1,38 @@ -var fabric = exports.fabric || (exports.fabric = { }); +(function(global) { + var fabric = global.fabric || (global.fabric = { }); -/** + /** * Group class * @class fabric.ActiveSelection * @extends fabric.Group * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} * @see {@link fabric.ActiveSelection#initialize} for constructor definition */ -fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { + fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'activeSelection', + type: 'activeSelection', - /** + /** * @override */ - layout: 'fit-content', + layout: 'fit-content', - /** + /** * @override */ - subTargetCheck: false, + subTargetCheck: false, - /** + /** * @override */ - interactive: false, + interactive: false, - /** + /** * Constructor * * @param {fabric.Object[]} [objects] instance objects @@ -39,94 +40,94 @@ fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane * @return {fabric.ActiveSelection} thisArg */ - initialize: function (objects, options, objectsRelativeToGroup) { - this.callSuper('initialize', objects, options, objectsRelativeToGroup); - this.setCoords(); - }, + initialize: function (objects, options, objectsRelativeToGroup) { + this.callSuper('initialize', objects, options, objectsRelativeToGroup); + this.setCoords(); + }, - /** + /** * @private */ - _shouldSetNestedCoords: function () { - return true; - }, + _shouldSetNestedCoords: function () { + return true; + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane * @returns {boolean} true if object entered group */ - enterGroup: function (object, removeParentTransform) { - if (object.group) { - // save ref to group for later in order to return to it - var parent = object.group; - parent._exitGroup(object); - object.__owningGroup = parent; - } - this._enterGroup(object, removeParentTransform); - return true; - }, - - /** + enterGroup: function (object, removeParentTransform) { + if (object.group) { + // save ref to group for later in order to return to it + var parent = object.group; + parent._exitGroup(object); + object.__owningGroup = parent; + } + this._enterGroup(object, removeParentTransform); + return true; + }, + + /** * we want objects to retain their canvas ref when exiting instance * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - exitGroup: function (object, removeParentTransform) { - this._exitGroup(object, removeParentTransform); - var parent = object.__owningGroup; - if (parent) { - // return to owning group - parent.enterGroup(object); - delete object.__owningGroup; - } - }, - - /** + exitGroup: function (object, removeParentTransform) { + this._exitGroup(object, removeParentTransform); + var parent = object.__owningGroup; + if (parent) { + // return to owning group + parent.enterGroup(object); + delete object.__owningGroup; + } + }, + + /** * @private * @param {'added'|'removed'} type * @param {fabric.Object[]} targets */ - _onAfterObjectsChange: function (type, targets) { - var groups = []; - targets.forEach(function (object) { - object.group && !groups.includes(object.group) && groups.push(object.group); - }); - if (type === 'removed') { - // invalidate groups' layout and mark as dirty - groups.forEach(function (group) { - group._onAfterObjectsChange('added', targets); + _onAfterObjectsChange: function (type, targets) { + var groups = []; + targets.forEach(function (object) { + object.group && !groups.includes(object.group) && groups.push(object.group); }); - } - else { - // mark groups as dirty - groups.forEach(function (group) { - group._set('dirty', true); - }); - } - }, - - /** + if (type === 'removed') { + // invalidate groups' layout and mark as dirty + groups.forEach(function (group) { + group._onAfterObjectsChange('added', targets); + }); + } + else { + // mark groups as dirty + groups.forEach(function (group) { + group._set('dirty', true); + }); + } + }, + + /** * If returns true, deselection is cancelled. * @since 2.0.0 * @return {Boolean} [cancel] */ - onDeselect: function() { - this.removeAll(); - return false; - }, + onDeselect: function() { + this.removeAll(); + return false; + }, - /** + /** * Returns string representation of a group * @return {String} */ - toString: function() { - return '#'; - }, + toString: function() { + return '#'; + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * objectCaching is a global flag, wins over everything * needsItsOwnCache should be used when the object drawing method requires @@ -134,52 +135,54 @@ fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric * Generally you do not cache objects in groups because the group outside is cached. * @return {Boolean} */ - shouldCache: function() { - return false; - }, + shouldCache: function() { + return false; + }, - /** + /** * Check if this group or its parent group are caching, recursively up * @return {Boolean} */ - isOnACache: function() { - return false; - }, + isOnACache: function() { + return false; + }, - /** + /** * Renders controls and borders for the object * @param {CanvasRenderingContext2D} ctx Context to render on * @param {Object} [styleOverride] properties to override the object style * @param {Object} [childrenOverride] properties to override the children overrides */ - _renderControls: function(ctx, styleOverride, childrenOverride) { - ctx.save(); - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; - this.callSuper('_renderControls', ctx, styleOverride); - var options = Object.assign( - { hasControls: false }, - childrenOverride, - { forActiveSelection: true } - ); - for (var i = 0; i < this._objects.length; i++) { - this._objects[i]._renderControls(ctx, options); - } - ctx.restore(); - }, -}); - -/** + _renderControls: function(ctx, styleOverride, childrenOverride) { + ctx.save(); + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + this.callSuper('_renderControls', ctx, styleOverride); + var options = Object.assign( + { hasControls: false }, + childrenOverride, + { forActiveSelection: true } + ); + for (var i = 0; i < this._objects.length; i++) { + this._objects[i]._renderControls(ctx, options); + } + ctx.restore(); + }, + }); + + /** * Returns {@link fabric.ActiveSelection} instance from an object representation * @static * @memberOf fabric.ActiveSelection * @param {Object} object Object to create a group from * @returns {Promise} */ -fabric.ActiveSelection.fromObject = function(object) { - var objects = object.objects, - options = fabric.util.object.clone(object, true); - delete options.objects; - return fabric.util.enlivenObjects(objects).then(function(enlivenedObjects) { - return new fabric.ActiveSelection(enlivenedObjects, options, true); - }); -}; + fabric.ActiveSelection.fromObject = function(object) { + var objects = object.objects, + options = fabric.util.object.clone(object, true); + delete options.objects; + return fabric.util.enlivenObjects(objects).then(function(enlivenedObjects) { + return new fabric.ActiveSelection(enlivenedObjects, options, true); + }); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/circle.class.js b/src/shapes/circle.class.js index ae89d93a6a1..b21357e2ee0 100644 --- a/src/shapes/circle.class.js +++ b/src/shapes/circle.class.js @@ -1,163 +1,163 @@ -var fabric = exports.fabric || (exports.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians; - -/** +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians; + /** * Circle class * @class fabric.Circle * @extends fabric.Object * @see {@link fabric.Circle#initialize} for constructor definition */ -fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { + fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'circle', + type: 'circle', - /** + /** * Radius of this circle * @type Number * @default */ - radius: 0, + radius: 0, - /** + /** * degrees of start of the circle. * probably will change to degrees in next major version * @type Number 0 - 359 * @default 0 */ - startAngle: 0, + startAngle: 0, - /** + /** * End angle of the circle * probably will change to degrees in next major version * @type Number 1 - 360 * @default 360 */ - endAngle: 360, + endAngle: 360, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), - /** + /** * @private * @param {String} key * @param {*} value * @return {fabric.Circle} thisArg */ - _set: function(key, value) { - this.callSuper('_set', key, value); + _set: function(key, value) { + this.callSuper('_set', key, value); - if (key === 'radius') { - this.setRadius(value); - } + if (key === 'radius') { + this.setRadius(value); + } - return this; - }, + return this; + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); - }, + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); + }, - /* _TO_SVG_START_ */ + /* _TO_SVG_START_ */ - /** + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var svgString, x = 0, y = 0, - angle = (this.endAngle - this.startAngle) % 360; - - if (angle === 0) { - svgString = [ - '\n' - ]; - } - else { - var start = degreesToRadians(this.startAngle), - end = degreesToRadians(this.endAngle), - radius = this.radius, - startX = fabric.util.cos(start) * radius, - startY = fabric.util.sin(start) * radius, - endX = fabric.util.cos(end) * radius, - endY = fabric.util.sin(end) * radius, - largeFlag = angle > 180 ? '1' : '0'; - svgString = [ - '\n' - ]; - } - return svgString; - }, - /* _TO_SVG_END_ */ - - /** + _toSVG: function() { + var svgString, x = 0, y = 0, + angle = (this.endAngle - this.startAngle) % 360; + + if (angle === 0) { + svgString = [ + '\n' + ]; + } + else { + var start = degreesToRadians(this.startAngle), + end = degreesToRadians(this.endAngle), + radius = this.radius, + startX = fabric.util.cos(start) * radius, + startY = fabric.util.sin(start) * radius, + endX = fabric.util.cos(end) * radius, + endY = fabric.util.sin(end) * radius, + largeFlag = angle > 180 ? '1' : '0'; + svgString = [ + '\n' + ]; + } + return svgString; + }, + /* _TO_SVG_END_ */ + + /** * @private * @param {CanvasRenderingContext2D} ctx context to render on */ - _render: function(ctx) { - ctx.beginPath(); - ctx.arc( - 0, - 0, - this.radius, - degreesToRadians(this.startAngle), - degreesToRadians(this.endAngle), - false - ); - this._renderPaintInOrder(ctx); - }, - - /** + _render: function(ctx) { + ctx.beginPath(); + ctx.arc( + 0, + 0, + this.radius, + degreesToRadians(this.startAngle), + degreesToRadians(this.endAngle), + false + ); + this._renderPaintInOrder(ctx); + }, + + /** * Returns horizontal radius of an object (according to how an object is scaled) * @return {Number} */ - getRadiusX: function() { - return this.get('radius') * this.get('scaleX'); - }, + getRadiusX: function() { + return this.get('radius') * this.get('scaleX'); + }, - /** + /** * Returns vertical radius of an object (according to how an object is scaled) * @return {Number} */ - getRadiusY: function() { - return this.get('radius') * this.get('scaleY'); - }, + getRadiusY: function() { + return this.get('radius') * this.get('scaleY'); + }, - /** + /** * Sets radius of an object (and updates width accordingly) * @return {fabric.Circle} thisArg */ - setRadius: function(value) { - this.radius = value; - return this.set('width', value * 2).set('height', value * 2); - }, -}); - -/* _FROM_SVG_START_ */ -/** + setRadius: function(value) { + this.radius = value; + return this.set('width', value * 2).set('height', value * 2); + }, + }); + + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) * @static * @memberOf fabric.Circle * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement */ -fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); + fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); -/** + /** * Returns {@link fabric.Circle} instance from an SVG element * @static * @memberOf fabric.Circle @@ -166,33 +166,35 @@ fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split( * @param {Object} [options] Options object * @throws {Error} If value of `r` attribute is missing or invalid */ -fabric.Circle.fromElement = function(element, callback) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); + fabric.Circle.fromElement = function(element, callback) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); - if (!isValidRadius(parsedAttributes)) { - throw new Error('value of `r` attribute is required and can not be negative'); - } + if (!isValidRadius(parsedAttributes)) { + throw new Error('value of `r` attribute is required and can not be negative'); + } - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; - callback(new fabric.Circle(parsedAttributes)); -}; + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; + callback(new fabric.Circle(parsedAttributes)); + }; -/** + /** * @private */ -function isValidRadius(attributes) { - return (('radius' in attributes) && (attributes.radius >= 0)); -} -/* _FROM_SVG_END_ */ + function isValidRadius(attributes) { + return (('radius' in attributes) && (attributes.radius >= 0)); + } + /* _FROM_SVG_END_ */ -/** + /** * Returns {@link fabric.Circle} instance from an object representation * @static * @memberOf fabric.Circle * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Circle.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Circle, object); -}; + fabric.Circle.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Circle, object); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/ellipse.class.js b/src/shapes/ellipse.class.js index 87b8101a0c9..a9224dc5889 100644 --- a/src/shapes/ellipse.class.js +++ b/src/shapes/ellipse.class.js @@ -1,145 +1,145 @@ -var fabric = exports.fabric || (exports.fabric = { }), - piBy2 = Math.PI * 2; - -/** +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + piBy2 = Math.PI * 2; + /** * Ellipse class * @class fabric.Ellipse * @extends fabric.Object * @return {fabric.Ellipse} thisArg * @see {@link fabric.Ellipse#initialize} for constructor definition */ -fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { + fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'ellipse', + type: 'ellipse', - /** + /** * Horizontal radius * @type Number * @default */ - rx: 0, + rx: 0, - /** + /** * Vertical radius * @type Number * @default */ - ry: 0, + ry: 0, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), - /** + /** * Constructor * @param {Object} [options] Options object * @return {fabric.Ellipse} thisArg */ - initialize: function(options) { - this.callSuper('initialize', options); - this.set('rx', options && options.rx || 0); - this.set('ry', options && options.ry || 0); - }, + initialize: function(options) { + this.callSuper('initialize', options); + this.set('rx', options && options.rx || 0); + this.set('ry', options && options.ry || 0); + }, - /** + /** * @private * @param {String} key * @param {*} value * @return {fabric.Ellipse} thisArg */ - _set: function(key, value) { - this.callSuper('_set', key, value); - switch (key) { + _set: function(key, value) { + this.callSuper('_set', key, value); + switch (key) { - case 'rx': - this.rx = value; - this.set('width', value * 2); - break; + case 'rx': + this.rx = value; + this.set('width', value * 2); + break; - case 'ry': - this.ry = value; - this.set('height', value * 2); - break; + case 'ry': + this.ry = value; + this.set('height', value * 2); + break; - } - return this; - }, + } + return this; + }, - /** + /** * Returns horizontal radius of an object (according to how an object is scaled) * @return {Number} */ - getRx: function() { - return this.get('rx') * this.get('scaleX'); - }, + getRx: function() { + return this.get('rx') * this.get('scaleX'); + }, - /** + /** * Returns Vertical radius of an object (according to how an object is scaled) * @return {Number} */ - getRy: function() { - return this.get('ry') * this.get('scaleY'); - }, + getRy: function() { + return this.get('ry') * this.get('scaleY'); + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - - /** + _toSVG: function() { + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + + /** * @private * @param {CanvasRenderingContext2D} ctx context to render on */ - _render: function(ctx) { - ctx.beginPath(); - ctx.save(); - ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); - ctx.arc( - 0, - 0, - this.rx, - 0, - piBy2, - false); - ctx.restore(); - this._renderPaintInOrder(ctx); - }, -}); - -/* _FROM_SVG_START_ */ -/** + _render: function(ctx) { + ctx.beginPath(); + ctx.save(); + ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); + ctx.arc( + 0, + 0, + this.rx, + 0, + piBy2, + false); + ctx.restore(); + this._renderPaintInOrder(ctx); + }, + }); + + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) * @static * @memberOf fabric.Ellipse * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement */ -fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); + fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); -/** + /** * Returns {@link fabric.Ellipse} instance from an SVG element * @static * @memberOf fabric.Ellipse @@ -147,23 +147,25 @@ fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.s * @param {Function} [callback] Options callback invoked after parsing is finished * @return {fabric.Ellipse} */ -fabric.Ellipse.fromElement = function(element, callback) { + fabric.Ellipse.fromElement = function(element, callback) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); + var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; - callback(new fabric.Ellipse(parsedAttributes)); -}; -/* _FROM_SVG_END_ */ + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; + callback(new fabric.Ellipse(parsedAttributes)); + }; + /* _FROM_SVG_END_ */ -/** + /** * Returns {@link fabric.Ellipse} instance from an object representation * @static * @memberOf fabric.Ellipse * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Ellipse.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Ellipse, object); -}; + fabric.Ellipse.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Ellipse, object); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index 1f02bb3976d..5016a3fb1ad 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -1,12 +1,12 @@ -var fabric = exports.fabric || (exports.fabric = {}), - multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, - invertTransform = fabric.util.invertTransform, - transformPoint = fabric.util.transformPoint, - applyTransformToObject = fabric.util.applyTransformToObject, - degreesToRadians = fabric.util.degreesToRadians, - clone = fabric.util.object.clone; - -/** +(function (global) { + var fabric = global.fabric || (global.fabric = {}), + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + invertTransform = fabric.util.invertTransform, + transformPoint = fabric.util.transformPoint, + applyTransformToObject = fabric.util.applyTransformToObject, + degreesToRadians = fabric.util.degreesToRadians, + clone = fabric.util.object.clone; + /** * Group class * @class fabric.Group * @extends fabric.Object @@ -14,64 +14,64 @@ var fabric = exports.fabric || (exports.fabric = {}), * @fires layout once layout completes * @see {@link fabric.Group#initialize} for constructor definition */ -fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { + fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { - /** + /** * Type of an object * @type string * @default */ - type: 'group', + type: 'group', - /** + /** * Specifies the **layout strategy** for instance * Used by `getLayoutStrategyResult` to calculate layout * `fit-content`, `fit-content-lazy`, `fixed`, `clip-path` are supported out of the box * @type string * @default */ - layout: 'fit-content', + layout: 'fit-content', - /** + /** * Width of stroke * @type Number */ - strokeWidth: 0, + strokeWidth: 0, - /** + /** * List of properties to consider when checking if state * of an object is changed (fabric.Object#hasStateChanged) * as well as for history (undo/redo) purposes * @type string[] */ - stateProperties: fabric.Object.prototype.stateProperties.concat('layout'), + stateProperties: fabric.Object.prototype.stateProperties.concat('layout'), - /** + /** * Used to optimize performance * set to `false` if you don't need contained objects to be targets of events * @default * @type boolean */ - subTargetCheck: false, + subTargetCheck: false, - /** + /** * Used to allow targeting of object inside groups. * set to true if you want to select an object inside a group.\ * **REQUIRES** `subTargetCheck` set to true * @default * @type boolean */ - interactive: false, + interactive: false, - /** + /** * Used internally to optimize performance * Once an object is selected, instance is rendered without the selected object. * This way instance is cached only once for the entire interaction with the selected object. * @private */ - _activeObjects: undefined, + _activeObjects: undefined, - /** + /** * Constructor * * @param {fabric.Object[]} [objects] instance objects @@ -79,418 +79,418 @@ fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @le * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane * @return {fabric.Group} thisArg */ - initialize: function (objects, options, objectsRelativeToGroup) { - this._objects = objects || []; - this._activeObjects = []; - this.__objectMonitor = this.__objectMonitor.bind(this); - this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true); - this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false); - this._firstLayoutDone = false; - // setting angle, skewX, skewY must occur after initial layout - this.callSuper('initialize', Object.assign({}, options, { angle: 0, skewX: 0, skewY: 0 })); - this.forEachObject(function (object) { - this.enterGroup(object, false); - }, this); - this._applyLayoutStrategy({ - type: 'initialization', - options: options, - objectsRelativeToGroup: objectsRelativeToGroup - }); - }, + initialize: function (objects, options, objectsRelativeToGroup) { + this._objects = objects || []; + this._activeObjects = []; + this.__objectMonitor = this.__objectMonitor.bind(this); + this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true); + this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false); + this._firstLayoutDone = false; + // setting angle, skewX, skewY must occur after initial layout + this.callSuper('initialize', Object.assign({}, options, { angle: 0, skewX: 0, skewY: 0 })); + this.forEachObject(function (object) { + this.enterGroup(object, false); + }, this); + this._applyLayoutStrategy({ + type: 'initialization', + options: options, + objectsRelativeToGroup: objectsRelativeToGroup + }); + }, - /** + /** * @private * @param {string} key * @param {*} value */ - _set: function (key, value) { - var prev = this[key]; - this.callSuper('_set', key, value); - if (key === 'canvas' && prev !== value) { - this.forEachObject(function (object) { - object._set(key, value); - }); - } - if (key === 'layout' && prev !== value) { - this._applyLayoutStrategy({ type: 'layout_change', layout: value, prevLayout: prev }); - } - if (key === 'interactive') { - this.forEachObject(this._watchObject.bind(this, value)); - } - return this; - }, + _set: function (key, value) { + var prev = this[key]; + this.callSuper('_set', key, value); + if (key === 'canvas' && prev !== value) { + this.forEachObject(function (object) { + object._set(key, value); + }); + } + if (key === 'layout' && prev !== value) { + this._applyLayoutStrategy({ type: 'layout_change', layout: value, prevLayout: prev }); + } + if (key === 'interactive') { + this.forEachObject(this._watchObject.bind(this, value)); + } + return this; + }, - /** + /** * @private */ - _shouldSetNestedCoords: function () { - return this.subTargetCheck; - }, + _shouldSetNestedCoords: function () { + return this.subTargetCheck; + }, - /** + /** * Override this method to enhance performance (for groups with a lot of objects). * If Overriding, be sure not pass illegal objects to group - it will break your app. * @private */ - _filterObjectsBeforeEnteringGroup: function (objects) { - return objects.filter(function (object, index, array) { - // can enter AND is the first occurrence of the object in the passed args (to prevent adding duplicates) - return this.canEnterGroup(object) && array.indexOf(object) === index; - }, this); - }, + _filterObjectsBeforeEnteringGroup: function (objects) { + return objects.filter(function (object, index, array) { + // can enter AND is the first occurrence of the object in the passed args (to prevent adding duplicates) + return this.canEnterGroup(object) && array.indexOf(object) === index; + }, this); + }, - /** + /** * Add objects * @param {...fabric.Object} objects */ - add: function () { - var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.from(arguments)); - fabric.Collection.add.call(this, allowedObjects, this._onObjectAdded); - this._onAfterObjectsChange('added', allowedObjects); - }, + add: function () { + var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.from(arguments)); + fabric.Collection.add.call(this, allowedObjects, this._onObjectAdded); + this._onAfterObjectsChange('added', allowedObjects); + }, - /** + /** * Inserts an object into collection at specified index * @param {fabric.Object | fabric.Object[]} objects Object to insert * @param {Number} index Index to insert object at */ - insertAt: function (objects, index) { - var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.isArray(objects) ? objects : [objects]); - fabric.Collection.insertAt.call(this, allowedObjects, index, this._onObjectAdded); - this._onAfterObjectsChange('added', allowedObjects); - }, + insertAt: function (objects, index) { + var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.isArray(objects) ? objects : [objects]); + fabric.Collection.insertAt.call(this, allowedObjects, index, this._onObjectAdded); + this._onAfterObjectsChange('added', allowedObjects); + }, - /** + /** * Remove objects * @param {...fabric.Object} objects * @returns {fabric.Object[]} removed objects */ - remove: function () { - var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); - this._onAfterObjectsChange('removed', removed); - return removed; - }, + remove: function () { + var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); + this._onAfterObjectsChange('removed', removed); + return removed; + }, - /** + /** * Remove all objects * @returns {fabric.Object[]} removed objects */ - removeAll: function () { - this._activeObjects = []; - return this.remove.apply(this, this._objects.slice()); - }, + removeAll: function () { + this._activeObjects = []; + return this.remove.apply(this, this._objects.slice()); + }, - /** + /** * invalidates layout on object modified * @private */ - __objectMonitor: function (opt) { - this._applyLayoutStrategy(Object.assign({}, opt, { - type: 'object_modified' - })); - this._set('dirty', true); - }, + __objectMonitor: function (opt) { + this._applyLayoutStrategy(Object.assign({}, opt, { + type: 'object_modified' + })); + this._set('dirty', true); + }, - /** + /** * keeps track of the selected objects * @private */ - __objectSelectionMonitor: function (selected, opt) { - var object = opt.target; - if (selected) { - this._activeObjects.push(object); - this._set('dirty', true); - } - else if (this._activeObjects.length > 0) { - var index = this._activeObjects.indexOf(object); - if (index > -1) { - this._activeObjects.splice(index, 1); + __objectSelectionMonitor: function (selected, opt) { + var object = opt.target; + if (selected) { + this._activeObjects.push(object); this._set('dirty', true); } - } - }, + else if (this._activeObjects.length > 0) { + var index = this._activeObjects.indexOf(object); + if (index > -1) { + this._activeObjects.splice(index, 1); + this._set('dirty', true); + } + } + }, - /** + /** * @private * @param {boolean} watch * @param {fabric.Object} object */ - _watchObject: function (watch, object) { - var directive = watch ? 'on' : 'off'; - // make sure we listen only once - watch && this._watchObject(false, object); - object[directive]('changed', this.__objectMonitor); - object[directive]('modified', this.__objectMonitor); - object[directive]('selected', this.__objectSelectionTracker); - object[directive]('deselected', this.__objectSelectionDisposer); - }, - - /** + _watchObject: function (watch, object) { + var directive = watch ? 'on' : 'off'; + // make sure we listen only once + watch && this._watchObject(false, object); + object[directive]('changed', this.__objectMonitor); + object[directive]('modified', this.__objectMonitor); + object[directive]('selected', this.__objectSelectionTracker); + object[directive]('deselected', this.__objectSelectionDisposer); + }, + + /** * Checks if object can enter group and logs relevant warnings * @private * @param {fabric.Object} object * @returns */ - canEnterGroup: function (object) { - if (object === this || this.isDescendantOf(object)) { - // prevent circular object tree - /* _DEV_MODE_START_ */ - console.error('fabric.Group: circular object trees are not supported, this call has no effect'); - /* _DEV_MODE_END_ */ - return false; - } - else if (this._objects.indexOf(object) !== -1) { - // is already in the objects array - /* _DEV_MODE_START_ */ - console.error('fabric.Group: duplicate objects are not supported inside group, this call has no effect'); - /* _DEV_MODE_END_ */ - return false; - } - return true; - }, + canEnterGroup: function (object) { + if (object === this || this.isDescendantOf(object)) { + // prevent circular object tree + /* _DEV_MODE_START_ */ + console.error('fabric.Group: circular object trees are not supported, this call has no effect'); + /* _DEV_MODE_END_ */ + return false; + } + else if (this._objects.indexOf(object) !== -1) { + // is already in the objects array + /* _DEV_MODE_START_ */ + console.error('fabric.Group: duplicate objects are not supported inside group, this call has no effect'); + /* _DEV_MODE_END_ */ + return false; + } + return true; + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane * @returns {boolean} true if object entered group */ - enterGroup: function (object, removeParentTransform) { - if (object.group) { - object.group.remove(object); - } - this._enterGroup(object, removeParentTransform); - return true; - }, + enterGroup: function (object, removeParentTransform) { + if (object.group) { + object.group.remove(object); + } + this._enterGroup(object, removeParentTransform); + return true; + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane */ - _enterGroup: function (object, removeParentTransform) { - if (removeParentTransform) { - // can this be converted to utils (sendObjectToPlane)? - applyTransformToObject( - object, - multiplyTransformMatrices( - invertTransform(this.calcTransformMatrix()), - object.calcTransformMatrix() - ) - ); - } - this._shouldSetNestedCoords() && object.setCoords(); - object._set('group', this); - object._set('canvas', this.canvas); - this.interactive && this._watchObject(true, object); - var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject(); - // if we are adding the activeObject in a group - if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) { - this._activeObjects.push(object); - } - }, + _enterGroup: function (object, removeParentTransform) { + if (removeParentTransform) { + // can this be converted to utils (sendObjectToPlane)? + applyTransformToObject( + object, + multiplyTransformMatrices( + invertTransform(this.calcTransformMatrix()), + object.calcTransformMatrix() + ) + ); + } + this._shouldSetNestedCoords() && object.setCoords(); + object._set('group', this); + object._set('canvas', this.canvas); + this.interactive && this._watchObject(true, object); + var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject(); + // if we are adding the activeObject in a group + if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) { + this._activeObjects.push(object); + } + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - exitGroup: function (object, removeParentTransform) { - this._exitGroup(object, removeParentTransform); - object._set('canvas', undefined); - }, + exitGroup: function (object, removeParentTransform) { + this._exitGroup(object, removeParentTransform); + object._set('canvas', undefined); + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - _exitGroup: function (object, removeParentTransform) { - object._set('group', undefined); - if (!removeParentTransform) { - applyTransformToObject( - object, - multiplyTransformMatrices( - this.calcTransformMatrix(), - object.calcTransformMatrix() - ) - ); - object.setCoords(); - } - this._watchObject(false, object); - var index = this._activeObjects.length > 0 ? this._activeObjects.indexOf(object) : -1; - if (index > -1) { - this._activeObjects.splice(index, 1); - } - }, + _exitGroup: function (object, removeParentTransform) { + object._set('group', undefined); + if (!removeParentTransform) { + applyTransformToObject( + object, + multiplyTransformMatrices( + this.calcTransformMatrix(), + object.calcTransformMatrix() + ) + ); + object.setCoords(); + } + this._watchObject(false, object); + var index = this._activeObjects.length > 0 ? this._activeObjects.indexOf(object) : -1; + if (index > -1) { + this._activeObjects.splice(index, 1); + } + }, - /** + /** * @private * @param {'added'|'removed'} type * @param {fabric.Object[]} targets */ - _onAfterObjectsChange: function (type, targets) { - this._applyLayoutStrategy({ - type: type, - targets: targets - }); - this._set('dirty', true); - }, + _onAfterObjectsChange: function (type, targets) { + this._applyLayoutStrategy({ + type: type, + targets: targets + }); + this._set('dirty', true); + }, - /** + /** * @private * @param {fabric.Object} object */ - _onObjectAdded: function (object) { - this.enterGroup(object, true); - object.fire('added', { target: this }); - }, + _onObjectAdded: function (object) { + this.enterGroup(object, true); + object.fire('added', { target: this }); + }, - /** + /** * @private * @param {fabric.Object} object */ - _onRelativeObjectAdded: function (object) { - this.enterGroup(object, false); - object.fire('added', { target: this }); - }, + _onRelativeObjectAdded: function (object) { + this.enterGroup(object, false); + object.fire('added', { target: this }); + }, - /** + /** * @private * @param {fabric.Object} object * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it */ - _onObjectRemoved: function (object, removeParentTransform) { - this.exitGroup(object, removeParentTransform); - object.fire('removed', { target: this }); - }, + _onObjectRemoved: function (object, removeParentTransform) { + this.exitGroup(object, removeParentTransform); + object.fire('removed', { target: this }); + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * needsItsOwnCache should be used when the object drawing method requires * a cache step. None of the fabric classes requires it. * Generally you do not cache objects in groups because the group is already cached. * @return {Boolean} */ - shouldCache: function() { - var ownCache = fabric.Object.prototype.shouldCache.call(this); - if (ownCache) { - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].willDrawShadow()) { - this.ownCaching = false; - return false; + shouldCache: function() { + var ownCache = fabric.Object.prototype.shouldCache.call(this); + if (ownCache) { + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].willDrawShadow()) { + this.ownCaching = false; + return false; + } } } - } - return ownCache; - }, + return ownCache; + }, - /** + /** * Check if this object or a child object will cast a shadow * @return {Boolean} */ - willDrawShadow: function() { - if (fabric.Object.prototype.willDrawShadow.call(this)) { - return true; - } - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].willDrawShadow()) { + willDrawShadow: function() { + if (fabric.Object.prototype.willDrawShadow.call(this)) { return true; } - } - return false; - }, + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].willDrawShadow()) { + return true; + } + } + return false; + }, - /** + /** * Check if instance or its group are caching, recursively up * @return {Boolean} */ - isOnACache: function () { - return this.ownCaching || (!!this.group && this.group.isOnACache()); - }, + isOnACache: function () { + return this.ownCaching || (!!this.group && this.group.isOnACache()); + }, - /** + /** * Execute the drawing operation for an object on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawObject: function(ctx) { - this._renderBackground(ctx); - for (var i = 0; i < this._objects.length; i++) { - this._objects[i].render(ctx); - } - this._drawClipPath(ctx, this.clipPath); - }, + drawObject: function(ctx) { + this._renderBackground(ctx); + for (var i = 0; i < this._objects.length; i++) { + this._objects[i].render(ctx); + } + this._drawClipPath(ctx, this.clipPath); + }, - /** + /** * Check if cache is dirty */ - isCacheDirty: function(skipCanvas) { - if (this.callSuper('isCacheDirty', skipCanvas)) { - return true; - } - if (!this.statefullCache) { - return false; - } - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].isCacheDirty(true)) { - if (this._cacheCanvas) { - // if this group has not a cache canvas there is nothing to clean - var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-x / 2, -y / 2, x, y); - } + isCacheDirty: function(skipCanvas) { + if (this.callSuper('isCacheDirty', skipCanvas)) { return true; } - } - return false; - }, + if (!this.statefullCache) { + return false; + } + for (var i = 0; i < this._objects.length; i++) { + if (this._objects[i].isCacheDirty(true)) { + if (this._cacheCanvas) { + // if this group has not a cache canvas there is nothing to clean + var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-x / 2, -y / 2, x, y); + } + return true; + } + } + return false; + }, - /** + /** * @override * @return {Boolean} */ - setCoords: function () { - this.callSuper('setCoords'); - this._shouldSetNestedCoords() && this.forEachObject(function (object) { - object.setCoords(); - }); - }, + setCoords: function () { + this.callSuper('setCoords'); + this._shouldSetNestedCoords() && this.forEachObject(function (object) { + object.setCoords(); + }); + }, - /** + /** * Renders instance on a given context * @param {CanvasRenderingContext2D} ctx context to render instance on */ - render: function (ctx) { - // used to inform objects not to double opacity - this._transformDone = true; - this.callSuper('render', ctx); - this._transformDone = false; - }, + render: function (ctx) { + // used to inform objects not to double opacity + this._transformDone = true; + this.callSuper('render', ctx); + this._transformDone = false; + }, - /** + /** * @public * @param {Partial & { layout?: string }} [context] pass values to use for layout calculations */ - triggerLayout: function (context) { - if (context && context.layout) { - context.prevLayout = this.layout; - this.layout = context.layout; - } - this._applyLayoutStrategy({ type: 'imperative', context: context }); - }, + triggerLayout: function (context) { + if (context && context.layout) { + context.prevLayout = this.layout; + this.layout = context.layout; + } + this._applyLayoutStrategy({ type: 'imperative', context: context }); + }, - /** + /** * @private * @param {fabric.Object} object * @param {fabric.Point} diff */ - _adjustObjectPosition: function (object, diff) { - object.set({ - left: object.left + diff.x, - top: object.top + diff.y, - }); - }, + _adjustObjectPosition: function (object, diff) { + object.set({ + left: object.left + diff.x, + top: object.top + diff.y, + }); + }, - /** + /** * initial layout logic: * calculate bbox of objects (if necessary) and translate it according to options received from the constructor (left, top, width, height) * so it is placed in the center of the bbox received from the constructor @@ -498,78 +498,78 @@ fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @le * @private * @param {LayoutContext} context */ - _applyLayoutStrategy: function (context) { - var isFirstLayout = context.type === 'initialization'; - if (!isFirstLayout && !this._firstLayoutDone) { - // reject layout requests before initialization layout - return; - } - var options = isFirstLayout && context.options; - var initialTransform = options && { - angle: options.angle || 0, - skewX: options.skewX || 0, - skewY: options.skewY || 0, - }; - var center = this.getRelativeCenterPoint(); - var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context); - if (result) { - // handle positioning - var newCenter = new fabric.Point(result.centerX, result.centerY); - var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0)); - var diff = transformPoint(vector, invertTransform(this.calcOwnMatrix()), true); - // set dimensions - this.set({ width: result.width, height: result.height }); - // adjust objects to account for new center - !context.objectsRelativeToGroup && this.forEachObject(function (object) { - this._adjustObjectPosition(object, diff); - }, this); - // clip path as well - !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned + _applyLayoutStrategy: function (context) { + var isFirstLayout = context.type === 'initialization'; + if (!isFirstLayout && !this._firstLayoutDone) { + // reject layout requests before initialization layout + return; + } + var options = isFirstLayout && context.options; + var initialTransform = options && { + angle: options.angle || 0, + skewX: options.skewX || 0, + skewY: options.skewY || 0, + }; + var center = this.getRelativeCenterPoint(); + var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context); + if (result) { + // handle positioning + var newCenter = new fabric.Point(result.centerX, result.centerY); + var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0)); + var diff = transformPoint(vector, invertTransform(this.calcOwnMatrix()), true); + // set dimensions + this.set({ width: result.width, height: result.height }); + // adjust objects to account for new center + !context.objectsRelativeToGroup && this.forEachObject(function (object) { + this._adjustObjectPosition(object, diff); + }, this); + // clip path as well + !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned && this._adjustObjectPosition(this.clipPath, diff); - if (!newCenter.eq(center) || initialTransform) { - // set position - this.setPositionByOrigin(newCenter, 'center', 'center'); + if (!newCenter.eq(center) || initialTransform) { + // set position + this.setPositionByOrigin(newCenter, 'center', 'center'); + initialTransform && this.set(initialTransform); + this.setCoords(); + } + } + else if (isFirstLayout) { + // fill `result` with initial values for the layout hook + result = { + centerX: center.x, + centerY: center.y, + width: this.width, + height: this.height, + }; initialTransform && this.set(initialTransform); - this.setCoords(); } - } - else if (isFirstLayout) { - // fill `result` with initial values for the layout hook - result = { - centerX: center.x, - centerY: center.y, - width: this.width, - height: this.height, - }; - initialTransform && this.set(initialTransform); - } - else { - // no `result` so we return - return; - } - // flag for next layouts - this._firstLayoutDone = true; - // fire layout hook and event (event will fire only for layouts after initialization layout) - this.onLayout(context, result); - this.fire('layout', { - context: context, - result: result, - diff: diff - }); - // recursive up - if (this.group && this.group._applyLayoutStrategy) { - // append the path recursion to context - if (!context.path) { - context.path = []; + else { + // no `result` so we return + return; } - context.path.push(this); - // all parents should invalidate their layout - this.group._applyLayoutStrategy(context); - } - }, + // flag for next layouts + this._firstLayoutDone = true; + // fire layout hook and event (event will fire only for layouts after initialization layout) + this.onLayout(context, result); + this.fire('layout', { + context: context, + result: result, + diff: diff + }); + // recursive up + if (this.group && this.group._applyLayoutStrategy) { + // append the path recursion to context + if (!context.path) { + context.path = []; + } + context.path.push(this); + // all parents should invalidate their layout + this.group._applyLayoutStrategy(context); + } + }, - /** + /** * Override this method to customize layout. * If you need to run logic once layout completes use `onLayout` * @public @@ -593,75 +593,75 @@ fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @le * @param {LayoutContext} context * @returns {LayoutResult | undefined} */ - getLayoutStrategyResult: function (layoutDirective, objects, context) { // eslint-disable-line no-unused-vars - // `fit-content-lazy` performance enhancement - // skip if instance had no objects before the `added` event because it may have kept layout after removing all previous objects - if (layoutDirective === 'fit-content-lazy' + getLayoutStrategyResult: function (layoutDirective, objects, context) { // eslint-disable-line no-unused-vars + // `fit-content-lazy` performance enhancement + // skip if instance had no objects before the `added` event because it may have kept layout after removing all previous objects + if (layoutDirective === 'fit-content-lazy' && context.type === 'added' && objects.length > context.targets.length) { - // calculate added objects' bbox with existing bbox - var addedObjects = context.targets.concat(this); - return this.prepareBoundingBox(layoutDirective, addedObjects, context); - } - else if (layoutDirective === 'fit-content' || layoutDirective === 'fit-content-lazy' + // calculate added objects' bbox with existing bbox + var addedObjects = context.targets.concat(this); + return this.prepareBoundingBox(layoutDirective, addedObjects, context); + } + else if (layoutDirective === 'fit-content' || layoutDirective === 'fit-content-lazy' || (layoutDirective === 'fixed' && (context.type === 'initialization' || context.type === 'imperative'))) { - return this.prepareBoundingBox(layoutDirective, objects, context); - } - else if (layoutDirective === 'clip-path' && this.clipPath) { - var clipPath = this.clipPath; - var clipPathSizeAfter = clipPath._getTransformedDimensions(); - if (clipPath.absolutePositioned && (context.type === 'initialization' || context.type === 'layout_change')) { - // we want the center point to exist in group's containing plane - var clipPathCenter = clipPath.getCenterPoint(); - if (this.group) { - // send point from canvas plane to group's containing plane - var inv = invertTransform(this.group.calcTransformMatrix()); - clipPathCenter = transformPoint(clipPathCenter, inv); - } - return { - centerX: clipPathCenter.x, - centerY: clipPathCenter.y, - width: clipPathSizeAfter.x, - height: clipPathSizeAfter.y, - }; + return this.prepareBoundingBox(layoutDirective, objects, context); } - else if (!clipPath.absolutePositioned) { - var center; - var clipPathRelativeCenter = clipPath.getRelativeCenterPoint(), - // we want the center point to exist in group's containing plane, so we send it upwards - clipPathCenter = transformPoint(clipPathRelativeCenter, this.calcOwnMatrix(), true); - if (context.type === 'initialization' || context.type === 'layout_change') { - var bbox = this.prepareBoundingBox(layoutDirective, objects, context) || {}; - center = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0); - return { - centerX: center.x + clipPathCenter.x, - centerY: center.y + clipPathCenter.y, - correctionX: bbox.correctionX - clipPathCenter.x, - correctionY: bbox.correctionY - clipPathCenter.y, - width: clipPath.width, - height: clipPath.height, - }; - } - else { - center = this.getRelativeCenterPoint(); + else if (layoutDirective === 'clip-path' && this.clipPath) { + var clipPath = this.clipPath; + var clipPathSizeAfter = clipPath._getTransformedDimensions(); + if (clipPath.absolutePositioned && (context.type === 'initialization' || context.type === 'layout_change')) { + // we want the center point to exist in group's containing plane + var clipPathCenter = clipPath.getCenterPoint(); + if (this.group) { + // send point from canvas plane to group's containing plane + var inv = invertTransform(this.group.calcTransformMatrix()); + clipPathCenter = transformPoint(clipPathCenter, inv); + } return { - centerX: center.x + clipPathCenter.x, - centerY: center.y + clipPathCenter.y, + centerX: clipPathCenter.x, + centerY: clipPathCenter.y, width: clipPathSizeAfter.x, height: clipPathSizeAfter.y, }; } + else if (!clipPath.absolutePositioned) { + var center; + var clipPathRelativeCenter = clipPath.getRelativeCenterPoint(), + // we want the center point to exist in group's containing plane, so we send it upwards + clipPathCenter = transformPoint(clipPathRelativeCenter, this.calcOwnMatrix(), true); + if (context.type === 'initialization' || context.type === 'layout_change') { + var bbox = this.prepareBoundingBox(layoutDirective, objects, context) || {}; + center = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0); + return { + centerX: center.x + clipPathCenter.x, + centerY: center.y + clipPathCenter.y, + correctionX: bbox.correctionX - clipPathCenter.x, + correctionY: bbox.correctionY - clipPathCenter.y, + width: clipPath.width, + height: clipPath.height, + }; + } + else { + center = this.getRelativeCenterPoint(); + return { + centerX: center.x + clipPathCenter.x, + centerY: center.y + clipPathCenter.y, + width: clipPathSizeAfter.x, + height: clipPathSizeAfter.y, + }; + } + } } - } - else if (layoutDirective === 'svg' && context.type === 'initialization') { - var bbox = this.getObjectsBoundingBox(objects, true) || {}; - return Object.assign(bbox, { - correctionX: -bbox.offsetX || 0, - correctionY: -bbox.offsetY || 0, - }); - } - }, + else if (layoutDirective === 'svg' && context.type === 'initialization') { + var bbox = this.getObjectsBoundingBox(objects, true) || {}; + return Object.assign(bbox, { + correctionX: -bbox.offsetX || 0, + correctionY: -bbox.offsetY || 0, + }); + } + }, - /** + /** * Override this method to customize layout. * A wrapper around {@link fabric.Group#getObjectsBoundingBox} * @public @@ -670,22 +670,22 @@ fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @le * @param {LayoutContext} context * @returns {LayoutResult | undefined} */ - prepareBoundingBox: function (layoutDirective, objects, context) { - if (context.type === 'initialization') { - return this.prepareInitialBoundingBox(layoutDirective, objects, context); - } - else if (context.type === 'imperative' && context.context) { - return Object.assign( - this.getObjectsBoundingBox(objects) || {}, - context.context - ); - } - else { - return this.getObjectsBoundingBox(objects); - } - }, + prepareBoundingBox: function (layoutDirective, objects, context) { + if (context.type === 'initialization') { + return this.prepareInitialBoundingBox(layoutDirective, objects, context); + } + else if (context.type === 'imperative' && context.context) { + return Object.assign( + this.getObjectsBoundingBox(objects) || {}, + context.context + ); + } + else { + return this.getObjectsBoundingBox(objects); + } + }, - /** + /** * Calculates center taking into account originX, originY while not being sure that width/height are initialized * @public * @param {string} layoutDirective @@ -693,124 +693,124 @@ fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @le * @param {LayoutContext} context * @returns {LayoutResult | undefined} */ - prepareInitialBoundingBox: function (layoutDirective, objects, context) { - var options = context.options || {}, - hasX = typeof options.left === 'number', - hasY = typeof options.top === 'number', - hasWidth = typeof options.width === 'number', - hasHeight = typeof options.height === 'number'; - - // performance enhancement - // skip layout calculation if bbox is defined - if ((hasX && hasY && hasWidth && hasHeight && context.objectsRelativeToGroup) || objects.length === 0) { - // return nothing to skip layout - return; - } - - var bbox = this.getObjectsBoundingBox(objects) || {}; - var width = hasWidth ? this.width : (bbox.width || 0), - height = hasHeight ? this.height : (bbox.height || 0), - calculatedCenter = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0), - origin = new fabric.Point(this.resolveOriginX(this.originX), this.resolveOriginY(this.originY)), - size = new fabric.Point(width, height), - strokeWidthVector = this._getTransformedDimensions({ width: 0, height: 0 }), - sizeAfter = this._getTransformedDimensions({ - width: width, - height: height, - strokeWidth: 0 - }), - bboxSizeAfter = this._getTransformedDimensions({ - width: bbox.width, - height: bbox.height, - strokeWidth: 0 - }), - rotationCorrection = new fabric.Point(0, 0); - - // calculate center and correction - var originT = origin.scalarAdd(0.5); - var originCorrection = sizeAfter.multiply(originT); - var centerCorrection = new fabric.Point( - hasWidth ? bboxSizeAfter.x / 2 : originCorrection.x, - hasHeight ? bboxSizeAfter.y / 2 : originCorrection.y - ); - var center = new fabric.Point( - hasX ? this.left - (sizeAfter.x + strokeWidthVector.x) * origin.x : calculatedCenter.x - centerCorrection.x, - hasY ? this.top - (sizeAfter.y + strokeWidthVector.y) * origin.y : calculatedCenter.y - centerCorrection.y - ); - var offsetCorrection = new fabric.Point( - hasX ? - center.x - calculatedCenter.x + bboxSizeAfter.x * (hasWidth ? 0.5 : 0) : - -(hasWidth ? (sizeAfter.x - strokeWidthVector.x) * 0.5 : sizeAfter.x * originT.x), - hasY ? - center.y - calculatedCenter.y + bboxSizeAfter.y * (hasHeight ? 0.5 : 0) : - -(hasHeight ? (sizeAfter.y - strokeWidthVector.y) * 0.5 : sizeAfter.y * originT.y) - ).add(rotationCorrection); - var correction = new fabric.Point( - hasWidth ? -sizeAfter.x / 2 : 0, - hasHeight ? -sizeAfter.y / 2 : 0 - ).add(offsetCorrection); - - return { - centerX: center.x, - centerY: center.y, - correctionX: correction.x, - correctionY: correction.y, - width: size.x, - height: size.y, - }; - }, + prepareInitialBoundingBox: function (layoutDirective, objects, context) { + var options = context.options || {}, + hasX = typeof options.left === 'number', + hasY = typeof options.top === 'number', + hasWidth = typeof options.width === 'number', + hasHeight = typeof options.height === 'number'; + + // performance enhancement + // skip layout calculation if bbox is defined + if ((hasX && hasY && hasWidth && hasHeight && context.objectsRelativeToGroup) || objects.length === 0) { + // return nothing to skip layout + return; + } - /** + var bbox = this.getObjectsBoundingBox(objects) || {}; + var width = hasWidth ? this.width : (bbox.width || 0), + height = hasHeight ? this.height : (bbox.height || 0), + calculatedCenter = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0), + origin = new fabric.Point(this.resolveOriginX(this.originX), this.resolveOriginY(this.originY)), + size = new fabric.Point(width, height), + strokeWidthVector = this._getTransformedDimensions({ width: 0, height: 0 }), + sizeAfter = this._getTransformedDimensions({ + width: width, + height: height, + strokeWidth: 0 + }), + bboxSizeAfter = this._getTransformedDimensions({ + width: bbox.width, + height: bbox.height, + strokeWidth: 0 + }), + rotationCorrection = new fabric.Point(0, 0); + + // calculate center and correction + var originT = origin.scalarAdd(0.5); + var originCorrection = sizeAfter.multiply(originT); + var centerCorrection = new fabric.Point( + hasWidth ? bboxSizeAfter.x / 2 : originCorrection.x, + hasHeight ? bboxSizeAfter.y / 2 : originCorrection.y + ); + var center = new fabric.Point( + hasX ? this.left - (sizeAfter.x + strokeWidthVector.x) * origin.x : calculatedCenter.x - centerCorrection.x, + hasY ? this.top - (sizeAfter.y + strokeWidthVector.y) * origin.y : calculatedCenter.y - centerCorrection.y + ); + var offsetCorrection = new fabric.Point( + hasX ? + center.x - calculatedCenter.x + bboxSizeAfter.x * (hasWidth ? 0.5 : 0) : + -(hasWidth ? (sizeAfter.x - strokeWidthVector.x) * 0.5 : sizeAfter.x * originT.x), + hasY ? + center.y - calculatedCenter.y + bboxSizeAfter.y * (hasHeight ? 0.5 : 0) : + -(hasHeight ? (sizeAfter.y - strokeWidthVector.y) * 0.5 : sizeAfter.y * originT.y) + ).add(rotationCorrection); + var correction = new fabric.Point( + hasWidth ? -sizeAfter.x / 2 : 0, + hasHeight ? -sizeAfter.y / 2 : 0 + ).add(offsetCorrection); + + return { + centerX: center.x, + centerY: center.y, + correctionX: correction.x, + correctionY: correction.y, + width: size.x, + height: size.y, + }; + }, + + /** * Calculate the bbox of objects relative to instance's containing plane * @public * @param {fabric.Object[]} objects * @returns {LayoutResult | null} bounding box */ - getObjectsBoundingBox: function (objects, ignoreOffset) { - if (objects.length === 0) { - return null; - } - var objCenter, sizeVector, min, max, a, b; - objects.forEach(function (object, i) { - objCenter = object.getRelativeCenterPoint(); - sizeVector = object._getTransformedDimensions().scalarDivideEquals(2); - if (object.angle) { - var rad = degreesToRadians(object.angle), - sin = Math.abs(fabric.util.sin(rad)), - cos = Math.abs(fabric.util.cos(rad)), - rx = sizeVector.x * cos + sizeVector.y * sin, - ry = sizeVector.x * sin + sizeVector.y * cos; - sizeVector = new fabric.Point(rx, ry); - } - a = objCenter.subtract(sizeVector); - b = objCenter.add(sizeVector); - if (i === 0) { - min = new fabric.Point(Math.min(a.x, b.x), Math.min(a.y, b.y)); - max = new fabric.Point(Math.max(a.x, b.x), Math.max(a.y, b.y)); - } - else { - min.setXY(Math.min(min.x, a.x, b.x), Math.min(min.y, a.y, b.y)); - max.setXY(Math.max(max.x, a.x, b.x), Math.max(max.y, a.y, b.y)); + getObjectsBoundingBox: function (objects, ignoreOffset) { + if (objects.length === 0) { + return null; } - }); + var objCenter, sizeVector, min, max, a, b; + objects.forEach(function (object, i) { + objCenter = object.getRelativeCenterPoint(); + sizeVector = object._getTransformedDimensions().scalarDivideEquals(2); + if (object.angle) { + var rad = degreesToRadians(object.angle), + sin = Math.abs(fabric.util.sin(rad)), + cos = Math.abs(fabric.util.cos(rad)), + rx = sizeVector.x * cos + sizeVector.y * sin, + ry = sizeVector.x * sin + sizeVector.y * cos; + sizeVector = new fabric.Point(rx, ry); + } + a = objCenter.subtract(sizeVector); + b = objCenter.add(sizeVector); + if (i === 0) { + min = new fabric.Point(Math.min(a.x, b.x), Math.min(a.y, b.y)); + max = new fabric.Point(Math.max(a.x, b.x), Math.max(a.y, b.y)); + } + else { + min.setXY(Math.min(min.x, a.x, b.x), Math.min(min.y, a.y, b.y)); + max.setXY(Math.max(max.x, a.x, b.x), Math.max(max.y, a.y, b.y)); + } + }); - var size = max.subtract(min), - relativeCenter = ignoreOffset ? size.scalarDivide(2) : min.midPointFrom(max), - // we send `relativeCenter` up to group's containing plane - offset = transformPoint(min, this.calcOwnMatrix()), - center = transformPoint(relativeCenter, this.calcOwnMatrix()); - - return { - offsetX: offset.x, - offsetY: offset.y, - centerX: center.x, - centerY: center.y, - width: size.x, - height: size.y, - }; - }, + var size = max.subtract(min), + relativeCenter = ignoreOffset ? size.scalarDivide(2) : min.midPointFrom(max), + // we send `relativeCenter` up to group's containing plane + offset = transformPoint(min, this.calcOwnMatrix()), + center = transformPoint(relativeCenter, this.calcOwnMatrix()); - /** + return { + offsetX: offset.x, + offsetY: offset.y, + centerX: center.x, + centerY: center.y, + width: size.x, + height: size.y, + }; + }, + + /** * Hook that is called once layout has completed. * Provided for layout customization, override if necessary. * Complements `getLayoutStrategyResult`, which is called at the beginning of layout. @@ -818,121 +818,121 @@ fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @le * @param {LayoutContext} context layout context * @param {LayoutResult} result layout result */ - onLayout: function (/* context, result */) { - // override by subclass - }, + onLayout: function (/* context, result */) { + // override by subclass + }, - /** + /** * * @private * @param {'toObject'|'toDatalessObject'} [method] * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output * @returns {fabric.Object[]} serialized objects */ - __serializeObjects: function (method, propertiesToInclude) { - var _includeDefaultValues = this.includeDefaultValues; - return this._objects - .filter(function (obj) { - return !obj.excludeFromExport; - }) - .map(function (obj) { - var originalDefaults = obj.includeDefaultValues; - obj.includeDefaultValues = _includeDefaultValues; - var data = obj[method || 'toObject'](propertiesToInclude); - obj.includeDefaultValues = originalDefaults; - //delete data.version; - return data; - }); - }, - - /** + __serializeObjects: function (method, propertiesToInclude) { + var _includeDefaultValues = this.includeDefaultValues; + return this._objects + .filter(function (obj) { + return !obj.excludeFromExport; + }) + .map(function (obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = _includeDefaultValues; + var data = obj[method || 'toObject'](propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + //delete data.version; + return data; + }); + }, + + /** * Returns object representation of an instance * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function (propertiesToInclude) { - var obj = this.callSuper('toObject', ['layout', 'subTargetCheck', 'interactive'].concat(propertiesToInclude)); - obj.objects = this.__serializeObjects('toObject', propertiesToInclude); - return obj; - }, + toObject: function (propertiesToInclude) { + var obj = this.callSuper('toObject', ['layout', 'subTargetCheck', 'interactive'].concat(propertiesToInclude)); + obj.objects = this.__serializeObjects('toObject', propertiesToInclude); + return obj; + }, - toString: function () { - return '#'; - }, + toString: function () { + return '#'; + }, - dispose: function () { - this._activeObjects = []; - this.forEachObject(function (object) { - this._watchObject(false, object); - object.dispose && object.dispose(); - }, this); - this.callSuper('dispose'); - }, + dispose: function () { + this._activeObjects = []; + this.forEachObject(function (object) { + this._watchObject(false, object); + object.dispose && object.dispose(); + }, this); + this.callSuper('dispose'); + }, - /* _TO_SVG_START_ */ + /* _TO_SVG_START_ */ - /** + /** * @private */ - _createSVGBgRect: function (reviver) { - if (!this.backgroundColor) { - return ''; - } - var fillStroke = fabric.Rect.prototype._toSVG.call(this, reviver); - var commons = fillStroke.indexOf('COMMON_PARTS'); - fillStroke[commons] = 'for="group" '; - return fillStroke.join(''); - }, + _createSVGBgRect: function (reviver) { + if (!this.backgroundColor) { + return ''; + } + var fillStroke = fabric.Rect.prototype._toSVG.call(this, reviver); + var commons = fillStroke.indexOf('COMMON_PARTS'); + fillStroke[commons] = 'for="group" '; + return fillStroke.join(''); + }, - /** + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - _toSVG: function (reviver) { - var svgString = ['\n']; - var bg = this._createSVGBgRect(reviver); - bg && svgString.push('\t\t', bg); - for (var i = 0; i < this._objects.length; i++) { - svgString.push('\t\t', this._objects[i].toSVG(reviver)); - } - svgString.push('\n'); - return svgString; - }, + _toSVG: function (reviver) { + var svgString = ['\n']; + var bg = this._createSVGBgRect(reviver); + bg && svgString.push('\t\t', bg); + for (var i = 0; i < this._objects.length; i++) { + svgString.push('\t\t', this._objects[i].toSVG(reviver)); + } + svgString.push('\n'); + return svgString; + }, - /** + /** * Returns styles-string for svg-export, specific version for group * @return {String} */ - getSvgStyles: function() { - var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? - 'opacity: ' + this.opacity + ';' : '', - visibility = this.visible ? '' : ' visibility: hidden;'; - return [ - opacity, - this.getSvgFilter(), - visibility - ].join(''); - }, - - /** + getSvgStyles: function() { + var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? + 'opacity: ' + this.opacity + ';' : '', + visibility = this.visible ? '' : ' visibility: hidden;'; + return [ + opacity, + this.getSvgFilter(), + visibility + ].join(''); + }, + + /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toClipPathSVG: function (reviver) { - var svgString = []; - var bg = this._createSVGBgRect(reviver); - bg && svgString.push('\t', bg); - for (var i = 0; i < this._objects.length; i++) { - svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); - } - return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); - }, - /* _TO_SVG_END_ */ -}); - -/** + toClipPathSVG: function (reviver) { + var svgString = []; + var bg = this._createSVGBgRect(reviver); + bg && svgString.push('\t', bg); + for (var i = 0; i < this._objects.length; i++) { + svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); + } + return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); + }, + /* _TO_SVG_END_ */ + }); + + /** * @todo support loading from svg * @private * @static @@ -940,14 +940,16 @@ fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @le * @param {Object} object Object to create a group from * @returns {Promise} */ -fabric.Group.fromObject = function(object) { - var objects = object.objects || [], - options = clone(object, true); - delete options.objects; - return Promise.all([ - fabric.util.enlivenObjects(objects), - fabric.util.enlivenObjectEnlivables(options) - ]).then(function (enlivened) { - return new fabric.Group(enlivened[0], Object.assign(options, enlivened[1]), true); - }); -}; + fabric.Group.fromObject = function(object) { + var objects = object.objects || [], + options = clone(object, true); + delete options.objects; + return Promise.all([ + fabric.util.enlivenObjects(objects), + fabric.util.enlivenObjectEnlivables(options) + ]).then(function (enlivened) { + return new fabric.Group(enlivened[0], Object.assign(options, enlivened[1]), true); + }); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js index b6d5eeb3c41..082a1a1e6b4 100644 --- a/src/shapes/image.class.js +++ b/src/shapes/image.class.js @@ -1,127 +1,127 @@ -var extend = fabric.util.object.extend, - fabric = exports.fabric || (exports.fabric = {}); -/** +(function(global) { + var fabric = global.fabric, extend = fabric.util.object.extend; + /** * Image class * @class fabric.Image * @extends fabric.Object * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} * @see {@link fabric.Image#initialize} for constructor definition */ -fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { + fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'image', + type: 'image', - /** + /** * Width of a stroke. * For image quality a stroke multiple of 2 gives better results. * @type Number * @default */ - strokeWidth: 0, + strokeWidth: 0, - /** + /** * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. * This allows for relative urls as image src. * @since 2.7.0 * @type Boolean * @default */ - srcFromAttribute: false, + srcFromAttribute: false, - /** + /** * private * contains last value of scaleX to detect * if the Image got resized after the last Render * @type Number */ - _lastScaleX: 1, + _lastScaleX: 1, - /** + /** * private * contains last value of scaleY to detect * if the Image got resized after the last Render * @type Number */ - _lastScaleY: 1, + _lastScaleY: 1, - /** + /** * private * contains last value of scaling applied by the apply filter chain * @type Number */ - _filterScalingX: 1, + _filterScalingX: 1, - /** + /** * private * contains last value of scaling applied by the apply filter chain * @type Number */ - _filterScalingY: 1, + _filterScalingY: 1, - /** + /** * minimum scale factor under which any resizeFilter is triggered to resize the image * 0 will disable the automatic resize. 1 will trigger automatically always. * number bigger than 1 are not implemented yet. * @type Number */ - minimumScaleTrigger: 0.5, + minimumScaleTrigger: 0.5, - /** + /** * List of properties to consider when checking if * state of an object is changed ({@link fabric.Object#hasStateChanged}) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), + stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), - /** + /** * List of properties to consider when checking if cache needs refresh * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty * and refreshed at the next render * @type Array */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), - /** + /** * key used to retrieve the texture representing this image * @since 2.0.0 * @type String * @default */ - cacheKey: '', + cacheKey: '', - /** + /** * Image crop in pixels from original image size. * @since 2.0.0 * @type Number * @default */ - cropX: 0, + cropX: 0, - /** + /** * Image crop in pixels from original image size. * @since 2.0.0 * @type Number * @default */ - cropY: 0, + cropY: 0, - /** + /** * Indicates whether this canvas will use image smoothing when painting this image. * Also influence if the cacheCanvas for this image uses imageSmoothing * @since 4.0.0-beta.11 * @type Boolean * @default */ - imageSmoothing: true, + imageSmoothing: true, - /** + /** * Constructor * Image can be initialized with any canvas drawable or a string. * The string should be a url and will be loaded as an image. @@ -131,23 +131,23 @@ fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.pr * @param {Object} [options] Options object * @return {fabric.Image} thisArg */ - initialize: function(element, options) { - options || (options = { }); - this.filters = []; - this.cacheKey = 'texture' + fabric.Object.__uid++; - this.callSuper('initialize', options); - this._initElement(element, options); - }, + initialize: function(element, options) { + options || (options = { }); + this.filters = []; + this.cacheKey = 'texture' + fabric.Object.__uid++; + this.callSuper('initialize', options); + this._initElement(element, options); + }, - /** + /** * Returns image element which this instance if based on * @return {HTMLImageElement} Image element */ - getElement: function() { - return this._element || {}; - }, + getElement: function() { + return this._element || {}; + }, - /** + /** * Sets image element for this instance to a specified one. * If filters defined they are applied to new image. * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area. @@ -156,204 +156,204 @@ fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.pr * @return {fabric.Image} thisArg * @chainable */ - setElement: function(element, options) { - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._element = element; - this._originalElement = element; - this._initConfig(options); - if (this.filters.length !== 0) { - this.applyFilters(); - } - // resizeFilters work on the already filtered copy. - // we need to apply resizeFilters AFTER normal filters. - // applyResizeFilters is run more often than normal filters - // and is triggered by user interactions rather than dev code - if (this.resizeFilter) { - this.applyResizeFilters(); - } - return this; - }, + setElement: function(element, options) { + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._element = element; + this._originalElement = element; + this._initConfig(options); + if (this.filters.length !== 0) { + this.applyFilters(); + } + // resizeFilters work on the already filtered copy. + // we need to apply resizeFilters AFTER normal filters. + // applyResizeFilters is run more often than normal filters + // and is triggered by user interactions rather than dev code + if (this.resizeFilter) { + this.applyResizeFilters(); + } + return this; + }, - /** + /** * Delete a single texture if in webgl mode */ - removeTexture: function(key) { - var backend = fabric.filterBackend; - if (backend && backend.evictCachesForKey) { - backend.evictCachesForKey(key); - } - }, + removeTexture: function(key) { + var backend = fabric.filterBackend; + if (backend && backend.evictCachesForKey) { + backend.evictCachesForKey(key); + } + }, - /** + /** * Delete textures, reference to elements and eventually JSDOM cleanup */ - dispose: function () { - this.callSuper('dispose'); - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._cacheContext = undefined; - ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { - fabric.util.cleanUpJsdomNode(this[element]); - this[element] = undefined; - }).bind(this)); - }, - - /** + dispose: function () { + this.callSuper('dispose'); + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._cacheContext = undefined; + ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { + fabric.util.cleanUpJsdomNode(this[element]); + this[element] = undefined; + }).bind(this)); + }, + + /** * Get the crossOrigin value (of the corresponding image element) */ - getCrossOrigin: function() { - return this._originalElement && (this._originalElement.crossOrigin || null); - }, + getCrossOrigin: function() { + return this._originalElement && (this._originalElement.crossOrigin || null); + }, - /** + /** * Returns original size of an image * @return {Object} Object with "width" and "height" properties */ - getOriginalSize: function() { - var element = this.getElement(); - return { - width: element.naturalWidth || element.width, - height: element.naturalHeight || element.height - }; - }, + getOriginalSize: function() { + var element = this.getElement(); + return { + width: element.naturalWidth || element.width, + height: element.naturalHeight || element.height + }; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _stroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } - var w = this.width / 2, h = this.height / 2; - ctx.beginPath(); - ctx.moveTo(-w, -h); - ctx.lineTo(w, -h); - ctx.lineTo(w, h); - ctx.lineTo(-w, h); - ctx.lineTo(-w, -h); - ctx.closePath(); - }, - - /** + _stroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } + var w = this.width / 2, h = this.height / 2; + ctx.beginPath(); + ctx.moveTo(-w, -h); + ctx.lineTo(w, -h); + ctx.lineTo(w, h); + ctx.lineTo(-w, h); + ctx.lineTo(-w, -h); + ctx.closePath(); + }, + + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - var filters = []; + toObject: function(propertiesToInclude) { + var filters = []; - this.filters.forEach(function(filterObj) { - if (filterObj) { - filters.push(filterObj.toObject()); - } - }); - var object = extend( - this.callSuper( - 'toObject', - ['cropX', 'cropY'].concat(propertiesToInclude) - ), { - src: this.getSrc(), - crossOrigin: this.getCrossOrigin(), - filters: filters, + this.filters.forEach(function(filterObj) { + if (filterObj) { + filters.push(filterObj.toObject()); + } }); - if (this.resizeFilter) { - object.resizeFilter = this.resizeFilter.toObject(); - } - return object; - }, + var object = extend( + this.callSuper( + 'toObject', + ['cropX', 'cropY'].concat(propertiesToInclude) + ), { + src: this.getSrc(), + crossOrigin: this.getCrossOrigin(), + filters: filters, + }); + if (this.resizeFilter) { + object.resizeFilter = this.resizeFilter.toObject(); + } + return object; + }, - /** + /** * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height. * @return {Boolean} */ - hasCrop: function() { - return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; - }, + hasCrop: function() { + return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var svgString = [], imageMarkup = [], strokeSvg, element = this._element, - x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; - if (!element) { - return []; - } - if (this.hasCrop()) { - var clipPathId = fabric.Object.__uid++; - svgString.push( - '\n', - '\t\n', - '\n' - ); - clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; - } - if (!this.imageSmoothing) { - imageRendering = '" image-rendering="optimizeSpeed'; - } - imageMarkup.push('\t\n'); - - if (this.stroke || this.strokeDashArray) { - var origFill = this.fill; - this.fill = null; - strokeSvg = [ - '\t\n' - ]; - this.fill = origFill; - } - if (this.paintFirst !== 'fill') { - svgString = svgString.concat(strokeSvg, imageMarkup); - } - else { - svgString = svgString.concat(imageMarkup, strokeSvg); - } - return svgString; - }, - /* _TO_SVG_END_ */ + _toSVG: function() { + var svgString = [], imageMarkup = [], strokeSvg, element = this._element, + x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; + if (!element) { + return []; + } + if (this.hasCrop()) { + var clipPathId = fabric.Object.__uid++; + svgString.push( + '\n', + '\t\n', + '\n' + ); + clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; + } + if (!this.imageSmoothing) { + imageRendering = '" image-rendering="optimizeSpeed'; + } + imageMarkup.push('\t\n'); + + if (this.stroke || this.strokeDashArray) { + var origFill = this.fill; + this.fill = null; + strokeSvg = [ + '\t\n' + ]; + this.fill = origFill; + } + if (this.paintFirst !== 'fill') { + svgString = svgString.concat(strokeSvg, imageMarkup); + } + else { + svgString = svgString.concat(imageMarkup, strokeSvg); + } + return svgString; + }, + /* _TO_SVG_END_ */ - /** + /** * Returns source of an image * @param {Boolean} filtered indicates if the src is needed for svg * @return {String} Source of an image */ - getSrc: function(filtered) { - var element = filtered ? this._element : this._originalElement; - if (element) { - if (element.toDataURL) { - return element.toDataURL(); - } + getSrc: function(filtered) { + var element = filtered ? this._element : this._originalElement; + if (element) { + if (element.toDataURL) { + return element.toDataURL(); + } - if (this.srcFromAttribute) { - return element.getAttribute('src'); + if (this.srcFromAttribute) { + return element.getAttribute('src'); + } + else { + return element.src; + } } else { - return element.src; + return this.src || ''; } - } - else { - return this.src || ''; - } - }, + }, - /** + /** * Sets source of an image * @param {String} src Source string (URL) * @param {Object} [options] Options object @@ -361,59 +361,59 @@ fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.pr * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes * @return {Promise} thisArg */ - setSrc: function(src, options) { - var _this = this; - return fabric.util.loadImage(src, options).then(function(img) { - _this.setElement(img, options); - _this._setWidthHeight(); - return _this; - }); - }, + setSrc: function(src, options) { + var _this = this; + return fabric.util.loadImage(src, options).then(function(img) { + _this.setElement(img, options); + _this._setWidthHeight(); + return _this; + }); + }, - /** + /** * Returns string representation of an instance * @return {String} String representation of an instance */ - toString: function() { - return '#'; - }, - - applyResizeFilters: function() { - var filter = this.resizeFilter, - minimumScale = this.minimumScaleTrigger, - objectScale = this.getTotalObjectScaling(), - scaleX = objectScale.x, - scaleY = objectScale.y, - elementToFilter = this._filteredEl || this._originalElement; - if (this.group) { - this.set('dirty', true); - } - if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { - this._element = elementToFilter; - this._filterScalingX = 1; - this._filterScalingY = 1; - this._lastScaleX = scaleX; - this._lastScaleY = scaleY; - return; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - var canvasEl = fabric.util.createCanvasElement(), - cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, - sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._lastScaleX = filter.scaleX = scaleX; - this._lastScaleY = filter.scaleY = scaleY; - fabric.filterBackend.applyFilters( - [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); - this._filterScalingX = canvasEl.width / this._originalElement.width; - this._filterScalingY = canvasEl.height / this._originalElement.height; - }, - - /** + toString: function() { + return '#'; + }, + + applyResizeFilters: function() { + var filter = this.resizeFilter, + minimumScale = this.minimumScaleTrigger, + objectScale = this.getTotalObjectScaling(), + scaleX = objectScale.x, + scaleY = objectScale.y, + elementToFilter = this._filteredEl || this._originalElement; + if (this.group) { + this.set('dirty', true); + } + if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { + this._element = elementToFilter; + this._filterScalingX = 1; + this._filterScalingY = 1; + this._lastScaleX = scaleX; + this._lastScaleY = scaleY; + return; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + var canvasEl = fabric.util.createCanvasElement(), + cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, + sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._lastScaleX = filter.scaleX = scaleX; + this._lastScaleY = filter.scaleY = scaleY; + fabric.filterBackend.applyFilters( + [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); + this._filterScalingX = canvasEl.width / this._originalElement.width; + this._filterScalingY = canvasEl.height / this._originalElement.height; + }, + + /** * Applies filters assigned to this image (from "filters" array) or from filter param * @method applyFilters * @param {Array} filters to be applied @@ -421,81 +421,81 @@ fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.pr * @return {thisArg} return the fabric.Image object * @chainable */ - applyFilters: function(filters) { + applyFilters: function(filters) { - filters = filters || this.filters || []; - filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); - this.set('dirty', true); - - // needs to clear out or WEBGL will not resize correctly - this.removeTexture(this.cacheKey + '_filtered'); + filters = filters || this.filters || []; + filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); + this.set('dirty', true); - if (filters.length === 0) { - this._element = this._originalElement; - this._filteredEl = null; - this._filterScalingX = 1; - this._filterScalingY = 1; - return this; - } + // needs to clear out or WEBGL will not resize correctly + this.removeTexture(this.cacheKey + '_filtered'); - var imgElement = this._originalElement, - sourceWidth = imgElement.naturalWidth || imgElement.width, - sourceHeight = imgElement.naturalHeight || imgElement.height; + if (filters.length === 0) { + this._element = this._originalElement; + this._filteredEl = null; + this._filterScalingX = 1; + this._filterScalingY = 1; + return this; + } - if (this._element === this._originalElement) { - // if the element is the same we need to create a new element - var canvasEl = fabric.util.createCanvasElement(); - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._filteredEl = canvasEl; - } - else { - // clear the existing element to get new filter data - // also dereference the eventual resized _element - this._element = this._filteredEl; - this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); - // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y - this._lastScaleX = 1; - this._lastScaleY = 1; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - fabric.filterBackend.applyFilters( - filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); - if (this._originalElement.width !== this._element.width || + var imgElement = this._originalElement, + sourceWidth = imgElement.naturalWidth || imgElement.width, + sourceHeight = imgElement.naturalHeight || imgElement.height; + + if (this._element === this._originalElement) { + // if the element is the same we need to create a new element + var canvasEl = fabric.util.createCanvasElement(); + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._filteredEl = canvasEl; + } + else { + // clear the existing element to get new filter data + // also dereference the eventual resized _element + this._element = this._filteredEl; + this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); + // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y + this._lastScaleX = 1; + this._lastScaleY = 1; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + fabric.filterBackend.applyFilters( + filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); + if (this._originalElement.width !== this._element.width || this._originalElement.height !== this._element.height) { - this._filterScalingX = this._element.width / this._originalElement.width; - this._filterScalingY = this._element.height / this._originalElement.height; - } - return this; - }, + this._filterScalingX = this._element.width / this._originalElement.width; + this._filterScalingY = this._element.height / this._originalElement.height; + } + return this; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { - this.applyResizeFilters(); - } - this._stroke(ctx); - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { + this.applyResizeFilters(); + } + this._stroke(ctx); + this._renderPaintInOrder(ctx); + }, - /** + /** * Paint the cached copy of the object on the target context. * it will set the imageSmoothing for the draw operation * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawCacheOnCanvas: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); - }, + drawCacheOnCanvas: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * needsItsOwnCache should be used when the object drawing method requires * a cache step. None of the fabric classes requires it. @@ -506,215 +506,215 @@ fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.pr * A full performance audit should be done. * @return {Boolean} */ - shouldCache: function() { - return this.needsItsOwnCache(); - }, - - _renderFill: function(ctx) { - var elementToDraw = this._element; - if (!elementToDraw) { - return; - } - var scaleX = this._filterScalingX, scaleY = this._filterScalingY, - w = this.width, h = this.height, min = Math.min, max = Math.max, - // crop values cannot be lesser than 0. - cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), - elWidth = elementToDraw.naturalWidth || elementToDraw.width, - elHeight = elementToDraw.naturalHeight || elementToDraw.height, - sX = cropX * scaleX, - sY = cropY * scaleY, - // the width height cannot exceed element width/height, starting from the crop offset. - sW = min(w * scaleX, elWidth - sX), - sH = min(h * scaleY, elHeight - sY), - x = -w / 2, y = -h / 2, - maxDestW = min(w, elWidth / scaleX - cropX), - maxDestH = min(h, elHeight / scaleY - cropY); - - elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); - }, + shouldCache: function() { + return this.needsItsOwnCache(); + }, - /** + _renderFill: function(ctx) { + var elementToDraw = this._element; + if (!elementToDraw) { + return; + } + var scaleX = this._filterScalingX, scaleY = this._filterScalingY, + w = this.width, h = this.height, min = Math.min, max = Math.max, + // crop values cannot be lesser than 0. + cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), + elWidth = elementToDraw.naturalWidth || elementToDraw.width, + elHeight = elementToDraw.naturalHeight || elementToDraw.height, + sX = cropX * scaleX, + sY = cropY * scaleY, + // the width height cannot exceed element width/height, starting from the crop offset. + sW = min(w * scaleX, elWidth - sX), + sH = min(h * scaleY, elHeight - sY), + x = -w / 2, y = -h / 2, + maxDestW = min(w, elWidth / scaleX - cropX), + maxDestH = min(h, elHeight / scaleY - cropY); + + elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); + }, + + /** * needed to check if image needs resize * @private */ - _needsResize: function() { - var scale = this.getTotalObjectScaling(); - return (scale.x !== this._lastScaleX || scale.y !== this._lastScaleY); - }, + _needsResize: function() { + var scale = this.getTotalObjectScaling(); + return (scale.x !== this._lastScaleX || scale.y !== this._lastScaleY); + }, - /** + /** * @private */ - _resetWidthHeight: function() { - this.set(this.getOriginalSize()); - }, + _resetWidthHeight: function() { + this.set(this.getOriginalSize()); + }, - /** + /** * The Image class's initialization method. This method is automatically * called by the constructor. * @private * @param {HTMLImageElement|String} element The element representing the image * @param {Object} [options] Options object */ - _initElement: function(element, options) { - this.setElement(fabric.util.getById(element), options); - fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); - }, + _initElement: function(element, options) { + this.setElement(fabric.util.getById(element), options); + fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); + }, - /** + /** * @private * @param {Object} [options] Options object */ - _initConfig: function(options) { - options || (options = { }); - this.setOptions(options); - this._setWidthHeight(options); - }, + _initConfig: function(options) { + options || (options = { }); + this.setOptions(options); + this._setWidthHeight(options); + }, - /** + /** * @private * Set the width and the height of the image object, using the element or the * options. * @param {Object} [options] Object with width/height properties */ - _setWidthHeight: function(options) { - options || (options = { }); - var el = this.getElement(); - this.width = options.width || el.naturalWidth || el.width || 0; - this.height = options.height || el.naturalHeight || el.height || 0; - }, + _setWidthHeight: function(options) { + options || (options = { }); + var el = this.getElement(); + this.width = options.width || el.naturalWidth || el.width || 0; + this.height = options.height || el.naturalHeight || el.height || 0; + }, - /** + /** * Calculate offset for center and scale factor for the image in order to respect * the preserveAspectRatio attribute * @private * @return {Object} */ - parsePreserveAspectRatioAttribute: function() { - var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), - rWidth = this._element.width, rHeight = this._element.height, - scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, - offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; - if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { - if (pAR.meetOrSlice === 'meet') { - scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); - offset = (pWidth - rWidth * scaleX) / 2; - if (pAR.alignX === 'Min') { - offsetLeft = -offset; - } - if (pAR.alignX === 'Max') { - offsetLeft = offset; + parsePreserveAspectRatioAttribute: function() { + var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), + rWidth = this._element.width, rHeight = this._element.height, + scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, + offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; + if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { + if (pAR.meetOrSlice === 'meet') { + scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); + offset = (pWidth - rWidth * scaleX) / 2; + if (pAR.alignX === 'Min') { + offsetLeft = -offset; + } + if (pAR.alignX === 'Max') { + offsetLeft = offset; + } + offset = (pHeight - rHeight * scaleY) / 2; + if (pAR.alignY === 'Min') { + offsetTop = -offset; + } + if (pAR.alignY === 'Max') { + offsetTop = offset; + } } - offset = (pHeight - rHeight * scaleY) / 2; - if (pAR.alignY === 'Min') { - offsetTop = -offset; - } - if (pAR.alignY === 'Max') { - offsetTop = offset; + if (pAR.meetOrSlice === 'slice') { + scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); + offset = rWidth - pWidth / scaleX; + if (pAR.alignX === 'Mid') { + cropX = offset / 2; + } + if (pAR.alignX === 'Max') { + cropX = offset; + } + offset = rHeight - pHeight / scaleY; + if (pAR.alignY === 'Mid') { + cropY = offset / 2; + } + if (pAR.alignY === 'Max') { + cropY = offset; + } + rWidth = pWidth / scaleX; + rHeight = pHeight / scaleY; } } - if (pAR.meetOrSlice === 'slice') { - scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); - offset = rWidth - pWidth / scaleX; - if (pAR.alignX === 'Mid') { - cropX = offset / 2; - } - if (pAR.alignX === 'Max') { - cropX = offset; - } - offset = rHeight - pHeight / scaleY; - if (pAR.alignY === 'Mid') { - cropY = offset / 2; - } - if (pAR.alignY === 'Max') { - cropY = offset; - } - rWidth = pWidth / scaleX; - rHeight = pHeight / scaleY; + else { + scaleX = pWidth / rWidth; + scaleY = pHeight / rHeight; } + return { + width: rWidth, + height: rHeight, + scaleX: scaleX, + scaleY: scaleY, + offsetLeft: offsetLeft, + offsetTop: offsetTop, + cropX: cropX, + cropY: cropY + }; } - else { - scaleX = pWidth / rWidth; - scaleY = pHeight / rHeight; - } - return { - width: rWidth, - height: rHeight, - scaleX: scaleX, - scaleY: scaleY, - offsetLeft: offsetLeft, - offsetTop: offsetTop, - cropX: cropX, - cropY: cropY - }; - } -}); - -/** + }); + + /** * Default CSS class name for canvas * @static * @type String * @default */ -fabric.Image.CSS_CANVAS = 'canvas-img'; + fabric.Image.CSS_CANVAS = 'canvas-img'; -/** + /** * Alias for getSrc * @static */ -fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; + fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; -/** + /** * Creates an instance of fabric.Image from its object representation * @static * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Image.fromObject = function(_object) { - var object = Object.assign({}, _object), - filters = object.filters, - resizeFilter = object.resizeFilter; - // the generic enliving will fail on filters for now - delete object.resizeFilter; - delete object.filters; - return Promise.all([ - fabric.util.loadImage(object.src, { crossOrigin: _object.crossOrigin }), - filters && fabric.util.enlivenObjects(filters, 'fabric.Image.filters'), - resizeFilter && fabric.util.enlivenObjects([resizeFilter], 'fabric.Image.filters'), - fabric.util.enlivenObjectEnlivables(object), - ]) - .then(function(imgAndFilters) { - object.filters = imgAndFilters[1] || []; - object.resizeFilter = imgAndFilters[2] && imgAndFilters[2][0]; - return new fabric.Image(imgAndFilters[0], Object.assign(object, imgAndFilters[3])); - }); -}; + fabric.Image.fromObject = function(_object) { + var object = Object.assign({}, _object), + filters = object.filters, + resizeFilter = object.resizeFilter; + // the generic enliving will fail on filters for now + delete object.resizeFilter; + delete object.filters; + return Promise.all([ + fabric.util.loadImage(object.src, { crossOrigin: _object.crossOrigin }), + filters && fabric.util.enlivenObjects(filters, 'fabric.Image.filters'), + resizeFilter && fabric.util.enlivenObjects([resizeFilter], 'fabric.Image.filters'), + fabric.util.enlivenObjectEnlivables(object), + ]) + .then(function(imgAndFilters) { + object.filters = imgAndFilters[1] || []; + object.resizeFilter = imgAndFilters[2] && imgAndFilters[2][0]; + return new fabric.Image(imgAndFilters[0], Object.assign(object, imgAndFilters[3])); + }); + }; -/** + /** * Creates an instance of fabric.Image from an URL string * @static * @param {String} url URL to create an image from * @param {Object} [imgOptions] Options object * @returns {Promise} */ -fabric.Image.fromURL = function(url, imgOptions) { - return fabric.util.loadImage(url, imgOptions || {}).then(function(img) { - return new fabric.Image(img, imgOptions); - }); -}; + fabric.Image.fromURL = function(url, imgOptions) { + return fabric.util.loadImage(url, imgOptions || {}).then(function(img) { + return new fabric.Image(img, imgOptions); + }); + }; -/* _FROM_SVG_START_ */ -/** + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement}) * @static * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement} */ -fabric.Image.ATTRIBUTE_NAMES = + fabric.Image.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( 'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ') ); -/** + /** * Returns {@link fabric.Image} instance from an SVG element * @static * @param {SVGElement} element Element to parse @@ -722,11 +722,13 @@ fabric.Image.ATTRIBUTE_NAMES = * @param {Function} callback Callback to execute when fabric.Image object is created * @return {fabric.Image} Instance of fabric.Image */ -fabric.Image.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); - fabric.Image.fromURL(parsedAttributes['xlink:href'], Object.assign({ }, options || { }, parsedAttributes)) - .then(function(fabricImage) { - callback(fabricImage); - }); -}; -/* _FROM_SVG_END_ */ + fabric.Image.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); + fabric.Image.fromURL(parsedAttributes['xlink:href'], Object.assign({ }, options || { }, parsedAttributes)) + .then(function(fabricImage) { + callback(fabricImage); + }); + }; + /* _FROM_SVG_END_ */ + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index d438a5ff0b7..b1cad0a1354 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -1,4 +1,6 @@ -/** +(function(global) { + var fabric = global.fabric; + /** * IText class (introduced in v1.4) Events are also fired with "text:" * prefix when observing canvas. * @class fabric.IText @@ -44,65 +46,65 @@ * Select line: triple click * */ -fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { + fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'i-text', + type: 'i-text', - /** + /** * Index where text selection starts (or where cursor is when there is no selection) * @type Number * @default */ - selectionStart: 0, + selectionStart: 0, - /** + /** * Index where text selection ends * @type Number * @default */ - selectionEnd: 0, + selectionEnd: 0, - /** + /** * Color of text selection * @type String * @default */ - selectionColor: 'rgba(17,119,255,0.3)', + selectionColor: 'rgba(17,119,255,0.3)', - /** + /** * Indicates whether text is in editing mode * @type Boolean * @default */ - isEditing: false, + isEditing: false, - /** + /** * Indicates whether a text can be edited * @type Boolean * @default */ - editable: true, + editable: true, - /** + /** * Border color of text object while it's in editing mode * @type String * @default */ - editingBorderColor: 'rgba(102,153,255,0.25)', + editingBorderColor: 'rgba(102,153,255,0.25)', - /** + /** * Width of cursor (in px) * @type Number * @default */ - cursorWidth: 2, + cursorWidth: 2, - /** + /** * Color of text cursor color in editing mode. * if not set (default) will take color from the text. * if set to a color value that fabric can understand, it will @@ -110,30 +112,30 @@ fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lend * @type String * @default */ - cursorColor: '', + cursorColor: '', - /** + /** * Delay between cursor blink (in ms) * @type Number * @default */ - cursorDelay: 1000, + cursorDelay: 1000, - /** + /** * Duration of cursor fadein (in ms) * @type Number * @default */ - cursorDuration: 600, + cursorDuration: 600, - /** + /** * Indicates whether internal text char widths can be cached * @type Boolean * @default */ - caching: true, + caching: true, - /** + /** * DOM container to append the hiddenTextarea. * An alternative to attaching to the document.body. * Useful to reduce laggish redraw of the full document.body tree and @@ -141,364 +143,364 @@ fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lend * @type HTMLElement * @default */ - hiddenTextareaContainer: null, + hiddenTextareaContainer: null, - /** + /** * @private */ - _reSpace: /\s|\n/, + _reSpace: /\s|\n/, - /** + /** * @private */ - _currentCursorOpacity: 0, + _currentCursorOpacity: 0, - /** + /** * @private */ - _selectionDirection: null, + _selectionDirection: null, - /** + /** * @private */ - _abortCursorAnimation: false, + _abortCursorAnimation: false, - /** + /** * @private */ - __widthOfSpace: [], + __widthOfSpace: [], - /** + /** * Helps determining when the text is in composition, so that the cursor * rendering is altered. */ - inCompositionMode: false, + inCompositionMode: false, - /** + /** * Constructor * @param {String} text Text string * @param {Object} [options] Options object * @return {fabric.IText} thisArg */ - initialize: function(text, options) { - this.callSuper('initialize', text, options); - this.initBehavior(); - }, + initialize: function(text, options) { + this.callSuper('initialize', text, options); + this.initBehavior(); + }, - /** + /** * While editing handle differently * @private * @param {string} key * @param {*} value */ - _set: function (key, value) { - if (this.isEditing && this._savedProps && key in this._savedProps) { - this._savedProps[key] = value; - } - else { - this.callSuper('_set', key, value); - } - }, + _set: function (key, value) { + if (this.isEditing && this._savedProps && key in this._savedProps) { + this._savedProps[key] = value; + } + else { + this.callSuper('_set', key, value); + } + }, - /** + /** * Sets selection start (left boundary of a selection) * @param {Number} index Index to set selection start to */ - setSelectionStart: function(index) { - index = Math.max(index, 0); - this._updateAndFire('selectionStart', index); - }, + setSelectionStart: function(index) { + index = Math.max(index, 0); + this._updateAndFire('selectionStart', index); + }, - /** + /** * Sets selection end (right boundary of a selection) * @param {Number} index Index to set selection end to */ - setSelectionEnd: function(index) { - index = Math.min(index, this.text.length); - this._updateAndFire('selectionEnd', index); - }, + setSelectionEnd: function(index) { + index = Math.min(index, this.text.length); + this._updateAndFire('selectionEnd', index); + }, - /** + /** * @private * @param {String} property 'selectionStart' or 'selectionEnd' * @param {Number} index new position of property */ - _updateAndFire: function(property, index) { - if (this[property] !== index) { - this._fireSelectionChanged(); - this[property] = index; - } - this._updateTextarea(); - }, + _updateAndFire: function(property, index) { + if (this[property] !== index) { + this._fireSelectionChanged(); + this[property] = index; + } + this._updateTextarea(); + }, - /** + /** * Fires the even of selection changed * @private */ - _fireSelectionChanged: function() { - this.fire('selection:changed'); - this.canvas && this.canvas.fire('text:selection:changed', { target: this }); - }, + _fireSelectionChanged: function() { + this.fire('selection:changed'); + this.canvas && this.canvas.fire('text:selection:changed', { target: this }); + }, - /** + /** * Initialize text dimensions. Render all text on given context * or on a offscreen canvas to get the text width with measureText. * Updates this.width and this.height with the proper values. * Does not return dimensions. * @private */ - initDimensions: function() { - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this.callSuper('initDimensions'); - }, + initDimensions: function() { + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this.callSuper('initDimensions'); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - render: function(ctx) { - this.clearContextTop(); - this.callSuper('render', ctx); - // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor - // the correct position but not at every cursor animation. - this.cursorOffsetCache = { }; - this.renderCursorOrSelection(); - }, + render: function(ctx) { + this.clearContextTop(); + this.callSuper('render', ctx); + // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor + // the correct position but not at every cursor animation. + this.cursorOffsetCache = { }; + this.renderCursorOrSelection(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - this.callSuper('_render', ctx); - }, + _render: function(ctx) { + this.callSuper('_render', ctx); + }, - /** + /** * Prepare and clean the contextTop */ - clearContextTop: function(skipRestore) { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; - } - var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - this.transform(ctx); - this._clearTextArea(ctx); - skipRestore || ctx.restore(); - }, - /** + clearContextTop: function(skipRestore) { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this.transform(ctx); + this._clearTextArea(ctx); + skipRestore || ctx.restore(); + }, + /** * Renders cursor or selection (depending on what exists) * it does on the contextTop. If contextTop is not available, do nothing. */ - renderCursorOrSelection: function() { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; - } - var boundaries = this._getCursorBoundaries(), - ctx = this.canvas.contextTop; - this.clearContextTop(true); - if (this.selectionStart === this.selectionEnd) { - this.renderCursor(boundaries, ctx); - } - else { - this.renderSelection(boundaries, ctx); - } - ctx.restore(); - }, + renderCursorOrSelection: function() { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var boundaries = this._getCursorBoundaries(), + ctx = this.canvas.contextTop; + this.clearContextTop(true); + if (this.selectionStart === this.selectionEnd) { + this.renderCursor(boundaries, ctx); + } + else { + this.renderSelection(boundaries, ctx); + } + ctx.restore(); + }, - _clearTextArea: function(ctx) { - // we add 4 pixel, to be sure to do not leave any pixel out - var width = this.width + 4, height = this.height + 4; - ctx.clearRect(-width / 2, -height / 2, width, height); - }, + _clearTextArea: function(ctx) { + // we add 4 pixel, to be sure to do not leave any pixel out + var width = this.width + 4, height = this.height + 4; + ctx.clearRect(-width / 2, -height / 2, width, height); + }, - /** + /** * Returns cursor boundaries (left, top, leftOffset, topOffset) * @private * @param {Array} chars Array of characters * @param {String} typeOfBoundaries */ - _getCursorBoundaries: function(position) { + _getCursorBoundaries: function(position) { - // left/top are left/top of entire text box - // leftOffset/topOffset are offset from that left/top point of a text box + // left/top are left/top of entire text box + // leftOffset/topOffset are offset from that left/top point of a text box - if (typeof position === 'undefined') { - position = this.selectionStart; - } - - var left = this._getLeftOffset(), - top = this._getTopOffset(), - offsets = this._getCursorBoundariesOffsets(position); - return { - left: left, - top: top, - leftOffset: offsets.left, - topOffset: offsets.top - }; - }, + if (typeof position === 'undefined') { + position = this.selectionStart; + } - /** + var left = this._getLeftOffset(), + top = this._getTopOffset(), + offsets = this._getCursorBoundariesOffsets(position); + return { + left: left, + top: top, + leftOffset: offsets.left, + topOffset: offsets.top + }; + }, + + /** * @private */ - _getCursorBoundariesOffsets: function(position) { - if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { - return this.cursorOffsetCache; - } - var lineLeftOffset, - lineIndex, - charIndex, - topOffset = 0, - leftOffset = 0, - boundaries, - cursorPosition = this.get2DCursorLocation(position); - charIndex = cursorPosition.charIndex; - lineIndex = cursorPosition.lineIndex; - for (var i = 0; i < lineIndex; i++) { - topOffset += this.getHeightOfLine(i); - } - lineLeftOffset = this._getLineLeftOffset(lineIndex); - var bound = this.__charBounds[lineIndex][charIndex]; - bound && (leftOffset = bound.left); - if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { - leftOffset -= this._getWidthOfCharSpacing(); - } - boundaries = { - top: topOffset, - left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), - }; - if (this.direction === 'rtl') { - if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { - boundaries.left *= -1; + _getCursorBoundariesOffsets: function(position) { + if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { + return this.cursorOffsetCache; } - else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { - boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); + var lineLeftOffset, + lineIndex, + charIndex, + topOffset = 0, + leftOffset = 0, + boundaries, + cursorPosition = this.get2DCursorLocation(position); + charIndex = cursorPosition.charIndex; + lineIndex = cursorPosition.lineIndex; + for (var i = 0; i < lineIndex; i++) { + topOffset += this.getHeightOfLine(i); } - else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { - boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); + lineLeftOffset = this._getLineLeftOffset(lineIndex); + var bound = this.__charBounds[lineIndex][charIndex]; + bound && (leftOffset = bound.left); + if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { + leftOffset -= this._getWidthOfCharSpacing(); } - } - this.cursorOffsetCache = boundaries; - return this.cursorOffsetCache; - }, + boundaries = { + top: topOffset, + left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), + }; + if (this.direction === 'rtl') { + if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { + boundaries.left *= -1; + } + else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { + boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); + } + else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { + boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); + } + } + this.cursorOffsetCache = boundaries; + return this.cursorOffsetCache; + }, - /** + /** * Renders cursor * @param {Object} boundaries * @param {CanvasRenderingContext2D} ctx transformed context to draw on */ - renderCursor: function(boundaries, ctx) { - var cursorLocation = this.get2DCursorLocation(), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), - multiplier = this.scaleX * this.canvas.getZoom(), - cursorWidth = this.cursorWidth / multiplier, - topOffset = boundaries.topOffset, - dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); - topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight + renderCursor: function(boundaries, ctx) { + var cursorLocation = this.get2DCursorLocation(), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), + multiplier = this.scaleX * this.canvas.getZoom(), + cursorWidth = this.cursorWidth / multiplier, + topOffset = boundaries.topOffset, + dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); + topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight - charHeight * (1 - this._fontSizeFraction); - if (this.inCompositionMode) { - this.renderSelection(boundaries, ctx); - } - ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); - ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; - ctx.fillRect( - boundaries.left + boundaries.leftOffset - cursorWidth / 2, - topOffset + boundaries.top + dy, - cursorWidth, - charHeight); - }, + if (this.inCompositionMode) { + this.renderSelection(boundaries, ctx); + } + ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); + ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; + ctx.fillRect( + boundaries.left + boundaries.leftOffset - cursorWidth / 2, + topOffset + boundaries.top + dy, + cursorWidth, + charHeight); + }, - /** + /** * Renders text selection * @param {Object} boundaries Object with left/top/leftOffset/topOffset * @param {CanvasRenderingContext2D} ctx transformed context to draw on */ - renderSelection: function(boundaries, ctx) { - - var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, - selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, - isJustify = this.textAlign.indexOf('justify') !== -1, - start = this.get2DCursorLocation(selectionStart), - end = this.get2DCursorLocation(selectionEnd), - startLine = start.lineIndex, - endLine = end.lineIndex, - startChar = start.charIndex < 0 ? 0 : start.charIndex, - endChar = end.charIndex < 0 ? 0 : end.charIndex; - - for (var i = startLine; i <= endLine; i++) { - var lineOffset = this._getLineLeftOffset(i) || 0, - lineHeight = this.getHeightOfLine(i), - realLineHeight = 0, boxStart = 0, boxEnd = 0; - - if (i === startLine) { - boxStart = this.__charBounds[startLine][startChar].left; - } - if (i >= startLine && i < endLine) { - boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? - } - else if (i === endLine) { - if (endChar === 0) { - boxEnd = this.__charBounds[endLine][endChar].left; + renderSelection: function(boundaries, ctx) { + + var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, + selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, + isJustify = this.textAlign.indexOf('justify') !== -1, + start = this.get2DCursorLocation(selectionStart), + end = this.get2DCursorLocation(selectionEnd), + startLine = start.lineIndex, + endLine = end.lineIndex, + startChar = start.charIndex < 0 ? 0 : start.charIndex, + endChar = end.charIndex < 0 ? 0 : end.charIndex; + + for (var i = startLine; i <= endLine; i++) { + var lineOffset = this._getLineLeftOffset(i) || 0, + lineHeight = this.getHeightOfLine(i), + realLineHeight = 0, boxStart = 0, boxEnd = 0; + + if (i === startLine) { + boxStart = this.__charBounds[startLine][startChar].left; } - else { - var charSpacing = this._getWidthOfCharSpacing(); - boxEnd = this.__charBounds[endLine][endChar - 1].left + if (i >= startLine && i < endLine) { + boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? + } + else if (i === endLine) { + if (endChar === 0) { + boxEnd = this.__charBounds[endLine][endChar].left; + } + else { + var charSpacing = this._getWidthOfCharSpacing(); + boxEnd = this.__charBounds[endLine][endChar - 1].left + this.__charBounds[endLine][endChar - 1].width - charSpacing; + } } - } - realLineHeight = lineHeight; - if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { - lineHeight /= this.lineHeight; - } - var drawStart = boundaries.left + lineOffset + boxStart, - drawWidth = boxEnd - boxStart, - drawHeight = lineHeight, extraTop = 0; - if (this.inCompositionMode) { - ctx.fillStyle = this.compositionColor || 'black'; - drawHeight = 1; - extraTop = lineHeight; - } - else { - ctx.fillStyle = this.selectionColor; - } - if (this.direction === 'rtl') { - if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { - drawStart = this.width - drawStart - drawWidth; + realLineHeight = lineHeight; + if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { + lineHeight /= this.lineHeight; } - else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { - drawStart = boundaries.left + lineOffset - boxEnd; + var drawStart = boundaries.left + lineOffset + boxStart, + drawWidth = boxEnd - boxStart, + drawHeight = lineHeight, extraTop = 0; + if (this.inCompositionMode) { + ctx.fillStyle = this.compositionColor || 'black'; + drawHeight = 1; + extraTop = lineHeight; } - else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { - drawStart = boundaries.left + lineOffset - boxEnd; + else { + ctx.fillStyle = this.selectionColor; } + if (this.direction === 'rtl') { + if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { + drawStart = this.width - drawStart - drawWidth; + } + else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { + drawStart = boundaries.left + lineOffset - boxEnd; + } + else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { + drawStart = boundaries.left + lineOffset - boxEnd; + } + } + ctx.fillRect( + drawStart, + boundaries.top + boundaries.topOffset + extraTop, + drawWidth, + drawHeight); + boundaries.topOffset += realLineHeight; } - ctx.fillRect( - drawStart, - boundaries.top + boundaries.topOffset + extraTop, - drawWidth, - drawHeight); - boundaries.topOffset += realLineHeight; - } - }, + }, - /** + /** * High level function to know the height of the cursor. * the currentChar is the one that precedes the cursor * Returns fontSize of char at the current cursor * Unused from the library, is for the end user * @return {Number} Character font size */ - getCurrentCharFontSize: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); - }, + getCurrentCharFontSize: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); + }, - /** + /** * High level function to know the color of the cursor. * the currentChar is the one that precedes the cursor * Returns color (fill) of char at the current cursor @@ -506,29 +508,30 @@ fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lend * Unused by the library, is for the end user * @return {String | fabric.Gradient | fabric.Pattern} Character color (fill) */ - getCurrentCharColor: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); - }, + getCurrentCharColor: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); + }, - /** + /** * Returns the cursor position for the getCurrent.. functions * @private */ - _getCurrentCharIndex: function() { - var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), - charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; - return { l: cursorPosition.lineIndex, c: charIndex }; - } -}); + _getCurrentCharIndex: function() { + var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), + charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; + return { l: cursorPosition.lineIndex, c: charIndex }; + } + }); -/** + /** * Returns fabric.IText instance from an object representation * @static * @memberOf fabric.IText * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.IText.fromObject = function(object) { - return fabric.Object._fromObject(fabric.IText, object, 'text'); -}; + fabric.IText.fromObject = function(object) { + return fabric.Object._fromObject(fabric.IText, object, 'text'); + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/line.class.js b/src/shapes/line.class.js index a948b3bf99c..012d86a9fd6 100644 --- a/src/shapes/line.class.js +++ b/src/shapes/line.class.js @@ -1,255 +1,256 @@ -var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; -/** + /** * Line class * @class fabric.Line * @extends fabric.Object * @see {@link fabric.Line#initialize} for constructor definition */ -fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { + fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'line', + type: 'line', - /** + /** * x value or first line edge * @type Number * @default */ - x1: 0, + x1: 0, - /** + /** * y value or first line edge * @type Number * @default */ - y1: 0, + y1: 0, - /** + /** * x value or second line edge * @type Number * @default */ - x2: 0, + x2: 0, - /** + /** * y value or second line edge * @type Number * @default */ - y2: 0, + y2: 0, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), - /** + /** * Constructor * @param {Array} [points] Array of points * @param {Object} [options] Options object * @return {fabric.Line} thisArg */ - initialize: function(points, options) { - if (!points) { - points = [0, 0, 0, 0]; - } + initialize: function(points, options) { + if (!points) { + points = [0, 0, 0, 0]; + } - this.callSuper('initialize', options); + this.callSuper('initialize', options); - this.set('x1', points[0]); - this.set('y1', points[1]); - this.set('x2', points[2]); - this.set('y2', points[3]); + this.set('x1', points[0]); + this.set('y1', points[1]); + this.set('x2', points[2]); + this.set('y2', points[3]); - this._setWidthHeight(options); - }, + this._setWidthHeight(options); + }, - /** + /** * @private * @param {Object} [options] Options */ - _setWidthHeight: function(options) { - options || (options = { }); + _setWidthHeight: function(options) { + options || (options = { }); - this.width = Math.abs(this.x2 - this.x1); - this.height = Math.abs(this.y2 - this.y1); + this.width = Math.abs(this.x2 - this.x1); + this.height = Math.abs(this.y2 - this.y1); - this.left = 'left' in options - ? options.left - : this._getLeftToOriginX(); + this.left = 'left' in options + ? options.left + : this._getLeftToOriginX(); - this.top = 'top' in options - ? options.top - : this._getTopToOriginY(); - }, + this.top = 'top' in options + ? options.top + : this._getTopToOriginY(); + }, - /** + /** * @private * @param {String} key * @param {*} value */ - _set: function(key, value) { - this.callSuper('_set', key, value); - if (typeof coordProps[key] !== 'undefined') { - this._setWidthHeight(); - } - return this; - }, + _set: function(key, value) { + this.callSuper('_set', key, value); + if (typeof coordProps[key] !== 'undefined') { + this._setWidthHeight(); + } + return this; + }, - /** + /** * @private * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line. */ - _getLeftToOriginX: makeEdgeToOriginGetter( - { // property names - origin: 'originX', - axis1: 'x1', - axis2: 'x2', - dimension: 'width' - }, - { // possible values of origin - nearest: 'left', - center: 'center', - farthest: 'right' - } - ), + _getLeftToOriginX: makeEdgeToOriginGetter( + { // property names + origin: 'originX', + axis1: 'x1', + axis2: 'x2', + dimension: 'width' + }, + { // possible values of origin + nearest: 'left', + center: 'center', + farthest: 'right' + } + ), - /** + /** * @private * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line. */ - _getTopToOriginY: makeEdgeToOriginGetter( - { // property names - origin: 'originY', - axis1: 'y1', - axis2: 'y2', - dimension: 'height' - }, - { // possible values of origin - nearest: 'top', - center: 'center', - farthest: 'bottom' - } - ), + _getTopToOriginY: makeEdgeToOriginGetter( + { // property names + origin: 'originY', + axis1: 'y1', + axis2: 'y2', + dimension: 'height' + }, + { // possible values of origin + nearest: 'top', + center: 'center', + farthest: 'bottom' + } + ), - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - ctx.beginPath(); + _render: function(ctx) { + ctx.beginPath(); - var p = this.calcLinePoints(); - ctx.moveTo(p.x1, p.y1); - ctx.lineTo(p.x2, p.y2); + var p = this.calcLinePoints(); + ctx.moveTo(p.x1, p.y1); + ctx.lineTo(p.x2, p.y2); - ctx.lineWidth = this.strokeWidth; + ctx.lineWidth = this.strokeWidth; - // TODO: test this - // make sure setting "fill" changes color of a line - // (by copying fillStyle to strokeStyle, since line is stroked, not filled) - var origStrokeStyle = ctx.strokeStyle; - ctx.strokeStyle = this.stroke || ctx.fillStyle; - this.stroke && this._renderStroke(ctx); - ctx.strokeStyle = origStrokeStyle; - }, + // TODO: test this + // make sure setting "fill" changes color of a line + // (by copying fillStyle to strokeStyle, since line is stroked, not filled) + var origStrokeStyle = ctx.strokeStyle; + ctx.strokeStyle = this.stroke || ctx.fillStyle; + this.stroke && this._renderStroke(ctx); + ctx.strokeStyle = origStrokeStyle; + }, - /** + /** * This function is an helper for svg import. it returns the center of the object in the svg * untransformed coordinates * @private * @return {Object} center point from element coordinates */ - _findCenterFromElement: function() { - return { - x: (this.x1 + this.x2) / 2, - y: (this.y1 + this.y2) / 2, - }; - }, + _findCenterFromElement: function() { + return { + x: (this.x1 + this.x2) / 2, + y: (this.y1 + this.y2) / 2, + }; + }, - /** + /** * Returns object representation of an instance * @method toObject * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); - }, + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); + }, - /* + /* * Calculate object dimensions from its properties * @private */ - _getNonTransformedDimensions: function() { - var dim = this.callSuper('_getNonTransformedDimensions'); - if (this.strokeLineCap === 'butt') { - if (this.width === 0) { - dim.y -= this.strokeWidth; + _getNonTransformedDimensions: function() { + var dim = this.callSuper('_getNonTransformedDimensions'); + if (this.strokeLineCap === 'butt') { + if (this.width === 0) { + dim.y -= this.strokeWidth; + } + if (this.height === 0) { + dim.x -= this.strokeWidth; + } } - if (this.height === 0) { - dim.x -= this.strokeWidth; - } - } - return dim; - }, + return dim; + }, - /** + /** * Recalculates line points given width and height * @private */ - calcLinePoints: function() { - var xMult = this.x1 <= this.x2 ? -1 : 1, - yMult = this.y1 <= this.y2 ? -1 : 1, - x1 = (xMult * this.width * 0.5), - y1 = (yMult * this.height * 0.5), - x2 = (xMult * this.width * -0.5), - y2 = (yMult * this.height * -0.5); - - return { - x1: x1, - x2: x2, - y1: y1, - y2: y2 - }; - }, + calcLinePoints: function() { + var xMult = this.x1 <= this.x2 ? -1 : 1, + yMult = this.y1 <= this.y2 ? -1 : 1, + x1 = (xMult * this.width * 0.5), + y1 = (yMult * this.height * 0.5), + x2 = (xMult * this.width * -0.5), + y2 = (yMult * this.height * -0.5); + + return { + x1: x1, + x2: x2, + y1: y1, + y2: y2 + }; + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var p = this.calcLinePoints(); - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ -}); - -/* _FROM_SVG_START_ */ -/** + _toSVG: function() { + var p = this.calcLinePoints(); + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); + + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement}) * @static * @memberOf fabric.Line * @see http://www.w3.org/TR/SVG/shapes.html#LineElement */ -fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); + fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); -/** + /** * Returns fabric.Line instance from an SVG element * @static * @memberOf fabric.Line @@ -257,57 +258,58 @@ fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.spli * @param {Object} [options] Options object * @param {Function} [callback] callback function invoked after parsing */ -fabric.Line.fromElement = function(element, callback, options) { - options = options || { }; - var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), - points = [ - parsedAttributes.x1 || 0, - parsedAttributes.y1 || 0, - parsedAttributes.x2 || 0, - parsedAttributes.y2 || 0 - ]; - callback(new fabric.Line(points, extend(parsedAttributes, options))); -}; -/* _FROM_SVG_END_ */ + fabric.Line.fromElement = function(element, callback, options) { + options = options || { }; + var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), + points = [ + parsedAttributes.x1 || 0, + parsedAttributes.y1 || 0, + parsedAttributes.x2 || 0, + parsedAttributes.y2 || 0 + ]; + callback(new fabric.Line(points, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ -/** + /** * Returns fabric.Line instance from an object representation * @static * @memberOf fabric.Line * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Line.fromObject = function(object) { - var options = clone(object, true); - options.points = [object.x1, object.y1, object.x2, object.y2]; - return fabric.Object._fromObject(fabric.Line, options, 'points').then(function(fabricLine) { - delete fabricLine.points; - return fabricLine; - }); -}; + fabric.Line.fromObject = function(object) { + var options = clone(object, true); + options.points = [object.x1, object.y1, object.x2, object.y2]; + return fabric.Object._fromObject(fabric.Line, options, 'points').then(function(fabricLine) { + delete fabricLine.points; + return fabricLine; + }); + }; -/** + /** * Produces a function that calculates distance from canvas edge to Line origin. */ -function makeEdgeToOriginGetter(propertyNames, originValues) { - var origin = propertyNames.origin, - axis1 = propertyNames.axis1, - axis2 = propertyNames.axis2, - dimension = propertyNames.dimension, - nearest = originValues.nearest, - center = originValues.center, - farthest = originValues.farthest; - - return function() { - switch (this.get(origin)) { - case nearest: - return Math.min(this.get(axis1), this.get(axis2)); - case center: - return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); - case farthest: - return Math.max(this.get(axis1), this.get(axis2)); - } - }; + function makeEdgeToOriginGetter(propertyNames, originValues) { + var origin = propertyNames.origin, + axis1 = propertyNames.axis1, + axis2 = propertyNames.axis2, + dimension = propertyNames.dimension, + nearest = originValues.nearest, + center = originValues.center, + farthest = originValues.farthest; + + return function() { + switch (this.get(origin)) { + case nearest: + return Math.min(this.get(axis1), this.get(axis2)); + case center: + return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); + case farthest: + return Math.max(this.get(axis1), this.get(axis2)); + } + }; -} + } +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index cb435b8e5cf..e6339730325 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1,13 +1,13 @@ -var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed, - capitalize = fabric.util.string.capitalize, - degreesToRadians = fabric.util.degreesToRadians, - objectCaching = !fabric.isLikelyNode, - ALIASING_LIMIT = 2; - -/** +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed, + capitalize = fabric.util.string.capitalize, + degreesToRadians = fabric.util.degreesToRadians, + objectCaching = !fabric.isLikelyNode, + ALIASING_LIMIT = 2; + /** * Root object class from which all 2d shape classes inherit from * @class fabric.Object * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#objects} @@ -42,203 +42,203 @@ var fabric = exports.fabric || (exports.fabric = { }), * @fires dragleave * @fires drop */ -fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { + fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { - /** + /** * Type of an object (rect, circle, path, etc.). * Note that this property is meant to be read-only and not meant to be modified. * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly. * @type String * @default */ - type: 'object', + type: 'object', - /** + /** * Horizontal origin of transformation of an object (one of "left", "right", "center") * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups * @type String * @default */ - originX: 'left', + originX: 'left', - /** + /** * Vertical origin of transformation of an object (one of "top", "bottom", "center") * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups * @type String * @default */ - originY: 'top', + originY: 'top', - /** + /** * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom} * @type Number * @default */ - top: 0, + top: 0, - /** + /** * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right} * @type Number * @default */ - left: 0, + left: 0, - /** + /** * Object width * @type Number * @default */ - width: 0, + width: 0, - /** + /** * Object height * @type Number * @default */ - height: 0, + height: 0, - /** + /** * Object scale factor (horizontal) * @type Number * @default */ - scaleX: 1, + scaleX: 1, - /** + /** * Object scale factor (vertical) * @type Number * @default */ - scaleY: 1, + scaleY: 1, - /** + /** * When true, an object is rendered as flipped horizontally * @type Boolean * @default */ - flipX: false, + flipX: false, - /** + /** * When true, an object is rendered as flipped vertically * @type Boolean * @default */ - flipY: false, + flipY: false, - /** + /** * Opacity of an object * @type Number * @default */ - opacity: 1, + opacity: 1, - /** + /** * Angle of rotation of an object (in degrees) * @type Number * @default */ - angle: 0, + angle: 0, - /** + /** * Angle of skew on x axes of an object (in degrees) * @type Number * @default */ - skewX: 0, + skewX: 0, - /** + /** * Angle of skew on y axes of an object (in degrees) * @type Number * @default */ - skewY: 0, + skewY: 0, - /** + /** * Size of object's controlling corners (in pixels) * @type Number * @default */ - cornerSize: 13, + cornerSize: 13, - /** + /** * Size of object's controlling corners when touch interaction is detected * @type Number * @default */ - touchCornerSize: 24, + touchCornerSize: 24, - /** + /** * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) * @type Boolean * @default */ - transparentCorners: true, + transparentCorners: true, - /** + /** * Default cursor value used when hovering over this object on canvas * @type String * @default */ - hoverCursor: null, + hoverCursor: null, - /** + /** * Default cursor value used when moving this object on canvas * @type String * @default */ - moveCursor: null, + moveCursor: null, - /** + /** * Padding between object and its controlling borders (in pixels) * @type Number * @default */ - padding: 0, + padding: 0, - /** + /** * Color of controlling borders of an object (when it's active) * @type String * @default */ - borderColor: 'rgb(178,204,255)', + borderColor: 'rgb(178,204,255)', - /** + /** * Array specifying dash pattern of an object's borders (hasBorder must be true) * @since 1.6.2 * @type Array */ - borderDashArray: null, + borderDashArray: null, - /** + /** * Color of controlling corners of an object (when it's active) * @type String * @default */ - cornerColor: 'rgb(178,204,255)', + cornerColor: 'rgb(178,204,255)', - /** + /** * Color of controlling corners of an object (when it's active and transparentCorners false) * @since 1.6.2 * @type String * @default */ - cornerStrokeColor: null, + cornerStrokeColor: null, - /** + /** * Specify style of control, 'rect' or 'circle' * @since 1.6.2 * @type String */ - cornerStyle: 'rect', + cornerStyle: 'rect', - /** + /** * Array specifying dash pattern of an object's control (hasBorder must be true) * @since 1.6.2 * @type Array */ - cornerDashArray: null, + cornerDashArray: null, - /** + /** * When true, this object will use center point as the origin of transformation * when being scaled via the controls. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). @@ -246,9 +246,9 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type Boolean * @default */ - centeredScaling: false, + centeredScaling: false, - /** + /** * When true, this object will use center point as the origin of transformation * when being rotated via the controls. * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). @@ -256,112 +256,112 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type Boolean * @default */ - centeredRotation: true, + centeredRotation: true, - /** + /** * Color of object's fill * takes css colors https://www.w3.org/TR/css-color-3/ * @type String * @default */ - fill: 'rgb(0,0,0)', + fill: 'rgb(0,0,0)', - /** + /** * Fill rule used to fill an object * accepted values are nonzero, evenodd * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead) * @type String * @default */ - fillRule: 'nonzero', + fillRule: 'nonzero', - /** + /** * Composite rule used for canvas globalCompositeOperation * @type String * @default */ - globalCompositeOperation: 'source-over', + globalCompositeOperation: 'source-over', - /** + /** * Background color of an object. * takes css colors https://www.w3.org/TR/css-color-3/ * @type String * @default */ - backgroundColor: '', + backgroundColor: '', - /** + /** * Selection Background color of an object. colored layer behind the object when it is active. * does not mix good with globalCompositeOperation methods. * @type String * @default */ - selectionBackgroundColor: '', + selectionBackgroundColor: '', - /** + /** * When defined, an object is rendered via stroke and this property specifies its color * takes css colors https://www.w3.org/TR/css-color-3/ * @type String * @default */ - stroke: null, + stroke: null, - /** + /** * Width of a stroke used to render this object * @type Number * @default */ - strokeWidth: 1, + strokeWidth: 1, - /** + /** * Array specifying dash pattern of an object's stroke (stroke must be defined) * @type Array */ - strokeDashArray: null, + strokeDashArray: null, - /** + /** * Line offset of an object's stroke * @type Number * @default */ - strokeDashOffset: 0, + strokeDashOffset: 0, - /** + /** * Line endings style of an object's stroke (one of "butt", "round", "square") * @type String * @default */ - strokeLineCap: 'butt', + strokeLineCap: 'butt', - /** + /** * Corner style of an object's stroke (one of "bevel", "round", "miter") * @type String * @default */ - strokeLineJoin: 'miter', + strokeLineJoin: 'miter', - /** + /** * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke * @type Number * @default */ - strokeMiterLimit: 4, + strokeMiterLimit: 4, - /** + /** * Shadow object representing shadow of this shape * @type fabric.Shadow * @default */ - shadow: null, + shadow: null, - /** + /** * Opacity of object's controlling borders when object is active and moving * @type Number * @default */ - borderOpacityWhenMoving: 0.4, + borderOpacityWhenMoving: 0.4, - /** + /** * Scale factor of object's controlling borders * bigger number will make a thicker border * border is 1, so this is basically a border thickness @@ -369,130 +369,130 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type Number * @default */ - borderScaleFactor: 1, + borderScaleFactor: 1, - /** + /** * Minimum allowed scale value of an object * @type Number * @default */ - minScaleLimit: 0, + minScaleLimit: 0, - /** + /** * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection). * But events still fire on it. * @type Boolean * @default */ - selectable: true, + selectable: true, - /** + /** * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4 * @type Boolean * @default */ - evented: true, + evented: true, - /** + /** * When set to `false`, an object is not rendered on canvas * @type Boolean * @default */ - visible: true, + visible: true, - /** + /** * When set to `false`, object's controls are not displayed and can not be used to manipulate object * @type Boolean * @default */ - hasControls: true, + hasControls: true, - /** + /** * When set to `false`, object's controlling borders are not rendered * @type Boolean * @default */ - hasBorders: true, + hasBorders: true, - /** + /** * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box * @type Boolean * @default */ - perPixelTargetFind: false, + perPixelTargetFind: false, - /** + /** * When `false`, default object's values are not included in its serialization * @type Boolean * @default */ - includeDefaultValues: true, + includeDefaultValues: true, - /** + /** * When `true`, object horizontal movement is locked * @type Boolean * @default */ - lockMovementX: false, + lockMovementX: false, - /** + /** * When `true`, object vertical movement is locked * @type Boolean * @default */ - lockMovementY: false, + lockMovementY: false, - /** + /** * When `true`, object rotation is locked * @type Boolean * @default */ - lockRotation: false, + lockRotation: false, - /** + /** * When `true`, object horizontal scaling is locked * @type Boolean * @default */ - lockScalingX: false, + lockScalingX: false, - /** + /** * When `true`, object vertical scaling is locked * @type Boolean * @default */ - lockScalingY: false, + lockScalingY: false, - /** + /** * When `true`, object horizontal skewing is locked * @type Boolean * @default */ - lockSkewingX: false, + lockSkewingX: false, - /** + /** * When `true`, object vertical skewing is locked * @type Boolean * @default */ - lockSkewingY: false, + lockSkewingY: false, - /** + /** * When `true`, object cannot be flipped by scaling into negative values * @type Boolean * @default */ - lockScalingFlip: false, + lockScalingFlip: false, - /** + /** * When `true`, object is not exported in OBJECT/JSON * @since 1.6.3 * @type Boolean * @default */ - excludeFromExport: false, + excludeFromExport: false, - /** + /** * When `true`, object is cached on an additional canvas. * When `false`, object is not cached unless necessary ( clipPath ) * default to true @@ -500,9 +500,9 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type Boolean * @default true */ - objectCaching: objectCaching, + objectCaching: objectCaching, - /** + /** * When `true`, object properties are checked for cache invalidation. In some particular * situation you may want this to be disabled ( spray brush, very big, groups) * or if your application does not allow you to modify properties for groups child you want @@ -512,9 +512,9 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type Boolean * @default false */ - statefullCache: false, + statefullCache: false, - /** + /** * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled * too much and will be redrawn with correct details at the end of scaling. * this setting is performance and application dependant. @@ -523,9 +523,9 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type Boolean * @default true */ - noScaleCache: true, + noScaleCache: true, - /** + /** * When `false`, the stoke width will scale with the object. * When `true`, the stroke will always match the exact pixel size entered for stroke width. * this Property does not work on Text classes or drawing call that uses strokeText,fillText methods @@ -536,17 +536,17 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type Boolean * @default false */ - strokeUniform: false, + strokeUniform: false, - /** + /** * When set to `true`, object's cache will be rerendered next render call. * since 1.7.0 * @type Boolean * @default true */ - dirty: true, + dirty: true, - /** + /** * keeps the value of the last hovered corner during mouse move. * 0 is no corner, or 'mt', 'ml', 'mtr' etc.. * It should be private, but there is no harm in using it as @@ -554,16 +554,16 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type number|string|any * @default 0 */ - __corner: 0, + __corner: 0, - /** + /** * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") * @type String * @default */ - paintFirst: 'fill', + paintFirst: 'fill', - /** + /** * When 'down', object is set to active on mousedown/touchstart * When 'up', object is set to active on mouseup/touchend * Experimental. Let's see if this breaks anything before supporting officially @@ -572,60 +572,60 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type String * @default 'down' */ - activeOn: 'down', + activeOn: 'down', - /** + /** * List of properties to consider when checking if state * of an object is changed (fabric.Object#hasStateChanged) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: ( - 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + + stateProperties: ( + 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + 'angle opacity fill globalCompositeOperation shadow visible backgroundColor ' + 'skewX skewY fillRule paintFirst clipPath strokeUniform' - ).split(' '), + ).split(' '), - /** + /** * List of properties to consider when checking if cache needs refresh * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty * and refreshed at the next render * @type Array */ - cacheProperties: ( - 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + + cacheProperties: ( + 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath' - ).split(' '), + ).split(' '), - /** + /** * List of properties to consider for animating colors. * @type Array */ - colorProperties: ( - 'fill stroke backgroundColor' - ).split(' '), + colorProperties: ( + 'fill stroke backgroundColor' + ).split(' '), - /** + /** * a fabricObject that, without stroke define a clipping area with their shape. filled in black * the clipPath object gets used when the object has rendered, and the context is placed in the center * of the object cacheCanvas. * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' * @type fabric.Object */ - clipPath: undefined, + clipPath: undefined, - /** + /** * Meaningful ONLY when the object is used as clipPath. * if true, the clipPath will make the object clip to the outside of the clipPath * since 2.4.0 * @type boolean * @default false */ - inverted: false, + inverted: false, - /** + /** * Meaningful ONLY when the object is used as clipPath. * if true, the clipPath will have its top and left relative to canvas, and will * not be influenced by the object transform. This will make the clipPath relative @@ -635,32 +635,32 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @type boolean * @default false */ - absolutePositioned: false, + absolutePositioned: false, - /** + /** * Constructor * @param {Object} [options] Options object */ - initialize: function(options) { - if (options) { - this.setOptions(options); - } - }, + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, - /** + /** * Create a the canvas used to keep the cached copy of the object * @private */ - _createCacheCanvas: function() { - this._cacheProperties = {}; - this._cacheCanvas = fabric.util.createCanvasElement(); - this._cacheContext = this._cacheCanvas.getContext('2d'); - this._updateCacheCanvas(); - // if canvas gets created, is empty, so dirty. - this.dirty = true; - }, + _createCacheCanvas: function() { + this._cacheProperties = {}; + this._cacheCanvas = fabric.util.createCanvasElement(); + this._cacheContext = this._cacheCanvas.getContext('2d'); + this._updateCacheCanvas(); + // if canvas gets created, is empty, so dirty. + this.dirty = true; + }, - /** + /** * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal * and each side do not cross fabric.cacheSideLimit * those numbers are configurable so that you can get as much detail as you want @@ -675,37 +675,37 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _limitCacheSize: function(dims) { - var perfLimitSizeTotal = fabric.perfLimitSizeTotal, - width = dims.width, height = dims.height, - max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; - if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { - if (width < min) { - dims.width = min; + _limitCacheSize: function(dims) { + var perfLimitSizeTotal = fabric.perfLimitSizeTotal, + width = dims.width, height = dims.height, + max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; + if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { + if (width < min) { + dims.width = min; + } + if (height < min) { + dims.height = min; + } + return dims; } - if (height < min) { - dims.height = min; + var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), + capValue = fabric.util.capValue, + x = capValue(min, limitedDims.x, max), + y = capValue(min, limitedDims.y, max); + if (width > x) { + dims.zoomX /= width / x; + dims.width = x; + dims.capped = true; + } + if (height > y) { + dims.zoomY /= height / y; + dims.height = y; + dims.capped = true; } return dims; - } - var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), - capValue = fabric.util.capValue, - x = capValue(min, limitedDims.x, max), - y = capValue(min, limitedDims.y, max); - if (width > x) { - dims.zoomX /= width / x; - dims.width = x; - dims.capped = true; - } - if (height > y) { - dims.zoomY /= height / y; - dims.height = y; - dims.capped = true; - } - return dims; - }, + }, - /** + /** * Return the dimension and the zoom level needed to create a cache canvas * big enough to host the object to be cached. * @private @@ -716,384 +716,384 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function() { - var objectScale = this.getTotalObjectScaling(), - // caculate dimensions without skewing - dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }), - neededX = dim.x * objectScale.x / this.scaleX, - neededY = dim.y * objectScale.y / this.scaleY; - return { - // for sure this ALIASING_LIMIT is slightly creating problem - // in situation in which the cache canvas gets an upper limit - // also objectScale contains already scaleX and scaleY - width: neededX + ALIASING_LIMIT, - height: neededY + ALIASING_LIMIT, - zoomX: objectScale.x, - zoomY: objectScale.y, - x: neededX, - y: neededY - }; - }, - - /** + _getCacheCanvasDimensions: function() { + var objectScale = this.getTotalObjectScaling(), + // caculate dimensions without skewing + dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }), + neededX = dim.x * objectScale.x / this.scaleX, + neededY = dim.y * objectScale.y / this.scaleY; + return { + // for sure this ALIASING_LIMIT is slightly creating problem + // in situation in which the cache canvas gets an upper limit + // also objectScale contains already scaleX and scaleY + width: neededX + ALIASING_LIMIT, + height: neededY + ALIASING_LIMIT, + zoomX: objectScale.x, + zoomY: objectScale.y, + x: neededX, + y: neededY + }; + }, + + /** * Update width and height of the canvas for cache * returns true or false if canvas needed resize. * @private * @return {Boolean} true if the canvas has been resized */ - _updateCacheCanvas: function() { - var targetCanvas = this.canvas; - if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { - var target = targetCanvas._currentTransform.target, - action = targetCanvas._currentTransform.action; - if (this === target && action.slice && action.slice(0, 5) === 'scale') { - return false; + _updateCacheCanvas: function() { + var targetCanvas = this.canvas; + if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { + var target = targetCanvas._currentTransform.target, + action = targetCanvas._currentTransform.action; + if (this === target && action.slice && action.slice(0, 5) === 'scale') { + return false; + } } - } - var canvas = this._cacheCanvas, - dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - minCacheSize = fabric.minCacheSideLimit, - width = dims.width, height = dims.height, drawingWidth, drawingHeight, - zoomX = dims.zoomX, zoomY = dims.zoomY, - dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, - zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, - shouldRedraw = dimensionsChanged || zoomChanged, - additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; - if (dimensionsChanged) { - var canvasWidth = this._cacheCanvas.width, - canvasHeight = this._cacheCanvas.height, - sizeGrowing = width > canvasWidth || height > canvasHeight, - sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && + var canvas = this._cacheCanvas, + dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + minCacheSize = fabric.minCacheSideLimit, + width = dims.width, height = dims.height, drawingWidth, drawingHeight, + zoomX = dims.zoomX, zoomY = dims.zoomY, + dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, + zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, + shouldRedraw = dimensionsChanged || zoomChanged, + additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; + if (dimensionsChanged) { + var canvasWidth = this._cacheCanvas.width, + canvasHeight = this._cacheCanvas.height, + sizeGrowing = width > canvasWidth || height > canvasHeight, + sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && canvasWidth > minCacheSize && canvasHeight > minCacheSize; - shouldResizeCanvas = sizeGrowing || sizeShrinking; - if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { - additionalWidth = width * 0.1; - additionalHeight = height * 0.1; + shouldResizeCanvas = sizeGrowing || sizeShrinking; + if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { + additionalWidth = width * 0.1; + additionalHeight = height * 0.1; + } } - } - if (this instanceof fabric.Text && this.path) { - shouldRedraw = true; - shouldResizeCanvas = true; - additionalWidth += this.getHeightOfLine(0) * this.zoomX; - additionalHeight += this.getHeightOfLine(0) * this.zoomY; - } - if (shouldRedraw) { - if (shouldResizeCanvas) { - canvas.width = Math.ceil(width + additionalWidth); - canvas.height = Math.ceil(height + additionalHeight); + if (this instanceof fabric.Text && this.path) { + shouldRedraw = true; + shouldResizeCanvas = true; + additionalWidth += this.getHeightOfLine(0) * this.zoomX; + additionalHeight += this.getHeightOfLine(0) * this.zoomY; } - else { - this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); - this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); - } - drawingWidth = dims.x / 2; - drawingHeight = dims.y / 2; - this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; - this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; - this.cacheWidth = width; - this.cacheHeight = height; - this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); - this._cacheContext.scale(zoomX, zoomY); - this.zoomX = zoomX; - this.zoomY = zoomY; - return true; - } - return false; - }, + if (shouldRedraw) { + if (shouldResizeCanvas) { + canvas.width = Math.ceil(width + additionalWidth); + canvas.height = Math.ceil(height + additionalHeight); + } + else { + this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); + this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); + } + drawingWidth = dims.x / 2; + drawingHeight = dims.y / 2; + this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; + this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; + this.cacheWidth = width; + this.cacheHeight = height; + this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); + this._cacheContext.scale(zoomX, zoomY); + this.zoomX = zoomX; + this.zoomY = zoomY; + return true; + } + return false; + }, - /** + /** * Sets object's properties from options * @param {Object} [options] Options object */ - setOptions: function(options) { - this._setOptions(options); - }, + setOptions: function(options) { + this._setOptions(options); + }, - /** + /** * Transforms context when rendering an object * @param {CanvasRenderingContext2D} ctx Context */ - transform: function(ctx) { - var needFullTransform = (this.group && !this.group._transformDone) || + transform: function(ctx) { + var needFullTransform = (this.group && !this.group._transformDone) || (this.group && this.canvas && ctx === this.canvas.contextTop); - var m = this.calcTransformMatrix(!needFullTransform); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - }, + var m = this.calcTransformMatrix(!needFullTransform); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + }, - /** + /** * Returns an object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - - object = { - type: this.type, - version: fabric.version, - originX: this.originX, - originY: this.originY, - left: toFixed(this.left, NUM_FRACTION_DIGITS), - top: toFixed(this.top, NUM_FRACTION_DIGITS), - width: toFixed(this.width, NUM_FRACTION_DIGITS), - height: toFixed(this.height, NUM_FRACTION_DIGITS), - fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, - stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, - strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), - strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, - strokeLineCap: this.strokeLineCap, - strokeDashOffset: this.strokeDashOffset, - strokeLineJoin: this.strokeLineJoin, - strokeUniform: this.strokeUniform, - strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), - scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), - scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), - angle: toFixed(this.angle, NUM_FRACTION_DIGITS), - flipX: this.flipX, - flipY: this.flipY, - opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), - shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, - visible: this.visible, - backgroundColor: this.backgroundColor, - fillRule: this.fillRule, - paintFirst: this.paintFirst, - globalCompositeOperation: this.globalCompositeOperation, - skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), - skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), - }; - - if (this.clipPath && !this.clipPath.excludeFromExport) { - object.clipPath = this.clipPath.toObject(propertiesToInclude); - object.clipPath.inverted = this.clipPath.inverted; - object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; - } + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + + object = { + type: this.type, + version: fabric.version, + originX: this.originX, + originY: this.originY, + left: toFixed(this.left, NUM_FRACTION_DIGITS), + top: toFixed(this.top, NUM_FRACTION_DIGITS), + width: toFixed(this.width, NUM_FRACTION_DIGITS), + height: toFixed(this.height, NUM_FRACTION_DIGITS), + fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, + stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, + strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), + strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, + strokeLineCap: this.strokeLineCap, + strokeDashOffset: this.strokeDashOffset, + strokeLineJoin: this.strokeLineJoin, + strokeUniform: this.strokeUniform, + strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), + scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), + scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), + angle: toFixed(this.angle, NUM_FRACTION_DIGITS), + flipX: this.flipX, + flipY: this.flipY, + opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), + shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, + visible: this.visible, + backgroundColor: this.backgroundColor, + fillRule: this.fillRule, + paintFirst: this.paintFirst, + globalCompositeOperation: this.globalCompositeOperation, + skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), + skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), + }; + + if (this.clipPath && !this.clipPath.excludeFromExport) { + object.clipPath = this.clipPath.toObject(propertiesToInclude); + object.clipPath.inverted = this.clipPath.inverted; + object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; + } - fabric.util.populateWithProperties(this, object, propertiesToInclude); - if (!this.includeDefaultValues) { - object = this._removeDefaultValues(object); - } + fabric.util.populateWithProperties(this, object, propertiesToInclude); + if (!this.includeDefaultValues) { + object = this._removeDefaultValues(object); + } - return object; - }, + return object; + }, - /** + /** * Returns (dataless) object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toDatalessObject: function(propertiesToInclude) { - // will be overwritten by subclasses - return this.toObject(propertiesToInclude); - }, + toDatalessObject: function(propertiesToInclude) { + // will be overwritten by subclasses + return this.toObject(propertiesToInclude); + }, - /** + /** * @private * @param {Object} object */ - _removeDefaultValues: function(object) { - var prototype = fabric.util.getKlass(object.type).prototype; - Object.keys(object).forEach(function(prop) { - if (prop === 'left' || prop === 'top' || prop === 'type') { - return; - } - if (object[prop] === prototype[prop]) { - delete object[prop]; - } - // basically a check for [] === [] - if (Array.isArray(object[prop]) && Array.isArray(prototype[prop]) + _removeDefaultValues: function(object) { + var prototype = fabric.util.getKlass(object.type).prototype; + Object.keys(object).forEach(function(prop) { + if (prop === 'left' || prop === 'top' || prop === 'type') { + return; + } + if (object[prop] === prototype[prop]) { + delete object[prop]; + } + // basically a check for [] === [] + if (Array.isArray(object[prop]) && Array.isArray(prototype[prop]) && object[prop].length === 0 && prototype[prop].length === 0) { - delete object[prop]; - } - }); + delete object[prop]; + } + }); - return object; - }, + return object; + }, - /** + /** * Returns a string representation of an instance * @return {String} */ - toString: function() { - return '#'; - }, + toString: function() { + return '#'; + }, - /** + /** * Return the object scale factor counting also the group scaling * @return {fabric.Point} */ - getObjectScaling: function() { - // if the object is a top level one, on the canvas, we go for simple aritmetic - // otherwise the complex method with angles will return approximations and decimals - // and will likely kill the cache when not needed - // https://github.com/fabricjs/fabric.js/issues/7157 - if (!this.group) { - return new fabric.Point(Math.abs(this.scaleX), Math.abs(this.scaleY)); - } - // if we are inside a group total zoom calculation is complex, we defer to generic matrices - var options = fabric.util.qrDecompose(this.calcTransformMatrix()); - return new fabric.Point(Math.abs(options.scaleX), Math.abs(options.scaleY)); - }, + getObjectScaling: function() { + // if the object is a top level one, on the canvas, we go for simple aritmetic + // otherwise the complex method with angles will return approximations and decimals + // and will likely kill the cache when not needed + // https://github.com/fabricjs/fabric.js/issues/7157 + if (!this.group) { + return new fabric.Point(Math.abs(this.scaleX), Math.abs(this.scaleY)); + } + // if we are inside a group total zoom calculation is complex, we defer to generic matrices + var options = fabric.util.qrDecompose(this.calcTransformMatrix()); + return new fabric.Point(Math.abs(options.scaleX), Math.abs(options.scaleY)); + }, - /** + /** * Return the object scale factor counting also the group scaling, zoom and retina * @return {Object} object with scaleX and scaleY properties */ - getTotalObjectScaling: function() { - var scale = this.getObjectScaling(); - if (this.canvas) { - var zoom = this.canvas.getZoom(); - var retina = this.canvas.getRetinaScaling(); - scale.scalarMultiplyEquals(zoom * retina); - } - return scale; - }, + getTotalObjectScaling: function() { + var scale = this.getObjectScaling(); + if (this.canvas) { + var zoom = this.canvas.getZoom(); + var retina = this.canvas.getRetinaScaling(); + scale.scalarMultiplyEquals(zoom * retina); + } + return scale; + }, - /** + /** * Return the object opacity counting also the group property * @return {Number} */ - getObjectOpacity: function() { - var opacity = this.opacity; - if (this.group) { - opacity *= this.group.getObjectOpacity(); - } - return opacity; - }, + getObjectOpacity: function() { + var opacity = this.opacity; + if (this.group) { + opacity *= this.group.getObjectOpacity(); + } + return opacity; + }, - /** + /** * Returns the object angle relative to canvas counting also the group property * @returns {number} */ - getTotalAngle: function () { - return this.group ? - fabric.util.qrDecompose(this.calcTransformMatrix()).angle : - this.angle; - }, + getTotalAngle: function () { + return this.group ? + fabric.util.qrDecompose(this.calcTransformMatrix()).angle : + this.angle; + }, - /** + /** * @private * @param {String} key * @param {*} value * @return {fabric.Object} thisArg */ - _set: function(key, value) { - var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), - isChanged = this[key] !== value, groupNeedsUpdate = false; + _set: function(key, value) { + var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), + isChanged = this[key] !== value, groupNeedsUpdate = false; - if (shouldConstrainValue) { - value = this._constrainScale(value); - } - if (key === 'scaleX' && value < 0) { - this.flipX = !this.flipX; - value *= -1; - } - else if (key === 'scaleY' && value < 0) { - this.flipY = !this.flipY; - value *= -1; - } - else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { - value = new fabric.Shadow(value); - } - else if (key === 'dirty' && this.group) { - this.group.set('dirty', value); - } + if (shouldConstrainValue) { + value = this._constrainScale(value); + } + if (key === 'scaleX' && value < 0) { + this.flipX = !this.flipX; + value *= -1; + } + else if (key === 'scaleY' && value < 0) { + this.flipY = !this.flipY; + value *= -1; + } + else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { + value = new fabric.Shadow(value); + } + else if (key === 'dirty' && this.group) { + this.group.set('dirty', value); + } - this[key] = value; + this[key] = value; - if (isChanged) { - groupNeedsUpdate = this.group && this.group.isOnACache(); - if (this.cacheProperties.indexOf(key) > -1) { - this.dirty = true; - groupNeedsUpdate && this.group.set('dirty', true); - } - else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { - this.group.set('dirty', true); + if (isChanged) { + groupNeedsUpdate = this.group && this.group.isOnACache(); + if (this.cacheProperties.indexOf(key) > -1) { + this.dirty = true; + groupNeedsUpdate && this.group.set('dirty', true); + } + else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { + this.group.set('dirty', true); + } } - } - return this; - }, + return this; + }, - /** + /** * Retrieves viewportTransform from Object's canvas if possible * @method getViewportTransform * @memberOf fabric.Object.prototype * @return {Array} */ - getViewportTransform: function() { - if (this.canvas && this.canvas.viewportTransform) { - return this.canvas.viewportTransform; - } - return fabric.iMatrix.concat(); - }, + getViewportTransform: function() { + if (this.canvas && this.canvas.viewportTransform) { + return this.canvas.viewportTransform; + } + return fabric.iMatrix.concat(); + }, - /* + /* * @private * return if the object would be visible in rendering * @memberOf fabric.Object.prototype * @return {Boolean} */ - isNotVisible: function() { - return this.opacity === 0 || + isNotVisible: function() { + return this.opacity === 0 || (!this.width && !this.height && this.strokeWidth === 0) || !this.visible; - }, + }, - /** + /** * Renders an object on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - render: function(ctx) { - // do not render if width/height are zeros or object is not visible - if (this.isNotVisible()) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - ctx.save(); - this._setupCompositeOperation(ctx); - this.drawSelectionBackground(ctx); - this.transform(ctx); - this._setOpacity(ctx); - this._setShadow(ctx, this); - if (this.shouldCache()) { - this.renderCache(); - this.drawCacheOnCanvas(ctx); - } - else { - this._removeCacheCanvas(); - this.dirty = false; - this.drawObject(ctx); - if (this.objectCaching && this.statefullCache) { - this.saveState({ propertySet: 'cacheProperties' }); + render: function(ctx) { + // do not render if width/height are zeros or object is not visible + if (this.isNotVisible()) { + return; } - } - ctx.restore(); - }, + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + ctx.save(); + this._setupCompositeOperation(ctx); + this.drawSelectionBackground(ctx); + this.transform(ctx); + this._setOpacity(ctx); + this._setShadow(ctx, this); + if (this.shouldCache()) { + this.renderCache(); + this.drawCacheOnCanvas(ctx); + } + else { + this._removeCacheCanvas(); + this.dirty = false; + this.drawObject(ctx); + if (this.objectCaching && this.statefullCache) { + this.saveState({ propertySet: 'cacheProperties' }); + } + } + ctx.restore(); + }, - renderCache: function(options) { - options = options || {}; - if (!this._cacheCanvas || !this._cacheContext) { - this._createCacheCanvas(); - } - if (this.isCacheDirty()) { - this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); - this.drawObject(this._cacheContext, options.forClipping); - this.dirty = false; - } - }, + renderCache: function(options) { + options = options || {}; + if (!this._cacheCanvas || !this._cacheContext) { + this._createCacheCanvas(); + } + if (this.isCacheDirty()) { + this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); + this.drawObject(this._cacheContext, options.forClipping); + this.dirty = false; + } + }, - /** + /** * Remove cacheCanvas and its dimensions from the objects */ - _removeCacheCanvas: function() { - this._cacheCanvas = null; - this._cacheContext = null; - this.cacheWidth = 0; - this.cacheHeight = 0; - }, + _removeCacheCanvas: function() { + this._cacheCanvas = null; + this._cacheContext = null; + this.cacheWidth = 0; + this.cacheHeight = 0; + }, - /** + /** * return true if the object will draw a stroke * Does not consider text styles. This is just a shortcut used at rendering time * We want it to be an approximation and be fast. @@ -1103,11 +1103,11 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @since 3.0.0 * @returns Boolean */ - hasStroke: function() { - return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; - }, + hasStroke: function() { + return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; + }, - /** + /** * return true if the object will draw a fill * Does not consider text styles. This is just a shortcut used at rendering time * We want it to be an approximation and be fast. @@ -1117,11 +1117,11 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @since 3.0.0 * @returns Boolean */ - hasFill: function() { - return this.fill && this.fill !== 'transparent'; - }, + hasFill: function() { + return this.fill && this.fill !== 'transparent'; + }, - /** + /** * When set to `true`, force the object to have its own cache, even if it is inside a group * it may be needed when your object behave in a particular way on the cache and always needs * its own isolated canvas to render correctly. @@ -1129,18 +1129,18 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * since 1.7.12 * @returns Boolean */ - needsItsOwnCache: function() { - if (this.paintFirst === 'stroke' && + needsItsOwnCache: function() { + if (this.paintFirst === 'stroke' && this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') { - return true; - } - if (this.clipPath) { - return true; - } - return false; - }, + return true; + } + if (this.clipPath) { + return true; + } + return false; + }, - /** + /** * Decide if the object should cache or not. Create its own cache level * objectCaching is a global flag, wins over everything * needsItsOwnCache should be used when the object drawing method requires @@ -1149,391 +1149,391 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * Read as: cache if is needed, or if the feature is enabled but we are not already caching. * @return {Boolean} */ - shouldCache: function() { - this.ownCaching = this.needsItsOwnCache() || ( - this.objectCaching && + shouldCache: function() { + this.ownCaching = this.needsItsOwnCache() || ( + this.objectCaching && (!this.group || !this.group.isOnACache()) - ); - return this.ownCaching; - }, + ); + return this.ownCaching; + }, - /** + /** * Check if this object or a child object will cast a shadow * used by Group.shouldCache to know if child has a shadow recursively * @return {Boolean} * @deprecated */ - willDrawShadow: function() { - return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); - }, + willDrawShadow: function() { + return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); + }, - /** + /** * Execute the drawing operation for an object clipPath * @param {CanvasRenderingContext2D} ctx Context to render on * @param {fabric.Object} clipPath */ - drawClipPathOnCache: function(ctx, clipPath) { - ctx.save(); - // DEBUG: uncomment this line, comment the following - // ctx.globalAlpha = 0.4 - if (clipPath.inverted) { - ctx.globalCompositeOperation = 'destination-out'; - } - else { - ctx.globalCompositeOperation = 'destination-in'; - } - //ctx.scale(1 / 2, 1 / 2); - if (clipPath.absolutePositioned) { - var m = fabric.util.invertTransform(this.calcTransformMatrix()); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - } - clipPath.transform(ctx); - ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); - ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); - ctx.restore(); - }, + drawClipPathOnCache: function(ctx, clipPath) { + ctx.save(); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4 + if (clipPath.inverted) { + ctx.globalCompositeOperation = 'destination-out'; + } + else { + ctx.globalCompositeOperation = 'destination-in'; + } + //ctx.scale(1 / 2, 1 / 2); + if (clipPath.absolutePositioned) { + var m = fabric.util.invertTransform(this.calcTransformMatrix()); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + } + clipPath.transform(ctx); + ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); + ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); + ctx.restore(); + }, - /** + /** * Execute the drawing operation for an object on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawObject: function(ctx, forClipping) { - var originalFill = this.fill, originalStroke = this.stroke; - if (forClipping) { - this.fill = 'black'; - this.stroke = ''; - this._setClippingProperties(ctx); - } - else { - this._renderBackground(ctx); - } - this._render(ctx); - this._drawClipPath(ctx, this.clipPath); - this.fill = originalFill; - this.stroke = originalStroke; - }, + drawObject: function(ctx, forClipping) { + var originalFill = this.fill, originalStroke = this.stroke; + if (forClipping) { + this.fill = 'black'; + this.stroke = ''; + this._setClippingProperties(ctx); + } + else { + this._renderBackground(ctx); + } + this._render(ctx); + this._drawClipPath(ctx, this.clipPath); + this.fill = originalFill; + this.stroke = originalStroke; + }, - /** + /** * Prepare clipPath state and cache and draw it on instance's cache * @param {CanvasRenderingContext2D} ctx * @param {fabric.Object} clipPath */ - _drawClipPath: function (ctx, clipPath) { - if (!clipPath) { return; } - // needed to setup a couple of variables - // path canvas gets overridden with this one. - // TODO find a better solution? - clipPath._set('canvas', this.canvas); - clipPath.shouldCache(); - clipPath._transformDone = true; - clipPath.renderCache({ forClipping: true }); - this.drawClipPathOnCache(ctx, clipPath); - }, - - /** + _drawClipPath: function (ctx, clipPath) { + if (!clipPath) { return; } + // needed to setup a couple of variables + // path canvas gets overridden with this one. + // TODO find a better solution? + clipPath._set('canvas', this.canvas); + clipPath.shouldCache(); + clipPath._transformDone = true; + clipPath.renderCache({ forClipping: true }); + this.drawClipPathOnCache(ctx, clipPath); + }, + + /** * Paint the cached copy of the object on the target context. * @param {CanvasRenderingContext2D} ctx Context to render on */ - drawCacheOnCanvas: function(ctx) { - ctx.scale(1 / this.zoomX, 1 / this.zoomY); - ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); - }, + drawCacheOnCanvas: function(ctx) { + ctx.scale(1 / this.zoomX, 1 / this.zoomY); + ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); + }, - /** + /** * Check if cache is dirty * @param {Boolean} skipCanvas skip canvas checks because this object is painted * on parent canvas. */ - isCacheDirty: function(skipCanvas) { - if (this.isNotVisible()) { - return false; - } - if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) { - // in this case the context is already cleared. - return true; - } - else { - if (this.dirty || + isCacheDirty: function(skipCanvas) { + if (this.isNotVisible()) { + return false; + } + if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) { + // in this case the context is already cleared. + return true; + } + else { + if (this.dirty || (this.clipPath && this.clipPath.absolutePositioned) || (this.statefullCache && this.hasStateChanged('cacheProperties')) - ) { - if (this._cacheCanvas && this._cacheContext && !skipCanvas) { - var width = this.cacheWidth / this.zoomX; - var height = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-width / 2, -height / 2, width, height); + ) { + if (this._cacheCanvas && this._cacheContext && !skipCanvas) { + var width = this.cacheWidth / this.zoomX; + var height = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-width / 2, -height / 2, width, height); + } + return true; } - return true; } - } - return false; - }, + return false; + }, - /** + /** * Draws a background for the object big as its untransformed dimensions * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderBackground: function(ctx) { - if (!this.backgroundColor) { - return; - } - var dim = this._getNonTransformedDimensions(); - ctx.fillStyle = this.backgroundColor; - - ctx.fillRect( - -dim.x / 2, - -dim.y / 2, - dim.x, - dim.y - ); - // if there is background color no other shadows - // should be casted - this._removeShadow(ctx); - }, + _renderBackground: function(ctx) { + if (!this.backgroundColor) { + return; + } + var dim = this._getNonTransformedDimensions(); + ctx.fillStyle = this.backgroundColor; + + ctx.fillRect( + -dim.x / 2, + -dim.y / 2, + dim.x, + dim.y + ); + // if there is background color no other shadows + // should be casted + this._removeShadow(ctx); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _setOpacity: function(ctx) { - if (this.group && !this.group._transformDone) { - ctx.globalAlpha = this.getObjectOpacity(); - } - else { - ctx.globalAlpha *= this.opacity; - } - }, - - _setStrokeStyles: function(ctx, decl) { - var stroke = decl.stroke; - if (stroke) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = decl.strokeLineCap; - ctx.lineDashOffset = decl.strokeDashOffset; - ctx.lineJoin = decl.strokeLineJoin; - ctx.miterLimit = decl.strokeMiterLimit; - if (stroke.toLive) { - if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - this._applyPatternForTransformedGradient(ctx, stroke); - } - else { - // is a simple gradient or pattern - ctx.strokeStyle = stroke.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, stroke); - } + _setOpacity: function(ctx) { + if (this.group && !this.group._transformDone) { + ctx.globalAlpha = this.getObjectOpacity(); } else { - // is a color - ctx.strokeStyle = decl.stroke; + ctx.globalAlpha *= this.opacity; } - } - }, - - _setFillStyles: function(ctx, decl) { - var fill = decl.fill; - if (fill) { - if (fill.toLive) { - ctx.fillStyle = fill.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, decl.fill); + }, + + _setStrokeStyles: function(ctx, decl) { + var stroke = decl.stroke; + if (stroke) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = decl.strokeLineCap; + ctx.lineDashOffset = decl.strokeDashOffset; + ctx.lineJoin = decl.strokeLineJoin; + ctx.miterLimit = decl.strokeMiterLimit; + if (stroke.toLive) { + if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + this._applyPatternForTransformedGradient(ctx, stroke); + } + else { + // is a simple gradient or pattern + ctx.strokeStyle = stroke.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, stroke); + } + } + else { + // is a color + ctx.strokeStyle = decl.stroke; + } } - else { - ctx.fillStyle = fill; + }, + + _setFillStyles: function(ctx, decl) { + var fill = decl.fill; + if (fill) { + if (fill.toLive) { + ctx.fillStyle = fill.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, decl.fill); + } + else { + ctx.fillStyle = fill; + } } - } - }, + }, - _setClippingProperties: function(ctx) { - ctx.globalAlpha = 1; - ctx.strokeStyle = 'transparent'; - ctx.fillStyle = '#000000'; - }, + _setClippingProperties: function(ctx) { + ctx.globalAlpha = 1; + ctx.strokeStyle = 'transparent'; + ctx.fillStyle = '#000000'; + }, - /** + /** * @private * Sets line dash * @param {CanvasRenderingContext2D} ctx Context to set the dash line on * @param {Array} dashArray array representing dashes */ - _setLineDash: function(ctx, dashArray) { - if (!dashArray || dashArray.length === 0) { - return; - } - // Spec requires the concatenation of two copies the dash list when the number of elements is odd - if (1 & dashArray.length) { - dashArray.push.apply(dashArray, dashArray); - } - ctx.setLineDash(dashArray); - }, + _setLineDash: function(ctx, dashArray) { + if (!dashArray || dashArray.length === 0) { + return; + } + // Spec requires the concatenation of two copies the dash list when the number of elements is odd + if (1 & dashArray.length) { + dashArray.push.apply(dashArray, dashArray); + } + ctx.setLineDash(dashArray); + }, - /** + /** * Renders controls and borders for the object * the context here is not transformed * @param {CanvasRenderingContext2D} ctx Context to render on * @param {Object} [styleOverride] properties to override the object style */ - _renderControls: function(ctx, styleOverride) { - var vpt = this.getViewportTransform(), - matrix = this.calcTransformMatrix(), - options, drawBorders, drawControls; - styleOverride = styleOverride || { }; - drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; - drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; - matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); - options = fabric.util.qrDecompose(matrix); - ctx.save(); - ctx.translate(options.translateX, options.translateY); - ctx.lineWidth = 1 * this.borderScaleFactor; - if (!this.group) { - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; - } - if (this.flipX) { - options.angle -= 180; - } - ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); - drawBorders && this.drawBorders(ctx, options, styleOverride); - drawControls && this.drawControls(ctx, styleOverride); - ctx.restore(); - }, + _renderControls: function(ctx, styleOverride) { + var vpt = this.getViewportTransform(), + matrix = this.calcTransformMatrix(), + options, drawBorders, drawControls; + styleOverride = styleOverride || { }; + drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; + drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; + matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); + options = fabric.util.qrDecompose(matrix); + ctx.save(); + ctx.translate(options.translateX, options.translateY); + ctx.lineWidth = 1 * this.borderScaleFactor; + if (!this.group) { + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + } + if (this.flipX) { + options.angle -= 180; + } + ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); + drawBorders && this.drawBorders(ctx, options, styleOverride); + drawControls && this.drawControls(ctx, styleOverride); + ctx.restore(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _setShadow: function(ctx) { - if (!this.shadow) { - return; - } + _setShadow: function(ctx) { + if (!this.shadow) { + return; + } - var shadow = this.shadow, canvas = this.canvas, - multX = (canvas && canvas.viewportTransform[0]) || 1, - multY = (canvas && canvas.viewportTransform[3]) || 1, - scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); - if (canvas && canvas._isRetinaScaling()) { - multX *= fabric.devicePixelRatio; - multY *= fabric.devicePixelRatio; - } - ctx.shadowColor = shadow.color; - ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * + var shadow = this.shadow, canvas = this.canvas, + multX = (canvas && canvas.viewportTransform[0]) || 1, + multY = (canvas && canvas.viewportTransform[3]) || 1, + scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); + if (canvas && canvas._isRetinaScaling()) { + multX *= fabric.devicePixelRatio; + multY *= fabric.devicePixelRatio; + } + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * (multX + multY) * (scaling.x + scaling.y) / 4; - ctx.shadowOffsetX = shadow.offsetX * multX * scaling.x; - ctx.shadowOffsetY = shadow.offsetY * multY * scaling.y; - }, + ctx.shadowOffsetX = shadow.offsetX * multX * scaling.x; + ctx.shadowOffsetY = shadow.offsetY * multY * scaling.y; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _removeShadow: function(ctx) { - if (!this.shadow) { - return; - } + _removeShadow: function(ctx) { + if (!this.shadow) { + return; + } - ctx.shadowColor = ''; - ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; - }, + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on * @param {Object} filler fabric.Pattern or fabric.Gradient * @return {Object} offset.offsetX offset for text rendering * @return {Object} offset.offsetY offset for text rendering */ - _applyPatternGradientTransform: function(ctx, filler) { - if (!filler || !filler.toLive) { - return { offsetX: 0, offsetY: 0 }; - } - var t = filler.gradientTransform || filler.patternTransform; - var offsetX = -this.width / 2 + filler.offsetX || 0, - offsetY = -this.height / 2 + filler.offsetY || 0; + _applyPatternGradientTransform: function(ctx, filler) { + if (!filler || !filler.toLive) { + return { offsetX: 0, offsetY: 0 }; + } + var t = filler.gradientTransform || filler.patternTransform; + var offsetX = -this.width / 2 + filler.offsetX || 0, + offsetY = -this.height / 2 + filler.offsetY || 0; - if (filler.gradientUnits === 'percentage') { - ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); - } - else { - ctx.transform(1, 0, 0, 1, offsetX, offsetY); - } - if (t) { - ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); - } - return { offsetX: offsetX, offsetY: offsetY }; - }, + if (filler.gradientUnits === 'percentage') { + ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); + } + else { + ctx.transform(1, 0, 0, 1, offsetX, offsetY); + } + if (t) { + ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); + } + return { offsetX: offsetX, offsetY: offsetY }; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderPaintInOrder: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderStroke(ctx); - this._renderFill(ctx); - } - else { - this._renderFill(ctx); - this._renderStroke(ctx); - } - }, + _renderPaintInOrder: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderStroke(ctx); + this._renderFill(ctx); + } + else { + this._renderFill(ctx); + this._renderStroke(ctx); + } + }, - /** + /** * @private * function that actually render something on the context. * empty here to allow Obects to work on tests to benchmark fabric functionalites * not related to rendering * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(/* ctx */) { + _render: function(/* ctx */) { - }, + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderFill: function(ctx) { - if (!this.fill) { - return; - } + _renderFill: function(ctx) { + if (!this.fill) { + return; + } - ctx.save(); - this._setFillStyles(ctx, this); - if (this.fillRule === 'evenodd') { - ctx.fill('evenodd'); - } - else { - ctx.fill(); - } - ctx.restore(); - }, + ctx.save(); + this._setFillStyles(ctx, this); + if (this.fillRule === 'evenodd') { + ctx.fill('evenodd'); + } + else { + ctx.fill(); + } + ctx.restore(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderStroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } + _renderStroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); - } + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } - ctx.save(); - if (this.strokeUniform) { - var scaling = this.getObjectScaling(); - ctx.scale(1 / scaling.x, 1 / scaling.y); - } - this._setLineDash(ctx, this.strokeDashArray); - this._setStrokeStyles(ctx, this); - ctx.stroke(); - ctx.restore(); - }, + ctx.save(); + if (this.strokeUniform) { + var scaling = this.getObjectScaling(); + ctx.scale(1 / scaling.x, 1 / scaling.y); + } + this._setLineDash(ctx, this.strokeDashArray); + this._setStrokeStyles(ctx, this); + ctx.stroke(); + ctx.restore(); + }, - /** + /** * This function try to patch the missing gradientTransform on canvas gradients. * transforming a context to transform the gradient, is going to transform the stroke too. * we want to transform the gradient but not the stroke operation, so we create @@ -1544,99 +1544,99 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @param {CanvasRenderingContext2D} ctx Context to render on * @param {fabric.Gradient} filler a fabric gradient instance */ - _applyPatternForTransformedGradient: function(ctx, filler) { - var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), - width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.scale( - dims.zoomX / this.scaleX / retinaScaling, - dims.zoomY / this.scaleY / retinaScaling - ); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fillStyle = filler.toLive(ctx); - pCtx.fill(); - ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); - ctx.scale( - retinaScaling * this.scaleX / dims.zoomX, - retinaScaling * this.scaleY / dims.zoomY - ); - ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); - }, - - /** + _applyPatternForTransformedGradient: function(ctx, filler) { + var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), + width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.scale( + dims.zoomX / this.scaleX / retinaScaling, + dims.zoomY / this.scaleY / retinaScaling + ); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fillStyle = filler.toLive(ctx); + pCtx.fill(); + ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); + ctx.scale( + retinaScaling * this.scaleX / dims.zoomX, + retinaScaling * this.scaleY / dims.zoomY + ); + ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); + }, + + /** * This function is an helper for svg import. it returns the center of the object in the svg * untransformed coordinates * @private * @return {Object} center point from element coordinates */ - _findCenterFromElement: function() { - return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; - }, + _findCenterFromElement: function() { + return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; + }, - /** + /** * This function is an helper for svg import. it decompose the transformMatrix * and assign properties to object. * untransformed coordinates * @private * @chainable */ - _assignTransformMatrixProps: function() { - if (this.transformMatrix) { - var options = fabric.util.qrDecompose(this.transformMatrix); - this.flipX = false; - this.flipY = false; - this.set('scaleX', options.scaleX); - this.set('scaleY', options.scaleY); - this.angle = options.angle; - this.skewX = options.skewX; - this.skewY = 0; - } - }, + _assignTransformMatrixProps: function() { + if (this.transformMatrix) { + var options = fabric.util.qrDecompose(this.transformMatrix); + this.flipX = false; + this.flipY = false; + this.set('scaleX', options.scaleX); + this.set('scaleY', options.scaleY); + this.angle = options.angle; + this.skewX = options.skewX; + this.skewY = 0; + } + }, - /** + /** * This function is an helper for svg import. it removes the transform matrix * and set to object properties that fabricjs can handle * @private * @param {Object} preserveAspectRatioOptions * @return {thisArg} */ - _removeTransformMatrix: function(preserveAspectRatioOptions) { - var center = this._findCenterFromElement(); - if (this.transformMatrix) { - this._assignTransformMatrixProps(); - center = fabric.util.transformPoint(center, this.transformMatrix); - } - this.transformMatrix = null; - if (preserveAspectRatioOptions) { - this.scaleX *= preserveAspectRatioOptions.scaleX; - this.scaleY *= preserveAspectRatioOptions.scaleY; - this.cropX = preserveAspectRatioOptions.cropX; - this.cropY = preserveAspectRatioOptions.cropY; - center.x += preserveAspectRatioOptions.offsetLeft; - center.y += preserveAspectRatioOptions.offsetTop; - this.width = preserveAspectRatioOptions.width; - this.height = preserveAspectRatioOptions.height; - } - this.setPositionByOrigin(center, 'center', 'center'); - }, + _removeTransformMatrix: function(preserveAspectRatioOptions) { + var center = this._findCenterFromElement(); + if (this.transformMatrix) { + this._assignTransformMatrixProps(); + center = fabric.util.transformPoint(center, this.transformMatrix); + } + this.transformMatrix = null; + if (preserveAspectRatioOptions) { + this.scaleX *= preserveAspectRatioOptions.scaleX; + this.scaleY *= preserveAspectRatioOptions.scaleY; + this.cropX = preserveAspectRatioOptions.cropX; + this.cropY = preserveAspectRatioOptions.cropY; + center.x += preserveAspectRatioOptions.offsetLeft; + center.y += preserveAspectRatioOptions.offsetTop; + this.width = preserveAspectRatioOptions.width; + this.height = preserveAspectRatioOptions.height; + } + this.setPositionByOrigin(center, 'center', 'center'); + }, - /** + /** * Clones an instance. * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @returns {Promise} */ - clone: function(propertiesToInclude) { - var objectForm = this.toObject(propertiesToInclude); - return this.constructor.fromObject(objectForm); - }, + clone: function(propertiesToInclude) { + var objectForm = this.toObject(propertiesToInclude); + return this.constructor.fromObject(objectForm); + }, - /** + /** * Creates an instance of fabric.Image out of an object * makes use of toCanvasElement. * Once this method was based on toDataUrl and loadImage, so it also had a quality @@ -1654,12 +1654,12 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 * @return {fabric.Image} Object cloned as image. */ - cloneAsImage: function(options) { - var canvasEl = this.toCanvasElement(options); - return new fabric.Image(canvasEl); - }, + cloneAsImage: function(options) { + var canvasEl = this.toCanvasElement(options); + return new fabric.Image(canvasEl); + }, - /** + /** * Converts an object into a HTMLCanvas element * @param {Object} options Options object * @param {Number} [options.multiplier=1] Multiplier to scale by @@ -1672,73 +1672,73 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 * @return {HTMLCanvasElement} Returns DOM element with the fabric.Object */ - toCanvasElement: function(options) { - options || (options = { }); - - var utils = fabric.util, origParams = utils.saveObjectTransform(this), - originalGroup = this.group, - originalShadow = this.shadow, abs = Math.abs, - retinaScaling = options.enableRetinaScaling ? Math.max(fabric.devicePixelRatio, 1) : 1, - multiplier = (options.multiplier || 1) * retinaScaling; - delete this.group; - if (options.withoutTransform) { - utils.resetObjectTransform(this); - } - if (options.withoutShadow) { - this.shadow = null; - } - - var el = fabric.util.createCanvasElement(), - // skip canvas zoom and calculate with setCoords now. - boundingRect = this.getBoundingRect(true, true), - shadow = this.shadow, shadowOffset = { x: 0, y: 0 }, - width, height; - - if (shadow) { - var shadowBlur = shadow.blur; - var scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); - // consider non scaling shadow. - shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.x)); - shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.y)); - } - width = boundingRect.width + shadowOffset.x; - height = boundingRect.height + shadowOffset.y; - // if the current width/height is not an integer - // we need to make it so. - el.width = Math.ceil(width); - el.height = Math.ceil(height); - var canvas = new fabric.StaticCanvas(el, { - enableRetinaScaling: false, - renderOnAddRemove: false, - skipOffscreen: false, - }); - if (options.format === 'jpeg') { - canvas.backgroundColor = '#fff'; - } - this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); - var originalCanvas = this.canvas; - canvas._objects = [this]; - this.set('canvas', canvas); - this.setCoords(); - var canvasEl = canvas.toCanvasElement(multiplier || 1, options); - this.set('canvas', originalCanvas); - this.shadow = originalShadow; - if (originalGroup) { - this.group = originalGroup; - } - this.set(origParams); - this.setCoords(); - // canvas.dispose will call image.dispose that will nullify the elements - // since this canvas is a simple element for the process, we remove references - // to objects in this way in order to avoid object trashing. - canvas._objects = []; - canvas.dispose(); - canvas = null; - - return canvasEl; - }, + toCanvasElement: function(options) { + options || (options = { }); + + var utils = fabric.util, origParams = utils.saveObjectTransform(this), + originalGroup = this.group, + originalShadow = this.shadow, abs = Math.abs, + retinaScaling = options.enableRetinaScaling ? Math.max(fabric.devicePixelRatio, 1) : 1, + multiplier = (options.multiplier || 1) * retinaScaling; + delete this.group; + if (options.withoutTransform) { + utils.resetObjectTransform(this); + } + if (options.withoutShadow) { + this.shadow = null; + } - /** + var el = fabric.util.createCanvasElement(), + // skip canvas zoom and calculate with setCoords now. + boundingRect = this.getBoundingRect(true, true), + shadow = this.shadow, shadowOffset = { x: 0, y: 0 }, + width, height; + + if (shadow) { + var shadowBlur = shadow.blur; + var scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); + // consider non scaling shadow. + shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.x)); + shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.y)); + } + width = boundingRect.width + shadowOffset.x; + height = boundingRect.height + shadowOffset.y; + // if the current width/height is not an integer + // we need to make it so. + el.width = Math.ceil(width); + el.height = Math.ceil(height); + var canvas = new fabric.StaticCanvas(el, { + enableRetinaScaling: false, + renderOnAddRemove: false, + skipOffscreen: false, + }); + if (options.format === 'jpeg') { + canvas.backgroundColor = '#fff'; + } + this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); + var originalCanvas = this.canvas; + canvas._objects = [this]; + this.set('canvas', canvas); + this.setCoords(); + var canvasEl = canvas.toCanvasElement(multiplier || 1, options); + this.set('canvas', originalCanvas); + this.shadow = originalShadow; + if (originalGroup) { + this.group = originalGroup; + } + this.set(origParams); + this.setCoords(); + // canvas.dispose will call image.dispose that will nullify the elements + // since this canvas is a simple element for the process, we remove references + // to objects in this way in order to avoid object trashing. + canvas._objects = []; + canvas.dispose(); + canvas = null; + + return canvasEl; + }, + + /** * Converts an object into a data-url-like string * @param {Object} options Options object * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" @@ -1753,163 +1753,163 @@ fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric. * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format */ - toDataURL: function(options) { - options || (options = { }); - return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); - }, + toDataURL: function(options) { + options || (options = { }); + return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); + }, - /** + /** * Returns true if specified type is identical to the type of an instance * @param {String} type Type to check against * @return {Boolean} */ - isType: function(type) { - return arguments.length > 1 ? Array.from(arguments).includes(this.type) : this.type === type; - }, + isType: function(type) { + return arguments.length > 1 ? Array.from(arguments).includes(this.type) : this.type === type; + }, - /** + /** * Returns complexity of an instance * @return {Number} complexity of this instance (is 1 unless subclassed) */ - complexity: function() { - return 1; - }, + complexity: function() { + return 1; + }, - /** + /** * Returns a JSON representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} JSON */ - toJSON: function(propertiesToInclude) { - // delegate, not alias - return this.toObject(propertiesToInclude); - }, + toJSON: function(propertiesToInclude) { + // delegate, not alias + return this.toObject(propertiesToInclude); + }, - /** + /** * Sets "angle" of an instance with centered rotation * @param {Number} angle Angle value (in degrees) * @return {fabric.Object} thisArg * @chainable */ - rotate: function(angle) { - var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; + rotate: function(angle) { + var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; - if (shouldCenterOrigin) { - this._setOriginToCenter(); - } + if (shouldCenterOrigin) { + this._setOriginToCenter(); + } - this.set('angle', angle); + this.set('angle', angle); - if (shouldCenterOrigin) { - this._resetOrigin(); - } + if (shouldCenterOrigin) { + this._resetOrigin(); + } - return this; - }, + return this; + }, - /** + /** * Centers object horizontally on canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - centerH: function () { - this.canvas && this.canvas.centerObjectH(this); - return this; - }, + centerH: function () { + this.canvas && this.canvas.centerObjectH(this); + return this; + }, - /** + /** * Centers object horizontally on current viewport of canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - viewportCenterH: function () { - this.canvas && this.canvas.viewportCenterObjectH(this); - return this; - }, + viewportCenterH: function () { + this.canvas && this.canvas.viewportCenterObjectH(this); + return this; + }, - /** + /** * Centers object vertically on canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - centerV: function () { - this.canvas && this.canvas.centerObjectV(this); - return this; - }, + centerV: function () { + this.canvas && this.canvas.centerObjectV(this); + return this; + }, - /** + /** * Centers object vertically on current viewport of canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - viewportCenterV: function () { - this.canvas && this.canvas.viewportCenterObjectV(this); - return this; - }, + viewportCenterV: function () { + this.canvas && this.canvas.viewportCenterObjectV(this); + return this; + }, - /** + /** * Centers object vertically and horizontally on canvas to which is was added last * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - center: function () { - this.canvas && this.canvas.centerObject(this); - return this; - }, + center: function () { + this.canvas && this.canvas.centerObject(this); + return this; + }, - /** + /** * Centers object on current viewport of canvas to which it was added last. * You might need to call `setCoords` on an object after centering, to update controls area. * @return {fabric.Object} thisArg * @chainable */ - viewportCenter: function () { - this.canvas && this.canvas.viewportCenterObject(this); - return this; - }, + viewportCenter: function () { + this.canvas && this.canvas.viewportCenterObject(this); + return this; + }, - /** + /** * This callback function is called by the parent group of an object every * time a non-delegated property changes on the group. It is passed the key * and value as parameters. Not adding in this function's signature to avoid * Travis build error about unused variables. */ - setOnGroup: function() { - // implemented by sub-classes, as needed. - }, + setOnGroup: function() { + // implemented by sub-classes, as needed. + }, - /** + /** * Sets canvas globalCompositeOperation for specific object * custom composition operation for the particular object can be specified using globalCompositeOperation property * @param {CanvasRenderingContext2D} ctx Rendering canvas context */ - _setupCompositeOperation: function (ctx) { - if (this.globalCompositeOperation) { - ctx.globalCompositeOperation = this.globalCompositeOperation; - } - }, + _setupCompositeOperation: function (ctx) { + if (this.globalCompositeOperation) { + ctx.globalCompositeOperation = this.globalCompositeOperation; + } + }, - /** + /** * cancel instance's running animations * override if necessary to dispose artifacts such as `clipPath` */ - dispose: function () { - if (fabric.runningAnimations) { - fabric.runningAnimations.cancelByTarget(this); + dispose: function () { + if (fabric.runningAnimations) { + fabric.runningAnimations.cancelByTarget(this); + } } - } -}); + }); -fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); -extend(fabric.Object.prototype, fabric.Observable); + extend(fabric.Object.prototype, fabric.Observable); -/** + /** * Defines the number of fraction digits to use when serializing object values. * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc. * @static @@ -1917,9 +1917,9 @@ extend(fabric.Object.prototype, fabric.Observable); * @constant * @type Number */ -fabric.Object.NUM_FRACTION_DIGITS = 2; + fabric.Object.NUM_FRACTION_DIGITS = 2; -/** + /** * Defines which properties should be enlivened from the object passed to {@link fabric.Object._fromObject} * @static * @memberOf fabric.Object @@ -1927,22 +1927,23 @@ fabric.Object.NUM_FRACTION_DIGITS = 2; * @type string[] */ -fabric.Object._fromObject = function(klass, object, extraParam) { - var serializedObject = clone(object, true); - return fabric.util.enlivenObjectEnlivables(serializedObject).then(function(enlivedMap) { - var newObject = Object.assign(object, enlivedMap); - return extraParam ? new klass(object[extraParam], newObject) : new klass(newObject); - }); -}; + fabric.Object._fromObject = function(klass, object, extraParam) { + var serializedObject = clone(object, true); + return fabric.util.enlivenObjectEnlivables(serializedObject).then(function(enlivedMap) { + var newObject = Object.assign(object, enlivedMap); + return extraParam ? new klass(object[extraParam], newObject) : new klass(newObject); + }); + }; -fabric.Object.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Object, object); -}; + fabric.Object.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Object, object); + }; -/** + /** * Unique id used internally when creating SVG elements * @static * @memberOf fabric.Object * @type Number */ -fabric.Object.__uid = 0; + fabric.Object.__uid = 0; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js index 9c5429c00ee..6b4771fb94a 100644 --- a/src/shapes/path.class.js +++ b/src/shapes/path.class.js @@ -1,344 +1,345 @@ -var fabric = exports.fabric || (exports.fabric = { }), - min = fabric.util.array.min, - max = fabric.util.array.max, - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed; - -/** +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + min = fabric.util.array.min, + max = fabric.util.array.max, + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed; + + /** * Path class * @class fabric.Path * @extends fabric.Object * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup} * @see {@link fabric.Path#initialize} for constructor definition */ -fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { + fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'path', + type: 'path', - /** + /** * Array of path points * @type Array * @default */ - path: null, + path: null, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), - stateProperties: fabric.Object.prototype.stateProperties.concat('path'), + stateProperties: fabric.Object.prototype.stateProperties.concat('path'), - /** + /** * Constructor * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) * @param {Object} [options] Options object * @return {fabric.Path} thisArg */ - initialize: function (path, options) { - options = clone(options || {}); - delete options.path; - this.callSuper('initialize', options); - this._setPath(path || [], options); - }, - - /** + initialize: function (path, options) { + options = clone(options || {}); + delete options.path; + this.callSuper('initialize', options); + this._setPath(path || [], options); + }, + + /** * @private * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) * @param {Object} [options] Options object */ - _setPath: function (path, options) { - this.path = fabric.util.makePathSimpler( - Array.isArray(path) ? path : fabric.util.parsePath(path) - ); + _setPath: function (path, options) { + this.path = fabric.util.makePathSimpler( + Array.isArray(path) ? path : fabric.util.parsePath(path) + ); - fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); - }, + fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx context to render path on */ - _renderPathCommands: function(ctx) { - var current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - controlX = 0, // current control point x - controlY = 0, // current control point y - l = -this.pathOffset.x, - t = -this.pathOffset.y; - - ctx.beginPath(); - - for (var i = 0, len = this.path.length; i < len; ++i) { - - current = this.path[i]; - - switch (current[0]) { // first letter - - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - ctx.lineTo(x + l, y + t); - break; - - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - ctx.moveTo(x + l, y + t); - break; - - case 'C': // bezierCurveTo, absolute - x = current[5]; - y = current[6]; - controlX = current[3]; - controlY = current[4]; - ctx.bezierCurveTo( - current[1] + l, - current[2] + t, - controlX + l, - controlY + t, - x + l, - y + t - ); - break; - - case 'Q': // quadraticCurveTo, absolute - ctx.quadraticCurveTo( - current[1] + l, - current[2] + t, - current[3] + l, - current[4] + t - ); - x = current[3]; - y = current[4]; - controlX = current[1]; - controlY = current[2]; - break; - - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - ctx.closePath(); - break; + _renderPathCommands: function(ctx) { + var current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + controlX = 0, // current control point x + controlY = 0, // current control point y + l = -this.pathOffset.x, + t = -this.pathOffset.y; + + ctx.beginPath(); + + for (var i = 0, len = this.path.length; i < len; ++i) { + + current = this.path[i]; + + switch (current[0]) { // first letter + + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + ctx.lineTo(x + l, y + t); + break; + + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + ctx.moveTo(x + l, y + t); + break; + + case 'C': // bezierCurveTo, absolute + x = current[5]; + y = current[6]; + controlX = current[3]; + controlY = current[4]; + ctx.bezierCurveTo( + current[1] + l, + current[2] + t, + controlX + l, + controlY + t, + x + l, + y + t + ); + break; + + case 'Q': // quadraticCurveTo, absolute + ctx.quadraticCurveTo( + current[1] + l, + current[2] + t, + current[3] + l, + current[4] + t + ); + x = current[3]; + y = current[4]; + controlX = current[1]; + controlY = current[2]; + break; + + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + ctx.closePath(); + break; + } } - } - }, + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx context to render path on */ - _render: function(ctx) { - this._renderPathCommands(ctx); - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + this._renderPathCommands(ctx); + this._renderPaintInOrder(ctx); + }, - /** + /** * Returns string representation of an instance * @return {String} string representation of an instance */ - toString: function() { - return '#'; - }, + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - path: this.path.map(function(item) { return item.slice(); }), - }); - }, + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + path: this.path.map(function(item) { return item.slice(); }), + }); + }, - /** + /** * Returns dataless object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toDatalessObject: function(propertiesToInclude) { - var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); - if (o.sourcePath) { - delete o.path; - } - return o; - }, + toDatalessObject: function(propertiesToInclude) { + var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); + if (o.sourcePath) { + delete o.path; + } + return o; + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var path = fabric.util.joinPath(this.path); - return [ - '\n' - ]; - }, - - _getOffsetTransform: function() { - var digits = fabric.Object.NUM_FRACTION_DIGITS; - return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + + _toSVG: function() { + var path = fabric.util.joinPath(this.path); + return [ + '\n' + ]; + }, + + _getOffsetTransform: function() { + var digits = fabric.Object.NUM_FRACTION_DIGITS; + return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + toFixed(-this.pathOffset.y, digits) + ')'; - }, + }, - /** + /** * Returns svg clipPath representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toClipPathSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return '\t' + this._createBaseClipPathSVGMarkup( - this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } - ); - }, - - /** + toClipPathSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return '\t' + this._createBaseClipPathSVGMarkup( + this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } + ); + }, + + /** * Returns svg representation of an instance * @param {Function} [reviver] Method for further parsing of svg representation. * @return {String} svg representation of an instance */ - toSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); - }, - /* _TO_SVG_END_ */ + toSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); + }, + /* _TO_SVG_END_ */ - /** + /** * Returns number representation of an instance complexity * @return {Number} complexity of this instance */ - complexity: function() { - return this.path.length; - }, + complexity: function() { + return this.path.length; + }, - /** + /** * @private */ - _calcDimensions: function() { - - var aX = [], - aY = [], - current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - bounds; - - for (var i = 0, len = this.path.length; i < len; ++i) { - - current = this.path[i]; - - switch (current[0]) { // first letter - - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - bounds = []; - break; - - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - bounds = []; - break; - - case 'C': // bezierCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - x = current[5]; - y = current[6]; - break; - - case 'Q': // quadraticCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[1], - current[2], - current[3], - current[4] - ); - x = current[3]; - y = current[4]; - break; - - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - break; + _calcDimensions: function() { + + var aX = [], + aY = [], + current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + bounds; + + for (var i = 0, len = this.path.length; i < len; ++i) { + + current = this.path[i]; + + switch (current[0]) { // first letter + + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + bounds = []; + break; + + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + bounds = []; + break; + + case 'C': // bezierCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + x = current[5]; + y = current[6]; + break; + + case 'Q': // quadraticCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[1], + current[2], + current[3], + current[4] + ); + x = current[3]; + y = current[4]; + break; + + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + break; + } + bounds.forEach(function (point) { + aX.push(point.x); + aY.push(point.y); + }); + aX.push(x); + aY.push(y); } - bounds.forEach(function (point) { - aX.push(point.x); - aY.push(point.y); - }); - aX.push(x); - aY.push(y); + + var minX = min(aX) || 0, + minY = min(aY) || 0, + maxX = max(aX) || 0, + maxY = max(aY) || 0, + deltaX = maxX - minX, + deltaY = maxY - minY; + + return { + left: minX, + top: minY, + width: deltaX, + height: deltaY + }; } + }); - var minX = min(aX) || 0, - minY = min(aY) || 0, - maxX = max(aX) || 0, - maxY = max(aY) || 0, - deltaX = maxX - minX, - deltaY = maxY - minY; - - return { - left: minX, - top: minY, - width: deltaX, - height: deltaY - }; - } -}); - -/** + /** * Creates an instance of fabric.Path from an object * @static * @memberOf fabric.Path * @param {Object} object * @returns {Promise} */ -fabric.Path.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Path, object, 'path'); -}; + fabric.Path.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Path, object, 'path'); + }; -/* _FROM_SVG_START_ */ -/** + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) * @static * @memberOf fabric.Path * @see http://www.w3.org/TR/SVG/paths.html#PathElement */ -fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); + fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); -/** + /** * Creates an instance of fabric.Path from an SVG element * @static * @memberOf fabric.Path @@ -347,9 +348,11 @@ fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); * @param {Object} [options] Options object * @param {Function} [callback] Options callback invoked after parsing is finished */ -fabric.Path.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); -}; -/* _FROM_SVG_END_ */ + fabric.Path.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/polygon.class.js b/src/shapes/polygon.class.js index c8d956eb18d..7613813a121 100644 --- a/src/shapes/polygon.class.js +++ b/src/shapes/polygon.class.js @@ -1,52 +1,52 @@ -var fabric = exports.fabric || (exports.fabric = {}), - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; - -/** +(function(global) { + var fabric = global.fabric || (global.fabric = {}), + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; + /** * Polygon class * @class fabric.Polygon * @extends fabric.Polyline * @see {@link fabric.Polygon#initialize} for constructor definition */ -fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { + fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'polygon', + type: 'polygon', - /** + /** * @private */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this); - }, + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; - } - ctx.closePath(); - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + ctx.closePath(); + this._renderPaintInOrder(ctx); + }, -}); + }); -/* _FROM_SVG_START_ */ -/** + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) * @static * @memberOf fabric.Polygon * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement */ -fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); + fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); -/** + /** * Returns {@link fabric.Polygon} instance from an SVG element * @static * @memberOf fabric.Polygon @@ -54,16 +54,18 @@ fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ -fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); -/* _FROM_SVG_END_ */ + fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); + /* _FROM_SVG_END_ */ -/** + /** * Returns fabric.Polygon instance from an object representation * @static * @memberOf fabric.Polygon * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Polygon.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Polygon, object, 'points'); -}; + fabric.Polygon.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Polygon, object, 'points'); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/polyline.class.js b/src/shapes/polyline.class.js index 4af0273af2a..eb1f76068da 100644 --- a/src/shapes/polyline.class.js +++ b/src/shapes/polyline.class.js @@ -1,33 +1,34 @@ -var fabric = exports.fabric || (exports.fabric = { }), - extend = fabric.util.object.extend, - min = fabric.util.array.min, - max = fabric.util.array.max, - toFixed = fabric.util.toFixed, - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + min = fabric.util.array.min, + max = fabric.util.array.max, + toFixed = fabric.util.toFixed, + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; -/** + /** * Polyline class * @class fabric.Polyline * @extends fabric.Object * @see {@link fabric.Polyline#initialize} for constructor definition */ -fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { + fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'polyline', + type: 'polyline', - /** + /** * Points array * @type Array * @default */ - points: null, + points: null, - /** + /** * WARNING: Feature in progress * Calculate the exact bounding box taking in account strokeWidth on acute angles * this will be turned to true by default on fabric 6.0 @@ -36,11 +37,11 @@ fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyl * @type Boolean * @default false */ - exactBoundingBox: false, + exactBoundingBox: false, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), - /** + /** * Constructor * @param {Array} points Array of points (where each point is an object with x and y) * @param {Object} [options] Options object @@ -59,52 +60,52 @@ fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyl * top: 100 * }); */ - initialize: function(points, options) { - options = options || {}; - this.points = points || []; - this.callSuper('initialize', options); - this._setPositionDimensions(options); - }, + initialize: function(points, options) { + options = options || {}; + this.points = points || []; + this.callSuper('initialize', options); + this._setPositionDimensions(options); + }, - /** + /** * @private */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this, true); - }, + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this, true); + }, - _setPositionDimensions: function(options) { - options || (options = {}); - var calcDim = this._calcDimensions(options), correctLeftTop, - correctSize = this.exactBoundingBox ? this.strokeWidth : 0; - this.width = calcDim.width - correctSize; - this.height = calcDim.height - correctSize; - if (!options.fromSVG) { - correctLeftTop = this.translateToGivenOrigin( - { - // this looks bad, but is one way to keep it optional for now. - x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, - y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 - }, - 'left', - 'top', - this.originX, - this.originY - ); - } - if (typeof options.left === 'undefined') { - this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; - } - if (typeof options.top === 'undefined') { - this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; - } - this.pathOffset = { - x: calcDim.left + this.width / 2 + correctSize / 2, - y: calcDim.top + this.height / 2 + correctSize / 2 - }; - }, + _setPositionDimensions: function(options) { + options || (options = {}); + var calcDim = this._calcDimensions(options), correctLeftTop, + correctSize = this.exactBoundingBox ? this.strokeWidth : 0; + this.width = calcDim.width - correctSize; + this.height = calcDim.height - correctSize; + if (!options.fromSVG) { + correctLeftTop = this.translateToGivenOrigin( + { + // this looks bad, but is one way to keep it optional for now. + x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, + y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 + }, + 'left', + 'top', + this.originX, + this.originY + ); + } + if (typeof options.left === 'undefined') { + this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; + } + if (typeof options.top === 'undefined') { + this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; + } + this.pathOffset = { + x: calcDim.left + this.width / 2 + correctSize / 2, + y: calcDim.top + this.height / 2 + correctSize / 2 + }; + }, - /** + /** * Calculate the polygon min and max point from points array, * returning an object with left, top, width, height to measure the * polygon size @@ -114,113 +115,113 @@ fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyl * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point * @private */ - _calcDimensions: function() { + _calcDimensions: function() { - var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, - minX = min(points, 'x') || 0, - minY = min(points, 'y') || 0, - maxX = max(points, 'x') || 0, - maxY = max(points, 'y') || 0, - width = (maxX - minX), - height = (maxY - minY); + var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, + minX = min(points, 'x') || 0, + minY = min(points, 'y') || 0, + maxX = max(points, 'x') || 0, + maxY = max(points, 'y') || 0, + width = (maxX - minX), + height = (maxY - minY); - return { - left: minX, - top: minY, - width: width, - height: height, - }; - }, + return { + left: minX, + top: minY, + width: width, + height: height, + }; + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - points: this.points.concat() - }); - }, + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + points: this.points.concat() + }); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + _toSVG: function() { + var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - for (var i = 0, len = this.points.length; i < len; i++) { - points.push( - toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', - toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' - ); - } - return [ - '<' + this.type + ' ', 'COMMON_PARTS', - 'points="', points.join(''), - '" />\n' - ]; - }, - /* _TO_SVG_END_ */ + for (var i = 0, len = this.points.length; i < len; i++) { + points.push( + toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', + toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' + ); + } + return [ + '<' + this.type + ' ', 'COMMON_PARTS', + 'points="', points.join(''), + '" />\n' + ]; + }, + /* _TO_SVG_END_ */ - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - commonRender: function(ctx) { - var point, len = this.points.length, - x = this.pathOffset.x, - y = this.pathOffset.y; + commonRender: function(ctx) { + var point, len = this.points.length, + x = this.pathOffset.x, + y = this.pathOffset.y; - if (!len || isNaN(this.points[len - 1].y)) { - // do not draw if no points or odd points - // NaN comes from parseFloat of a empty string in parser - return false; - } - ctx.beginPath(); - ctx.moveTo(this.points[0].x - x, this.points[0].y - y); - for (var i = 0; i < len; i++) { - point = this.points[i]; - ctx.lineTo(point.x - x, point.y - y); - } - return true; - }, + if (!len || isNaN(this.points[len - 1].y)) { + // do not draw if no points or odd points + // NaN comes from parseFloat of a empty string in parser + return false; + } + ctx.beginPath(); + ctx.moveTo(this.points[0].x - x, this.points[0].y - y); + for (var i = 0; i < len; i++) { + point = this.points[i]; + ctx.lineTo(point.x - x, point.y - y); + } + return true; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; - } - this._renderPaintInOrder(ctx); - }, + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + this._renderPaintInOrder(ctx); + }, - /** + /** * Returns complexity of an instance * @return {Number} complexity of this instance */ - complexity: function() { - return this.get('points').length; - } -}); + complexity: function() { + return this.get('points').length; + } + }); -/* _FROM_SVG_START_ */ -/** + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement}) * @static * @memberOf fabric.Polyline * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement */ -fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); + fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); -/** + /** * Returns fabric.Polyline instance from an SVG element * @static * @memberOf fabric.Polyline @@ -228,31 +229,33 @@ fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ -fabric.Polyline.fromElementGenerator = function(_class) { - return function(element, callback, options) { - if (!element) { - return callback(null); - } - options || (options = { }); + fabric.Polyline.fromElementGenerator = function(_class) { + return function(element, callback, options) { + if (!element) { + return callback(null); + } + options || (options = { }); - var points = fabric.parsePointsAttribute(element.getAttribute('points')), - parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric[_class](points, extend(parsedAttributes, options))); + var points = fabric.parsePointsAttribute(element.getAttribute('points')), + parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric[_class](points, extend(parsedAttributes, options))); + }; }; -}; -fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); + fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); -/* _FROM_SVG_END_ */ + /* _FROM_SVG_END_ */ -/** + /** * Returns fabric.Polyline instance from an object representation * @static * @memberOf fabric.Polyline * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Polyline.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Polyline, object, 'points'); -}; + fabric.Polyline.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Polyline, object, 'points'); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/rect.class.js b/src/shapes/rect.class.js index cfcecb28586..58abeaff401 100644 --- a/src/shapes/rect.class.js +++ b/src/shapes/rect.class.js @@ -1,144 +1,145 @@ -var fabric = exports.fabric || (exports.fabric = { }); +(function(global) { + var fabric = global.fabric || (global.fabric = { }); -/** + /** * Rectangle class * @class fabric.Rect * @extends fabric.Object * @return {fabric.Rect} thisArg * @see {@link fabric.Rect#initialize} for constructor definition */ -fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { + fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { - /** + /** * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged}) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), + stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), - /** + /** * Type of an object * @type String * @default */ - type: 'rect', + type: 'rect', - /** + /** * Horizontal border radius * @type Number * @default */ - rx: 0, + rx: 0, - /** + /** * Vertical border radius * @type Number * @default */ - ry: 0, + ry: 0, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), - /** + /** * Constructor * @param {Object} [options] Options object * @return {Object} thisArg */ - initialize: function(options) { - this.callSuper('initialize', options); - this._initRxRy(); - }, + initialize: function(options) { + this.callSuper('initialize', options); + this._initRxRy(); + }, - /** + /** * Initializes rx/ry attributes * @private */ - _initRxRy: function() { - if (this.rx && !this.ry) { - this.ry = this.rx; - } - else if (this.ry && !this.rx) { - this.rx = this.ry; - } - }, - - /** + _initRxRy: function() { + if (this.rx && !this.ry) { + this.ry = this.rx; + } + else if (this.ry && !this.rx) { + this.rx = this.ry; + } + }, + + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { + _render: function(ctx) { - // 1x1 case (used in spray brush) optimization was removed because - // with caching and higher zoom level this makes more damage than help + // 1x1 case (used in spray brush) optimization was removed because + // with caching and higher zoom level this makes more damage than help - var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, - ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, - w = this.width, - h = this.height, - x = -this.width / 2, - y = -this.height / 2, - isRounded = rx !== 0 || ry !== 0, - /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ - k = 1 - 0.5522847498; - ctx.beginPath(); + var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, + ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, + w = this.width, + h = this.height, + x = -this.width / 2, + y = -this.height / 2, + isRounded = rx !== 0 || ry !== 0, + /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ + k = 1 - 0.5522847498; + ctx.beginPath(); - ctx.moveTo(x + rx, y); + ctx.moveTo(x + rx, y); - ctx.lineTo(x + w - rx, y); - isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); + ctx.lineTo(x + w - rx, y); + isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); - ctx.lineTo(x + w, y + h - ry); - isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); + ctx.lineTo(x + w, y + h - ry); + isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); - ctx.lineTo(x + rx, y + h); - isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); + ctx.lineTo(x + rx, y + h); + isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); - ctx.lineTo(x, y + ry); - isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); + ctx.lineTo(x, y + ry); + isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); - ctx.closePath(); + ctx.closePath(); - this._renderPaintInOrder(ctx); - }, + this._renderPaintInOrder(ctx); + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var x = -this.width / 2, y = -this.height / 2; - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ -}); - -/* _FROM_SVG_START_ */ -/** + _toSVG: function() { + var x = -this.width / 2, y = -this.height / 2; + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); + + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) * @static * @memberOf fabric.Rect * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement */ -fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); + fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); -/** + /** * Returns {@link fabric.Rect} instance from an SVG element * @static * @memberOf fabric.Rect @@ -146,30 +147,32 @@ fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width h * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ -fabric.Rect.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); - } - options = options || { }; - - var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); - parsedAttributes.left = parsedAttributes.left || 0; - parsedAttributes.top = parsedAttributes.top || 0; - parsedAttributes.height = parsedAttributes.height || 0; - parsedAttributes.width = parsedAttributes.width || 0; - var rect = new fabric.Rect(Object.assign({}, options, parsedAttributes)); - rect.visible = rect.visible && rect.width > 0 && rect.height > 0; - callback(rect); -}; -/* _FROM_SVG_END_ */ - -/** + fabric.Rect.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } + options = options || { }; + + var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); + parsedAttributes.left = parsedAttributes.left || 0; + parsedAttributes.top = parsedAttributes.top || 0; + parsedAttributes.height = parsedAttributes.height || 0; + parsedAttributes.width = parsedAttributes.width || 0; + var rect = new fabric.Rect(Object.assign({}, options, parsedAttributes)); + rect.visible = rect.visible && rect.width > 0 && rect.height > 0; + callback(rect); + }; + /* _FROM_SVG_END_ */ + + /** * Returns {@link fabric.Rect} instance from an object representation * @static * @memberOf fabric.Rect * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Rect.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Rect, object); -}; + fabric.Rect.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Rect, object); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 8e82e518425..ba101d96176 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -1,12 +1,13 @@ -var fabric = exports.fabric || (exports.fabric = { }), - clone = fabric.util.object.clone; +(function(global) { + var fabric = global.fabric || (global.fabric = { }), + clone = fabric.util.object.clone; -var additionalProps = + var additionalProps = ('fontFamily fontWeight fontSize text underline overline linethrough' + ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + ' direction path pathStartOffset pathSide pathAlign').split(' '); -/** + /** * Text class * @class fabric.Text * @extends fabric.Object @@ -14,184 +15,184 @@ var additionalProps = * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} * @see {@link fabric.Text#initialize} for constructor definition */ -fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { + fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { - /** + /** * Properties which when set cause object to change dimensions * @type Array * @private */ - _dimensionAffectingProps: [ - 'fontSize', - 'fontWeight', - 'fontFamily', - 'fontStyle', - 'lineHeight', - 'text', - 'charSpacing', - 'textAlign', - 'styles', - 'path', - 'pathStartOffset', - 'pathSide', - 'pathAlign' - ], - - /** + _dimensionAffectingProps: [ + 'fontSize', + 'fontWeight', + 'fontFamily', + 'fontStyle', + 'lineHeight', + 'text', + 'charSpacing', + 'textAlign', + 'styles', + 'path', + 'pathStartOffset', + 'pathSide', + 'pathAlign' + ], + + /** * @private */ - _reNewline: /\r?\n/, + _reNewline: /\r?\n/, - /** + /** * Use this regular expression to filter for whitespaces that is not a new line. * Mostly used when text is 'justify' aligned. * @private */ - _reSpacesAndTabs: /[ \t\r]/g, + _reSpacesAndTabs: /[ \t\r]/g, - /** + /** * Use this regular expression to filter for whitespace that is not a new line. * Mostly used when text is 'justify' aligned. * @private */ - _reSpaceAndTab: /[ \t\r]/, + _reSpaceAndTab: /[ \t\r]/, - /** + /** * Use this regular expression to filter consecutive groups of non spaces. * Mostly used when text is 'justify' aligned. * @private */ - _reWords: /\S+/g, + _reWords: /\S+/g, - /** + /** * Type of an object * @type String * @default */ - type: 'text', + type: 'text', - /** + /** * Font size (in pixels) * @type Number * @default */ - fontSize: 40, + fontSize: 40, - /** + /** * Font weight (e.g. bold, normal, 400, 600, 800) * @type {(Number|String)} * @default */ - fontWeight: 'normal', + fontWeight: 'normal', - /** + /** * Font family * @type String * @default */ - fontFamily: 'Times New Roman', + fontFamily: 'Times New Roman', - /** + /** * Text decoration underline. * @type Boolean * @default */ - underline: false, + underline: false, - /** + /** * Text decoration overline. * @type Boolean * @default */ - overline: false, + overline: false, - /** + /** * Text decoration linethrough. * @type Boolean * @default */ - linethrough: false, + linethrough: false, - /** + /** * Text alignment. Possible values: "left", "center", "right", "justify", * "justify-left", "justify-center" or "justify-right". * @type String * @default */ - textAlign: 'left', + textAlign: 'left', - /** + /** * Font style . Possible values: "", "normal", "italic" or "oblique". * @type String * @default */ - fontStyle: 'normal', + fontStyle: 'normal', - /** + /** * Line height * @type Number * @default */ - lineHeight: 1.16, + lineHeight: 1.16, - /** + /** * Superscript schema object (minimum overlap) * @type {Object} * @default */ - superscript: { - size: 0.60, // fontSize factor - baseline: -0.35 // baseline-shift factor (upwards) - }, + superscript: { + size: 0.60, // fontSize factor + baseline: -0.35 // baseline-shift factor (upwards) + }, - /** + /** * Subscript schema object (minimum overlap) * @type {Object} * @default */ - subscript: { - size: 0.60, // fontSize factor - baseline: 0.11 // baseline-shift factor (downwards) - }, + subscript: { + size: 0.60, // fontSize factor + baseline: 0.11 // baseline-shift factor (downwards) + }, - /** + /** * Background color of text lines * @type String * @default */ - textBackgroundColor: '', + textBackgroundColor: '', - /** + /** * List of properties to consider when checking if * state of an object is changed ({@link fabric.Object#hasStateChanged}) * as well as for history (undo/redo) purposes * @type Array */ - stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), + stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), - /** + /** * List of properties to consider when checking if cache needs refresh * @type Array */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), + cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), - /** + /** * When defined, an object is rendered via stroke and this property specifies its color. * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 * @type String * @default */ - stroke: null, + stroke: null, - /** + /** * Shadow object representing shadow of this shape. * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 * @type fabric.Shadow * @default */ - shadow: null, + shadow: null, - /** + /** * fabric.Path that the text should follow. * since 4.6.0 the path will be drawn automatically. * if you want to make the path visible, give it a stroke and strokeWidth or fill value @@ -213,25 +214,25 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * }); * @default */ - path: null, + path: null, - /** + /** * Offset amount for text path starting position * Only used when text has a path * @type Number * @default */ - pathStartOffset: 0, + pathStartOffset: 0, - /** + /** * Which side of the path the text should be drawn on. * Only used when text has a path * @type {String} 'left|right' * @default */ - pathSide: 'left', + pathSide: 'left', - /** + /** * How text is aligned to the path. This property determines * the perpendicular position of each character relative to the path. * (one of "baseline", "center", "ascender", "descender") @@ -239,46 +240,46 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @type String * @default */ - pathAlign: 'baseline', + pathAlign: 'baseline', - /** + /** * @private */ - _fontSizeFraction: 0.222, + _fontSizeFraction: 0.222, - /** + /** * @private */ - offsets: { - underline: 0.10, - linethrough: -0.315, - overline: -0.88 - }, + offsets: { + underline: 0.10, + linethrough: -0.315, + overline: -0.88 + }, - /** + /** * Text Line proportion to font Size (in pixels) * @type Number * @default */ - _fontSizeMult: 1.13, + _fontSizeMult: 1.13, - /** + /** * additional space between characters * expressed in thousands of em unit * @type Number * @default */ - charSpacing: 0, + charSpacing: 0, - /** + /** * Object containing character styles - top-level properties -> line numbers, * 2nd-level properties - character numbers * @type Object * @default */ - styles: null, + styles: null, - /** + /** * Reference to a context to measure text char or couple of chars * the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas * once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every @@ -286,16 +287,16 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @type {CanvasRenderingContext2D} * @default */ - _measuringContext: null, + _measuringContext: null, - /** + /** * Baseline shift, styles only, keep at 0 for the main text object * @type {Number} * @default */ - deltaY: 0, + deltaY: 0, - /** + /** * WARNING: EXPERIMENTAL. NOT SUPPORTED YET * determine the direction of the text. * This has to be set manually together with textAlign and originX for proper @@ -306,82 +307,82 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @type {String} 'ltr|rtl' * @default */ - direction: 'ltr', + direction: 'ltr', - /** + /** * Array of properties that define a style unit (of 'styles'). * @type {Array} * @default */ - _styleProperties: [ - 'stroke', - 'strokeWidth', - 'fill', - 'fontFamily', - 'fontSize', - 'fontWeight', - 'fontStyle', - 'underline', - 'overline', - 'linethrough', - 'deltaY', - 'textBackgroundColor', - ], - - /** + _styleProperties: [ + 'stroke', + 'strokeWidth', + 'fill', + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'underline', + 'overline', + 'linethrough', + 'deltaY', + 'textBackgroundColor', + ], + + /** * contains characters bounding boxes */ - __charBounds: [], + __charBounds: [], - /** + /** * use this size when measuring text. To avoid IE11 rounding errors * @type {Number} * @default * @readonly * @private */ - CACHE_FONT_SIZE: 400, + CACHE_FONT_SIZE: 400, - /** + /** * contains the min text width to avoid getting 0 * @type {Number} * @default */ - MIN_TEXT_WIDTH: 2, + MIN_TEXT_WIDTH: 2, - /** + /** * Constructor * @param {String} text Text string * @param {Object} [options] Options object * @return {fabric.Text} thisArg */ - initialize: function(text, options) { - this.styles = options ? (options.styles || { }) : { }; - this.text = text; - this.__skipDimension = true; - this.callSuper('initialize', options); - if (this.path) { - this.setPathInfo(); - } - this.__skipDimension = false; - this.initDimensions(); - this.setCoords(); - this.setupState({ propertySet: '_dimensionAffectingProps' }); - }, + initialize: function(text, options) { + this.styles = options ? (options.styles || { }) : { }; + this.text = text; + this.__skipDimension = true; + this.callSuper('initialize', options); + if (this.path) { + this.setPathInfo(); + } + this.__skipDimension = false; + this.initDimensions(); + this.setCoords(); + this.setupState({ propertySet: '_dimensionAffectingProps' }); + }, - /** + /** * If text has a path, it will add the extra information needed * for path and text calculations * @return {fabric.Text} thisArg */ - setPathInfo: function() { - var path = this.path; - if (path) { - path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); - } - }, + setPathInfo: function() { + var path = this.path; + if (path) { + path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); + } + }, - /** + /** * Return a context for measurement of text string. * if created it gets stored for reuse * this is for internal use, please do not use it @@ -390,114 +391,114 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {Object} [options] Options object * @return {fabric.Text} thisArg */ - getMeasuringContext: function() { - // if we did not return we have to measure something. - if (!fabric._measuringContext) { - fabric._measuringContext = this.canvas && this.canvas.contextCache || + getMeasuringContext: function() { + // if we did not return we have to measure something. + if (!fabric._measuringContext) { + fabric._measuringContext = this.canvas && this.canvas.contextCache || fabric.util.createCanvasElement().getContext('2d'); - } - return fabric._measuringContext; - }, + } + return fabric._measuringContext; + }, - /** + /** * @private * Divides text into lines of text and lines of graphemes. */ - _splitText: function() { - var newLines = this._splitTextIntoLines(this.text); - this.textLines = newLines.lines; - this._textLines = newLines.graphemeLines; - this._unwrappedTextLines = newLines._unwrappedLines; - this._text = newLines.graphemeText; - return newLines; - }, + _splitText: function() { + var newLines = this._splitTextIntoLines(this.text); + this.textLines = newLines.lines; + this._textLines = newLines.graphemeLines; + this._unwrappedTextLines = newLines._unwrappedLines; + this._text = newLines.graphemeText; + return newLines; + }, - /** + /** * Initialize or update text dimensions. * Updates this.width and this.height with the proper values. * Does not return dimensions. */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this._splitText(); - this._clearCache(); - if (this.path) { - this.width = this.path.width; - this.height = this.path.height; - } - else { - this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; - this.height = this.calcTextHeight(); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this._splitText(); + this._clearCache(); + if (this.path) { + this.width = this.path.width; + this.height = this.path.height; + } + else { + this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; + this.height = this.calcTextHeight(); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, - /** + /** * Enlarge space boxes and shift the others */ - enlargeSpaces: function() { - var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; - for (var i = 0, len = this._textLines.length; i < len; i++) { - if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { - continue; - } - accumulatedSpace = 0; - line = this._textLines[i]; - currentLineWidth = this.getLineWidth(i); - if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { - numberOfSpaces = spaces.length; - diffSpace = (this.width - currentLineWidth) / numberOfSpaces; - for (var j = 0, jlen = line.length; j <= jlen; j++) { - charBound = this.__charBounds[i][j]; - if (this._reSpaceAndTab.test(line[j])) { - charBound.width += diffSpace; - charBound.kernedWidth += diffSpace; - charBound.left += accumulatedSpace; - accumulatedSpace += diffSpace; - } - else { - charBound.left += accumulatedSpace; + enlargeSpaces: function() { + var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { + continue; + } + accumulatedSpace = 0; + line = this._textLines[i]; + currentLineWidth = this.getLineWidth(i); + if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { + numberOfSpaces = spaces.length; + diffSpace = (this.width - currentLineWidth) / numberOfSpaces; + for (var j = 0, jlen = line.length; j <= jlen; j++) { + charBound = this.__charBounds[i][j]; + if (this._reSpaceAndTab.test(line[j])) { + charBound.width += diffSpace; + charBound.kernedWidth += diffSpace; + charBound.left += accumulatedSpace; + accumulatedSpace += diffSpace; + } + else { + charBound.left += accumulatedSpace; + } } } } - } - }, + }, - /** + /** * Detect if the text line is ended with an hard break * text and itext do not have wrapping, return false * @return {Boolean} */ - isEndOfWrapping: function(lineIndex) { - return lineIndex === this._textLines.length - 1; - }, + isEndOfWrapping: function(lineIndex) { + return lineIndex === this._textLines.length - 1; + }, - /** + /** * Detect if a line has a linebreak and so we need to account for it when moving * and counting style. * It return always for text and Itext. * @return Number */ - missingNewlineOffset: function() { - return 1; - }, + missingNewlineOffset: function() { + return 1; + }, - /** + /** * Returns string representation of an instance * @return {String} String representation of text object */ - toString: function() { - return '#'; - }, + }, - /** + /** * Return the dimension and the zoom level needed to create a cache canvas * big enough to host the object to be cached. * @private @@ -508,45 +509,45 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - _getCacheCanvasDimensions: function() { - var dims = this.callSuper('_getCacheCanvasDimensions'); - var fontSize = this.fontSize; - dims.width += fontSize * dims.zoomX; - dims.height += fontSize * dims.zoomY; - return dims; - }, + _getCacheCanvasDimensions: function() { + var dims = this.callSuper('_getCacheCanvasDimensions'); + var fontSize = this.fontSize; + dims.width += fontSize * dims.zoomX; + dims.height += fontSize * dims.zoomY; + return dims; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - var path = this.path; - path && !path.isNotVisible() && path._render(ctx); - this._setTextStyles(ctx); - this._renderTextLinesBackground(ctx); - this._renderTextDecoration(ctx, 'underline'); - this._renderText(ctx); - this._renderTextDecoration(ctx, 'overline'); - this._renderTextDecoration(ctx, 'linethrough'); - }, - - /** + _render: function(ctx) { + var path = this.path; + path && !path.isNotVisible() && path._render(ctx); + this._setTextStyles(ctx); + this._renderTextLinesBackground(ctx); + this._renderTextDecoration(ctx, 'underline'); + this._renderText(ctx); + this._renderTextDecoration(ctx, 'overline'); + this._renderTextDecoration(ctx, 'linethrough'); + }, + + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderText: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderTextStroke(ctx); - this._renderTextFill(ctx); - } - else { - this._renderTextFill(ctx); - this._renderTextStroke(ctx); - } - }, + _renderText: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderTextStroke(ctx); + this._renderTextFill(ctx); + } + else { + this._renderTextFill(ctx); + this._renderTextStroke(ctx); + } + }, - /** + /** * Set the font parameter of the context with the object properties or with charStyle * @private * @param {CanvasRenderingContext2D} ctx Context to render on @@ -556,43 +557,43 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {String} [charStyle.fontWeight] Font weight * @param {String} [charStyle.fontStyle] Font style (italic|normal) */ - _setTextStyles: function(ctx, charStyle, forMeasuring) { - ctx.textBaseline = 'alphabetical'; - if (this.path) { - switch (this.pathAlign) { - case 'center': - ctx.textBaseline = 'middle'; - break; - case 'ascender': - ctx.textBaseline = 'top'; - break; - case 'descender': - ctx.textBaseline = 'bottom'; - break; + _setTextStyles: function(ctx, charStyle, forMeasuring) { + ctx.textBaseline = 'alphabetical'; + if (this.path) { + switch (this.pathAlign) { + case 'center': + ctx.textBaseline = 'middle'; + break; + case 'ascender': + ctx.textBaseline = 'top'; + break; + case 'descender': + ctx.textBaseline = 'bottom'; + break; + } } - } - ctx.font = this._getFontDeclaration(charStyle, forMeasuring); - }, + ctx.font = this._getFontDeclaration(charStyle, forMeasuring); + }, - /** + /** * calculate and return the text Width measuring each line. * @private * @param {CanvasRenderingContext2D} ctx Context to render on * @return {Number} Maximum width of fabric.Text object */ - calcTextWidth: function() { - var maxWidth = this.getLineWidth(0); + calcTextWidth: function() { + var maxWidth = this.getLineWidth(0); - for (var i = 1, len = this._textLines.length; i < len; i++) { - var currentLineWidth = this.getLineWidth(i); - if (currentLineWidth > maxWidth) { - maxWidth = currentLineWidth; + for (var i = 1, len = this._textLines.length; i < len; i++) { + var currentLineWidth = this.getLineWidth(i); + if (currentLineWidth > maxWidth) { + maxWidth = currentLineWidth; + } } - } - return maxWidth; - }, + return maxWidth; + }, - /** + /** * @private * @param {String} method Method name ("fillText" or "strokeText") * @param {CanvasRenderingContext2D} ctx Context to render on @@ -601,96 +602,96 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {Number} top Top position of text * @param {Number} lineIndex Index of a line in a text */ - _renderTextLine: function(method, ctx, line, left, top, lineIndex) { - this._renderChars(method, ctx, line, left, top, lineIndex); - }, + _renderTextLine: function(method, ctx, line, left, top, lineIndex) { + this._renderChars(method, ctx, line, left, top, lineIndex); + }, - /** + /** * Renders the text background for lines, taking care of style * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextLinesBackground: function(ctx) { - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { - return; - } - var heightOfLine, - lineLeftOffset, originalFill = ctx.fillStyle, - line, lastColor, - leftOffset = this._getLeftOffset(), - lineTopOffset = this._getTopOffset(), - boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, - drawStart; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { - lineTopOffset += heightOfLine; - continue; - } - line = this._textLines[i]; - lineLeftOffset = this._getLineLeftOffset(i); - boxWidth = 0; - boxStart = 0; - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - ctx.fillStyle = currentColor; - currentColor && ctx.fillRect( - -charBox.width / 2, - -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), - charBox.width, - heightOfLine / this.lineHeight - ); - ctx.restore(); + _renderTextLinesBackground: function(ctx) { + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { + return; + } + var heightOfLine, + lineLeftOffset, originalFill = ctx.fillStyle, + line, lastColor, + leftOffset = this._getLeftOffset(), + lineTopOffset = this._getTopOffset(), + boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, + drawStart; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { + lineTopOffset += heightOfLine; + continue; + } + line = this._textLines[i]; + lineLeftOffset = this._getLineLeftOffset(i); + boxWidth = 0; + boxStart = 0; + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillStyle = currentColor; + currentColor && ctx.fillRect( + -charBox.width / 2, + -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), + charBox.width, + heightOfLine / this.lineHeight + ); + ctx.restore(); + } + else if (currentColor !== lastColor) { + drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = lastColor; + lastColor && ctx.fillRect( + drawStart, + lineTopOffset, + boxWidth, + heightOfLine / this.lineHeight + ); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; + } + else { + boxWidth += charBox.kernedWidth; + } } - else if (currentColor !== lastColor) { + if (currentColor && !path) { drawStart = leftOffset + lineLeftOffset + boxStart; if (this.direction === 'rtl') { drawStart = this.width - drawStart - boxWidth; } - ctx.fillStyle = lastColor; - lastColor && ctx.fillRect( + ctx.fillStyle = currentColor; + ctx.fillRect( drawStart, lineTopOffset, boxWidth, heightOfLine / this.lineHeight ); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; - } - else { - boxWidth += charBox.kernedWidth; - } - } - if (currentColor && !path) { - drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; } - ctx.fillStyle = currentColor; - ctx.fillRect( - drawStart, - lineTopOffset, - boxWidth, - heightOfLine / this.lineHeight - ); + lineTopOffset += heightOfLine; } - lineTopOffset += heightOfLine; - } - ctx.fillStyle = originalFill; - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, + ctx.fillStyle = originalFill; + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** + /** * @private * @param {Object} decl style declaration for cache * @param {String} decl.fontFamily fontFamily @@ -698,20 +699,20 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {String} decl.fontWeight fontWeight * @return {Object} reference to cache */ - getFontCache: function(decl) { - var fontFamily = decl.fontFamily.toLowerCase(); - if (!fabric.charWidthsCache[fontFamily]) { - fabric.charWidthsCache[fontFamily] = { }; - } - var cache = fabric.charWidthsCache[fontFamily], - cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); - if (!cache[cacheProp]) { - cache[cacheProp] = { }; - } - return cache[cacheProp]; - }, + getFontCache: function(decl) { + var fontFamily = decl.fontFamily.toLowerCase(); + if (!fabric.charWidthsCache[fontFamily]) { + fabric.charWidthsCache[fontFamily] = { }; + } + var cache = fabric.charWidthsCache[fontFamily], + cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); + if (!cache[cacheProp]) { + cache[cacheProp] = { }; + } + return cache[cacheProp]; + }, - /** + /** * measure and return the width of a single character. * possibly overridden to accommodate different measure logic or * to hook some external lib for character measurement @@ -721,137 +722,137 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {String} [previousChar] previous char * @param {Object} [prevCharStyle] style of previous char */ - _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { - // first i try to return from cache - var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), - previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, - stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, - fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; + _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { + // first i try to return from cache + var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), + previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, + stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, + fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; - if (previousChar && fontCache[previousChar] !== undefined) { - previousWidth = fontCache[previousChar]; - } - if (fontCache[_char] !== undefined) { - kernedWidth = width = fontCache[_char]; - } - if (stylesAreEqual && fontCache[couple] !== undefined) { - coupleWidth = fontCache[couple]; - kernedWidth = coupleWidth - previousWidth; - } - if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { - var ctx = this.getMeasuringContext(); - // send a TRUE to specify measuring font size CACHE_FONT_SIZE - this._setTextStyles(ctx, charStyle, true); - } - if (width === undefined) { - kernedWidth = width = ctx.measureText(_char).width; - fontCache[_char] = width; - } - if (previousWidth === undefined && stylesAreEqual && previousChar) { - previousWidth = ctx.measureText(previousChar).width; - fontCache[previousChar] = previousWidth; - } - if (stylesAreEqual && coupleWidth === undefined) { - // we can measure the kerning couple and subtract the width of the previous character - coupleWidth = ctx.measureText(couple).width; - fontCache[couple] = coupleWidth; - kernedWidth = coupleWidth - previousWidth; - } - return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; - }, + if (previousChar && fontCache[previousChar] !== undefined) { + previousWidth = fontCache[previousChar]; + } + if (fontCache[_char] !== undefined) { + kernedWidth = width = fontCache[_char]; + } + if (stylesAreEqual && fontCache[couple] !== undefined) { + coupleWidth = fontCache[couple]; + kernedWidth = coupleWidth - previousWidth; + } + if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { + var ctx = this.getMeasuringContext(); + // send a TRUE to specify measuring font size CACHE_FONT_SIZE + this._setTextStyles(ctx, charStyle, true); + } + if (width === undefined) { + kernedWidth = width = ctx.measureText(_char).width; + fontCache[_char] = width; + } + if (previousWidth === undefined && stylesAreEqual && previousChar) { + previousWidth = ctx.measureText(previousChar).width; + fontCache[previousChar] = previousWidth; + } + if (stylesAreEqual && coupleWidth === undefined) { + // we can measure the kerning couple and subtract the width of the previous character + coupleWidth = ctx.measureText(couple).width; + fontCache[couple] = coupleWidth; + kernedWidth = coupleWidth - previousWidth; + } + return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; + }, - /** + /** * Computes height of character at given position * @param {Number} line the line index number * @param {Number} _char the character index number * @return {Number} fontSize of the character */ - getHeightOfChar: function(line, _char) { - return this.getValueOfPropertyAt(line, _char, 'fontSize'); - }, + getHeightOfChar: function(line, _char) { + return this.getValueOfPropertyAt(line, _char, 'fontSize'); + }, - /** + /** * measure a text line measuring all characters. * @param {Number} lineIndex line number * @return {Number} Line width */ - measureLine: function(lineIndex) { - var lineInfo = this._measureLine(lineIndex); - if (this.charSpacing !== 0) { - lineInfo.width -= this._getWidthOfCharSpacing(); - } - if (lineInfo.width < 0) { - lineInfo.width = 0; - } - return lineInfo; - }, + measureLine: function(lineIndex) { + var lineInfo = this._measureLine(lineIndex); + if (this.charSpacing !== 0) { + lineInfo.width -= this._getWidthOfCharSpacing(); + } + if (lineInfo.width < 0) { + lineInfo.width = 0; + } + return lineInfo; + }, - /** + /** * measure every grapheme of a line, populating __charBounds * @param {Number} lineIndex * @return {Object} object.width total width of characters * @return {Object} object.widthOfSpaces length of chars that match this._reSpacesAndTabs */ - _measureLine: function(lineIndex) { - var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, - graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), - positionInPath = 0, startingPoint, totalPathLength, path = this.path, - reverse = this.pathSide === 'right'; - - this.__charBounds[lineIndex] = lineBounds; - for (i = 0; i < line.length; i++) { - grapheme = line[i]; - graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); - lineBounds[i] = graphemeInfo; - width += graphemeInfo.kernedWidth; - prevGrapheme = grapheme; - } - // this latest bound box represent the last character of the line - // to simplify cursor handling in interactive mode. - lineBounds[i] = { - left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, - width: 0, - kernedWidth: 0, - height: this.fontSize - }; - if (path) { - totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; - startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); - startingPoint.x += path.pathOffset.x; - startingPoint.y += path.pathOffset.y; - switch (this.textAlign) { - case 'left': - positionInPath = reverse ? (totalPathLength - width) : 0; - break; - case 'center': - positionInPath = (totalPathLength - width) / 2; - break; - case 'right': - positionInPath = reverse ? 0 : (totalPathLength - width); - break; - //todo - add support for justify + _measureLine: function(lineIndex) { + var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, + graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), + positionInPath = 0, startingPoint, totalPathLength, path = this.path, + reverse = this.pathSide === 'right'; + + this.__charBounds[lineIndex] = lineBounds; + for (i = 0; i < line.length; i++) { + grapheme = line[i]; + graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); + lineBounds[i] = graphemeInfo; + width += graphemeInfo.kernedWidth; + prevGrapheme = grapheme; } - positionInPath += this.pathStartOffset * (reverse ? -1 : 1); - for (i = reverse ? line.length - 1 : 0; - reverse ? i >= 0 : i < line.length; - reverse ? i-- : i++) { - graphemeInfo = lineBounds[i]; - if (positionInPath > totalPathLength) { - positionInPath %= totalPathLength; + // this latest bound box represent the last character of the line + // to simplify cursor handling in interactive mode. + lineBounds[i] = { + left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, + width: 0, + kernedWidth: 0, + height: this.fontSize + }; + if (path) { + totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; + startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); + startingPoint.x += path.pathOffset.x; + startingPoint.y += path.pathOffset.y; + switch (this.textAlign) { + case 'left': + positionInPath = reverse ? (totalPathLength - width) : 0; + break; + case 'center': + positionInPath = (totalPathLength - width) / 2; + break; + case 'right': + positionInPath = reverse ? 0 : (totalPathLength - width); + break; + //todo - add support for justify } - else if (positionInPath < 0) { - positionInPath += totalPathLength; + positionInPath += this.pathStartOffset * (reverse ? -1 : 1); + for (i = reverse ? line.length - 1 : 0; + reverse ? i >= 0 : i < line.length; + reverse ? i-- : i++) { + graphemeInfo = lineBounds[i]; + if (positionInPath > totalPathLength) { + positionInPath %= totalPathLength; + } + else if (positionInPath < 0) { + positionInPath += totalPathLength; + } + // it would probably much faster to send all the grapheme position for a line + // and calculate path position/angle at once. + this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); + positionInPath += graphemeInfo.kernedWidth; } - // it would probably much faster to send all the grapheme position for a line - // and calculate path position/angle at once. - this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); - positionInPath += graphemeInfo.kernedWidth; } - } - return { width: width, numOfSpaces: numOfSpaces }; - }, + return { width: width, numOfSpaces: numOfSpaces }; + }, - /** + /** * Calculate the angle and the left,top position of the char that follow a path. * It appends it to graphemeInfo to be reused later at rendering * @private @@ -859,18 +860,18 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {Object} graphemeInfo current grapheme box information * @param {Object} startingPoint position of the point */ - _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { - var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, - path = this.path; + _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { + var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, + path = this.path; - // we are at currentPositionOnPath. we want to know what point on the path is. - var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); - graphemeInfo.renderLeft = info.x - startingPoint.x; - graphemeInfo.renderTop = info.y - startingPoint.y; - graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); - }, + // we are at currentPositionOnPath. we want to know what point on the path is. + var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); + graphemeInfo.renderLeft = info.x - startingPoint.x; + graphemeInfo.renderTop = info.y - startingPoint.y; + graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); + }, - /** + /** * Measure and return the info of a single grapheme. * needs the the info of previous graphemes already filled * Override to customize measuring @@ -888,141 +889,141 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {String} [prevGrapheme] character preceding the one to be measured * @returns {GraphemeBBox} grapheme bbox */ - _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { - var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), - prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, - info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), - kernedWidth = info.kernedWidth, - width = info.width, charSpacing; - - if (this.charSpacing !== 0) { - charSpacing = this._getWidthOfCharSpacing(); - width += charSpacing; - kernedWidth += charSpacing; - } + _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { + var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), + prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, + info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), + kernedWidth = info.kernedWidth, + width = info.width, charSpacing; + + if (this.charSpacing !== 0) { + charSpacing = this._getWidthOfCharSpacing(); + width += charSpacing; + kernedWidth += charSpacing; + } - var box = { - width: width, - left: 0, - height: style.fontSize, - kernedWidth: kernedWidth, - deltaY: style.deltaY, - }; - if (charIndex > 0 && !skipLeft) { - var previousBox = this.__charBounds[lineIndex][charIndex - 1]; - box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; - } - return box; - }, + var box = { + width: width, + left: 0, + height: style.fontSize, + kernedWidth: kernedWidth, + deltaY: style.deltaY, + }; + if (charIndex > 0 && !skipLeft) { + var previousBox = this.__charBounds[lineIndex][charIndex - 1]; + box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; + } + return box; + }, - /** + /** * Calculate height of line at 'lineIndex' * @param {Number} lineIndex index of line to calculate * @return {Number} */ - getHeightOfLine: function(lineIndex) { - if (this.__lineHeights[lineIndex]) { - return this.__lineHeights[lineIndex]; - } + getHeightOfLine: function(lineIndex) { + if (this.__lineHeights[lineIndex]) { + return this.__lineHeights[lineIndex]; + } - var line = this._textLines[lineIndex], - // char 0 is measured before the line cycle because it nneds to char - // emptylines - maxHeight = this.getHeightOfChar(lineIndex, 0); - for (var i = 1, len = line.length; i < len; i++) { - maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); - } + var line = this._textLines[lineIndex], + // char 0 is measured before the line cycle because it nneds to char + // emptylines + maxHeight = this.getHeightOfChar(lineIndex, 0); + for (var i = 1, len = line.length; i < len; i++) { + maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); + } - return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; - }, + return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; + }, - /** + /** * Calculate text box height */ - calcTextHeight: function() { - var lineHeight, height = 0; - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineHeight = this.getHeightOfLine(i); - height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); - } - return height; - }, + calcTextHeight: function() { + var lineHeight, height = 0; + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineHeight = this.getHeightOfLine(i); + height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); + } + return height; + }, - /** + /** * @private * @return {Number} Left offset */ - _getLeftOffset: function() { - return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; - }, + _getLeftOffset: function() { + return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; + }, - /** + /** * @private * @return {Number} Top offset */ - _getTopOffset: function() { - return -this.height / 2; - }, + _getTopOffset: function() { + return -this.height / 2; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on * @param {String} method Method name ("fillText" or "strokeText") */ - _renderTextCommon: function(ctx, method) { - ctx.save(); - var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); - for (var i = 0, len = this._textLines.length; i < len; i++) { - var heightOfLine = this.getHeightOfLine(i), - maxHeight = heightOfLine / this.lineHeight, - leftOffset = this._getLineLeftOffset(i); - this._renderTextLine( - method, - ctx, - this._textLines[i], - left + leftOffset, - top + lineHeights + maxHeight, - i - ); - lineHeights += heightOfLine; - } - ctx.restore(); - }, + _renderTextCommon: function(ctx, method) { + ctx.save(); + var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); + for (var i = 0, len = this._textLines.length; i < len; i++) { + var heightOfLine = this.getHeightOfLine(i), + maxHeight = heightOfLine / this.lineHeight, + leftOffset = this._getLineLeftOffset(i); + this._renderTextLine( + method, + ctx, + this._textLines[i], + left + leftOffset, + top + lineHeights + maxHeight, + i + ); + lineHeights += heightOfLine; + } + ctx.restore(); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextFill: function(ctx) { - if (!this.fill && !this.styleHas('fill')) { - return; - } + _renderTextFill: function(ctx) { + if (!this.fill && !this.styleHas('fill')) { + return; + } - this._renderTextCommon(ctx, 'fillText'); - }, + this._renderTextCommon(ctx, 'fillText'); + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextStroke: function(ctx) { - if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { - return; - } + _renderTextStroke: function(ctx) { + if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { + return; + } - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); - } + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } - ctx.save(); - this._setLineDash(ctx, this.strokeDashArray); - ctx.beginPath(); - this._renderTextCommon(ctx, 'strokeText'); - ctx.closePath(); - ctx.restore(); - }, + ctx.save(); + this._setLineDash(ctx, this.strokeDashArray); + ctx.beginPath(); + this._renderTextCommon(ctx, 'strokeText'); + ctx.closePath(); + ctx.restore(); + }, - /** + /** * @private * @param {String} method fillText or strokeText. * @param {CanvasRenderingContext2D} ctx Context to render on @@ -1031,80 +1032,80 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {Number} top * @param {Number} lineIndex */ - _renderChars: function(method, ctx, line, left, top, lineIndex) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, - boxWidth = 0, - timeToRender, - path = this.path, - shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, - isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, - // this was changed in the PR #7674 - // currentDirection = ctx.canvas.getAttribute('dir'); - drawingLeft, currentDirection = ctx.direction; - ctx.save(); - if (currentDirection !== this.direction) { - ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); - ctx.direction = isLtr ? 'ltr' : 'rtl'; - ctx.textAlign = isLtr ? 'left' : 'right'; - } - top -= lineHeight * this._fontSizeFraction / this.lineHeight; - if (shortCut) { - // render all the line in one pass without checking - // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); - this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); - ctx.restore(); - return; - } - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing || path; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - left += sign * (charBox.kernedWidth - charBox.width); - boxWidth += charBox.width; - } - else { - boxWidth += charBox.kernedWidth; + _renderChars: function(method, ctx, line, left, top, lineIndex) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, + boxWidth = 0, + timeToRender, + path = this.path, + shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, + isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, + // this was changed in the PR #7674 + // currentDirection = ctx.canvas.getAttribute('dir'); + drawingLeft, currentDirection = ctx.direction; + ctx.save(); + if (currentDirection !== this.direction) { + ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); + ctx.direction = isLtr ? 'ltr' : 'rtl'; + ctx.textAlign = isLtr ? 'left' : 'right'; } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; - } + top -= lineHeight * this._fontSizeFraction / this.lineHeight; + if (shortCut) { + // render all the line in one pass without checking + // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); + this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); + ctx.restore(); + return; } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChanged(actualStyle, nextStyle); - } - if (timeToRender) { - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); - ctx.restore(); + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing || path; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + left += sign * (charBox.kernedWidth - charBox.width); + boxWidth += charBox.width; } else { - drawingLeft = left; - this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; + } + } + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChanged(actualStyle, nextStyle); + } + if (timeToRender) { + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); + ctx.restore(); + } + else { + drawingLeft = left; + this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); + } + charsToRender = ''; + actualStyle = nextStyle; + left += sign * boxWidth; + boxWidth = 0; } - charsToRender = ''; - actualStyle = nextStyle; - left += sign * boxWidth; - boxWidth = 0; } - } - ctx.restore(); - }, + ctx.restore(); + }, - /** + /** * This function try to patch the missing gradientTransform on canvas gradients. * transforming a context to transform the gradient, is going to transform the stroke too. * we want to transform the gradient but not the stroke operation, so we create @@ -1115,63 +1116,63 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {fabric.Gradient} filler a fabric gradient instance * @return {CanvasPattern} a pattern to use as fill/stroke style */ - _applyPatternGradientTransformText: function(filler) { - var pCanvas = fabric.util.createCanvasElement(), pCtx, - // TODO: verify compatibility with strokeUniform - width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.fillStyle = filler.toLive(pCtx); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fill(); - return pCtx.createPattern(pCanvas, 'no-repeat'); - }, - - handleFiller: function(ctx, property, filler) { - var offsetX, offsetY; - if (filler.toLive) { - if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - offsetX = -this.width / 2; - offsetY = -this.height / 2; - ctx.translate(offsetX, offsetY); - ctx[property] = this._applyPatternGradientTransformText(filler); - return { offsetX: offsetX, offsetY: offsetY }; + _applyPatternGradientTransformText: function(filler) { + var pCanvas = fabric.util.createCanvasElement(), pCtx, + // TODO: verify compatibility with strokeUniform + width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.fillStyle = filler.toLive(pCtx); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fill(); + return pCtx.createPattern(pCanvas, 'no-repeat'); + }, + + handleFiller: function(ctx, property, filler) { + var offsetX, offsetY; + if (filler.toLive) { + if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + offsetX = -this.width / 2; + offsetY = -this.height / 2; + ctx.translate(offsetX, offsetY); + ctx[property] = this._applyPatternGradientTransformText(filler); + return { offsetX: offsetX, offsetY: offsetY }; + } + else { + // is a simple gradient or pattern + ctx[property] = filler.toLive(ctx, this); + return this._applyPatternGradientTransform(ctx, filler); + } } else { - // is a simple gradient or pattern - ctx[property] = filler.toLive(ctx, this); - return this._applyPatternGradientTransform(ctx, filler); + // is a color + ctx[property] = filler; } - } - else { - // is a color - ctx[property] = filler; - } - return { offsetX: 0, offsetY: 0 }; - }, - - _setStrokeStyles: function(ctx, decl) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = this.strokeLineCap; - ctx.lineDashOffset = this.strokeDashOffset; - ctx.lineJoin = this.strokeLineJoin; - ctx.miterLimit = this.strokeMiterLimit; - return this.handleFiller(ctx, 'strokeStyle', decl.stroke); - }, - - _setFillStyles: function(ctx, decl) { - return this.handleFiller(ctx, 'fillStyle', decl.fill); - }, - - /** + return { offsetX: 0, offsetY: 0 }; + }, + + _setStrokeStyles: function(ctx, decl) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = this.strokeLineCap; + ctx.lineDashOffset = this.strokeDashOffset; + ctx.lineJoin = this.strokeLineJoin; + ctx.miterLimit = this.strokeMiterLimit; + return this.handleFiller(ctx, 'strokeStyle', decl.stroke); + }, + + _setFillStyles: function(ctx, decl) { + return this.handleFiller(ctx, 'fillStyle', decl.fill); + }, + + /** * @private * @param {String} method * @param {CanvasRenderingContext2D} ctx Context to render on @@ -1182,58 +1183,58 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @param {Number} top Top coordinate * @param {Number} lineHeight Height of the line */ - _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { - var decl = this._getStyleDeclaration(lineIndex, charIndex), - fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), - shouldFill = method === 'fillText' && fullDecl.fill, - shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, - fillOffsets, strokeOffsets; + _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { + var decl = this._getStyleDeclaration(lineIndex, charIndex), + fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), + shouldFill = method === 'fillText' && fullDecl.fill, + shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, + fillOffsets, strokeOffsets; - if (!shouldStroke && !shouldFill) { - return; - } - ctx.save(); + if (!shouldStroke && !shouldFill) { + return; + } + ctx.save(); - shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); - shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); + shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); + shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); - ctx.font = this._getFontDeclaration(fullDecl); + ctx.font = this._getFontDeclaration(fullDecl); - if (decl && decl.textBackgroundColor) { - this._removeShadow(ctx); - } - if (decl && decl.deltaY) { - top += decl.deltaY; - } - shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); - shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); - ctx.restore(); - }, + if (decl && decl.textBackgroundColor) { + this._removeShadow(ctx); + } + if (decl && decl.deltaY) { + top += decl.deltaY; + } + shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); + shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); + ctx.restore(); + }, - /** + /** * Turns the character into a 'superior figure' (i.e. 'superscript') * @param {Number} start selection start * @param {Number} end selection end * @returns {fabric.Text} thisArg * @chainable */ - setSuperscript: function(start, end) { - return this._setScript(start, end, this.superscript); - }, + setSuperscript: function(start, end) { + return this._setScript(start, end, this.superscript); + }, - /** + /** * Turns the character into an 'inferior figure' (i.e. 'subscript') * @param {Number} start selection start * @param {Number} end selection end * @returns {fabric.Text} thisArg * @chainable */ - setSubscript: function(start, end) { - return this._setScript(start, end, this.subscript); - }, + setSubscript: function(start, end) { + return this._setScript(start, end, this.subscript); + }, - /** + /** * Applies 'schema' at given position * @private * @param {Number} start selection start @@ -1242,22 +1243,22 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot * @returns {fabric.Text} thisArg * @chainable */ - _setScript: function(start, end, schema) { - var loc = this.get2DCursorLocation(start, true), - fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), - dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), - style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; - this.setSelectionStyles(style, start, end); - return this; - }, + _setScript: function(start, end, schema) { + var loc = this.get2DCursorLocation(start, true), + fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), + dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), + style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; + this.setSelectionStyles(style, start, end); + return this; + }, - /** + /** * @private * @param {Object} prevStyle * @param {Object} thisStyle */ - _hasStyleChanged: function(prevStyle, thisStyle) { - return prevStyle.fill !== thisStyle.fill || + _hasStyleChanged: function(prevStyle, thisStyle) { + return prevStyle.fill !== thisStyle.fill || prevStyle.stroke !== thisStyle.stroke || prevStyle.strokeWidth !== thisStyle.strokeWidth || prevStyle.fontSize !== thisStyle.fontSize || @@ -1265,367 +1266,367 @@ fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prot prevStyle.fontWeight !== thisStyle.fontWeight || prevStyle.fontStyle !== thisStyle.fontStyle || prevStyle.deltaY !== thisStyle.deltaY; - }, + }, - /** + /** * @private * @param {Object} prevStyle * @param {Object} thisStyle */ - _hasStyleChangedForSvg: function(prevStyle, thisStyle) { - return this._hasStyleChanged(prevStyle, thisStyle) || + _hasStyleChangedForSvg: function(prevStyle, thisStyle) { + return this._hasStyleChanged(prevStyle, thisStyle) || prevStyle.overline !== thisStyle.overline || prevStyle.underline !== thisStyle.underline || prevStyle.linethrough !== thisStyle.linethrough; - }, + }, - /** + /** * @private * @param {Number} lineIndex index text line * @return {Number} Line left offset */ - _getLineLeftOffset: function(lineIndex) { - var lineWidth = this.getLineWidth(lineIndex), - lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, - isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); - if (textAlign === 'justify' + _getLineLeftOffset: function(lineIndex) { + var lineWidth = this.getLineWidth(lineIndex), + lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, + isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); + if (textAlign === 'justify' || (textAlign === 'justify-center' && !isEndOfWrapping) || (textAlign === 'justify-right' && !isEndOfWrapping) || (textAlign === 'justify-left' && !isEndOfWrapping) - ) { - return 0; - } - if (textAlign === 'center') { - leftOffset = lineDiff / 2; - } - if (textAlign === 'right') { - leftOffset = lineDiff; - } - if (textAlign === 'justify-center') { - leftOffset = lineDiff / 2; - } - if (textAlign === 'justify-right') { - leftOffset = lineDiff; - } - if (direction === 'rtl') { - if (textAlign === 'right' || textAlign === 'justify' || textAlign === 'justify-right') { - leftOffset = 0; + ) { + return 0; } - else if (textAlign === 'left' || textAlign === 'justify-left') { - leftOffset = -lineDiff; + if (textAlign === 'center') { + leftOffset = lineDiff / 2; } - else if (textAlign === 'center' || textAlign === 'justify-center') { - leftOffset = -lineDiff / 2; + if (textAlign === 'right') { + leftOffset = lineDiff; } - } - return leftOffset; - }, + if (textAlign === 'justify-center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'justify-right') { + leftOffset = lineDiff; + } + if (direction === 'rtl') { + if (textAlign === 'right' || textAlign === 'justify' || textAlign === 'justify-right') { + leftOffset = 0; + } + else if (textAlign === 'left' || textAlign === 'justify-left') { + leftOffset = -lineDiff; + } + else if (textAlign === 'center' || textAlign === 'justify-center') { + leftOffset = -lineDiff / 2; + } + } + return leftOffset; + }, - /** + /** * @private */ - _clearCache: function() { - this.__lineWidths = []; - this.__lineHeights = []; - this.__charBounds = []; - }, + _clearCache: function() { + this.__lineWidths = []; + this.__lineHeights = []; + this.__charBounds = []; + }, - /** + /** * @private */ - _shouldClearDimensionCache: function() { - var shouldClear = this._forceClearCache; - shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); - if (shouldClear) { - this.dirty = true; - this._forceClearCache = false; - } - return shouldClear; - }, + _shouldClearDimensionCache: function() { + var shouldClear = this._forceClearCache; + shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); + if (shouldClear) { + this.dirty = true; + this._forceClearCache = false; + } + return shouldClear; + }, - /** + /** * Measure a single line given its index. Used to calculate the initial * text bounding box. The values are calculated and stored in __lineWidths cache. * @private * @param {Number} lineIndex line number * @return {Number} Line width */ - getLineWidth: function(lineIndex) { - if (this.__lineWidths[lineIndex] !== undefined) { - return this.__lineWidths[lineIndex]; - } + getLineWidth: function(lineIndex) { + if (this.__lineWidths[lineIndex] !== undefined) { + return this.__lineWidths[lineIndex]; + } - var lineInfo = this.measureLine(lineIndex); - var width = lineInfo.width; - this.__lineWidths[lineIndex] = width; - return width; - }, + var lineInfo = this.measureLine(lineIndex); + var width = lineInfo.width; + this.__lineWidths[lineIndex] = width; + return width; + }, - _getWidthOfCharSpacing: function() { - if (this.charSpacing !== 0) { - return this.fontSize * this.charSpacing / 1000; - } - return 0; - }, + _getWidthOfCharSpacing: function() { + if (this.charSpacing !== 0) { + return this.fontSize * this.charSpacing / 1000; + } + return 0; + }, - /** + /** * Retrieves the value of property at given character position * @param {Number} lineIndex the line number * @param {Number} charIndex the character number * @param {String} property the property name * @returns the value of 'property' */ - getValueOfPropertyAt: function(lineIndex, charIndex, property) { - var charStyle = this._getStyleDeclaration(lineIndex, charIndex); - if (charStyle && typeof charStyle[property] !== 'undefined') { - return charStyle[property]; - } - return this[property]; - }, + getValueOfPropertyAt: function(lineIndex, charIndex, property) { + var charStyle = this._getStyleDeclaration(lineIndex, charIndex); + if (charStyle && typeof charStyle[property] !== 'undefined') { + return charStyle[property]; + } + return this[property]; + }, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _renderTextDecoration: function(ctx, type) { - if (!this[type] && !this.styleHas(type)) { - return; - } - var heightOfLine, size, _size, - lineLeftOffset, dy, _dy, - line, lastDecoration, - leftOffset = this._getLeftOffset(), - topOffset = this._getTopOffset(), top, - boxStart, boxWidth, charBox, currentDecoration, - maxHeight, currentFill, lastFill, path = this.path, - charSpacing = this._getWidthOfCharSpacing(), - offsetY = this.offsets[type]; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this[type] && !this.styleHas(type, i)) { - topOffset += heightOfLine; - continue; - } - line = this._textLines[i]; - maxHeight = heightOfLine / this.lineHeight; - lineLeftOffset = this._getLineLeftOffset(i); - boxStart = 0; - boxWidth = 0; - lastDecoration = this.getValueOfPropertyAt(i, 0, type); - lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); - top = topOffset + maxHeight * (1 - this._fontSizeFraction); - size = this.getHeightOfChar(i, 0); - dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentDecoration = this.getValueOfPropertyAt(i, j, type); - currentFill = this.getValueOfPropertyAt(i, j, 'fill'); - _size = this.getHeightOfChar(i, j); - _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); - if (path && currentDecoration && currentFill) { - ctx.save(); - ctx.fillStyle = lastFill; - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - ctx.fillRect( - -charBox.kernedWidth / 2, - offsetY * _size + _dy, - charBox.kernedWidth, - this.fontSize / 15 - ); - ctx.restore(); + _renderTextDecoration: function(ctx, type) { + if (!this[type] && !this.styleHas(type)) { + return; + } + var heightOfLine, size, _size, + lineLeftOffset, dy, _dy, + line, lastDecoration, + leftOffset = this._getLeftOffset(), + topOffset = this._getTopOffset(), top, + boxStart, boxWidth, charBox, currentDecoration, + maxHeight, currentFill, lastFill, path = this.path, + charSpacing = this._getWidthOfCharSpacing(), + offsetY = this.offsets[type]; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this[type] && !this.styleHas(type, i)) { + topOffset += heightOfLine; + continue; } - else if ( - (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) - && boxWidth > 0 - ) { - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - if (lastDecoration && lastFill) { + line = this._textLines[i]; + maxHeight = heightOfLine / this.lineHeight; + lineLeftOffset = this._getLineLeftOffset(i); + boxStart = 0; + boxWidth = 0; + lastDecoration = this.getValueOfPropertyAt(i, 0, type); + lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); + top = topOffset + maxHeight * (1 - this._fontSizeFraction); + size = this.getHeightOfChar(i, 0); + dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentDecoration = this.getValueOfPropertyAt(i, j, type); + currentFill = this.getValueOfPropertyAt(i, j, 'fill'); + _size = this.getHeightOfChar(i, j); + _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); + if (path && currentDecoration && currentFill) { + ctx.save(); ctx.fillStyle = lastFill; + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth, + -charBox.kernedWidth / 2, + offsetY * _size + _dy, + charBox.kernedWidth, this.fontSize / 15 ); + ctx.restore(); + } + else if ( + (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) + && boxWidth > 0 + ) { + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + if (lastDecoration && lastFill) { + ctx.fillStyle = lastFill; + ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth, + this.fontSize / 15 + ); + } + boxStart = charBox.left; + boxWidth = charBox.width; + lastDecoration = currentDecoration; + lastFill = currentFill; + size = _size; + dy = _dy; + } + else { + boxWidth += charBox.kernedWidth; } - boxStart = charBox.left; - boxWidth = charBox.width; - lastDecoration = currentDecoration; - lastFill = currentFill; - size = _size; - dy = _dy; } - else { - boxWidth += charBox.kernedWidth; + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; } + ctx.fillStyle = currentFill; + currentDecoration && currentFill && ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth - charSpacing, + this.fontSize / 15 + ); + topOffset += heightOfLine; } - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - ctx.fillStyle = currentFill; - currentDecoration && currentFill && ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth - charSpacing, - this.fontSize / 15 - ); - topOffset += heightOfLine; - } - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** + /** * return font declaration string for canvas context * @param {Object} [styleObject] object * @returns {String} font declaration formatted for canvas context. */ - _getFontDeclaration: function(styleObject, forMeasuring) { - var style = styleObject || this, family = this.fontFamily, - fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; - var fontFamily = family === undefined || + _getFontDeclaration: function(styleObject, forMeasuring) { + var style = styleObject || this, family = this.fontFamily, + fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; + var fontFamily = family === undefined || family.indexOf('\'') > -1 || family.indexOf(',') > -1 || family.indexOf('"') > -1 || fontIsGeneric - ? style.fontFamily : '"' + style.fontFamily + '"'; - return [ - // node-canvas needs "weight style", while browsers need "style weight" - // verify if this can be fixed in JSDOM - (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), - (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), - forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', - fontFamily - ].join(' '); - }, - - /** + ? style.fontFamily : '"' + style.fontFamily + '"'; + return [ + // node-canvas needs "weight style", while browsers need "style weight" + // verify if this can be fixed in JSDOM + (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), + (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), + forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', + fontFamily + ].join(' '); + }, + + /** * Renders text instance on a specified context * @param {CanvasRenderingContext2D} ctx Context to render on */ - render: function(ctx) { - // do not render if object is not visible - if (!this.visible) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - } - this.callSuper('render', ctx); - }, + render: function(ctx) { + // do not render if object is not visible + if (!this.visible) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + } + this.callSuper('render', ctx); + }, - /** + /** * Override this method to customize grapheme splitting * @param {string} value * @returns {string[]} array of graphemes */ - graphemeSplit: function (value) { - return fabric.util.string.graphemeSplit(value); - }, + graphemeSplit: function (value) { + return fabric.util.string.graphemeSplit(value); + }, - /** + /** * Returns the text as an array of lines. * @param {String} text text to split * @returns {Array} Lines in the text */ - _splitTextIntoLines: function(text) { - var lines = text.split(this._reNewline), - newLines = new Array(lines.length), - newLine = ['\n'], - newText = []; - for (var i = 0; i < lines.length; i++) { - newLines[i] = this.graphemeSplit(lines[i]); - newText = newText.concat(newLines[i], newLine); - } - newText.pop(); - return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; - }, + _splitTextIntoLines: function(text) { + var lines = text.split(this._reNewline), + newLines = new Array(lines.length), + newLine = ['\n'], + newText = []; + for (var i = 0; i < lines.length; i++) { + newLines[i] = this.graphemeSplit(lines[i]); + newText = newText.concat(newLines[i], newLine); + } + newText.pop(); + return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; + }, - /** + /** * Returns object representation of an instance * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} Object representation of an instance */ - toObject: function(propertiesToInclude) { - var allProperties = additionalProps.concat(propertiesToInclude); - var obj = this.callSuper('toObject', allProperties); - // styles will be overridden with a properly cloned structure - obj.styles = clone(this.styles, true); - if (obj.path) { - obj.path = this.path.toObject(); - } - return obj; - }, + toObject: function(propertiesToInclude) { + var allProperties = additionalProps.concat(propertiesToInclude); + var obj = this.callSuper('toObject', allProperties); + // styles will be overridden with a properly cloned structure + obj.styles = clone(this.styles, true); + if (obj.path) { + obj.path = this.path.toObject(); + } + return obj; + }, - /** + /** * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. * @param {String|Object} key Property name or object (if object, iterate over the object properties) * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) * @return {fabric.Object} thisArg * @chainable */ - set: function(key, value) { - this.callSuper('set', key, value); - var needsDims = false; - var isAddingPath = false; - if (typeof key === 'object') { - for (var _key in key) { - if (_key === 'path') { - this.setPathInfo(); + set: function(key, value) { + this.callSuper('set', key, value); + var needsDims = false; + var isAddingPath = false; + if (typeof key === 'object') { + for (var _key in key) { + if (_key === 'path') { + this.setPathInfo(); + } + needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; + isAddingPath = isAddingPath || _key === 'path'; } - needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; - isAddingPath = isAddingPath || _key === 'path'; } - } - else { - needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; - isAddingPath = key === 'path'; - } - if (isAddingPath) { - this.setPathInfo(); - } - if (needsDims) { - this.initDimensions(); - this.setCoords(); - } - return this; - }, + else { + needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; + isAddingPath = key === 'path'; + } + if (isAddingPath) { + this.setPathInfo(); + } + if (needsDims) { + this.initDimensions(); + this.setCoords(); + } + return this; + }, - /** + /** * Returns complexity of an instance * @return {Number} complexity */ - complexity: function() { - return 1; - } -}); + complexity: function() { + return 1; + } + }); -/* _FROM_SVG_START_ */ -/** + /* _FROM_SVG_START_ */ + /** * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement}) * @static * @memberOf fabric.Text * @see: http://www.w3.org/TR/SVG/text.html#TextElement */ -fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( - 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); + fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( + 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); -/** + /** * Default SVG font size * @static * @memberOf fabric.Text */ -fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; + fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; -/** + /** * Returns fabric.Text instance from an SVG element (not yet implemented) * @static * @memberOf fabric.Text @@ -1633,97 +1634,99 @@ fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; * @param {Function} callback callback function invoked after parsing * @param {Object} [options] Options object */ -fabric.Text.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); - } - - var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), - parsedAnchor = parsedAttributes.textAnchor || 'left'; - options = Object.assign({}, options, parsedAttributes); - - options.top = options.top || 0; - options.left = options.left || 0; - if (parsedAttributes.textDecoration) { - var textDecoration = parsedAttributes.textDecoration; - if (textDecoration.indexOf('underline') !== -1) { - options.underline = true; + fabric.Text.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } + + var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), + parsedAnchor = parsedAttributes.textAnchor || 'left'; + options = Object.assign({}, options, parsedAttributes); + + options.top = options.top || 0; + options.left = options.left || 0; + if (parsedAttributes.textDecoration) { + var textDecoration = parsedAttributes.textDecoration; + if (textDecoration.indexOf('underline') !== -1) { + options.underline = true; + } + if (textDecoration.indexOf('overline') !== -1) { + options.overline = true; + } + if (textDecoration.indexOf('line-through') !== -1) { + options.linethrough = true; + } + delete options.textDecoration; + } + if ('dx' in parsedAttributes) { + options.left += parsedAttributes.dx; } - if (textDecoration.indexOf('overline') !== -1) { - options.overline = true; + if ('dy' in parsedAttributes) { + options.top += parsedAttributes.dy; } - if (textDecoration.indexOf('line-through') !== -1) { - options.linethrough = true; + if (!('fontSize' in options)) { + options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; } - delete options.textDecoration; - } - if ('dx' in parsedAttributes) { - options.left += parsedAttributes.dx; - } - if ('dy' in parsedAttributes) { - options.top += parsedAttributes.dy; - } - if (!('fontSize' in options)) { - options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; - } - - var textContent = ''; - - // The XML is not properly parsed in IE9 so a workaround to get - // textContent is through firstChild.data. Another workaround would be - // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) - if (!('textContent' in element)) { - if ('firstChild' in element && element.firstChild !== null) { - if ('data' in element.firstChild && element.firstChild.data !== null) { - textContent = element.firstChild.data; + + var textContent = ''; + + // The XML is not properly parsed in IE9 so a workaround to get + // textContent is through firstChild.data. Another workaround would be + // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) + if (!('textContent' in element)) { + if ('firstChild' in element && element.firstChild !== null) { + if ('data' in element.firstChild && element.firstChild.data !== null) { + textContent = element.firstChild.data; + } } } - } - else { - textContent = element.textContent; - } - - textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); - var originalStrokeWidth = options.strokeWidth; - options.strokeWidth = 0; - - var text = new fabric.Text(textContent, options), - textHeightScaleFactor = text.getScaledHeight() / text.height, - lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, - scaledDiff = lineHeightDiff * textHeightScaleFactor, - textHeight = text.getScaledHeight() + scaledDiff, - offX = 0; - /* + else { + textContent = element.textContent; + } + + textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); + var originalStrokeWidth = options.strokeWidth; + options.strokeWidth = 0; + + var text = new fabric.Text(textContent, options), + textHeightScaleFactor = text.getScaledHeight() / text.height, + lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, + scaledDiff = lineHeightDiff * textHeightScaleFactor, + textHeight = text.getScaledHeight() + scaledDiff, + offX = 0; + /* Adjust positioning: x/y attributes in SVG correspond to the bottom-left corner of text bounding box fabric output by default at top, left. */ - if (parsedAnchor === 'center') { - offX = text.getScaledWidth() / 2; - } - if (parsedAnchor === 'right') { - offX = text.getScaledWidth(); - } - text.set({ - left: text.left - offX, - top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, - strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, - }); - callback(text); -}; -/* _FROM_SVG_END_ */ + if (parsedAnchor === 'center') { + offX = text.getScaledWidth() / 2; + } + if (parsedAnchor === 'right') { + offX = text.getScaledWidth(); + } + text.set({ + left: text.left - offX, + top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, + strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, + }); + callback(text); + }; + /* _FROM_SVG_END_ */ -/** + /** * Returns fabric.Text instance from an object representation * @static * @memberOf fabric.Text * @param {Object} object plain js Object to create an instance from * @returns {Promise} */ -fabric.Text.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Text, object, 'text'); -}; + fabric.Text.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Text, object, 'text'); + }; + + fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; -fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); -fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js index 1fc29113129..d03f0a48f01 100644 --- a/src/shapes/textbox.class.js +++ b/src/shapes/textbox.class.js @@ -1,6 +1,7 @@ -var fabric = exports.fabric || (exports.fabric = {}); +(function(global) { + var fabric = global.fabric || (global.fabric = {}); -/** + /** * Textbox class, based on IText, allows the user to resize the text rectangle * and wraps lines automatically. Textboxes have their Y scaling locked, the * user can only change width. Height is adjusted automatically based on the @@ -11,226 +12,226 @@ var fabric = exports.fabric || (exports.fabric = {}); * @return {fabric.Textbox} thisArg * @see {@link fabric.Textbox#initialize} for constructor definition */ -fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { + fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { - /** + /** * Type of an object * @type String * @default */ - type: 'textbox', + type: 'textbox', - /** + /** * Minimum width of textbox, in pixels. * @type Number * @default */ - minWidth: 20, + minWidth: 20, - /** + /** * Minimum calculated width of a textbox, in pixels. * fixed to 2 so that an empty textbox cannot go to 0 * and is still selectable without text. * @type Number * @default */ - dynamicMinWidth: 2, + dynamicMinWidth: 2, - /** + /** * Cached array of text wrapping. * @type Array */ - __cachedLines: null, + __cachedLines: null, - /** + /** * Override standard Object class values */ - lockScalingFlip: true, + lockScalingFlip: true, - /** + /** * Override standard Object class values * Textbox needs this on false */ - noScaleCache: false, + noScaleCache: false, - /** + /** * Properties which when set cause object to change dimensions * @type Object * @private */ - _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), + _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), - /** + /** * Use this regular expression to split strings in breakable lines * @private */ - _wordJoiners: /[ \t\r]/, + _wordJoiners: /[ \t\r]/, - /** + /** * Use this boolean property in order to split strings that have no white space concept. * this is a cheap way to help with chinese/japanese * @type Boolean * @since 2.6.0 */ - splitByGrapheme: false, + splitByGrapheme: false, - /** + /** * Unlike superclass's version of this function, Textbox does not update * its width. * @private * @override */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this._clearCache(); - // clear dynamicMinWidth as it will be different after we re-wrap line - this.dynamicMinWidth = 0; - // wrap lines - this._styleMap = this._generateStyleMap(this._splitText()); - // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap - if (this.dynamicMinWidth > this.width) { - this._set('width', this.dynamicMinWidth); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - // clear cache and re-calculate height - this.height = this.calcTextHeight(); - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this._clearCache(); + // clear dynamicMinWidth as it will be different after we re-wrap line + this.dynamicMinWidth = 0; + // wrap lines + this._styleMap = this._generateStyleMap(this._splitText()); + // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap + if (this.dynamicMinWidth > this.width) { + this._set('width', this.dynamicMinWidth); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + // clear cache and re-calculate height + this.height = this.calcTextHeight(); + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, - /** + /** * Generate an object that translates the style object so that it is * broken up by visual lines (new lines and automatic wrapping). * The original text styles object is broken up by actual lines (new lines only), * which is only sufficient for Text / IText * @private */ - _generateStyleMap: function(textInfo) { - var realLineCount = 0, - realLineCharCount = 0, - charCount = 0, - map = {}; - - for (var i = 0; i < textInfo.graphemeLines.length; i++) { - if (textInfo.graphemeText[charCount] === '\n' && i > 0) { - realLineCharCount = 0; - charCount++; - realLineCount++; - } - else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { - // this case deals with space's that are removed from end of lines when wrapping - realLineCharCount++; - charCount++; - } + _generateStyleMap: function(textInfo) { + var realLineCount = 0, + realLineCharCount = 0, + charCount = 0, + map = {}; + + for (var i = 0; i < textInfo.graphemeLines.length; i++) { + if (textInfo.graphemeText[charCount] === '\n' && i > 0) { + realLineCharCount = 0; + charCount++; + realLineCount++; + } + else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { + // this case deals with space's that are removed from end of lines when wrapping + realLineCharCount++; + charCount++; + } - map[i] = { line: realLineCount, offset: realLineCharCount }; + map[i] = { line: realLineCount, offset: realLineCharCount }; - charCount += textInfo.graphemeLines[i].length; - realLineCharCount += textInfo.graphemeLines[i].length; - } + charCount += textInfo.graphemeLines[i].length; + realLineCharCount += textInfo.graphemeLines[i].length; + } - return map; - }, + return map; + }, - /** + /** * Returns true if object has a style property or has it on a specified line * @param {Number} lineIndex * @return {Boolean} */ - styleHas: function(property, lineIndex) { - if (this._styleMap && !this.isWrapping) { - var map = this._styleMap[lineIndex]; - if (map) { - lineIndex = map.line; + styleHas: function(property, lineIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (map) { + lineIndex = map.line; + } } - } - return fabric.Text.prototype.styleHas.call(this, property, lineIndex); - }, + return fabric.Text.prototype.styleHas.call(this, property, lineIndex); + }, - /** + /** * Returns true if object has no styling or no styling in a line * @param {Number} lineIndex , lineIndex is on wrapped lines. * @return {Boolean} */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { - return true; - } - var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, - map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; - if (map) { - lineIndex = map.line; - offset = map.offset; - } - if (mapNextLine) { - nextLineIndex = mapNextLine.line; - shouldLimit = nextLineIndex === lineIndex; - nextOffset = mapNextLine.offset; - } - obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, + map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; + if (map) { + lineIndex = map.line; + offset = map.offset; + } + if (mapNextLine) { + nextLineIndex = mapNextLine.line; + shouldLimit = nextLineIndex === lineIndex; + nextOffset = mapNextLine.offset; + } + obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; + } } } } - } - return true; - }, + return true; + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @private */ - _getStyleDeclaration: function(lineIndex, charIndex) { - if (this._styleMap && !this.isWrapping) { - var map = this._styleMap[lineIndex]; - if (!map) { - return null; + _getStyleDeclaration: function(lineIndex, charIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (!map) { + return null; + } + lineIndex = map.line; + charIndex = map.offset + charIndex; } - lineIndex = map.line; - charIndex = map.offset + charIndex; - } - return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); - }, + return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @param {Object} style * @private */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - var map = this._styleMap[lineIndex]; - lineIndex = map.line; - charIndex = map.offset + charIndex; + _setStyleDeclaration: function(lineIndex, charIndex, style) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; - this.styles[lineIndex][charIndex] = style; - }, + this.styles[lineIndex][charIndex] = style; + }, - /** + /** * @param {Number} lineIndex * @param {Number} charIndex * @private */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { - var map = this._styleMap[lineIndex]; - lineIndex = map.line; - charIndex = map.offset + charIndex; - delete this.styles[lineIndex][charIndex]; - }, + _deleteStyleDeclaration: function(lineIndex, charIndex) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; + delete this.styles[lineIndex][charIndex]; + }, - /** + /** * probably broken need a fix * Returns the real style line that correspond to the wrapped lineIndex line * Used just to verify if the line does exist or not. @@ -238,23 +239,23 @@ fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { * @returns {Boolean} if the line exists or not * @private */ - _getLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - return !!this.styles[map.line]; - }, + _getLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + return !!this.styles[map.line]; + }, - /** + /** * Set the line style to an empty object so that is initialized * @param {Number} lineIndex * @param {Object} style * @private */ - _setLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - this.styles[map.line] = {}; - }, + _setLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + this.styles[map.line] = {}; + }, - /** + /** * Wraps text using the 'width' property of Textbox. First this function * splits text on newlines, so we preserve newlines entered by the user. * Then it wraps each line using the width of the Textbox by calling @@ -263,17 +264,17 @@ fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { * @param {Number} desiredWidth width you want to wrap to * @returns {Array} Array of lines */ - _wrapText: function(lines, desiredWidth) { - var wrapped = [], i; - this.isWrapping = true; - for (i = 0; i < lines.length; i++) { - wrapped.push.apply(wrapped, this._wrapLine(lines[i], i, desiredWidth)); - } - this.isWrapping = false; - return wrapped; - }, + _wrapText: function(lines, desiredWidth) { + var wrapped = [], i; + this.isWrapping = true; + for (i = 0; i < lines.length; i++) { + wrapped.push.apply(wrapped, this._wrapLine(lines[i], i, desiredWidth)); + } + this.isWrapping = false; + return wrapped; + }, - /** + /** * Helper function to measure a string of text, given its lineIndex and charIndex offset * It gets called when charBounds are not available yet. * Override if necessary @@ -285,28 +286,28 @@ fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { * @param {number} charOffset * @returns {number} */ - _measureWord: function(word, lineIndex, charOffset) { - var width = 0, prevGrapheme, skipLeft = true; - charOffset = charOffset || 0; - for (var i = 0, len = word.length; i < len; i++) { - var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); - width += box.kernedWidth; - prevGrapheme = word[i]; - } - return width; - }, + _measureWord: function(word, lineIndex, charOffset) { + var width = 0, prevGrapheme, skipLeft = true; + charOffset = charOffset || 0; + for (var i = 0, len = word.length; i < len; i++) { + var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); + width += box.kernedWidth; + prevGrapheme = word[i]; + } + return width; + }, - /** + /** * Override this method to customize word splitting * Use with {@link fabric.Textbox#_measureWord} * @param {string} value * @returns {string[]} array of words */ - wordSplit: function (value) { - return value.split(this._wordJoiners); - }, + wordSplit: function (value) { + return value.split(this._wordJoiners); + }, - /** + /** * Wraps a line of text using the width of the Textbox and a context. * @param {Array} line The grapheme array that represent the line * @param {Number} lineIndex @@ -315,158 +316,159 @@ fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { * @returns {Array} Array of line(s) into which the given text is wrapped * to. */ - _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { - var lineWidth = 0, - splitByGrapheme = this.splitByGrapheme, - graphemeLines = [], - line = [], - // spaces in different languages? - words = splitByGrapheme ? this.graphemeSplit(_line) : this.wordSplit(_line), - word = '', - offset = 0, - infix = splitByGrapheme ? '' : ' ', - wordWidth = 0, - infixWidth = 0, - largestWordWidth = 0, - lineJustStarted = true, - additionalSpace = this._getWidthOfCharSpacing(), - reservedSpace = reservedSpace || 0; - // fix a difference between split and graphemeSplit - if (words.length === 0) { - words.push([]); - } - desiredWidth -= reservedSpace; - // measure words - var data = words.map(function (word) { - // if using splitByGrapheme words are already in graphemes. - word = splitByGrapheme ? word : this.graphemeSplit(word); - var width = this._measureWord(word, lineIndex, offset); - largestWordWidth = Math.max(width, largestWordWidth); - offset += word.length + 1; - return { word: word, width: width }; - }.bind(this)); - var maxWidth = Math.max(desiredWidth, largestWordWidth, this.dynamicMinWidth); - // layout words - offset = 0; - for (var i = 0; i < words.length; i++) { - word = data[i].word; - wordWidth = data[i].width; - offset += word.length; - - lineWidth += infixWidth + wordWidth - additionalSpace; - if (lineWidth > maxWidth && !lineJustStarted) { - graphemeLines.push(line); - line = []; - lineWidth = wordWidth; - lineJustStarted = true; - } - else { - lineWidth += additionalSpace; + _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { + var lineWidth = 0, + splitByGrapheme = this.splitByGrapheme, + graphemeLines = [], + line = [], + // spaces in different languages? + words = splitByGrapheme ? this.graphemeSplit(_line) : this.wordSplit(_line), + word = '', + offset = 0, + infix = splitByGrapheme ? '' : ' ', + wordWidth = 0, + infixWidth = 0, + largestWordWidth = 0, + lineJustStarted = true, + additionalSpace = this._getWidthOfCharSpacing(), + reservedSpace = reservedSpace || 0; + // fix a difference between split and graphemeSplit + if (words.length === 0) { + words.push([]); } + desiredWidth -= reservedSpace; + // measure words + var data = words.map(function (word) { + // if using splitByGrapheme words are already in graphemes. + word = splitByGrapheme ? word : this.graphemeSplit(word); + var width = this._measureWord(word, lineIndex, offset); + largestWordWidth = Math.max(width, largestWordWidth); + offset += word.length + 1; + return { word: word, width: width }; + }.bind(this)); + var maxWidth = Math.max(desiredWidth, largestWordWidth, this.dynamicMinWidth); + // layout words + offset = 0; + for (var i = 0; i < words.length; i++) { + word = data[i].word; + wordWidth = data[i].width; + offset += word.length; + + lineWidth += infixWidth + wordWidth - additionalSpace; + if (lineWidth > maxWidth && !lineJustStarted) { + graphemeLines.push(line); + line = []; + lineWidth = wordWidth; + lineJustStarted = true; + } + else { + lineWidth += additionalSpace; + } - if (!lineJustStarted && !splitByGrapheme) { - line.push(infix); - } - line = line.concat(word); + if (!lineJustStarted && !splitByGrapheme) { + line.push(infix); + } + line = line.concat(word); - infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); - offset++; - lineJustStarted = false; - } + infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); + offset++; + lineJustStarted = false; + } - i && graphemeLines.push(line); + i && graphemeLines.push(line); - if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { - this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; - } - return graphemeLines; - }, + if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { + this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; + } + return graphemeLines; + }, - /** + /** * Detect if the text line is ended with an hard break * text and itext do not have wrapping, return false * @param {Number} lineIndex text to split * @return {Boolean} */ - isEndOfWrapping: function(lineIndex) { - if (!this._styleMap[lineIndex + 1]) { - // is last line, return true; - return true; - } - if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { - // this is last line before a line break, return true; - return true; - } - return false; - }, + isEndOfWrapping: function(lineIndex) { + if (!this._styleMap[lineIndex + 1]) { + // is last line, return true; + return true; + } + if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { + // this is last line before a line break, return true; + return true; + } + return false; + }, - /** + /** * Detect if a line has a linebreak and so we need to account for it when moving * and counting style. * @return Number */ - missingNewlineOffset: function(lineIndex) { - if (this.splitByGrapheme) { - return this.isEndOfWrapping(lineIndex) ? 1 : 0; - } - return 1; - }, + missingNewlineOffset: function(lineIndex) { + if (this.splitByGrapheme) { + return this.isEndOfWrapping(lineIndex) ? 1 : 0; + } + return 1; + }, - /** + /** * Gets lines of text to render in the Textbox. This function calculates * text wrapping on the fly every time it is called. * @param {String} text text to split * @returns {Array} Array of lines in the Textbox. * @override */ - _splitTextIntoLines: function(text) { - var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), - graphemeLines = this._wrapText(newText.lines, this.width), - lines = new Array(graphemeLines.length); - for (var i = 0; i < graphemeLines.length; i++) { - lines[i] = graphemeLines[i].join(''); - } - newText.lines = lines; - newText.graphemeLines = graphemeLines; - return newText; - }, - - getMinWidth: function() { - return Math.max(this.minWidth, this.dynamicMinWidth); - }, - - _removeExtraneousStyles: function() { - var linesToKeep = {}; - for (var prop in this._styleMap) { - if (this._textLines[prop]) { - linesToKeep[this._styleMap[prop].line] = 1; + _splitTextIntoLines: function(text) { + var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), + graphemeLines = this._wrapText(newText.lines, this.width), + lines = new Array(graphemeLines.length); + for (var i = 0; i < graphemeLines.length; i++) { + lines[i] = graphemeLines[i].join(''); } - } - for (var prop in this.styles) { - if (!linesToKeep[prop]) { - delete this.styles[prop]; + newText.lines = lines; + newText.graphemeLines = graphemeLines; + return newText; + }, + + getMinWidth: function() { + return Math.max(this.minWidth, this.dynamicMinWidth); + }, + + _removeExtraneousStyles: function() { + var linesToKeep = {}; + for (var prop in this._styleMap) { + if (this._textLines[prop]) { + linesToKeep[this._styleMap[prop].line] = 1; + } } - } - }, + for (var prop in this.styles) { + if (!linesToKeep[prop]) { + delete this.styles[prop]; + } + } + }, - /** + /** * Returns object representation of an instance * @method toObject * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output * @return {Object} object representation of an instance */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); - } -}); + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); + } + }); -/** + /** * Returns fabric.Textbox instance from an object representation * @static * @memberOf fabric.Textbox * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Textbox.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Textbox, object, 'text'); -}; + fabric.Textbox.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Textbox, object, 'text'); + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/shapes/triangle.class.js b/src/shapes/triangle.class.js index 070472cb461..539fa910748 100644 --- a/src/shapes/triangle.class.js +++ b/src/shapes/triangle.class.js @@ -1,82 +1,84 @@ -var fabric = exports.fabric || (exports.fabric = { }); - -/** +(function(global) { + var fabric = global.fabric || (global.fabric = { }); + /** * Triangle class * @class fabric.Triangle * @extends fabric.Object * @return {fabric.Triangle} thisArg * @see {@link fabric.Triangle#initialize} for constructor definition */ -fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { + fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { - /** + /** * Type of an object * @type String * @default */ - type: 'triangle', + type: 'triangle', - /** + /** * Width is set to 100 to compensate the old initialize code that was setting it to 100 * @type Number * @default */ - width: 100, + width: 100, - /** + /** * Height is set to 100 to compensate the old initialize code that was setting it to 100 * @type Number * @default */ - height: 100, + height: 100, - /** + /** * @private * @param {CanvasRenderingContext2D} ctx Context to render on */ - _render: function(ctx) { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2; + _render: function(ctx) { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2; - ctx.beginPath(); - ctx.moveTo(-widthBy2, heightBy2); - ctx.lineTo(0, -heightBy2); - ctx.lineTo(widthBy2, heightBy2); - ctx.closePath(); + ctx.beginPath(); + ctx.moveTo(-widthBy2, heightBy2); + ctx.lineTo(0, -heightBy2); + ctx.lineTo(widthBy2, heightBy2); + ctx.closePath(); - this._renderPaintInOrder(ctx); - }, + this._renderPaintInOrder(ctx); + }, - /* _TO_SVG_START_ */ - /** + /* _TO_SVG_START_ */ + /** * Returns svg representation of an instance * @return {Array} an array of strings with the specific svg representation * of the instance */ - _toSVG: function() { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2, - points = [ - -widthBy2 + ' ' + heightBy2, - '0 ' + -heightBy2, - widthBy2 + ' ' + heightBy2 - ].join(','); - return [ - '' - ]; - }, - /* _TO_SVG_END_ */ -}); + _toSVG: function() { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2, + points = [ + -widthBy2 + ' ' + heightBy2, + '0 ' + -heightBy2, + widthBy2 + ' ' + heightBy2 + ].join(','); + return [ + '' + ]; + }, + /* _TO_SVG_END_ */ + }); -/** + /** * Returns {@link fabric.Triangle} instance from an object representation * @static * @memberOf fabric.Triangle * @param {Object} object Object to create an instance from * @returns {Promise} */ -fabric.Triangle.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Triangle, object); -}; + fabric.Triangle.fromObject = function(object) { + return fabric.Object._fromObject(fabric.Triangle, object); + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index 94c297b9630..d99f6ab24cf 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -1,9 +1,6 @@ -(function () { - - 'use strict'; - +(function (global) { // aliases for faster resolution - var extend = fabric.util.object.extend, + var fabric = global.fabric, extend = fabric.util.object.extend, getElementOffset = fabric.util.getElementOffset, removeFromArray = fabric.util.removeFromArray, toFixed = fabric.util.toFixed, @@ -1719,4 +1716,4 @@ return impl && impl.createJPEGStream(opts); }; } -})(); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/anim_ease.js b/src/util/anim_ease.js index 8754163de07..446c09eaf37 100644 --- a/src/util/anim_ease.js +++ b/src/util/anim_ease.js @@ -1,394 +1,398 @@ -function normalize(a, c, p, s) { - if (a < Math.abs(c)) { - a = c; - s = p / 4; - } - else { - //handle the 0/0 case: - if (c === 0 && a === 0) { - s = p / (2 * Math.PI) * Math.asin(1); +(function(global) { + var fabric = global.fabric; + function normalize(a, c, p, s) { + if (a < Math.abs(c)) { + a = c; + s = p / 4; } else { - s = p / (2 * Math.PI) * Math.asin(c / a); + //handle the 0/0 case: + if (c === 0 && a === 0) { + s = p / (2 * Math.PI) * Math.asin(1); + } + else { + s = p / (2 * Math.PI) * Math.asin(c / a); + } } + return { a: a, c: c, p: p, s: s }; } - return { a: a, c: c, p: p, s: s }; -} -function elastic(opts, t, d) { - return opts.a * + function elastic(opts, t, d) { + return opts.a * Math.pow(2, 10 * (t -= 1)) * Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p ); -} + } -/** + /** * Cubic easing out * @memberOf fabric.util.ease */ -function easeOutCubic(t, b, c, d) { - return c * ((t = t / d - 1) * t * t + 1) + b; -} + function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; + } -/** + /** * Cubic easing in and out * @memberOf fabric.util.ease */ -function easeInOutCubic(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t + b; + function easeInOutCubic(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t + b; + } + return c / 2 * ((t -= 2) * t * t + 2) + b; } - return c / 2 * ((t -= 2) * t * t + 2) + b; -} -/** + /** * Quartic easing in * @memberOf fabric.util.ease */ -function easeInQuart(t, b, c, d) { - return c * (t /= d) * t * t * t + b; -} + function easeInQuart(t, b, c, d) { + return c * (t /= d) * t * t * t + b; + } -/** + /** * Quartic easing out * @memberOf fabric.util.ease */ -function easeOutQuart(t, b, c, d) { - return -c * ((t = t / d - 1) * t * t * t - 1) + b; -} + function easeOutQuart(t, b, c, d) { + return -c * ((t = t / d - 1) * t * t * t - 1) + b; + } -/** + /** * Quartic easing in and out * @memberOf fabric.util.ease */ -function easeInOutQuart(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t * t + b; + function easeInOutQuart(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t + b; + } + return -c / 2 * ((t -= 2) * t * t * t - 2) + b; } - return -c / 2 * ((t -= 2) * t * t * t - 2) + b; -} -/** + /** * Quintic easing in * @memberOf fabric.util.ease */ -function easeInQuint(t, b, c, d) { - return c * (t /= d) * t * t * t * t + b; -} + function easeInQuint(t, b, c, d) { + return c * (t /= d) * t * t * t * t + b; + } -/** + /** * Quintic easing out * @memberOf fabric.util.ease */ -function easeOutQuint(t, b, c, d) { - return c * ((t = t / d - 1) * t * t * t * t + 1) + b; -} + function easeOutQuint(t, b, c, d) { + return c * ((t = t / d - 1) * t * t * t * t + 1) + b; + } -/** + /** * Quintic easing in and out * @memberOf fabric.util.ease */ -function easeInOutQuint(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t * t * t + b; + function easeInOutQuint(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t * t + b; + } + return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; } - return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; -} -/** + /** * Sinusoidal easing in * @memberOf fabric.util.ease */ -function easeInSine(t, b, c, d) { - return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; -} + function easeInSine(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; + } -/** + /** * Sinusoidal easing out * @memberOf fabric.util.ease */ -function easeOutSine(t, b, c, d) { - return c * Math.sin(t / d * (Math.PI / 2)) + b; -} + function easeOutSine(t, b, c, d) { + return c * Math.sin(t / d * (Math.PI / 2)) + b; + } -/** + /** * Sinusoidal easing in and out * @memberOf fabric.util.ease */ -function easeInOutSine(t, b, c, d) { - return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; -} + function easeInOutSine(t, b, c, d) { + return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; + } -/** + /** * Exponential easing in * @memberOf fabric.util.ease */ -function easeInExpo(t, b, c, d) { - return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; -} + function easeInExpo(t, b, c, d) { + return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; + } -/** + /** * Exponential easing out * @memberOf fabric.util.ease */ -function easeOutExpo(t, b, c, d) { - return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; -} + function easeOutExpo(t, b, c, d) { + return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; + } -/** + /** * Exponential easing in and out * @memberOf fabric.util.ease */ -function easeInOutExpo(t, b, c, d) { - if (t === 0) { - return b; - } - if (t === d) { - return b + c; - } - t /= d / 2; - if (t < 1) { - return c / 2 * Math.pow(2, 10 * (t - 1)) + b; + function easeInOutExpo(t, b, c, d) { + if (t === 0) { + return b; + } + if (t === d) { + return b + c; + } + t /= d / 2; + if (t < 1) { + return c / 2 * Math.pow(2, 10 * (t - 1)) + b; + } + return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; } - return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; -} -/** + /** * Circular easing in * @memberOf fabric.util.ease */ -function easeInCirc(t, b, c, d) { - return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; -} + function easeInCirc(t, b, c, d) { + return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; + } -/** + /** * Circular easing out * @memberOf fabric.util.ease */ -function easeOutCirc(t, b, c, d) { - return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; -} + function easeOutCirc(t, b, c, d) { + return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; + } -/** + /** * Circular easing in and out * @memberOf fabric.util.ease */ -function easeInOutCirc(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; + function easeInOutCirc(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; + } + return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; } - return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; -} -/** + /** * Elastic easing in * @memberOf fabric.util.ease */ -function easeInElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; + function easeInElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; + } + var opts = normalize(a, c, p, s); + return -elastic(opts, t, d) + b; } - var opts = normalize(a, c, p, s); - return -elastic(opts, t, d) + b; -} -/** + /** * Elastic easing out * @memberOf fabric.util.ease */ -function easeOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; + function easeOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; + } + var opts = normalize(a, c, p, s); + return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; } - var opts = normalize(a, c, p, s); - return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; -} -/** + /** * Elastic easing in and out * @memberOf fabric.util.ease */ -function easeInOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d / 2; - if (t === 2) { - return b + c; - } - if (!p) { - p = d * (0.3 * 1.5); - } - var opts = normalize(a, c, p, s); - if (t < 1) { - return -0.5 * elastic(opts, t, d) + b; - } - return opts.a * Math.pow(2, -10 * (t -= 1)) * + function easeInOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d / 2; + if (t === 2) { + return b + c; + } + if (!p) { + p = d * (0.3 * 1.5); + } + var opts = normalize(a, c, p, s); + if (t < 1) { + return -0.5 * elastic(opts, t, d) + b; + } + return opts.a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; -} + } -/** + /** * Backwards easing in * @memberOf fabric.util.ease */ -function easeInBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; + function easeInBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + return c * (t /= d) * t * ((s + 1) * t - s) + b; } - return c * (t /= d) * t * ((s + 1) * t - s) + b; -} -/** + /** * Backwards easing out * @memberOf fabric.util.ease */ -function easeOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; + function easeOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; } - return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; -} -/** + /** * Backwards easing in and out * @memberOf fabric.util.ease */ -function easeInOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; - } - t /= d / 2; - if (t < 1) { - return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; + function easeInOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + t /= d / 2; + if (t < 1) { + return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; + } + return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; } - return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; -} -/** + /** * Bouncing easing in * @memberOf fabric.util.ease */ -function easeInBounce(t, b, c, d) { - return c - easeOutBounce (d - t, 0, c, d) + b; -} + function easeInBounce(t, b, c, d) { + return c - easeOutBounce (d - t, 0, c, d) + b; + } -/** + /** * Bouncing easing out * @memberOf fabric.util.ease */ -function easeOutBounce(t, b, c, d) { - if ((t /= d) < (1 / 2.75)) { - return c * (7.5625 * t * t) + b; - } - else if (t < (2 / 2.75)) { - return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; - } - else if (t < (2.5 / 2.75)) { - return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; - } - else { - return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; + function easeOutBounce(t, b, c, d) { + if ((t /= d) < (1 / 2.75)) { + return c * (7.5625 * t * t) + b; + } + else if (t < (2 / 2.75)) { + return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; + } + else if (t < (2.5 / 2.75)) { + return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; + } + else { + return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; + } } -} -/** + /** * Bouncing easing in and out * @memberOf fabric.util.ease */ -function easeInOutBounce(t, b, c, d) { - if (t < d / 2) { - return easeInBounce (t * 2, 0, c, d) * 0.5 + b; + function easeInOutBounce(t, b, c, d) { + if (t < d / 2) { + return easeInBounce (t * 2, 0, c, d) * 0.5 + b; + } + return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; } - return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; -} -/** + /** * Easing functions * See Easing Equations by Robert Penner * @namespace fabric.util.ease */ -fabric.util.ease = { + fabric.util.ease = { - /** + /** * Quadratic easing in * @memberOf fabric.util.ease */ - easeInQuad: function(t, b, c, d) { - return c * (t /= d) * t + b; - }, + easeInQuad: function(t, b, c, d) { + return c * (t /= d) * t + b; + }, - /** + /** * Quadratic easing out * @memberOf fabric.util.ease */ - easeOutQuad: function(t, b, c, d) { - return -c * (t /= d) * (t - 2) + b; - }, + easeOutQuad: function(t, b, c, d) { + return -c * (t /= d) * (t - 2) + b; + }, - /** + /** * Quadratic easing in and out * @memberOf fabric.util.ease */ - easeInOutQuad: function(t, b, c, d) { - t /= (d / 2); - if (t < 1) { - return c / 2 * t * t + b; - } - return -c / 2 * ((--t) * (t - 2) - 1) + b; - }, - - /** + easeInOutQuad: function(t, b, c, d) { + t /= (d / 2); + if (t < 1) { + return c / 2 * t * t + b; + } + return -c / 2 * ((--t) * (t - 2) - 1) + b; + }, + + /** * Cubic easing in * @memberOf fabric.util.ease */ - easeInCubic: function(t, b, c, d) { - return c * (t /= d) * t * t + b; - }, - - easeOutCubic: easeOutCubic, - easeInOutCubic: easeInOutCubic, - easeInQuart: easeInQuart, - easeOutQuart: easeOutQuart, - easeInOutQuart: easeInOutQuart, - easeInQuint: easeInQuint, - easeOutQuint: easeOutQuint, - easeInOutQuint: easeInOutQuint, - easeInSine: easeInSine, - easeOutSine: easeOutSine, - easeInOutSine: easeInOutSine, - easeInExpo: easeInExpo, - easeOutExpo: easeOutExpo, - easeInOutExpo: easeInOutExpo, - easeInCirc: easeInCirc, - easeOutCirc: easeOutCirc, - easeInOutCirc: easeInOutCirc, - easeInElastic: easeInElastic, - easeOutElastic: easeOutElastic, - easeInOutElastic: easeInOutElastic, - easeInBack: easeInBack, - easeOutBack: easeOutBack, - easeInOutBack: easeInOutBack, - easeInBounce: easeInBounce, - easeOutBounce: easeOutBounce, - easeInOutBounce: easeInOutBounce -}; + easeInCubic: function(t, b, c, d) { + return c * (t /= d) * t * t + b; + }, + + easeOutCubic: easeOutCubic, + easeInOutCubic: easeInOutCubic, + easeInQuart: easeInQuart, + easeOutQuart: easeOutQuart, + easeInOutQuart: easeInOutQuart, + easeInQuint: easeInQuint, + easeOutQuint: easeOutQuint, + easeInOutQuint: easeInOutQuint, + easeInSine: easeInSine, + easeOutSine: easeOutSine, + easeInOutSine: easeInOutSine, + easeInExpo: easeInExpo, + easeOutExpo: easeOutExpo, + easeInOutExpo: easeInOutExpo, + easeInCirc: easeInCirc, + easeOutCirc: easeOutCirc, + easeInOutCirc: easeInOutCirc, + easeInElastic: easeInElastic, + easeOutElastic: easeOutElastic, + easeInOutElastic: easeInOutElastic, + easeInBack: easeInBack, + easeOutBack: easeOutBack, + easeInOutBack: easeInOutBack, + easeInBounce: easeInBounce, + easeOutBounce: easeOutBounce, + easeInOutBounce: easeInOutBounce + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/animate.js b/src/util/animate.js index e66a500b49f..cb78ba61e67 100644 --- a/src/util/animate.js +++ b/src/util/animate.js @@ -1,5 +1,4 @@ -(function () { - +(function (global) { /** * * @typedef {Object} AnimationOptions @@ -29,7 +28,7 @@ * @memberof fabric * @type {AnimationContext[]} */ - var RUNNING_ANIMATIONS = []; + var fabric = global.fabric, RUNNING_ANIMATIONS = []; fabric.util.object.extend(RUNNING_ANIMATIONS, { /** @@ -262,4 +261,4 @@ fabric.util.requestAnimFrame = requestAnimFrame; fabric.util.cancelAnimFrame = cancelAnimFrame; fabric.runningAnimations = RUNNING_ANIMATIONS; -})(); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/animate_color.js b/src/util/animate_color.js index 50f6ef4aa6d..12e0f3d3160 100644 --- a/src/util/animate_color.js +++ b/src/util/animate_color.js @@ -1,18 +1,20 @@ -// Calculate an in-between color. Returns a "rgba()" string. -// Credit: Edwin Martin -// http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js -function calculateColor(begin, end, pos) { - var color = 'rgba(' +(function(global) { + var fabric = global.fabric; + // Calculate an in-between color. Returns a "rgba()" string. + // Credit: Edwin Martin + // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js + function calculateColor(begin, end, pos) { + var color = 'rgba(' + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); - color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); - color += ')'; - return color; -} + color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); + color += ')'; + return color; + } -/** + /** * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. * @memberOf fabric.util * @param {String} fromColor The starting color in hex or rgb(a) format. @@ -25,47 +27,49 @@ function calculateColor(begin, end, pos) { * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. * @returns {Function} abort function */ -function animateColor(fromColor, toColor, duration, options) { - var startColor = new fabric.Color(fromColor).getSource(), - endColor = new fabric.Color(toColor).getSource(), - originalOnComplete = options.onComplete, - originalOnChange = options.onChange; - options = options || {}; + function animateColor(fromColor, toColor, duration, options) { + var startColor = new fabric.Color(fromColor).getSource(), + endColor = new fabric.Color(toColor).getSource(), + originalOnComplete = options.onComplete, + originalOnChange = options.onChange; + options = options || {}; - return fabric.util.animate(Object.assign(options, { - duration: duration || 500, - startValue: startColor, - endValue: endColor, - byValue: endColor, - easing: function (currentTime, startValue, byValue, duration) { - var posValue = options.colorEasing - ? options.colorEasing(currentTime, duration) - : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); - return calculateColor(startValue, byValue, posValue); - }, - // has to take in account for color restoring; - onComplete: function(current, valuePerc, timePerc) { - if (originalOnComplete) { - return originalOnComplete( - calculateColor(endColor, endColor, 0), - valuePerc, - timePerc - ); - } - }, - onChange: function(current, valuePerc, timePerc) { - if (originalOnChange) { - if (Array.isArray(current)) { - return originalOnChange( - calculateColor(current, current, 0), + return fabric.util.animate(Object.assign(options, { + duration: duration || 500, + startValue: startColor, + endValue: endColor, + byValue: endColor, + easing: function (currentTime, startValue, byValue, duration) { + var posValue = options.colorEasing + ? options.colorEasing(currentTime, duration) + : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); + return calculateColor(startValue, byValue, posValue); + }, + // has to take in account for color restoring; + onComplete: function(current, valuePerc, timePerc) { + if (originalOnComplete) { + return originalOnComplete( + calculateColor(endColor, endColor, 0), valuePerc, timePerc ); } - originalOnChange(current, valuePerc, timePerc); + }, + onChange: function(current, valuePerc, timePerc) { + if (originalOnChange) { + if (Array.isArray(current)) { + return originalOnChange( + calculateColor(current, current, 0), + valuePerc, + timePerc + ); + } + originalOnChange(current, valuePerc, timePerc); + } } - } - })); -} + })); + } + + fabric.util.animateColor = animateColor; -fabric.util.animateColor = animateColor; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/dom_event.js b/src/util/dom_event.js index 4b439499d53..f647a6def2f 100644 --- a/src/util/dom_event.js +++ b/src/util/dom_event.js @@ -1,6 +1,6 @@ -(function () { +(function (global) { // since ie11 can use addEventListener but they do not support options, i need to check - var couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent, + var fabric = global.fabric, couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent, touchEvents = ['touchstart', 'touchmove', 'touchend']; /** * Adds an event listener to an element @@ -47,4 +47,4 @@ fabric.util.isTouchEvent = function(event) { return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch'; }; -})(); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/dom_misc.js b/src/util/dom_misc.js index 7d68376729a..267ff9f848e 100644 --- a/src/util/dom_misc.js +++ b/src/util/dom_misc.js @@ -1,77 +1,79 @@ -var _slice = Array.prototype.slice; +(function(global) { -/** + var fabric = global.fabric, _slice = Array.prototype.slice; + + /** * Takes id and returns an element with that id (if one exists in a document) * @memberOf fabric.util * @param {String|HTMLElement} id * @return {HTMLElement|null} */ -function getById(id) { - return typeof id === 'string' ? fabric.document.getElementById(id) : id; -} + function getById(id) { + return typeof id === 'string' ? fabric.document.getElementById(id) : id; + } -var sliceCanConvertNodelists, - /** + var sliceCanConvertNodelists, + /** * Converts an array-like object (e.g. arguments or NodeList) to an array * @memberOf fabric.util * @param {Object} arrayLike * @return {Array} */ - toArray = function(arrayLike) { - return _slice.call(arrayLike, 0); - }; + toArray = function(arrayLike) { + return _slice.call(arrayLike, 0); + }; -try { - sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; -} -catch (err) { } + try { + sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; + } + catch (err) { } -if (!sliceCanConvertNodelists) { - toArray = function(arrayLike) { - var arr = new Array(arrayLike.length), i = arrayLike.length; - while (i--) { - arr[i] = arrayLike[i]; - } - return arr; - }; -} + if (!sliceCanConvertNodelists) { + toArray = function(arrayLike) { + var arr = new Array(arrayLike.length), i = arrayLike.length; + while (i--) { + arr[i] = arrayLike[i]; + } + return arr; + }; + } -/** + /** * Creates specified element with specified attributes * @memberOf fabric.util * @param {String} tagName Type of an element to create * @param {Object} [attributes] Attributes to set on an element * @return {HTMLElement} Newly created element */ -function makeElement(tagName, attributes) { - var el = fabric.document.createElement(tagName); - for (var prop in attributes) { - if (prop === 'class') { - el.className = attributes[prop]; - } - else if (prop === 'for') { - el.htmlFor = attributes[prop]; - } - else { - el.setAttribute(prop, attributes[prop]); + function makeElement(tagName, attributes) { + var el = fabric.document.createElement(tagName); + for (var prop in attributes) { + if (prop === 'class') { + el.className = attributes[prop]; + } + else if (prop === 'for') { + el.htmlFor = attributes[prop]; + } + else { + el.setAttribute(prop, attributes[prop]); + } } + return el; } - return el; -} -/** + /** * Adds class to an element * @memberOf fabric.util * @param {HTMLElement} element Element to add class to * @param {String} className Class to add to an element */ -function addClass(element, className) { - if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { - element.className += (element.className ? ' ' : '') + className; + function addClass(element, className) { + if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { + element.className += (element.className ? ' ' : '') + className; + } } -} -/** + /** * Wraps element with another element * @memberOf fabric.util * @param {HTMLElement} element Element to wrap @@ -79,204 +81,204 @@ function addClass(element, className) { * @param {Object} [attributes] Attributes to set on a wrapper * @return {HTMLElement} wrapper */ -function wrapElement(element, wrapper, attributes) { - if (typeof wrapper === 'string') { - wrapper = makeElement(wrapper, attributes); - } - if (element.parentNode) { - element.parentNode.replaceChild(wrapper, element); + function wrapElement(element, wrapper, attributes) { + if (typeof wrapper === 'string') { + wrapper = makeElement(wrapper, attributes); + } + if (element.parentNode) { + element.parentNode.replaceChild(wrapper, element); + } + wrapper.appendChild(element); + return wrapper; } - wrapper.appendChild(element); - return wrapper; -} -/** + /** * Returns element scroll offsets * @memberOf fabric.util * @param {HTMLElement} element Element to operate on * @return {Object} Object with left/top values */ -function getScrollLeftTop(element) { + function getScrollLeftTop(element) { - var left = 0, - top = 0, - docElement = fabric.document.documentElement, - body = fabric.document.body || { - scrollLeft: 0, scrollTop: 0 - }; + var left = 0, + top = 0, + docElement = fabric.document.documentElement, + body = fabric.document.body || { + scrollLeft: 0, scrollTop: 0 + }; - // While loop checks (and then sets element to) .parentNode OR .host - // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, - // but the .parentNode of a root ShadowDOM node will always be null, instead - // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 - while (element && (element.parentNode || element.host)) { + // While loop checks (and then sets element to) .parentNode OR .host + // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, + // but the .parentNode of a root ShadowDOM node will always be null, instead + // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 + while (element && (element.parentNode || element.host)) { - // Set element to element parent, or 'host' in case of ShadowDOM - element = element.parentNode || element.host; + // Set element to element parent, or 'host' in case of ShadowDOM + element = element.parentNode || element.host; - if (element === fabric.document) { - left = body.scrollLeft || docElement.scrollLeft || 0; - top = body.scrollTop || docElement.scrollTop || 0; - } - else { - left += element.scrollLeft || 0; - top += element.scrollTop || 0; - } + if (element === fabric.document) { + left = body.scrollLeft || docElement.scrollLeft || 0; + top = body.scrollTop || docElement.scrollTop || 0; + } + else { + left += element.scrollLeft || 0; + top += element.scrollTop || 0; + } - if (element.nodeType === 1 && element.style.position === 'fixed') { - break; + if (element.nodeType === 1 && element.style.position === 'fixed') { + break; + } } - } - return { left: left, top: top }; -} + return { left: left, top: top }; + } -/** + /** * Returns offset for a given element * @function * @memberOf fabric.util * @param {HTMLElement} element Element to get offset for * @return {Object} Object with "left" and "top" properties */ -function getElementOffset(element) { - var docElem, - doc = element && element.ownerDocument, - box = { left: 0, top: 0 }, - offset = { left: 0, top: 0 }, - scrollLeftTop, - offsetAttributes = { - borderLeftWidth: 'left', - borderTopWidth: 'top', - paddingLeft: 'left', - paddingTop: 'top' - }; + function getElementOffset(element) { + var docElem, + doc = element && element.ownerDocument, + box = { left: 0, top: 0 }, + offset = { left: 0, top: 0 }, + scrollLeftTop, + offsetAttributes = { + borderLeftWidth: 'left', + borderTopWidth: 'top', + paddingLeft: 'left', + paddingTop: 'top' + }; - if (!doc) { - return offset; - } + if (!doc) { + return offset; + } - for (var attr in offsetAttributes) { - offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; - } + for (var attr in offsetAttributes) { + offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; + } - docElem = doc.documentElement; - if ( typeof element.getBoundingClientRect !== 'undefined' ) { - box = element.getBoundingClientRect(); - } + docElem = doc.documentElement; + if ( typeof element.getBoundingClientRect !== 'undefined' ) { + box = element.getBoundingClientRect(); + } - scrollLeftTop = getScrollLeftTop(element); + scrollLeftTop = getScrollLeftTop(element); - return { - left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, - top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top - }; -} + return { + left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, + top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top + }; + } -/** + /** * Returns style attribute value of a given element * @memberOf fabric.util * @param {HTMLElement} element Element to get style attribute for * @param {String} attr Style attribute to get for element * @return {String} Style attribute value of the given element. */ -var getElementStyle; -if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { - getElementStyle = function(element, attr) { - var style = fabric.document.defaultView.getComputedStyle(element, null); - return style ? style[attr] : undefined; - }; -} -else { - getElementStyle = function(element, attr) { - var value = element.style[attr]; - if (!value && element.currentStyle) { - value = element.currentStyle[attr]; - } - return value; - }; -} + var getElementStyle; + if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { + getElementStyle = function(element, attr) { + var style = fabric.document.defaultView.getComputedStyle(element, null); + return style ? style[attr] : undefined; + }; + } + else { + getElementStyle = function(element, attr) { + var value = element.style[attr]; + if (!value && element.currentStyle) { + value = element.currentStyle[attr]; + } + return value; + }; + } -(function () { - var style = fabric.document.documentElement.style, - selectProp = 'userSelect' in style - ? 'userSelect' - : 'MozUserSelect' in style - ? 'MozUserSelect' - : 'WebkitUserSelect' in style - ? 'WebkitUserSelect' - : 'KhtmlUserSelect' in style - ? 'KhtmlUserSelect' - : ''; + (function () { + var style = fabric.document.documentElement.style, + selectProp = 'userSelect' in style + ? 'userSelect' + : 'MozUserSelect' in style + ? 'MozUserSelect' + : 'WebkitUserSelect' in style + ? 'WebkitUserSelect' + : 'KhtmlUserSelect' in style + ? 'KhtmlUserSelect' + : ''; - /** + /** * Makes element unselectable * @memberOf fabric.util * @param {HTMLElement} element Element to make unselectable * @return {HTMLElement} Element that was passed in */ - function makeElementUnselectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = fabric.util.falseFunction; - } - if (selectProp) { - element.style[selectProp] = 'none'; + function makeElementUnselectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = fabric.util.falseFunction; + } + if (selectProp) { + element.style[selectProp] = 'none'; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = 'on'; + } + return element; } - else if (typeof element.unselectable === 'string') { - element.unselectable = 'on'; - } - return element; - } - /** + /** * Makes element selectable * @memberOf fabric.util * @param {HTMLElement} element Element to make selectable * @return {HTMLElement} Element that was passed in */ - function makeElementSelectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = null; - } - if (selectProp) { - element.style[selectProp] = ''; - } - else if (typeof element.unselectable === 'string') { - element.unselectable = ''; + function makeElementSelectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = null; + } + if (selectProp) { + element.style[selectProp] = ''; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = ''; + } + return element; } - return element; - } - fabric.util.makeElementUnselectable = makeElementUnselectable; - fabric.util.makeElementSelectable = makeElementSelectable; -})(); + fabric.util.makeElementUnselectable = makeElementUnselectable; + fabric.util.makeElementSelectable = makeElementSelectable; + })(typeof exports !== 'undefined' ? exports : window); -function getNodeCanvas(element) { - var impl = fabric.jsdomImplForWrapper(element); - return impl._canvas || impl._image; -}; + function getNodeCanvas(element) { + var impl = fabric.jsdomImplForWrapper(element); + return impl._canvas || impl._image; + }; -function cleanUpJsdomNode(element) { - if (!fabric.isLikelyNode) { - return; - } - var impl = fabric.jsdomImplForWrapper(element); - if (impl) { - impl._image = null; - impl._canvas = null; - // unsure if necessary - impl._currentSrc = null; - impl._attributes = null; - impl._classList = null; + function cleanUpJsdomNode(element) { + if (!fabric.isLikelyNode) { + return; + } + var impl = fabric.jsdomImplForWrapper(element); + if (impl) { + impl._image = null; + impl._canvas = null; + // unsure if necessary + impl._currentSrc = null; + impl._attributes = null; + impl._classList = null; + } } -} -function setImageSmoothing(ctx, value) { - ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled + function setImageSmoothing(ctx, value) { + ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled; - ctx.imageSmoothingEnabled = value; -} + ctx.imageSmoothingEnabled = value; + } -/** + /** * setImageSmoothing sets the context imageSmoothingEnabled property. * Used by canvas and by ImageObject. * @memberOf fabric.util @@ -284,13 +286,15 @@ function setImageSmoothing(ctx, value) { * @param {HTMLRenderingContext2D} ctx to set on * @param {Boolean} value true or false */ -fabric.util.setImageSmoothing = setImageSmoothing; -fabric.util.getById = getById; -fabric.util.toArray = toArray; -fabric.util.addClass = addClass; -fabric.util.makeElement = makeElement; -fabric.util.wrapElement = wrapElement; -fabric.util.getScrollLeftTop = getScrollLeftTop; -fabric.util.getElementOffset = getElementOffset; -fabric.util.getNodeCanvas = getNodeCanvas; -fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; + fabric.util.setImageSmoothing = setImageSmoothing; + fabric.util.getById = getById; + fabric.util.toArray = toArray; + fabric.util.addClass = addClass; + fabric.util.makeElement = makeElement; + fabric.util.wrapElement = wrapElement; + fabric.util.getScrollLeftTop = getScrollLeftTop; + fabric.util.getElementOffset = getElementOffset; + fabric.util.getNodeCanvas = getNodeCanvas; + fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/dom_request.js b/src/util/dom_request.js index eb5876f12f7..7638f0751c1 100644 --- a/src/util/dom_request.js +++ b/src/util/dom_request.js @@ -1,10 +1,12 @@ -function addParamToUrl(url, param) { - return url + (/\?/.test(url) ? '&' : '?') + param; -} +(function(global) { + var fabric = global.fabric; + function addParamToUrl(url, param) { + return url + (/\?/.test(url) ? '&' : '?') + param; + } -function emptyFn() { } + function emptyFn() { } -/** + /** * Cross-browser abstraction for sending XMLHttpRequest * @memberOf fabric.util * @deprecated this has to go away, we can use a modern browser method to do the same. @@ -16,37 +18,38 @@ function emptyFn() { } * @param {Function} options.onComplete Callback to invoke when request is completed * @return {XMLHttpRequest} request */ -function request(url, options) { - options || (options = { }); - - var method = options.method ? options.method.toUpperCase() : 'GET', - onComplete = options.onComplete || function() { }, - xhr = new fabric.window.XMLHttpRequest(), - body = options.body || options.parameters; - - /** @ignore */ - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - onComplete(xhr); - xhr.onreadystatechange = emptyFn; + function request(url, options) { + options || (options = { }); + + var method = options.method ? options.method.toUpperCase() : 'GET', + onComplete = options.onComplete || function() { }, + xhr = new fabric.window.XMLHttpRequest(), + body = options.body || options.parameters; + + /** @ignore */ + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + onComplete(xhr); + xhr.onreadystatechange = emptyFn; + } + }; + + if (method === 'GET') { + body = null; + if (typeof options.parameters === 'string') { + url = addParamToUrl(url, options.parameters); + } } - }; - if (method === 'GET') { - body = null; - if (typeof options.parameters === 'string') { - url = addParamToUrl(url, options.parameters); - } - } + xhr.open(method, url, true); - xhr.open(method, url, true); + if (method === 'POST' || method === 'PUT') { + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + } - if (method === 'POST' || method === 'PUT') { - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.send(body); + return xhr; } - xhr.send(body); - return xhr; -} - -fabric.util.request = request; + fabric.util.request = request; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/dom_style.js b/src/util/dom_style.js index 15bf434291c..a5ff0d50324 100644 --- a/src/util/dom_style.js +++ b/src/util/dom_style.js @@ -1,5 +1,5 @@ -(function () { - +(function (global) { + var fabric = global.fabric; /** * Cross-browser wrapper for setting element's style * @memberOf fabric.util @@ -67,4 +67,4 @@ fabric.util.setStyle = setStyle; -})(); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/lang_array.js b/src/util/lang_array.js index 14fbc772866..9347e028abf 100644 --- a/src/util/lang_array.js +++ b/src/util/lang_array.js @@ -1,90 +1,94 @@ -var slice = Array.prototype.slice; +(function(global) { -/** + var fabric = global.fabric, slice = Array.prototype.slice; + + /** * Invokes method on all items in a given array * @memberOf fabric.util.array * @param {Array} array Array to iterate over * @param {String} method Name of a method to invoke * @return {Array} */ -function invoke(array, method) { - var args = slice.call(arguments, 2), result = []; - for (var i = 0, len = array.length; i < len; i++) { - result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); + function invoke(array, method) { + var args = slice.call(arguments, 2), result = []; + for (var i = 0, len = array.length; i < len; i++) { + result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); + } + return result; } - return result; -} -/** + /** * Finds maximum value in array (not necessarily "first" one) * @memberOf fabric.util.array * @param {Array} array Array to iterate over * @param {String} byProperty * @return {*} */ -function max(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 >= value2; - }); -} + function max(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 >= value2; + }); + } -/** + /** * Finds minimum value in array (not necessarily "first" one) * @memberOf fabric.util.array * @param {Array} array Array to iterate over * @param {String} byProperty * @return {*} */ -function min(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 < value2; - }); -} + function min(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 < value2; + }); + } -/** + /** * @private */ -function fill(array, value) { - var k = array.length; - while (k--) { - array[k] = value; + function fill(array, value) { + var k = array.length; + while (k--) { + array[k] = value; + } + return array; } - return array; -} -/** + /** * @private */ -function find(array, byProperty, condition) { - if (!array || array.length === 0) { - return; - } + function find(array, byProperty, condition) { + if (!array || array.length === 0) { + return; + } - var i = array.length - 1, - result = byProperty ? array[i][byProperty] : array[i]; - if (byProperty) { - while (i--) { - if (condition(array[i][byProperty], result)) { - result = array[i][byProperty]; + var i = array.length - 1, + result = byProperty ? array[i][byProperty] : array[i]; + if (byProperty) { + while (i--) { + if (condition(array[i][byProperty], result)) { + result = array[i][byProperty]; + } } } - } - else { - while (i--) { - if (condition(array[i], result)) { - result = array[i]; + else { + while (i--) { + if (condition(array[i], result)) { + result = array[i]; + } } } + return result; } - return result; -} -/** + /** * @namespace fabric.util.array */ -fabric.util.array = { - fill: fill, - invoke: invoke, - min: min, - max: max -}; + fabric.util.array = { + fill: fill, + invoke: invoke, + min: min, + max: max + }; + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/lang_class.js b/src/util/lang_class.js index ab7bdefc9eb..99df86b1fe5 100644 --- a/src/util/lang_class.js +++ b/src/util/lang_class.js @@ -1,94 +1,96 @@ -var slice = Array.prototype.slice, emptyFunction = function() { }, +(function(global) { - /** @ignore */ - addMethods = function(klass, source, parent) { - for (var property in source) { + var fabric = global.fabric, slice = Array.prototype.slice, emptyFunction = function() { }, + /** @ignore */ + addMethods = function(klass, source, parent) { + for (var property in source) { - if (property in klass.prototype && + if (property in klass.prototype && typeof klass.prototype[property] === 'function' && (source[property] + '').indexOf('callSuper') > -1) { - klass.prototype[property] = (function(property) { - return function() { + klass.prototype[property] = (function(property) { + return function() { - var superclass = this.constructor.superclass; - this.constructor.superclass = parent; - var returnValue = source[property].apply(this, arguments); - this.constructor.superclass = superclass; + var superclass = this.constructor.superclass; + this.constructor.superclass = parent; + var returnValue = source[property].apply(this, arguments); + this.constructor.superclass = superclass; - if (property !== 'initialize') { - return returnValue; - } - }; - })(property); + if (property !== 'initialize') { + return returnValue; + } + }; + })(property); + } + else { + klass.prototype[property] = source[property]; + } } - else { - klass.prototype[property] = source[property]; - } - } - }; + }; -function Subclass() { } + function Subclass() { } -function callSuper(methodName) { - var parentMethod = null, - _this = this; + function callSuper(methodName) { + var parentMethod = null, + _this = this; - // climb prototype chain to find method not equal to callee's method - while (_this.constructor.superclass) { - var superClassMethod = _this.constructor.superclass.prototype[methodName]; - if (_this[methodName] !== superClassMethod) { - parentMethod = superClassMethod; - break; - } - // eslint-disable-next-line + // climb prototype chain to find method not equal to callee's method + while (_this.constructor.superclass) { + var superClassMethod = _this.constructor.superclass.prototype[methodName]; + if (_this[methodName] !== superClassMethod) { + parentMethod = superClassMethod; + break; + } + // eslint-disable-next-line _this = _this.constructor.superclass.prototype; - } + } - if (!parentMethod) { - return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); - } + if (!parentMethod) { + return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); + } - return (arguments.length > 1) - ? parentMethod.apply(this, slice.call(arguments, 1)) - : parentMethod.call(this); -} + return (arguments.length > 1) + ? parentMethod.apply(this, slice.call(arguments, 1)) + : parentMethod.call(this); + } -/** + /** * Helper for creation of "classes". * @memberOf fabric.util * @param {Function} [parent] optional "Class" to inherit from * @param {Object} [properties] Properties shared by all instances of this class * (be careful modifying objects defined here as this would affect all instances) */ -function createClass() { - var parent = null, - properties = slice.call(arguments, 0); + function createClass() { + var parent = null, + properties = slice.call(arguments, 0); - if (typeof properties[0] === 'function') { - parent = properties.shift(); - } - function klass() { - this.initialize.apply(this, arguments); - } + if (typeof properties[0] === 'function') { + parent = properties.shift(); + } + function klass() { + this.initialize.apply(this, arguments); + } - klass.superclass = parent; - klass.subclasses = []; + klass.superclass = parent; + klass.subclasses = []; - if (parent) { - Subclass.prototype = parent.prototype; - klass.prototype = new Subclass(); - parent.subclasses.push(klass); - } - for (var i = 0, length = properties.length; i < length; i++) { - addMethods(klass, properties[i], parent); - } - if (!klass.prototype.initialize) { - klass.prototype.initialize = emptyFunction; + if (parent) { + Subclass.prototype = parent.prototype; + klass.prototype = new Subclass(); + parent.subclasses.push(klass); + } + for (var i = 0, length = properties.length; i < length; i++) { + addMethods(klass, properties[i], parent); + } + if (!klass.prototype.initialize) { + klass.prototype.initialize = emptyFunction; + } + klass.prototype.constructor = klass; + klass.prototype.callSuper = callSuper; + return klass; } - klass.prototype.constructor = klass; - klass.prototype.callSuper = callSuper; - return klass; -} -fabric.util.createClass = createClass; + fabric.util.createClass = createClass; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/lang_object.js b/src/util/lang_object.js index 5debb3d9f33..0d278c9220c 100644 --- a/src/util/lang_object.js +++ b/src/util/lang_object.js @@ -1,4 +1,6 @@ -/** +(function(global) { + var fabric = global.fabric; + /** * Copies all enumerable properties of one js object to another * this does not and cannot compete with generic utils. * Does not clone or extend fabric.Object subclasses. @@ -11,47 +13,47 @@ * @return {Object} */ -function extend(destination, source, deep) { - // JScript DontEnum bug is not taken care of - // the deep clone is for internal use, is not meant to avoid - // javascript traps or cloning html element or self referenced objects. - if (deep) { - if (!fabric.isLikelyNode && source instanceof Element) { - // avoid cloning deep images, canvases, - destination = source; - } - else if (source instanceof Array) { - destination = []; - for (var i = 0, len = source.length; i < len; i++) { - destination[i] = extend({ }, source[i], deep); + function extend(destination, source, deep) { + // JScript DontEnum bug is not taken care of + // the deep clone is for internal use, is not meant to avoid + // javascript traps or cloning html element or self referenced objects. + if (deep) { + if (!fabric.isLikelyNode && source instanceof Element) { + // avoid cloning deep images, canvases, + destination = source; } - } - else if (source && typeof source === 'object') { - for (var property in source) { - if (property === 'canvas' || property === 'group') { - // we do not want to clone this props at all. - // we want to keep the keys in the copy - destination[property] = null; + else if (source instanceof Array) { + destination = []; + for (var i = 0, len = source.length; i < len; i++) { + destination[i] = extend({ }, source[i], deep); } - else if (source.hasOwnProperty(property)) { - destination[property] = extend({ }, source[property], deep); + } + else if (source && typeof source === 'object') { + for (var property in source) { + if (property === 'canvas' || property === 'group') { + // we do not want to clone this props at all. + // we want to keep the keys in the copy + destination[property] = null; + } + else if (source.hasOwnProperty(property)) { + destination[property] = extend({ }, source[property], deep); + } } } + else { + // this sounds odd for an extend but is ok for recursive use + destination = source; + } } else { - // this sounds odd for an extend but is ok for recursive use - destination = source; - } - } - else { - for (var property in source) { - destination[property] = source[property]; + for (var property in source) { + destination[property] = source[property]; + } } + return destination; } - return destination; -} -/** + /** * Creates an empty object and copies all enumerable properties of another object to it * This method is mostly for internal use, and not intended for duplicating shapes in canvas. * @memberOf fabric.util.object @@ -60,14 +62,15 @@ function extend(destination, source, deep) { * @return {Object} */ -//TODO: this function return an empty object if you try to clone null -function clone(object, deep) { - return deep ? extend({ }, object, deep) : Object.assign({}, object); -} + //TODO: this function return an empty object if you try to clone null + function clone(object, deep) { + return deep ? extend({ }, object, deep) : Object.assign({}, object); + } -/** @namespace fabric.util.object */ -fabric.util.object = { - extend: extend, - clone: clone -}; -fabric.util.object.extend(fabric.util, fabric.Observable); + /** @namespace fabric.util.object */ + fabric.util.object = { + extend: extend, + clone: clone + }; + fabric.util.object.extend(fabric.util, fabric.Observable); +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/lang_string.js b/src/util/lang_string.js index a258fbc77c3..2e6840c5c9d 100644 --- a/src/util/lang_string.js +++ b/src/util/lang_string.js @@ -1,16 +1,18 @@ -/** +(function(global) { + var fabric = global.fabric; + /** * Camelizes a string * @memberOf fabric.util.string * @param {String} string String to camelize * @return {String} Camelized version of a string */ -function camelize(string) { - return string.replace(/-+(.)?/g, function(match, character) { - return character ? character.toUpperCase() : ''; - }); -} + function camelize(string) { + return string.replace(/-+(.)?/g, function(match, character) { + return character ? character.toUpperCase() : ''; + }); + } -/** + /** * Capitalizes a string * @memberOf fabric.util.string * @param {String} string String to capitalize @@ -19,89 +21,90 @@ function camelize(string) { * and other letters are converted to lowercase. * @return {String} Capitalized version of a string */ -function capitalize(string, firstLetterOnly) { - return string.charAt(0).toUpperCase() + + function capitalize(string, firstLetterOnly) { + return string.charAt(0).toUpperCase() + (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()); -} + } -/** + /** * Escapes XML in a string * @memberOf fabric.util.string * @param {String} string String to escape * @return {String} Escaped version of a string */ -function escapeXml(string) { - return string.replace(/&/g, '&') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(//g, '>'); -} + function escapeXml(string) { + return string.replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); + } -/** + /** * Divide a string in the user perceived single units * @memberOf fabric.util.string * @param {String} textstring String to escape * @return {Array} array containing the graphemes */ -function graphemeSplit(textstring) { - var i = 0, chr, graphemes = []; - for (i = 0, chr; i < textstring.length; i++) { - if ((chr = getWholeChar(textstring, i)) === false) { - continue; + function graphemeSplit(textstring) { + var i = 0, chr, graphemes = []; + for (i = 0, chr; i < textstring.length; i++) { + if ((chr = getWholeChar(textstring, i)) === false) { + continue; + } + graphemes.push(chr); } - graphemes.push(chr); + return graphemes; } - return graphemes; -} -// taken from mdn in the charAt doc page. -function getWholeChar(str, i) { - var code = str.charCodeAt(i); + // taken from mdn in the charAt doc page. + function getWholeChar(str, i) { + var code = str.charCodeAt(i); - if (isNaN(code)) { - return ''; // Position not found - } - if (code < 0xD800 || code > 0xDFFF) { - return str.charAt(i); - } + if (isNaN(code)) { + return ''; // Position not found + } + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); + } - // High surrogate (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 <= code && code <= 0xDBFF) { - if (str.length <= (i + 1)) { - throw 'High surrogate without following low surrogate'; + // High surrogate (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + return str.charAt(i) + str.charAt(i + 1); } - var next = str.charCodeAt(i + 1); - if (0xDC00 > next || next > 0xDFFF) { - throw 'High surrogate without following low surrogate'; + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; } - return str.charAt(i) + str.charAt(i + 1); - } - // Low surrogate (0xDC00 <= code && code <= 0xDFFF) - if (i === 0) { - throw 'Low surrogate without preceding high surrogate'; - } - var prev = str.charCodeAt(i - 1); + var prev = str.charCodeAt(i - 1); - // (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 > prev || prev > 0xDBFF) { - throw 'Low surrogate without preceding high surrogate'; + // (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; + } + // We can pass over low surrogates now as the second component + // in a pair which we have already processed + return false; } - // We can pass over low surrogates now as the second component - // in a pair which we have already processed - return false; -} -/** + /** * String utilities * @namespace fabric.util.string */ -fabric.util.string = { - camelize: camelize, - capitalize: capitalize, - escapeXml: escapeXml, - graphemeSplit: graphemeSplit -}; + fabric.util.string = { + camelize: camelize, + capitalize: capitalize, + escapeXml: escapeXml, + graphemeSplit: graphemeSplit + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/misc.js b/src/util/misc.js index 60a06aa2699..c59a3b1d051 100644 --- a/src/util/misc.js +++ b/src/util/misc.js @@ -1,63 +1,64 @@ -var fabric = exports.fabric || (exports.fabric = { }), - sqrt = Math.sqrt, - atan2 = Math.atan2, - pow = Math.pow, - PiBy180 = Math.PI / 180, - PiBy2 = Math.PI / 2; - -/** +(function(global) { + + var fabric = global.fabric, sqrt = Math.sqrt, + atan2 = Math.atan2, + pow = Math.pow, + PiBy180 = Math.PI / 180, + PiBy2 = Math.PI / 2; + + /** * @typedef {[number,number,number,number,number,number]} Matrix */ -/** + /** * @namespace fabric.util */ -fabric.util = { + fabric.util = { - /** + /** * Calculate the cos of an angle, avoiding returning floats for known results * @static * @memberOf fabric.util * @param {Number} angle the angle in radians or in degree * @return {Number} */ - cos: function(angle) { - if (angle === 0) { return 1; } - if (angle < 0) { - // cos(a) = cos(-a) - angle = -angle; - } - var angleSlice = angle / PiBy2; - switch (angleSlice) { - case 1: case 3: return 0; - case 2: return -1; - } - return Math.cos(angle); - }, + cos: function(angle) { + if (angle === 0) { return 1; } + if (angle < 0) { + // cos(a) = cos(-a) + angle = -angle; + } + var angleSlice = angle / PiBy2; + switch (angleSlice) { + case 1: case 3: return 0; + case 2: return -1; + } + return Math.cos(angle); + }, - /** + /** * Calculate the sin of an angle, avoiding returning floats for known results * @static * @memberOf fabric.util * @param {Number} angle the angle in radians or in degree * @return {Number} */ - sin: function(angle) { - if (angle === 0) { return 0; } - var angleSlice = angle / PiBy2, sign = 1; - if (angle < 0) { - // sin(-a) = -sin(a) - sign = -1; - } - switch (angleSlice) { - case 1: return sign; - case 2: return 0; - case 3: return -sign; - } - return Math.sin(angle); - }, + sin: function(angle) { + if (angle === 0) { return 0; } + var angleSlice = angle / PiBy2, sign = 1; + if (angle < 0) { + // sin(-a) = -sin(a) + sign = -1; + } + switch (angleSlice) { + case 1: return sign; + case 2: return 0; + case 3: return -sign; + } + return Math.sin(angle); + }, - /** + /** * Removes value from an array. * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` * @static @@ -66,15 +67,15 @@ fabric.util = { * @param {*} value * @return {Array} original array */ - removeFromArray: function(array, value) { - var idx = array.indexOf(value); - if (idx !== -1) { - array.splice(idx, 1); - } - return array; - }, + removeFromArray: function(array, value) { + var idx = array.indexOf(value); + if (idx !== -1) { + array.splice(idx, 1); + } + return array; + }, - /** + /** * Returns random number between 2 specified ones. * @static * @memberOf fabric.util @@ -82,33 +83,33 @@ fabric.util = { * @param {Number} max upper limit * @return {Number} random value (between min and max) */ - getRandomInt: function(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; - }, + getRandomInt: function(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, - /** + /** * Transforms degrees to radians. * @static * @memberOf fabric.util * @param {Number} degrees value in degrees * @return {Number} value in radians */ - degreesToRadians: function(degrees) { - return degrees * PiBy180; - }, + degreesToRadians: function(degrees) { + return degrees * PiBy180; + }, - /** + /** * Transforms radians to degrees. * @static * @memberOf fabric.util * @param {Number} radians value in radians * @return {Number} value in degrees */ - radiansToDegrees: function(radians) { - return radians / PiBy180; - }, + radiansToDegrees: function(radians) { + return radians / PiBy180; + }, - /** + /** * Rotates `point` around `origin` with `radians` * @static * @memberOf fabric.util @@ -117,13 +118,13 @@ fabric.util = { * @param {Number} radians The radians of the angle for the rotation * @return {fabric.Point} The new rotated point */ - rotatePoint: function(point, origin, radians) { - var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), - v = fabric.util.rotateVector(newPoint, radians); - return v.addEquals(origin); - }, + rotatePoint: function(point, origin, radians) { + var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), + v = fabric.util.rotateVector(newPoint, radians); + return v.addEquals(origin); + }, - /** + /** * Rotates `vector` with `radians` * @static * @memberOf fabric.util @@ -131,15 +132,15 @@ fabric.util = { * @param {Number} radians The radians of the angle for the rotation * @return {fabric.Point} The new rotated point */ - rotateVector: function(vector, radians) { - var sin = fabric.util.sin(radians), - cos = fabric.util.cos(radians), - rx = vector.x * cos - vector.y * sin, - ry = vector.x * sin + vector.y * cos; - return new fabric.Point(rx, ry); - }, - - /** + rotateVector: function(vector, radians) { + var sin = fabric.util.sin(radians), + cos = fabric.util.cos(radians), + rx = vector.x * cos - vector.y * sin, + ry = vector.x * sin + vector.y * cos; + return new fabric.Point(rx, ry); + }, + + /** * Creates a vetor from points represented as a point * @static * @memberOf fabric.util @@ -152,11 +153,11 @@ fabric.util = { * @param {Point} to * @returns {Point} vector */ - createVector: function (from, to) { - return new fabric.Point(to.x - from.x, to.y - from.y); - }, + createVector: function (from, to) { + return new fabric.Point(to.x - from.x, to.y - from.y); + }, - /** + /** * Calculates angle between 2 vectors using dot product * @static * @memberOf fabric.util @@ -164,21 +165,21 @@ fabric.util = { * @param {Point} b * @returns the angle in radian between the vectors */ - calcAngleBetweenVectors: function (a, b) { - return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); - }, + calcAngleBetweenVectors: function (a, b) { + return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); + }, - /** + /** * @static * @memberOf fabric.util * @param {Point} v * @returns {Point} vector representing the unit vector of pointing to the direction of `v` */ - getHatVector: function (v) { - return new fabric.Point(v.x, v.y).scalarMultiply(1 / Math.hypot(v.x, v.y)); - }, + getHatVector: function (v) { + return new fabric.Point(v.x, v.y).scalarMultiply(1 / Math.hypot(v.x, v.y)); + }, - /** + /** * @static * @memberOf fabric.util * @param {Point} A @@ -186,19 +187,19 @@ fabric.util = { * @param {Point} C * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle */ - getBisector: function (A, B, C) { - var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); - var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); - // check if alpha is relative to AB->BC - var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); - var phi = alpha * (ro === 0 ? 1 : -1) / 2; - return { - vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), - angle: alpha - }; - }, + getBisector: function (A, B, C) { + var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); + var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); + // check if alpha is relative to AB->BC + var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); + var phi = alpha * (ro === 0 ? 1 : -1) / 2; + return { + vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), + angle: alpha + }; + }, - /** + /** * Project stroke width on points returning 2 projections for each point as follows: * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke. * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector. @@ -217,58 +218,58 @@ fabric.util = { * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points * @returns {fabric.Point[]} array of size 2n/4n of all suspected points */ - projectStrokeOnPoints: function (points, options, openPath) { - var coords = [], s = options.strokeWidth / 2, - strokeUniformScalar = options.strokeUniform ? - new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), - getStrokeHatVector = function (v) { - var scalar = s / (Math.hypot(v.x, v.y)); - return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); - }; - if (points.length <= 1) {return coords;} - points.forEach(function (p, index) { - var A = new fabric.Point(p.x, p.y), B, C; - if (index === 0) { - C = points[index + 1]; - B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; - } - else if (index === points.length - 1) { - B = points[index - 1]; - C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; - } - else { - B = points[index - 1]; - C = points[index + 1]; - } - var bisector = fabric.util.getBisector(A, B, C), - bisectorVector = bisector.vector, - alpha = bisector.angle, - scalar, - miterVector; - if (options.strokeLineJoin === 'miter') { - scalar = -s / Math.sin(alpha / 2); + projectStrokeOnPoints: function (points, options, openPath) { + var coords = [], s = options.strokeWidth / 2, + strokeUniformScalar = options.strokeUniform ? + new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), + getStrokeHatVector = function (v) { + var scalar = s / (Math.hypot(v.x, v.y)); + return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); + }; + if (points.length <= 1) {return coords;} + points.forEach(function (p, index) { + var A = new fabric.Point(p.x, p.y), B, C; + if (index === 0) { + C = points[index + 1]; + B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; + } + else if (index === points.length - 1) { + B = points[index - 1]; + C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; + } + else { + B = points[index - 1]; + C = points[index + 1]; + } + var bisector = fabric.util.getBisector(A, B, C), + bisectorVector = bisector.vector, + alpha = bisector.angle, + scalar, + miterVector; + if (options.strokeLineJoin === 'miter') { + scalar = -s / Math.sin(alpha / 2); + miterVector = new fabric.Point( + bisectorVector.x * scalar * strokeUniformScalar.x, + bisectorVector.y * scalar * strokeUniformScalar.y + ); + if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + return; + } + } + scalar = -s * Math.SQRT2; miterVector = new fabric.Point( bisectorVector.x * scalar * strokeUniformScalar.x, bisectorVector.y * scalar * strokeUniformScalar.y ); - if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - return; - } - } - scalar = -s * Math.SQRT2; - miterVector = new fabric.Point( - bisectorVector.x * scalar * strokeUniformScalar.x, - bisectorVector.y * scalar * strokeUniformScalar.y - ); - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - }); - return coords; - }, + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + }); + return coords; + }, - /** + /** * Apply transform t to point p * @static * @memberOf fabric.util @@ -277,20 +278,20 @@ fabric.util = { * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied * @return {fabric.Point} The transformed point */ - transformPoint: function(p, t, ignoreOffset) { - if (ignoreOffset) { + transformPoint: function(p, t, ignoreOffset) { + if (ignoreOffset) { + return new fabric.Point( + t[0] * p.x + t[2] * p.y, + t[1] * p.x + t[3] * p.y + ); + } return new fabric.Point( - t[0] * p.x + t[2] * p.y, - t[1] * p.x + t[3] * p.y + t[0] * p.x + t[2] * p.y + t[4], + t[1] * p.x + t[3] * p.y + t[5] ); - } - return new fabric.Point( - t[0] * p.x + t[2] * p.y + t[4], - t[1] * p.x + t[3] * p.y + t[5] - ); - }, + }, - /** + /** * Sends a point from the source coordinate plane to the destination coordinate plane.\ * From the canvas/viewer's perspective the point remains unchanged. * @@ -309,15 +310,15 @@ fabric.util = { * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `point` should be sent to the canvas coordinate plane. * @returns {fabric.Point} transformed point */ - sendPointToPlane: function (point, from, to) { - // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) - // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) - var inv = fabric.util.invertTransform(to || fabric.iMatrix); - var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); - return fabric.util.transformPoint(point, t); - }, - - /** + sendPointToPlane: function (point, from, to) { + // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) + // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) + var inv = fabric.util.invertTransform(to || fabric.iMatrix); + var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); + return fabric.util.transformPoint(point, t); + }, + + /** * Transform point relative to canvas. * From the viewport/viewer's perspective the point remains unchanged. * @@ -336,21 +337,21 @@ fabric.util = { * @param {'sibling'|'child'} relationAfter desired relation of point to canvas * @returns {fabric.Point} transformed point */ - transformPointRelativeToCanvas: function (point, canvas, relationBefore, relationAfter) { - if (relationBefore !== 'child' && relationBefore !== 'sibling') { - throw new Error('fabric.js: received bad argument ' + relationBefore); - } - if (relationAfter !== 'child' && relationAfter !== 'sibling') { - throw new Error('fabric.js: received bad argument ' + relationAfter); - } - if (relationBefore === relationAfter) { - return point; - } - var t = canvas.viewportTransform; - return fabric.util.transformPoint(point, relationAfter === 'child' ? fabric.util.invertTransform(t) : t); - }, + transformPointRelativeToCanvas: function (point, canvas, relationBefore, relationAfter) { + if (relationBefore !== 'child' && relationBefore !== 'sibling') { + throw new Error('fabric.js: received bad argument ' + relationBefore); + } + if (relationAfter !== 'child' && relationAfter !== 'sibling') { + throw new Error('fabric.js: received bad argument ' + relationAfter); + } + if (relationBefore === relationAfter) { + return point; + } + var t = canvas.viewportTransform; + return fabric.util.transformPoint(point, relationAfter === 'child' ? fabric.util.invertTransform(t) : t); + }, - /** + /** * Returns coordinates of points's bounding rectangle (left, top, width, height) * @static * @memberOf fabric.util @@ -358,46 +359,46 @@ fabric.util = { * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix * @return {Object} Object with left, top, width, height properties */ - makeBoundingBoxFromPoints: function(points, transform) { - if (transform) { - for (var i = 0; i < points.length; i++) { - points[i] = fabric.util.transformPoint(points[i], transform); + makeBoundingBoxFromPoints: function(points, transform) { + if (transform) { + for (var i = 0; i < points.length; i++) { + points[i] = fabric.util.transformPoint(points[i], transform); + } } - } - var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], - minX = fabric.util.array.min(xPoints), - maxX = fabric.util.array.max(xPoints), - width = maxX - minX, - yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], - minY = fabric.util.array.min(yPoints), - maxY = fabric.util.array.max(yPoints), - height = maxY - minY; - - return { - left: minX, - top: minY, - width: width, - height: height - }; - }, + var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], + minX = fabric.util.array.min(xPoints), + maxX = fabric.util.array.max(xPoints), + width = maxX - minX, + yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], + minY = fabric.util.array.min(yPoints), + maxY = fabric.util.array.max(yPoints), + height = maxY - minY; + + return { + left: minX, + top: minY, + width: width, + height: height + }; + }, - /** + /** * Invert transformation t * @static * @memberOf fabric.util * @param {Array} t The transform * @return {Array} The inverted transform */ - invertTransform: function(t) { - var a = 1 / (t[0] * t[3] - t[1] * t[2]), - r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], - o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); - r[4] = -o.x; - r[5] = -o.y; - return r; - }, - - /** + invertTransform: function(t) { + var a = 1 / (t[0] * t[3] - t[1] * t[2]), + r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], + o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); + r[4] = -o.x; + r[5] = -o.y; + return r; + }, + + /** * A wrapper around Number#toFixed, which contrary to native method returns number, not string. * @static * @memberOf fabric.util @@ -405,120 +406,120 @@ fabric.util = { * @param {Number} fractionDigits number of fraction digits to "leave" * @return {Number} */ - toFixed: function(number, fractionDigits) { - return parseFloat(Number(number).toFixed(fractionDigits)); - }, + toFixed: function(number, fractionDigits) { + return parseFloat(Number(number).toFixed(fractionDigits)); + }, - /** + /** * Converts from attribute value to pixel value if applicable. * Returns converted pixels or original value not converted. * @param {Number|String} value number to operate on * @param {Number} fontSize * @return {Number|String} */ - parseUnit: function(value, fontSize) { - var unit = /\D{0,2}$/.exec(value), - number = parseFloat(value); - if (!fontSize) { - fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; - } - switch (unit[0]) { - case 'mm': - return number * fabric.DPI / 25.4; + parseUnit: function(value, fontSize) { + var unit = /\D{0,2}$/.exec(value), + number = parseFloat(value); + if (!fontSize) { + fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + } + switch (unit[0]) { + case 'mm': + return number * fabric.DPI / 25.4; - case 'cm': - return number * fabric.DPI / 2.54; + case 'cm': + return number * fabric.DPI / 2.54; - case 'in': - return number * fabric.DPI; + case 'in': + return number * fabric.DPI; - case 'pt': - return number * fabric.DPI / 72; // or * 4 / 3 + case 'pt': + return number * fabric.DPI / 72; // or * 4 / 3 - case 'pc': - return number * fabric.DPI / 72 * 12; // or * 16 + case 'pc': + return number * fabric.DPI / 72 * 12; // or * 16 - case 'em': - return number * fontSize; + case 'em': + return number * fontSize; - default: - return number; - } - }, + default: + return number; + } + }, - /** + /** * Function which always returns `false`. * @static * @memberOf fabric.util * @return {Boolean} */ - falseFunction: function() { - return false; - }, + falseFunction: function() { + return false; + }, - /** + /** * Returns klass "Class" object of given namespace * @memberOf fabric.util * @param {String} type Type of object (eg. 'circle') * @param {String} namespace Namespace to get klass "Class" object from * @return {Object} klass "Class" */ - getKlass: function(type, namespace) { - // capitalize first letter only - type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); - return fabric.util.resolveNamespace(namespace)[type]; - }, + getKlass: function(type, namespace) { + // capitalize first letter only + type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); + return fabric.util.resolveNamespace(namespace)[type]; + }, - /** + /** * Returns array of attributes for given svg that fabric parses * @memberOf fabric.util * @param {String} type Type of svg element (eg. 'circle') * @return {Array} string names of supported attributes */ - getSvgAttributes: function(type) { - var attributes = [ - 'instantiated_by_use', - 'style', - 'id', - 'class' - ]; - switch (type) { - case 'linearGradient': - attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); - break; - case 'radialGradient': - attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); - break; - case 'stop': - attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); - break; - } - return attributes; - }, + getSvgAttributes: function(type) { + var attributes = [ + 'instantiated_by_use', + 'style', + 'id', + 'class' + ]; + switch (type) { + case 'linearGradient': + attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); + break; + case 'radialGradient': + attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); + break; + case 'stop': + attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); + break; + } + return attributes; + }, - /** + /** * Returns object of given namespace * @memberOf fabric.util * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric' * @return {Object} Object for given namespace (default fabric) */ - resolveNamespace: function(namespace) { - if (!namespace) { - return fabric; - } + resolveNamespace: function(namespace) { + if (!namespace) { + return fabric; + } - var parts = namespace.split('.'), - len = parts.length, i, - obj = exports || fabric.window; + var parts = namespace.split('.'), + len = parts.length, i, + obj = global || fabric.window; - for (i = 0; i < len; ++i) { - obj = obj[parts[i]]; - } + for (i = 0; i < len; ++i) { + obj = obj[parts[i]]; + } - return obj; - }, + return obj; + }, - /** + /** * Loads image element from given url and resolve it, or catch. * @memberOf fabric.util * @param {String} url URL representing an image @@ -526,28 +527,28 @@ fabric.util = { * @param {string} [options.crossOrigin] cors value for the image loading, default to anonymous * @param {Promise} img the loaded image. */ - loadImage: function(url, options) { - return new Promise(function(resolve, reject) { - var img = fabric.util.createImage(); - var done = function() { - img.onload = img.onerror = null; - resolve(img); - }; - if (!url) { - done(); - } - else { - img.onload = done; - img.onerror = function () { - reject(new Error('Error loading ' + img.src)); + loadImage: function(url, options) { + return new Promise(function(resolve, reject) { + var img = fabric.util.createImage(); + var done = function() { + img.onload = img.onerror = null; + resolve(img); }; - options && options.crossOrigin && (img.crossOrigin = options.crossOrigin); - img.src = url; - } - }); - }, + if (!url) { + done(); + } + else { + img.onload = done; + img.onerror = function () { + reject(new Error('Error loading ' + img.src)); + }; + options && options.crossOrigin && (img.crossOrigin = options.crossOrigin); + img.src = url; + } + }); + }, - /** + /** * Creates corresponding fabric instances from their object representations * @static * @memberOf fabric.util @@ -556,65 +557,65 @@ fabric.util = { * @param {Function} reviver Method for further parsing of object elements, * called after each fabric object created. */ - enlivenObjects: function(objects, namespace, reviver) { - return Promise.all(objects.map(function(obj) { - var klass = fabric.util.getKlass(obj.type, namespace); - return klass.fromObject(obj).then(function(fabricInstance) { - reviver && reviver(obj, fabricInstance); - return fabricInstance; - }); - })); - }, + enlivenObjects: function(objects, namespace, reviver) { + return Promise.all(objects.map(function(obj) { + var klass = fabric.util.getKlass(obj.type, namespace); + return klass.fromObject(obj).then(function(fabricInstance) { + reviver && reviver(obj, fabricInstance); + return fabricInstance; + }); + })); + }, - /** + /** * Creates corresponding fabric instances residing in an object, e.g. `clipPath` * @param {Object} object with properties to enlive ( fill, stroke, clipPath, path ) * @returns {Promise} the input object with enlived values */ - enlivenObjectEnlivables: function (serializedObject) { - // enlive every possible property - var promises = Object.values(serializedObject).map(function(value) { - if (!value) { + enlivenObjectEnlivables: function (serializedObject) { + // enlive every possible property + var promises = Object.values(serializedObject).map(function(value) { + if (!value) { + return value; + } + if (value.colorStops) { + return new fabric.Gradient(value); + } + if (value.type) { + return fabric.util.enlivenObjects([value]).then(function (enlived) { + return enlived[0]; + }); + } + if (value.source) { + return fabric.Pattern.fromObject(value); + } return value; - } - if (value.colorStops) { - return new fabric.Gradient(value); - } - if (value.type) { - return fabric.util.enlivenObjects([value]).then(function (enlived) { - return enlived[0]; - }); - } - if (value.source) { - return fabric.Pattern.fromObject(value); - } - return value; - }); - var keys = Object.keys(serializedObject); - return Promise.all(promises).then(function(enlived) { - return enlived.reduce(function(acc, instance, index) { - acc[keys[index]] = instance; - return acc; - }, {}); - }); - }, + }); + var keys = Object.keys(serializedObject); + return Promise.all(promises).then(function(enlived) { + return enlived.reduce(function(acc, instance, index) { + acc[keys[index]] = instance; + return acc; + }, {}); + }); + }, - /** + /** * Groups SVG elements (usually those retrieved from SVG document) * @static * @memberOf fabric.util * @param {Array} elements SVG elements to group * @return {fabric.Object|fabric.Group} */ - groupSVGElements: function(elements) { - if (elements && elements.length === 1) { - return elements[0]; - } - return new fabric.Group(elements); - }, + groupSVGElements: function(elements) { + if (elements && elements.length === 1) { + return elements[0]; + } + return new fabric.Group(elements); + }, - /** + /** * Populates an object with properties of another object * @static * @memberOf fabric.util @@ -622,42 +623,42 @@ fabric.util = { * @param {Object} destination Destination object * @return {Array} properties Properties names to include */ - populateWithProperties: function(source, destination, properties) { - if (properties && Array.isArray(properties)) { - for (var i = 0, len = properties.length; i < len; i++) { - if (properties[i] in source) { - destination[properties[i]] = source[properties[i]]; + populateWithProperties: function(source, destination, properties) { + if (properties && Array.isArray(properties)) { + for (var i = 0, len = properties.length; i < len; i++) { + if (properties[i] in source) { + destination[properties[i]] = source[properties[i]]; + } } } - } - }, + }, - /** + /** * Creates canvas element * @static * @memberOf fabric.util * @return {CanvasElement} initialized canvas element */ - createCanvasElement: function() { - return fabric.document.createElement('canvas'); - }, + createCanvasElement: function() { + return fabric.document.createElement('canvas'); + }, - /** + /** * Creates a canvas element that is a copy of another and is also painted * @param {CanvasElement} canvas to copy size and content of * @static * @memberOf fabric.util * @return {CanvasElement} initialized canvas element */ - copyCanvasElement: function(canvas) { - var newCanvas = fabric.util.createCanvasElement(); - newCanvas.width = canvas.width; - newCanvas.height = canvas.height; - newCanvas.getContext('2d').drawImage(canvas, 0, 0); - return newCanvas; - }, - - /** + copyCanvasElement: function(canvas) { + var newCanvas = fabric.util.createCanvasElement(); + newCanvas.width = canvas.width; + newCanvas.height = canvas.height; + newCanvas.getContext('2d').drawImage(canvas, 0, 0); + return newCanvas; + }, + + /** * since 2.6.0 moved from canvas instance to utility. * @param {CanvasElement} canvasEl to copy size and content of * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too @@ -666,21 +667,21 @@ fabric.util = { * @memberOf fabric.util * @return {String} data url */ - toDataURL: function(canvasEl, format, quality) { - return canvasEl.toDataURL('image/' + format, quality); - }, + toDataURL: function(canvasEl, format, quality) { + return canvasEl.toDataURL('image/' + format, quality); + }, - /** + /** * Creates image element (works on client and node) * @static * @memberOf fabric.util * @return {HTMLImageElement} HTML image element */ - createImage: function() { - return fabric.document.createElement('img'); - }, + createImage: function() { + return fabric.document.createElement('img'); + }, - /** + /** * Multiply matrix A by matrix B to nest transformations * @static * @memberOf fabric.util @@ -689,43 +690,43 @@ fabric.util = { * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices * @return {Array} The product of the two transform matrices */ - multiplyTransformMatrices: function(a, b, is2x2) { - // Matrix multiply a * b - return [ - a[0] * b[0] + a[2] * b[1], - a[1] * b[0] + a[3] * b[1], - a[0] * b[2] + a[2] * b[3], - a[1] * b[2] + a[3] * b[3], - is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], - is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] - ]; - }, - - /** + multiplyTransformMatrices: function(a, b, is2x2) { + // Matrix multiply a * b + return [ + a[0] * b[0] + a[2] * b[1], + a[1] * b[0] + a[3] * b[1], + a[0] * b[2] + a[2] * b[3], + a[1] * b[2] + a[3] * b[3], + is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], + is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] + ]; + }, + + /** * Decomposes standard 2x3 matrix into transform components * @static * @memberOf fabric.util * @param {Array} a transformMatrix * @return {Object} Components of transform */ - qrDecompose: function(a) { - var angle = atan2(a[1], a[0]), - denom = pow(a[0], 2) + pow(a[1], 2), - scaleX = sqrt(denom), - scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, - skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); - return { - angle: angle / PiBy180, - scaleX: scaleX, - scaleY: scaleY, - skewX: skewX / PiBy180, - skewY: 0, - translateX: a[4], - translateY: a[5] - }; - }, + qrDecompose: function(a) { + var angle = atan2(a[1], a[0]), + denom = pow(a[0], 2) + pow(a[1], 2), + scaleX = sqrt(denom), + scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, + skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); + return { + angle: angle / PiBy180, + scaleX: scaleX, + scaleY: scaleY, + skewX: skewX / PiBy180, + skewY: 0, + translateX: a[4], + translateY: a[5] + }; + }, - /** + /** * Returns a transform matrix starting from an object of the same kind of * the one returned from qrDecompose, useful also if you want to calculate some * transformations from an object that is not enlived yet @@ -735,17 +736,17 @@ fabric.util = { * @param {Number} [options.angle] angle in degrees * @return {Number[]} transform matrix */ - calcRotateMatrix: function(options) { - if (!options.angle) { - return fabric.iMatrix.concat(); - } - var theta = fabric.util.degreesToRadians(options.angle), - cos = fabric.util.cos(theta), - sin = fabric.util.sin(theta); - return [cos, sin, -sin, cos, 0, 0]; - }, + calcRotateMatrix: function(options) { + if (!options.angle) { + return fabric.iMatrix.concat(); + } + var theta = fabric.util.degreesToRadians(options.angle), + cos = fabric.util.cos(theta), + sin = fabric.util.sin(theta); + return [cos, sin, -sin, cos, 0, 0]; + }, - /** + /** * Returns a transform matrix starting from an object of the same kind of * the one returned from qrDecompose, useful also if you want to calculate some * transformations from an object that is not enlived yet. @@ -762,34 +763,34 @@ fabric.util = { * @param {Number} [options.skewY] * @return {Number[]} transform matrix */ - calcDimensionsMatrix: function(options) { - var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, - scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, - scaleMatrix = [ - options.flipX ? -scaleX : scaleX, - 0, - 0, - options.flipY ? -scaleY : scaleY, - 0, - 0], - multiply = fabric.util.multiplyTransformMatrices, - degreesToRadians = fabric.util.degreesToRadians; - if (options.skewX) { - scaleMatrix = multiply( - scaleMatrix, - [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], - true); - } - if (options.skewY) { - scaleMatrix = multiply( - scaleMatrix, - [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], - true); - } - return scaleMatrix; - }, + calcDimensionsMatrix: function(options) { + var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, + scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, + scaleMatrix = [ + options.flipX ? -scaleX : scaleX, + 0, + 0, + options.flipY ? -scaleY : scaleY, + 0, + 0], + multiply = fabric.util.multiplyTransformMatrices, + degreesToRadians = fabric.util.degreesToRadians; + if (options.skewX) { + scaleMatrix = multiply( + scaleMatrix, + [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], + true); + } + if (options.skewY) { + scaleMatrix = multiply( + scaleMatrix, + [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], + true); + } + return scaleMatrix; + }, - /** + /** * Returns a transform matrix starting from an object of the same kind of * the one returned from qrDecompose, useful also if you want to calculate some * transformations from an object that is not enlived yet @@ -807,57 +808,57 @@ fabric.util = { * @param {Number} [options.translateY] * @return {Number[]} transform matrix */ - composeMatrix: function(options) { - var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], - multiply = fabric.util.multiplyTransformMatrices; - if (options.angle) { - matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); - } - if (options.scaleX !== 1 || options.scaleY !== 1 || + composeMatrix: function(options) { + var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], + multiply = fabric.util.multiplyTransformMatrices; + if (options.angle) { + matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); + } + if (options.scaleX !== 1 || options.scaleY !== 1 || options.skewX || options.skewY || options.flipX || options.flipY) { - matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); - } - return matrix; - }, + matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); + } + return matrix; + }, - /** + /** * reset an object transform state to neutral. Top and left are not accounted for * @static * @memberOf fabric.util * @param {fabric.Object} target object to transform */ - resetObjectTransform: function (target) { - target.scaleX = 1; - target.scaleY = 1; - target.skewX = 0; - target.skewY = 0; - target.flipX = false; - target.flipY = false; - target.rotate(0); - }, - - /** + resetObjectTransform: function (target) { + target.scaleX = 1; + target.scaleY = 1; + target.skewX = 0; + target.skewY = 0; + target.flipX = false; + target.flipY = false; + target.rotate(0); + }, + + /** * Extract Object transform values * @static * @memberOf fabric.util * @param {fabric.Object} target object to read from * @return {Object} Components of transform */ - saveObjectTransform: function (target) { - return { - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - angle: target.angle, - left: target.left, - flipX: target.flipX, - flipY: target.flipY, - top: target.top - }; - }, + saveObjectTransform: function (target) { + return { + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + angle: target.angle, + left: target.left, + flipX: target.flipX, + flipY: target.flipY, + top: target.top + }; + }, - /** + /** * Returns true if context has transparent pixel * at specified location (taking tolerance into account) * @param {CanvasRenderingContext2D} ctx context @@ -865,73 +866,73 @@ fabric.util = { * @param {Number} y y coordinate * @param {Number} tolerance Tolerance */ - isTransparent: function(ctx, x, y, tolerance) { + isTransparent: function(ctx, x, y, tolerance) { - // If tolerance is > 0 adjust start coords to take into account. - // If moves off Canvas fix to 0 - if (tolerance > 0) { - if (x > tolerance) { - x -= tolerance; - } - else { - x = 0; - } - if (y > tolerance) { - y -= tolerance; - } - else { - y = 0; + // If tolerance is > 0 adjust start coords to take into account. + // If moves off Canvas fix to 0 + if (tolerance > 0) { + if (x > tolerance) { + x -= tolerance; + } + else { + x = 0; + } + if (y > tolerance) { + y -= tolerance; + } + else { + y = 0; + } } - } - - var _isTransparent = true, i, temp, - imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), - l = imageData.data.length; - - // Split image data - for tolerance > 1, pixelDataSize = 4; - for (i = 3; i < l; i += 4) { - temp = imageData.data[i]; - _isTransparent = temp <= 0; - if (_isTransparent === false) { - break; // Stop if colour found + + var _isTransparent = true, i, temp, + imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), + l = imageData.data.length; + + // Split image data - for tolerance > 1, pixelDataSize = 4; + for (i = 3; i < l; i += 4) { + temp = imageData.data[i]; + _isTransparent = temp <= 0; + if (_isTransparent === false) { + break; // Stop if colour found + } } - } - imageData = null; + imageData = null; - return _isTransparent; - }, + return _isTransparent; + }, - /** + /** * Parse preserveAspectRatio attribute from element * @param {string} attribute to be parsed * @return {Object} an object containing align and meetOrSlice attribute */ - parsePreserveAspectRatioAttribute: function(attribute) { - var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', - aspectRatioAttrs = attribute.split(' '), align; - - if (aspectRatioAttrs && aspectRatioAttrs.length) { - meetOrSlice = aspectRatioAttrs.pop(); - if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { - align = meetOrSlice; - meetOrSlice = 'meet'; - } - else if (aspectRatioAttrs.length) { - align = aspectRatioAttrs.pop(); + parsePreserveAspectRatioAttribute: function(attribute) { + var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', + aspectRatioAttrs = attribute.split(' '), align; + + if (aspectRatioAttrs && aspectRatioAttrs.length) { + meetOrSlice = aspectRatioAttrs.pop(); + if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { + align = meetOrSlice; + meetOrSlice = 'meet'; + } + else if (aspectRatioAttrs.length) { + align = aspectRatioAttrs.pop(); + } } - } - //divide align in alignX and alignY - alignX = align !== 'none' ? align.slice(1, 4) : 'none'; - alignY = align !== 'none' ? align.slice(5, 8) : 'none'; - return { - meetOrSlice: meetOrSlice, - alignX: alignX, - alignY: alignY - }; - }, + //divide align in alignX and alignY + alignX = align !== 'none' ? align.slice(1, 4) : 'none'; + alignY = align !== 'none' ? align.slice(5, 8) : 'none'; + return { + meetOrSlice: meetOrSlice, + alignX: alignX, + alignY: alignY + }; + }, - /** + /** * Clear char widths cache for the given font family or all the cache if no * fontFamily is specified. * Use it if you know you are loading fonts in a lazy way and you are not waiting @@ -943,17 +944,17 @@ fabric.util = { * @memberOf fabric.util * @param {String} [fontFamily] font family to clear */ - clearFabricFontCache: function(fontFamily) { - fontFamily = (fontFamily || '').toLowerCase(); - if (!fontFamily) { - fabric.charWidthsCache = { }; - } - else if (fabric.charWidthsCache[fontFamily]) { - delete fabric.charWidthsCache[fontFamily]; - } - }, + clearFabricFontCache: function(fontFamily) { + fontFamily = (fontFamily || '').toLowerCase(); + if (!fontFamily) { + fabric.charWidthsCache = { }; + } + else if (fabric.charWidthsCache[fontFamily]) { + delete fabric.charWidthsCache[fontFamily]; + } + }, - /** + /** * Given current aspect ratio, determines the max width and height that can * respect the total allowed area for the cache. * @memberOf fabric.util @@ -962,17 +963,17 @@ fabric.util = { * @return {Object.x} Limited dimensions by X * @return {Object.y} Limited dimensions by Y */ - limitDimsByArea: function(ar, maximumArea) { - var roughWidth = Math.sqrt(maximumArea * ar), - perfLimitSizeY = Math.floor(maximumArea / roughWidth); - return { x: Math.floor(roughWidth), y: perfLimitSizeY }; - }, + limitDimsByArea: function(ar, maximumArea) { + var roughWidth = Math.sqrt(maximumArea * ar), + perfLimitSizeY = Math.floor(maximumArea / roughWidth); + return { x: Math.floor(roughWidth), y: perfLimitSizeY }; + }, - capValue: function(min, value, max) { - return Math.max(min, Math.min(value, max)); - }, + capValue: function(min, value, max) { + return Math.max(min, Math.min(value, max)); + }, - /** + /** * Finds the scale for the object source to fit inside the object destination, * keeping aspect ratio intact. * respect the total allowed area for the cache. @@ -985,11 +986,11 @@ fabric.util = { * @param {Number} destination.width natural unscaled width of the object * @return {Number} scale factor to apply to source to fit into destination */ - findScaleToFit: function(source, destination) { - return Math.min(destination.width / source.width, destination.height / source.height); - }, + findScaleToFit: function(source, destination) { + return Math.min(destination.width / source.width, destination.height / source.height); + }, - /** + /** * Finds the scale for the object source to cover entirely the object destination, * keeping aspect ratio intact. * respect the total allowed area for the cache. @@ -1002,24 +1003,24 @@ fabric.util = { * @param {Number} destination.width natural unscaled width of the object * @return {Number} scale factor to apply to source to cover destination */ - findScaleToCover: function(source, destination) { - return Math.max(destination.width / source.width, destination.height / source.height); - }, + findScaleToCover: function(source, destination) { + return Math.max(destination.width / source.width, destination.height / source.height); + }, - /** + /** * given an array of 6 number returns something like `"matrix(...numbers)"` * @memberOf fabric.util * @param {Array} transform an array with 6 numbers * @return {String} transform matrix for svg * @return {Object.y} Limited dimensions by Y */ - matrixToSVG: function(transform) { - return 'matrix(' + transform.map(function(value) { - return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); - }).join(' ') + ')'; - }, + matrixToSVG: function(transform) { + return 'matrix(' + transform.map(function(value) { + return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); + }).join(' ') + ')'; + }, - /** + /** * given an object and a transform, apply the inverse transform to the object, * this is equivalent to remove from that object that transformation, so that * added in a space with the removed transform, the object will be the same as before. @@ -1031,13 +1032,13 @@ fabric.util = { * @param {fabric.Object} object the object you want to transform * @param {Array} transform the destination transform */ - removeTransformFromObject: function(object, transform) { - var inverted = fabric.util.invertTransform(transform), - finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); - fabric.util.applyTransformToObject(object, finalTransform); - }, + removeTransformFromObject: function(object, transform) { + var inverted = fabric.util.invertTransform(transform), + finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); + fabric.util.applyTransformToObject(object, finalTransform); + }, - /** + /** * given an object and a transform, apply the transform to the object. * this is equivalent to change the space where the object is drawn. * Adding to an object a transform that scale by 2 is like scaling it by 2. @@ -1046,33 +1047,33 @@ fabric.util = { * @param {fabric.Object} object the object you want to transform * @param {Array} transform the destination transform */ - addTransformToObject: function(object, transform) { - fabric.util.applyTransformToObject( - object, - fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) - ); - }, + addTransformToObject: function(object, transform) { + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) + ); + }, - /** + /** * discard an object transform state and apply the one from the matrix. * @memberOf fabric.util * @param {fabric.Object} object the object you want to transform * @param {Array} transform the destination transform */ - applyTransformToObject: function(object, transform) { - var options = fabric.util.qrDecompose(transform), - center = new fabric.Point(options.translateX, options.translateY); - object.flipX = false; - object.flipY = false; - object.set('scaleX', options.scaleX); - object.set('scaleY', options.scaleY); - object.skewX = options.skewX; - object.skewY = options.skewY; - object.angle = options.angle; - object.setPositionByOrigin(center, 'center', 'center'); - }, - - /** + applyTransformToObject: function(object, transform) { + var options = fabric.util.qrDecompose(transform), + center = new fabric.Point(options.translateX, options.translateY); + object.flipX = false; + object.flipY = false; + object.set('scaleX', options.scaleX); + object.set('scaleY', options.scaleY); + object.skewX = options.skewX; + object.skewY = options.skewY; + object.angle = options.angle; + object.setPositionByOrigin(center, 'center', 'center'); + }, + + /** * * A util that abstracts applying transform to objects.\ * Sends `object` to the destination coordinate plane by applying the relevant transformations.\ @@ -1104,19 +1105,19 @@ fabric.util = { * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `object` should be sent to the canvas coordinate plane. * @returns {Matrix} the transform matrix that was applied to `object` */ - sendObjectToPlane: function (object, from, to) { - // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) - // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) - var inv = fabric.util.invertTransform(to || fabric.iMatrix); - var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); - fabric.util.applyTransformToObject( - object, - fabric.util.multiplyTransformMatrices(t, object.calcOwnMatrix()) - ); - return t; - }, + sendObjectToPlane: function (object, from, to) { + // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) + // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) + var inv = fabric.util.invertTransform(to || fabric.iMatrix); + var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(t, object.calcOwnMatrix()) + ); + return t; + }, - /** + /** * given a width and height, return the size of the bounding box * that can contains the box with width/height with applied transform * described in options. @@ -1131,31 +1132,31 @@ fabric.util = { * @param {Number} options.skewY * @returns {fabric.Point} size */ - sizeAfterTransform: function(width, height, options) { - var dimX = width / 2, dimY = height / 2, - points = [ - { - x: -dimX, - y: -dimY - }, - { - x: dimX, - y: -dimY - }, - { - x: -dimX, - y: dimY - }, - { - x: dimX, - y: dimY - }], - transformMatrix = fabric.util.calcDimensionsMatrix(options), - bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); - return new fabric.Point(bbox.width, bbox.height); - }, - - /** + sizeAfterTransform: function(width, height, options) { + var dimX = width / 2, dimY = height / 2, + points = [ + { + x: -dimX, + y: -dimY + }, + { + x: dimX, + y: -dimY + }, + { + x: -dimX, + y: dimY + }, + { + x: dimX, + y: dimY + }], + transformMatrix = fabric.util.calcDimensionsMatrix(options), + bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); + return new fabric.Point(bbox.width, bbox.height); + }, + + /** * Merges 2 clip paths into one visually equal clip path * * **IMPORTANT**:\ @@ -1174,27 +1175,28 @@ fabric.util = { * @param {fabric.Object} c2 * @returns {fabric.Object} merged clip path */ - mergeClipPaths: function (c1, c2) { - var a = c1, b = c2; - if (a.inverted && !b.inverted) { - // case (2) - a = c2; - b = c1; - } - // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane - fabric.util.applyTransformToObject( - b, - fabric.util.multiplyTransformMatrices( - fabric.util.invertTransform(a.calcTransformMatrix()), - b.calcTransformMatrix() - ) - ); - // assign the `inverted` prop to the wrapping group - var inverted = a.inverted && b.inverted; - if (inverted) { - // case (1) - a.inverted = b.inverted = false; - } - return new fabric.Group([a], { clipPath: b, inverted: inverted }); - }, -}; + mergeClipPaths: function (c1, c2) { + var a = c1, b = c2; + if (a.inverted && !b.inverted) { + // case (2) + a = c2; + b = c1; + } + // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane + fabric.util.applyTransformToObject( + b, + fabric.util.multiplyTransformMatrices( + fabric.util.invertTransform(a.calcTransformMatrix()), + b.calcTransformMatrix() + ) + ); + // assign the `inverted` prop to the wrapping group + var inverted = a.inverted && b.inverted; + if (inverted) { + // case (1) + a.inverted = b.inverted = false; + } + return new fabric.Group([a], { clipPath: b, inverted: inverted }); + }, + }; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/named_accessors.mixin.js b/src/util/named_accessors.mixin.js index 1418f668116..2b915338f6f 100644 --- a/src/util/named_accessors.mixin.js +++ b/src/util/named_accessors.mixin.js @@ -1,43 +1,45 @@ -/** +(function(global) { + var fabric = global.fabric; + /** * Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array * @static * @memberOf fabric.util * @param {Object} klass "Class" to create accessors for */ -fabric.util.createAccessors = function(klass) { - var proto = klass.prototype, i, propName, - capitalizedPropName, setterName, getterName; - - for (i = proto.stateProperties.length; i--; ) { - - propName = proto.stateProperties[i]; - capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1); - setterName = 'set' + capitalizedPropName; - getterName = 'get' + capitalizedPropName; - - // using `new Function` for better introspection - if (!proto[getterName]) { - proto[getterName] = (function(property) { - return new Function('return this.get("' + property + '")'); - })(propName); + fabric.util.createAccessors = function(klass) { + var proto = klass.prototype, i, propName, + capitalizedPropName, setterName, getterName; + + for (i = proto.stateProperties.length; i--; ) { + + propName = proto.stateProperties[i]; + capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1); + setterName = 'set' + capitalizedPropName; + getterName = 'get' + capitalizedPropName; + + // using `new Function` for better introspection + if (!proto[getterName]) { + proto[getterName] = (function(property) { + return new Function('return this.get("' + property + '")'); + })(propName); + } + if (!proto[setterName]) { + proto[setterName] = (function(property) { + return new Function('value', 'return this.set("' + property + '", value)'); + })(propName); + } } - if (!proto[setterName]) { - proto[setterName] = (function(property) { - return new Function('value', 'return this.set("' + property + '", value)'); - })(propName); - } - } -}; + }; -/** @lends fabric.Text.Prototype */ -/** + /** @lends fabric.Text.Prototype */ + /** * Retrieves object's fontSize * @method getFontSize * @memberOf fabric.Text.prototype * @return {String} Font size (in pixels) */ -/** + /** * Sets object's fontSize * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -48,14 +50,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's fontWeight * @method getFontWeight * @memberOf fabric.Text.prototype * @return {(String|Number)} Font weight */ -/** + /** * Sets object's fontWeight * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -66,14 +68,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's fontFamily * @method getFontFamily * @memberOf fabric.Text.prototype * @return {String} Font family */ -/** + /** * Sets object's fontFamily * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -84,14 +86,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's text * @method getText * @memberOf fabric.Text.prototype * @return {String} text */ -/** + /** * Sets object's text * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -102,14 +104,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's underline * @method getUnderline * @memberOf fabric.Text.prototype * @return {Boolean} underline enabled or disabled */ -/** + /** * Sets object's underline * @method setUnderline * @memberOf fabric.Text.prototype @@ -118,14 +120,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's fontStyle * @method getFontStyle * @memberOf fabric.Text.prototype * @return {String} Font style */ -/** + /** * Sets object's fontStyle * Does not update the object .width and .height, * call .initDimensions() to update the values. @@ -136,14 +138,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's lineHeight * @method getLineHeight * @memberOf fabric.Text.prototype * @return {Number} Line height */ -/** + /** * Sets object's lineHeight * @method setLineHeight * @memberOf fabric.Text.prototype @@ -152,14 +154,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's textAlign * @method getTextAlign * @memberOf fabric.Text.prototype * @return {String} Text alignment */ -/** + /** * Sets object's textAlign * @method setTextAlign * @memberOf fabric.Text.prototype @@ -168,14 +170,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's textBackgroundColor * @method getTextBackgroundColor * @memberOf fabric.Text.prototype * @return {String} Text background color */ -/** + /** * Sets object's textBackgroundColor * @method setTextBackgroundColor * @memberOf fabric.Text.prototype @@ -184,15 +186,15 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** @lends fabric.Object.Prototype */ -/** + /** @lends fabric.Object.Prototype */ + /** * Retrieves object's {@link fabric.Object#transformMatrix|transformMatrix} * @method getTransformMatrix * @memberOf fabric.Object.prototype * @return {Array} transformMatrix */ -/** + /** * Sets object's {@link fabric.Object#transformMatrix|transformMatrix} * @method setTransformMatrix * @memberOf fabric.Object.prototype @@ -201,14 +203,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#visible|visible} state * @method getVisible * @memberOf fabric.Object.prototype * @return {Boolean} True if visible */ -/** + /** * Sets object's {@link fabric.Object#visible|visible} state * @method setVisible * @memberOf fabric.Object.prototype @@ -217,21 +219,21 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#shadow|shadow} * @method getShadow * @memberOf fabric.Object.prototype * @return {Object} Shadow instance */ -/** + /** * Retrieves object's {@link fabric.Object#stroke|stroke} * @method getStroke * @memberOf fabric.Object.prototype * @return {String} stroke value */ -/** + /** * Sets object's {@link fabric.Object#stroke|stroke} * @method setStroke * @memberOf fabric.Object.prototype @@ -240,14 +242,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#strokeWidth|strokeWidth} * @method getStrokeWidth * @memberOf fabric.Object.prototype * @return {Number} strokeWidth value */ -/** + /** * Sets object's {@link fabric.Object#strokeWidth|strokeWidth} * @method setStrokeWidth * @memberOf fabric.Object.prototype @@ -256,14 +258,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#originX|originX} * @method getOriginX * @memberOf fabric.Object.prototype * @return {String} originX value */ -/** + /** * Sets object's {@link fabric.Object#originX|originX} * @method setOriginX * @memberOf fabric.Object.prototype @@ -272,14 +274,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#originY|originY} * @method getOriginY * @memberOf fabric.Object.prototype * @return {String} originY value */ -/** + /** * Sets object's {@link fabric.Object#originY|originY} * @method setOriginY * @memberOf fabric.Object.prototype @@ -288,14 +290,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#fill|fill} * @method getFill * @memberOf fabric.Object.prototype * @return {String} Fill value */ -/** + /** * Sets object's {@link fabric.Object#fill|fill} * @method setFill * @memberOf fabric.Object.prototype @@ -304,14 +306,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#opacity|opacity} * @method getOpacity * @memberOf fabric.Object.prototype * @return {Number} Opacity value (0-1) */ -/** + /** * Sets object's {@link fabric.Object#opacity|opacity} * @method setOpacity * @memberOf fabric.Object.prototype @@ -320,21 +322,21 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#angle|angle} (in degrees) * @method getAngle * @memberOf fabric.Object.prototype * @return {Number} */ -/** + /** * Retrieves object's {@link fabric.Object#top|top position} * @method getTop * @memberOf fabric.Object.prototype * @return {Number} Top value (in pixels) */ -/** + /** * Sets object's {@link fabric.Object#top|top position} * @method setTop * @memberOf fabric.Object.prototype @@ -343,14 +345,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#left|left position} * @method getLeft * @memberOf fabric.Object.prototype * @return {Number} Left value (in pixels) */ -/** + /** * Sets object's {@link fabric.Object#left|left position} * @method setLeft * @memberOf fabric.Object.prototype @@ -359,14 +361,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#scaleX|scaleX} value * @method getScaleX * @memberOf fabric.Object.prototype * @return {Number} scaleX value */ -/** + /** * Sets object's {@link fabric.Object#scaleX|scaleX} value * @method setScaleX * @memberOf fabric.Object.prototype @@ -375,14 +377,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#scaleY|scaleY} value * @method getScaleY * @memberOf fabric.Object.prototype * @return {Number} scaleY value */ -/** + /** * Sets object's {@link fabric.Object#scaleY|scaleY} value * @method setScaleY * @memberOf fabric.Object.prototype @@ -391,14 +393,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#flipX|flipX} value * @method getFlipX * @memberOf fabric.Object.prototype * @return {Boolean} flipX value */ -/** + /** * Sets object's {@link fabric.Object#flipX|flipX} value * @method setFlipX * @memberOf fabric.Object.prototype @@ -407,14 +409,14 @@ fabric.util.createAccessors = function(klass) { * @chainable */ -/** + /** * Retrieves object's {@link fabric.Object#flipY|flipY} value * @method getFlipY * @memberOf fabric.Object.prototype * @return {Boolean} flipY value */ -/** + /** * Sets object's {@link fabric.Object#flipY|flipY} value * @method setFlipY * @memberOf fabric.Object.prototype @@ -422,3 +424,5 @@ fabric.util.createAccessors = function(klass) { * @return {fabric.Object} thisArg * @chainable */ + +})(typeof exports !== 'undefined' ? exports : window); diff --git a/src/util/path.js b/src/util/path.js index d036438bdcb..90f21cb6443 100644 --- a/src/util/path.js +++ b/src/util/path.js @@ -1,112 +1,114 @@ -var _join = Array.prototype.join, - commandLengths = { - m: 2, - l: 2, - h: 1, - v: 1, - c: 6, - s: 4, - q: 4, - t: 2, - a: 7 - }, - repeatedCommands = { - m: 'l', - M: 'L' - }; -function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { - var costh2 = fabric.util.cos(th2), - sinth2 = fabric.util.sin(th2), - costh3 = fabric.util.cos(th3), - sinth3 = fabric.util.sin(th3), - toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, - toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, - cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), - cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), - cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), - cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); - - return ['C', - cp1X, cp1Y, - cp2X, cp2Y, - toX, toY - ]; -} - -/* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp +(function(global) { + var fabric = global.fabric, + _join = Array.prototype.join, + commandLengths = { + m: 2, + l: 2, + h: 1, + v: 1, + c: 6, + s: 4, + q: 4, + t: 2, + a: 7 + }, + repeatedCommands = { + m: 'l', + M: 'L' + }; + function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { + var costh2 = fabric.util.cos(th2), + sinth2 = fabric.util.sin(th2), + costh3 = fabric.util.cos(th3), + sinth3 = fabric.util.sin(th3), + toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, + toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, + cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), + cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), + cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), + cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); + + return ['C', + cp1X, cp1Y, + cp2X, cp2Y, + toX, toY + ]; + } + + /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here * http://mozilla.org/MPL/2.0/ */ -function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { - var PI = Math.PI, th = rotateX * PI / 180, - sinTh = fabric.util.sin(th), - cosTh = fabric.util.cos(th), - fromX = 0, fromY = 0; - - rx = Math.abs(rx); - ry = Math.abs(ry); - - var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, - py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, - rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, - pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, - root = 0; - - if (pl < 0) { - var s = Math.sqrt(1 - pl / (rx2 * ry2)); - rx *= s; - ry *= s; - } - else { - root = (large === sweep ? -1.0 : 1.0) * + function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { + var PI = Math.PI, th = rotateX * PI / 180, + sinTh = fabric.util.sin(th), + cosTh = fabric.util.cos(th), + fromX = 0, fromY = 0; + + rx = Math.abs(rx); + ry = Math.abs(ry); + + var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, + py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, + rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, + pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, + root = 0; + + if (pl < 0) { + var s = Math.sqrt(1 - pl / (rx2 * ry2)); + rx *= s; + ry *= s; + } + else { + root = (large === sweep ? -1.0 : 1.0) * Math.sqrt( pl / (rx2 * py2 + ry2 * px2)); - } + } - var cx = root * rx * py / ry, - cy = -root * ry * px / rx, - cx1 = cosTh * cx - sinTh * cy + toX * 0.5, - cy1 = sinTh * cx + cosTh * cy + toY * 0.5, - mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), - dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); + var cx = root * rx * py / ry, + cy = -root * ry * px / rx, + cx1 = cosTh * cx - sinTh * cy + toX * 0.5, + cy1 = sinTh * cx + cosTh * cy + toY * 0.5, + mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), + dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); - if (sweep === 0 && dtheta > 0) { - dtheta -= 2 * PI; - } - else if (sweep === 1 && dtheta < 0) { - dtheta += 2 * PI; - } + if (sweep === 0 && dtheta > 0) { + dtheta -= 2 * PI; + } + else if (sweep === 1 && dtheta < 0) { + dtheta += 2 * PI; + } - // Convert into cubic bezier segments <= 90deg - var segments = Math.ceil(Math.abs(dtheta / PI * 2)), - result = [], mDelta = dtheta / segments, - mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), - th3 = mTheta + mDelta; - - for (var i = 0; i < segments; i++) { - result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); - fromX = result[i][5]; - fromY = result[i][6]; - mTheta = th3; - th3 += mDelta; + // Convert into cubic bezier segments <= 90deg + var segments = Math.ceil(Math.abs(dtheta / PI * 2)), + result = [], mDelta = dtheta / segments, + mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), + th3 = mTheta + mDelta; + + for (var i = 0; i < segments; i++) { + result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); + fromX = result[i][5]; + fromY = result[i][6]; + mTheta = th3; + th3 += mDelta; + } + return result; } - return result; -} -/* + /* * Private */ -function calcVectorAngle(ux, uy, vx, vy) { - var ta = Math.atan2(uy, ux), - tb = Math.atan2(vy, vx); - if (tb >= ta) { - return tb - ta; - } - else { - return 2 * Math.PI - (ta - tb); + function calcVectorAngle(ux, uy, vx, vy) { + var ta = Math.atan2(uy, ux), + tb = Math.atan2(vy, vx); + if (tb >= ta) { + return tb - ta; + } + else { + return 2 * Math.PI - (ta - tb); + } } -} -/** + /** * Calculate bounding box of a beziercurve * @param {Number} x0 starting point * @param {Number} y0 @@ -117,291 +119,291 @@ function calcVectorAngle(ux, uy, vx, vy) { * @param {Number} x3 end of bezier * @param {Number} y3 */ -// taken from http://jsbin.com/ivomiq/56/edit no credits available for that. -// TODO: can we normalize this with the starting points set at 0 and then translated the bbox? -function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { - var argsString; - if (fabric.cachesBoundsOfCurve) { - argsString = _join.call(arguments); - if (fabric.boundsOfCurveCache[argsString]) { - return fabric.boundsOfCurveCache[argsString]; + // taken from http://jsbin.com/ivomiq/56/edit no credits available for that. + // TODO: can we normalize this with the starting points set at 0 and then translated the bbox? + function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { + var argsString; + if (fabric.cachesBoundsOfCurve) { + argsString = _join.call(arguments); + if (fabric.boundsOfCurveCache[argsString]) { + return fabric.boundsOfCurveCache[argsString]; + } } - } - var sqrt = Math.sqrt, - min = Math.min, max = Math.max, - abs = Math.abs, tvalues = [], - bounds = [[], []], - a, b, c, t, t1, t2, b2ac, sqrtb2ac; - - b = 6 * x0 - 12 * x1 + 6 * x2; - a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; - c = 3 * x1 - 3 * x0; - - for (var i = 0; i < 2; ++i) { - if (i > 0) { - b = 6 * y0 - 12 * y1 + 6 * y2; - a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; - c = 3 * y1 - 3 * y0; - } + var sqrt = Math.sqrt, + min = Math.min, max = Math.max, + abs = Math.abs, tvalues = [], + bounds = [[], []], + a, b, c, t, t1, t2, b2ac, sqrtb2ac; + + b = 6 * x0 - 12 * x1 + 6 * x2; + a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; + c = 3 * x1 - 3 * x0; + + for (var i = 0; i < 2; ++i) { + if (i > 0) { + b = 6 * y0 - 12 * y1 + 6 * y2; + a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; + c = 3 * y1 - 3 * y0; + } - if (abs(a) < 1e-12) { - if (abs(b) < 1e-12) { + if (abs(a) < 1e-12) { + if (abs(b) < 1e-12) { + continue; + } + t = -c / b; + if (0 < t && t < 1) { + tvalues.push(t); + } continue; } - t = -c / b; - if (0 < t && t < 1) { - tvalues.push(t); + b2ac = b * b - 4 * c * a; + if (b2ac < 0) { + continue; + } + sqrtb2ac = sqrt(b2ac); + t1 = (-b + sqrtb2ac) / (2 * a); + if (0 < t1 && t1 < 1) { + tvalues.push(t1); + } + t2 = (-b - sqrtb2ac) / (2 * a); + if (0 < t2 && t2 < 1) { + tvalues.push(t2); } - continue; - } - b2ac = b * b - 4 * c * a; - if (b2ac < 0) { - continue; - } - sqrtb2ac = sqrt(b2ac); - t1 = (-b + sqrtb2ac) / (2 * a); - if (0 < t1 && t1 < 1) { - tvalues.push(t1); - } - t2 = (-b - sqrtb2ac) / (2 * a); - if (0 < t2 && t2 < 1) { - tvalues.push(t2); } - } - var x, y, j = tvalues.length, jlen = j, mt; - while (j--) { - t = tvalues[j]; - mt = 1 - t; - x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); - bounds[0][j] = x; + var x, y, j = tvalues.length, jlen = j, mt; + while (j--) { + t = tvalues[j]; + mt = 1 - t; + x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); + bounds[0][j] = x; - y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); - bounds[1][j] = y; - } + y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); + bounds[1][j] = y; + } - bounds[0][jlen] = x0; - bounds[1][jlen] = y0; - bounds[0][jlen + 1] = x3; - bounds[1][jlen + 1] = y3; - var result = [ - { - x: min.apply(null, bounds[0]), - y: min.apply(null, bounds[1]) - }, - { - x: max.apply(null, bounds[0]), - y: max.apply(null, bounds[1]) + bounds[0][jlen] = x0; + bounds[1][jlen] = y0; + bounds[0][jlen + 1] = x3; + bounds[1][jlen + 1] = y3; + var result = [ + { + x: min.apply(null, bounds[0]), + y: min.apply(null, bounds[1]) + }, + { + x: max.apply(null, bounds[0]), + y: max.apply(null, bounds[1]) + } + ]; + if (fabric.cachesBoundsOfCurve) { + fabric.boundsOfCurveCache[argsString] = result; } - ]; - if (fabric.cachesBoundsOfCurve) { - fabric.boundsOfCurveCache[argsString] = result; + return result; } - return result; -} -/** + /** * Converts arc to a bunch of bezier curves * @param {Number} fx starting point x * @param {Number} fy starting point y * @param {Array} coords Arc command */ -function fromArcToBeziers(fx, fy, coords) { - var rx = coords[1], - ry = coords[2], - rot = coords[3], - large = coords[4], - sweep = coords[5], - tx = coords[6], - ty = coords[7], - segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); - - for (var i = 0, len = segsNorm.length; i < len; i++) { - segsNorm[i][1] += fx; - segsNorm[i][2] += fy; - segsNorm[i][3] += fx; - segsNorm[i][4] += fy; - segsNorm[i][5] += fx; - segsNorm[i][6] += fy; - } - return segsNorm; -}; + function fromArcToBeziers(fx, fy, coords) { + var rx = coords[1], + ry = coords[2], + rot = coords[3], + large = coords[4], + sweep = coords[5], + tx = coords[6], + ty = coords[7], + segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); + + for (var i = 0, len = segsNorm.length; i < len; i++) { + segsNorm[i][1] += fx; + segsNorm[i][2] += fy; + segsNorm[i][3] += fx; + segsNorm[i][4] += fy; + segsNorm[i][5] += fx; + segsNorm[i][6] += fy; + } + return segsNorm; + }; -/** + /** * This function take a parsed SVG path and make it simpler for fabricJS logic. * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute ) * S converted in C, T converted in Q, A converted in C. * @param {Array} path the array of commands of a parsed svg path for fabric.Path * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path */ -function makePathSimpler(path) { - // x and y represent the last point of the path. the previous command point. - // we add them to each relative command to make it an absolute comment. - // we also swap the v V h H with L, because are easier to transform. - var x = 0, y = 0, len = path.length, - // x1 and y1 represent the last point of the subpath. the subpath is started with - // m or M command. When a z or Z command is drawn, x and y need to be resetted to - // the last x1 and y1. - x1 = 0, y1 = 0, current, i, converted, - // previous will host the letter of the previous command, to handle S and T. - // controlX and controlY will host the previous reflected control point - destinationPath = [], previous, controlX, controlY; - for (i = 0; i < len; ++i) { - converted = false; - current = path[i].slice(0); - switch (current[0]) { // first letter - case 'l': // lineto, relative - current[0] = 'L'; - current[1] += x; - current[2] += y; - // falls through - case 'L': - x = current[1]; - y = current[2]; - break; - case 'h': // horizontal lineto, relative - current[1] += x; - // falls through - case 'H': - current[0] = 'L'; - current[2] = y; - x = current[1]; - break; - case 'v': // vertical lineto, relative - current[1] += y; - // falls through - case 'V': - current[0] = 'L'; - y = current[1]; - current[1] = x; - current[2] = y; - break; - case 'm': // moveTo, relative - current[0] = 'M'; - current[1] += x; - current[2] += y; - // falls through - case 'M': - x = current[1]; - y = current[2]; - x1 = current[1]; - y1 = current[2]; - break; - case 'c': // bezierCurveTo, relative - current[0] = 'C'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - current[5] += x; - current[6] += y; - // falls through - case 'C': - controlX = current[3]; - controlY = current[4]; - x = current[5]; - y = current[6]; - break; - case 's': // shorthand cubic bezierCurveTo, relative - current[0] = 'S'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'S': - // would be sScC but since we are swapping sSc for C, we check just that. - if (previous === 'C') { - // calculate reflection of previous control points - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a C, c, S, or s, - // the control point is coincident with the current point - controlX = x; - controlY = y; - } - x = current[3]; - y = current[4]; - current[0] = 'C'; - current[5] = current[3]; - current[6] = current[4]; - current[3] = current[1]; - current[4] = current[2]; - current[1] = controlX; - current[2] = controlY; - // current[3] and current[4] are NOW the second control point. - // we keep it for the next reflection. - controlX = current[3]; - controlY = current[4]; - break; - case 'q': // quadraticCurveTo, relative - current[0] = 'Q'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'Q': - controlX = current[1]; - controlY = current[2]; - x = current[3]; - y = current[4]; - break; - case 't': // shorthand quadraticCurveTo, relative - current[0] = 'T'; - current[1] += x; - current[2] += y; - // falls through - case 'T': - if (previous === 'Q') { - // calculate reflection of previous control point - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a Q, q, T or t, - // assume the control point is coincident with the current point - controlX = x; - controlY = y; - } - current[0] = 'Q'; - x = current[1]; - y = current[2]; - current[1] = controlX; - current[2] = controlY; - current[3] = x; - current[4] = y; - break; - case 'a': - current[0] = 'A'; - current[6] += x; - current[7] += y; - // falls through - case 'A': - converted = true; - destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); - x = current[6]; - y = current[7]; - break; - case 'z': - case 'Z': - x = x1; - y = y1; - break; - default: - } - if (!converted) { - destinationPath.push(current); + function makePathSimpler(path) { + // x and y represent the last point of the path. the previous command point. + // we add them to each relative command to make it an absolute comment. + // we also swap the v V h H with L, because are easier to transform. + var x = 0, y = 0, len = path.length, + // x1 and y1 represent the last point of the subpath. the subpath is started with + // m or M command. When a z or Z command is drawn, x and y need to be resetted to + // the last x1 and y1. + x1 = 0, y1 = 0, current, i, converted, + // previous will host the letter of the previous command, to handle S and T. + // controlX and controlY will host the previous reflected control point + destinationPath = [], previous, controlX, controlY; + for (i = 0; i < len; ++i) { + converted = false; + current = path[i].slice(0); + switch (current[0]) { // first letter + case 'l': // lineto, relative + current[0] = 'L'; + current[1] += x; + current[2] += y; + // falls through + case 'L': + x = current[1]; + y = current[2]; + break; + case 'h': // horizontal lineto, relative + current[1] += x; + // falls through + case 'H': + current[0] = 'L'; + current[2] = y; + x = current[1]; + break; + case 'v': // vertical lineto, relative + current[1] += y; + // falls through + case 'V': + current[0] = 'L'; + y = current[1]; + current[1] = x; + current[2] = y; + break; + case 'm': // moveTo, relative + current[0] = 'M'; + current[1] += x; + current[2] += y; + // falls through + case 'M': + x = current[1]; + y = current[2]; + x1 = current[1]; + y1 = current[2]; + break; + case 'c': // bezierCurveTo, relative + current[0] = 'C'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + current[5] += x; + current[6] += y; + // falls through + case 'C': + controlX = current[3]; + controlY = current[4]; + x = current[5]; + y = current[6]; + break; + case 's': // shorthand cubic bezierCurveTo, relative + current[0] = 'S'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'S': + // would be sScC but since we are swapping sSc for C, we check just that. + if (previous === 'C') { + // calculate reflection of previous control points + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a C, c, S, or s, + // the control point is coincident with the current point + controlX = x; + controlY = y; + } + x = current[3]; + y = current[4]; + current[0] = 'C'; + current[5] = current[3]; + current[6] = current[4]; + current[3] = current[1]; + current[4] = current[2]; + current[1] = controlX; + current[2] = controlY; + // current[3] and current[4] are NOW the second control point. + // we keep it for the next reflection. + controlX = current[3]; + controlY = current[4]; + break; + case 'q': // quadraticCurveTo, relative + current[0] = 'Q'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'Q': + controlX = current[1]; + controlY = current[2]; + x = current[3]; + y = current[4]; + break; + case 't': // shorthand quadraticCurveTo, relative + current[0] = 'T'; + current[1] += x; + current[2] += y; + // falls through + case 'T': + if (previous === 'Q') { + // calculate reflection of previous control point + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a Q, q, T or t, + // assume the control point is coincident with the current point + controlX = x; + controlY = y; + } + current[0] = 'Q'; + x = current[1]; + y = current[2]; + current[1] = controlX; + current[2] = controlY; + current[3] = x; + current[4] = y; + break; + case 'a': + current[0] = 'A'; + current[6] += x; + current[7] += y; + // falls through + case 'A': + converted = true; + destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); + x = current[6]; + y = current[7]; + break; + case 'z': + case 'Z': + x = x1; + y = y1; + break; + default: + } + if (!converted) { + destinationPath.push(current); + } + previous = current[0]; } - previous = current[0]; - } - return destinationPath; -}; + return destinationPath; + }; -/** + /** * Calc length from point x1,y1 to x2,y2 * @param {Number} x1 starting point x * @param {Number} y1 starting point y @@ -409,91 +411,91 @@ function makePathSimpler(path) { * @param {Number} y2 starting point y * @return {Number} length of segment */ -function calcLineLength(x1, y1, x2, y2) { - return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); -} - -// functions for the Cubic beizer -// taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 -function CB1(t) { - return t * t * t; -} -function CB2(t) { - return 3 * t * t * (1 - t); -} -function CB3(t) { - return 3 * t * (1 - t) * (1 - t); -} -function CB4(t) { - return (1 - t) * (1 - t) * (1 - t); -} - -function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function(pct) { - var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); - return { - x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, - y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 + function calcLineLength(x1, y1, x2, y2) { + return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); + } + + // functions for the Cubic beizer + // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 + function CB1(t) { + return t * t * t; + } + function CB2(t) { + return 3 * t * t * (1 - t); + } + function CB3(t) { + return 3 * t * (1 - t) * (1 - t); + } + function CB4(t) { + return (1 - t) * (1 - t) * (1 - t); + } + + function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function(pct) { + var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); + return { + x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, + y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 + }; }; - }; -} + } -function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + + function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + (3 * pct * pct * (p4x - p3x)), - tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + + tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + (3 * pct * pct * (p4y - p3y)); - return Math.atan2(tangentY, tangentX); - }; -} - -function QB1(t) { - return t * t; -} - -function QB2(t) { - return 2 * t * (1 - t); -} - -function QB3(t) { - return (1 - t) * (1 - t); -} - -function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function(pct) { - var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); - return { - x: p3x * c1 + p2x * c2 + p1x * c3, - y: p3y * c1 + p2y * c2 + p1y * c3 + return Math.atan2(tangentY, tangentX); }; - }; -} - -function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), - tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); - return Math.atan2(tangentY, tangentX); - }; -} + } + + function QB1(t) { + return t * t; + } + + function QB2(t) { + return 2 * t * (1 - t); + } + + function QB3(t) { + return (1 - t) * (1 - t); + } + + function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function(pct) { + var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); + return { + x: p3x * c1 + p2x * c2 + p1x * c3, + y: p3y * c1 + p2y * c2 + p1y * c3 + }; + }; + } + + function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), + tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); + return Math.atan2(tangentY, tangentX); + }; + } -// this will run over a path segment ( a cubic or quadratic segment) and approximate it -// with 100 segemnts. This will good enough to calculate the length of the curve -function pathIterator(iterator, x1, y1) { - var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; - for (perc = 1; perc <= 100; perc += 1) { - p = iterator(perc / 100); - tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); - tempP = p; + // this will run over a path segment ( a cubic or quadratic segment) and approximate it + // with 100 segemnts. This will good enough to calculate the length of the curve + function pathIterator(iterator, x1, y1) { + var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; + for (perc = 1; perc <= 100; perc += 1) { + p = iterator(perc / 100); + tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); + tempP = p; + } + return tmpLen; } - return tmpLen; -} -/** + /** * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1 * that correspond to that pixels run over the path. * The percentage will be then used to find the correct point on the canvas for the path. @@ -501,166 +503,166 @@ function pathIterator(iterator, x1, y1) { * @param {Number} distance from starting point, in pixels. * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point; */ -function findPercentageForDistance(segInfo, distance) { - var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, - p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; - // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 - // the path - while (tmpLen < distance && nextStep > 0.0001) { - p = iterator(perc); - lastPerc = perc; - nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); - // compare tmpLen each cycle with distance, decide next perc to test. - if ((nextLen + tmpLen) > distance) { - // we discard this step and we make smaller steps. - perc -= nextStep; - nextStep /= 2; - } - else { - tempP = p; - perc += nextStep; - tmpLen += nextLen; + function findPercentageForDistance(segInfo, distance) { + var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, + p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; + // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 + // the path + while (tmpLen < distance && nextStep > 0.0001) { + p = iterator(perc); + lastPerc = perc; + nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); + // compare tmpLen each cycle with distance, decide next perc to test. + if ((nextLen + tmpLen) > distance) { + // we discard this step and we make smaller steps. + perc -= nextStep; + nextStep /= 2; + } + else { + tempP = p; + perc += nextStep; + tmpLen += nextLen; + } } + p.angle = angleFinder(lastPerc); + return p; } - p.angle = angleFinder(lastPerc); - return p; -} -/** + /** * Run over a parsed and simplifed path and extract some informations. * informations are length of each command and starting point * @param {Array} path fabricJS parsed path commands * @return {Array} path commands informations */ -function getPathSegmentsInfo(path) { - var totalLength = 0, len = path.length, current, - //x2 and y2 are the coords of segment start - //x1 and y1 are the coords of the current point - x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; - for (var i = 0; i < len; i++) { - current = path[i]; - tempInfo = { - x: x1, - y: y1, - command: current[0], - }; - switch (current[0]) { //first letter + function getPathSegmentsInfo(path) { + var totalLength = 0, len = path.length, current, + //x2 and y2 are the coords of segment start + //x1 and y1 are the coords of the current point + x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; + for (var i = 0; i < len; i++) { + current = path[i]; + tempInfo = { + x: x1, + y: y1, + command: current[0], + }; + switch (current[0]) { //first letter + case 'M': + tempInfo.length = 0; + x2 = x1 = current[1]; + y2 = y1 = current[2]; + break; + case 'L': + tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); + x1 = current[1]; + y1 = current[2]; + break; + case 'C': + iterator = getPointOnCubicBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + angleFinder = getTangentCubicIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[5]; + y1 = current[6]; + break; + case 'Q': + iterator = getPointOnQuadraticBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + angleFinder = getTangentQuadraticIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[3]; + y1 = current[4]; + break; + case 'Z': + case 'z': + // we add those in order to ease calculations later + tempInfo.destX = x2; + tempInfo.destY = y2; + tempInfo.length = calcLineLength(x1, y1, x2, y2); + x1 = x2; + y1 = y2; + break; + } + totalLength += tempInfo.length; + info.push(tempInfo); + } + info.push({ length: totalLength, x: x1, y: y1 }); + return info; + } + + function getPointOnPath(path, distance, infos) { + if (!infos) { + infos = getPathSegmentsInfo(path); + } + var i = 0; + while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { + distance -= infos[i].length; + i++; + } + // var distance = infos[infos.length - 1] * perc; + var segInfo = infos[i], segPercent = distance / segInfo.length, + command = segInfo.command, segment = path[i], info; + + switch (command) { case 'M': - tempInfo.length = 0; - x2 = x1 = current[1]; - y2 = y1 = current[2]; - break; - case 'L': - tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); - x1 = current[1]; - y1 = current[2]; - break; - case 'C': - iterator = getPointOnCubicBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] + return { x: segInfo.x, y: segInfo.y, angle: 0 }; + case 'Z': + case 'z': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segInfo.destX, segInfo.destY), + segPercent ); - angleFinder = getTangentCubicIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] + info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); + return info; + case 'L': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segment[1], segment[2]), + segPercent ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[5]; - y1 = current[6]; - break; + info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); + return info; + case 'C': + return findPercentageForDistance(segInfo, distance); case 'Q': - iterator = getPointOnQuadraticBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - angleFinder = getTangentQuadraticIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[3]; - y1 = current[4]; - break; - case 'Z': - case 'z': - // we add those in order to ease calculations later - tempInfo.destX = x2; - tempInfo.destY = y2; - tempInfo.length = calcLineLength(x1, y1, x2, y2); - x1 = x2; - y1 = y2; - break; + return findPercentageForDistance(segInfo, distance); } - totalLength += tempInfo.length; - info.push(tempInfo); } - info.push({ length: totalLength, x: x1, y: y1 }); - return info; -} -function getPointOnPath(path, distance, infos) { - if (!infos) { - infos = getPathSegmentsInfo(path); - } - var i = 0; - while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { - distance -= infos[i].length; - i++; - } - // var distance = infos[infos.length - 1] * perc; - var segInfo = infos[i], segPercent = distance / segInfo.length, - command = segInfo.command, segment = path[i], info; - - switch (command) { - case 'M': - return { x: segInfo.x, y: segInfo.y, angle: 0 }; - case 'Z': - case 'z': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segInfo.destX, segInfo.destY), - segPercent - ); - info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); - return info; - case 'L': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segment[1], segment[2]), - segPercent - ); - info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); - return info; - case 'C': - return findPercentageForDistance(segInfo, distance); - case 'Q': - return findPercentageForDistance(segInfo, distance); - } -} - -/** + /** * * @param {string} pathString * @return {(string|number)[][]} An array of SVG path commands @@ -672,114 +674,114 @@ function getPointOnPath(path, distance, infos) { * ]; * */ -function parsePath(pathString) { - var result = [], - coords = [], - currentPath, - parsed, - re = fabric.rePathCommand, - rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', - rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, - rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', - rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + + function parsePath(pathString) { + var result = [], + coords = [], + currentPath, + parsed, + re = fabric.rePathCommand, + rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', + rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, + rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', + rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + rNumberCommaWsp + '?(' + rNumber + ')', - regArcArgumentSequence = new RegExp(rArcSeq, 'g'), - match, - coordsStr, - // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) - path; - if (!pathString || !pathString.match) { - return result; - } - path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); + regArcArgumentSequence = new RegExp(rArcSeq, 'g'), + match, + coordsStr, + // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) + path; + if (!pathString || !pathString.match) { + return result; + } + path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); - for (var i = 0, coordsParsed, len = path.length; i < len; i++) { - currentPath = path[i]; + for (var i = 0, coordsParsed, len = path.length; i < len; i++) { + currentPath = path[i]; - coordsStr = currentPath.slice(1).trim(); - coords.length = 0; + coordsStr = currentPath.slice(1).trim(); + coords.length = 0; - var command = currentPath.charAt(0); - coordsParsed = [command]; + var command = currentPath.charAt(0); + coordsParsed = [command]; - if (command.toLowerCase() === 'a') { - // arcs have special flags that apparently don't require spaces so handle special - for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { - for (var j = 1; j < args.length; j++) { - coords.push(args[j]); + if (command.toLowerCase() === 'a') { + // arcs have special flags that apparently don't require spaces so handle special + for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { + for (var j = 1; j < args.length; j++) { + coords.push(args[j]); + } } } - } - else { - while ((match = re.exec(coordsStr))) { - coords.push(match[0]); + else { + while ((match = re.exec(coordsStr))) { + coords.push(match[0]); + } } - } - for (var j = 0, jlen = coords.length; j < jlen; j++) { - parsed = parseFloat(coords[j]); - if (!isNaN(parsed)) { - coordsParsed.push(parsed); + for (var j = 0, jlen = coords.length; j < jlen; j++) { + parsed = parseFloat(coords[j]); + if (!isNaN(parsed)) { + coordsParsed.push(parsed); + } } - } - var commandLength = commandLengths[command.toLowerCase()], - repeatedCommand = repeatedCommands[command] || command; + var commandLength = commandLengths[command.toLowerCase()], + repeatedCommand = repeatedCommands[command] || command; - if (coordsParsed.length - 1 > commandLength) { - for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { - result.push([command].concat(coordsParsed.slice(k, k + commandLength))); - command = repeatedCommand; + if (coordsParsed.length - 1 > commandLength) { + for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { + result.push([command].concat(coordsParsed.slice(k, k + commandLength))); + command = repeatedCommand; + } + } + else { + result.push(coordsParsed); } } - else { - result.push(coordsParsed); - } - } - return result; -}; + return result; + }; -/** + /** * * Converts points to a smooth SVG path * @param {{ x: number,y: number }[]} points Array of points * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value. * @return {(string|number)[][]} An array of SVG path commands */ -function getSmoothPathFromPoints(points, correction) { - var path = [], i, - p1 = new fabric.Point(points[0].x, points[0].y), - p2 = new fabric.Point(points[1].x, points[1].y), - len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; - correction = correction || 0; - - if (manyPoints) { - multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; - multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; - } - path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); - for (i = 1; i < len; i++) { - if (!p1.eq(p2)) { - var midPoint = p1.midPointFrom(p2); - // p1 is our bezier control point - // midpoint is our endpoint - // start point is p(i-1) value. - path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); + function getSmoothPathFromPoints(points, correction) { + var path = [], i, + p1 = new fabric.Point(points[0].x, points[0].y), + p2 = new fabric.Point(points[1].x, points[1].y), + len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; + correction = correction || 0; + + if (manyPoints) { + multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; + multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; } - p1 = points[i]; - if ((i + 1) < points.length) { - p2 = points[i + 1]; + path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); + for (i = 1; i < len; i++) { + if (!p1.eq(p2)) { + var midPoint = p1.midPointFrom(p2); + // p1 is our bezier control point + // midpoint is our endpoint + // start point is p(i-1) value. + path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); + } + p1 = points[i]; + if ((i + 1) < points.length) { + p2 = points[i + 1]; + } } + if (manyPoints) { + multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; + multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; + } + path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); + return path; } - if (manyPoints) { - multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; - multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; - } - path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); - return path; -} -/** + /** * Transform a path by transforming each segment. * it has to be a simplified path or it won't work. * WARNING: this depends from pathOffset for correct operation @@ -790,63 +792,64 @@ function getSmoothPathFromPoints(points, correction) { * @param {Number} pathOffset.y * @returns {Array} the transformed path */ -function transformPath(path, transform, pathOffset) { - if (pathOffset) { - transform = fabric.util.multiplyTransformMatrices( - transform, - [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] - ); - } - return path.map(function(pathSegment) { - var newSegment = pathSegment.slice(0), point = {}; - for (var i = 1; i < pathSegment.length - 1; i += 2) { - point.x = pathSegment[i]; - point.y = pathSegment[i + 1]; - point = fabric.util.transformPoint(point, transform); - newSegment[i] = point.x; - newSegment[i + 1] = point.y; + function transformPath(path, transform, pathOffset) { + if (pathOffset) { + transform = fabric.util.multiplyTransformMatrices( + transform, + [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] + ); } - return newSegment; - }); -} + return path.map(function(pathSegment) { + var newSegment = pathSegment.slice(0), point = {}; + for (var i = 1; i < pathSegment.length - 1; i += 2) { + point.x = pathSegment[i]; + point.y = pathSegment[i + 1]; + point = fabric.util.transformPoint(point, transform); + newSegment[i] = point.x; + newSegment[i + 1] = point.y; + } + return newSegment; + }); + } -/** + /** * Returns an array of path commands to create a regular polygon * @param {number} radius * @param {number} numVertexes * @returns {(string|number)[][]} An array of SVG path commands */ -function getRegularPolygonPath(numVertexes, radius) { - var interiorAngle = Math.PI * 2 / numVertexes; - // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom - // This isn't strictly necessary, but it's how we tend to think of and expect polygons to be drawn - var rotationAdjustment = -Math.PI / 2; - if (numVertexes % 2 === 0) { - rotationAdjustment += interiorAngle / 2; - } - var d = []; - for (var i = 0, rad, coord; i < numVertexes; i++) { - rad = i * interiorAngle + rotationAdjustment; - coord = new fabric.Point(Math.cos(rad), Math.sin(rad)).scalarMultiplyEquals(radius); - d.push([i === 0 ? 'M' : 'L', coord.x, coord.y]); + function getRegularPolygonPath(numVertexes, radius) { + var interiorAngle = Math.PI * 2 / numVertexes; + // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom + // This isn't strictly necessary, but it's how we tend to think of and expect polygons to be drawn + var rotationAdjustment = -Math.PI / 2; + if (numVertexes % 2 === 0) { + rotationAdjustment += interiorAngle / 2; + } + var d = []; + for (var i = 0, rad, coord; i < numVertexes; i++) { + rad = i * interiorAngle + rotationAdjustment; + coord = new fabric.Point(Math.cos(rad), Math.sin(rad)).scalarMultiplyEquals(radius); + d.push([i === 0 ? 'M' : 'L', coord.x, coord.y]); + } + d.push(['Z']); + return d; } - d.push(['Z']); - return d; -} -/** + /** * Join path commands to go back to svg format * @param {Array} pathData fabricJS parsed path commands * @return {String} joined path 'M 0 0 L 20 30' */ -fabric.util.joinPath = function(pathData) { - return pathData.map(function (segment) { return segment.join(' '); }).join(' '); -}; -fabric.util.parsePath = parsePath; -fabric.util.makePathSimpler = makePathSimpler; -fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; -fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; -fabric.util.getBoundsOfCurve = getBoundsOfCurve; -fabric.util.getPointOnPath = getPointOnPath; -fabric.util.transformPath = transformPath; -fabric.util.getRegularPolygonPath = getRegularPolygonPath; + fabric.util.joinPath = function(pathData) { + return pathData.map(function (segment) { return segment.join(' '); }).join(' '); + }; + fabric.util.parsePath = parsePath; + fabric.util.makePathSimpler = makePathSimpler; + fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; + fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; + fabric.util.getBoundsOfCurve = getBoundsOfCurve; + fabric.util.getPointOnPath = getPointOnPath; + fabric.util.transformPath = transformPath; + fabric.util.getRegularPolygonPath = getRegularPolygonPath; +})(typeof exports !== 'undefined' ? exports : window); diff --git a/testimports.js b/testimports.js index ed54ea9526d..1eceaa65e8d 100644 --- a/testimports.js +++ b/testimports.js @@ -1,3 +1,4 @@ var all = require('./dist/fabric.js'); -console.log(all); +const fabric = all.fabric; +console.log(fabric.version) From 278a8134ae958b615f39be47bc3359f9b3a556b1 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 19 Jun 2022 10:03:55 +0200 Subject: [PATCH 07/21] okish --- dist/fabric.js | 55961 +++++++++++++++++++++---------------------- dist/fabric.min.js | 3 +- index.js | 4 +- rollup.config.js | 2 +- 4 files changed, 27778 insertions(+), 28192 deletions(-) diff --git a/dist/fabric.js b/dist/fabric.js index d450fa06c01..9b7bf655d2a 100644 --- a/dist/fabric.js +++ b/dist/fabric.js @@ -1,31490 +1,31077 @@ -(function () { - 'use strict'; +/* build: `node build.js modules=ALL exclude=gestures,accessors,erasing requirejs minifier=uglifyjs` */ +/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */ + +var fabric = fabric || { version: '5.1.0' }; +if (typeof exports !== 'undefined') { + exports.fabric = fabric; +} +/* _AMD_START_ */ +else if (typeof define === 'function' && define.amd) { + define([], function() { return fabric; }); +} +/* _AMD_END_ */ +if (typeof document !== 'undefined' && typeof window !== 'undefined') { + if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) { + fabric.document = document; + } + else { + fabric.document = document.implementation.createHTMLDocument(''); + } + fabric.window = window; +} +else { + // assume we're running under node.js when document/window are not present + var jsdom = require('jsdom'); + var virtualWindow = new jsdom.JSDOM( + decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'), + { + features: { + FetchExternalResources: ['img'] + }, + resources: 'usable' + }).window; + fabric.document = virtualWindow.document; + fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper; + fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas; + fabric.window = virtualWindow; + DOMParser = fabric.window.DOMParser; +} + +/** + * True when in environment that supports touch events + * @type boolean + */ +fabric.isTouchSupported = 'ontouchstart' in fabric.window || 'ontouchstart' in fabric.document || + (fabric.window && fabric.window.navigator && fabric.window.navigator.maxTouchPoints > 0); + +/** + * True when in environment that's probably Node.js + * @type boolean + */ +fabric.isLikelyNode = typeof Buffer !== 'undefined' && + typeof window === 'undefined'; + +/* _FROM_SVG_START_ */ +/** + * Attributes parsed from all SVG elements + * @type array + */ +fabric.SHARED_ATTRIBUTES = [ + 'display', + 'transform', + 'fill', 'fill-opacity', 'fill-rule', + 'opacity', + 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', + 'stroke-linejoin', 'stroke-miterlimit', + 'stroke-opacity', 'stroke-width', + 'id', 'paint-order', 'vector-effect', + 'instantiated_by_use', 'clip-path', +]; +/* _FROM_SVG_END_ */ + +/** + * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion. + */ +fabric.DPI = 96; +fabric.reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)'; +fabric.commaWsp = '(?:\\s+,?\\s*|,\\s*)'; +fabric.rePathCommand = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/ig; +fabric.reNonWord = /[ \n\.,;!\?\-]/; +fabric.fontPaths = { }; +fabric.iMatrix = [1, 0, 0, 1, 0, 0]; +fabric.svgNS = 'http://www.w3.org/2000/svg'; + +/** + * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine. + * @since 1.7.14 + * @type Number + * @default + */ +fabric.perfLimitSizeTotal = 2097152; + +/** + * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000 + * @since 1.7.14 + * @type Number + * @default + */ +fabric.maxCacheSideLimit = 4096; + +/** + * Lowest pixel limit for cache canvases, set at 256PX + * @since 1.7.14 + * @type Number + * @default + */ +fabric.minCacheSideLimit = 256; + +/** + * Cache Object for widths of chars in text rendering. + */ +fabric.charWidthsCache = { }; + +/** + * if webgl is enabled and available, textureSize will determine the size + * of the canvas backend + * @since 2.0.0 + * @type Number + * @default + */ +fabric.textureSize = 2048; + +/** + * When 'true', style information is not retained when copy/pasting text, making + * pasted text use destination style. + * Defaults to 'false'. + * @type Boolean + * @default + */ +fabric.disableStyleCopyPaste = false; + +/** + * Enable webgl for filtering picture is available + * A filtering backend will be initialized, this will both take memory and + * time since a default 2048x2048 canvas will be created for the gl context + * @since 2.0.0 + * @type Boolean + * @default + */ +fabric.enableGLFiltering = true; + +/** + * Device Pixel Ratio + * @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html + */ +fabric.devicePixelRatio = fabric.window.devicePixelRatio || + fabric.window.webkitDevicePixelRatio || + fabric.window.mozDevicePixelRatio || + 1; +/** + * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value, + * which is unitless and not rendered equally across browsers. + * + * Values that work quite well (as of October 2017) are: + * - Chrome: 1.5 + * - Edge: 1.75 + * - Firefox: 0.9 + * - Safari: 0.95 + * + * @since 2.0.0 + * @type Number + * @default 1 + */ +fabric.browserShadowBlurConstant = 1; + +/** + * This object contains the result of arc to bezier conversion for faster retrieving if the same arc needs to be converted again. + * It was an internal variable, is accessible since version 2.3.4 + */ +fabric.arcToSegmentsCache = { }; + +/** + * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it. + * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing + * you do not get any speed benefit and you get a big object in memory. + * The object was a private variable before, while now is appended to the lib so that you have access to it and you + * can eventually clear it. + * It was an internal variable, is accessible since version 2.3.4 + */ +fabric.boundsOfCurveCache = { }; + +/** + * If disabled boundsOfCurveCache is not used. For apps that make heavy usage of pencil drawing probably disabling it is better + * @default true + */ +fabric.cachesBoundsOfCurve = true; + +/** + * Skip performance testing of setupGLContext and force the use of putImageData that seems to be the one that works best on + * Chrome + old hardware. if your users are experiencing empty images after filtering you may try to force this to true + * this has to be set before instantiating the filtering backend ( before filtering the first image ) + * @type Boolean + * @default false + */ +fabric.forceGLPutImageData = false; + +fabric.initFilterBackend = function() { + if (fabric.enableGLFiltering && fabric.isWebglSupported && fabric.isWebglSupported(fabric.textureSize)) { + console.log('max texture size: ' + fabric.maxTextureSize); + return (new fabric.WebglFilterBackend({ tileSize: fabric.textureSize })); + } + else if (fabric.Canvas2dFilterBackend) { + return (new fabric.Canvas2dFilterBackend()); + } +}; - /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */ - var fabric$1 = fabric$1 || { version: '5.1.0' }; - if (typeof exports !== 'undefined') { - exports.fabric = fabric$1; - } - /* _AMD_START_ */ - else if (typeof define === 'function' && define.amd) { - define([], function() { return fabric$1; }); +if (typeof document !== 'undefined' && typeof window !== 'undefined') { + // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) + window.fabric = fabric; +} + + +(function() { + + /** + * @private + * @param {String} eventName + * @param {Function} handler + */ + function _removeEventListener(eventName, handler) { + if (!this.__eventListeners[eventName]) { + return; + } + var eventListener = this.__eventListeners[eventName]; + if (handler) { + eventListener[eventListener.indexOf(handler)] = false; + } + else { + fabric.util.array.fill(eventListener, false); + } } - /* _AMD_END_ */ - if (typeof document !== 'undefined' && typeof window !== 'undefined') { - if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) { - fabric$1.document = document; + + /** + * Observes specified event + * @memberOf fabric.Observable + * @alias on + * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) + * @param {Function} handler Function that receives a notification when an event of the specified type occurs + * @return {Self} thisArg + * @chainable + */ + function on(eventName, handler) { + if (!this.__eventListeners) { + this.__eventListeners = { }; + } + // one object with key/value pairs was passed + if (arguments.length === 1) { + for (var prop in eventName) { + this.on(prop, eventName[prop]); + } } else { - fabric$1.document = document.implementation.createHTMLDocument(''); + if (!this.__eventListeners[eventName]) { + this.__eventListeners[eventName] = []; + } + this.__eventListeners[eventName].push(handler); } - fabric$1.window = window; + return this; } - else { - // assume we're running under node.js when document/window are not present - var jsdom = require('jsdom'); - var virtualWindow = new jsdom.JSDOM( - decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'), - { - features: { - FetchExternalResources: ['img'] - }, - resources: 'usable' - }).window; - fabric$1.document = virtualWindow.document; - fabric$1.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper; - fabric$1.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas; - fabric$1.window = virtualWindow; - global.DOMParser = fabric$1.window.DOMParser; + + function _once(eventName, handler) { + var _handler = function () { + handler.apply(this, arguments); + this.off(eventName, _handler); + }.bind(this); + this.on(eventName, _handler); + } + + function once(eventName, handler) { + // one object with key/value pairs was passed + if (arguments.length === 1) { + for (var prop in eventName) { + _once.call(this, prop, eventName[prop]); + } + } + else { + _once.call(this, eventName, handler); + } + return this; } /** - * True when in environment that supports touch events - * @type boolean + * Stops event observing for a particular event handler. Calling this method + * without arguments removes all handlers for all events + * @memberOf fabric.Observable + * @alias off + * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) + * @param {Function} handler Function to be deleted from EventListeners + * @return {Self} thisArg + * @chainable */ - fabric$1.isTouchSupported = 'ontouchstart' in fabric$1.window || 'ontouchstart' in fabric$1.document || - (fabric$1.window && fabric$1.window.navigator && fabric$1.window.navigator.maxTouchPoints > 0); + function off(eventName, handler) { + if (!this.__eventListeners) { + return this; + } + + // remove all key/value pairs (event name -> event handler) + if (arguments.length === 0) { + for (eventName in this.__eventListeners) { + _removeEventListener.call(this, eventName); + } + } + // one object with key/value pairs was passed + else if (arguments.length === 1 && typeof arguments[0] === 'object') { + for (var prop in eventName) { + _removeEventListener.call(this, prop, eventName[prop]); + } + } + else { + _removeEventListener.call(this, eventName, handler); + } + return this; + } /** - * True when in environment that's probably Node.js - * @type boolean + * Fires event with an optional options object + * @memberOf fabric.Observable + * @param {String} eventName Event name to fire + * @param {Object} [options] Options object + * @return {Self} thisArg + * @chainable */ - fabric$1.isLikelyNode = typeof Buffer !== 'undefined' && - typeof window === 'undefined'; + function fire(eventName, options) { + if (!this.__eventListeners) { + return this; + } + + var listenersForEvent = this.__eventListeners[eventName]; + if (!listenersForEvent) { + return this; + } + + for (var i = 0, len = listenersForEvent.length; i < len; i++) { + listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); + } + this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { + return value !== false; + }); + return this; + } - /* _FROM_SVG_START_ */ /** - * Attributes parsed from all SVG elements - * @type array - */ - fabric$1.SHARED_ATTRIBUTES = [ - 'display', - 'transform', - 'fill', 'fill-opacity', 'fill-rule', - 'opacity', - 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', - 'stroke-linejoin', 'stroke-miterlimit', - 'stroke-opacity', 'stroke-width', - 'id', 'paint-order', 'vector-effect', - 'instantiated_by_use', 'clip-path', - ]; - /* _FROM_SVG_END_ */ + * @namespace fabric.Observable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events} + * @see {@link http://fabricjs.com/events|Events demo} + */ + fabric.Observable = { + fire: fire, + on: on, + once: once, + off: off, + }; +})(); + + +/** + * @namespace fabric.Collection + */ +fabric.Collection = { + + _objects: [], /** - * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion. + * Adds objects to collection, Canvas or Group, then renders canvas + * (if `renderOnAddRemove` is not `false`). + * in case of Group no changes to bounding box are made. + * Objects should be instances of (or inherit from) fabric.Object + * Use of this function is highly discouraged for groups. + * you can add a bunch of objects with the add method but then you NEED + * to run a addWithUpdate call for the Group class or position/bbox will be wrong. + * @param {...fabric.Object} object Zero or more fabric instances + * @return {Self} thisArg + * @chainable */ - fabric$1.DPI = 96; - fabric$1.reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)'; - fabric$1.commaWsp = '(?:\\s+,?\\s*|,\\s*)'; - fabric$1.rePathCommand = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/ig; - fabric$1.reNonWord = /[ \n\.,;!\?\-]/; - fabric$1.fontPaths = { }; - fabric$1.iMatrix = [1, 0, 0, 1, 0, 0]; - fabric$1.svgNS = 'http://www.w3.org/2000/svg'; + add: function () { + this._objects.push.apply(this._objects, arguments); + if (this._onObjectAdded) { + for (var i = 0, length = arguments.length; i < length; i++) { + this._onObjectAdded(arguments[i]); + } + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, /** - * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine. - * @since 1.7.14 - * @type Number - * @default + * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) + * An object should be an instance of (or inherit from) fabric.Object + * Use of this function is highly discouraged for groups. + * you can add a bunch of objects with the insertAt method but then you NEED + * to run a addWithUpdate call for the Group class or position/bbox will be wrong. + * @param {Object} object Object to insert + * @param {Number} index Index to insert object at + * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs + * @return {Self} thisArg + * @chainable */ - fabric$1.perfLimitSizeTotal = 2097152; + insertAt: function (object, index, nonSplicing) { + var objects = this._objects; + if (nonSplicing) { + objects[index] = object; + } + else { + objects.splice(index, 0, object); + } + this._onObjectAdded && this._onObjectAdded(object); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, /** - * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000 - * @since 1.7.14 - * @type Number - * @default + * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) + * @param {...fabric.Object} object Zero or more fabric instances + * @return {Self} thisArg + * @chainable */ - fabric$1.maxCacheSideLimit = 4096; + remove: function() { + var objects = this._objects, + index, somethingRemoved = false; + + for (var i = 0, length = arguments.length; i < length; i++) { + index = objects.indexOf(arguments[i]); + + // only call onObjectRemoved if an object was actually removed + if (index !== -1) { + somethingRemoved = true; + objects.splice(index, 1); + this._onObjectRemoved && this._onObjectRemoved(arguments[i]); + } + } + + this.renderOnAddRemove && somethingRemoved && this.requestRenderAll(); + return this; + }, /** - * Lowest pixel limit for cache canvases, set at 256PX - * @since 1.7.14 - * @type Number - * @default + * Executes given function for each object in this group + * @param {Function} callback + * Callback invoked with current object as first argument, + * index - as second and an array of all objects - as third. + * Callback is invoked in a context of Global Object (e.g. `window`) + * when no `context` argument is given + * + * @param {Object} context Context (aka thisObject) + * @return {Self} thisArg + * @chainable */ - fabric$1.minCacheSideLimit = 256; + forEachObject: function(callback, context) { + var objects = this.getObjects(); + for (var i = 0, len = objects.length; i < len; i++) { + callback.call(context, objects[i], i, objects); + } + return this; + }, /** - * Cache Object for widths of chars in text rendering. + * Returns an array of children objects of this instance + * Type parameter introduced in 1.3.10 + * since 2.3.5 this method return always a COPY of the array; + * @param {String} [type] When specified, only objects of this type are returned + * @return {Array} */ - fabric$1.charWidthsCache = { }; + getObjects: function(type) { + if (typeof type === 'undefined') { + return this._objects.concat(); + } + return this._objects.filter(function(o) { + return o.type === type; + }); + }, /** - * if webgl is enabled and available, textureSize will determine the size - * of the canvas backend - * @since 2.0.0 - * @type Number - * @default + * Returns object at specified index + * @param {Number} index + * @return {Self} thisArg */ - fabric$1.textureSize = 2048; + item: function (index) { + return this._objects[index]; + }, /** - * When 'true', style information is not retained when copy/pasting text, making - * pasted text use destination style. - * Defaults to 'false'. - * @type Boolean - * @default + * Returns true if collection contains no objects + * @return {Boolean} true if collection is empty */ - fabric$1.disableStyleCopyPaste = false; + isEmpty: function () { + return this._objects.length === 0; + }, /** - * Enable webgl for filtering picture is available - * A filtering backend will be initialized, this will both take memory and - * time since a default 2048x2048 canvas will be created for the gl context - * @since 2.0.0 - * @type Boolean - * @default + * Returns a size of a collection (i.e: length of an array containing its objects) + * @return {Number} Collection size */ - fabric$1.enableGLFiltering = true; + size: function() { + return this._objects.length; + }, /** - * Device Pixel Ratio - * @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html + * Returns true if collection contains an object + * @param {Object} object Object to check against + * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects` + * @return {Boolean} `true` if collection contains an object */ - fabric$1.devicePixelRatio = fabric$1.window.devicePixelRatio || - fabric$1.window.webkitDevicePixelRatio || - fabric$1.window.mozDevicePixelRatio || - 1; + contains: function (object, deep) { + if (this._objects.indexOf(object) > -1) { + return true; + } + else if (deep) { + return this._objects.some(function (obj) { + return typeof obj.contains === 'function' && obj.contains(object, true); + }); + } + return false; + }, + /** - * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value, - * which is unitless and not rendered equally across browsers. - * - * Values that work quite well (as of October 2017) are: - * - Chrome: 1.5 - * - Edge: 1.75 - * - Firefox: 0.9 - * - Safari: 0.95 - * - * @since 2.0.0 - * @type Number - * @default 1 + * Returns number representation of a collection complexity + * @return {Number} complexity */ - fabric$1.browserShadowBlurConstant = 1; + complexity: function () { + return this._objects.reduce(function (memo, current) { + memo += current.complexity ? current.complexity() : 0; + return memo; + }, 0); + } +}; + + +/** + * @namespace fabric.CommonMethods + */ +fabric.CommonMethods = { /** - * This object contains the result of arc to bezier conversion for faster retrieving if the same arc needs to be converted again. - * It was an internal variable, is accessible since version 2.3.4 + * Sets object's properties from options + * @param {Object} [options] Options object */ - fabric$1.arcToSegmentsCache = { }; + _setOptions: function(options) { + for (var prop in options) { + this.set(prop, options[prop]); + } + }, /** - * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it. - * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing - * you do not get any speed benefit and you get a big object in memory. - * The object was a private variable before, while now is appended to the lib so that you have access to it and you - * can eventually clear it. - * It was an internal variable, is accessible since version 2.3.4 + * @private + * @param {Object} [filler] Options object + * @param {String} [property] property to set the Gradient to */ - fabric$1.boundsOfCurveCache = { }; + _initGradient: function(filler, property) { + if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) { + this.set(property, new fabric.Gradient(filler)); + } + }, /** - * If disabled boundsOfCurveCache is not used. For apps that make heavy usage of pencil drawing probably disabling it is better - * @default true + * @private + * @param {Object} [filler] Options object + * @param {String} [property] property to set the Pattern to + * @param {Function} [callback] callback to invoke after pattern load */ - fabric$1.cachesBoundsOfCurve = true; + _initPattern: function(filler, property, callback) { + if (filler && filler.source && !(filler instanceof fabric.Pattern)) { + this.set(property, new fabric.Pattern(filler, callback)); + } + else { + callback && callback(); + } + }, /** - * Skip performance testing of setupGLContext and force the use of putImageData that seems to be the one that works best on - * Chrome + old hardware. if your users are experiencing empty images after filtering you may try to force this to true - * this has to be set before instantiating the filtering backend ( before filtering the first image ) - * @type Boolean - * @default false + * @private */ - fabric$1.forceGLPutImageData = false; + _setObject: function(obj) { + for (var prop in obj) { + this._set(prop, obj[prop]); + } + }, - fabric$1.initFilterBackend = function() { - if (fabric$1.enableGLFiltering && fabric$1.isWebglSupported && fabric$1.isWebglSupported(fabric$1.textureSize)) { - console.log('max texture size: ' + fabric$1.maxTextureSize); - return (new fabric$1.WebglFilterBackend({ tileSize: fabric$1.textureSize })); + /** + * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. + * @param {String|Object} key Property name or object (if object, iterate over the object properties) + * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) + * @return {fabric.Object} thisArg + * @chainable + */ + set: function(key, value) { + if (typeof key === 'object') { + this._setObject(key); } - else if (fabric$1.Canvas2dFilterBackend) { - return (new fabric$1.Canvas2dFilterBackend()); + else { + this._set(key, value); } - }; + return this; + }, + + _set: function(key, value) { + this[key] = value; + }, - (function(global) { - if (typeof document !== 'undefined' && typeof window !== 'undefined') { - // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) - global.fabric = fabric; + /** + * Toggles specified property from `true` to `false` or from `false` to `true` + * @param {String} property Property to toggle + * @return {fabric.Object} thisArg + * @chainable + */ + toggle: function(property) { + var value = this.get(property); + if (typeof value === 'boolean') { + this.set(property, !value); } - })(typeof exports !== 'undefined' ? exports : window); + return this; + }, + + /** + * Basic getter + * @param {String} property Property name + * @return {*} value of a property + */ + get: function(property) { + return this[property]; + } +}; + + +(function(global) { + + var sqrt = Math.sqrt, + atan2 = Math.atan2, + pow = Math.pow, + PiBy180 = Math.PI / 180, + PiBy2 = Math.PI / 2; + + /** + * @namespace fabric.util + */ + fabric.util = { - (function(global) { - var fabric = global.fabric; /** - * @private - * @param {String} eventName - * @param {Function} handler + * Calculate the cos of an angle, avoiding returning floats for known results + * @static + * @memberOf fabric.util + * @param {Number} angle the angle in radians or in degree + * @return {Number} */ - function _removeEventListener(eventName, handler) { - if (!this.__eventListeners[eventName]) { - return; - } - var eventListener = this.__eventListeners[eventName]; - if (handler) { - eventListener[eventListener.indexOf(handler)] = false; + cos: function(angle) { + if (angle === 0) { return 1; } + if (angle < 0) { + // cos(a) = cos(-a) + angle = -angle; } - else { - fabric.util.array.fill(eventListener, false); + var angleSlice = angle / PiBy2; + switch (angleSlice) { + case 1: case 3: return 0; + case 2: return -1; } - } + return Math.cos(angle); + }, /** - * Observes specified event - * @memberOf fabric.Observable - * @alias on - * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) - * @param {Function} handler Function that receives a notification when an event of the specified type occurs - * @return {Function} disposer + * Calculate the sin of an angle, avoiding returning floats for known results + * @static + * @memberOf fabric.util + * @param {Number} angle the angle in radians or in degree + * @return {Number} */ - function on(eventName, handler) { - if (!this.__eventListeners) { - this.__eventListeners = { }; - } - // one object with key/value pairs was passed - if (arguments.length === 1) { - for (var prop in eventName) { - this.on(prop, eventName[prop]); - } + sin: function(angle) { + if (angle === 0) { return 0; } + var angleSlice = angle / PiBy2, sign = 1; + if (angle < 0) { + // sin(-a) = -sin(a) + sign = -1; } - else { - if (!this.__eventListeners[eventName]) { - this.__eventListeners[eventName] = []; - } - this.__eventListeners[eventName].push(handler); + switch (angleSlice) { + case 1: return sign; + case 2: return 0; + case 3: return -sign; } - return off.bind(this, eventName, handler); - } - - function _once(eventName, handler) { - var _handler = function () { - handler.apply(this, arguments); - this.off(eventName, _handler); - }.bind(this); - this.on(eventName, _handler); - return _handler; - } + return Math.sin(angle); + }, /** - * Observes specified event **once** - * @memberOf fabric.Observable - * @alias once - * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) - * @param {Function} handler Function that receives a notification when an event of the specified type occurs - * @return {Function} disposer + * Removes value from an array. + * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` + * @static + * @memberOf fabric.util + * @param {Array} array + * @param {*} value + * @return {Array} original array */ - function once(eventName, handler) { - // one object with key/value pairs was passed - if (arguments.length === 1) { - var handlers = {}; - for (var prop in eventName) { - handlers[prop] = _once.call(this, prop, eventName[prop]); - } - return off.bind(this, handlers); + removeFromArray: function(array, value) { + var idx = array.indexOf(value); + if (idx !== -1) { + array.splice(idx, 1); } - else { - var _handler = _once.call(this, eventName, handler); - return off.bind(this, eventName, _handler); - } - } + return array; + }, /** - * Stops event observing for a particular event handler. Calling this method - * without arguments removes all handlers for all events - * @memberOf fabric.Observable - * @alias off - * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) - * @param {Function} handler Function to be deleted from EventListeners + * Returns random number between 2 specified ones. + * @static + * @memberOf fabric.util + * @param {Number} min lower limit + * @param {Number} max upper limit + * @return {Number} random value (between min and max) */ - function off(eventName, handler) { - if (!this.__eventListeners) { - return; - } + getRandomInt: function(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, - // remove all key/value pairs (event name -> event handler) - if (arguments.length === 0) { - for (eventName in this.__eventListeners) { - _removeEventListener.call(this, eventName); - } - } - // one object with key/value pairs was passed - else if (typeof eventName === 'object' && typeof handler === 'undefined') { - for (var prop in eventName) { - _removeEventListener.call(this, prop, eventName[prop]); - } - } - else { - _removeEventListener.call(this, eventName, handler); - } - } + /** + * Transforms degrees to radians. + * @static + * @memberOf fabric.util + * @param {Number} degrees value in degrees + * @return {Number} value in radians + */ + degreesToRadians: function(degrees) { + return degrees * PiBy180; + }, /** - * Fires event with an optional options object - * @memberOf fabric.Observable - * @param {String} eventName Event name to fire - * @param {Object} [options] Options object + * Transforms radians to degrees. + * @static + * @memberOf fabric.util + * @param {Number} radians value in radians + * @return {Number} value in degrees */ - function fire(eventName, options) { - if (!this.__eventListeners) { - return; - } + radiansToDegrees: function(radians) { + return radians / PiBy180; + }, - var listenersForEvent = this.__eventListeners[eventName]; - if (!listenersForEvent) { - return; - } + /** + * Rotates `point` around `origin` with `radians` + * @static + * @memberOf fabric.util + * @param {fabric.Point} point The point to rotate + * @param {fabric.Point} origin The origin of the rotation + * @param {Number} radians The radians of the angle for the rotation + * @return {fabric.Point} The new rotated point + */ + rotatePoint: function(point, origin, radians) { + var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), + v = fabric.util.rotateVector(newPoint, radians); + return new fabric.Point(v.x, v.y).addEquals(origin); + }, - for (var i = 0, len = listenersForEvent.length; i < len; i++) { - listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); - } - this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { - return value !== false; - }); - } + /** + * Rotates `vector` with `radians` + * @static + * @memberOf fabric.util + * @param {Object} vector The vector to rotate (x and y) + * @param {Number} radians The radians of the angle for the rotation + * @return {Object} The new rotated point + */ + rotateVector: function(vector, radians) { + var sin = fabric.util.sin(radians), + cos = fabric.util.cos(radians), + rx = vector.x * cos - vector.y * sin, + ry = vector.x * sin + vector.y * cos; + return { + x: rx, + y: ry + }; + }, /** - * @namespace fabric.Observable - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events} - * @see {@link http://fabricjs.com/events|Events demo} + * Creates a vetor from points represented as a point + * @static + * @memberOf fabric.util + * + * @typedef {Object} Point + * @property {number} x + * @property {number} y + * + * @param {Point} from + * @param {Point} to + * @returns {Point} vector */ - fabric.Observable = { - fire: fire, - on: on, - once: once, - off: off, - }; - })(typeof exports !== 'undefined' ? exports : window); + createVector: function (from, to) { + return new fabric.Point(to.x - from.x, to.y - from.y); + }, - (function(global){ - var fabric = global.fabric; /** - * @namespace fabric.Collection + * Calculates angle between 2 vectors using dot product + * @static + * @memberOf fabric.util + * @param {Point} a + * @param {Point} b + * @returns the angle in radian between the vectors */ - fabric.Collection = { + calcAngleBetweenVectors: function (a, b) { + return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); + }, - /** - * @type {fabric.Object[]} - */ - _objects: [], + /** + * @static + * @memberOf fabric.util + * @param {Point} v + * @returns {Point} vector representing the unit vector of pointing to the direction of `v` + */ + getHatVector: function (v) { + return new fabric.Point(v.x, v.y).multiply(1 / Math.hypot(v.x, v.y)); + }, - /** - * Adds objects to collection, Canvas or Group, then renders canvas - * (if `renderOnAddRemove` is not `false`). - * Objects should be instances of (or inherit from) fabric.Object - * @private - * @param {fabric.Object[]} objects to add - * @param {(object:fabric.Object) => any} [callback] - * @returns {number} new array length - */ - add: function (objects, callback) { - var size = this._objects.push.apply(this._objects, objects); - if (callback) { - for (var i = 0; i < objects.length; i++) { - callback.call(this, objects[i]); - } - } - return size; - }, + /** + * @static + * @memberOf fabric.util + * @param {Point} A + * @param {Point} B + * @param {Point} C + * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle + */ + getBisector: function (A, B, C) { + var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); + var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); + // check if alpha is relative to AB->BC + var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); + var phi = alpha * (ro === 0 ? 1 : -1) / 2; + return { + vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), + angle: alpha + }; + }, - /** - * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) - * An object should be an instance of (or inherit from) fabric.Object - * @private - * @param {fabric.Object|fabric.Object[]} objects Object(s) to insert - * @param {Number} index Index to insert object at - * @param {(object:fabric.Object) => any} [callback] - * @returns {number} new array length - */ - insertAt: function (objects, index, callback) { - var args = [index, 0].concat(objects); - this._objects.splice.apply(this._objects, args); - if (callback) { - for (var i = 2; i < args.length; i++) { - callback.call(this, args[i]); - } + /** + * Project stroke width on points returning 2 projections for each point as follows: + * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke. + * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector. + * - `round`: same as `bevel` + * Used to calculate object's bounding box + * @static + * @memberOf fabric.util + * @param {Point[]} points + * @param {Object} options + * @param {number} options.strokeWidth + * @param {'miter'|'bevel'|'round'} options.strokeLineJoin + * @param {number} options.strokeMiterLimit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit + * @param {boolean} options.strokeUniform + * @param {number} options.scaleX + * @param {number} options.scaleY + * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points + * @returns {fabric.Point[]} array of size 2n/4n of all suspected points + */ + projectStrokeOnPoints: function (points, options, openPath) { + var coords = [], s = options.strokeWidth / 2, + strokeUniformScalar = options.strokeUniform ? + new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), + getStrokeHatVector = function (v) { + var scalar = s / (Math.hypot(v.x, v.y)); + return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); + }; + if (points.length <= 1) {return coords;} + points.forEach(function (p, index) { + var A = new fabric.Point(p.x, p.y), B, C; + if (index === 0) { + C = points[index + 1]; + B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; } - return this._objects.length; - }, - - /** - * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) - * @private - * @param {fabric.Object[]} objectsToRemove objects to remove - * @param {(object:fabric.Object) => any} [callback] function to call for each object removed - * @returns {fabric.Object[]} removed objects - */ - remove: function(objectsToRemove, callback) { - var objects = this._objects, removed = []; - for (var i = 0, object, index; i < objectsToRemove.length; i++) { - object = objectsToRemove[i]; - index = objects.indexOf(object); - // only call onObjectRemoved if an object was actually removed - if (index !== -1) { - objects.splice(index, 1); - removed.push(object); - callback && callback.call(this, object); + else if (index === points.length - 1) { + B = points[index - 1]; + C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; + } + else { + B = points[index - 1]; + C = points[index + 1]; + } + var bisector = fabric.util.getBisector(A, B, C), + bisectorVector = bisector.vector, + alpha = bisector.angle, + scalar, + miterVector; + if (options.strokeLineJoin === 'miter') { + scalar = -s / Math.sin(alpha / 2); + miterVector = new fabric.Point( + bisectorVector.x * scalar * strokeUniformScalar.x, + bisectorVector.y * scalar * strokeUniformScalar.y + ); + if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + return; } } - return removed; - }, + scalar = -s * Math.SQRT2; + miterVector = new fabric.Point( + bisectorVector.x * scalar * strokeUniformScalar.x, + bisectorVector.y * scalar * strokeUniformScalar.y + ); + coords.push(A.add(miterVector)); + coords.push(A.subtract(miterVector)); + }); + return coords; + }, - /** - * Executes given function for each object in this group - * @param {Function} callback - * Callback invoked with current object as first argument, - * index - as second and an array of all objects - as third. - * Callback is invoked in a context of Global Object (e.g. `window`) - * when no `context` argument is given - * - * @param {Object} context Context (aka thisObject) - * @return {Self} thisArg - * @chainable - */ - forEachObject: function(callback, context) { - var objects = this.getObjects(); - for (var i = 0; i < objects.length; i++) { - callback.call(context, objects[i], i, objects); - } - return this; - }, + /** + * Apply transform t to point p + * @static + * @memberOf fabric.util + * @param {fabric.Point} p The point to transform + * @param {Array} t The transform + * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied + * @return {fabric.Point} The transformed point + */ + transformPoint: function(p, t, ignoreOffset) { + if (ignoreOffset) { + return new fabric.Point( + t[0] * p.x + t[2] * p.y, + t[1] * p.x + t[3] * p.y + ); + } + return new fabric.Point( + t[0] * p.x + t[2] * p.y + t[4], + t[1] * p.x + t[3] * p.y + t[5] + ); + }, - /** - * Returns an array of children objects of this instance - * @param {...String} [types] When specified, only objects of these types are returned - * @return {Array} - */ - getObjects: function() { - if (arguments.length === 0) { - return this._objects.concat(); + /** + * Returns coordinates of points's bounding rectangle (left, top, width, height) + * @param {Array} points 4 points array + * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix + * @return {Object} Object with left, top, width, height properties + */ + makeBoundingBoxFromPoints: function(points, transform) { + if (transform) { + for (var i = 0; i < points.length; i++) { + points[i] = fabric.util.transformPoint(points[i], transform); } - var types = Array.from(arguments); - return this._objects.filter(function (o) { - return types.indexOf(o.type) > -1; - }); - }, + } + var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], + minX = fabric.util.array.min(xPoints), + maxX = fabric.util.array.max(xPoints), + width = maxX - minX, + yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], + minY = fabric.util.array.min(yPoints), + maxY = fabric.util.array.max(yPoints), + height = maxY - minY; - /** - * Returns object at specified index - * @param {Number} index - * @return {Self} thisArg - */ - item: function (index) { - return this._objects[index]; - }, + return { + left: minX, + top: minY, + width: width, + height: height + }; + }, - /** - * Returns true if collection contains no objects - * @return {Boolean} true if collection is empty - */ - isEmpty: function () { - return this._objects.length === 0; - }, - - /** - * Returns a size of a collection (i.e: length of an array containing its objects) - * @return {Number} Collection size - */ - size: function() { - return this._objects.length; - }, - - /** - * Returns true if collection contains an object.\ - * **Prefer using {@link `fabric.Object#isDescendantOf`} for performance reasons** - * instead of a.contains(b) use b.isDescendantOf(a) - * @param {Object} object Object to check against - * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects` - * @return {Boolean} `true` if collection contains an object - */ - contains: function (object, deep) { - if (this._objects.indexOf(object) > -1) { - return true; - } - else if (deep) { - return this._objects.some(function (obj) { - return typeof obj.contains === 'function' && obj.contains(object, true); - }); - } - return false; - }, + /** + * Invert transformation t + * @static + * @memberOf fabric.util + * @param {Array} t The transform + * @return {Array} The inverted transform + */ + invertTransform: function(t) { + var a = 1 / (t[0] * t[3] - t[1] * t[2]), + r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], + o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); + r[4] = -o.x; + r[5] = -o.y; + return r; + }, - /** - * Returns number representation of a collection complexity - * @return {Number} complexity - */ - complexity: function () { - return this._objects.reduce(function (memo, current) { - memo += current.complexity ? current.complexity() : 0; - return memo; - }, 0); - } - }; - })(typeof exports !== 'undefined' ? exports : window); + /** + * A wrapper around Number#toFixed, which contrary to native method returns number, not string. + * @static + * @memberOf fabric.util + * @param {Number|String} number number to operate on + * @param {Number} fractionDigits number of fraction digits to "leave" + * @return {Number} + */ + toFixed: function(number, fractionDigits) { + return parseFloat(Number(number).toFixed(fractionDigits)); + }, - (function(global){ - var fabric = global.fabric; /** - * @namespace fabric.CommonMethods + * Converts from attribute value to pixel value if applicable. + * Returns converted pixels or original value not converted. + * @param {Number|String} value number to operate on + * @param {Number} fontSize + * @return {Number|String} */ - fabric.CommonMethods = { + parseUnit: function(value, fontSize) { + var unit = /\D{0,2}$/.exec(value), + number = parseFloat(value); + if (!fontSize) { + fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + } + switch (unit[0]) { + case 'mm': + return number * fabric.DPI / 25.4; - /** - * Sets object's properties from options - * @param {Object} [options] Options object - */ - _setOptions: function(options) { - for (var prop in options) { - this.set(prop, options[prop]); - } - }, + case 'cm': + return number * fabric.DPI / 2.54; - /** - * @private - */ - _setObject: function(obj) { - for (var prop in obj) { - this._set(prop, obj[prop]); - } - }, + case 'in': + return number * fabric.DPI; - /** - * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. - * @param {String|Object} key Property name or object (if object, iterate over the object properties) - * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) - * @return {fabric.Object} thisArg - * @chainable - */ - set: function(key, value) { - if (typeof key === 'object') { - this._setObject(key); - } - else { - this._set(key, value); - } - return this; - }, + case 'pt': + return number * fabric.DPI / 72; // or * 4 / 3 - _set: function(key, value) { - this[key] = value; - }, + case 'pc': + return number * fabric.DPI / 72 * 12; // or * 16 - /** - * Toggles specified property from `true` to `false` or from `false` to `true` - * @param {String} property Property to toggle - * @return {fabric.Object} thisArg - * @chainable - */ - toggle: function(property) { - var value = this.get(property); - if (typeof value === 'boolean') { - this.set(property, !value); - } - return this; - }, + case 'em': + return number * fontSize; - /** - * Basic getter - * @param {String} property Property name - * @return {*} value of a property - */ - get: function(property) { - return this[property]; + default: + return number; } - }; - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { + }, - var fabric = global.fabric, sqrt = Math.sqrt, - atan2 = Math.atan2, - pow = Math.pow, - PiBy180 = Math.PI / 180, - PiBy2 = Math.PI / 2; + /** + * Function which always returns `false`. + * @static + * @memberOf fabric.util + * @return {Boolean} + */ + falseFunction: function() { + return false; + }, /** - * @typedef {[number,number,number,number,number,number]} Matrix + * Returns klass "Class" object of given namespace + * @memberOf fabric.util + * @param {String} type Type of object (eg. 'circle') + * @param {String} namespace Namespace to get klass "Class" object from + * @return {Object} klass "Class" */ + getKlass: function(type, namespace) { + // capitalize first letter only + type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); + return fabric.util.resolveNamespace(namespace)[type]; + }, + + /** + * Returns array of attributes for given svg that fabric parses + * @memberOf fabric.util + * @param {String} type Type of svg element (eg. 'circle') + * @return {Array} string names of supported attributes + */ + getSvgAttributes: function(type) { + var attributes = [ + 'instantiated_by_use', + 'style', + 'id', + 'class' + ]; + switch (type) { + case 'linearGradient': + attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); + break; + case 'radialGradient': + attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); + break; + case 'stop': + attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); + break; + } + return attributes; + }, /** - * @namespace fabric.util + * Returns object of given namespace + * @memberOf fabric.util + * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric' + * @return {Object} Object for given namespace (default fabric) */ - fabric.util = { + resolveNamespace: function(namespace) { + if (!namespace) { + return fabric; + } - /** - * Calculate the cos of an angle, avoiding returning floats for known results - * @static - * @memberOf fabric.util - * @param {Number} angle the angle in radians or in degree - * @return {Number} - */ - cos: function(angle) { - if (angle === 0) { return 1; } - if (angle < 0) { - // cos(a) = cos(-a) - angle = -angle; - } - var angleSlice = angle / PiBy2; - switch (angleSlice) { - case 1: case 3: return 0; - case 2: return -1; - } - return Math.cos(angle); - }, + var parts = namespace.split('.'), + len = parts.length, i, + obj = global || fabric.window; - /** - * Calculate the sin of an angle, avoiding returning floats for known results - * @static - * @memberOf fabric.util - * @param {Number} angle the angle in radians or in degree - * @return {Number} - */ - sin: function(angle) { - if (angle === 0) { return 0; } - var angleSlice = angle / PiBy2, sign = 1; - if (angle < 0) { - // sin(-a) = -sin(a) - sign = -1; - } - switch (angleSlice) { - case 1: return sign; - case 2: return 0; - case 3: return -sign; - } - return Math.sin(angle); - }, + for (i = 0; i < len; ++i) { + obj = obj[parts[i]]; + } - /** - * Removes value from an array. - * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` - * @static - * @memberOf fabric.util - * @param {Array} array - * @param {*} value - * @return {Array} original array - */ - removeFromArray: function(array, value) { - var idx = array.indexOf(value); - if (idx !== -1) { - array.splice(idx, 1); - } - return array; - }, + return obj; + }, - /** - * Returns random number between 2 specified ones. - * @static - * @memberOf fabric.util - * @param {Number} min lower limit - * @param {Number} max upper limit - * @return {Number} random value (between min and max) - */ - getRandomInt: function(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; - }, + /** + * Loads image element from given url and passes it to a callback + * @memberOf fabric.util + * @param {String} url URL representing an image + * @param {Function} callback Callback; invoked with loaded image + * @param {*} [context] Context to invoke callback in + * @param {Object} [crossOrigin] crossOrigin value to set image element to + */ + loadImage: function(url, callback, context, crossOrigin) { + if (!url) { + callback && callback.call(context, url); + return; + } - /** - * Transforms degrees to radians. - * @static - * @memberOf fabric.util - * @param {Number} degrees value in degrees - * @return {Number} value in radians - */ - degreesToRadians: function(degrees) { - return degrees * PiBy180; - }, + var img = fabric.util.createImage(); - /** - * Transforms radians to degrees. - * @static - * @memberOf fabric.util - * @param {Number} radians value in radians - * @return {Number} value in degrees - */ - radiansToDegrees: function(radians) { - return radians / PiBy180; - }, + /** @ignore */ + var onLoadCallback = function () { + callback && callback.call(context, img, false); + img = img.onload = img.onerror = null; + }; - /** - * Rotates `point` around `origin` with `radians` - * @static - * @memberOf fabric.util - * @param {fabric.Point} point The point to rotate - * @param {fabric.Point} origin The origin of the rotation - * @param {Number} radians The radians of the angle for the rotation - * @return {fabric.Point} The new rotated point - */ - rotatePoint: function(point, origin, radians) { - var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), - v = fabric.util.rotateVector(newPoint, radians); - return v.addEquals(origin); - }, + img.onload = onLoadCallback; + /** @ignore */ + img.onerror = function() { + fabric.log('Error loading ' + img.src); + callback && callback.call(context, null, true); + img = img.onload = img.onerror = null; + }; - /** - * Rotates `vector` with `radians` - * @static - * @memberOf fabric.util - * @param {Object} vector The vector to rotate (x and y) - * @param {Number} radians The radians of the angle for the rotation - * @return {fabric.Point} The new rotated point - */ - rotateVector: function(vector, radians) { - var sin = fabric.util.sin(radians), - cos = fabric.util.cos(radians), - rx = vector.x * cos - vector.y * sin, - ry = vector.x * sin + vector.y * cos; - return new fabric.Point(rx, ry); - }, + // data-urls appear to be buggy with crossOrigin + // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767 + // see https://code.google.com/p/chromium/issues/detail?id=315152 + // https://bugzilla.mozilla.org/show_bug.cgi?id=935069 + // crossOrigin null is the same as not set. + if (url.indexOf('data') !== 0 && + crossOrigin !== undefined && + crossOrigin !== null) { + img.crossOrigin = crossOrigin; + } - /** - * Creates a vetor from points represented as a point - * @static - * @memberOf fabric.util - * - * @typedef {Object} Point - * @property {number} x - * @property {number} y - * - * @param {Point} from - * @param {Point} to - * @returns {Point} vector - */ - createVector: function (from, to) { - return new fabric.Point(to.x - from.x, to.y - from.y); - }, + // IE10 / IE11-Fix: SVG contents from data: URI + // will only be available if the IMG is present + // in the DOM (and visible) + if (url.substring(0,14) === 'data:image/svg') { + img.onload = null; + fabric.util.loadImageInDom(img, onLoadCallback); + } - /** - * Calculates angle between 2 vectors using dot product - * @static - * @memberOf fabric.util - * @param {Point} a - * @param {Point} b - * @returns the angle in radian between the vectors - */ - calcAngleBetweenVectors: function (a, b) { - return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y))); - }, + img.src = url; + }, - /** - * @static - * @memberOf fabric.util - * @param {Point} v - * @returns {Point} vector representing the unit vector of pointing to the direction of `v` - */ - getHatVector: function (v) { - return new fabric.Point(v.x, v.y).scalarMultiply(1 / Math.hypot(v.x, v.y)); - }, + /** + * Attaches SVG image with data: URL to the dom + * @memberOf fabric.util + * @param {Object} img Image object with data:image/svg src + * @param {Function} callback Callback; invoked with loaded image + * @return {Object} DOM element (div containing the SVG image) + */ + loadImageInDom: function(img, onLoadCallback) { + var div = fabric.document.createElement('div'); + div.style.width = div.style.height = '1px'; + div.style.left = div.style.top = '-100%'; + div.style.position = 'absolute'; + div.appendChild(img); + fabric.document.querySelector('body').appendChild(div); + /** + * Wrap in function to: + * 1. Call existing callback + * 2. Cleanup DOM + */ + img.onload = function () { + onLoadCallback(); + div.parentNode.removeChild(div); + div = null; + }; + }, - /** - * @static - * @memberOf fabric.util - * @param {Point} A - * @param {Point} B - * @param {Point} C - * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle - */ - getBisector: function (A, B, C) { - var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C); - var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); - // check if alpha is relative to AB->BC - var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC); - var phi = alpha * (ro === 0 ? 1 : -1) / 2; - return { - vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)), - angle: alpha - }; - }, + /** + * Creates corresponding fabric instances from their object representations + * @static + * @memberOf fabric.util + * @param {Array} objects Objects to enliven + * @param {Function} callback Callback to invoke when all objects are created + * @param {String} namespace Namespace to get klass "Class" object from + * @param {Function} reviver Method for further parsing of object elements, + * called after each fabric object created. + */ + enlivenObjects: function(objects, callback, namespace, reviver) { + objects = objects || []; - /** - * Project stroke width on points returning 2 projections for each point as follows: - * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke. - * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector. - * - `round`: same as `bevel` - * Used to calculate object's bounding box - * @static - * @memberOf fabric.util - * @param {Point[]} points - * @param {Object} options - * @param {number} options.strokeWidth - * @param {'miter'|'bevel'|'round'} options.strokeLineJoin - * @param {number} options.strokeMiterLimit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit - * @param {boolean} options.strokeUniform - * @param {number} options.scaleX - * @param {number} options.scaleY - * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points - * @returns {fabric.Point[]} array of size 2n/4n of all suspected points - */ - projectStrokeOnPoints: function (points, options, openPath) { - var coords = [], s = options.strokeWidth / 2, - strokeUniformScalar = options.strokeUniform ? - new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1), - getStrokeHatVector = function (v) { - var scalar = s / (Math.hypot(v.x, v.y)); - return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y); - }; - if (points.length <= 1) {return coords;} - points.forEach(function (p, index) { - var A = new fabric.Point(p.x, p.y), B, C; - if (index === 0) { - C = points[index + 1]; - B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1]; - } - else if (index === points.length - 1) { - B = points[index - 1]; - C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0]; - } - else { - B = points[index - 1]; - C = points[index + 1]; - } - var bisector = fabric.util.getBisector(A, B, C), - bisectorVector = bisector.vector, - alpha = bisector.angle, - scalar, - miterVector; - if (options.strokeLineJoin === 'miter') { - scalar = -s / Math.sin(alpha / 2); - miterVector = new fabric.Point( - bisectorVector.x * scalar * strokeUniformScalar.x, - bisectorVector.y * scalar * strokeUniformScalar.y - ); - if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) { - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - return; - } - } - scalar = -s * Math.SQRT2; - miterVector = new fabric.Point( - bisectorVector.x * scalar * strokeUniformScalar.x, - bisectorVector.y * scalar * strokeUniformScalar.y - ); - coords.push(A.add(miterVector)); - coords.push(A.subtract(miterVector)); - }); - return coords; - }, + var enlivenedObjects = [], + numLoadedObjects = 0, + numTotalObjects = objects.length; - /** - * Apply transform t to point p - * @static - * @memberOf fabric.util - * @param {fabric.Point} p The point to transform - * @param {Array} t The transform - * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied - * @return {fabric.Point} The transformed point - */ - transformPoint: function(p, t, ignoreOffset) { - if (ignoreOffset) { - return new fabric.Point( - t[0] * p.x + t[2] * p.y, - t[1] * p.x + t[3] * p.y - ); + function onLoaded() { + if (++numLoadedObjects === numTotalObjects) { + callback && callback(enlivenedObjects.filter(function(obj) { + // filter out undefined objects (objects that gave error) + return obj; + })); } - return new fabric.Point( - t[0] * p.x + t[2] * p.y + t[4], - t[1] * p.x + t[3] * p.y + t[5] - ); - }, + } - /** - * Sends a point from the source coordinate plane to the destination coordinate plane.\ - * From the canvas/viewer's perspective the point remains unchanged. - * - * @example Send point from canvas plane to group plane - * var obj = new fabric.Rect({ left: 20, top: 20, width: 60, height: 60, strokeWidth: 0 }); - * var group = new fabric.Group([obj], { strokeWidth: 0 }); - * var sentPoint1 = fabric.util.sendPointToPlane(new fabric.Point(50, 50), null, group.calcTransformMatrix()); - * var sentPoint2 = fabric.util.sendPointToPlane(new fabric.Point(50, 50), fabric.iMatrix, group.calcTransformMatrix()); - * console.log(sentPoint1, sentPoint2) // both points print (0,0) which is the center of group - * - * @static - * @memberOf fabric.util - * @see {fabric.util.transformPointRelativeToCanvas} for transforming relative to canvas - * @param {fabric.Point} point - * @param {Matrix} [from] plane matrix containing object. Passing `null` is equivalent to passing the identity matrix, which means `point` exists in the canvas coordinate plane. - * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `point` should be sent to the canvas coordinate plane. - * @returns {fabric.Point} transformed point - */ - sendPointToPlane: function (point, from, to) { - // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) - // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) - var inv = fabric.util.invertTransform(to || fabric.iMatrix); - var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); - return fabric.util.transformPoint(point, t); - }, + if (!numTotalObjects) { + callback && callback(enlivenedObjects); + return; + } - /** - * Transform point relative to canvas. - * From the viewport/viewer's perspective the point remains unchanged. - * - * `child` relation means `point` exists in the coordinate plane created by `canvas`. - * In other words point is measured acoording to canvas' top left corner - * meaning that if `point` is equal to (0,0) it is positioned at canvas' top left corner. - * - * `sibling` relation means `point` exists in the same coordinate plane as canvas. - * In other words they both relate to the same (0,0) and agree on every point, which is how an event relates to canvas. - * - * @static - * @memberOf fabric.util - * @param {fabric.Point} point - * @param {fabric.StaticCanvas} canvas - * @param {'sibling'|'child'} relationBefore current relation of point to canvas - * @param {'sibling'|'child'} relationAfter desired relation of point to canvas - * @returns {fabric.Point} transformed point - */ - transformPointRelativeToCanvas: function (point, canvas, relationBefore, relationAfter) { - if (relationBefore !== 'child' && relationBefore !== 'sibling') { - throw new Error('fabric.js: received bad argument ' + relationBefore); - } - if (relationAfter !== 'child' && relationAfter !== 'sibling') { - throw new Error('fabric.js: received bad argument ' + relationAfter); - } - if (relationBefore === relationAfter) { - return point; + objects.forEach(function (o, index) { + // if sparse array + if (!o || !o.type) { + onLoaded(); + return; } - var t = canvas.viewportTransform; - return fabric.util.transformPoint(point, relationAfter === 'child' ? fabric.util.invertTransform(t) : t); - }, + var klass = fabric.util.getKlass(o.type, namespace); + klass.fromObject(o, function (obj, error) { + error || (enlivenedObjects[index] = obj); + reviver && reviver(o, obj, error); + onLoaded(); + }); + }); + }, - /** - * Returns coordinates of points's bounding rectangle (left, top, width, height) - * @static - * @memberOf fabric.util - * @param {Array} points 4 points array - * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix - * @return {Object} Object with left, top, width, height properties - */ - makeBoundingBoxFromPoints: function(points, transform) { - if (transform) { - for (var i = 0; i < points.length; i++) { - points[i] = fabric.util.transformPoint(points[i], transform); - } - } - var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], - minX = fabric.util.array.min(xPoints), - maxX = fabric.util.array.max(xPoints), - width = maxX - minX, - yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], - minY = fabric.util.array.min(yPoints), - maxY = fabric.util.array.max(yPoints), - height = maxY - minY; + /** + * Creates corresponding fabric instances residing in an object, e.g. `clipPath` + * @see {@link fabric.Object.ENLIVEN_PROPS} + * @param {Object} object + * @param {Object} [context] assign enlived props to this object (pass null to skip this) + * @param {(objects:fabric.Object[]) => void} callback + */ + enlivenObjectEnlivables: function (object, context, callback) { + var enlivenProps = fabric.Object.ENLIVEN_PROPS.filter(function (key) { return !!object[key]; }); + fabric.util.enlivenObjects(enlivenProps.map(function (key) { return object[key]; }), function (enlivedProps) { + var objects = {}; + enlivenProps.forEach(function (key, index) { + objects[key] = enlivedProps[index]; + context && (context[key] = enlivedProps[index]); + }); + callback && callback(objects); + }); + }, - return { - left: minX, - top: minY, - width: width, - height: height - }; - }, + /** + * Create and wait for loading of patterns + * @static + * @memberOf fabric.util + * @param {Array} patterns Objects to enliven + * @param {Function} callback Callback to invoke when all objects are created + * called after each fabric object created. + */ + enlivenPatterns: function(patterns, callback) { + patterns = patterns || []; - /** - * Invert transformation t - * @static - * @memberOf fabric.util - * @param {Array} t The transform - * @return {Array} The inverted transform - */ - invertTransform: function(t) { - var a = 1 / (t[0] * t[3] - t[1] * t[2]), - r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], - o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); - r[4] = -o.x; - r[5] = -o.y; - return r; - }, + function onLoaded() { + if (++numLoadedPatterns === numPatterns) { + callback && callback(enlivenedPatterns); + } + } - /** - * A wrapper around Number#toFixed, which contrary to native method returns number, not string. - * @static - * @memberOf fabric.util - * @param {Number|String} number number to operate on - * @param {Number} fractionDigits number of fraction digits to "leave" - * @return {Number} - */ - toFixed: function(number, fractionDigits) { - return parseFloat(Number(number).toFixed(fractionDigits)); - }, + var enlivenedPatterns = [], + numLoadedPatterns = 0, + numPatterns = patterns.length; - /** - * Converts from attribute value to pixel value if applicable. - * Returns converted pixels or original value not converted. - * @param {Number|String} value number to operate on - * @param {Number} fontSize - * @return {Number|String} - */ - parseUnit: function(value, fontSize) { - var unit = /\D{0,2}$/.exec(value), - number = parseFloat(value); - if (!fontSize) { - fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + if (!numPatterns) { + callback && callback(enlivenedPatterns); + return; + } + + patterns.forEach(function (p, index) { + if (p && p.source) { + new fabric.Pattern(p, function(pattern) { + enlivenedPatterns[index] = pattern; + onLoaded(); + }); + } + else { + enlivenedPatterns[index] = p; + onLoaded(); } - switch (unit[0]) { - case 'mm': - return number * fabric.DPI / 25.4; + }); + }, - case 'cm': - return number * fabric.DPI / 2.54; + /** + * Groups SVG elements (usually those retrieved from SVG document) + * @static + * @memberOf fabric.util + * @param {Array} elements SVG elements to group + * @param {Object} [options] Options object + * @param {String} path Value to set sourcePath to + * @return {fabric.Object|fabric.Group} + */ + groupSVGElements: function(elements, options, path) { + var object; + if (elements && elements.length === 1) { + return elements[0]; + } + if (options) { + if (options.width && options.height) { + options.centerPoint = { + x: options.width / 2, + y: options.height / 2 + }; + } + else { + delete options.width; + delete options.height; + } + } + object = new fabric.Group(elements, options); + if (typeof path !== 'undefined') { + object.sourcePath = path; + } + return object; + }, - case 'in': - return number * fabric.DPI; + /** + * Populates an object with properties of another object + * @static + * @memberOf fabric.util + * @param {Object} source Source object + * @param {Object} destination Destination object + * @return {Array} properties Properties names to include + */ + populateWithProperties: function(source, destination, properties) { + if (properties && Object.prototype.toString.call(properties) === '[object Array]') { + for (var i = 0, len = properties.length; i < len; i++) { + if (properties[i] in source) { + destination[properties[i]] = source[properties[i]]; + } + } + } + }, - case 'pt': - return number * fabric.DPI / 72; // or * 4 / 3 + /** + * Creates canvas element + * @static + * @memberOf fabric.util + * @return {CanvasElement} initialized canvas element + */ + createCanvasElement: function() { + return fabric.document.createElement('canvas'); + }, - case 'pc': - return number * fabric.DPI / 72 * 12; // or * 16 + /** + * Creates a canvas element that is a copy of another and is also painted + * @param {CanvasElement} canvas to copy size and content of + * @static + * @memberOf fabric.util + * @return {CanvasElement} initialized canvas element + */ + copyCanvasElement: function(canvas) { + var newCanvas = fabric.util.createCanvasElement(); + newCanvas.width = canvas.width; + newCanvas.height = canvas.height; + newCanvas.getContext('2d').drawImage(canvas, 0, 0); + return newCanvas; + }, - case 'em': - return number * fontSize; + /** + * since 2.6.0 moved from canvas instance to utility. + * @param {CanvasElement} canvasEl to copy size and content of + * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too + * @param {Number} quality <= 1 and > 0 + * @static + * @memberOf fabric.util + * @return {String} data url + */ + toDataURL: function(canvasEl, format, quality) { + return canvasEl.toDataURL('image/' + format, quality); + }, - default: - return number; - } - }, + /** + * Creates image element (works on client and node) + * @static + * @memberOf fabric.util + * @return {HTMLImageElement} HTML image element + */ + createImage: function() { + return fabric.document.createElement('img'); + }, - /** - * Function which always returns `false`. - * @static - * @memberOf fabric.util - * @return {Boolean} - */ - falseFunction: function() { - return false; - }, + /** + * Multiply matrix A by matrix B to nest transformations + * @static + * @memberOf fabric.util + * @param {Array} a First transformMatrix + * @param {Array} b Second transformMatrix + * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices + * @return {Array} The product of the two transform matrices + */ + multiplyTransformMatrices: function(a, b, is2x2) { + // Matrix multiply a * b + return [ + a[0] * b[0] + a[2] * b[1], + a[1] * b[0] + a[3] * b[1], + a[0] * b[2] + a[2] * b[3], + a[1] * b[2] + a[3] * b[3], + is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], + is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] + ]; + }, - /** - * Returns klass "Class" object of given namespace - * @memberOf fabric.util - * @param {String} type Type of object (eg. 'circle') - * @param {String} namespace Namespace to get klass "Class" object from - * @return {Object} klass "Class" - */ - getKlass: function(type, namespace) { - // capitalize first letter only - type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); - return fabric.util.resolveNamespace(namespace)[type]; - }, + /** + * Decomposes standard 2x3 matrix into transform components + * @static + * @memberOf fabric.util + * @param {Array} a transformMatrix + * @return {Object} Components of transform + */ + qrDecompose: function(a) { + var angle = atan2(a[1], a[0]), + denom = pow(a[0], 2) + pow(a[1], 2), + scaleX = sqrt(denom), + scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, + skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); + return { + angle: angle / PiBy180, + scaleX: scaleX, + scaleY: scaleY, + skewX: skewX / PiBy180, + skewY: 0, + translateX: a[4], + translateY: a[5] + }; + }, - /** - * Returns array of attributes for given svg that fabric parses - * @memberOf fabric.util - * @param {String} type Type of svg element (eg. 'circle') - * @return {Array} string names of supported attributes - */ - getSvgAttributes: function(type) { - var attributes = [ - 'instantiated_by_use', - 'style', - 'id', - 'class' - ]; - switch (type) { - case 'linearGradient': - attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); - break; - case 'radialGradient': - attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); - break; - case 'stop': - attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); - break; - } - return attributes; - }, + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.angle] angle in degrees + * @return {Number[]} transform matrix + */ + calcRotateMatrix: function(options) { + if (!options.angle) { + return fabric.iMatrix.concat(); + } + var theta = fabric.util.degreesToRadians(options.angle), + cos = fabric.util.cos(theta), + sin = fabric.util.sin(theta); + return [cos, sin, -sin, cos, 0, 0]; + }, - /** - * Returns object of given namespace - * @memberOf fabric.util - * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric' - * @return {Object} Object for given namespace (default fabric) - */ - resolveNamespace: function(namespace) { - if (!namespace) { - return fabric; - } + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet. + * is called DimensionsTransformMatrix because those properties are the one that influence + * the size of the resulting box of the object. + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.scaleX] + * @param {Number} [options.scaleY] + * @param {Boolean} [options.flipX] + * @param {Boolean} [options.flipY] + * @param {Number} [options.skewX] + * @param {Number} [options.skewY] + * @return {Number[]} transform matrix + */ + calcDimensionsMatrix: function(options) { + var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, + scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, + scaleMatrix = [ + options.flipX ? -scaleX : scaleX, + 0, + 0, + options.flipY ? -scaleY : scaleY, + 0, + 0], + multiply = fabric.util.multiplyTransformMatrices, + degreesToRadians = fabric.util.degreesToRadians; + if (options.skewX) { + scaleMatrix = multiply( + scaleMatrix, + [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], + true); + } + if (options.skewY) { + scaleMatrix = multiply( + scaleMatrix, + [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], + true); + } + return scaleMatrix; + }, + + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.angle] + * @param {Number} [options.scaleX] + * @param {Number} [options.scaleY] + * @param {Boolean} [options.flipX] + * @param {Boolean} [options.flipY] + * @param {Number} [options.skewX] + * @param {Number} [options.skewX] + * @param {Number} [options.translateX] + * @param {Number} [options.translateY] + * @return {Number[]} transform matrix + */ + composeMatrix: function(options) { + var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], + multiply = fabric.util.multiplyTransformMatrices; + if (options.angle) { + matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); + } + if (options.scaleX !== 1 || options.scaleY !== 1 || + options.skewX || options.skewY || options.flipX || options.flipY) { + matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); + } + return matrix; + }, + + /** + * reset an object transform state to neutral. Top and left are not accounted for + * @static + * @memberOf fabric.util + * @param {fabric.Object} target object to transform + */ + resetObjectTransform: function (target) { + target.scaleX = 1; + target.scaleY = 1; + target.skewX = 0; + target.skewY = 0; + target.flipX = false; + target.flipY = false; + target.rotate(0); + }, + + /** + * Extract Object transform values + * @static + * @memberOf fabric.util + * @param {fabric.Object} target object to read from + * @return {Object} Components of transform + */ + saveObjectTransform: function (target) { + return { + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + angle: target.angle, + left: target.left, + flipX: target.flipX, + flipY: target.flipY, + top: target.top + }; + }, - var parts = namespace.split('.'), - len = parts.length, i, - obj = global || fabric.window; + /** + * Returns true if context has transparent pixel + * at specified location (taking tolerance into account) + * @param {CanvasRenderingContext2D} ctx context + * @param {Number} x x coordinate + * @param {Number} y y coordinate + * @param {Number} tolerance Tolerance + */ + isTransparent: function(ctx, x, y, tolerance) { - for (i = 0; i < len; ++i) { - obj = obj[parts[i]]; + // If tolerance is > 0 adjust start coords to take into account. + // If moves off Canvas fix to 0 + if (tolerance > 0) { + if (x > tolerance) { + x -= tolerance; } + else { + x = 0; + } + if (y > tolerance) { + y -= tolerance; + } + else { + y = 0; + } + } - return obj; - }, + var _isTransparent = true, i, temp, + imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), + l = imageData.data.length; - /** - * Loads image element from given url and resolve it, or catch. - * @memberOf fabric.util - * @param {String} url URL representing an image - * @param {Object} [options] image loading options - * @param {string} [options.crossOrigin] cors value for the image loading, default to anonymous - * @param {Promise} img the loaded image. - */ - loadImage: function(url, options) { - return new Promise(function(resolve, reject) { - var img = fabric.util.createImage(); - var done = function() { - img.onload = img.onerror = null; - resolve(img); - }; - if (!url) { - done(); - } - else { - img.onload = done; - img.onerror = function () { - reject(new Error('Error loading ' + img.src)); - }; - options && options.crossOrigin && (img.crossOrigin = options.crossOrigin); - img.src = url; - } - }); - }, + // Split image data - for tolerance > 1, pixelDataSize = 4; + for (i = 3; i < l; i += 4) { + temp = imageData.data[i]; + _isTransparent = temp <= 0; + if (_isTransparent === false) { + break; // Stop if colour found + } + } - /** - * Creates corresponding fabric instances from their object representations - * @static - * @memberOf fabric.util - * @param {Object[]} objects Objects to enliven - * @param {String} namespace Namespace to get klass "Class" object from - * @param {Function} reviver Method for further parsing of object elements, - * called after each fabric object created. - */ - enlivenObjects: function(objects, namespace, reviver) { - return Promise.all(objects.map(function(obj) { - var klass = fabric.util.getKlass(obj.type, namespace); - return klass.fromObject(obj).then(function(fabricInstance) { - reviver && reviver(obj, fabricInstance); - return fabricInstance; - }); - })); - }, + imageData = null; - /** - * Creates corresponding fabric instances residing in an object, e.g. `clipPath` - * @param {Object} object with properties to enlive ( fill, stroke, clipPath, path ) - * @returns {Promise} the input object with enlived values - */ + return _isTransparent; + }, - enlivenObjectEnlivables: function (serializedObject) { - // enlive every possible property - var promises = Object.values(serializedObject).map(function(value) { - if (!value) { - return value; - } - if (value.colorStops) { - return new fabric.Gradient(value); - } - if (value.type) { - return fabric.util.enlivenObjects([value]).then(function (enlived) { - return enlived[0]; - }); - } - if (value.source) { - return fabric.Pattern.fromObject(value); - } - return value; - }); - var keys = Object.keys(serializedObject); - return Promise.all(promises).then(function(enlived) { - return enlived.reduce(function(acc, instance, index) { - acc[keys[index]] = instance; - return acc; - }, {}); - }); - }, + /** + * Parse preserveAspectRatio attribute from element + * @param {string} attribute to be parsed + * @return {Object} an object containing align and meetOrSlice attribute + */ + parsePreserveAspectRatioAttribute: function(attribute) { + var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', + aspectRatioAttrs = attribute.split(' '), align; - /** - * Groups SVG elements (usually those retrieved from SVG document) - * @static - * @memberOf fabric.util - * @param {Array} elements SVG elements to group - * @return {fabric.Object|fabric.Group} - */ - groupSVGElements: function(elements) { - if (elements && elements.length === 1) { - return elements[0]; + if (aspectRatioAttrs && aspectRatioAttrs.length) { + meetOrSlice = aspectRatioAttrs.pop(); + if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { + align = meetOrSlice; + meetOrSlice = 'meet'; } - return new fabric.Group(elements); - }, - - /** - * Populates an object with properties of another object - * @static - * @memberOf fabric.util - * @param {Object} source Source object - * @param {Object} destination Destination object - * @return {Array} properties Properties names to include - */ - populateWithProperties: function(source, destination, properties) { - if (properties && Array.isArray(properties)) { - for (var i = 0, len = properties.length; i < len; i++) { - if (properties[i] in source) { - destination[properties[i]] = source[properties[i]]; - } - } + else if (aspectRatioAttrs.length) { + align = aspectRatioAttrs.pop(); } - }, - - /** - * Creates canvas element - * @static - * @memberOf fabric.util - * @return {CanvasElement} initialized canvas element - */ - createCanvasElement: function() { - return fabric.document.createElement('canvas'); - }, + } + //divide align in alignX and alignY + alignX = align !== 'none' ? align.slice(1, 4) : 'none'; + alignY = align !== 'none' ? align.slice(5, 8) : 'none'; + return { + meetOrSlice: meetOrSlice, + alignX: alignX, + alignY: alignY + }; + }, - /** - * Creates a canvas element that is a copy of another and is also painted - * @param {CanvasElement} canvas to copy size and content of - * @static - * @memberOf fabric.util - * @return {CanvasElement} initialized canvas element - */ - copyCanvasElement: function(canvas) { - var newCanvas = fabric.util.createCanvasElement(); - newCanvas.width = canvas.width; - newCanvas.height = canvas.height; - newCanvas.getContext('2d').drawImage(canvas, 0, 0); - return newCanvas; - }, + /** + * Clear char widths cache for the given font family or all the cache if no + * fontFamily is specified. + * Use it if you know you are loading fonts in a lazy way and you are not waiting + * for custom fonts to load properly when adding text objects to the canvas. + * If a text object is added when its own font is not loaded yet, you will get wrong + * measurement and so wrong bounding boxes. + * After the font cache is cleared, either change the textObject text content or call + * initDimensions() to trigger a recalculation + * @memberOf fabric.util + * @param {String} [fontFamily] font family to clear + */ + clearFabricFontCache: function(fontFamily) { + fontFamily = (fontFamily || '').toLowerCase(); + if (!fontFamily) { + fabric.charWidthsCache = { }; + } + else if (fabric.charWidthsCache[fontFamily]) { + delete fabric.charWidthsCache[fontFamily]; + } + }, - /** - * since 2.6.0 moved from canvas instance to utility. - * @param {CanvasElement} canvasEl to copy size and content of - * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too - * @param {Number} quality <= 1 and > 0 - * @static - * @memberOf fabric.util - * @return {String} data url - */ - toDataURL: function(canvasEl, format, quality) { - return canvasEl.toDataURL('image/' + format, quality); - }, + /** + * Given current aspect ratio, determines the max width and height that can + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Number} ar aspect ratio + * @param {Number} maximumArea Maximum area you want to achieve + * @return {Object.x} Limited dimensions by X + * @return {Object.y} Limited dimensions by Y + */ + limitDimsByArea: function(ar, maximumArea) { + var roughWidth = Math.sqrt(maximumArea * ar), + perfLimitSizeY = Math.floor(maximumArea / roughWidth); + return { x: Math.floor(roughWidth), y: perfLimitSizeY }; + }, - /** - * Creates image element (works on client and node) - * @static - * @memberOf fabric.util - * @return {HTMLImageElement} HTML image element - */ - createImage: function() { - return fabric.document.createElement('img'); - }, + capValue: function(min, value, max) { + return Math.max(min, Math.min(value, max)); + }, - /** - * Multiply matrix A by matrix B to nest transformations - * @static - * @memberOf fabric.util - * @param {Array} a First transformMatrix - * @param {Array} b Second transformMatrix - * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices - * @return {Array} The product of the two transform matrices - */ - multiplyTransformMatrices: function(a, b, is2x2) { - // Matrix multiply a * b - return [ - a[0] * b[0] + a[2] * b[1], - a[1] * b[0] + a[3] * b[1], - a[0] * b[2] + a[2] * b[3], - a[1] * b[2] + a[3] * b[3], - is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], - is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] - ]; - }, + /** + * Finds the scale for the object source to fit inside the object destination, + * keeping aspect ratio intact. + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Object | fabric.Object} source + * @param {Number} source.height natural unscaled height of the object + * @param {Number} source.width natural unscaled width of the object + * @param {Object | fabric.Object} destination + * @param {Number} destination.height natural unscaled height of the object + * @param {Number} destination.width natural unscaled width of the object + * @return {Number} scale factor to apply to source to fit into destination + */ + findScaleToFit: function(source, destination) { + return Math.min(destination.width / source.width, destination.height / source.height); + }, + + /** + * Finds the scale for the object source to cover entirely the object destination, + * keeping aspect ratio intact. + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Object | fabric.Object} source + * @param {Number} source.height natural unscaled height of the object + * @param {Number} source.width natural unscaled width of the object + * @param {Object | fabric.Object} destination + * @param {Number} destination.height natural unscaled height of the object + * @param {Number} destination.width natural unscaled width of the object + * @return {Number} scale factor to apply to source to cover destination + */ + findScaleToCover: function(source, destination) { + return Math.max(destination.width / source.width, destination.height / source.height); + }, - /** - * Decomposes standard 2x3 matrix into transform components - * @static - * @memberOf fabric.util - * @param {Array} a transformMatrix - * @return {Object} Components of transform - */ - qrDecompose: function(a) { - var angle = atan2(a[1], a[0]), - denom = pow(a[0], 2) + pow(a[1], 2), - scaleX = sqrt(denom), - scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, - skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); - return { - angle: angle / PiBy180, - scaleX: scaleX, - scaleY: scaleY, - skewX: skewX / PiBy180, - skewY: 0, - translateX: a[4], - translateY: a[5] - }; - }, + /** + * given an array of 6 number returns something like `"matrix(...numbers)"` + * @memberOf fabric.util + * @param {Array} transform an array with 6 numbers + * @return {String} transform matrix for svg + * @return {Object.y} Limited dimensions by Y + */ + matrixToSVG: function(transform) { + return 'matrix(' + transform.map(function(value) { + return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); + }).join(' ') + ')'; + }, + + /** + * given an object and a transform, apply the inverse transform to the object, + * this is equivalent to remove from that object that transformation, so that + * added in a space with the removed transform, the object will be the same as before. + * Removing from an object a transform that scale by 2 is like scaling it by 1/2. + * Removing from an object a transfrom that rotate by 30deg is like rotating by 30deg + * in the opposite direction. + * This util is used to add objects inside transformed groups or nested groups. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + removeTransformFromObject: function(object, transform) { + var inverted = fabric.util.invertTransform(transform), + finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); + fabric.util.applyTransformToObject(object, finalTransform); + }, - /** - * Returns a transform matrix starting from an object of the same kind of - * the one returned from qrDecompose, useful also if you want to calculate some - * transformations from an object that is not enlived yet - * @static - * @memberOf fabric.util - * @param {Object} options - * @param {Number} [options.angle] angle in degrees - * @return {Number[]} transform matrix - */ - calcRotateMatrix: function(options) { - if (!options.angle) { - return fabric.iMatrix.concat(); - } - var theta = fabric.util.degreesToRadians(options.angle), - cos = fabric.util.cos(theta), - sin = fabric.util.sin(theta); - return [cos, sin, -sin, cos, 0, 0]; - }, + /** + * given an object and a transform, apply the transform to the object. + * this is equivalent to change the space where the object is drawn. + * Adding to an object a transform that scale by 2 is like scaling it by 2. + * This is used when removing an object from an active selection for example. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + addTransformToObject: function(object, transform) { + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) + ); + }, - /** - * Returns a transform matrix starting from an object of the same kind of - * the one returned from qrDecompose, useful also if you want to calculate some - * transformations from an object that is not enlived yet. - * is called DimensionsTransformMatrix because those properties are the one that influence - * the size of the resulting box of the object. - * @static - * @memberOf fabric.util - * @param {Object} options - * @param {Number} [options.scaleX] - * @param {Number} [options.scaleY] - * @param {Boolean} [options.flipX] - * @param {Boolean} [options.flipY] - * @param {Number} [options.skewX] - * @param {Number} [options.skewY] - * @return {Number[]} transform matrix - */ - calcDimensionsMatrix: function(options) { - var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, - scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, - scaleMatrix = [ - options.flipX ? -scaleX : scaleX, - 0, - 0, - options.flipY ? -scaleY : scaleY, - 0, - 0], - multiply = fabric.util.multiplyTransformMatrices, - degreesToRadians = fabric.util.degreesToRadians; - if (options.skewX) { - scaleMatrix = multiply( - scaleMatrix, - [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], - true); - } - if (options.skewY) { - scaleMatrix = multiply( - scaleMatrix, - [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], - true); - } - return scaleMatrix; - }, + /** + * discard an object transform state and apply the one from the matrix. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + applyTransformToObject: function(object, transform) { + var options = fabric.util.qrDecompose(transform), + center = new fabric.Point(options.translateX, options.translateY); + object.flipX = false; + object.flipY = false; + object.set('scaleX', options.scaleX); + object.set('scaleY', options.scaleY); + object.skewX = options.skewX; + object.skewY = options.skewY; + object.angle = options.angle; + object.setPositionByOrigin(center, 'center', 'center'); + }, + + /** + * given a width and height, return the size of the bounding box + * that can contains the box with width/height with applied transform + * described in options. + * Use to calculate the boxes around objects for controls. + * @memberOf fabric.util + * @param {Number} width + * @param {Number} height + * @param {Object} options + * @param {Number} options.scaleX + * @param {Number} options.scaleY + * @param {Number} options.skewX + * @param {Number} options.skewY + * @return {Object.x} width of containing + * @return {Object.y} height of containing + */ + sizeAfterTransform: function(width, height, options) { + var dimX = width / 2, dimY = height / 2, + points = [ + { + x: -dimX, + y: -dimY + }, + { + x: dimX, + y: -dimY + }, + { + x: -dimX, + y: dimY + }, + { + x: dimX, + y: dimY + }], + transformMatrix = fabric.util.calcDimensionsMatrix(options), + bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); + return { + x: bbox.width, + y: bbox.height, + }; + }, - /** - * Returns a transform matrix starting from an object of the same kind of - * the one returned from qrDecompose, useful also if you want to calculate some - * transformations from an object that is not enlived yet - * @static - * @memberOf fabric.util - * @param {Object} options - * @param {Number} [options.angle] - * @param {Number} [options.scaleX] - * @param {Number} [options.scaleY] - * @param {Boolean} [options.flipX] - * @param {Boolean} [options.flipY] - * @param {Number} [options.skewX] - * @param {Number} [options.skewX] - * @param {Number} [options.translateX] - * @param {Number} [options.translateY] - * @return {Number[]} transform matrix - */ - composeMatrix: function(options) { - var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], - multiply = fabric.util.multiplyTransformMatrices; - if (options.angle) { - matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); - } - if (options.scaleX !== 1 || options.scaleY !== 1 || - options.skewX || options.skewY || options.flipX || options.flipY) { - matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); - } - return matrix; - }, + /** + * Merges 2 clip paths into one visually equal clip path + * + * **IMPORTANT**:\ + * Does **NOT** clone the arguments, clone them proir if necessary. + * + * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap. + * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible. + * + * In order to handle the `inverted` property we follow logic described in the following cases:\ + * **(1)** both clip paths are inverted - the clip paths pass the inverted prop to the wrapper and loose it themselves.\ + * **(2)** one is inverted and the other isn't - the wrapper shouldn't become inverted and the inverted clip path must clip the non inverted one to produce an identical visual effect.\ + * **(3)** both clip paths are not inverted - wrapper and clip paths remain unchanged. + * + * @memberOf fabric.util + * @param {fabric.Object} c1 + * @param {fabric.Object} c2 + * @returns {fabric.Object} merged clip path + */ + mergeClipPaths: function (c1, c2) { + var a = c1, b = c2; + if (a.inverted && !b.inverted) { + // case (2) + a = c2; + b = c1; + } + // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane + fabric.util.applyTransformToObject( + b, + fabric.util.multiplyTransformMatrices( + fabric.util.invertTransform(a.calcTransformMatrix()), + b.calcTransformMatrix() + ) + ); + // assign the `inverted` prop to the wrapping group + var inverted = a.inverted && b.inverted; + if (inverted) { + // case (1) + a.inverted = b.inverted = false; + } + return new fabric.Group([a], { clipPath: b, inverted: inverted }); + }, + }; +})(typeof exports !== 'undefined' ? exports : this); + + +(function() { + var _join = Array.prototype.join, + commandLengths = { + m: 2, + l: 2, + h: 1, + v: 1, + c: 6, + s: 4, + q: 4, + t: 2, + a: 7 + }, + repeatedCommands = { + m: 'l', + M: 'L' + }; + function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { + var costh2 = fabric.util.cos(th2), + sinth2 = fabric.util.sin(th2), + costh3 = fabric.util.cos(th3), + sinth3 = fabric.util.sin(th3), + toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, + toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, + cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), + cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), + cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), + cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); + + return ['C', + cp1X, cp1Y, + cp2X, cp2Y, + toX, toY + ]; + } - /** - * reset an object transform state to neutral. Top and left are not accounted for - * @static - * @memberOf fabric.util - * @param {fabric.Object} target object to transform - */ - resetObjectTransform: function (target) { - target.scaleX = 1; - target.scaleY = 1; - target.skewX = 0; - target.skewY = 0; - target.flipX = false; - target.flipY = false; - target.rotate(0); - }, + /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp + * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here + * http://mozilla.org/MPL/2.0/ + */ + function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { + var PI = Math.PI, th = rotateX * PI / 180, + sinTh = fabric.util.sin(th), + cosTh = fabric.util.cos(th), + fromX = 0, fromY = 0; + + rx = Math.abs(rx); + ry = Math.abs(ry); + + var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, + py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, + rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, + pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, + root = 0; + + if (pl < 0) { + var s = Math.sqrt(1 - pl / (rx2 * ry2)); + rx *= s; + ry *= s; + } + else { + root = (large === sweep ? -1.0 : 1.0) * + Math.sqrt( pl / (rx2 * py2 + ry2 * px2)); + } - /** - * Extract Object transform values - * @static - * @memberOf fabric.util - * @param {fabric.Object} target object to read from - * @return {Object} Components of transform - */ - saveObjectTransform: function (target) { - return { - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - angle: target.angle, - left: target.left, - flipX: target.flipX, - flipY: target.flipY, - top: target.top - }; - }, + var cx = root * rx * py / ry, + cy = -root * ry * px / rx, + cx1 = cosTh * cx - sinTh * cy + toX * 0.5, + cy1 = sinTh * cx + cosTh * cy + toY * 0.5, + mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), + dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); - /** - * Returns true if context has transparent pixel - * at specified location (taking tolerance into account) - * @param {CanvasRenderingContext2D} ctx context - * @param {Number} x x coordinate - * @param {Number} y y coordinate - * @param {Number} tolerance Tolerance - */ - isTransparent: function(ctx, x, y, tolerance) { + if (sweep === 0 && dtheta > 0) { + dtheta -= 2 * PI; + } + else if (sweep === 1 && dtheta < 0) { + dtheta += 2 * PI; + } - // If tolerance is > 0 adjust start coords to take into account. - // If moves off Canvas fix to 0 - if (tolerance > 0) { - if (x > tolerance) { - x -= tolerance; - } - else { - x = 0; - } - if (y > tolerance) { - y -= tolerance; - } - else { - y = 0; - } - } + // Convert into cubic bezier segments <= 90deg + var segments = Math.ceil(Math.abs(dtheta / PI * 2)), + result = [], mDelta = dtheta / segments, + mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), + th3 = mTheta + mDelta; + + for (var i = 0; i < segments; i++) { + result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); + fromX = result[i][5]; + fromY = result[i][6]; + mTheta = th3; + th3 += mDelta; + } + return result; + } - var _isTransparent = true, i, temp, - imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), - l = imageData.data.length; + /* + * Private + */ + function calcVectorAngle(ux, uy, vx, vy) { + var ta = Math.atan2(uy, ux), + tb = Math.atan2(vy, vx); + if (tb >= ta) { + return tb - ta; + } + else { + return 2 * Math.PI - (ta - tb); + } + } - // Split image data - for tolerance > 1, pixelDataSize = 4; - for (i = 3; i < l; i += 4) { - temp = imageData.data[i]; - _isTransparent = temp <= 0; - if (_isTransparent === false) { - break; // Stop if colour found - } - } + /** + * Calculate bounding box of a beziercurve + * @param {Number} x0 starting point + * @param {Number} y0 + * @param {Number} x1 first control point + * @param {Number} y1 + * @param {Number} x2 secondo control point + * @param {Number} y2 + * @param {Number} x3 end of bezier + * @param {Number} y3 + */ + // taken from http://jsbin.com/ivomiq/56/edit no credits available for that. + // TODO: can we normalize this with the starting points set at 0 and then translated the bbox? + function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { + var argsString; + if (fabric.cachesBoundsOfCurve) { + argsString = _join.call(arguments); + if (fabric.boundsOfCurveCache[argsString]) { + return fabric.boundsOfCurveCache[argsString]; + } + } - imageData = null; + var sqrt = Math.sqrt, + min = Math.min, max = Math.max, + abs = Math.abs, tvalues = [], + bounds = [[], []], + a, b, c, t, t1, t2, b2ac, sqrtb2ac; - return _isTransparent; - }, + b = 6 * x0 - 12 * x1 + 6 * x2; + a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; + c = 3 * x1 - 3 * x0; - /** - * Parse preserveAspectRatio attribute from element - * @param {string} attribute to be parsed - * @return {Object} an object containing align and meetOrSlice attribute - */ - parsePreserveAspectRatioAttribute: function(attribute) { - var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', - aspectRatioAttrs = attribute.split(' '), align; - - if (aspectRatioAttrs && aspectRatioAttrs.length) { - meetOrSlice = aspectRatioAttrs.pop(); - if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { - align = meetOrSlice; - meetOrSlice = 'meet'; - } - else if (aspectRatioAttrs.length) { - align = aspectRatioAttrs.pop(); - } - } - //divide align in alignX and alignY - alignX = align !== 'none' ? align.slice(1, 4) : 'none'; - alignY = align !== 'none' ? align.slice(5, 8) : 'none'; - return { - meetOrSlice: meetOrSlice, - alignX: alignX, - alignY: alignY - }; - }, + for (var i = 0; i < 2; ++i) { + if (i > 0) { + b = 6 * y0 - 12 * y1 + 6 * y2; + a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; + c = 3 * y1 - 3 * y0; + } - /** - * Clear char widths cache for the given font family or all the cache if no - * fontFamily is specified. - * Use it if you know you are loading fonts in a lazy way and you are not waiting - * for custom fonts to load properly when adding text objects to the canvas. - * If a text object is added when its own font is not loaded yet, you will get wrong - * measurement and so wrong bounding boxes. - * After the font cache is cleared, either change the textObject text content or call - * initDimensions() to trigger a recalculation - * @memberOf fabric.util - * @param {String} [fontFamily] font family to clear - */ - clearFabricFontCache: function(fontFamily) { - fontFamily = (fontFamily || '').toLowerCase(); - if (!fontFamily) { - fabric.charWidthsCache = { }; + if (abs(a) < 1e-12) { + if (abs(b) < 1e-12) { + continue; } - else if (fabric.charWidthsCache[fontFamily]) { - delete fabric.charWidthsCache[fontFamily]; + t = -c / b; + if (0 < t && t < 1) { + tvalues.push(t); } - }, + continue; + } + b2ac = b * b - 4 * c * a; + if (b2ac < 0) { + continue; + } + sqrtb2ac = sqrt(b2ac); + t1 = (-b + sqrtb2ac) / (2 * a); + if (0 < t1 && t1 < 1) { + tvalues.push(t1); + } + t2 = (-b - sqrtb2ac) / (2 * a); + if (0 < t2 && t2 < 1) { + tvalues.push(t2); + } + } - /** - * Given current aspect ratio, determines the max width and height that can - * respect the total allowed area for the cache. - * @memberOf fabric.util - * @param {Number} ar aspect ratio - * @param {Number} maximumArea Maximum area you want to achieve - * @return {Object.x} Limited dimensions by X - * @return {Object.y} Limited dimensions by Y - */ - limitDimsByArea: function(ar, maximumArea) { - var roughWidth = Math.sqrt(maximumArea * ar), - perfLimitSizeY = Math.floor(maximumArea / roughWidth); - return { x: Math.floor(roughWidth), y: perfLimitSizeY }; - }, + var x, y, j = tvalues.length, jlen = j, mt; + while (j--) { + t = tvalues[j]; + mt = 1 - t; + x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); + bounds[0][j] = x; - capValue: function(min, value, max) { - return Math.max(min, Math.min(value, max)); - }, + y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); + bounds[1][j] = y; + } - /** - * Finds the scale for the object source to fit inside the object destination, - * keeping aspect ratio intact. - * respect the total allowed area for the cache. - * @memberOf fabric.util - * @param {Object | fabric.Object} source - * @param {Number} source.height natural unscaled height of the object - * @param {Number} source.width natural unscaled width of the object - * @param {Object | fabric.Object} destination - * @param {Number} destination.height natural unscaled height of the object - * @param {Number} destination.width natural unscaled width of the object - * @return {Number} scale factor to apply to source to fit into destination - */ - findScaleToFit: function(source, destination) { - return Math.min(destination.width / source.width, destination.height / source.height); - }, - - /** - * Finds the scale for the object source to cover entirely the object destination, - * keeping aspect ratio intact. - * respect the total allowed area for the cache. - * @memberOf fabric.util - * @param {Object | fabric.Object} source - * @param {Number} source.height natural unscaled height of the object - * @param {Number} source.width natural unscaled width of the object - * @param {Object | fabric.Object} destination - * @param {Number} destination.height natural unscaled height of the object - * @param {Number} destination.width natural unscaled width of the object - * @return {Number} scale factor to apply to source to cover destination - */ - findScaleToCover: function(source, destination) { - return Math.max(destination.width / source.width, destination.height / source.height); - }, - - /** - * given an array of 6 number returns something like `"matrix(...numbers)"` - * @memberOf fabric.util - * @param {Array} transform an array with 6 numbers - * @return {String} transform matrix for svg - * @return {Object.y} Limited dimensions by Y - */ - matrixToSVG: function(transform) { - return 'matrix(' + transform.map(function(value) { - return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); - }).join(' ') + ')'; - }, - - /** - * given an object and a transform, apply the inverse transform to the object, - * this is equivalent to remove from that object that transformation, so that - * added in a space with the removed transform, the object will be the same as before. - * Removing from an object a transform that scale by 2 is like scaling it by 1/2. - * Removing from an object a transform that rotate by 30deg is like rotating by 30deg - * in the opposite direction. - * This util is used to add objects inside transformed groups or nested groups. - * @memberOf fabric.util - * @param {fabric.Object} object the object you want to transform - * @param {Array} transform the destination transform - */ - removeTransformFromObject: function(object, transform) { - var inverted = fabric.util.invertTransform(transform), - finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); - fabric.util.applyTransformToObject(object, finalTransform); + bounds[0][jlen] = x0; + bounds[1][jlen] = y0; + bounds[0][jlen + 1] = x3; + bounds[1][jlen + 1] = y3; + var result = [ + { + x: min.apply(null, bounds[0]), + y: min.apply(null, bounds[1]) }, + { + x: max.apply(null, bounds[0]), + y: max.apply(null, bounds[1]) + } + ]; + if (fabric.cachesBoundsOfCurve) { + fabric.boundsOfCurveCache[argsString] = result; + } + return result; + } - /** - * given an object and a transform, apply the transform to the object. - * this is equivalent to change the space where the object is drawn. - * Adding to an object a transform that scale by 2 is like scaling it by 2. - * This is used when removing an object from an active selection for example. - * @memberOf fabric.util - * @param {fabric.Object} object the object you want to transform - * @param {Array} transform the destination transform - */ - addTransformToObject: function(object, transform) { - fabric.util.applyTransformToObject( - object, - fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) - ); - }, + /** + * Converts arc to a bunch of bezier curves + * @param {Number} fx starting point x + * @param {Number} fy starting point y + * @param {Array} coords Arc command + */ + function fromArcToBeziers(fx, fy, coords) { + var rx = coords[1], + ry = coords[2], + rot = coords[3], + large = coords[4], + sweep = coords[5], + tx = coords[6], + ty = coords[7], + segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); + + for (var i = 0, len = segsNorm.length; i < len; i++) { + segsNorm[i][1] += fx; + segsNorm[i][2] += fy; + segsNorm[i][3] += fx; + segsNorm[i][4] += fy; + segsNorm[i][5] += fx; + segsNorm[i][6] += fy; + } + return segsNorm; + }; - /** - * discard an object transform state and apply the one from the matrix. - * @memberOf fabric.util - * @param {fabric.Object} object the object you want to transform - * @param {Array} transform the destination transform - */ - applyTransformToObject: function(object, transform) { - var options = fabric.util.qrDecompose(transform), - center = new fabric.Point(options.translateX, options.translateY); - object.flipX = false; - object.flipY = false; - object.set('scaleX', options.scaleX); - object.set('scaleY', options.scaleY); - object.skewX = options.skewX; - object.skewY = options.skewY; - object.angle = options.angle; - object.setPositionByOrigin(center, 'center', 'center'); - }, + /** + * This function take a parsed SVG path and make it simpler for fabricJS logic. + * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute ) + * S converted in C, T converted in Q, A converted in C. + * @param {Array} path the array of commands of a parsed svg path for fabric.Path + * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path + */ + function makePathSimpler(path) { + // x and y represent the last point of the path. the previous command point. + // we add them to each relative command to make it an absolute comment. + // we also swap the v V h H with L, because are easier to transform. + var x = 0, y = 0, len = path.length, + // x1 and y1 represent the last point of the subpath. the subpath is started with + // m or M command. When a z or Z command is drawn, x and y need to be resetted to + // the last x1 and y1. + x1 = 0, y1 = 0, current, i, converted, + // previous will host the letter of the previous command, to handle S and T. + // controlX and controlY will host the previous reflected control point + destinationPath = [], previous, controlX, controlY; + for (i = 0; i < len; ++i) { + converted = false; + current = path[i].slice(0); + switch (current[0]) { // first letter + case 'l': // lineto, relative + current[0] = 'L'; + current[1] += x; + current[2] += y; + // falls through + case 'L': + x = current[1]; + y = current[2]; + break; + case 'h': // horizontal lineto, relative + current[1] += x; + // falls through + case 'H': + current[0] = 'L'; + current[2] = y; + x = current[1]; + break; + case 'v': // vertical lineto, relative + current[1] += y; + // falls through + case 'V': + current[0] = 'L'; + y = current[1]; + current[1] = x; + current[2] = y; + break; + case 'm': // moveTo, relative + current[0] = 'M'; + current[1] += x; + current[2] += y; + // falls through + case 'M': + x = current[1]; + y = current[2]; + x1 = current[1]; + y1 = current[2]; + break; + case 'c': // bezierCurveTo, relative + current[0] = 'C'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + current[5] += x; + current[6] += y; + // falls through + case 'C': + controlX = current[3]; + controlY = current[4]; + x = current[5]; + y = current[6]; + break; + case 's': // shorthand cubic bezierCurveTo, relative + current[0] = 'S'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'S': + // would be sScC but since we are swapping sSc for C, we check just that. + if (previous === 'C') { + // calculate reflection of previous control points + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a C, c, S, or s, + // the control point is coincident with the current point + controlX = x; + controlY = y; + } + x = current[3]; + y = current[4]; + current[0] = 'C'; + current[5] = current[3]; + current[6] = current[4]; + current[3] = current[1]; + current[4] = current[2]; + current[1] = controlX; + current[2] = controlY; + // current[3] and current[4] are NOW the second control point. + // we keep it for the next reflection. + controlX = current[3]; + controlY = current[4]; + break; + case 'q': // quadraticCurveTo, relative + current[0] = 'Q'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'Q': + controlX = current[1]; + controlY = current[2]; + x = current[3]; + y = current[4]; + break; + case 't': // shorthand quadraticCurveTo, relative + current[0] = 'T'; + current[1] += x; + current[2] += y; + // falls through + case 'T': + if (previous === 'Q') { + // calculate reflection of previous control point + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a Q, q, T or t, + // assume the control point is coincident with the current point + controlX = x; + controlY = y; + } + current[0] = 'Q'; + x = current[1]; + y = current[2]; + current[1] = controlX; + current[2] = controlY; + current[3] = x; + current[4] = y; + break; + case 'a': + current[0] = 'A'; + current[6] += x; + current[7] += y; + // falls through + case 'A': + converted = true; + destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); + x = current[6]; + y = current[7]; + break; + case 'z': + case 'Z': + x = x1; + y = y1; + break; + default: + } + if (!converted) { + destinationPath.push(current); + } + previous = current[0]; + } + return destinationPath; + }; - /** - * - * A util that abstracts applying transform to objects.\ - * Sends `object` to the destination coordinate plane by applying the relevant transformations.\ - * Changes the space/plane where `object` is drawn.\ - * From the canvas/viewer's perspective `object` remains unchanged. - * - * @example Move clip path from one object to another while preserving it's appearance as viewed by canvas/viewer - * let obj, obj2; - * let clipPath = new fabric.Circle({ radius: 50 }); - * obj.clipPath = clipPath; - * // render - * fabric.util.sendObjectToPlane(clipPath, obj.calcTransformMatrix(), obj2.calcTransformMatrix()); - * obj.clipPath = undefined; - * obj2.clipPath = clipPath; - * // render, clipPath now clips obj2 but seems unchanged from the eyes of the viewer - * - * @example Clip an object's clip path with an existing object - * let obj, existingObj; - * let clipPath = new fabric.Circle({ radius: 50 }); - * obj.clipPath = clipPath; - * let transformTo = fabric.util.multiplyTransformMatrices(obj.calcTransformMatrix(), clipPath.calcTransformMatrix()); - * fabric.util.sendObjectToPlane(existingObj, existingObj.group?.calcTransformMatrix(), transformTo); - * clipPath.clipPath = existingObj; - * - * @static - * @memberof fabric.util - * @param {fabric.Object} object - * @param {Matrix} [from] plane matrix containing object. Passing `null` is equivalent to passing the identity matrix, which means `object` is a direct child of canvas. - * @param {Matrix} [to] destination plane matrix to contain object. Passing `null` means `object` should be sent to the canvas coordinate plane. - * @returns {Matrix} the transform matrix that was applied to `object` - */ - sendObjectToPlane: function (object, from, to) { - // we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping) - // the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from) - var inv = fabric.util.invertTransform(to || fabric.iMatrix); - var t = fabric.util.multiplyTransformMatrices(inv, from || fabric.iMatrix); - fabric.util.applyTransformToObject( - object, - fabric.util.multiplyTransformMatrices(t, object.calcOwnMatrix()) - ); - return t; - }, + /** + * Calc length from point x1,y1 to x2,y2 + * @param {Number} x1 starting point x + * @param {Number} y1 starting point y + * @param {Number} x2 starting point x + * @param {Number} y2 starting point y + * @return {Number} length of segment + */ + function calcLineLength(x1, y1, x2, y2) { + return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); + } - /** - * given a width and height, return the size of the bounding box - * that can contains the box with width/height with applied transform - * described in options. - * Use to calculate the boxes around objects for controls. - * @memberOf fabric.util - * @param {Number} width - * @param {Number} height - * @param {Object} options - * @param {Number} options.scaleX - * @param {Number} options.scaleY - * @param {Number} options.skewX - * @param {Number} options.skewY - * @returns {fabric.Point} size - */ - sizeAfterTransform: function(width, height, options) { - var dimX = width / 2, dimY = height / 2, - points = [ - { - x: -dimX, - y: -dimY - }, - { - x: dimX, - y: -dimY - }, - { - x: -dimX, - y: dimY - }, - { - x: dimX, - y: dimY - }], - transformMatrix = fabric.util.calcDimensionsMatrix(options), - bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); - return new fabric.Point(bbox.width, bbox.height); - }, + // functions for the Cubic beizer + // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 + function CB1(t) { + return t * t * t; + } + function CB2(t) { + return 3 * t * t * (1 - t); + } + function CB3(t) { + return 3 * t * (1 - t) * (1 - t); + } + function CB4(t) { + return (1 - t) * (1 - t) * (1 - t); + } - /** - * Merges 2 clip paths into one visually equal clip path - * - * **IMPORTANT**:\ - * Does **NOT** clone the arguments, clone them proir if necessary. - * - * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap. - * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible. - * - * In order to handle the `inverted` property we follow logic described in the following cases:\ - * **(1)** both clip paths are inverted - the clip paths pass the inverted prop to the wrapper and loose it themselves.\ - * **(2)** one is inverted and the other isn't - the wrapper shouldn't become inverted and the inverted clip path must clip the non inverted one to produce an identical visual effect.\ - * **(3)** both clip paths are not inverted - wrapper and clip paths remain unchanged. - * - * @memberOf fabric.util - * @param {fabric.Object} c1 - * @param {fabric.Object} c2 - * @returns {fabric.Object} merged clip path - */ - mergeClipPaths: function (c1, c2) { - var a = c1, b = c2; - if (a.inverted && !b.inverted) { - // case (2) - a = c2; - b = c1; - } - // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane - fabric.util.applyTransformToObject( - b, - fabric.util.multiplyTransformMatrices( - fabric.util.invertTransform(a.calcTransformMatrix()), - b.calcTransformMatrix() - ) - ); - // assign the `inverted` prop to the wrapping group - var inverted = a.inverted && b.inverted; - if (inverted) { - // case (1) - a.inverted = b.inverted = false; - } - return new fabric.Group([a], { clipPath: b, inverted: inverted }); - }, + function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function(pct) { + var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); + return { + x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, + y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 + }; }; - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric, - _join = Array.prototype.join, - commandLengths = { - m: 2, - l: 2, - h: 1, - v: 1, - c: 6, - s: 4, - q: 4, - t: 2, - a: 7 - }, - repeatedCommands = { - m: 'l', - M: 'L' - }; - function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { - var costh2 = fabric.util.cos(th2), - sinth2 = fabric.util.sin(th2), - costh3 = fabric.util.cos(th3), - sinth3 = fabric.util.sin(th3), - toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, - toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, - cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), - cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), - cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), - cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); - - return ['C', - cp1X, cp1Y, - cp2X, cp2Y, - toX, toY - ]; - } + } - /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp - * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here - * http://mozilla.org/MPL/2.0/ - */ - function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { - var PI = Math.PI, th = rotateX * PI / 180, - sinTh = fabric.util.sin(th), - cosTh = fabric.util.cos(th), - fromX = 0, fromY = 0; + function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + + (3 * pct * pct * (p4x - p3x)), + tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + + (3 * pct * pct * (p4y - p3y)); + return Math.atan2(tangentY, tangentX); + }; + } - rx = Math.abs(rx); - ry = Math.abs(ry); + function QB1(t) { + return t * t; + } - var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, - py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, - rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, - pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, - root = 0; + function QB2(t) { + return 2 * t * (1 - t); + } - if (pl < 0) { - var s = Math.sqrt(1 - pl / (rx2 * ry2)); - rx *= s; - ry *= s; - } - else { - root = (large === sweep ? -1.0 : 1.0) * - Math.sqrt( pl / (rx2 * py2 + ry2 * px2)); - } + function QB3(t) { + return (1 - t) * (1 - t); + } - var cx = root * rx * py / ry, - cy = -root * ry * px / rx, - cx1 = cosTh * cx - sinTh * cy + toX * 0.5, - cy1 = sinTh * cx + cosTh * cy + toY * 0.5, - mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), - dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); + function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function(pct) { + var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); + return { + x: p3x * c1 + p2x * c2 + p1x * c3, + y: p3y * c1 + p2y * c2 + p1y * c3 + }; + }; + } - if (sweep === 0 && dtheta > 0) { - dtheta -= 2 * PI; - } - else if (sweep === 1 && dtheta < 0) { - dtheta += 2 * PI; - } + function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), + tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); + return Math.atan2(tangentY, tangentX); + }; + } - // Convert into cubic bezier segments <= 90deg - var segments = Math.ceil(Math.abs(dtheta / PI * 2)), - result = [], mDelta = dtheta / segments, - mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), - th3 = mTheta + mDelta; - for (var i = 0; i < segments; i++) { - result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); - fromX = result[i][5]; - fromY = result[i][6]; - mTheta = th3; - th3 += mDelta; - } - return result; + // this will run over a path segment ( a cubic or quadratic segment) and approximate it + // with 100 segemnts. This will good enough to calculate the length of the curve + function pathIterator(iterator, x1, y1) { + var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; + for (perc = 1; perc <= 100; perc += 1) { + p = iterator(perc / 100); + tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); + tempP = p; } + return tmpLen; + } - /* - * Private - */ - function calcVectorAngle(ux, uy, vx, vy) { - var ta = Math.atan2(uy, ux), - tb = Math.atan2(vy, vx); - if (tb >= ta) { - return tb - ta; + /** + * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1 + * that correspond to that pixels run over the path. + * The percentage will be then used to find the correct point on the canvas for the path. + * @param {Array} segInfo fabricJS collection of information on a parsed path + * @param {Number} distance from starting point, in pixels. + * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point; + */ + function findPercentageForDistance(segInfo, distance) { + var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, + p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; + // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 + // the path + while (tmpLen < distance && nextStep > 0.0001) { + p = iterator(perc); + lastPerc = perc; + nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); + // compare tmpLen each cycle with distance, decide next perc to test. + if ((nextLen + tmpLen) > distance) { + // we discard this step and we make smaller steps. + perc -= nextStep; + nextStep /= 2; } else { - return 2 * Math.PI - (ta - tb); + tempP = p; + perc += nextStep; + tmpLen += nextLen; } } + p.angle = angleFinder(lastPerc); + return p; + } - /** - * Calculate bounding box of a beziercurve - * @param {Number} x0 starting point - * @param {Number} y0 - * @param {Number} x1 first control point - * @param {Number} y1 - * @param {Number} x2 secondo control point - * @param {Number} y2 - * @param {Number} x3 end of bezier - * @param {Number} y3 - */ - // taken from http://jsbin.com/ivomiq/56/edit no credits available for that. - // TODO: can we normalize this with the starting points set at 0 and then translated the bbox? - function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { - var argsString; - if (fabric.cachesBoundsOfCurve) { - argsString = _join.call(arguments); - if (fabric.boundsOfCurveCache[argsString]) { - return fabric.boundsOfCurveCache[argsString]; - } + /** + * Run over a parsed and simplifed path and extrac some informations. + * informations are length of each command and starting point + * @param {Array} path fabricJS parsed path commands + * @return {Array} path commands informations + */ + function getPathSegmentsInfo(path) { + var totalLength = 0, len = path.length, current, + //x2 and y2 are the coords of segment start + //x1 and y1 are the coords of the current point + x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; + for (var i = 0; i < len; i++) { + current = path[i]; + tempInfo = { + x: x1, + y: y1, + command: current[0], + }; + switch (current[0]) { //first letter + case 'M': + tempInfo.length = 0; + x2 = x1 = current[1]; + y2 = y1 = current[2]; + break; + case 'L': + tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); + x1 = current[1]; + y1 = current[2]; + break; + case 'C': + iterator = getPointOnCubicBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + angleFinder = getTangentCubicIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[5]; + y1 = current[6]; + break; + case 'Q': + iterator = getPointOnQuadraticBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + angleFinder = getTangentQuadraticIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[3]; + y1 = current[4]; + break; + case 'Z': + case 'z': + // we add those in order to ease calculations later + tempInfo.destX = x2; + tempInfo.destY = y2; + tempInfo.length = calcLineLength(x1, y1, x2, y2); + x1 = x2; + y1 = y2; + break; } + totalLength += tempInfo.length; + info.push(tempInfo); + } + info.push({ length: totalLength, x: x1, y: y1 }); + return info; + } - var sqrt = Math.sqrt, - min = Math.min, max = Math.max, - abs = Math.abs, tvalues = [], - bounds = [[], []], - a, b, c, t, t1, t2, b2ac, sqrtb2ac; + function getPointOnPath(path, distance, infos) { + if (!infos) { + infos = getPathSegmentsInfo(path); + } + var i = 0; + while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { + distance -= infos[i].length; + i++; + } + // var distance = infos[infos.length - 1] * perc; + var segInfo = infos[i], segPercent = distance / segInfo.length, + command = segInfo.command, segment = path[i], info; + + switch (command) { + case 'M': + return { x: segInfo.x, y: segInfo.y, angle: 0 }; + case 'Z': + case 'z': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segInfo.destX, segInfo.destY), + segPercent + ); + info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); + return info; + case 'L': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segment[1], segment[2]), + segPercent + ); + info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); + return info; + case 'C': + return findPercentageForDistance(segInfo, distance); + case 'Q': + return findPercentageForDistance(segInfo, distance); + } + } - b = 6 * x0 - 12 * x1 + 6 * x2; - a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; - c = 3 * x1 - 3 * x0; + /** + * + * @param {string} pathString + * @return {(string|number)[][]} An array of SVG path commands + * @example Usage + * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [ + * ['M', 3, 4], + * ['Q', 3, 5, 2, 1, 4, 0], + * ['Q', 9, 12, 2, 1, 4, 0], + * ]; + * + */ + function parsePath(pathString) { + var result = [], + coords = [], + currentPath, + parsed, + re = fabric.rePathCommand, + rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', + rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, + rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', + rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + + rNumberCommaWsp + '?(' + rNumber + ')', + regArcArgumentSequence = new RegExp(rArcSeq, 'g'), + match, + coordsStr, + // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) + path; + if (!pathString || !pathString.match) { + return result; + } + path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); - for (var i = 0; i < 2; ++i) { - if (i > 0) { - b = 6 * y0 - 12 * y1 + 6 * y2; - a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; - c = 3 * y1 - 3 * y0; - } + for (var i = 0, coordsParsed, len = path.length; i < len; i++) { + currentPath = path[i]; - if (abs(a) < 1e-12) { - if (abs(b) < 1e-12) { - continue; - } - t = -c / b; - if (0 < t && t < 1) { - tvalues.push(t); + coordsStr = currentPath.slice(1).trim(); + coords.length = 0; + + var command = currentPath.charAt(0); + coordsParsed = [command]; + + if (command.toLowerCase() === 'a') { + // arcs have special flags that apparently don't require spaces so handle special + for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { + for (var j = 1; j < args.length; j++) { + coords.push(args[j]); } - continue; } - b2ac = b * b - 4 * c * a; - if (b2ac < 0) { - continue; - } - sqrtb2ac = sqrt(b2ac); - t1 = (-b + sqrtb2ac) / (2 * a); - if (0 < t1 && t1 < 1) { - tvalues.push(t1); - } - t2 = (-b - sqrtb2ac) / (2 * a); - if (0 < t2 && t2 < 1) { - tvalues.push(t2); + } + else { + while ((match = re.exec(coordsStr))) { + coords.push(match[0]); } } - var x, y, j = tvalues.length, jlen = j, mt; - while (j--) { - t = tvalues[j]; - mt = 1 - t; - x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); - bounds[0][j] = x; - - y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); - bounds[1][j] = y; - } - - bounds[0][jlen] = x0; - bounds[1][jlen] = y0; - bounds[0][jlen + 1] = x3; - bounds[1][jlen + 1] = y3; - var result = [ - { - x: min.apply(null, bounds[0]), - y: min.apply(null, bounds[1]) - }, - { - x: max.apply(null, bounds[0]), - y: max.apply(null, bounds[1]) + for (var j = 0, jlen = coords.length; j < jlen; j++) { + parsed = parseFloat(coords[j]); + if (!isNaN(parsed)) { + coordsParsed.push(parsed); } - ]; - if (fabric.cachesBoundsOfCurve) { - fabric.boundsOfCurveCache[argsString] = result; } - return result; - } - /** - * Converts arc to a bunch of bezier curves - * @param {Number} fx starting point x - * @param {Number} fy starting point y - * @param {Array} coords Arc command - */ - function fromArcToBeziers(fx, fy, coords) { - var rx = coords[1], - ry = coords[2], - rot = coords[3], - large = coords[4], - sweep = coords[5], - tx = coords[6], - ty = coords[7], - segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); - - for (var i = 0, len = segsNorm.length; i < len; i++) { - segsNorm[i][1] += fx; - segsNorm[i][2] += fy; - segsNorm[i][3] += fx; - segsNorm[i][4] += fy; - segsNorm[i][5] += fx; - segsNorm[i][6] += fy; - } - return segsNorm; - } - /** - * This function take a parsed SVG path and make it simpler for fabricJS logic. - * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute ) - * S converted in C, T converted in Q, A converted in C. - * @param {Array} path the array of commands of a parsed svg path for fabric.Path - * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path - */ - function makePathSimpler(path) { - // x and y represent the last point of the path. the previous command point. - // we add them to each relative command to make it an absolute comment. - // we also swap the v V h H with L, because are easier to transform. - var x = 0, y = 0, len = path.length, - // x1 and y1 represent the last point of the subpath. the subpath is started with - // m or M command. When a z or Z command is drawn, x and y need to be resetted to - // the last x1 and y1. - x1 = 0, y1 = 0, current, i, converted, - // previous will host the letter of the previous command, to handle S and T. - // controlX and controlY will host the previous reflected control point - destinationPath = [], previous, controlX, controlY; - for (i = 0; i < len; ++i) { - converted = false; - current = path[i].slice(0); - switch (current[0]) { // first letter - case 'l': // lineto, relative - current[0] = 'L'; - current[1] += x; - current[2] += y; - // falls through - case 'L': - x = current[1]; - y = current[2]; - break; - case 'h': // horizontal lineto, relative - current[1] += x; - // falls through - case 'H': - current[0] = 'L'; - current[2] = y; - x = current[1]; - break; - case 'v': // vertical lineto, relative - current[1] += y; - // falls through - case 'V': - current[0] = 'L'; - y = current[1]; - current[1] = x; - current[2] = y; - break; - case 'm': // moveTo, relative - current[0] = 'M'; - current[1] += x; - current[2] += y; - // falls through - case 'M': - x = current[1]; - y = current[2]; - x1 = current[1]; - y1 = current[2]; - break; - case 'c': // bezierCurveTo, relative - current[0] = 'C'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - current[5] += x; - current[6] += y; - // falls through - case 'C': - controlX = current[3]; - controlY = current[4]; - x = current[5]; - y = current[6]; - break; - case 's': // shorthand cubic bezierCurveTo, relative - current[0] = 'S'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'S': - // would be sScC but since we are swapping sSc for C, we check just that. - if (previous === 'C') { - // calculate reflection of previous control points - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a C, c, S, or s, - // the control point is coincident with the current point - controlX = x; - controlY = y; - } - x = current[3]; - y = current[4]; - current[0] = 'C'; - current[5] = current[3]; - current[6] = current[4]; - current[3] = current[1]; - current[4] = current[2]; - current[1] = controlX; - current[2] = controlY; - // current[3] and current[4] are NOW the second control point. - // we keep it for the next reflection. - controlX = current[3]; - controlY = current[4]; - break; - case 'q': // quadraticCurveTo, relative - current[0] = 'Q'; - current[1] += x; - current[2] += y; - current[3] += x; - current[4] += y; - // falls through - case 'Q': - controlX = current[1]; - controlY = current[2]; - x = current[3]; - y = current[4]; - break; - case 't': // shorthand quadraticCurveTo, relative - current[0] = 'T'; - current[1] += x; - current[2] += y; - // falls through - case 'T': - if (previous === 'Q') { - // calculate reflection of previous control point - controlX = 2 * x - controlX; - controlY = 2 * y - controlY; - } - else { - // If there is no previous command or if the previous command was not a Q, q, T or t, - // assume the control point is coincident with the current point - controlX = x; - controlY = y; - } - current[0] = 'Q'; - x = current[1]; - y = current[2]; - current[1] = controlX; - current[2] = controlY; - current[3] = x; - current[4] = y; - break; - case 'a': - current[0] = 'A'; - current[6] += x; - current[7] += y; - // falls through - case 'A': - converted = true; - destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); - x = current[6]; - y = current[7]; - break; - case 'z': - case 'Z': - x = x1; - y = y1; - break; - } - if (!converted) { - destinationPath.push(current); + var commandLength = commandLengths[command.toLowerCase()], + repeatedCommand = repeatedCommands[command] || command; + + if (coordsParsed.length - 1 > commandLength) { + for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { + result.push([command].concat(coordsParsed.slice(k, k + commandLength))); + command = repeatedCommand; } - previous = current[0]; } - return destinationPath; - } - /** - * Calc length from point x1,y1 to x2,y2 - * @param {Number} x1 starting point x - * @param {Number} y1 starting point y - * @param {Number} x2 starting point x - * @param {Number} y2 starting point y - * @return {Number} length of segment - */ - function calcLineLength(x1, y1, x2, y2) { - return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); + else { + result.push(coordsParsed); + } } - // functions for the Cubic beizer - // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 - function CB1(t) { - return t * t * t; - } - function CB2(t) { - return 3 * t * t * (1 - t); + return result; + }; + + /** + * + * Converts points to a smooth SVG path + * @param {{ x: number,y: number }[]} points Array of points + * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value. + * @return {(string|number)[][]} An array of SVG path commands + */ + function getSmoothPathFromPoints(points, correction) { + var path = [], i, + p1 = new fabric.Point(points[0].x, points[0].y), + p2 = new fabric.Point(points[1].x, points[1].y), + len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; + correction = correction || 0; + + if (manyPoints) { + multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; + multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; } - function CB3(t) { - return 3 * t * (1 - t) * (1 - t); + path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); + for (i = 1; i < len; i++) { + if (!p1.eq(p2)) { + var midPoint = p1.midPointFrom(p2); + // p1 is our bezier control point + // midpoint is our endpoint + // start point is p(i-1) value. + path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); + } + p1 = points[i]; + if ((i + 1) < points.length) { + p2 = points[i + 1]; + } } - function CB4(t) { - return (1 - t) * (1 - t) * (1 - t); + if (manyPoints) { + multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; + multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; } - - function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function(pct) { - var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); - return { - x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, - y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 - }; - }; + path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); + return path; + } + /** + * Transform a path by transforming each segment. + * it has to be a simplified path or it won't work. + * WARNING: this depends from pathOffset for correct operation + * @param {Array} path fabricJS parsed and simplified path commands + * @param {Array} transform matrix that represent the transformation + * @param {Object} [pathOffset] the fabric.Path pathOffset + * @param {Number} pathOffset.x + * @param {Number} pathOffset.y + * @returns {Array} the transformed path + */ + function transformPath(path, transform, pathOffset) { + if (pathOffset) { + transform = fabric.util.multiplyTransformMatrices( + transform, + [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] + ); } + return path.map(function(pathSegment) { + var newSegment = pathSegment.slice(0), point = {}; + for (var i = 1; i < pathSegment.length - 1; i += 2) { + point.x = pathSegment[i]; + point.y = pathSegment[i + 1]; + point = fabric.util.transformPoint(point, transform); + newSegment[i] = point.x; + newSegment[i + 1] = point.y; + } + return newSegment; + }); + } - function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + - (3 * pct * pct * (p4x - p3x)), - tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + - (3 * pct * pct * (p4y - p3y)); - return Math.atan2(tangentY, tangentX); - }; - } + /** + * Join path commands to go back to svg format + * @param {Array} pathData fabricJS parsed path commands + * @return {String} joined path 'M 0 0 L 20 30' + */ + fabric.util.joinPath = function(pathData) { + return pathData.map(function (segment) { return segment.join(' '); }).join(' '); + }; + fabric.util.parsePath = parsePath; + fabric.util.makePathSimpler = makePathSimpler; + fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; + fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; + fabric.util.getBoundsOfCurve = getBoundsOfCurve; + fabric.util.getPointOnPath = getPointOnPath; + fabric.util.transformPath = transformPath; +})(); - function QB1(t) { - return t * t; - } - function QB2(t) { - return 2 * t * (1 - t); - } +(function() { - function QB3(t) { - return (1 - t) * (1 - t); - } + var slice = Array.prototype.slice; - function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function(pct) { - var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); - return { - x: p3x * c1 + p2x * c2 + p1x * c3, - y: p3y * c1 + p2y * c2 + p1y * c3 - }; - }; + /** + * Invokes method on all items in a given array + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} method Name of a method to invoke + * @return {Array} + */ + function invoke(array, method) { + var args = slice.call(arguments, 2), result = []; + for (var i = 0, len = array.length; i < len; i++) { + result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); } + return result; + } - function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { - return function (pct) { - var invT = 1 - pct, - tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), - tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); - return Math.atan2(tangentY, tangentX); - }; - } + /** + * Finds maximum value in array (not necessarily "first" one) + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} byProperty + * @return {*} + */ + function max(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 >= value2; + }); + } + /** + * Finds minimum value in array (not necessarily "first" one) + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} byProperty + * @return {*} + */ + function min(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 < value2; + }); + } - // this will run over a path segment ( a cubic or quadratic segment) and approximate it - // with 100 segemnts. This will good enough to calculate the length of the curve - function pathIterator(iterator, x1, y1) { - var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; - for (perc = 1; perc <= 100; perc += 1) { - p = iterator(perc / 100); - tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); - tempP = p; - } - return tmpLen; + /** + * @private + */ + function fill(array, value) { + var k = array.length; + while (k--) { + array[k] = value; } + return array; + } - /** - * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1 - * that correspond to that pixels run over the path. - * The percentage will be then used to find the correct point on the canvas for the path. - * @param {Array} segInfo fabricJS collection of information on a parsed path - * @param {Number} distance from starting point, in pixels. - * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point; - */ - function findPercentageForDistance(segInfo, distance) { - var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, - p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; - // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 - // the path - while (tmpLen < distance && nextStep > 0.0001) { - p = iterator(perc); - lastPerc = perc; - nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); - // compare tmpLen each cycle with distance, decide next perc to test. - if ((nextLen + tmpLen) > distance) { - // we discard this step and we make smaller steps. - perc -= nextStep; - nextStep /= 2; - } - else { - tempP = p; - perc += nextStep; - tmpLen += nextLen; - } - } - p.angle = angleFinder(lastPerc); - return p; + /** + * @private + */ + function find(array, byProperty, condition) { + if (!array || array.length === 0) { + return; } - /** - * Run over a parsed and simplifed path and extract some informations. - * informations are length of each command and starting point - * @param {Array} path fabricJS parsed path commands - * @return {Array} path commands informations - */ - function getPathSegmentsInfo(path) { - var totalLength = 0, len = path.length, current, - //x2 and y2 are the coords of segment start - //x1 and y1 are the coords of the current point - x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; - for (var i = 0; i < len; i++) { - current = path[i]; - tempInfo = { - x: x1, - y: y1, - command: current[0], - }; - switch (current[0]) { //first letter - case 'M': - tempInfo.length = 0; - x2 = x1 = current[1]; - y2 = y1 = current[2]; - break; - case 'L': - tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); - x1 = current[1]; - y1 = current[2]; - break; - case 'C': - iterator = getPointOnCubicBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - angleFinder = getTangentCubicIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[5]; - y1 = current[6]; - break; - case 'Q': - iterator = getPointOnQuadraticBezierIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - angleFinder = getTangentQuadraticIterator( - x1, - y1, - current[1], - current[2], - current[3], - current[4] - ); - tempInfo.iterator = iterator; - tempInfo.angleFinder = angleFinder; - tempInfo.length = pathIterator(iterator, x1, y1); - x1 = current[3]; - y1 = current[4]; - break; - case 'Z': - case 'z': - // we add those in order to ease calculations later - tempInfo.destX = x2; - tempInfo.destY = y2; - tempInfo.length = calcLineLength(x1, y1, x2, y2); - x1 = x2; - y1 = y2; - break; + var i = array.length - 1, + result = byProperty ? array[i][byProperty] : array[i]; + if (byProperty) { + while (i--) { + if (condition(array[i][byProperty], result)) { + result = array[i][byProperty]; } - totalLength += tempInfo.length; - info.push(tempInfo); } - info.push({ length: totalLength, x: x1, y: y1 }); - return info; } - - function getPointOnPath(path, distance, infos) { - if (!infos) { - infos = getPathSegmentsInfo(path); - } - var i = 0; - while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { - distance -= infos[i].length; - i++; - } - // var distance = infos[infos.length - 1] * perc; - var segInfo = infos[i], segPercent = distance / segInfo.length, - command = segInfo.command, segment = path[i], info; - - switch (command) { - case 'M': - return { x: segInfo.x, y: segInfo.y, angle: 0 }; - case 'Z': - case 'z': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segInfo.destX, segInfo.destY), - segPercent - ); - info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); - return info; - case 'L': - info = new fabric.Point(segInfo.x, segInfo.y).lerp( - new fabric.Point(segment[1], segment[2]), - segPercent - ); - info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); - return info; - case 'C': - return findPercentageForDistance(segInfo, distance); - case 'Q': - return findPercentageForDistance(segInfo, distance); + else { + while (i--) { + if (condition(array[i], result)) { + result = array[i]; + } } } + return result; + } - /** - * - * @param {string} pathString - * @return {(string|number)[][]} An array of SVG path commands - * @example Usage - * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [ - * ['M', 3, 4], - * ['Q', 3, 5, 2, 1, 4, 0], - * ['Q', 9, 12, 2, 1, 4, 0], - * ]; - * - */ - function parsePath(pathString) { - var result = [], - coords = [], - currentPath, - parsed, - re = fabric.rePathCommand, - rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', - rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, - rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', - rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + - rNumberCommaWsp + '?(' + rNumber + ')', - regArcArgumentSequence = new RegExp(rArcSeq, 'g'), - match, - coordsStr, - // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) - path; - if (!pathString || !pathString.match) { - return result; - } - path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); - - for (var i = 0, coordsParsed, len = path.length; i < len; i++) { - currentPath = path[i]; - - coordsStr = currentPath.slice(1).trim(); - coords.length = 0; - - var command = currentPath.charAt(0); - coordsParsed = [command]; - - if (command.toLowerCase() === 'a') { - // arcs have special flags that apparently don't require spaces so handle special - for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { - for (var j = 1; j < args.length; j++) { - coords.push(args[j]); - } - } - } - else { - while ((match = re.exec(coordsStr))) { - coords.push(match[0]); - } - } + /** + * @namespace fabric.util.array + */ + fabric.util.array = { + fill: fill, + invoke: invoke, + min: min, + max: max + }; - for (var j = 0, jlen = coords.length; j < jlen; j++) { - parsed = parseFloat(coords[j]); - if (!isNaN(parsed)) { - coordsParsed.push(parsed); - } - } +})(); - var commandLength = commandLengths[command.toLowerCase()], - repeatedCommand = repeatedCommands[command] || command; - if (coordsParsed.length - 1 > commandLength) { - for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { - result.push([command].concat(coordsParsed.slice(k, k + commandLength))); - command = repeatedCommand; - } - } - else { - result.push(coordsParsed); - } - } +(function() { + /** + * Copies all enumerable properties of one js object to another + * this does not and cannot compete with generic utils. + * Does not clone or extend fabric.Object subclasses. + * This is mostly for internal use and has extra handling for fabricJS objects + * it skips the canvas and group properties in deep cloning. + * @memberOf fabric.util.object + * @param {Object} destination Where to copy to + * @param {Object} source Where to copy from + * @param {Boolean} [deep] Whether to extend nested objects + * @return {Object} + */ - return result; - } - /** - * - * Converts points to a smooth SVG path - * @param {{ x: number,y: number }[]} points Array of points - * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value. - * @return {(string|number)[][]} An array of SVG path commands - */ - function getSmoothPathFromPoints(points, correction) { - var path = [], i, - p1 = new fabric.Point(points[0].x, points[0].y), - p2 = new fabric.Point(points[1].x, points[1].y), - len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; - correction = correction || 0; - - if (manyPoints) { - multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; - multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; - } - path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); - for (i = 1; i < len; i++) { - if (!p1.eq(p2)) { - var midPoint = p1.midPointFrom(p2); - // p1 is our bezier control point - // midpoint is our endpoint - // start point is p(i-1) value. - path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); - } - p1 = points[i]; - if ((i + 1) < points.length) { - p2 = points[i + 1]; - } - } - if (manyPoints) { - multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; - multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; - } - path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); - return path; - } - /** - * Transform a path by transforming each segment. - * it has to be a simplified path or it won't work. - * WARNING: this depends from pathOffset for correct operation - * @param {Array} path fabricJS parsed and simplified path commands - * @param {Array} transform matrix that represent the transformation - * @param {Object} [pathOffset] the fabric.Path pathOffset - * @param {Number} pathOffset.x - * @param {Number} pathOffset.y - * @returns {Array} the transformed path - */ - function transformPath(path, transform, pathOffset) { - if (pathOffset) { - transform = fabric.util.multiplyTransformMatrices( - transform, - [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] - ); + function extend(destination, source, deep) { + // JScript DontEnum bug is not taken care of + // the deep clone is for internal use, is not meant to avoid + // javascript traps or cloning html element or self referenced objects. + if (deep) { + if (!fabric.isLikelyNode && source instanceof Element) { + // avoid cloning deep images, canvases, + destination = source; } - return path.map(function(pathSegment) { - var newSegment = pathSegment.slice(0), point = {}; - for (var i = 1; i < pathSegment.length - 1; i += 2) { - point.x = pathSegment[i]; - point.y = pathSegment[i + 1]; - point = fabric.util.transformPoint(point, transform); - newSegment[i] = point.x; - newSegment[i + 1] = point.y; + else if (source instanceof Array) { + destination = []; + for (var i = 0, len = source.length; i < len; i++) { + destination[i] = extend({ }, source[i], deep); + } + } + else if (source && typeof source === 'object') { + for (var property in source) { + if (property === 'canvas' || property === 'group') { + // we do not want to clone this props at all. + // we want to keep the keys in the copy + destination[property] = null; + } + else if (source.hasOwnProperty(property)) { + destination[property] = extend({ }, source[property], deep); + } } - return newSegment; - }); - } - - /** - * Returns an array of path commands to create a regular polygon - * @param {number} radius - * @param {number} numVertexes - * @returns {(string|number)[][]} An array of SVG path commands - */ - function getRegularPolygonPath(numVertexes, radius) { - var interiorAngle = Math.PI * 2 / numVertexes; - // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom - // This isn't strictly necessary, but it's how we tend to think of and expect polygons to be drawn - var rotationAdjustment = -Math.PI / 2; - if (numVertexes % 2 === 0) { - rotationAdjustment += interiorAngle / 2; } - var d = []; - for (var i = 0, rad, coord; i < numVertexes; i++) { - rad = i * interiorAngle + rotationAdjustment; - coord = new fabric.Point(Math.cos(rad), Math.sin(rad)).scalarMultiplyEquals(radius); - d.push([i === 0 ? 'M' : 'L', coord.x, coord.y]); + else { + // this sounds odd for an extend but is ok for recursive use + destination = source; } - d.push(['Z']); - return d; } - - /** - * Join path commands to go back to svg format - * @param {Array} pathData fabricJS parsed path commands - * @return {String} joined path 'M 0 0 L 20 30' - */ - fabric.util.joinPath = function(pathData) { - return pathData.map(function (segment) { return segment.join(' '); }).join(' '); - }; - fabric.util.parsePath = parsePath; - fabric.util.makePathSimpler = makePathSimpler; - fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; - fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; - fabric.util.getBoundsOfCurve = getBoundsOfCurve; - fabric.util.getPointOnPath = getPointOnPath; - fabric.util.transformPath = transformPath; - fabric.util.getRegularPolygonPath = getRegularPolygonPath; - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - - var fabric = global.fabric, slice = Array.prototype.slice; - - /** - * Invokes method on all items in a given array - * @memberOf fabric.util.array - * @param {Array} array Array to iterate over - * @param {String} method Name of a method to invoke - * @return {Array} - */ - function invoke(array, method) { - var args = slice.call(arguments, 2), result = []; - for (var i = 0, len = array.length; i < len; i++) { - result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); + else { + for (var property in source) { + destination[property] = source[property]; } - return result; } + return destination; + } - /** - * Finds maximum value in array (not necessarily "first" one) - * @memberOf fabric.util.array - * @param {Array} array Array to iterate over - * @param {String} byProperty - * @return {*} - */ - function max(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 >= value2; - }); - } + /** + * Creates an empty object and copies all enumerable properties of another object to it + * This method is mostly for internal use, and not intended for duplicating shapes in canvas. + * @memberOf fabric.util.object + * @param {Object} object Object to clone + * @param {Boolean} [deep] Whether to clone nested objects + * @return {Object} + */ - /** - * Finds minimum value in array (not necessarily "first" one) - * @memberOf fabric.util.array - * @param {Array} array Array to iterate over - * @param {String} byProperty - * @return {*} - */ - function min(array, byProperty) { - return find(array, byProperty, function(value1, value2) { - return value1 < value2; - }); - } + //TODO: this function return an empty object if you try to clone null + function clone(object, deep) { + return extend({ }, object, deep); + } - /** - * @private - */ - function fill(array, value) { - var k = array.length; - while (k--) { - array[k] = value; - } - return array; - } + /** @namespace fabric.util.object */ + fabric.util.object = { + extend: extend, + clone: clone + }; + fabric.util.object.extend(fabric.util, fabric.Observable); +})(); - /** - * @private - */ - function find(array, byProperty, condition) { - if (!array || array.length === 0) { - return; - } - var i = array.length - 1, - result = byProperty ? array[i][byProperty] : array[i]; - if (byProperty) { - while (i--) { - if (condition(array[i][byProperty], result)) { - result = array[i][byProperty]; - } - } - } - else { - while (i--) { - if (condition(array[i], result)) { - result = array[i]; - } - } - } - return result; - } +(function() { - /** - * @namespace fabric.util.array - */ - fabric.util.array = { - fill: fill, - invoke: invoke, - min: min, - max: max - }; + /** + * Camelizes a string + * @memberOf fabric.util.string + * @param {String} string String to camelize + * @return {String} Camelized version of a string + */ + function camelize(string) { + return string.replace(/-+(.)?/g, function(match, character) { + return character ? character.toUpperCase() : ''; + }); + } - })(typeof exports !== 'undefined' ? exports : window); + /** + * Capitalizes a string + * @memberOf fabric.util.string + * @param {String} string String to capitalize + * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized + * and other letters stay untouched, if false first letter is capitalized + * and other letters are converted to lowercase. + * @return {String} Capitalized version of a string + */ + function capitalize(string, firstLetterOnly) { + return string.charAt(0).toUpperCase() + + (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()); + } - (function(global) { - var fabric = global.fabric; - /** - * Copies all enumerable properties of one js object to another - * this does not and cannot compete with generic utils. - * Does not clone or extend fabric.Object subclasses. - * This is mostly for internal use and has extra handling for fabricJS objects - * it skips the canvas and group properties in deep cloning. - * @memberOf fabric.util.object - * @param {Object} destination Where to copy to - * @param {Object} source Where to copy from - * @param {Boolean} [deep] Whether to extend nested objects - * @return {Object} - */ + /** + * Escapes XML in a string + * @memberOf fabric.util.string + * @param {String} string String to escape + * @return {String} Escaped version of a string + */ + function escapeXml(string) { + return string.replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); + } - function extend(destination, source, deep) { - // JScript DontEnum bug is not taken care of - // the deep clone is for internal use, is not meant to avoid - // javascript traps or cloning html element or self referenced objects. - if (deep) { - if (!fabric.isLikelyNode && source instanceof Element) { - // avoid cloning deep images, canvases, - destination = source; - } - else if (source instanceof Array) { - destination = []; - for (var i = 0, len = source.length; i < len; i++) { - destination[i] = extend({ }, source[i], deep); - } - } - else if (source && typeof source === 'object') { - for (var property in source) { - if (property === 'canvas' || property === 'group') { - // we do not want to clone this props at all. - // we want to keep the keys in the copy - destination[property] = null; - } - else if (source.hasOwnProperty(property)) { - destination[property] = extend({ }, source[property], deep); - } - } - } - else { - // this sounds odd for an extend but is ok for recursive use - destination = source; - } - } - else { - for (var property in source) { - destination[property] = source[property]; - } + /** + * Divide a string in the user perceived single units + * @memberOf fabric.util.string + * @param {String} textstring String to escape + * @return {Array} array containing the graphemes + */ + function graphemeSplit(textstring) { + var i = 0, chr, graphemes = []; + for (i = 0, chr; i < textstring.length; i++) { + if ((chr = getWholeChar(textstring, i)) === false) { + continue; } - return destination; + graphemes.push(chr); } + return graphemes; + } - /** - * Creates an empty object and copies all enumerable properties of another object to it - * This method is mostly for internal use, and not intended for duplicating shapes in canvas. - * @memberOf fabric.util.object - * @param {Object} object Object to clone - * @param {Boolean} [deep] Whether to clone nested objects - * @return {Object} - */ + // taken from mdn in the charAt doc page. + function getWholeChar(str, i) { + var code = str.charCodeAt(i); - //TODO: this function return an empty object if you try to clone null - function clone(object, deep) { - return deep ? extend({ }, object, deep) : Object.assign({}, object); + if (isNaN(code)) { + return ''; // Position not found } - - /** @namespace fabric.util.object */ - fabric.util.object = { - extend: extend, - clone: clone - }; - fabric.util.object.extend(fabric.util, fabric.Observable); - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric; - /** - * Camelizes a string - * @memberOf fabric.util.string - * @param {String} string String to camelize - * @return {String} Camelized version of a string - */ - function camelize(string) { - return string.replace(/-+(.)?/g, function(match, character) { - return character ? character.toUpperCase() : ''; - }); + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); } - /** - * Capitalizes a string - * @memberOf fabric.util.string - * @param {String} string String to capitalize - * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized - * and other letters stay untouched, if false first letter is capitalized - * and other letters are converted to lowercase. - * @return {String} Capitalized version of a string - */ - function capitalize(string, firstLetterOnly) { - return string.charAt(0).toUpperCase() + - (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()); + // High surrogate (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + return str.charAt(i) + str.charAt(i + 1); } - - /** - * Escapes XML in a string - * @memberOf fabric.util.string - * @param {String} string String to escape - * @return {String} Escaped version of a string - */ - function escapeXml(string) { - return string.replace(/&/g, '&') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(//g, '>'); + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; } + var prev = str.charCodeAt(i - 1); - /** - * Divide a string in the user perceived single units - * @memberOf fabric.util.string - * @param {String} textstring String to escape - * @return {Array} array containing the graphemes - */ - function graphemeSplit(textstring) { - var i = 0, chr, graphemes = []; - for (i = 0, chr; i < textstring.length; i++) { - if ((chr = getWholeChar(textstring, i)) === false) { - continue; - } - graphemes.push(chr); - } - return graphemes; + // (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; } + // We can pass over low surrogates now as the second component + // in a pair which we have already processed + return false; + } - // taken from mdn in the charAt doc page. - function getWholeChar(str, i) { - var code = str.charCodeAt(i); - if (isNaN(code)) { - return ''; // Position not found - } - if (code < 0xD800 || code > 0xDFFF) { - return str.charAt(i); - } + /** + * String utilities + * @namespace fabric.util.string + */ + fabric.util.string = { + camelize: camelize, + capitalize: capitalize, + escapeXml: escapeXml, + graphemeSplit: graphemeSplit + }; +})(); - // High surrogate (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 <= code && code <= 0xDBFF) { - if (str.length <= (i + 1)) { - throw 'High surrogate without following low surrogate'; - } - var next = str.charCodeAt(i + 1); - if (0xDC00 > next || next > 0xDFFF) { - throw 'High surrogate without following low surrogate'; - } - return str.charAt(i) + str.charAt(i + 1); - } - // Low surrogate (0xDC00 <= code && code <= 0xDFFF) - if (i === 0) { - throw 'Low surrogate without preceding high surrogate'; - } - var prev = str.charCodeAt(i - 1); - // (could change last hex to 0xDB7F to treat high private - // surrogates as single characters) - if (0xD800 > prev || prev > 0xDBFF) { - throw 'Low surrogate without preceding high surrogate'; - } - // We can pass over low surrogates now as the second component - // in a pair which we have already processed - return false; - } +(function() { + var slice = Array.prototype.slice, emptyFunction = function() { }, - /** - * String utilities - * @namespace fabric.util.string - */ - fabric.util.string = { - camelize: camelize, - capitalize: capitalize, - escapeXml: escapeXml, - graphemeSplit: graphemeSplit - }; - })(typeof exports !== 'undefined' ? exports : window); + IS_DONTENUM_BUGGY = (function() { + for (var p in { toString: 1 }) { + if (p === 'toString') { + return false; + } + } + return true; + })(), - (function(global) { + /** @ignore */ + addMethods = function(klass, source, parent) { + for (var property in source) { - var fabric = global.fabric, slice = Array.prototype.slice, emptyFunction = function() { }, - /** @ignore */ - addMethods = function(klass, source, parent) { - for (var property in source) { + if (property in klass.prototype && + typeof klass.prototype[property] === 'function' && + (source[property] + '').indexOf('callSuper') > -1) { - if (property in klass.prototype && - typeof klass.prototype[property] === 'function' && - (source[property] + '').indexOf('callSuper') > -1) { + klass.prototype[property] = (function(property) { + return function() { - klass.prototype[property] = (function(property) { - return function() { + var superclass = this.constructor.superclass; + this.constructor.superclass = parent; + var returnValue = source[property].apply(this, arguments); + this.constructor.superclass = superclass; - var superclass = this.constructor.superclass; - this.constructor.superclass = parent; - var returnValue = source[property].apply(this, arguments); - this.constructor.superclass = superclass; + if (property !== 'initialize') { + return returnValue; + } + }; + })(property); + } + else { + klass.prototype[property] = source[property]; + } - if (property !== 'initialize') { - return returnValue; - } - }; - })(property); + if (IS_DONTENUM_BUGGY) { + if (source.toString !== Object.prototype.toString) { + klass.prototype.toString = source.toString; } - else { - klass.prototype[property] = source[property]; + if (source.valueOf !== Object.prototype.valueOf) { + klass.prototype.valueOf = source.valueOf; } } - }; + } + }; - function Subclass() { } + function Subclass() { } - function callSuper(methodName) { - var parentMethod = null, - _this = this; + function callSuper(methodName) { + var parentMethod = null, + _this = this; - // climb prototype chain to find method not equal to callee's method - while (_this.constructor.superclass) { - var superClassMethod = _this.constructor.superclass.prototype[methodName]; - if (_this[methodName] !== superClassMethod) { - parentMethod = superClassMethod; - break; - } - // eslint-disable-next-line - _this = _this.constructor.superclass.prototype; + // climb prototype chain to find method not equal to callee's method + while (_this.constructor.superclass) { + var superClassMethod = _this.constructor.superclass.prototype[methodName]; + if (_this[methodName] !== superClassMethod) { + parentMethod = superClassMethod; + break; } + // eslint-disable-next-line + _this = _this.constructor.superclass.prototype; + } - if (!parentMethod) { - return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); - } + if (!parentMethod) { + return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); + } + + return (arguments.length > 1) + ? parentMethod.apply(this, slice.call(arguments, 1)) + : parentMethod.call(this); + } + + /** + * Helper for creation of "classes". + * @memberOf fabric.util + * @param {Function} [parent] optional "Class" to inherit from + * @param {Object} [properties] Properties shared by all instances of this class + * (be careful modifying objects defined here as this would affect all instances) + */ + function createClass() { + var parent = null, + properties = slice.call(arguments, 0); - return (arguments.length > 1) - ? parentMethod.apply(this, slice.call(arguments, 1)) - : parentMethod.call(this); + if (typeof properties[0] === 'function') { + parent = properties.shift(); + } + function klass() { + this.initialize.apply(this, arguments); } - /** - * Helper for creation of "classes". - * @memberOf fabric.util - * @param {Function} [parent] optional "Class" to inherit from - * @param {Object} [properties] Properties shared by all instances of this class - * (be careful modifying objects defined here as this would affect all instances) - */ - function createClass() { - var parent = null, - properties = slice.call(arguments, 0); + klass.superclass = parent; + klass.subclasses = []; + + if (parent) { + Subclass.prototype = parent.prototype; + klass.prototype = new Subclass(); + parent.subclasses.push(klass); + } + for (var i = 0, length = properties.length; i < length; i++) { + addMethods(klass, properties[i], parent); + } + if (!klass.prototype.initialize) { + klass.prototype.initialize = emptyFunction; + } + klass.prototype.constructor = klass; + klass.prototype.callSuper = callSuper; + return klass; + } + + fabric.util.createClass = createClass; +})(); + + +(function () { + // since ie11 can use addEventListener but they do not support options, i need to check + var couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent, + touchEvents = ['touchstart', 'touchmove', 'touchend']; + /** + * Adds an event listener to an element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {String} eventName + * @param {Function} handler + */ + fabric.util.addListener = function(element, eventName, handler, options) { + element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options); + }; + + /** + * Removes an event listener from an element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {String} eventName + * @param {Function} handler + */ + fabric.util.removeListener = function(element, eventName, handler, options) { + element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options); + }; + + function getTouchInfo(event) { + var touchProp = event.changedTouches; + if (touchProp && touchProp[0]) { + return touchProp[0]; + } + return event; + } + + fabric.util.getPointer = function(event) { + var element = event.target, + scroll = fabric.util.getScrollLeftTop(element), + _evt = getTouchInfo(event); + return { + x: _evt.clientX + scroll.left, + y: _evt.clientY + scroll.top + }; + }; + + fabric.util.isTouchEvent = function(event) { + return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch'; + }; +})(); - if (typeof properties[0] === 'function') { - parent = properties.shift(); + +(function () { + + /** + * Cross-browser wrapper for setting element's style + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {Object} styles + * @return {HTMLElement} Element that was passed as a first argument + */ + function setStyle(element, styles) { + var elementStyle = element.style; + if (!elementStyle) { + return element; + } + if (typeof styles === 'string') { + element.style.cssText += ';' + styles; + return styles.indexOf('opacity') > -1 + ? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) + : element; + } + for (var property in styles) { + if (property === 'opacity') { + setOpacity(element, styles[property]); } - function klass() { - this.initialize.apply(this, arguments); + else { + var normalizedProperty = (property === 'float' || property === 'cssFloat') + ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat') + : property; + elementStyle[normalizedProperty] = styles[property]; } + } + return element; + } + + var parseEl = fabric.document.createElement('div'), + supportsOpacity = typeof parseEl.style.opacity === 'string', + supportsFilters = typeof parseEl.style.filter === 'string', + reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/, - klass.superclass = parent; - klass.subclasses = []; + /** @ignore */ + setOpacity = function (element) { return element; }; - if (parent) { - Subclass.prototype = parent.prototype; - klass.prototype = new Subclass(); - parent.subclasses.push(klass); + if (supportsOpacity) { + /** @ignore */ + setOpacity = function(element, value) { + element.style.opacity = value; + return element; + }; + } + else if (supportsFilters) { + /** @ignore */ + setOpacity = function(element, value) { + var es = element.style; + if (element.currentStyle && !element.currentStyle.hasLayout) { + es.zoom = 1; } - for (var i = 0, length = properties.length; i < length; i++) { - addMethods(klass, properties[i], parent); + if (reOpacity.test(es.filter)) { + value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')'); + es.filter = es.filter.replace(reOpacity, value); } - if (!klass.prototype.initialize) { - klass.prototype.initialize = emptyFunction; + else { + es.filter += ' alpha(opacity=' + (value * 100) + ')'; } - klass.prototype.constructor = klass; - klass.prototype.callSuper = callSuper; - return klass; - } + return element; + }; + } - fabric.util.createClass = createClass; - })(typeof exports !== 'undefined' ? exports : window); + fabric.util.setStyle = setStyle; - (function (global) { - // since ie11 can use addEventListener but they do not support options, i need to check - var fabric = global.fabric, couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent, - touchEvents = ['touchstart', 'touchmove', 'touchend']; - /** - * Adds an event listener to an element - * @function - * @memberOf fabric.util - * @param {HTMLElement} element - * @param {String} eventName - * @param {Function} handler - */ - fabric.util.addListener = function(element, eventName, handler, options) { - element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options); - }; +})(); - /** - * Removes an event listener from an element - * @function - * @memberOf fabric.util - * @param {HTMLElement} element - * @param {String} eventName - * @param {Function} handler - */ - fabric.util.removeListener = function(element, eventName, handler, options) { - element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options); - }; - function getTouchInfo(event) { - var touchProp = event.changedTouches; - if (touchProp && touchProp[0]) { - return touchProp[0]; - } - return event; - } +(function() { - fabric.util.getPointer = function(event) { - var element = event.target, - scroll = fabric.util.getScrollLeftTop(element), - _evt = getTouchInfo(event); - return { - x: _evt.clientX + scroll.left, - y: _evt.clientY + scroll.top + var _slice = Array.prototype.slice; + + /** + * Takes id and returns an element with that id (if one exists in a document) + * @memberOf fabric.util + * @param {String|HTMLElement} id + * @return {HTMLElement|null} + */ + function getById(id) { + return typeof id === 'string' ? fabric.document.getElementById(id) : id; + } + + var sliceCanConvertNodelists, + /** + * Converts an array-like object (e.g. arguments or NodeList) to an array + * @memberOf fabric.util + * @param {Object} arrayLike + * @return {Array} + */ + toArray = function(arrayLike) { + return _slice.call(arrayLike, 0); }; - }; - fabric.util.isTouchEvent = function(event) { - return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch'; + try { + sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; + } + catch (err) { } + + if (!sliceCanConvertNodelists) { + toArray = function(arrayLike) { + var arr = new Array(arrayLike.length), i = arrayLike.length; + while (i--) { + arr[i] = arrayLike[i]; + } + return arr; }; - })(typeof exports !== 'undefined' ? exports : window); + } - (function (global) { - var fabric = global.fabric; - /** - * Cross-browser wrapper for setting element's style - * @memberOf fabric.util - * @param {HTMLElement} element - * @param {Object} styles - * @return {HTMLElement} Element that was passed as a first argument - */ - function setStyle(element, styles) { - var elementStyle = element.style; - if (!elementStyle) { - return element; + /** + * Creates specified element with specified attributes + * @memberOf fabric.util + * @param {String} tagName Type of an element to create + * @param {Object} [attributes] Attributes to set on an element + * @return {HTMLElement} Newly created element + */ + function makeElement(tagName, attributes) { + var el = fabric.document.createElement(tagName); + for (var prop in attributes) { + if (prop === 'class') { + el.className = attributes[prop]; } - if (typeof styles === 'string') { - element.style.cssText += ';' + styles; - return styles.indexOf('opacity') > -1 - ? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) - : element; + else if (prop === 'for') { + el.htmlFor = attributes[prop]; } - for (var property in styles) { - if (property === 'opacity') { - setOpacity(element, styles[property]); - } - else { - var normalizedProperty = (property === 'float' || property === 'cssFloat') - ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat') - : property; - elementStyle.setProperty(normalizedProperty, styles[property]); - } + else { + el.setAttribute(prop, attributes[prop]); } - return element; } + return el; + } - var parseEl = fabric.document.createElement('div'), - supportsOpacity = typeof parseEl.style.opacity === 'string', - supportsFilters = typeof parseEl.style.filter === 'string', - reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/, - - /** @ignore */ - setOpacity = function (element) { return element; }; + /** + * Adds class to an element + * @memberOf fabric.util + * @param {HTMLElement} element Element to add class to + * @param {String} className Class to add to an element + */ + function addClass(element, className) { + if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { + element.className += (element.className ? ' ' : '') + className; + } + } - if (supportsOpacity) { - /** @ignore */ - setOpacity = function(element, value) { - element.style.opacity = value; - return element; - }; + /** + * Wraps element with another element + * @memberOf fabric.util + * @param {HTMLElement} element Element to wrap + * @param {HTMLElement|String} wrapper Element to wrap with + * @param {Object} [attributes] Attributes to set on a wrapper + * @return {HTMLElement} wrapper + */ + function wrapElement(element, wrapper, attributes) { + if (typeof wrapper === 'string') { + wrapper = makeElement(wrapper, attributes); } - else if (supportsFilters) { - /** @ignore */ - setOpacity = function(element, value) { - var es = element.style; - if (element.currentStyle && !element.currentStyle.hasLayout) { - es.zoom = 1; - } - if (reOpacity.test(es.filter)) { - value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')'); - es.filter = es.filter.replace(reOpacity, value); - } - else { - es.filter += ' alpha(opacity=' + (value * 100) + ')'; - } - return element; - }; + if (element.parentNode) { + element.parentNode.replaceChild(wrapper, element); } + wrapper.appendChild(element); + return wrapper; + } - fabric.util.setStyle = setStyle; + /** + * Returns element scroll offsets + * @memberOf fabric.util + * @param {HTMLElement} element Element to operate on + * @return {Object} Object with left/top values + */ + function getScrollLeftTop(element) { - })(typeof exports !== 'undefined' ? exports : window); + var left = 0, + top = 0, + docElement = fabric.document.documentElement, + body = fabric.document.body || { + scrollLeft: 0, scrollTop: 0 + }; - (function(global) { + // While loop checks (and then sets element to) .parentNode OR .host + // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, + // but the .parentNode of a root ShadowDOM node will always be null, instead + // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 + while (element && (element.parentNode || element.host)) { - var fabric = global.fabric, _slice = Array.prototype.slice; + // Set element to element parent, or 'host' in case of ShadowDOM + element = element.parentNode || element.host; - /** - * Takes id and returns an element with that id (if one exists in a document) - * @memberOf fabric.util - * @param {String|HTMLElement} id - * @return {HTMLElement|null} - */ - function getById(id) { - return typeof id === 'string' ? fabric.document.getElementById(id) : id; - } - - var sliceCanConvertNodelists, - /** - * Converts an array-like object (e.g. arguments or NodeList) to an array - * @memberOf fabric.util - * @param {Object} arrayLike - * @return {Array} - */ - toArray = function(arrayLike) { - return _slice.call(arrayLike, 0); + if (element === fabric.document) { + left = body.scrollLeft || docElement.scrollLeft || 0; + top = body.scrollTop || docElement.scrollTop || 0; + } + else { + left += element.scrollLeft || 0; + top += element.scrollTop || 0; + } + + if (element.nodeType === 1 && element.style.position === 'fixed') { + break; + } + } + + return { left: left, top: top }; + } + + /** + * Returns offset for a given element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element Element to get offset for + * @return {Object} Object with "left" and "top" properties + */ + function getElementOffset(element) { + var docElem, + doc = element && element.ownerDocument, + box = { left: 0, top: 0 }, + offset = { left: 0, top: 0 }, + scrollLeftTop, + offsetAttributes = { + borderLeftWidth: 'left', + borderTopWidth: 'top', + paddingLeft: 'left', + paddingTop: 'top' }; - try { - sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; + if (!doc) { + return offset; } - catch (err) { } - if (!sliceCanConvertNodelists) { - toArray = function(arrayLike) { - var arr = new Array(arrayLike.length), i = arrayLike.length; - while (i--) { - arr[i] = arrayLike[i]; - } - return arr; - }; + for (var attr in offsetAttributes) { + offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; } - /** - * Creates specified element with specified attributes - * @memberOf fabric.util - * @param {String} tagName Type of an element to create - * @param {Object} [attributes] Attributes to set on an element - * @return {HTMLElement} Newly created element - */ - function makeElement(tagName, attributes) { - var el = fabric.document.createElement(tagName); - for (var prop in attributes) { - if (prop === 'class') { - el.className = attributes[prop]; - } - else if (prop === 'for') { - el.htmlFor = attributes[prop]; - } - else { - el.setAttribute(prop, attributes[prop]); - } - } - return el; + docElem = doc.documentElement; + if ( typeof element.getBoundingClientRect !== 'undefined' ) { + box = element.getBoundingClientRect(); } - /** - * Adds class to an element - * @memberOf fabric.util - * @param {HTMLElement} element Element to add class to - * @param {String} className Class to add to an element - */ - function addClass(element, className) { - if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { - element.className += (element.className ? ' ' : '') + className; + scrollLeftTop = getScrollLeftTop(element); + + return { + left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, + top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top + }; + } + + /** + * Returns style attribute value of a given element + * @memberOf fabric.util + * @param {HTMLElement} element Element to get style attribute for + * @param {String} attr Style attribute to get for element + * @return {String} Style attribute value of the given element. + */ + var getElementStyle; + if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { + getElementStyle = function(element, attr) { + var style = fabric.document.defaultView.getComputedStyle(element, null); + return style ? style[attr] : undefined; + }; + } + else { + getElementStyle = function(element, attr) { + var value = element.style[attr]; + if (!value && element.currentStyle) { + value = element.currentStyle[attr]; } - } + return value; + }; + } + + (function () { + var style = fabric.document.documentElement.style, + selectProp = 'userSelect' in style + ? 'userSelect' + : 'MozUserSelect' in style + ? 'MozUserSelect' + : 'WebkitUserSelect' in style + ? 'WebkitUserSelect' + : 'KhtmlUserSelect' in style + ? 'KhtmlUserSelect' + : ''; /** - * Wraps element with another element + * Makes element unselectable * @memberOf fabric.util - * @param {HTMLElement} element Element to wrap - * @param {HTMLElement|String} wrapper Element to wrap with - * @param {Object} [attributes] Attributes to set on a wrapper - * @return {HTMLElement} wrapper + * @param {HTMLElement} element Element to make unselectable + * @return {HTMLElement} Element that was passed in */ - function wrapElement(element, wrapper, attributes) { - if (typeof wrapper === 'string') { - wrapper = makeElement(wrapper, attributes); + function makeElementUnselectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = fabric.util.falseFunction; } - if (element.parentNode) { - element.parentNode.replaceChild(wrapper, element); + if (selectProp) { + element.style[selectProp] = 'none'; } - wrapper.appendChild(element); - return wrapper; + else if (typeof element.unselectable === 'string') { + element.unselectable = 'on'; + } + return element; } /** - * Returns element scroll offsets + * Makes element selectable * @memberOf fabric.util - * @param {HTMLElement} element Element to operate on - * @return {Object} Object with left/top values + * @param {HTMLElement} element Element to make selectable + * @return {HTMLElement} Element that was passed in */ - function getScrollLeftTop(element) { - - var left = 0, - top = 0, - docElement = fabric.document.documentElement, - body = fabric.document.body || { - scrollLeft: 0, scrollTop: 0 - }; - - // While loop checks (and then sets element to) .parentNode OR .host - // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, - // but the .parentNode of a root ShadowDOM node will always be null, instead - // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 - while (element && (element.parentNode || element.host)) { - - // Set element to element parent, or 'host' in case of ShadowDOM - element = element.parentNode || element.host; + function makeElementSelectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = null; + } + if (selectProp) { + element.style[selectProp] = ''; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = ''; + } + return element; + } - if (element === fabric.document) { - left = body.scrollLeft || docElement.scrollLeft || 0; - top = body.scrollTop || docElement.scrollTop || 0; - } - else { - left += element.scrollLeft || 0; - top += element.scrollTop || 0; - } + fabric.util.makeElementUnselectable = makeElementUnselectable; + fabric.util.makeElementSelectable = makeElementSelectable; + })(); - if (element.nodeType === 1 && element.style.position === 'fixed') { - break; - } - } + function getNodeCanvas(element) { + var impl = fabric.jsdomImplForWrapper(element); + return impl._canvas || impl._image; + }; - return { left: left, top: top }; + function cleanUpJsdomNode(element) { + if (!fabric.isLikelyNode) { + return; } + var impl = fabric.jsdomImplForWrapper(element); + if (impl) { + impl._image = null; + impl._canvas = null; + // unsure if necessary + impl._currentSrc = null; + impl._attributes = null; + impl._classList = null; + } + } - /** - * Returns offset for a given element - * @function - * @memberOf fabric.util - * @param {HTMLElement} element Element to get offset for - * @return {Object} Object with "left" and "top" properties - */ - function getElementOffset(element) { - var docElem, - doc = element && element.ownerDocument, - box = { left: 0, top: 0 }, - offset = { left: 0, top: 0 }, - scrollLeftTop, - offsetAttributes = { - borderLeftWidth: 'left', - borderTopWidth: 'top', - paddingLeft: 'left', - paddingTop: 'top' - }; + function setImageSmoothing(ctx, value) { + ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled + || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled; + ctx.imageSmoothingEnabled = value; + } - if (!doc) { - return offset; - } + /** + * setImageSmoothing sets the context imageSmoothingEnabled property. + * Used by canvas and by ImageObject. + * @memberOf fabric.util + * @since 4.0.0 + * @param {HTMLRenderingContext2D} ctx to set on + * @param {Boolean} value true or false + */ + fabric.util.setImageSmoothing = setImageSmoothing; + fabric.util.getById = getById; + fabric.util.toArray = toArray; + fabric.util.addClass = addClass; + fabric.util.makeElement = makeElement; + fabric.util.wrapElement = wrapElement; + fabric.util.getScrollLeftTop = getScrollLeftTop; + fabric.util.getElementOffset = getElementOffset; + fabric.util.getNodeCanvas = getNodeCanvas; + fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; - for (var attr in offsetAttributes) { - offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; - } +})(); - docElem = doc.documentElement; - if ( typeof element.getBoundingClientRect !== 'undefined' ) { - box = element.getBoundingClientRect(); - } - scrollLeftTop = getScrollLeftTop(element); +(function() { - return { - left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, - top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top - }; - } + function addParamToUrl(url, param) { + return url + (/\?/.test(url) ? '&' : '?') + param; + } - /** - * Returns style attribute value of a given element - * @memberOf fabric.util - * @param {HTMLElement} element Element to get style attribute for - * @param {String} attr Style attribute to get for element - * @return {String} Style attribute value of the given element. - */ - var getElementStyle; - if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { - getElementStyle = function(element, attr) { - var style = fabric.document.defaultView.getComputedStyle(element, null); - return style ? style[attr] : undefined; - }; - } - else { - getElementStyle = function(element, attr) { - var value = element.style[attr]; - if (!value && element.currentStyle) { - value = element.currentStyle[attr]; - } - return value; - }; - } + function emptyFn() { } - (function () { - var style = fabric.document.documentElement.style, - selectProp = 'userSelect' in style - ? 'userSelect' - : 'MozUserSelect' in style - ? 'MozUserSelect' - : 'WebkitUserSelect' in style - ? 'WebkitUserSelect' - : 'KhtmlUserSelect' in style - ? 'KhtmlUserSelect' - : ''; + /** + * Cross-browser abstraction for sending XMLHttpRequest + * @memberOf fabric.util + * @param {String} url URL to send XMLHttpRequest to + * @param {Object} [options] Options object + * @param {String} [options.method="GET"] + * @param {String} [options.parameters] parameters to append to url in GET or in body + * @param {String} [options.body] body to send with POST or PUT request + * @param {Function} options.onComplete Callback to invoke when request is completed + * @return {XMLHttpRequest} request + */ + function request(url, options) { + options || (options = { }); - /** - * Makes element unselectable - * @memberOf fabric.util - * @param {HTMLElement} element Element to make unselectable - * @return {HTMLElement} Element that was passed in - */ - function makeElementUnselectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = fabric.util.falseFunction; - } - if (selectProp) { - element.style[selectProp] = 'none'; - } - else if (typeof element.unselectable === 'string') { - element.unselectable = 'on'; - } - return element; - } + var method = options.method ? options.method.toUpperCase() : 'GET', + onComplete = options.onComplete || function() { }, + xhr = new fabric.window.XMLHttpRequest(), + body = options.body || options.parameters; - /** - * Makes element selectable - * @memberOf fabric.util - * @param {HTMLElement} element Element to make selectable - * @return {HTMLElement} Element that was passed in - */ - function makeElementSelectable(element) { - if (typeof element.onselectstart !== 'undefined') { - element.onselectstart = null; - } - if (selectProp) { - element.style[selectProp] = ''; - } - else if (typeof element.unselectable === 'string') { - element.unselectable = ''; - } - return element; + /** @ignore */ + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + onComplete(xhr); + xhr.onreadystatechange = emptyFn; } + }; - fabric.util.makeElementUnselectable = makeElementUnselectable; - fabric.util.makeElementSelectable = makeElementSelectable; - })(typeof exports !== 'undefined' ? exports : window); - - function getNodeCanvas(element) { - var impl = fabric.jsdomImplForWrapper(element); - return impl._canvas || impl._image; - } - function cleanUpJsdomNode(element) { - if (!fabric.isLikelyNode) { - return; + if (method === 'GET') { + body = null; + if (typeof options.parameters === 'string') { + url = addParamToUrl(url, options.parameters); } - var impl = fabric.jsdomImplForWrapper(element); - if (impl) { - impl._image = null; - impl._canvas = null; - // unsure if necessary - impl._currentSrc = null; - impl._attributes = null; - impl._classList = null; - } - } - - function setImageSmoothing(ctx, value) { - ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled - || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled; - ctx.imageSmoothingEnabled = value; } - /** - * setImageSmoothing sets the context imageSmoothingEnabled property. - * Used by canvas and by ImageObject. - * @memberOf fabric.util - * @since 4.0.0 - * @param {HTMLRenderingContext2D} ctx to set on - * @param {Boolean} value true or false - */ - fabric.util.setImageSmoothing = setImageSmoothing; - fabric.util.getById = getById; - fabric.util.toArray = toArray; - fabric.util.addClass = addClass; - fabric.util.makeElement = makeElement; - fabric.util.wrapElement = wrapElement; - fabric.util.getScrollLeftTop = getScrollLeftTop; - fabric.util.getElementOffset = getElementOffset; - fabric.util.getNodeCanvas = getNodeCanvas; - fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; - - })(typeof exports !== 'undefined' ? exports : window); + xhr.open(method, url, true); - (function(global) { - var fabric = global.fabric; - function addParamToUrl(url, param) { - return url + (/\?/.test(url) ? '&' : '?') + param; + if (method === 'POST' || method === 'PUT') { + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } - function emptyFn() { } + xhr.send(body); + return xhr; + } - /** - * Cross-browser abstraction for sending XMLHttpRequest - * @memberOf fabric.util - * @deprecated this has to go away, we can use a modern browser method to do the same. - * @param {String} url URL to send XMLHttpRequest to - * @param {Object} [options] Options object - * @param {String} [options.method="GET"] - * @param {String} [options.parameters] parameters to append to url in GET or in body - * @param {String} [options.body] body to send with POST or PUT request - * @param {Function} options.onComplete Callback to invoke when request is completed - * @return {XMLHttpRequest} request - */ - function request(url, options) { - options || (options = { }); + fabric.util.request = request; +})(); - var method = options.method ? options.method.toUpperCase() : 'GET', - onComplete = options.onComplete || function() { }, - xhr = new fabric.window.XMLHttpRequest(), - body = options.body || options.parameters; - /** @ignore */ - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - onComplete(xhr); - xhr.onreadystatechange = emptyFn; - } - }; +/** + * Wrapper around `console.log` (when available) + * @param {*} [values] Values to log + */ +fabric.log = console.log; - if (method === 'GET') { - body = null; - if (typeof options.parameters === 'string') { - url = addParamToUrl(url, options.parameters); - } - } +/** + * Wrapper around `console.warn` (when available) + * @param {*} [values] Values to log as a warning + */ +fabric.warn = console.warn; - xhr.open(method, url, true); - if (method === 'POST' || method === 'PUT') { - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - } +(function () { - xhr.send(body); - return xhr; - } + var extend = fabric.util.object.extend, + clone = fabric.util.object.clone; + + /** + * @typedef {Object} AnimationOptions + * Animation of a value or list of values. + * When using lists, think of something like this: + * fabric.util.animate({ + * startValue: [1, 2, 3], + * endValue: [2, 4, 6], + * onChange: function([a, b, c]) { + * canvas.zoomToPoint({x: b, y: c}, a) + * canvas.renderAll() + * } + * }); + * @example + * @property {Function} [onChange] Callback; invoked on every value change + * @property {Function} [onComplete] Callback; invoked when value change is completed + * @example + * // Note: startValue, endValue, and byValue must match the type + * var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 } + * var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] } + * @property {number | number[]} [startValue=0] Starting value + * @property {number | number[]} [endValue=100] Ending value + * @property {number | number[]} [byValue=100] Value to modify the property by + * @property {Function} [easing] Easing function + * @property {Number} [duration=500] Duration of change (in ms) + * @property {Function} [abort] Additional function with logic. If returns true, animation aborts. + * + * @typedef {() => void} CancelFunction + * + * @typedef {Object} AnimationCurrentState + * @property {number | number[]} currentValue value in range [`startValue`, `endValue`] + * @property {number} completionRate value in range [0, 1] + * @property {number} durationRate value in range [0, 1] + * + * @typedef {(AnimationOptions & AnimationCurrentState & { cancel: CancelFunction }} AnimationContext + */ - fabric.util.request = request; - })(typeof exports !== 'undefined' ? exports : window); + /** + * Array holding all running animations + * @memberof fabric + * @type {AnimationContext[]} + */ + var RUNNING_ANIMATIONS = []; + fabric.util.object.extend(RUNNING_ANIMATIONS, { - (function(global) { - var fabric = global.fabric || (global.fabric = { }); /** - * Wrapper around `console.log` (when available) - * @param {*} [values] Values to log + * cancel all running animations at the next requestAnimFrame + * @returns {AnimationContext[]} */ - fabric.log = console.log; + cancelAll: function () { + var animations = this.splice(0); + animations.forEach(function (animation) { + animation.cancel(); + }); + return animations; + }, /** - * Wrapper around `console.warn` (when available) - * @param {*} [values] Values to log as a warning + * cancel all running animations attached to canvas at the next requestAnimFrame + * @param {fabric.Canvas} canvas + * @returns {AnimationContext[]} */ - fabric.warn = console.warn; - })(typeof exports !== 'undefined' ? exports : window); + cancelByCanvas: function (canvas) { + if (!canvas) { + return []; + } + var cancelled = this.filter(function (animation) { + return typeof animation.target === 'object' && animation.target.canvas === canvas; + }); + cancelled.forEach(function (animation) { + animation.cancel(); + }); + return cancelled; + }, + + /** + * cancel all running animations for target at the next requestAnimFrame + * @param {*} target + * @returns {AnimationContext[]} + */ + cancelByTarget: function (target) { + var cancelled = this.findAnimationsByTarget(target); + cancelled.forEach(function (animation) { + animation.cancel(); + }); + return cancelled; + }, - (function (global) { /** * - * @typedef {Object} AnimationOptions - * Animation of a value or list of values. - * @property {Function} [onChange] Callback; invoked on every value change - * @property {Function} [onComplete] Callback; invoked when value change is completed - * @property {number | number[]} [startValue=0] Starting value - * @property {number | number[]} [endValue=100] Ending value - * @property {number | number[]} [byValue=100] Value to modify the property by - * @property {Function} [easing] Easing function - * @property {number} [duration=500] Duration of change (in ms) - * @property {Function} [abort] Additional function with logic. If returns true, animation aborts. - * @property {number} [delay] Delay of animation start (in ms) - * - * @typedef {() => void} CancelFunction - * - * @typedef {Object} AnimationCurrentState - * @property {number | number[]} currentValue value in range [`startValue`, `endValue`] - * @property {number} completionRate value in range [0, 1] - * @property {number} durationRate value in range [0, 1] + * @param {CancelFunction} cancelFunc the function returned by animate + * @returns {number} + */ + findAnimationIndex: function (cancelFunc) { + return this.indexOf(this.findAnimation(cancelFunc)); + }, + + /** * - * @typedef {(AnimationOptions & AnimationCurrentState & { cancel: CancelFunction }} AnimationContext + * @param {CancelFunction} cancelFunc the function returned by animate + * @returns {AnimationContext | undefined} animation's options object */ + findAnimation: function (cancelFunc) { + return this.find(function (animation) { + return animation.cancel === cancelFunc; + }); + }, /** - * Array holding all running animations - * @memberof fabric - * @type {AnimationContext[]} + * + * @param {*} target the object that is assigned to the target property of the animation context + * @returns {AnimationContext[]} array of animation options object associated with target */ - var fabric = global.fabric, RUNNING_ANIMATIONS = []; - fabric.util.object.extend(RUNNING_ANIMATIONS, { + findAnimationsByTarget: function (target) { + if (!target) { + return []; + } + return this.filter(function (animation) { + return animation.target === target; + }); + } + }); - /** - * cancel all running animations at the next requestAnimFrame - * @returns {AnimationContext[]} - */ - cancelAll: function () { - var animations = this.splice(0); - animations.forEach(function (animation) { - animation.cancel(); - }); - return animations; - }, + function noop() { + return false; + } - /** - * cancel all running animations attached to canvas at the next requestAnimFrame - * @param {fabric.Canvas} canvas - * @returns {AnimationContext[]} - */ - cancelByCanvas: function (canvas) { - if (!canvas) { - return []; - } - var cancelled = this.filter(function (animation) { - return typeof animation.target === 'object' && animation.target.canvas === canvas; - }); - cancelled.forEach(function (animation) { - animation.cancel(); - }); - return cancelled; - }, + function defaultEasing(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; + } - /** - * cancel all running animations for target at the next requestAnimFrame - * @param {*} target - * @returns {AnimationContext[]} - */ - cancelByTarget: function (target) { - var cancelled = this.findAnimationsByTarget(target); - cancelled.forEach(function (animation) { - animation.cancel(); - }); - return cancelled; - }, + /** + * Changes value from one to another within certain period of time, invoking callbacks as value is being changed. + * @memberOf fabric.util + * @param {AnimationOptions} [options] Animation options + * @example + * // Note: startValue, endValue, and byValue must match the type + * fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 }) + * fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }) + * @returns {CancelFunction} cancel function + */ + function animate(options) { + options || (options = {}); + var cancel = false, + context, + removeFromRegistry = function () { + var index = fabric.runningAnimations.indexOf(context); + return index > -1 && fabric.runningAnimations.splice(index, 1)[0]; + }; - /** - * - * @param {CancelFunction} cancelFunc the function returned by animate - * @returns {number} - */ - findAnimationIndex: function (cancelFunc) { - return this.indexOf(this.findAnimation(cancelFunc)); + context = extend(clone(options), { + cancel: function () { + cancel = true; + return removeFromRegistry(); }, + currentValue: 'startValue' in options ? options.startValue : 0, + completionRate: 0, + durationRate: 0 + }); + fabric.runningAnimations.push(context); + + requestAnimFrame(function(timestamp) { + var start = timestamp || +new Date(), + duration = options.duration || 500, + finish = start + duration, time, + onChange = options.onChange || noop, + abort = options.abort || noop, + onComplete = options.onComplete || noop, + easing = options.easing || defaultEasing, + isMany = 'startValue' in options ? options.startValue.length > 0 : false, + startValue = 'startValue' in options ? options.startValue : 0, + endValue = 'endValue' in options ? options.endValue : 100, + byValue = options.byValue || (isMany ? startValue.map(function(value, i) { + return endValue[i] - startValue[i]; + }) : endValue - startValue); + + options.onStart && options.onStart(); + + (function tick(ticktime) { + time = ticktime || +new Date(); + var currentTime = time > finish ? duration : (time - start), + timePerc = currentTime / duration, + current = isMany ? startValue.map(function(_value, i) { + return easing(currentTime, startValue[i], byValue[i], duration); + }) : easing(currentTime, startValue, byValue, duration), + valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0]) + : Math.abs((current - startValue) / byValue); + // update context + context.currentValue = isMany ? current.slice() : current; + context.completionRate = valuePerc; + context.durationRate = timePerc; + if (cancel) { + return; + } + if (abort(current, valuePerc, timePerc)) { + removeFromRegistry(); + return; + } + if (time > finish) { + // update context + context.currentValue = isMany ? endValue.slice() : endValue; + context.completionRate = 1; + context.durationRate = 1; + // execute callbacks + onChange(isMany ? endValue.slice() : endValue, 1, 1); + onComplete(endValue, 1, 1); + removeFromRegistry(); + return; + } + else { + onChange(current, valuePerc, timePerc); + requestAnimFrame(tick); + } + })(start); + }); - /** - * - * @param {CancelFunction} cancelFunc the function returned by animate - * @returns {AnimationContext | undefined} animation's options object - */ - findAnimation: function (cancelFunc) { - return this.find(function (animation) { - return animation.cancel === cancelFunc; - }); - }, + return context.cancel; + } - /** - * - * @param {*} target the object that is assigned to the target property of the animation context - * @returns {AnimationContext[]} array of animation options object associated with target - */ - findAnimationsByTarget: function (target) { - if (!target) { - return []; + var _requestAnimFrame = fabric.window.requestAnimationFrame || + fabric.window.webkitRequestAnimationFrame || + fabric.window.mozRequestAnimationFrame || + fabric.window.oRequestAnimationFrame || + fabric.window.msRequestAnimationFrame || + function(callback) { + return fabric.window.setTimeout(callback, 1000 / 60); + }; + + var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout; + + /** + * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method + * @memberOf fabric.util + * @param {Function} callback Callback to invoke + * @param {DOMElement} element optional Element to associate with animation + */ + function requestAnimFrame() { + return _requestAnimFrame.apply(fabric.window, arguments); + } + + function cancelAnimFrame() { + return _cancelAnimFrame.apply(fabric.window, arguments); + } + + fabric.util.animate = animate; + fabric.util.requestAnimFrame = requestAnimFrame; + fabric.util.cancelAnimFrame = cancelAnimFrame; + fabric.runningAnimations = RUNNING_ANIMATIONS; +})(); + + +(function() { + // Calculate an in-between color. Returns a "rgba()" string. + // Credit: Edwin Martin + // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js + function calculateColor(begin, end, pos) { + var color = 'rgba(' + + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' + + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' + + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); + + color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); + color += ')'; + return color; + } + + /** + * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. + * @memberOf fabric.util + * @param {String} fromColor The starting color in hex or rgb(a) format. + * @param {String} toColor The starting color in hex or rgb(a) format. + * @param {Number} [duration] Duration of change (in ms). + * @param {Object} [options] Animation options + * @param {Function} [options.onChange] Callback; invoked on every value change + * @param {Function} [options.onComplete] Callback; invoked when value change is completed + * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used. + * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. + * @returns {Function} abort function + */ + function animateColor(fromColor, toColor, duration, options) { + var startColor = new fabric.Color(fromColor).getSource(), + endColor = new fabric.Color(toColor).getSource(), + originalOnComplete = options.onComplete, + originalOnChange = options.onChange; + options = options || {}; + + return fabric.util.animate(fabric.util.object.extend(options, { + duration: duration || 500, + startValue: startColor, + endValue: endColor, + byValue: endColor, + easing: function (currentTime, startValue, byValue, duration) { + var posValue = options.colorEasing + ? options.colorEasing(currentTime, duration) + : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); + return calculateColor(startValue, byValue, posValue); + }, + // has to take in account for color restoring; + onComplete: function(current, valuePerc, timePerc) { + if (originalOnComplete) { + return originalOnComplete( + calculateColor(endColor, endColor, 0), + valuePerc, + timePerc + ); + } + }, + onChange: function(current, valuePerc, timePerc) { + if (originalOnChange) { + if (Array.isArray(current)) { + return originalOnChange( + calculateColor(current, current, 0), + valuePerc, + timePerc + ); + } + originalOnChange(current, valuePerc, timePerc); } - return this.filter(function (animation) { - return animation.target === target; - }); } - }); + })); + } - function noop() { - return false; - } + fabric.util.animateColor = animateColor; - function defaultEasing(t, b, c, d) { - return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; - } +})(); - /** - * Changes value from one to another within certain period of time, invoking callbacks as value is being changed. - * @memberOf fabric.util - * @param {AnimationOptions} [options] Animation options - * When using lists, think of something like this: - * @example - * fabric.util.animate({ - * startValue: [1, 2, 3], - * endValue: [2, 4, 6], - * onChange: function([x, y, zoom]) { - * canvas.zoomToPoint(new fabric.Point(x, y), zoom); - * canvas.requestRenderAll(); - * } - * }); - * - * @example - * fabric.util.animate({ - * startValue: 1, - * endValue: 0, - * onChange: function(v) { - * obj.set('opacity', v); - * canvas.requestRenderAll(); - * } - * }); - * - * @returns {CancelFunction} cancel function - */ - function animate(options) { - options || (options = {}); - var cancel = false, - context, - removeFromRegistry = function () { - var index = fabric.runningAnimations.indexOf(context); - return index > -1 && fabric.runningAnimations.splice(index, 1)[0]; - }; - context = Object.assign({}, options, { - cancel: function () { - cancel = true; - return removeFromRegistry(); - }, - currentValue: 'startValue' in options ? options.startValue : 0, - completionRate: 0, - durationRate: 0 - }); - fabric.runningAnimations.push(context); - - var runner = function (timestamp) { - var start = timestamp || +new Date(), - duration = options.duration || 500, - finish = start + duration, time, - onChange = options.onChange || noop, - abort = options.abort || noop, - onComplete = options.onComplete || noop, - easing = options.easing || defaultEasing, - isMany = 'startValue' in options ? options.startValue.length > 0 : false, - startValue = 'startValue' in options ? options.startValue : 0, - endValue = 'endValue' in options ? options.endValue : 100, - byValue = options.byValue || (isMany ? startValue.map(function(value, i) { - return endValue[i] - startValue[i]; - }) : endValue - startValue); - - options.onStart && options.onStart(); - - (function tick(ticktime) { - time = ticktime || +new Date(); - var currentTime = time > finish ? duration : (time - start), - timePerc = currentTime / duration, - current = isMany ? startValue.map(function(_value, i) { - return easing(currentTime, startValue[i], byValue[i], duration); - }) : easing(currentTime, startValue, byValue, duration), - valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0]) - : Math.abs((current - startValue) / byValue); - // update context - context.currentValue = isMany ? current.slice() : current; - context.completionRate = valuePerc; - context.durationRate = timePerc; - if (cancel) { - return; - } - if (abort(current, valuePerc, timePerc)) { - removeFromRegistry(); - return; - } - if (time > finish) { - // update context - context.currentValue = isMany ? endValue.slice() : endValue; - context.completionRate = 1; - context.durationRate = 1; - // execute callbacks - onChange(isMany ? endValue.slice() : endValue, 1, 1); - onComplete(endValue, 1, 1); - removeFromRegistry(); - return; - } - else { - onChange(current, valuePerc, timePerc); - requestAnimFrame(tick); - } - })(start); - }; +(function() { - if (options.delay) { - setTimeout(function () { - requestAnimFrame(runner); - }, options.delay); + function normalize(a, c, p, s) { + if (a < Math.abs(c)) { + a = c; + s = p / 4; + } + else { + //handle the 0/0 case: + if (c === 0 && a === 0) { + s = p / (2 * Math.PI) * Math.asin(1); } else { - requestAnimFrame(runner); + s = p / (2 * Math.PI) * Math.asin(c / a); } + } + return { a: a, c: c, p: p, s: s }; + } + + function elastic(opts, t, d) { + return opts.a * + Math.pow(2, 10 * (t -= 1)) * + Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p ); + } + + /** + * Cubic easing out + * @memberOf fabric.util.ease + */ + function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; + } + + /** + * Cubic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutCubic(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t + b; + } + return c / 2 * ((t -= 2) * t * t + 2) + b; + } + + /** + * Quartic easing in + * @memberOf fabric.util.ease + */ + function easeInQuart(t, b, c, d) { + return c * (t /= d) * t * t * t + b; + } - return context.cancel; + /** + * Quartic easing out + * @memberOf fabric.util.ease + */ + function easeOutQuart(t, b, c, d) { + return -c * ((t = t / d - 1) * t * t * t - 1) + b; + } + + /** + * Quartic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutQuart(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t + b; } + return -c / 2 * ((t -= 2) * t * t * t - 2) + b; + } - var _requestAnimFrame = fabric.window.requestAnimationFrame || - fabric.window.webkitRequestAnimationFrame || - fabric.window.mozRequestAnimationFrame || - fabric.window.oRequestAnimationFrame || - fabric.window.msRequestAnimationFrame || - function(callback) { - return fabric.window.setTimeout(callback, 1000 / 60); - }; + /** + * Quintic easing in + * @memberOf fabric.util.ease + */ + function easeInQuint(t, b, c, d) { + return c * (t /= d) * t * t * t * t + b; + } - var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout; + /** + * Quintic easing out + * @memberOf fabric.util.ease + */ + function easeOutQuint(t, b, c, d) { + return c * ((t = t / d - 1) * t * t * t * t + 1) + b; + } - /** - * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/ - * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method - * @memberOf fabric.util - * @param {Function} callback Callback to invoke - * @param {DOMElement} element optional Element to associate with animation - */ - function requestAnimFrame() { - return _requestAnimFrame.apply(fabric.window, arguments); + /** + * Quintic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutQuint(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t * t + b; } + return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; + } + + /** + * Sinusoidal easing in + * @memberOf fabric.util.ease + */ + function easeInSine(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; + } + + /** + * Sinusoidal easing out + * @memberOf fabric.util.ease + */ + function easeOutSine(t, b, c, d) { + return c * Math.sin(t / d * (Math.PI / 2)) + b; + } + + /** + * Sinusoidal easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutSine(t, b, c, d) { + return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; + } + + /** + * Exponential easing in + * @memberOf fabric.util.ease + */ + function easeInExpo(t, b, c, d) { + return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; + } + + /** + * Exponential easing out + * @memberOf fabric.util.ease + */ + function easeOutExpo(t, b, c, d) { + return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; + } - function cancelAnimFrame() { - return _cancelAnimFrame.apply(fabric.window, arguments); + /** + * Exponential easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutExpo(t, b, c, d) { + if (t === 0) { + return b; + } + if (t === d) { + return b + c; } + t /= d / 2; + if (t < 1) { + return c / 2 * Math.pow(2, 10 * (t - 1)) + b; + } + return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; + } - fabric.util.animate = animate; - fabric.util.requestAnimFrame = requestAnimFrame; - fabric.util.cancelAnimFrame = cancelAnimFrame; - fabric.runningAnimations = RUNNING_ANIMATIONS; - })(typeof exports !== 'undefined' ? exports : window); + /** + * Circular easing in + * @memberOf fabric.util.ease + */ + function easeInCirc(t, b, c, d) { + return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; + } - (function(global) { - var fabric = global.fabric; - // Calculate an in-between color. Returns a "rgba()" string. - // Credit: Edwin Martin - // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js - function calculateColor(begin, end, pos) { - var color = 'rgba(' - + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' - + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' - + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); + /** + * Circular easing out + * @memberOf fabric.util.ease + */ + function easeOutCirc(t, b, c, d) { + return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; + } - color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); - color += ')'; - return color; + /** + * Circular easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutCirc(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; } + return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; + } - /** - * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. - * @memberOf fabric.util - * @param {String} fromColor The starting color in hex or rgb(a) format. - * @param {String} toColor The starting color in hex or rgb(a) format. - * @param {Number} [duration] Duration of change (in ms). - * @param {Object} [options] Animation options - * @param {Function} [options.onChange] Callback; invoked on every value change - * @param {Function} [options.onComplete] Callback; invoked when value change is completed - * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used. - * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. - * @returns {Function} abort function - */ - function animateColor(fromColor, toColor, duration, options) { - var startColor = new fabric.Color(fromColor).getSource(), - endColor = new fabric.Color(toColor).getSource(), - originalOnComplete = options.onComplete, - originalOnChange = options.onChange; - options = options || {}; + /** + * Elastic easing in + * @memberOf fabric.util.ease + */ + function easeInElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; + } + var opts = normalize(a, c, p, s); + return -elastic(opts, t, d) + b; + } - return fabric.util.animate(Object.assign(options, { - duration: duration || 500, - startValue: startColor, - endValue: endColor, - byValue: endColor, - easing: function (currentTime, startValue, byValue, duration) { - var posValue = options.colorEasing - ? options.colorEasing(currentTime, duration) - : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); - return calculateColor(startValue, byValue, posValue); - }, - // has to take in account for color restoring; - onComplete: function(current, valuePerc, timePerc) { - if (originalOnComplete) { - return originalOnComplete( - calculateColor(endColor, endColor, 0), - valuePerc, - timePerc - ); - } - }, - onChange: function(current, valuePerc, timePerc) { - if (originalOnChange) { - if (Array.isArray(current)) { - return originalOnChange( - calculateColor(current, current, 0), - valuePerc, - timePerc - ); - } - originalOnChange(current, valuePerc, timePerc); - } - } - })); + /** + * Elastic easing out + * @memberOf fabric.util.ease + */ + function easeOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; } + var opts = normalize(a, c, p, s); + return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; + } - fabric.util.animateColor = animateColor; + /** + * Elastic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d / 2; + if (t === 2) { + return b + c; + } + if (!p) { + p = d * (0.3 * 1.5); + } + var opts = normalize(a, c, p, s); + if (t < 1) { + return -0.5 * elastic(opts, t, d) + b; + } + return opts.a * Math.pow(2, -10 * (t -= 1)) * + Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; + } - })(typeof exports !== 'undefined' ? exports : window); + /** + * Backwards easing in + * @memberOf fabric.util.ease + */ + function easeInBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + return c * (t /= d) * t * ((s + 1) * t - s) + b; + } - (function(global) { - var fabric = global.fabric; - function normalize(a, c, p, s) { - if (a < Math.abs(c)) { - a = c; - s = p / 4; - } - else { - //handle the 0/0 case: - if (c === 0 && a === 0) { - s = p / (2 * Math.PI) * Math.asin(1); - } - else { - s = p / (2 * Math.PI) * Math.asin(c / a); - } - } - return { a: a, c: c, p: p, s: s }; + /** + * Backwards easing out + * @memberOf fabric.util.ease + */ + function easeOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; } + return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; + } - function elastic(opts, t, d) { - return opts.a * - Math.pow(2, 10 * (t -= 1)) * - Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p ); + /** + * Backwards easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + t /= d / 2; + if (t < 1) { + return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; } + return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; + } - /** - * Cubic easing out - * @memberOf fabric.util.ease - */ - function easeOutCubic(t, b, c, d) { - return c * ((t = t / d - 1) * t * t + 1) + b; + /** + * Bouncing easing in + * @memberOf fabric.util.ease + */ + function easeInBounce(t, b, c, d) { + return c - easeOutBounce (d - t, 0, c, d) + b; + } + + /** + * Bouncing easing out + * @memberOf fabric.util.ease + */ + function easeOutBounce(t, b, c, d) { + if ((t /= d) < (1 / 2.75)) { + return c * (7.5625 * t * t) + b; + } + else if (t < (2 / 2.75)) { + return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; + } + else if (t < (2.5 / 2.75)) { + return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; } + else { + return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; + } + } - /** - * Cubic easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutCubic(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t + b; - } - return c / 2 * ((t -= 2) * t * t + 2) + b; + /** + * Bouncing easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutBounce(t, b, c, d) { + if (t < d / 2) { + return easeInBounce (t * 2, 0, c, d) * 0.5 + b; } + return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; + } + + /** + * Easing functions + * See Easing Equations by Robert Penner + * @namespace fabric.util.ease + */ + fabric.util.ease = { /** - * Quartic easing in + * Quadratic easing in * @memberOf fabric.util.ease */ - function easeInQuart(t, b, c, d) { - return c * (t /= d) * t * t * t + b; - } + easeInQuad: function(t, b, c, d) { + return c * (t /= d) * t + b; + }, /** - * Quartic easing out + * Quadratic easing out * @memberOf fabric.util.ease */ - function easeOutQuart(t, b, c, d) { - return -c * ((t = t / d - 1) * t * t * t - 1) + b; - } + easeOutQuad: function(t, b, c, d) { + return -c * (t /= d) * (t - 2) + b; + }, /** - * Quartic easing in and out + * Quadratic easing in and out * @memberOf fabric.util.ease */ - function easeInOutQuart(t, b, c, d) { - t /= d / 2; + easeInOutQuad: function(t, b, c, d) { + t /= (d / 2); if (t < 1) { - return c / 2 * t * t * t * t + b; + return c / 2 * t * t + b; } - return -c / 2 * ((t -= 2) * t * t * t - 2) + b; - } - - /** - * Quintic easing in - * @memberOf fabric.util.ease - */ - function easeInQuint(t, b, c, d) { - return c * (t /= d) * t * t * t * t + b; - } - - /** - * Quintic easing out - * @memberOf fabric.util.ease - */ - function easeOutQuint(t, b, c, d) { - return c * ((t = t / d - 1) * t * t * t * t + 1) + b; - } + return -c / 2 * ((--t) * (t - 2) - 1) + b; + }, /** - * Quintic easing in and out + * Cubic easing in * @memberOf fabric.util.ease */ - function easeInOutQuint(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return c / 2 * t * t * t * t * t + b; - } - return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; - } + easeInCubic: function(t, b, c, d) { + return c * (t /= d) * t * t + b; + }, + + easeOutCubic: easeOutCubic, + easeInOutCubic: easeInOutCubic, + easeInQuart: easeInQuart, + easeOutQuart: easeOutQuart, + easeInOutQuart: easeInOutQuart, + easeInQuint: easeInQuint, + easeOutQuint: easeOutQuint, + easeInOutQuint: easeInOutQuint, + easeInSine: easeInSine, + easeOutSine: easeOutSine, + easeInOutSine: easeInOutSine, + easeInExpo: easeInExpo, + easeOutExpo: easeOutExpo, + easeInOutExpo: easeInOutExpo, + easeInCirc: easeInCirc, + easeOutCirc: easeOutCirc, + easeInOutCirc: easeInOutCirc, + easeInElastic: easeInElastic, + easeOutElastic: easeOutElastic, + easeInOutElastic: easeInOutElastic, + easeInBack: easeInBack, + easeOutBack: easeOutBack, + easeInOutBack: easeInOutBack, + easeInBounce: easeInBounce, + easeOutBounce: easeOutBounce, + easeInOutBounce: easeInOutBounce + }; - /** - * Sinusoidal easing in - * @memberOf fabric.util.ease - */ - function easeInSine(t, b, c, d) { - return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; - } +})(); - /** - * Sinusoidal easing out - * @memberOf fabric.util.ease - */ - function easeOutSine(t, b, c, d) { - return c * Math.sin(t / d * (Math.PI / 2)) + b; - } - /** - * Sinusoidal easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutSine(t, b, c, d) { - return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; - } +(function(global) { - /** - * Exponential easing in - * @memberOf fabric.util.ease - */ - function easeInExpo(t, b, c, d) { - return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; - } + 'use strict'; - /** - * Exponential easing out - * @memberOf fabric.util.ease - */ - function easeOutExpo(t, b, c, d) { - return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; - } + /** + * @name fabric + * @namespace + */ - /** - * Exponential easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutExpo(t, b, c, d) { - if (t === 0) { - return b; - } - if (t === d) { - return b + c; - } - t /= d / 2; - if (t < 1) { - return c / 2 * Math.pow(2, 10 * (t - 1)) + b; - } - return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed, + parseUnit = fabric.util.parseUnit, + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + + svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', + 'image', 'text'], + svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], + svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], + svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], + + attributesMap = { + cx: 'left', + x: 'left', + r: 'radius', + cy: 'top', + y: 'top', + display: 'visible', + visibility: 'visible', + transform: 'transformMatrix', + 'fill-opacity': 'fillOpacity', + 'fill-rule': 'fillRule', + 'font-family': 'fontFamily', + 'font-size': 'fontSize', + 'font-style': 'fontStyle', + 'font-weight': 'fontWeight', + 'letter-spacing': 'charSpacing', + 'paint-order': 'paintFirst', + 'stroke-dasharray': 'strokeDashArray', + 'stroke-dashoffset': 'strokeDashOffset', + 'stroke-linecap': 'strokeLineCap', + 'stroke-linejoin': 'strokeLineJoin', + 'stroke-miterlimit': 'strokeMiterLimit', + 'stroke-opacity': 'strokeOpacity', + 'stroke-width': 'strokeWidth', + 'text-decoration': 'textDecoration', + 'text-anchor': 'textAnchor', + opacity: 'opacity', + 'clip-path': 'clipPath', + 'clip-rule': 'clipRule', + 'vector-effect': 'strokeUniform', + 'image-rendering': 'imageSmoothing', + }, + + colorAttributes = { + stroke: 'strokeOpacity', + fill: 'fillOpacity' + }, + + fSize = 'font-size', cPath = 'clip-path'; + + fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); + fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); + fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); + fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); + + fabric.cssRules = { }; + fabric.gradientDefs = { }; + fabric.clipPaths = { }; + + function normalizeAttr(attr) { + // transform attribute names + if (attr in attributesMap) { + return attributesMap[attr]; } + return attr; + } - /** - * Circular easing in - * @memberOf fabric.util.ease - */ - function easeInCirc(t, b, c, d) { - return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; - } + function normalizeValue(attr, value, parentAttributes, fontSize) { + var isArray = Object.prototype.toString.call(value) === '[object Array]', + parsed; - /** - * Circular easing out - * @memberOf fabric.util.ease - */ - function easeOutCirc(t, b, c, d) { - return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; + if ((attr === 'fill' || attr === 'stroke') && value === 'none') { + value = ''; } - - /** - * Circular easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutCirc(t, b, c, d) { - t /= d / 2; - if (t < 1) { - return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; - } - return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; + else if (attr === 'strokeUniform') { + return (value === 'non-scaling-stroke'); } - - /** - * Elastic easing in - * @memberOf fabric.util.ease - */ - function easeInElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; + else if (attr === 'strokeDashArray') { + if (value === 'none') { + value = null; } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; + else { + value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); } - var opts = normalize(a, c, p, s); - return -elastic(opts, t, d) + b; } - - /** - * Elastic easing out - * @memberOf fabric.util.ease - */ - function easeOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; + else if (attr === 'transformMatrix') { + if (parentAttributes && parentAttributes.transformMatrix) { + value = multiplyTransformMatrices( + parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); } - t /= d; - if (t === 1) { - return b + c; - } - if (!p) { - p = d * 0.3; + else { + value = fabric.parseTransformAttribute(value); } - var opts = normalize(a, c, p, s); - return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; } - - /** - * Elastic easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutElastic(t, b, c, d) { - var s = 1.70158, p = 0, a = c; - if (t === 0) { - return b; - } - t /= d / 2; - if (t === 2) { - return b + c; - } - if (!p) { - p = d * (0.3 * 1.5); - } - var opts = normalize(a, c, p, s); - if (t < 1) { - return -0.5 * elastic(opts, t, d) + b; + else if (attr === 'visible') { + value = value !== 'none' && value !== 'hidden'; + // display=none on parent element always takes precedence over child element + if (parentAttributes && parentAttributes.visible === false) { + value = false; } - return opts.a * Math.pow(2, -10 * (t -= 1)) * - Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; } - - /** - * Backwards easing in - * @memberOf fabric.util.ease - */ - function easeInBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; + else if (attr === 'opacity') { + value = parseFloat(value); + if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { + value *= parentAttributes.opacity; } - return c * (t /= d) * t * ((s + 1) * t - s) + b; } - - /** - * Backwards easing out - * @memberOf fabric.util.ease - */ - function easeOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; - } - return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; + else if (attr === 'textAnchor' /* text-anchor */) { + value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; } - - /** - * Backwards easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutBack(t, b, c, d, s) { - if (s === undefined) { - s = 1.70158; + else if (attr === 'charSpacing') { + // parseUnit returns px and we convert it to em + parsed = parseUnit(value, fontSize) / fontSize * 1000; + } + else if (attr === 'paintFirst') { + var fillIndex = value.indexOf('fill'); + var strokeIndex = value.indexOf('stroke'); + var value = 'fill'; + if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { + value = 'stroke'; } - t /= d / 2; - if (t < 1) { - return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; + else if (fillIndex === -1 && strokeIndex > -1) { + value = 'stroke'; } - return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; } - - /** - * Bouncing easing in - * @memberOf fabric.util.ease - */ - function easeInBounce(t, b, c, d) { - return c - easeOutBounce (d - t, 0, c, d) + b; + else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { + return value; } - - /** - * Bouncing easing out - * @memberOf fabric.util.ease - */ - function easeOutBounce(t, b, c, d) { - if ((t /= d) < (1 / 2.75)) { - return c * (7.5625 * t * t) + b; - } - else if (t < (2 / 2.75)) { - return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; - } - else if (t < (2.5 / 2.75)) { - return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; - } - else { - return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; - } + else if (attr === 'imageSmoothing') { + return (value === 'optimizeQuality'); } - - /** - * Bouncing easing in and out - * @memberOf fabric.util.ease - */ - function easeInOutBounce(t, b, c, d) { - if (t < d / 2) { - return easeInBounce (t * 2, 0, c, d) * 0.5 + b; - } - return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; + else { + parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); } - /** - * Easing functions - * See Easing Equations by Robert Penner - * @namespace fabric.util.ease - */ - fabric.util.ease = { - - /** - * Quadratic easing in - * @memberOf fabric.util.ease - */ - easeInQuad: function(t, b, c, d) { - return c * (t /= d) * t + b; - }, - - /** - * Quadratic easing out - * @memberOf fabric.util.ease - */ - easeOutQuad: function(t, b, c, d) { - return -c * (t /= d) * (t - 2) + b; - }, - - /** - * Quadratic easing in and out - * @memberOf fabric.util.ease - */ - easeInOutQuad: function(t, b, c, d) { - t /= (d / 2); - if (t < 1) { - return c / 2 * t * t + b; - } - return -c / 2 * ((--t) * (t - 2) - 1) + b; - }, - - /** - * Cubic easing in - * @memberOf fabric.util.ease - */ - easeInCubic: function(t, b, c, d) { - return c * (t /= d) * t * t + b; - }, - - easeOutCubic: easeOutCubic, - easeInOutCubic: easeInOutCubic, - easeInQuart: easeInQuart, - easeOutQuart: easeOutQuart, - easeInOutQuart: easeInOutQuart, - easeInQuint: easeInQuint, - easeOutQuint: easeOutQuint, - easeInOutQuint: easeInOutQuint, - easeInSine: easeInSine, - easeOutSine: easeOutSine, - easeInOutSine: easeInOutSine, - easeInExpo: easeInExpo, - easeOutExpo: easeOutExpo, - easeInOutExpo: easeInOutExpo, - easeInCirc: easeInCirc, - easeOutCirc: easeOutCirc, - easeInOutCirc: easeInOutCirc, - easeInElastic: easeInElastic, - easeOutElastic: easeOutElastic, - easeInOutElastic: easeInOutElastic, - easeInBack: easeInBack, - easeOutBack: easeOutBack, - easeInOutBack: easeInOutBack, - easeInBounce: easeInBounce, - easeOutBounce: easeOutBounce, - easeInOutBounce: easeInOutBounce - }; - - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - /** - * @name fabric - * @namespace - */ - - var fabric = global.fabric || (global.fabric = { }), - toFixed = fabric.util.toFixed, - parseUnit = fabric.util.parseUnit, - multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, - - svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', - 'image', 'text'], - svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], - svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], - svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], - - attributesMap = { - cx: 'left', - x: 'left', - r: 'radius', - cy: 'top', - y: 'top', - display: 'visible', - visibility: 'visible', - transform: 'transformMatrix', - 'fill-opacity': 'fillOpacity', - 'fill-rule': 'fillRule', - 'font-family': 'fontFamily', - 'font-size': 'fontSize', - 'font-style': 'fontStyle', - 'font-weight': 'fontWeight', - 'letter-spacing': 'charSpacing', - 'paint-order': 'paintFirst', - 'stroke-dasharray': 'strokeDashArray', - 'stroke-dashoffset': 'strokeDashOffset', - 'stroke-linecap': 'strokeLineCap', - 'stroke-linejoin': 'strokeLineJoin', - 'stroke-miterlimit': 'strokeMiterLimit', - 'stroke-opacity': 'strokeOpacity', - 'stroke-width': 'strokeWidth', - 'text-decoration': 'textDecoration', - 'text-anchor': 'textAnchor', - opacity: 'opacity', - 'clip-path': 'clipPath', - 'clip-rule': 'clipRule', - 'vector-effect': 'strokeUniform', - 'image-rendering': 'imageSmoothing', - }, - - colorAttributes = { - stroke: 'strokeOpacity', - fill: 'fillOpacity' - }, - - fSize = 'font-size', cPath = 'clip-path'; + return (!isArray && isNaN(parsed) ? value : parsed); + } - fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); - fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); - fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); - fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); + /** + * @private + */ + function getSvgRegex(arr) { + return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); + } - fabric.cssRules = { }; - fabric.gradientDefs = { }; - fabric.clipPaths = { }; + /** + * @private + * @param {Object} attributes Array of attributes to parse + */ + function _setStrokeFillOpacity(attributes) { + for (var attr in colorAttributes) { - function normalizeAttr(attr) { - // transform attribute names - if (attr in attributesMap) { - return attributesMap[attr]; + if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { + continue; } - return attr; - } - - function normalizeValue(attr, value, parentAttributes, fontSize) { - var isArray = Array.isArray(value), parsed; - if ((attr === 'fill' || attr === 'stroke') && value === 'none') { - value = ''; - } - else if (attr === 'strokeUniform') { - return (value === 'non-scaling-stroke'); - } - else if (attr === 'strokeDashArray') { - if (value === 'none') { - value = null; - } - else { - value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); - } - } - else if (attr === 'transformMatrix') { - if (parentAttributes && parentAttributes.transformMatrix) { - value = multiplyTransformMatrices( - parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); - } - else { - value = fabric.parseTransformAttribute(value); - } - } - else if (attr === 'visible') { - value = value !== 'none' && value !== 'hidden'; - // display=none on parent element always takes precedence over child element - if (parentAttributes && parentAttributes.visible === false) { - value = false; - } - } - else if (attr === 'opacity') { - value = parseFloat(value); - if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { - value *= parentAttributes.opacity; - } - } - else if (attr === 'textAnchor' /* text-anchor */) { - value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; - } - else if (attr === 'charSpacing') { - // parseUnit returns px and we convert it to em - parsed = parseUnit(value, fontSize) / fontSize * 1000; - } - else if (attr === 'paintFirst') { - var fillIndex = value.indexOf('fill'); - var strokeIndex = value.indexOf('stroke'); - var value = 'fill'; - if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { - value = 'stroke'; - } - else if (fillIndex === -1 && strokeIndex > -1) { - value = 'stroke'; + if (typeof attributes[attr] === 'undefined') { + if (!fabric.Object.prototype[attr]) { + continue; } + attributes[attr] = fabric.Object.prototype[attr]; } - else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { - return value; - } - else if (attr === 'imageSmoothing') { - return (value === 'optimizeQuality'); - } - else { - parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); + + if (attributes[attr].indexOf('url(') === 0) { + continue; } - return (!isArray && isNaN(parsed) ? value : parsed); + var color = new fabric.Color(attributes[attr]); + attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); } + return attributes; + } - /** - * @private - */ - function getSvgRegex(arr) { - return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); + /** + * @private + */ + function _getMultipleNodes(doc, nodeNames) { + var nodeName, nodeArray = [], nodeList, i, len; + for (i = 0, len = nodeNames.length; i < len; i++) { + nodeName = nodeNames[i]; + nodeList = doc.getElementsByTagName(nodeName); + nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); } + return nodeArray; + } - /** - * @private - * @param {Object} attributes Array of attributes to parse - */ - function _setStrokeFillOpacity(attributes) { - for (var attr in colorAttributes) { - - if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { - continue; - } - - if (typeof attributes[attr] === 'undefined') { - if (!fabric.Object.prototype[attr]) { - continue; - } - attributes[attr] = fabric.Object.prototype[attr]; - } + /** + * Parses "transform" attribute, returning an array of values + * @static + * @function + * @memberOf fabric + * @param {String} attributeValue String containing attribute value + * @return {Array} Array of 6 elements representing transformation matrix + */ + fabric.parseTransformAttribute = (function() { + function rotateMatrix(matrix, args) { + var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), + x = 0, y = 0; + if (args.length === 3) { + x = args[1]; + y = args[2]; + } + + matrix[0] = cos; + matrix[1] = sin; + matrix[2] = -sin; + matrix[3] = cos; + matrix[4] = x - (cos * x - sin * y); + matrix[5] = y - (sin * x + cos * y); + } - if (attributes[attr].indexOf('url(') === 0) { - continue; - } + function scaleMatrix(matrix, args) { + var multiplierX = args[0], + multiplierY = (args.length === 2) ? args[1] : args[0]; - var color = new fabric.Color(attributes[attr]); - attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); - } - return attributes; + matrix[0] = multiplierX; + matrix[3] = multiplierY; } - /** - * @private - */ - function _getMultipleNodes(doc, nodeNames) { - var nodeName, nodeArray = [], nodeList, i, len; - for (i = 0, len = nodeNames.length; i < len; i++) { - nodeName = nodeNames[i]; - nodeList = doc.getElementsByTagName(nodeName); - nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); - } - return nodeArray; + function skewMatrix(matrix, args, pos) { + matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); } - /** - * Parses "transform" attribute, returning an array of values - * @static - * @function - * @memberOf fabric - * @param {String} attributeValue String containing attribute value - * @return {Array} Array of 6 elements representing transformation matrix - */ - fabric.parseTransformAttribute = (function() { - function rotateMatrix(matrix, args) { - var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), - x = 0, y = 0; - if (args.length === 3) { - x = args[1]; - y = args[2]; - } - - matrix[0] = cos; - matrix[1] = sin; - matrix[2] = -sin; - matrix[3] = cos; - matrix[4] = x - (cos * x - sin * y); - matrix[5] = y - (sin * x + cos * y); + function translateMatrix(matrix, args) { + matrix[4] = args[0]; + if (args.length === 2) { + matrix[5] = args[1]; } + } - function scaleMatrix(matrix, args) { - var multiplierX = args[0], - multiplierY = (args.length === 2) ? args[1] : args[0]; - - matrix[0] = multiplierX; - matrix[3] = multiplierY; - } + // identity matrix + var iMatrix = fabric.iMatrix, - function skewMatrix(matrix, args, pos) { - matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); - } + // == begin transform regexp + number = fabric.reNum, - function translateMatrix(matrix, args) { - matrix[4] = args[0]; - if (args.length === 2) { - matrix[5] = args[1]; - } - } + commaWsp = fabric.commaWsp, - // identity matrix - var iMatrix = fabric.iMatrix, + skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', - // == begin transform regexp - number = fabric.reNum, + skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', - commaWsp = fabric.commaWsp, + rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + ')' + + commaWsp + '(' + number + '))?\\s*\\))', - skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', + scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + '))?\\s*\\))', - skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', + translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + '))?\\s*\\))', - rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + - commaWsp + '(' + number + ')' + - commaWsp + '(' + number + '))?\\s*\\))', + matrix = '(?:(matrix)\\s*\\(\\s*' + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + + '\\s*\\))', - scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + - commaWsp + '(' + number + '))?\\s*\\))', + transform = '(?:' + + matrix + '|' + + translate + '|' + + scale + '|' + + rotate + '|' + + skewX + '|' + + skewY + + ')', - translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + - commaWsp + '(' + number + '))?\\s*\\))', + transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', - matrix = '(?:(matrix)\\s*\\(\\s*' + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + commaWsp + - '(' + number + ')' + - '\\s*\\))', + transformList = '^\\s*(?:' + transforms + '?)\\s*$', - transform = '(?:' + - matrix + '|' + - translate + '|' + - scale + '|' + - rotate + '|' + - skewX + '|' + - skewY + - ')', + // http://www.w3.org/TR/SVG/coords.html#TransformAttribute + reTransformList = new RegExp(transformList), + // == end transform regexp - transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', + reTransform = new RegExp(transform, 'g'); - transformList = '^\\s*(?:' + transforms + '?)\\s*$', + return function(attributeValue) { - // http://www.w3.org/TR/SVG/coords.html#TransformAttribute - reTransformList = new RegExp(transformList), - // == end transform regexp + // start with identity matrix + var matrix = iMatrix.concat(), + matrices = []; - reTransform = new RegExp(transform, 'g'); + // return if no argument was given or + // an argument does not match transform attribute regexp + if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { + return matrix; + } - return function(attributeValue) { + attributeValue.replace(reTransform, function(match) { - // start with identity matrix - var matrix = iMatrix.concat(), - matrices = []; + var m = new RegExp(transform).exec(match).filter(function (match) { + // match !== '' && match != null + return (!!match); + }), + operation = m[1], + args = m.slice(2).map(parseFloat); - // return if no argument was given or - // an argument does not match transform attribute regexp - if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { - return matrix; + switch (operation) { + case 'translate': + translateMatrix(matrix, args); + break; + case 'rotate': + args[0] = fabric.util.degreesToRadians(args[0]); + rotateMatrix(matrix, args); + break; + case 'scale': + scaleMatrix(matrix, args); + break; + case 'skewX': + skewMatrix(matrix, args, 2); + break; + case 'skewY': + skewMatrix(matrix, args, 1); + break; + case 'matrix': + matrix = args; + break; } - attributeValue.replace(reTransform, function(match) { + // snapshot current matrix into matrices array + matrices.push(matrix.concat()); + // reset + matrix = iMatrix.concat(); + }); - var m = new RegExp(transform).exec(match).filter(function (match) { - // match !== '' && match != null - return (!!match); - }), - operation = m[1], - args = m.slice(2).map(parseFloat); + var combinedMatrix = matrices[0]; + while (matrices.length > 1) { + matrices.shift(); + combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); + } + return combinedMatrix; + }; + })(); - switch (operation) { - case 'translate': - translateMatrix(matrix, args); - break; - case 'rotate': - args[0] = fabric.util.degreesToRadians(args[0]); - rotateMatrix(matrix, args); - break; - case 'scale': - scaleMatrix(matrix, args); - break; - case 'skewX': - skewMatrix(matrix, args, 2); - break; - case 'skewY': - skewMatrix(matrix, args, 1); - break; - case 'matrix': - matrix = args; - break; - } + /** + * @private + */ + function parseStyleString(style, oStyle) { + var attr, value; + style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { + var pair = chunk.split(':'); - // snapshot current matrix into matrices array - matrices.push(matrix.concat()); - // reset - matrix = iMatrix.concat(); - }); + attr = pair[0].trim().toLowerCase(); + value = pair[1].trim(); - var combinedMatrix = matrices[0]; - while (matrices.length > 1) { - matrices.shift(); - combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); - } - return combinedMatrix; - }; - })(typeof exports !== 'undefined' ? exports : window); + oStyle[attr] = value; + }); + } - /** - * @private - */ - function parseStyleString(style, oStyle) { - var attr, value; - style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { - var pair = chunk.split(':'); + /** + * @private + */ + function parseStyleObject(style, oStyle) { + var attr, value; + for (var prop in style) { + if (typeof style[prop] === 'undefined') { + continue; + } - attr = pair[0].trim().toLowerCase(); - value = pair[1].trim(); + attr = prop.toLowerCase(); + value = style[prop]; - oStyle[attr] = value; - }); + oStyle[attr] = value; } + } - /** - * @private - */ - function parseStyleObject(style, oStyle) { - var attr, value; - for (var prop in style) { - if (typeof style[prop] === 'undefined') { - continue; + /** + * @private + */ + function getGlobalStylesForElement(element, svgUid) { + var styles = { }; + for (var rule in fabric.cssRules[svgUid]) { + if (elementMatchesRule(element, rule.split(' '))) { + for (var property in fabric.cssRules[svgUid][rule]) { + styles[property] = fabric.cssRules[svgUid][rule][property]; } + } + } + return styles; + } - attr = prop.toLowerCase(); - value = style[prop]; + /** + * @private + */ + function elementMatchesRule(element, selectors) { + var firstMatching, parentMatching = true; + //start from rightmost selector. + firstMatching = selectorMatches(element, selectors.pop()); + if (firstMatching && selectors.length) { + parentMatching = doesSomeParentMatch(element, selectors); + } + return firstMatching && parentMatching && (selectors.length === 0); + } - oStyle[attr] = value; + function doesSomeParentMatch(element, selectors) { + var selector, parentMatching = true; + while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { + if (parentMatching) { + selector = selectors.pop(); } + element = element.parentNode; + parentMatching = selectorMatches(element, selector); } + return selectors.length === 0; + } - /** - * @private - */ - function getGlobalStylesForElement(element, svgUid) { - var styles = { }; - for (var rule in fabric.cssRules[svgUid]) { - if (elementMatchesRule(element, rule.split(' '))) { - for (var property in fabric.cssRules[svgUid][rule]) { - styles[property] = fabric.cssRules[svgUid][rule][property]; - } - } + /** + * @private + */ + function selectorMatches(element, selector) { + var nodeName = element.nodeName, + classNames = element.getAttribute('class'), + id = element.getAttribute('id'), matcher, i; + // i check if a selector matches slicing away part from it. + // if i get empty string i should match + matcher = new RegExp('^' + nodeName, 'i'); + selector = selector.replace(matcher, ''); + if (id && selector.length) { + matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); + selector = selector.replace(matcher, ''); + } + if (classNames && selector.length) { + classNames = classNames.split(' '); + for (i = classNames.length; i--;) { + matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); + selector = selector.replace(matcher, ''); } - return styles; } + return selector.length === 0; + } - /** - * @private - */ - function elementMatchesRule(element, selectors) { - var firstMatching, parentMatching = true; - //start from rightmost selector. - firstMatching = selectorMatches(element, selectors.pop()); - if (firstMatching && selectors.length) { - parentMatching = doesSomeParentMatch(element, selectors); + /** + * @private + * to support IE8 missing getElementById on SVGdocument and on node xmlDOM + */ + function elementById(doc, id) { + var el; + doc.getElementById && (el = doc.getElementById(id)); + if (el) { + return el; + } + var node, i, len, nodelist = doc.getElementsByTagName('*'); + for (i = 0, len = nodelist.length; i < len; i++) { + node = nodelist[i]; + if (id === node.getAttribute('id')) { + return node; } - return firstMatching && parentMatching && (selectors.length === 0); } + } - function doesSomeParentMatch(element, selectors) { - var selector, parentMatching = true; - while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { - if (parentMatching) { - selector = selectors.pop(); - } - element = element.parentNode; - parentMatching = selectorMatches(element, selector); + /** + * @private + */ + function parseUseDirectives(doc) { + var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; + while (nodelist.length && i < nodelist.length) { + var el = nodelist[i], + xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); + + if (xlinkAttribute === null) { + return; } - return selectors.length === 0; - } - /** - * @private - */ - function selectorMatches(element, selector) { - var nodeName = element.nodeName, - classNames = element.getAttribute('class'), - id = element.getAttribute('id'), matcher, i; - // i check if a selector matches slicing away part from it. - // if i get empty string i should match - matcher = new RegExp('^' + nodeName, 'i'); - selector = selector.replace(matcher, ''); - if (id && selector.length) { - matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); - selector = selector.replace(matcher, ''); + var xlink = xlinkAttribute.substr(1), + x = el.getAttribute('x') || 0, + y = el.getAttribute('y') || 0, + el2 = elementById(doc, xlink).cloneNode(true), + currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', + parentNode, + oldLength = nodelist.length, attr, + j, + attrs, + len, + namespace = fabric.svgNS; + + applyViewboxTransform(el2); + if (/^svg$/i.test(el2.nodeName)) { + var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); + for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); + } + // el2.firstChild != null + while (el2.firstChild) { + el3.appendChild(el2.firstChild); + } + el2 = el3; } - if (classNames && selector.length) { - classNames = classNames.split(' '); - for (i = classNames.length; i--;) { - matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); - selector = selector.replace(matcher, ''); + + for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + if (attr.nodeName === 'x' || attr.nodeName === 'y' || + attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { + continue; + } + + if (attr.nodeName === 'transform') { + currentTrans = attr.nodeValue + ' ' + currentTrans; + } + else { + el2.setAttribute(attr.nodeName, attr.nodeValue); } } - return selector.length === 0; + + el2.setAttribute('transform', currentTrans); + el2.setAttribute('instantiated_by_use', '1'); + el2.removeAttribute('id'); + parentNode = el.parentNode; + parentNode.replaceChild(el2, el); + // some browsers do not shorten nodelist after replaceChild (IE8) + if (nodelist.length === oldLength) { + i++; + } } + } - /** - * @private - * to support IE8 missing getElementById on SVGdocument and on node xmlDOM - */ - function elementById(doc, id) { - var el; - doc.getElementById && (el = doc.getElementById(id)); - if (el) { - return el; + // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute + // matches, e.g.: +14.56e-12, etc. + var reViewBoxAttrValue = new RegExp( + '^' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*' + + '$' + ); + + /** + * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements + */ + function applyViewboxTransform(element) { + if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { + return {}; + } + var viewBoxAttr = element.getAttribute('viewBox'), + scaleX = 1, + scaleY = 1, + minX = 0, + minY = 0, + viewBoxWidth, viewBoxHeight, matrix, el, + widthAttr = element.getAttribute('width'), + heightAttr = element.getAttribute('height'), + x = element.getAttribute('x') || 0, + y = element.getAttribute('y') || 0, + preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', + missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), + missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), + toBeParsed = missingViewBox && missingDimAttr, + parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; + + parsedDim.width = 0; + parsedDim.height = 0; + parsedDim.toBeParsed = toBeParsed; + + if (missingViewBox) { + if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + matrix = (element.getAttribute('transform') || '') + translateMatrix; + element.setAttribute('transform', matrix); + element.removeAttribute('x'); + element.removeAttribute('y'); } - var node, i, len, nodelist = doc.getElementsByTagName('*'); - for (i = 0, len = nodelist.length; i < len; i++) { - node = nodelist[i]; - if (id === node.getAttribute('id')) { - return node; - } + } + + if (toBeParsed) { + return parsedDim; + } + + if (missingViewBox) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + // set a transform for elements that have x y and are inner(only) SVGs + return parsedDim; + } + minX = -parseFloat(viewBoxAttr[1]); + minY = -parseFloat(viewBoxAttr[2]); + viewBoxWidth = parseFloat(viewBoxAttr[3]); + viewBoxHeight = parseFloat(viewBoxAttr[4]); + parsedDim.minX = minX; + parsedDim.minY = minY; + parsedDim.viewBoxWidth = viewBoxWidth; + parsedDim.viewBoxHeight = viewBoxHeight; + if (!missingDimAttr) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + scaleX = parsedDim.width / viewBoxWidth; + scaleY = parsedDim.height / viewBoxHeight; + } + else { + parsedDim.width = viewBoxWidth; + parsedDim.height = viewBoxHeight; + } + + // default is to preserve aspect ratio + preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); + if (preserveAspectRatio.alignX !== 'none') { + //translate all container for the effect of Mid, Min, Max + if (preserveAspectRatio.meetOrSlice === 'meet') { + scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); + // calculate additional translation to move the viewbox + } + if (preserveAspectRatio.meetOrSlice === 'slice') { + scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); + // calculate additional translation to move the viewbox + } + widthDiff = parsedDim.width - viewBoxWidth * scaleX; + heightDiff = parsedDim.height - viewBoxHeight * scaleX; + if (preserveAspectRatio.alignX === 'Mid') { + widthDiff /= 2; + } + if (preserveAspectRatio.alignY === 'Mid') { + heightDiff /= 2; + } + if (preserveAspectRatio.alignX === 'Min') { + widthDiff = 0; + } + if (preserveAspectRatio.alignY === 'Min') { + heightDiff = 0; } } - /** - * @private - */ - function parseUseDirectives(doc) { - var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; - while (nodelist.length && i < nodelist.length) { - var el = nodelist[i], - xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); + if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { + return parsedDim; + } + if ((x || y) && element.parentNode.nodeName !== '#document') { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + } - if (xlinkAttribute === null) { - return; - } + matrix = translateMatrix + ' matrix(' + scaleX + + ' 0' + + ' 0 ' + + scaleY + ' ' + + (minX * scaleX + widthDiff) + ' ' + + (minY * scaleY + heightDiff) + ') '; + // seems unused. + // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); + if (element.nodeName === 'svg') { + el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); + // element.firstChild != null + while (element.firstChild) { + el.appendChild(element.firstChild); + } + element.appendChild(el); + } + else { + el = element; + el.removeAttribute('x'); + el.removeAttribute('y'); + matrix = el.getAttribute('transform') + matrix; + } + el.setAttribute('transform', matrix); + return parsedDim; + } - var xlink = xlinkAttribute.slice(1), - x = el.getAttribute('x') || 0, - y = el.getAttribute('y') || 0, - el2 = elementById(doc, xlink).cloneNode(true), - currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', - parentNode, - oldLength = nodelist.length, attr, - j, - attrs, - len, - namespace = fabric.svgNS; - - applyViewboxTransform(el2); - if (/^svg$/i.test(el2.nodeName)) { - var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); - for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { - attr = attrs.item(j); - el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); - } - // el2.firstChild != null - while (el2.firstChild) { - el3.appendChild(el2.firstChild); - } - el2 = el3; - } + function hasAncestorWithNodeName(element, nodeName) { + while (element && (element = element.parentNode)) { + if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) + && !element.getAttribute('instantiated_by_use')) { + return true; + } + } + return false; + } - for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { - attr = attrs.item(j); - if (attr.nodeName === 'x' || attr.nodeName === 'y' || - attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { - continue; - } + /** + * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback + * @static + * @function + * @memberOf fabric + * @param {SVGDocument} doc SVG document to parse + * @param {Function} callback Callback to call when parsing is finished; + * It's being passed an array of elements (parsed from a document). + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [parsingOptions] options for parsing document + * @param {String} [parsingOptions.crossOrigin] crossOrigin settings + */ + fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { + if (!doc) { + return; + } - if (attr.nodeName === 'transform') { - currentTrans = attr.nodeValue + ' ' + currentTrans; - } - else { - el2.setAttribute(attr.nodeName, attr.nodeValue); - } - } + parseUseDirectives(doc); - el2.setAttribute('transform', currentTrans); - el2.setAttribute('instantiated_by_use', '1'); - el2.removeAttribute('id'); - parentNode = el.parentNode; - parentNode.replaceChild(el2, el); - // some browsers do not shorten nodelist after replaceChild (IE8) - if (nodelist.length === oldLength) { - i++; - } + var svgUid = fabric.Object.__uid++, i, len, + options = applyViewboxTransform(doc), + descendants = fabric.util.toArray(doc.getElementsByTagName('*')); + options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; + options.svgUid = svgUid; + + if (descendants.length === 0 && fabric.isLikelyNode) { + // we're likely in node, where "o3-xml" library fails to gEBTN("*") + // https://github.com/ajaxorg/node-o3-xml/issues/21 + descendants = doc.selectNodes('//*[name(.)!="svg"]'); + var arr = []; + for (i = 0, len = descendants.length; i < len; i++) { + arr[i] = descendants[i]; } + descendants = arr; } - // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute - // matches, e.g.: +14.56e-12, etc. - var reViewBoxAttrValue = new RegExp( - '^' + - '\\s*(' + fabric.reNum + '+)\\s*,?' + - '\\s*(' + fabric.reNum + '+)\\s*,?' + - '\\s*(' + fabric.reNum + '+)\\s*,?' + - '\\s*(' + fabric.reNum + '+)\\s*' + - '$' - ); + var elements = descendants.filter(function(el) { + applyViewboxTransform(el); + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && + !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement + }); + if (!elements || (elements && !elements.length)) { + callback && callback([], {}); + return; + } + var clipPaths = { }; + descendants.filter(function(el) { + return el.nodeName.replace('svg:', '') === 'clipPath'; + }).forEach(function(el) { + var id = el.getAttribute('id'); + clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); + }); + }); + fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); + fabric.cssRules[svgUid] = fabric.getCSSRules(doc); + fabric.clipPaths[svgUid] = clipPaths; + // Precedence of rules: style > class > attribute + fabric.parseElements(elements, function(instances, elements) { + if (callback) { + callback(instances, options, elements, descendants); + delete fabric.gradientDefs[svgUid]; + delete fabric.cssRules[svgUid]; + delete fabric.clipPaths[svgUid]; + } + }, clone(options), reviver, parsingOptions); + }; - /** - * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements - */ - function applyViewboxTransform(element) { - if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { - return {}; - } - var viewBoxAttr = element.getAttribute('viewBox'), - scaleX = 1, - scaleY = 1, - minX = 0, - minY = 0, - viewBoxWidth, viewBoxHeight, matrix, el, - widthAttr = element.getAttribute('width'), - heightAttr = element.getAttribute('height'), - x = element.getAttribute('x') || 0, - y = element.getAttribute('y') || 0, - preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', - missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), - missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), - toBeParsed = missingViewBox && missingDimAttr, - parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; - - parsedDim.width = 0; - parsedDim.height = 0; - parsedDim.toBeParsed = toBeParsed; - - if (missingViewBox) { - if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; - matrix = (element.getAttribute('transform') || '') + translateMatrix; - element.setAttribute('transform', matrix); - element.removeAttribute('x'); - element.removeAttribute('y'); - } - } - - if (toBeParsed) { - return parsedDim; - } - - if (missingViewBox) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - // set a transform for elements that have x y and are inner(only) SVGs - return parsedDim; - } - minX = -parseFloat(viewBoxAttr[1]); - minY = -parseFloat(viewBoxAttr[2]); - viewBoxWidth = parseFloat(viewBoxAttr[3]); - viewBoxHeight = parseFloat(viewBoxAttr[4]); - parsedDim.minX = minX; - parsedDim.minY = minY; - parsedDim.viewBoxWidth = viewBoxWidth; - parsedDim.viewBoxHeight = viewBoxHeight; - if (!missingDimAttr) { - parsedDim.width = parseUnit(widthAttr); - parsedDim.height = parseUnit(heightAttr); - scaleX = parsedDim.width / viewBoxWidth; - scaleY = parsedDim.height / viewBoxHeight; + function recursivelyParseGradientsXlink(doc, gradient) { + var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], + xlinkAttr = 'xlink:href', + xLink = gradient.getAttribute(xlinkAttr).substr(1), + referencedGradient = elementById(doc, xLink); + if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { + recursivelyParseGradientsXlink(doc, referencedGradient); + } + gradientsAttrs.forEach(function(attr) { + if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { + gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); } - else { - parsedDim.width = viewBoxWidth; - parsedDim.height = viewBoxHeight; + }); + if (!gradient.children.length) { + var referenceClone = referencedGradient.cloneNode(true); + while (referenceClone.firstChild) { + gradient.appendChild(referenceClone.firstChild); } + } + gradient.removeAttribute(xlinkAttr); + } - // default is to preserve aspect ratio - preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); - if (preserveAspectRatio.alignX !== 'none') { - //translate all container for the effect of Mid, Min, Max - if (preserveAspectRatio.meetOrSlice === 'meet') { - scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); - // calculate additional translation to move the viewbox - } - if (preserveAspectRatio.meetOrSlice === 'slice') { - scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); - // calculate additional translation to move the viewbox - } - widthDiff = parsedDim.width - viewBoxWidth * scaleX; - heightDiff = parsedDim.height - viewBoxHeight * scaleX; - if (preserveAspectRatio.alignX === 'Mid') { - widthDiff /= 2; - } - if (preserveAspectRatio.alignY === 'Mid') { - heightDiff /= 2; - } - if (preserveAspectRatio.alignX === 'Min') { - widthDiff = 0; - } - if (preserveAspectRatio.alignY === 'Min') { - heightDiff = 0; - } + var reFontDeclaration = new RegExp( + '(normal|italic)?\\s*(normal|small-caps)?\\s*' + + '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + + fabric.reNum + + '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)'); + + extend(fabric, { + /** + * Parses a short font declaration, building adding its properties to a style object + * @static + * @function + * @memberOf fabric + * @param {String} value font declaration + * @param {Object} oStyle definition + */ + parseFontDeclaration: function(value, oStyle) { + var match = value.match(reFontDeclaration); + + if (!match) { + return; } + var fontStyle = match[1], + // font variant is not used + // fontVariant = match[2], + fontWeight = match[3], + fontSize = match[4], + lineHeight = match[5], + fontFamily = match[6]; - if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { - return parsedDim; + if (fontStyle) { + oStyle.fontStyle = fontStyle; } - if ((x || y) && element.parentNode.nodeName !== '#document') { - translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + if (fontWeight) { + oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); } - - matrix = translateMatrix + ' matrix(' + scaleX + - ' 0' + - ' 0 ' + - scaleY + ' ' + - (minX * scaleX + widthDiff) + ' ' + - (minY * scaleY + heightDiff) + ') '; - // seems unused. - // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); - if (element.nodeName === 'svg') { - el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); - // element.firstChild != null - while (element.firstChild) { - el.appendChild(element.firstChild); - } - element.appendChild(el); + if (fontSize) { + oStyle.fontSize = parseUnit(fontSize); } - else { - el = element; - el.removeAttribute('x'); - el.removeAttribute('y'); - matrix = el.getAttribute('transform') + matrix; + if (fontFamily) { + oStyle.fontFamily = fontFamily; } - el.setAttribute('transform', matrix); - return parsedDim; - } - - function hasAncestorWithNodeName(element, nodeName) { - while (element && (element = element.parentNode)) { - if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) - && !element.getAttribute('instantiated_by_use')) { - return true; - } + if (lineHeight) { + oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; } - return false; - } + }, /** - * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback + * Parses an SVG document, returning all of the gradient declarations found in it * @static * @function * @memberOf fabric * @param {SVGDocument} doc SVG document to parse - * @param {Function} callback Callback to call when parsing is finished; - * It's being passed an array of elements (parsed from a document). - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - * @param {Object} [parsingOptions] options for parsing document - * @param {String} [parsingOptions.crossOrigin] crossOrigin settings + * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element + */ + getGradientDefs: function(doc) { + var tagArray = [ + 'linearGradient', + 'radialGradient', + 'svg:linearGradient', + 'svg:radialGradient'], + elList = _getMultipleNodes(doc, tagArray), + el, j = 0, gradientDefs = { }; + j = elList.length; + while (j--) { + el = elList[j]; + if (el.getAttribute('xlink:href')) { + recursivelyParseGradientsXlink(doc, el); + } + gradientDefs[el.getAttribute('id')] = el; + } + return gradientDefs; + }, + + /** + * Returns an object of attributes' name/value, given element and an array of attribute names; + * Parses parent "g" nodes recursively upwards. + * @static + * @memberOf fabric + * @param {DOMElement} element Element to parse + * @param {Array} attributes Array of attributes to parse + * @return {Object} object containing parsed attributes' names/values */ - fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { - if (!doc) { + parseAttributes: function(element, attributes, svgUid) { + + if (!element) { return; } - parseUseDirectives(doc); + var value, + parentAttributes = { }, + fontSize, parentFontSize; - var svgUid = fabric.Object.__uid++, i, len, - options = applyViewboxTransform(doc), - descendants = fabric.util.toArray(doc.getElementsByTagName('*')); - options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; - options.svgUid = svgUid; + if (typeof svgUid === 'undefined') { + svgUid = element.getAttribute('svgUid'); + } + // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards + if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { + parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); + } - if (descendants.length === 0 && fabric.isLikelyNode) { - // we're likely in node, where "o3-xml" library fails to gEBTN("*") - // https://github.com/ajaxorg/node-o3-xml/issues/21 - descendants = doc.selectNodes('//*[name(.)!="svg"]'); - var arr = []; - for (i = 0, len = descendants.length; i < len; i++) { - arr[i] = descendants[i]; + var ownAttributes = attributes.reduce(function(memo, attr) { + value = element.getAttribute(attr); + if (value) { // eslint-disable-line + memo[attr] = value; } - descendants = arr; + return memo; + }, { }); + // add values parsed from style, which take precedence over attributes + // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) + var cssAttrs = extend( + getGlobalStylesForElement(element, svgUid), + fabric.parseStyleAttribute(element) + ); + ownAttributes = extend( + ownAttributes, + cssAttrs + ); + if (cssAttrs[cPath]) { + element.setAttribute(cPath, cssAttrs[cPath]); } - - var elements = descendants.filter(function(el) { - applyViewboxTransform(el); - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && - !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement - }); - if (!elements || (elements && !elements.length)) { - callback && callback([], {}); - return; + fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; + if (ownAttributes[fSize]) { + // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. + ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); } - var clipPaths = { }; - descendants.filter(function(el) { - return el.nodeName.replace('svg:', '') === 'clipPath'; - }).forEach(function(el) { - var id = el.getAttribute('id'); - clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { - return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); - }); - }); - fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); - fabric.cssRules[svgUid] = fabric.getCSSRules(doc); - fabric.clipPaths[svgUid] = clipPaths; - // Precedence of rules: style > class > attribute - fabric.parseElements(elements, function(instances, elements) { - if (callback) { - callback(instances, options, elements, descendants); - delete fabric.gradientDefs[svgUid]; - delete fabric.cssRules[svgUid]; - delete fabric.clipPaths[svgUid]; - } - }, Object.assign({}, options), reviver, parsingOptions); - }; - function recursivelyParseGradientsXlink(doc, gradient) { - var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], - xlinkAttr = 'xlink:href', - xLink = gradient.getAttribute(xlinkAttr).slice(1), - referencedGradient = elementById(doc, xLink); - if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { - recursivelyParseGradientsXlink(doc, referencedGradient); + var normalizedAttr, normalizedValue, normalizedStyle = {}; + for (var attr in ownAttributes) { + normalizedAttr = normalizeAttr(attr); + normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); + normalizedStyle[normalizedAttr] = normalizedValue; } - gradientsAttrs.forEach(function(attr) { - if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { - gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); - } - }); - if (!gradient.children.length) { - var referenceClone = referencedGradient.cloneNode(true); - while (referenceClone.firstChild) { - gradient.appendChild(referenceClone.firstChild); - } + if (normalizedStyle && normalizedStyle.font) { + fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); } - gradient.removeAttribute(xlinkAttr); - } + var mergedAttrs = extend(parentAttributes, normalizedStyle); + return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); + }, - var reFontDeclaration = new RegExp( - '(normal|italic)?\\s*(normal|small-caps)?\\s*' + - '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + - fabric.reNum + - '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)'); + /** + * Transforms an array of svg elements to corresponding fabric.* instances + * @static + * @memberOf fabric + * @param {Array} elements Array of elements to parse + * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements) + * @param {Object} [options] Options object + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + */ + parseElements: function(elements, callback, options, reviver, parsingOptions) { + new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); + }, - fabric.util.object.extend(fabric, { - /** - * Parses a short font declaration, building adding its properties to a style object - * @static - * @function - * @memberOf fabric - * @param {String} value font declaration - * @param {Object} oStyle definition - */ - parseFontDeclaration: function(value, oStyle) { - var match = value.match(reFontDeclaration); + /** + * Parses "style" attribute, retuning an object with values + * @static + * @memberOf fabric + * @param {SVGElement} element Element to parse + * @return {Object} Objects with values parsed from style attribute of an element + */ + parseStyleAttribute: function(element) { + var oStyle = { }, + style = element.getAttribute('style'); - if (!match) { - return; - } - var fontStyle = match[1], - // font variant is not used - // fontVariant = match[2], - fontWeight = match[3], - fontSize = match[4], - lineHeight = match[5], - fontFamily = match[6]; + if (!style) { + return oStyle; + } - if (fontStyle) { - oStyle.fontStyle = fontStyle; - } - if (fontWeight) { - oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); - } - if (fontSize) { - oStyle.fontSize = parseUnit(fontSize); - } - if (fontFamily) { - oStyle.fontFamily = fontFamily; - } - if (lineHeight) { - oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; - } - }, + if (typeof style === 'string') { + parseStyleString(style, oStyle); + } + else { + parseStyleObject(style, oStyle); + } - /** - * Parses an SVG document, returning all of the gradient declarations found in it - * @static - * @function - * @memberOf fabric - * @param {SVGDocument} doc SVG document to parse - * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element - */ - getGradientDefs: function(doc) { - var tagArray = [ - 'linearGradient', - 'radialGradient', - 'svg:linearGradient', - 'svg:radialGradient'], - elList = _getMultipleNodes(doc, tagArray), - el, j = 0, gradientDefs = { }; - j = elList.length; - while (j--) { - el = elList[j]; - if (el.getAttribute('xlink:href')) { - recursivelyParseGradientsXlink(doc, el); - } - gradientDefs[el.getAttribute('id')] = el; - } - return gradientDefs; - }, + return oStyle; + }, - /** - * Returns an object of attributes' name/value, given element and an array of attribute names; - * Parses parent "g" nodes recursively upwards. - * @static - * @memberOf fabric - * @param {DOMElement} element Element to parse - * @param {Array} attributes Array of attributes to parse - * @return {Object} object containing parsed attributes' names/values - */ - parseAttributes: function(element, attributes, svgUid) { + /** + * Parses "points" attribute, returning an array of values + * @static + * @memberOf fabric + * @param {String} points points attribute string + * @return {Array} array of points + */ + parsePointsAttribute: function(points) { - if (!element) { - return; - } + // points attribute is required and must not be empty + if (!points) { + return null; + } - var value, - parentAttributes = { }, - fontSize, parentFontSize; + // replace commas with whitespace and remove bookending whitespace + points = points.replace(/,/g, ' ').trim(); - if (typeof svgUid === 'undefined') { - svgUid = element.getAttribute('svgUid'); - } - // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards - if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { - parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); - } + points = points.split(/\s+/); + var parsedPoints = [], i, len; - var ownAttributes = attributes.reduce(function(memo, attr) { - value = element.getAttribute(attr); - if (value) { // eslint-disable-line - memo[attr] = value; - } - return memo; - }, { }); - // add values parsed from style, which take precedence over attributes - // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) - var cssAttrs = Object.assign( - getGlobalStylesForElement(element, svgUid), - fabric.parseStyleAttribute(element) - ); - ownAttributes = Object.assign( - ownAttributes, - cssAttrs - ); - if (cssAttrs[cPath]) { - element.setAttribute(cPath, cssAttrs[cPath]); - } - fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; - if (ownAttributes[fSize]) { - // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. - ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); - } + for (i = 0, len = points.length; i < len; i += 2) { + parsedPoints.push({ + x: parseFloat(points[i]), + y: parseFloat(points[i + 1]) + }); + } - var normalizedAttr, normalizedValue, normalizedStyle = {}; - for (var attr in ownAttributes) { - normalizedAttr = normalizeAttr(attr); - normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); - normalizedStyle[normalizedAttr] = normalizedValue; - } - if (normalizedStyle && normalizedStyle.font) { - fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); - } - var mergedAttrs = Object.assign(parentAttributes, normalizedStyle); - return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); - }, + // odd number of points is an error + // if (parsedPoints.length % 2 !== 0) { + // return null; + // } - /** - * Transforms an array of svg elements to corresponding fabric.* instances - * @static - * @memberOf fabric - * @param {Array} elements Array of elements to parse - * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements) - * @param {Object} [options] Options object - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - */ - parseElements: function(elements, callback, options, reviver, parsingOptions) { - new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); - }, + return parsedPoints; + }, - /** - * Parses "style" attribute, retuning an object with values - * @static - * @memberOf fabric - * @param {SVGElement} element Element to parse - * @return {Object} Objects with values parsed from style attribute of an element - */ - parseStyleAttribute: function(element) { - var oStyle = { }, - style = element.getAttribute('style'); + /** + * Returns CSS rules for a given SVG document + * @static + * @function + * @memberOf fabric + * @param {SVGDocument} doc SVG document to parse + * @return {Object} CSS rules of this document + */ + getCSSRules: function(doc) { + var styles = doc.getElementsByTagName('style'), i, len, + allRules = { }, rules; - if (!style) { - return oStyle; - } + // very crude parsing of style contents + for (i = 0, len = styles.length; i < len; i++) { + var styleContents = styles[i].textContent; - if (typeof style === 'string') { - parseStyleString(style, oStyle); - } - else { - parseStyleObject(style, oStyle); + // remove comments + styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); + if (styleContents.trim() === '') { + continue; } + // recovers all the rule in this form `body { style code... }` + // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); + rules = styleContents.split('}'); + // remove empty rules. + rules = rules.filter(function(rule) { return rule.trim(); }); + // at this point we have hopefully an array of rules `body { style code... ` + // eslint-disable-next-line no-loop-func + rules.forEach(function(rule) { + + var match = rule.split('{'), + ruleObj = { }, declaration = match[1].trim(), + propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); + + for (i = 0, len = propertyValuePairs.length; i < len; i++) { + var pair = propertyValuePairs[i].split(':'), + property = pair[0].trim(), + value = pair[1].trim(); + ruleObj[property] = value; + } + rule = match[0].trim(); + rule.split(',').forEach(function(_rule) { + _rule = _rule.replace(/^svg/i, '').trim(); + if (_rule === '') { + return; + } + if (allRules[_rule]) { + fabric.util.object.extend(allRules[_rule], ruleObj); + } + else { + allRules[_rule] = fabric.util.object.clone(ruleObj); + } + }); + }); + } + return allRules; + }, - return oStyle; - }, - - /** - * Parses "points" attribute, returning an array of values - * @static - * @memberOf fabric - * @param {String} points points attribute string - * @return {Array} array of points - */ - parsePointsAttribute: function(points) { - - // points attribute is required and must not be empty - if (!points) { - return null; - } + /** + * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. + * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy) + * @memberOf fabric + * @param {String} url + * @param {Function} callback + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [options] Object containing options for parsing + * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources + */ + loadSVGFromURL: function(url, callback, reviver, options) { - // replace commas with whitespace and remove bookending whitespace - points = points.replace(/,/g, ' ').trim(); + url = url.replace(/^\n\s*/, '').trim(); + new fabric.util.request(url, { + method: 'get', + onComplete: onComplete + }); - points = points.split(/\s+/); - var parsedPoints = [], i, len; + function onComplete(r) { - for (i = 0, len = points.length; i < len; i += 2) { - parsedPoints.push({ - x: parseFloat(points[i]), - y: parseFloat(points[i + 1]) - }); + var xml = r.responseXML; + if (!xml || !xml.documentElement) { + callback && callback(null); + return false; } - // odd number of points is an error - // if (parsedPoints.length % 2 !== 0) { - // return null; - // } + fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { + callback && callback(results, _options, elements, allElements); + }, reviver, options); + } + }, - return parsedPoints; - }, + /** + * Takes string corresponding to an SVG document, and parses it into a set of fabric objects + * @memberOf fabric + * @param {String} string + * @param {Function} callback + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [options] Object containing options for parsing + * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources + */ + loadSVGFromString: function(string, callback, reviver, options) { + var parser = new fabric.window.DOMParser(), + doc = parser.parseFromString(string.trim(), 'text/xml'); + fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { + callback(results, _options, elements, allElements); + }, reviver, options); + } + }); + +})(typeof exports !== 'undefined' ? exports : this); + + +fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) { + this.elements = elements; + this.callback = callback; + this.options = options; + this.reviver = reviver; + this.svgUid = (options && options.svgUid) || 0; + this.parsingOptions = parsingOptions; + this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g; + this.doc = doc; +}; + +(function(proto) { + proto.parse = function() { + this.instances = new Array(this.elements.length); + this.numElements = this.elements.length; + this.createObjects(); + }; - /** - * Returns CSS rules for a given SVG document - * @static - * @function - * @memberOf fabric - * @param {SVGDocument} doc SVG document to parse - * @return {Object} CSS rules of this document - */ - getCSSRules: function(doc) { - var styles = doc.getElementsByTagName('style'), i, len, - allRules = { }, rules; - - // very crude parsing of style contents - for (i = 0, len = styles.length; i < len; i++) { - var styleContents = styles[i].textContent; + proto.createObjects = function() { + var _this = this; + this.elements.forEach(function(element, i) { + element.setAttribute('svgUid', _this.svgUid); + _this.createObject(element, i); + }); + }; - // remove comments - styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); - if (styleContents.trim() === '') { - continue; - } - // recovers all the rule in this form `body { style code... }` - // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); - rules = styleContents.split('}'); - // remove empty rules. - rules = rules.filter(function(rule) { return rule.trim(); }); - // at this point we have hopefully an array of rules `body { style code... ` - // eslint-disable-next-line no-loop-func - rules.forEach(function(rule) { - - var match = rule.split('{'), - ruleObj = { }, declaration = match[1].trim(), - propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); }); - - for (i = 0, len = propertyValuePairs.length; i < len; i++) { - var pair = propertyValuePairs[i].split(':'), - property = pair[0].trim(), - value = pair[1].trim(); - ruleObj[property] = value; - } - rule = match[0].trim(); - rule.split(',').forEach(function(_rule) { - _rule = _rule.replace(/^svg/i, '').trim(); - if (_rule === '') { - return; - } - if (allRules[_rule]) { - Object.assign(allRules[_rule], ruleObj); - } - else { - allRules[_rule] = Object.assign({}, ruleObj); - } - }); - }); - } - return allRules; - }, + proto.findTag = function(el) { + return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))]; + }; - /** - * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. - * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy) - * @memberOf fabric - * @param {String} url - * @param {Function} callback - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - * @param {Object} [options] Object containing options for parsing - * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources - */ - loadSVGFromURL: function(url, callback, reviver, options) { + proto.createObject = function(el, index) { + var klass = this.findTag(el); + if (klass && klass.fromElement) { + try { + klass.fromElement(el, this.createCallback(index, el), this.options); + } + catch (err) { + fabric.log(err); + } + } + else { + this.checkIfDone(); + } + }; - url = url.replace(/^\n\s*/, '').trim(); - new fabric.util.request(url, { - method: 'get', - onComplete: onComplete - }); + proto.createCallback = function(index, el) { + var _this = this; + return function(obj) { + var _options; + _this.resolveGradient(obj, el, 'fill'); + _this.resolveGradient(obj, el, 'stroke'); + if (obj instanceof fabric.Image && obj._originalElement) { + _options = obj.parsePreserveAspectRatioAttribute(el); + } + obj._removeTransformMatrix(_options); + _this.resolveClipPath(obj, el); + _this.reviver && _this.reviver(el, obj); + _this.instances[index] = obj; + _this.checkIfDone(); + }; + }; - function onComplete(r) { + proto.extractPropertyDefinition = function(obj, property, storage) { + var value = obj[property], regex = this.regexUrl; + if (!regex.test(value)) { + return; + } + regex.lastIndex = 0; + var id = regex.exec(value)[1]; + regex.lastIndex = 0; + return fabric[storage][this.svgUid][id]; + }; - var xml = r.responseXML; - if (!xml || !xml.documentElement) { - callback && callback(null); - return false; - } + proto.resolveGradient = function(obj, el, property) { + var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs'); + if (gradientDef) { + var opacityAttr = el.getAttribute(property + '-opacity'); + var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options); + obj.set(property, gradient); + } + }; - fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { - callback && callback(results, _options, elements, allElements); - }, reviver, options); - } - }, + proto.createClipPathCallback = function(obj, container) { + return function(_newObj) { + _newObj._removeTransformMatrix(); + _newObj.fillRule = _newObj.clipRule; + container.push(_newObj); + }; + }; - /** - * Takes string corresponding to an SVG document, and parses it into a set of fabric objects - * @memberOf fabric - * @param {String} string - * @param {Function} callback - * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. - * @param {Object} [options] Object containing options for parsing - * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources - */ - loadSVGFromString: function(string, callback, reviver, options) { - var parser = new fabric.window.DOMParser(), - doc = parser.parseFromString(string.trim(), 'text/xml'); - fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { - callback(results, _options, elements, allElements); - }, reviver, options); + proto.resolveClipPath = function(obj, usingElement) { + var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'), + element, klass, objTransformInv, container, gTransform, options; + if (clipPath) { + container = []; + objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); + // move the clipPath tag as sibling to the real element that is using it + var clipPathTag = clipPath[0].parentNode; + var clipPathOwner = usingElement; + while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) { + clipPathOwner = clipPathOwner.parentNode; + } + clipPathOwner.parentNode.appendChild(clipPathTag); + for (var i = 0; i < clipPath.length; i++) { + element = clipPath[i]; + klass = this.findTag(element); + klass.fromElement( + element, + this.createClipPathCallback(obj, container), + this.options + ); } - }); + if (container.length === 1) { + clipPath = container[0]; + } + else { + clipPath = new fabric.Group(container); + } + gTransform = fabric.util.multiplyTransformMatrices( + objTransformInv, + clipPath.calcTransformMatrix() + ); + if (clipPath.clipPath) { + this.resolveClipPath(clipPath, clipPathOwner); + } + var options = fabric.util.qrDecompose(gTransform); + clipPath.flipX = false; + clipPath.flipY = false; + clipPath.set('scaleX', options.scaleX); + clipPath.set('scaleY', options.scaleY); + clipPath.angle = options.angle; + clipPath.skewX = options.skewX; + clipPath.skewY = 0; + clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center'); + obj.clipPath = clipPath; + } + else { + // if clip-path does not resolve to any element, delete the property. + delete obj.clipPath; + } + }; - })(typeof exports !== 'undefined' ? exports : window); + proto.checkIfDone = function() { + if (--this.numElements === 0) { + this.instances = this.instances.filter(function(el) { + // eslint-disable-next-line no-eq-null, eqeqeq + return el != null; + }); + this.callback(this.instances, this.elements); + } + }; +})(fabric.ElementsParser.prototype); - (function(global) { - var fabric = global.fabric; - fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) { - this.elements = elements; - this.callback = callback; - this.options = options; - this.reviver = reviver; - this.svgUid = (options && options.svgUid) || 0; - this.parsingOptions = parsingOptions; - this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g; - this.doc = doc; - }; +(function(global) { - (function(proto) { - proto.parse = function() { - this.instances = new Array(this.elements.length); - this.numElements = this.elements.length; - this.createObjects(); - }; + 'use strict'; - proto.createObjects = function() { - var _this = this; - this.elements.forEach(function(element, i) { - element.setAttribute('svgUid', _this.svgUid); - _this.createObject(element, i); - }); - }; + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - proto.findTag = function(el) { - return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))]; - }; + var fabric = global.fabric || (global.fabric = { }); - proto.createObject = function(el, index) { - var klass = this.findTag(el); - if (klass && klass.fromElement) { - try { - klass.fromElement(el, this.createCallback(index, el), this.options); - } - catch (err) { - fabric.log(err); - } - } - else { - this.checkIfDone(); - } - }; + if (fabric.Point) { + fabric.warn('fabric.Point is already defined'); + return; + } - proto.createCallback = function(index, el) { - var _this = this; - return function(obj) { - var _options; - _this.resolveGradient(obj, el, 'fill'); - _this.resolveGradient(obj, el, 'stroke'); - if (obj instanceof fabric.Image && obj._originalElement) { - _options = obj.parsePreserveAspectRatioAttribute(el); - } - obj._removeTransformMatrix(_options); - _this.resolveClipPath(obj, el); - _this.reviver && _this.reviver(el, obj); - _this.instances[index] = obj; - _this.checkIfDone(); - }; - }; + fabric.Point = Point; - proto.extractPropertyDefinition = function(obj, property, storage) { - var value = obj[property], regex = this.regexUrl; - if (!regex.test(value)) { - return; - } - regex.lastIndex = 0; - var id = regex.exec(value)[1]; - regex.lastIndex = 0; - return fabric[storage][this.svgUid][id]; - }; + /** + * Point class + * @class fabric.Point + * @memberOf fabric + * @constructor + * @param {Number} x + * @param {Number} y + * @return {fabric.Point} thisArg + */ + function Point(x, y) { + this.x = x; + this.y = y; + } - proto.resolveGradient = function(obj, el, property) { - var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs'); - if (gradientDef) { - var opacityAttr = el.getAttribute(property + '-opacity'); - var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options); - obj.set(property, gradient); - } - }; + Point.prototype = /** @lends fabric.Point.prototype */ { - proto.createClipPathCallback = function(obj, container) { - return function(_newObj) { - _newObj._removeTransformMatrix(); - _newObj.fillRule = _newObj.clipRule; - container.push(_newObj); - }; - }; + type: 'point', - proto.resolveClipPath = function(obj, usingElement) { - var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'), - element, klass, objTransformInv, container, gTransform, options; - if (clipPath) { - container = []; - objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); - // move the clipPath tag as sibling to the real element that is using it - var clipPathTag = clipPath[0].parentNode; - var clipPathOwner = usingElement; - while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) { - clipPathOwner = clipPathOwner.parentNode; - } - clipPathOwner.parentNode.appendChild(clipPathTag); - for (var i = 0; i < clipPath.length; i++) { - element = clipPath[i]; - klass = this.findTag(element); - klass.fromElement( - element, - this.createClipPathCallback(obj, container), - this.options - ); - } - if (container.length === 1) { - clipPath = container[0]; - } - else { - clipPath = new fabric.Group(container); - } - gTransform = fabric.util.multiplyTransformMatrices( - objTransformInv, - clipPath.calcTransformMatrix() - ); - if (clipPath.clipPath) { - this.resolveClipPath(clipPath, clipPathOwner); - } - var options = fabric.util.qrDecompose(gTransform); - clipPath.flipX = false; - clipPath.flipY = false; - clipPath.set('scaleX', options.scaleX); - clipPath.set('scaleY', options.scaleY); - clipPath.angle = options.angle; - clipPath.skewX = options.skewX; - clipPath.skewY = 0; - clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center'); - obj.clipPath = clipPath; - } - else { - // if clip-path does not resolve to any element, delete the property. - delete obj.clipPath; - } - }; + constructor: Point, - proto.checkIfDone = function() { - if (--this.numElements === 0) { - this.instances = this.instances.filter(function(el) { - // eslint-disable-next-line no-eq-null, eqeqeq - return el != null; - }); - this.callback(this.instances, this.elements); - } - }; - })(fabric.ElementsParser.prototype); - })(typeof exports !== 'undefined' ? exports : window); + /** + * Adds another point to this one and returns another one + * @param {fabric.Point} that + * @return {fabric.Point} new Point instance with added values + */ + add: function (that) { + return new Point(this.x + that.x, this.y + that.y); + }, + + /** + * Adds another point to this one + * @param {fabric.Point} that + * @return {fabric.Point} thisArg + * @chainable + */ + addEquals: function (that) { + this.x += that.x; + this.y += that.y; + return this; + }, - (function(global) { - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ + /** + * Adds value to this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} new Point with added value + */ + scalarAdd: function (scalar) { + return new Point(this.x + scalar, this.y + scalar); + }, - var fabric = global.fabric || (global.fabric = { }); + /** + * Adds value to this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarAddEquals: function (scalar) { + this.x += scalar; + this.y += scalar; + return this; + }, - fabric.Point = Point; + /** + * Subtracts another point from this point and returns a new one + * @param {fabric.Point} that + * @return {fabric.Point} new Point object with subtracted values + */ + subtract: function (that) { + return new Point(this.x - that.x, this.y - that.y); + }, /** - * Point class - * @class fabric.Point - * @memberOf fabric - * @constructor - * @param {Number} x - * @param {Number} y + * Subtracts another point from this point + * @param {fabric.Point} that * @return {fabric.Point} thisArg + * @chainable */ - function Point(x, y) { - this.x = x || 0; - this.y = y || 0; - } + subtractEquals: function (that) { + this.x -= that.x; + this.y -= that.y; + return this; + }, - Point.prototype = /** @lends fabric.Point.prototype */ { + /** + * Subtracts value from this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} + */ + scalarSubtract: function (scalar) { + return new Point(this.x - scalar, this.y - scalar); + }, - type: 'point', + /** + * Subtracts value from this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarSubtractEquals: function (scalar) { + this.x -= scalar; + this.y -= scalar; + return this; + }, - constructor: Point, + /** + * Multiplies this point by a value and returns a new one + * TODO: rename in scalarMultiply in 2.0 + * @param {Number} scalar + * @return {fabric.Point} + */ + multiply: function (scalar) { + return new Point(this.x * scalar, this.y * scalar); + }, - /** - * Adds another point to this one and returns another one - * @param {fabric.Point} that - * @return {fabric.Point} new Point instance with added values - */ - add: function (that) { - return new Point(this.x + that.x, this.y + that.y); - }, + /** + * Multiplies this point by a value + * TODO: rename in scalarMultiplyEquals in 2.0 + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + multiplyEquals: function (scalar) { + this.x *= scalar; + this.y *= scalar; + return this; + }, - /** - * Adds another point to this one - * @param {fabric.Point} that - * @return {fabric.Point} thisArg - * @chainable - */ - addEquals: function (that) { - this.x += that.x; - this.y += that.y; - return this; - }, + /** + * Divides this point by a value and returns a new one + * TODO: rename in scalarDivide in 2.0 + * @param {Number} scalar + * @return {fabric.Point} + */ + divide: function (scalar) { + return new Point(this.x / scalar, this.y / scalar); + }, - /** - * Adds value to this point and returns a new one - * @param {Number} scalar - * @return {fabric.Point} new Point with added value - */ - scalarAdd: function (scalar) { - return new Point(this.x + scalar, this.y + scalar); - }, + /** + * Divides this point by a value + * TODO: rename in scalarDivideEquals in 2.0 + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + divideEquals: function (scalar) { + this.x /= scalar; + this.y /= scalar; + return this; + }, - /** - * Adds value to this point - * @param {Number} scalar - * @return {fabric.Point} thisArg - * @chainable - */ - scalarAddEquals: function (scalar) { - this.x += scalar; - this.y += scalar; - return this; - }, + /** + * Returns true if this point is equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + eq: function (that) { + return (this.x === that.x && this.y === that.y); + }, - /** - * Subtracts another point from this point and returns a new one - * @param {fabric.Point} that - * @return {fabric.Point} new Point object with subtracted values - */ - subtract: function (that) { - return new Point(this.x - that.x, this.y - that.y); - }, + /** + * Returns true if this point is less than another one + * @param {fabric.Point} that + * @return {Boolean} + */ + lt: function (that) { + return (this.x < that.x && this.y < that.y); + }, - /** - * Subtracts another point from this point - * @param {fabric.Point} that - * @return {fabric.Point} thisArg - * @chainable - */ - subtractEquals: function (that) { - this.x -= that.x; - this.y -= that.y; - return this; - }, + /** + * Returns true if this point is less than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + lte: function (that) { + return (this.x <= that.x && this.y <= that.y); + }, - /** - * Subtracts value from this point and returns a new one - * @param {Number} scalar - * @return {fabric.Point} - */ - scalarSubtract: function (scalar) { - return new Point(this.x - scalar, this.y - scalar); - }, + /** - /** - * Subtracts value from this point - * @param {Number} scalar - * @return {fabric.Point} thisArg - * @chainable - */ - scalarSubtractEquals: function (scalar) { - this.x -= scalar; - this.y -= scalar; - return this; - }, + * Returns true if this point is greater another one + * @param {fabric.Point} that + * @return {Boolean} + */ + gt: function (that) { + return (this.x > that.x && this.y > that.y); + }, - /** - * Multiplies this point by another value and returns a new one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - multiply: function (that) { - return new Point(this.x * that.x, this.y * that.y); - }, + /** + * Returns true if this point is greater than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + gte: function (that) { + return (this.x >= that.x && this.y >= that.y); + }, - /** - * Multiplies this point by a value and returns a new one - * @param {Number} scalar - * @return {fabric.Point} - */ - scalarMultiply: function (scalar) { - return new Point(this.x * scalar, this.y * scalar); - }, + /** + * Returns new point which is the result of linear interpolation with this one and another one + * @param {fabric.Point} that + * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 + * @return {fabric.Point} + */ + lerp: function (that, t) { + if (typeof t === 'undefined') { + t = 0.5; + } + t = Math.max(Math.min(1, t), 0); + return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); + }, - /** - * Multiplies this point by a value - * @param {Number} scalar - * @return {fabric.Point} thisArg - * @chainable - */ - scalarMultiplyEquals: function (scalar) { - this.x *= scalar; - this.y *= scalar; - return this; - }, + /** + * Returns distance from this point and another one + * @param {fabric.Point} that + * @return {Number} + */ + distanceFrom: function (that) { + var dx = this.x - that.x, + dy = this.y - that.y; + return Math.sqrt(dx * dx + dy * dy); + }, - /** - * Divides this point by another and returns a new one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - divide: function (that) { - return new Point(this.x / that.x, this.y / that.y); - }, + /** + * Returns the point between this point and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + midPointFrom: function (that) { + return this.lerp(that); + }, - /** - * Divides this point by a value and returns a new one - * @param {Number} scalar - * @return {fabric.Point} - */ - scalarDivide: function (scalar) { - return new Point(this.x / scalar, this.y / scalar); - }, + /** + * Returns a new point which is the min of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + min: function (that) { + return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); + }, - /** - * Divides this point by a value - * @param {Number} scalar - * @return {fabric.Point} thisArg - * @chainable - */ - scalarDivideEquals: function (scalar) { - this.x /= scalar; - this.y /= scalar; - return this; - }, + /** + * Returns a new point which is the max of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + max: function (that) { + return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); + }, - /** - * Returns true if this point is equal to another one - * @param {fabric.Point} that - * @return {Boolean} - */ - eq: function (that) { - return (this.x === that.x && this.y === that.y); - }, + /** + * Returns string representation of this point + * @return {String} + */ + toString: function () { + return this.x + ',' + this.y; + }, - /** - * Returns true if this point is less than another one - * @param {fabric.Point} that - * @return {Boolean} - */ - lt: function (that) { - return (this.x < that.x && this.y < that.y); - }, + /** + * Sets x/y of this point + * @param {Number} x + * @param {Number} y + * @chainable + */ + setXY: function (x, y) { + this.x = x; + this.y = y; + return this; + }, - /** - * Returns true if this point is less than or equal to another one - * @param {fabric.Point} that - * @return {Boolean} - */ - lte: function (that) { - return (this.x <= that.x && this.y <= that.y); - }, + /** + * Sets x of this point + * @param {Number} x + * @chainable + */ + setX: function (x) { + this.x = x; + return this; + }, - /** + /** + * Sets y of this point + * @param {Number} y + * @chainable + */ + setY: function (y) { + this.y = y; + return this; + }, - * Returns true if this point is greater another one - * @param {fabric.Point} that - * @return {Boolean} - */ - gt: function (that) { - return (this.x > that.x && this.y > that.y); - }, + /** + * Sets x/y of this point from another point + * @param {fabric.Point} that + * @chainable + */ + setFromPoint: function (that) { + this.x = that.x; + this.y = that.y; + return this; + }, - /** - * Returns true if this point is greater than or equal to another one - * @param {fabric.Point} that - * @return {Boolean} - */ - gte: function (that) { - return (this.x >= that.x && this.y >= that.y); - }, + /** + * Swaps x/y of this point and another point + * @param {fabric.Point} that + */ + swap: function (that) { + var x = this.x, + y = this.y; + this.x = that.x; + this.y = that.y; + that.x = x; + that.y = y; + }, - /** - * Returns new point which is the result of linear interpolation with this one and another one - * @param {fabric.Point} that - * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 - * @return {fabric.Point} - */ - lerp: function (that, t) { - if (typeof t === 'undefined') { - t = 0.5; - } - t = Math.max(Math.min(1, t), 0); - return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); - }, + /** + * return a cloned instance of the point + * @return {fabric.Point} + */ + clone: function () { + return new Point(this.x, this.y); + } + }; - /** - * Returns distance from this point and another one - * @param {fabric.Point} that - * @return {Number} - */ - distanceFrom: function (that) { - var dx = this.x - that.x, - dy = this.y - that.y; - return Math.sqrt(dx * dx + dy * dy); - }, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Returns the point between this point and another one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - midPointFrom: function (that) { - return this.lerp(that); - }, - /** - * Returns a new point which is the min of this and another one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - min: function (that) { - return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); - }, +(function(global) { - /** - * Returns a new point which is the max of this and another one - * @param {fabric.Point} that - * @return {fabric.Point} - */ - max: function (that) { - return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); - }, + 'use strict'; - /** - * Returns string representation of this point - * @return {String} - */ - toString: function () { - return this.x + ',' + this.y; - }, + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ + var fabric = global.fabric || (global.fabric = { }); - /** - * Sets x/y of this point - * @param {Number} x - * @param {Number} y - * @chainable - */ - setXY: function (x, y) { - this.x = x; - this.y = y; - return this; - }, - - /** - * Sets x of this point - * @param {Number} x - * @chainable - */ - setX: function (x) { - this.x = x; - return this; - }, - - /** - * Sets y of this point - * @param {Number} y - * @chainable - */ - setY: function (y) { - this.y = y; - return this; - }, + if (fabric.Intersection) { + fabric.warn('fabric.Intersection is already defined'); + return; + } - /** - * Sets x/y of this point from another point - * @param {fabric.Point} that - * @chainable - */ - setFromPoint: function (that) { - this.x = that.x; - this.y = that.y; - return this; - }, + /** + * Intersection class + * @class fabric.Intersection + * @memberOf fabric + * @constructor + */ + function Intersection(status) { + this.status = status; + this.points = []; + } - /** - * Swaps x/y of this point and another point - * @param {fabric.Point} that - */ - swap: function (that) { - var x = this.x, - y = this.y; - this.x = that.x; - this.y = that.y; - that.x = x; - that.y = y; - }, + fabric.Intersection = Intersection; - /** - * return a cloned instance of the point - * @return {fabric.Point} - */ - clone: function () { - return new Point(this.x, this.y); - } - }; + fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { - })(typeof exports !== 'undefined' ? exports : window); + constructor: Intersection, - (function(global) { - /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ - var fabric = global.fabric || (global.fabric = { }); /** - * Intersection class - * @class fabric.Intersection - * @memberOf fabric - * @constructor + * Appends a point to intersection + * @param {fabric.Point} point + * @return {fabric.Intersection} thisArg + * @chainable */ - function Intersection(status) { - this.status = status; - this.points = []; - } - - fabric.Intersection = Intersection; - - fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { - - constructor: Intersection, - - /** - * Appends a point to intersection - * @param {fabric.Point} point - * @return {fabric.Intersection} thisArg - * @chainable - */ - appendPoint: function (point) { - this.points.push(point); - return this; - }, - - /** - * Appends points to intersection - * @param {Array} points - * @return {fabric.Intersection} thisArg - * @chainable - */ - appendPoints: function (points) { - this.points = this.points.concat(points); - return this; - } - }; - - /** - * Checks if one line intersects another - * TODO: rename in intersectSegmentSegment - * @static - * @param {fabric.Point} a1 - * @param {fabric.Point} a2 - * @param {fabric.Point} b1 - * @param {fabric.Point} b2 - * @return {fabric.Intersection} - */ - fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { - var result, - uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), - ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), - uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); - if (uB !== 0) { - var ua = uaT / uB, - ub = ubT / uB; - if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { - result = new Intersection('Intersection'); - result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); - } - else { - result = new Intersection(); - } - } - else { - if (uaT === 0 || ubT === 0) { - result = new Intersection('Coincident'); - } - else { - result = new Intersection('Parallel'); - } - } - return result; - }; + appendPoint: function (point) { + this.points.push(point); + return this; + }, /** - * Checks if line intersects polygon - * TODO: rename in intersectSegmentPolygon - * fix detection of coincident - * @static - * @param {fabric.Point} a1 - * @param {fabric.Point} a2 + * Appends points to intersection * @param {Array} points - * @return {fabric.Intersection} - */ - fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { - var result = new Intersection(), - length = points.length, - b1, b2, inter, i; - - for (i = 0; i < length; i++) { - b1 = points[i]; - b2 = points[(i + 1) % length]; - inter = Intersection.intersectLineLine(a1, a2, b1, b2); - - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; - } - return result; - }; - - /** - * Checks if polygon intersects another polygon - * @static - * @param {Array} points1 - * @param {Array} points2 - * @return {fabric.Intersection} + * @return {fabric.Intersection} thisArg + * @chainable */ - fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { - var result = new Intersection(), - length = points1.length, i; - - for (i = 0; i < length; i++) { - var a1 = points1[i], - a2 = points1[(i + 1) % length], - inter = Intersection.intersectLinePolygon(a1, a2, points2); + appendPoints: function (points) { + this.points = this.points.concat(points); + return this; + } + }; - result.appendPoints(inter.points); - } - if (result.points.length > 0) { - result.status = 'Intersection'; + /** + * Checks if one line intersects another + * TODO: rename in intersectSegmentSegment + * @static + * @param {fabric.Point} a1 + * @param {fabric.Point} a2 + * @param {fabric.Point} b1 + * @param {fabric.Point} b2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { + var result, + uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), + ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), + uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); + if (uB !== 0) { + var ua = uaT / uB, + ub = ubT / uB; + if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { + result = new Intersection('Intersection'); + result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); } - return result; - }; - - /** - * Checks if polygon intersects rectangle - * @static - * @param {Array} points - * @param {fabric.Point} r1 - * @param {fabric.Point} r2 - * @return {fabric.Intersection} - */ - fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { - var min = r1.min(r2), - max = r1.max(r2), - topRight = new fabric.Point(max.x, min.y), - bottomLeft = new fabric.Point(min.x, max.y), - inter1 = Intersection.intersectLinePolygon(min, topRight, points), - inter2 = Intersection.intersectLinePolygon(topRight, max, points), - inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), - inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), - result = new Intersection(); - - result.appendPoints(inter1.points); - result.appendPoints(inter2.points); - result.appendPoints(inter3.points); - result.appendPoints(inter4.points); - - if (result.points.length > 0) { - result.status = 'Intersection'; + else { + result = new Intersection(); } - return result; - }; - - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric || (global.fabric = { }); - /** - * Color class - * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; - * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. - * - * @class fabric.Color - * @param {String} color optional in hex or rgb(a) or hsl format or from known color list - * @return {fabric.Color} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} - */ - function Color(color) { - if (!color) { - this.setSource([0, 0, 0, 1]); + } + else { + if (uaT === 0 || ubT === 0) { + result = new Intersection('Coincident'); } else { - this._tryParsingColor(color); + result = new Intersection('Parallel'); } } + return result; + }; - fabric.Color = Color; - - fabric.Color.prototype = /** @lends fabric.Color.prototype */ { - - /** - * @private - * @param {String|Array} color Color value to parse - */ - _tryParsingColor: function(color) { - var source; - - if (color in Color.colorNameMap) { - color = Color.colorNameMap[color]; - } - - if (color === 'transparent') { - source = [255, 255, 255, 0]; - } - - if (!source) { - source = Color.sourceFromHex(color); - } - if (!source) { - source = Color.sourceFromRgb(color); - } - if (!source) { - source = Color.sourceFromHsl(color); - } - if (!source) { - //if color is not recognize let's make black as canvas does - source = [0, 0, 0, 1]; - } - if (source) { - this.setSource(source); - } - }, - - /** - * Adapted from https://github.com/mjijackson - * @private - * @param {Number} r Red color value - * @param {Number} g Green color value - * @param {Number} b Blue color value - * @return {Array} Hsl color - */ - _rgbToHsl: function(r, g, b) { - r /= 255; g /= 255; b /= 255; - - var h, s, l, - max = fabric.util.array.max([r, g, b]), - min = fabric.util.array.min([r, g, b]); - - l = (max + min) / 2; - - if (max === min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - } - h /= 6; - } + /** + * Checks if line intersects polygon + * TODO: rename in intersectSegmentPolygon + * fix detection of coincident + * @static + * @param {fabric.Point} a1 + * @param {fabric.Point} a2 + * @param {Array} points + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { + var result = new Intersection(), + length = points.length, + b1, b2, inter, i; - return [ - Math.round(h * 360), - Math.round(s * 100), - Math.round(l * 100) - ]; - }, + for (i = 0; i < length; i++) { + b1 = points[i]; + b2 = points[(i + 1) % length]; + inter = Intersection.intersectLineLine(a1, a2, b1, b2); - /** - * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @return {Array} - */ - getSource: function() { - return this._source; - }, + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; - /** - * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) - * @param {Array} source - */ - setSource: function(source) { - this._source = source; - }, + /** + * Checks if polygon intersects another polygon + * @static + * @param {Array} points1 + * @param {Array} points2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { + var result = new Intersection(), + length = points1.length, i; - /** - * Returns color representation in RGB format - * @return {String} ex: rgb(0-255,0-255,0-255) - */ - toRgb: function() { - var source = this.getSource(); - return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; - }, + for (i = 0; i < length; i++) { + var a1 = points1[i], + a2 = points1[(i + 1) % length], + inter = Intersection.intersectLinePolygon(a1, a2, points2); - /** - * Returns color representation in RGBA format - * @return {String} ex: rgba(0-255,0-255,0-255,0-1) - */ - toRgba: function() { - var source = this.getSource(); - return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; - }, + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; - /** - * Returns color representation in HSL format - * @return {String} ex: hsl(0-360,0%-100%,0%-100%) - */ - toHsl: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); + /** + * Checks if polygon intersects rectangle + * @static + * @param {Array} points + * @param {fabric.Point} r1 + * @param {fabric.Point} r2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { + var min = r1.min(r2), + max = r1.max(r2), + topRight = new fabric.Point(max.x, min.y), + bottomLeft = new fabric.Point(min.x, max.y), + inter1 = Intersection.intersectLinePolygon(min, topRight, points), + inter2 = Intersection.intersectLinePolygon(topRight, max, points), + inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), + inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), + result = new Intersection(); + + result.appendPoints(inter1.points); + result.appendPoints(inter2.points); + result.appendPoints(inter3.points); + result.appendPoints(inter4.points); + + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; - return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; - }, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Returns color representation in HSLA format - * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) - */ - toHsla: function() { - var source = this.getSource(), - hsl = this._rgbToHsl(source[0], source[1], source[2]); - return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; - }, +(function(global) { - /** - * Returns color representation in HEX format - * @return {String} ex: FF5555 - */ - toHex: function() { - var source = this.getSource(), r, g, b; + 'use strict'; - r = source[0].toString(16); - r = (r.length === 1) ? ('0' + r) : r; + var fabric = global.fabric || (global.fabric = { }); - g = source[1].toString(16); - g = (g.length === 1) ? ('0' + g) : g; + if (fabric.Color) { + fabric.warn('fabric.Color is already defined.'); + return; + } - b = source[2].toString(16); - b = (b.length === 1) ? ('0' + b) : b; + /** + * Color class + * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; + * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. + * + * @class fabric.Color + * @param {String} color optional in hex or rgb(a) or hsl format or from known color list + * @return {fabric.Color} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} + */ + function Color(color) { + if (!color) { + this.setSource([0, 0, 0, 1]); + } + else { + this._tryParsingColor(color); + } + } - return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); - }, + fabric.Color = Color; - /** - * Returns color representation in HEXA format - * @return {String} ex: FF5555CC - */ - toHexa: function() { - var source = this.getSource(), a; + fabric.Color.prototype = /** @lends fabric.Color.prototype */ { - a = Math.round(source[3] * 255); - a = a.toString(16); - a = (a.length === 1) ? ('0' + a) : a; + /** + * @private + * @param {String|Array} color Color value to parse + */ + _tryParsingColor: function(color) { + var source; - return this.toHex() + a.toUpperCase(); - }, + if (color in Color.colorNameMap) { + color = Color.colorNameMap[color]; + } - /** - * Gets value of alpha channel for this color - * @return {Number} 0-1 - */ - getAlpha: function() { - return this.getSource()[3]; - }, + if (color === 'transparent') { + source = [255, 255, 255, 0]; + } - /** - * Sets value of alpha channel for this color - * @param {Number} alpha Alpha value 0-1 - * @return {fabric.Color} thisArg - */ - setAlpha: function(alpha) { - var source = this.getSource(); - source[3] = alpha; + if (!source) { + source = Color.sourceFromHex(color); + } + if (!source) { + source = Color.sourceFromRgb(color); + } + if (!source) { + source = Color.sourceFromHsl(color); + } + if (!source) { + //if color is not recognize let's make black as canvas does + source = [0, 0, 0, 1]; + } + if (source) { this.setSource(source); - return this; - }, - - /** - * Transforms color to its grayscale representation - * @return {fabric.Color} thisArg - */ - toGrayscale: function() { - var source = this.getSource(), - average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), - currentAlpha = source[3]; - this.setSource([average, average, average, currentAlpha]); - return this; - }, + } + }, - /** - * Transforms color to its black and white representation - * @param {Number} threshold - * @return {fabric.Color} thisArg - */ - toBlackWhite: function(threshold) { - var source = this.getSource(), - average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), - currentAlpha = source[3]; + /** + * Adapted from https://github.com/mjijackson + * @private + * @param {Number} r Red color value + * @param {Number} g Green color value + * @param {Number} b Blue color value + * @return {Array} Hsl color + */ + _rgbToHsl: function(r, g, b) { + r /= 255; g /= 255; b /= 255; - threshold = threshold || 127; + var h, s, l, + max = fabric.util.array.max([r, g, b]), + min = fabric.util.array.min([r, g, b]); - average = (Number(average) < Number(threshold)) ? 0 : 255; - this.setSource([average, average, average, currentAlpha]); - return this; - }, + l = (max + min) / 2; - /** - * Overlays color with another color - * @param {String|fabric.Color} otherColor - * @return {fabric.Color} thisArg - */ - overlayWith: function(otherColor) { - if (!(otherColor instanceof Color)) { - otherColor = new Color(otherColor); + if (max === min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; } + h /= 6; + } - var result = [], - alpha = this.getAlpha(), - otherAlpha = 0.5, - source = this.getSource(), - otherSource = otherColor.getSource(), i; - - for (i = 0; i < 3; i++) { - result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); - } + return [ + Math.round(h * 360), + Math.round(s * 100), + Math.round(l * 100) + ]; + }, - result[3] = alpha; - this.setSource(result); - return this; - } - }; + /** + * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @return {Array} + */ + getSource: function() { + return this._source; + }, /** - * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) - * @static - * @field - * @memberOf fabric.Color + * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @param {Array} source */ - // eslint-disable-next-line max-len - fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; + setSource: function(source) { + this._source = source; + }, /** - * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) - * @static - * @field - * @memberOf fabric.Color + * Returns color representation in RGB format + * @return {String} ex: rgb(0-255,0-255,0-255) */ - fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; + toRgb: function() { + var source = this.getSource(); + return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; + }, /** - * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) - * @static - * @field - * @memberOf fabric.Color + * Returns color representation in RGBA format + * @return {String} ex: rgba(0-255,0-255,0-255,0-1) */ - fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; + toRgba: function() { + var source = this.getSource(); + return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; + }, /** - * Map of the 148 color names with HEX code - * @static - * @field - * @memberOf fabric.Color - * @see: https://www.w3.org/TR/css3-color/#svg-color - */ - fabric.Color.colorNameMap = { - aliceblue: '#F0F8FF', - antiquewhite: '#FAEBD7', - aqua: '#00FFFF', - aquamarine: '#7FFFD4', - azure: '#F0FFFF', - beige: '#F5F5DC', - bisque: '#FFE4C4', - black: '#000000', - blanchedalmond: '#FFEBCD', - blue: '#0000FF', - blueviolet: '#8A2BE2', - brown: '#A52A2A', - burlywood: '#DEB887', - cadetblue: '#5F9EA0', - chartreuse: '#7FFF00', - chocolate: '#D2691E', - coral: '#FF7F50', - cornflowerblue: '#6495ED', - cornsilk: '#FFF8DC', - crimson: '#DC143C', - cyan: '#00FFFF', - darkblue: '#00008B', - darkcyan: '#008B8B', - darkgoldenrod: '#B8860B', - darkgray: '#A9A9A9', - darkgrey: '#A9A9A9', - darkgreen: '#006400', - darkkhaki: '#BDB76B', - darkmagenta: '#8B008B', - darkolivegreen: '#556B2F', - darkorange: '#FF8C00', - darkorchid: '#9932CC', - darkred: '#8B0000', - darksalmon: '#E9967A', - darkseagreen: '#8FBC8F', - darkslateblue: '#483D8B', - darkslategray: '#2F4F4F', - darkslategrey: '#2F4F4F', - darkturquoise: '#00CED1', - darkviolet: '#9400D3', - deeppink: '#FF1493', - deepskyblue: '#00BFFF', - dimgray: '#696969', - dimgrey: '#696969', - dodgerblue: '#1E90FF', - firebrick: '#B22222', - floralwhite: '#FFFAF0', - forestgreen: '#228B22', - fuchsia: '#FF00FF', - gainsboro: '#DCDCDC', - ghostwhite: '#F8F8FF', - gold: '#FFD700', - goldenrod: '#DAA520', - gray: '#808080', - grey: '#808080', - green: '#008000', - greenyellow: '#ADFF2F', - honeydew: '#F0FFF0', - hotpink: '#FF69B4', - indianred: '#CD5C5C', - indigo: '#4B0082', - ivory: '#FFFFF0', - khaki: '#F0E68C', - lavender: '#E6E6FA', - lavenderblush: '#FFF0F5', - lawngreen: '#7CFC00', - lemonchiffon: '#FFFACD', - lightblue: '#ADD8E6', - lightcoral: '#F08080', - lightcyan: '#E0FFFF', - lightgoldenrodyellow: '#FAFAD2', - lightgray: '#D3D3D3', - lightgrey: '#D3D3D3', - lightgreen: '#90EE90', - lightpink: '#FFB6C1', - lightsalmon: '#FFA07A', - lightseagreen: '#20B2AA', - lightskyblue: '#87CEFA', - lightslategray: '#778899', - lightslategrey: '#778899', - lightsteelblue: '#B0C4DE', - lightyellow: '#FFFFE0', - lime: '#00FF00', - limegreen: '#32CD32', - linen: '#FAF0E6', - magenta: '#FF00FF', - maroon: '#800000', - mediumaquamarine: '#66CDAA', - mediumblue: '#0000CD', - mediumorchid: '#BA55D3', - mediumpurple: '#9370DB', - mediumseagreen: '#3CB371', - mediumslateblue: '#7B68EE', - mediumspringgreen: '#00FA9A', - mediumturquoise: '#48D1CC', - mediumvioletred: '#C71585', - midnightblue: '#191970', - mintcream: '#F5FFFA', - mistyrose: '#FFE4E1', - moccasin: '#FFE4B5', - navajowhite: '#FFDEAD', - navy: '#000080', - oldlace: '#FDF5E6', - olive: '#808000', - olivedrab: '#6B8E23', - orange: '#FFA500', - orangered: '#FF4500', - orchid: '#DA70D6', - palegoldenrod: '#EEE8AA', - palegreen: '#98FB98', - paleturquoise: '#AFEEEE', - palevioletred: '#DB7093', - papayawhip: '#FFEFD5', - peachpuff: '#FFDAB9', - peru: '#CD853F', - pink: '#FFC0CB', - plum: '#DDA0DD', - powderblue: '#B0E0E6', - purple: '#800080', - rebeccapurple: '#663399', - red: '#FF0000', - rosybrown: '#BC8F8F', - royalblue: '#4169E1', - saddlebrown: '#8B4513', - salmon: '#FA8072', - sandybrown: '#F4A460', - seagreen: '#2E8B57', - seashell: '#FFF5EE', - sienna: '#A0522D', - silver: '#C0C0C0', - skyblue: '#87CEEB', - slateblue: '#6A5ACD', - slategray: '#708090', - slategrey: '#708090', - snow: '#FFFAFA', - springgreen: '#00FF7F', - steelblue: '#4682B4', - tan: '#D2B48C', - teal: '#008080', - thistle: '#D8BFD8', - tomato: '#FF6347', - turquoise: '#40E0D0', - violet: '#EE82EE', - wheat: '#F5DEB3', - white: '#FFFFFF', - whitesmoke: '#F5F5F5', - yellow: '#FFFF00', - yellowgreen: '#9ACD32' - }; + * Returns color representation in HSL format + * @return {String} ex: hsl(0-360,0%-100%,0%-100%) + */ + toHsl: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); + + return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; + }, /** - * @private - * @param {Number} p - * @param {Number} q - * @param {Number} t - * @return {Number} + * Returns color representation in HSLA format + * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) */ - function hue2rgb(p, q, t) { - if (t < 0) { - t += 1; - } - if (t > 1) { - t -= 1; - } - if (t < 1 / 6) { - return p + (q - p) * 6 * t; - } - if (t < 1 / 2) { - return q; - } - if (t < 2 / 3) { - return p + (q - p) * (2 / 3 - t) * 6; - } - return p; - } + toHsla: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); + + return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; + }, /** - * Returns new color object, when given a color in RGB format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255) - * @return {fabric.Color} + * Returns color representation in HEX format + * @return {String} ex: FF5555 */ - fabric.Color.fromRgb = function(color) { - return Color.fromSource(Color.sourceFromRgb(color)); - }; + toHex: function() { + var source = this.getSource(), r, g, b; + + r = source[0].toString(16); + r = (r.length === 1) ? ('0' + r) : r; + + g = source[1].toString(16); + g = (g.length === 1) ? ('0' + g) : g; + + b = source[2].toString(16); + b = (b.length === 1) ? ('0' + b) : b; + + return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); + }, /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format - * @memberOf fabric.Color - * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) - * @return {Array} source + * Returns color representation in HEXA format + * @return {String} ex: FF5555CC */ - fabric.Color.sourceFromRgb = function(color) { - var match = color.match(Color.reRGBa); - if (match) { - var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), - g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), - b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); + toHexa: function() { + var source = this.getSource(), a; - return [ - parseInt(r, 10), - parseInt(g, 10), - parseInt(b, 10), - match[4] ? parseFloat(match[4]) : 1 - ]; - } - }; + a = Math.round(source[3] * 255); + a = a.toString(16); + a = (a.length === 1) ? ('0' + a) : a; + + return this.toHex() + a.toUpperCase(); + }, /** - * Returns new color object, when given a color in RGBA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} + * Gets value of alpha channel for this color + * @return {Number} 0-1 */ - fabric.Color.fromRgba = Color.fromRgb; + getAlpha: function() { + return this.getSource()[3]; + }, /** - * Returns new color object, when given a color in HSL format - * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) - * @memberOf fabric.Color - * @return {fabric.Color} + * Sets value of alpha channel for this color + * @param {Number} alpha Alpha value 0-1 + * @return {fabric.Color} thisArg */ - fabric.Color.fromHsl = function(color) { - return Color.fromSource(Color.sourceFromHsl(color)); - }; + setAlpha: function(alpha) { + var source = this.getSource(); + source[3] = alpha; + this.setSource(source); + return this; + }, /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. - * Adapted from https://github.com/mjijackson - * @memberOf fabric.Color - * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) - * @return {Array} source - * @see http://http://www.w3.org/TR/css3-color/#hsl-color + * Transforms color to its grayscale representation + * @return {fabric.Color} thisArg */ - fabric.Color.sourceFromHsl = function(color) { - var match = color.match(Color.reHSLa); - if (!match) { - return; - } + toGrayscale: function() { + var source = this.getSource(), + average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), + currentAlpha = source[3]; + this.setSource([average, average, average, currentAlpha]); + return this; + }, - var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, - s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), - l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), - r, g, b; + /** + * Transforms color to its black and white representation + * @param {Number} threshold + * @return {fabric.Color} thisArg + */ + toBlackWhite: function(threshold) { + var source = this.getSource(), + average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), + currentAlpha = source[3]; - if (s === 0) { - r = g = b = l; - } - else { - var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, - p = l * 2 - q; + threshold = threshold || 127; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); - } - - return [ - Math.round(r * 255), - Math.round(g * 255), - Math.round(b * 255), - match[4] ? parseFloat(match[4]) : 1 - ]; - }; + average = (Number(average) < Number(threshold)) ? 0 : 255; + this.setSource([average, average, average, currentAlpha]); + return this; + }, /** - * Returns new color object, when given a color in HSLA format - * @static - * @function - * @memberOf fabric.Color - * @param {String} color - * @return {fabric.Color} + * Overlays color with another color + * @param {String|fabric.Color} otherColor + * @return {fabric.Color} thisArg */ - fabric.Color.fromHsla = Color.fromHsl; + overlayWith: function(otherColor) { + if (!(otherColor instanceof Color)) { + otherColor = new Color(otherColor); + } - /** - * Returns new color object, when given a color in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color Color value ex: FF5555 - * @return {fabric.Color} - */ - fabric.Color.fromHex = function(color) { - return Color.fromSource(Color.sourceFromHex(color)); - }; + var result = [], + alpha = this.getAlpha(), + otherAlpha = 0.5, + source = this.getSource(), + otherSource = otherColor.getSource(), i; - /** - * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format - * @static - * @memberOf fabric.Color - * @param {String} color ex: FF5555 or FF5544CC (RGBa) - * @return {Array} source - */ - fabric.Color.sourceFromHex = function(color) { - if (color.match(Color.reHex)) { - var value = color.slice(color.indexOf('#') + 1), - isShortNotation = (value.length === 3 || value.length === 4), - isRGBa = (value.length === 8 || value.length === 4), - r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), - g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), - b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), - a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; - - return [ - parseInt(r, 16), - parseInt(g, 16), - parseInt(b, 16), - parseFloat((parseInt(a, 16) / 255).toFixed(2)) - ]; + for (i = 0; i < 3; i++) { + result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); } - }; - /** - * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) - * @static - * @memberOf fabric.Color - * @param {Array} source - * @return {fabric.Color} - */ - fabric.Color.fromSource = function(source) { - var oColor = new Color(); - oColor.setSource(source); - return oColor; - }; + result[3] = alpha; + this.setSource(result); + return this; + } + }; - })(typeof exports !== 'undefined' ? exports : window); + /** + * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) + * @static + * @field + * @memberOf fabric.Color + */ + // eslint-disable-next-line max-len + fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], - skewMap = ['ns', 'nesw', 'ew', 'nwse'], - controls = {}, - LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', - opposite = { - top: BOTTOM, - bottom: TOP, - left: RIGHT, - right: LEFT, - center: CENTER, - }, radiansToDegrees = fabric.util.radiansToDegrees, - sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); + /** + * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) + * @static + * @field + * @memberOf fabric.Color + */ + fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; - /** - * Combine control position and object angle to find the control direction compared - * to the object center. - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls - * @param {fabric.Control} control the control class - * @return {Number} 0 - 7 a quadrant number - */ - function findCornerQuadrant(fabricObject, control) { - // angle is relative to canvas plane - var angle = fabricObject.getTotalAngle(); - var cornerAngle = angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; - return Math.round((cornerAngle % 360) / 45); - } + /** + * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) + * @static + * @field + * @memberOf fabric.Color + */ + fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; + + /** + * Map of the 148 color names with HEX code + * @static + * @field + * @memberOf fabric.Color + * @see: https://www.w3.org/TR/css3-color/#svg-color + */ + fabric.Color.colorNameMap = { + aliceblue: '#F0F8FF', + antiquewhite: '#FAEBD7', + aqua: '#00FFFF', + aquamarine: '#7FFFD4', + azure: '#F0FFFF', + beige: '#F5F5DC', + bisque: '#FFE4C4', + black: '#000000', + blanchedalmond: '#FFEBCD', + blue: '#0000FF', + blueviolet: '#8A2BE2', + brown: '#A52A2A', + burlywood: '#DEB887', + cadetblue: '#5F9EA0', + chartreuse: '#7FFF00', + chocolate: '#D2691E', + coral: '#FF7F50', + cornflowerblue: '#6495ED', + cornsilk: '#FFF8DC', + crimson: '#DC143C', + cyan: '#00FFFF', + darkblue: '#00008B', + darkcyan: '#008B8B', + darkgoldenrod: '#B8860B', + darkgray: '#A9A9A9', + darkgrey: '#A9A9A9', + darkgreen: '#006400', + darkkhaki: '#BDB76B', + darkmagenta: '#8B008B', + darkolivegreen: '#556B2F', + darkorange: '#FF8C00', + darkorchid: '#9932CC', + darkred: '#8B0000', + darksalmon: '#E9967A', + darkseagreen: '#8FBC8F', + darkslateblue: '#483D8B', + darkslategray: '#2F4F4F', + darkslategrey: '#2F4F4F', + darkturquoise: '#00CED1', + darkviolet: '#9400D3', + deeppink: '#FF1493', + deepskyblue: '#00BFFF', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1E90FF', + firebrick: '#B22222', + floralwhite: '#FFFAF0', + forestgreen: '#228B22', + fuchsia: '#FF00FF', + gainsboro: '#DCDCDC', + ghostwhite: '#F8F8FF', + gold: '#FFD700', + goldenrod: '#DAA520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#ADFF2F', + honeydew: '#F0FFF0', + hotpink: '#FF69B4', + indianred: '#CD5C5C', + indigo: '#4B0082', + ivory: '#FFFFF0', + khaki: '#F0E68C', + lavender: '#E6E6FA', + lavenderblush: '#FFF0F5', + lawngreen: '#7CFC00', + lemonchiffon: '#FFFACD', + lightblue: '#ADD8E6', + lightcoral: '#F08080', + lightcyan: '#E0FFFF', + lightgoldenrodyellow: '#FAFAD2', + lightgray: '#D3D3D3', + lightgrey: '#D3D3D3', + lightgreen: '#90EE90', + lightpink: '#FFB6C1', + lightsalmon: '#FFA07A', + lightseagreen: '#20B2AA', + lightskyblue: '#87CEFA', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#B0C4DE', + lightyellow: '#FFFFE0', + lime: '#00FF00', + limegreen: '#32CD32', + linen: '#FAF0E6', + magenta: '#FF00FF', + maroon: '#800000', + mediumaquamarine: '#66CDAA', + mediumblue: '#0000CD', + mediumorchid: '#BA55D3', + mediumpurple: '#9370DB', + mediumseagreen: '#3CB371', + mediumslateblue: '#7B68EE', + mediumspringgreen: '#00FA9A', + mediumturquoise: '#48D1CC', + mediumvioletred: '#C71585', + midnightblue: '#191970', + mintcream: '#F5FFFA', + mistyrose: '#FFE4E1', + moccasin: '#FFE4B5', + navajowhite: '#FFDEAD', + navy: '#000080', + oldlace: '#FDF5E6', + olive: '#808000', + olivedrab: '#6B8E23', + orange: '#FFA500', + orangered: '#FF4500', + orchid: '#DA70D6', + palegoldenrod: '#EEE8AA', + palegreen: '#98FB98', + paleturquoise: '#AFEEEE', + palevioletred: '#DB7093', + papayawhip: '#FFEFD5', + peachpuff: '#FFDAB9', + peru: '#CD853F', + pink: '#FFC0CB', + plum: '#DDA0DD', + powderblue: '#B0E0E6', + purple: '#800080', + rebeccapurple: '#663399', + red: '#FF0000', + rosybrown: '#BC8F8F', + royalblue: '#4169E1', + saddlebrown: '#8B4513', + salmon: '#FA8072', + sandybrown: '#F4A460', + seagreen: '#2E8B57', + seashell: '#FFF5EE', + sienna: '#A0522D', + silver: '#C0C0C0', + skyblue: '#87CEEB', + slateblue: '#6A5ACD', + slategray: '#708090', + slategrey: '#708090', + snow: '#FFFAFA', + springgreen: '#00FF7F', + steelblue: '#4682B4', + tan: '#D2B48C', + teal: '#008080', + thistle: '#D8BFD8', + tomato: '#FF6347', + turquoise: '#40E0D0', + violet: '#EE82EE', + wheat: '#F5DEB3', + white: '#FFFFFF', + whitesmoke: '#F5F5F5', + yellow: '#FFFF00', + yellowgreen: '#9ACD32' + }; - function fireEvent(eventName, options) { - var target = options.transform.target, - canvas = target.canvas; - canvas && canvas.fire('object:' + eventName, Object.assign({}, options, { target: target })); - target.fire(eventName, options); + /** + * @private + * @param {Number} p + * @param {Number} q + * @param {Number} t + * @return {Number} + */ + function hue2rgb(p, q, t) { + if (t < 0) { + t += 1; } + if (t > 1) { + t -= 1; + } + if (t < 1 / 6) { + return p + (q - p) * 6 * t; + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + return p; + } - /** - * Inspect event and fabricObject properties to understand if the scaling action - * @param {Event} eventData from the user action - * @param {fabric.Object} fabricObject the fabric object about to scale - * @return {Boolean} true if scale is proportional - */ - function scaleIsProportional(eventData, fabricObject) { - var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, - uniformIsToggled = eventData[uniScaleKey]; - return (canvas.uniformScaling && !uniformIsToggled) || - (!canvas.uniformScaling && uniformIsToggled); + /** + * Returns new color object, when given a color in RGB format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255) + * @return {fabric.Color} + */ + fabric.Color.fromRgb = function(color) { + return Color.fromSource(Color.sourceFromRgb(color)); + }; + + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) + * @return {Array} source + */ + fabric.Color.sourceFromRgb = function(color) { + var match = color.match(Color.reRGBa); + if (match) { + var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), + g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), + b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); + + return [ + parseInt(r, 10), + parseInt(g, 10), + parseInt(b, 10), + match[4] ? parseFloat(match[4]) : 1 + ]; } + }; - /** - * Checks if transform is centered - * @param {Object} transform transform data - * @return {Boolean} true if transform is centered - */ - function isTransformCentered(transform) { - return transform.originX === CENTER && transform.originY === CENTER; + /** + * Returns new color object, when given a color in RGBA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ + fabric.Color.fromRgba = Color.fromRgb; + + /** + * Returns new color object, when given a color in HSL format + * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) + * @memberOf fabric.Color + * @return {fabric.Color} + */ + fabric.Color.fromHsl = function(color) { + return Color.fromSource(Color.sourceFromHsl(color)); + }; + + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. + * Adapted from https://github.com/mjijackson + * @memberOf fabric.Color + * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) + * @return {Array} source + * @see http://http://www.w3.org/TR/css3-color/#hsl-color + */ + fabric.Color.sourceFromHsl = function(color) { + var match = color.match(Color.reHSLa); + if (!match) { + return; } - /** - * Inspect fabricObject to understand if the current scaling action is allowed - * @param {fabric.Object} fabricObject the fabric object about to scale - * @param {String} by 'x' or 'y' or '' - * @param {Boolean} scaleProportionally true if we are trying to scale proportionally - * @return {Boolean} true if scaling is not allowed at current conditions - */ - function scalingIsForbidden(fabricObject, by, scaleProportionally) { - var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; - if (lockX && lockY) { - return true; - } - if (!by && (lockX || lockY) && scaleProportionally) { - return true; - } - if (lockX && by === 'x') { - return true; - } - if (lockY && by === 'y') { - return true; - } - return false; + var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, + s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), + l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), + r, g, b; + + if (s === 0) { + r = g = b = l; } + else { + var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, + p = l * 2 - q; - /** - * return the correct cursor style for the scale action - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function scaleCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed', - scaleProportionally = scaleIsProportional(eventData, fabricObject), - by = ''; - if (control.x !== 0 && control.y === 0) { - by = 'x'; - } - else if (control.x === 0 && control.y !== 0) { - by = 'y'; - } - if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { - return notAllowed; - } - var n = findCornerQuadrant(fabricObject, control); - return scaleMap[n] + '-resize'; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); } - /** - * return the correct cursor style for the skew action - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function skewCursorStyleHandler(eventData, control, fabricObject) { - var notAllowed = 'not-allowed'; - if (control.x !== 0 && fabricObject.lockSkewingY) { - return notAllowed; - } - if (control.y !== 0 && fabricObject.lockSkewingX) { - return notAllowed; - } - var n = findCornerQuadrant(fabricObject, control) % 4; - return skewMap[n] + '-resize'; + return [ + Math.round(r * 255), + Math.round(g * 255), + Math.round(b * 255), + match[4] ? parseFloat(match[4]) : 1 + ]; + }; + + /** + * Returns new color object, when given a color in HSLA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ + fabric.Color.fromHsla = Color.fromHsl; + + /** + * Returns new color object, when given a color in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color Color value ex: FF5555 + * @return {fabric.Color} + */ + fabric.Color.fromHex = function(color) { + return Color.fromSource(Color.sourceFromHex(color)); + }; + + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color ex: FF5555 or FF5544CC (RGBa) + * @return {Array} source + */ + fabric.Color.sourceFromHex = function(color) { + if (color.match(Color.reHex)) { + var value = color.slice(color.indexOf('#') + 1), + isShortNotation = (value.length === 3 || value.length === 4), + isRGBa = (value.length === 8 || value.length === 4), + r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), + g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), + b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), + a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; + + return [ + parseInt(r, 16), + parseInt(g, 16), + parseInt(b, 16), + parseFloat((parseInt(a, 16) / 255).toFixed(2)) + ]; } + }; - /** - * Combine skew and scale style handlers to cover fabric standard use case - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { - if (eventData[fabricObject.canvas.altActionKey]) { - return controls.skewCursorStyleHandler(eventData, control, fabricObject); - } - return controls.scaleCursorStyleHandler(eventData, control, fabricObject); + /** + * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) + * @static + * @memberOf fabric.Color + * @param {Array} source + * @return {fabric.Color} + */ + fabric.Color.fromSource = function(source) { + var oColor = new Color(); + oColor.setSource(source); + return oColor; + }; + +})(typeof exports !== 'undefined' ? exports : this); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], + skewMap = ['ns', 'nesw', 'ew', 'nwse'], + controls = {}, + LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', + opposite = { + top: BOTTOM, + bottom: TOP, + left: RIGHT, + right: LEFT, + center: CENTER, + }, radiansToDegrees = fabric.util.radiansToDegrees, + sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); + + /** + * Combine control position and object angle to find the control direction compared + * to the object center. + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + * @param {fabric.Control} control the control class + * @return {Number} 0 - 7 a quadrant number + */ + function findCornerQuadrant(fabricObject, control) { + var cornerAngle = fabricObject.angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; + return Math.round((cornerAngle % 360) / 45); + } + + function fireEvent(eventName, options) { + var target = options.transform.target, + canvas = target.canvas, + canvasOptions = fabric.util.object.clone(options); + canvasOptions.target = target; + canvas && canvas.fire('object:' + eventName, canvasOptions); + target.fire(eventName, options); + } + + /** + * Inspect event and fabricObject properties to understand if the scaling action + * @param {Event} eventData from the user action + * @param {fabric.Object} fabricObject the fabric object about to scale + * @return {Boolean} true if scale is proportional + */ + function scaleIsProportional(eventData, fabricObject) { + var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, + uniformIsToggled = eventData[uniScaleKey]; + return (canvas.uniformScaling && !uniformIsToggled) || + (!canvas.uniformScaling && uniformIsToggled); + } + + /** + * Checks if transform is centered + * @param {Object} transform transform data + * @return {Boolean} true if transform is centered + */ + function isTransformCentered(transform) { + return transform.originX === CENTER && transform.originY === CENTER; + } + + /** + * Inspect fabricObject to understand if the current scaling action is allowed + * @param {fabric.Object} fabricObject the fabric object about to scale + * @param {String} by 'x' or 'y' or '' + * @param {Boolean} scaleProportionally true if we are trying to scale proportionally + * @return {Boolean} true if scaling is not allowed at current conditions + */ + function scalingIsForbidden(fabricObject, by, scaleProportionally) { + var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; + if (lockX && lockY) { + return true; } + if (!by && (lockX || lockY) && scaleProportionally) { + return true; + } + if (lockX && by === 'x') { + return true; + } + if (lockY && by === 'y') { + return true; + } + return false; + } - /** - * Inspect event, control and fabricObject to return the correct action name - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} an action name - */ - function scaleOrSkewActionName(eventData, control, fabricObject) { - var isAlternative = eventData[fabricObject.canvas.altActionKey]; - if (control.x === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewX' : 'scaleY'; - } - if (control.y === 0) { - // then is scaleY or skewX - return isAlternative ? 'skewY' : 'scaleX'; - } + /** + * return the correct cursor style for the scale action + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function scaleCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed', + scaleProportionally = scaleIsProportional(eventData, fabricObject), + by = ''; + if (control.x !== 0 && control.y === 0) { + by = 'x'; + } + else if (control.x === 0 && control.y !== 0) { + by = 'y'; } + if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control); + return scaleMap[n] + '-resize'; + } - /** - * Find the correct style for the control that is used for rotation. - * this function is very simple and it just take care of not-allowed or standard cursor - * @param {Event} eventData the javascript event that is causing the scale - * @param {fabric.Control} control the control that is interested in the action - * @param {fabric.Object} fabricObject the fabric object that is interested in the action - * @return {String} a valid css string for the cursor - */ - function rotationStyleHandler(eventData, control, fabricObject) { - if (fabricObject.lockRotation) { - return 'not-allowed'; - } - return control.cursorStyle; + /** + * return the correct cursor style for the skew action + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function skewCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed'; + if (control.x !== 0 && fabricObject.lockSkewingY) { + return notAllowed; } + if (control.y !== 0 && fabricObject.lockSkewingX) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control) % 4; + return skewMap[n] + '-resize'; + } - function commonEventInfo(eventData, transform, x, y) { - return { - e: eventData, - transform: transform, - pointer: { - x: x, - y: y, - } - }; + /** + * Combine skew and scale style handlers to cover fabric standard use case + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { + if (eventData[fabricObject.canvas.altActionKey]) { + return controls.skewCursorStyleHandler(eventData, control, fabricObject); } + return controls.scaleCursorStyleHandler(eventData, control, fabricObject); + } - /** - * Wrap an action handler with saving/restoring object position on the transform. - * this is the code that permits to objects to keep their position while transforming. - * @param {Function} actionHandler the function to wrap - * @return {Function} a function with an action handler signature - */ - function wrapWithFixedAnchor(actionHandler) { - return function(eventData, transform, x, y) { - var target = transform.target, centerPoint = target.getRelativeCenterPoint(), - constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), - actionPerformed = actionHandler(eventData, transform, x, y); - target.setPositionByOrigin(constraint, transform.originX, transform.originY); - return actionPerformed; - }; + /** + * Inspect event, control and fabricObject to return the correct action name + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} an action name + */ + function scaleOrSkewActionName(eventData, control, fabricObject) { + var isAlternative = eventData[fabricObject.canvas.altActionKey]; + if (control.x === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewX' : 'scaleY'; + } + if (control.y === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewY' : 'scaleX'; } + } - /** - * Wrap an action handler with firing an event if the action is performed - * @param {Function} actionHandler the function to wrap - * @return {Function} a function with an action handler signature - */ - function wrapWithFireEvent(eventName, actionHandler) { - return function(eventData, transform, x, y) { - var actionPerformed = actionHandler(eventData, transform, x, y); - if (actionPerformed) { - fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); - } - return actionPerformed; - }; + /** + * Find the correct style for the control that is used for rotation. + * this function is very simple and it just take care of not-allowed or standard cursor + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function rotationStyleHandler(eventData, control, fabricObject) { + if (fabricObject.lockRotation) { + return 'not-allowed'; } + return control.cursorStyle; + } - /** - * Transforms a point described by x and y in a distance from the top left corner of the object - * bounding box. - * @param {Object} transform - * @param {String} originX - * @param {String} originY - * @param {number} x - * @param {number} y - * @return {Fabric.Point} the normalized point - */ - function getLocalPoint(transform, originX, originY, x, y) { - var target = transform.target, - control = target.controls[transform.corner], - zoom = target.canvas.getZoom(), - padding = target.padding / zoom, - localPoint = target.normalizePoint(new fabric.Point(x, y), originX, originY); - if (localPoint.x >= padding) { - localPoint.x -= padding; - } - if (localPoint.x <= -padding) { - localPoint.x += padding; - } - if (localPoint.y >= padding) { - localPoint.y -= padding; + function commonEventInfo(eventData, transform, x, y) { + return { + e: eventData, + transform: transform, + pointer: { + x: x, + y: y, } - if (localPoint.y <= padding) { - localPoint.y += padding; + }; + } + + /** + * Wrap an action handler with saving/restoring object position on the transform. + * this is the code that permits to objects to keep their position while transforming. + * @param {Function} actionHandler the function to wrap + * @return {Function} a function with an action handler signature + */ + function wrapWithFixedAnchor(actionHandler) { + return function(eventData, transform, x, y) { + var target = transform.target, centerPoint = target.getCenterPoint(), + constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), + actionPerformed = actionHandler(eventData, transform, x, y); + target.setPositionByOrigin(constraint, transform.originX, transform.originY); + return actionPerformed; + }; + } + + /** + * Wrap an action handler with firing an event if the action is performed + * @param {Function} actionHandler the function to wrap + * @return {Function} a function with an action handler signature + */ + function wrapWithFireEvent(eventName, actionHandler) { + return function(eventData, transform, x, y) { + var actionPerformed = actionHandler(eventData, transform, x, y); + if (actionPerformed) { + fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); } - localPoint.x -= control.offsetX; - localPoint.y -= control.offsetY; - return localPoint; + return actionPerformed; + }; + } + + /** + * Transforms a point described by x and y in a distance from the top left corner of the object + * bounding box. + * @param {Object} transform + * @param {String} originX + * @param {String} originY + * @param {number} x + * @param {number} y + * @return {Fabric.Point} the normalized point + */ + function getLocalPoint(transform, originX, originY, x, y) { + var target = transform.target, + control = target.controls[transform.corner], + zoom = target.canvas.getZoom(), + padding = target.padding / zoom, + localPoint = target.toLocalPoint(new fabric.Point(x, y), originX, originY); + if (localPoint.x >= padding) { + localPoint.x -= padding; + } + if (localPoint.x <= -padding) { + localPoint.x += padding; } + if (localPoint.y >= padding) { + localPoint.y -= padding; + } + if (localPoint.y <= padding) { + localPoint.y += padding; + } + localPoint.x -= control.offsetX; + localPoint.y -= control.offsetY; + return localPoint; + } - /** - * Detect if the fabric object is flipped on one side. - * @param {fabric.Object} target - * @return {Boolean} true if one flip, but not two. - */ - function targetHasOneFlip(target) { - return target.flipX !== target.flipY; + /** + * Detect if the fabric object is flipped on one side. + * @param {fabric.Object} target + * @return {Boolean} true if one flip, but not two. + */ + function targetHasOneFlip(target) { + return target.flipX !== target.flipY; + } + + /** + * Utility function to compensate the scale factor when skew is applied on both axes + * @private + */ + function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { + if (target[oppositeSkew] !== 0) { + var newDim = target._getTransformedDimensions()[axis]; + var newValue = reference / newDim * target[scaleToCompensate]; + target.set(scaleToCompensate, newValue); } + } - /** - * Utility function to compensate the scale factor when skew is applied on both axes - * @private - */ - function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { - if (target[oppositeSkew] !== 0) { - var newDim = target._getTransformedDimensions()[axis]; - var newValue = reference / newDim * target[scaleToCompensate]; - target.set(scaleToCompensate, newValue); + /** + * Action handler for skewing on the X axis + * @private + */ + function skewObjectX(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions(0, target.skewY), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, + currentSkew = target.skewX, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; + } + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; + } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; } + if (targetHasOneFlip(target)) { + newSkew = -newSkew; + } + } + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().y; + target.set('skewX', newSkew); + compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); } + return hasSkewed; + } - /** - * Action handler for skewing on the X axis - * @private - */ - function skewObjectX(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions({ skewX: 0, skewY: target.skewY }), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, - currentSkew = target.skewX, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; + /** + * Action handler for skewing on the Y axis + * @private + */ + function skewObjectY(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions(target.skewX, 0), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, + currentSkew = target.skewY, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; + } + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; } - else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; - } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; - } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; - } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().y; - target.set('skewX', newSkew); - compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); + if (targetHasOneFlip(target)) { + newSkew = -newSkew; } - return hasSkewed; } + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().x; + target.set('skewY', newSkew); + compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); + } + return hasSkewed; + } - /** - * Action handler for skewing on the Y axis - * @private - */ - function skewObjectY(eventData, transform, x, y) { - var target = transform.target, - // find how big the object would be, if there was no skewX. takes in account scaling - dimNoSkew = target._getTransformedDimensions({ skewX: target.skewX, skewY: 0 }), - localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), - // the mouse is in the center of the object, and we want it to stay there. - // so the object will grow twice as much as the mouse. - // this makes the skew growth to localPoint * 2 - dimNoSkew. - totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, - currentSkew = target.skewY, newSkew; - if (totalSkewSize < 2) { - // let's make it easy to go back to position 0. - newSkew = 0; + /** + * Wrapped Action handler for skewing on the Y axis, takes care of the + * skew direction and determine the correct transform origin for the anchor point + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function skewHandlerX(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewX > 0 and originY bottom we anchor on right + // if skewX > 0 and originY top we anchor on left + // if skewX < 0 and originY bottom we anchor on left + // if skewX < 0 and originY top we anchor on right + // if skewX is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; + if (target.lockSkewingX) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.x > 0) { + // we are pulling right, anchor left; + originX = LEFT; } else { - newSkew = radiansToDegrees( - Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) - ); - // now we have to find the sign of the skew. - // it mostly depend on the origin of transformation. - if (transform.originX === LEFT && transform.originY === BOTTOM) { - newSkew = -newSkew; - } - if (transform.originX === RIGHT && transform.originY === TOP) { - newSkew = -newSkew; - } - if (targetHasOneFlip(target)) { - newSkew = -newSkew; - } + // we are pulling right, anchor right + originX = RIGHT; + } + } + else { + if (currentSkew > 0) { + originX = originY === TOP ? LEFT : RIGHT; } - var hasSkewed = currentSkew !== newSkew; - if (hasSkewed) { - var dimBeforeSkewing = target._getTransformedDimensions().x; - target.set('skewY', newSkew); - compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); + if (currentSkew < 0) { + originX = originY === TOP ? RIGHT : LEFT; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originX = originX === LEFT ? RIGHT : LEFT; } - return hasSkewed; } - /** - * Wrapped Action handler for skewing on the Y axis, takes care of the - * skew direction and determine the correct transform origin for the anchor point - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function skewHandlerX(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewX > 0 and originY bottom we anchor on right - // if skewX > 0 and originY top we anchor on left - // if skewX < 0 and originY bottom we anchor on left - // if skewX < 0 and originY top we anchor on right - // if skewX is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; - if (target.lockSkewingX) { - return false; - } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.x > 0) { - // we are pulling right, anchor left; - originX = LEFT; - } - else { - // we are pulling right, anchor right - originX = RIGHT; - } + // once we have the origin, we find the anchor point + transform.originX = originX; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); + return finalHandler(eventData, transform, x, y); + } + + /** + * Wrapped Action handler for skewing on the Y axis, takes care of the + * skew direction and determine the correct transform origin for the anchor point + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function skewHandlerY(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewY > 0 and originX left we anchor on top + // if skewY > 0 and originX right we anchor on bottom + // if skewY < 0 and originX left we anchor on bottom + // if skewY < 0 and originX right we anchor on top + // if skewY is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; + if (target.lockSkewingY) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.y > 0) { + // we are pulling down, anchor up; + originY = TOP; } else { - if (currentSkew > 0) { - originX = originY === TOP ? LEFT : RIGHT; - } - if (currentSkew < 0) { - originX = originY === TOP ? RIGHT : LEFT; - } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originX = originX === LEFT ? RIGHT : LEFT; - } + // we are pulling up, anchor down + originY = BOTTOM; } - - // once we have the origin, we find the anchor point - transform.originX = originX; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); - return finalHandler(eventData, transform, x, y); } - - /** - * Wrapped Action handler for skewing on the Y axis, takes care of the - * skew direction and determine the correct transform origin for the anchor point - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - */ - function skewHandlerY(eventData, transform, x, y) { - // step1 figure out and change transform origin. - // if skewY > 0 and originX left we anchor on top - // if skewY > 0 and originX right we anchor on bottom - // if skewY < 0 and originX left we anchor on bottom - // if skewY < 0 and originX right we anchor on top - // if skewY is 0, we look for mouse position to understand where are we going. - var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; - if (target.lockSkewingY) { - return false; + else { + if (currentSkew > 0) { + originY = originX === LEFT ? TOP : BOTTOM; } - if (currentSkew === 0) { - var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); - if (localPointFromCenter.y > 0) { - // we are pulling down, anchor up; - originY = TOP; - } - else { - // we are pulling up, anchor down - originY = BOTTOM; - } + if (currentSkew < 0) { + originY = originX === LEFT ? BOTTOM : TOP; } - else { - if (currentSkew > 0) { - originY = originX === LEFT ? TOP : BOTTOM; - } - if (currentSkew < 0) { - originY = originX === LEFT ? BOTTOM : TOP; - } - // is the object flipped on one side only? swap the origin. - if (targetHasOneFlip(target)) { - originY = originY === TOP ? BOTTOM : TOP; - } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originY = originY === TOP ? BOTTOM : TOP; } - - // once we have the origin, we find the anchor point - transform.originY = originY; - var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); - return finalHandler(eventData, transform, x, y); } - /** - * Action handler for rotation and snapping, without anchor point. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened - * @private - */ - function rotationWithSnapping(eventData, transform, x, y) { - var t = transform, - target = t.target, - pivotPoint = target.translateToOriginPoint(target.getRelativeCenterPoint(), t.originX, t.originY); + // once we have the origin, we find the anchor point + transform.originY = originY; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); + return finalHandler(eventData, transform, x, y); + } - if (target.lockRotation) { - return false; - } + /** + * Action handler for rotation and snapping, without anchor point. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + * @private + */ + function rotationWithSnapping(eventData, transform, x, y) { + var t = transform, + target = t.target, + pivotPoint = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY); - var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), - curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), - angle = radiansToDegrees(curAngle - lastAngle + t.theta), - hasRotated = true; + if (target.lockRotation) { + return false; + } - if (target.snapAngle > 0) { - var snapAngle = target.snapAngle, - snapThreshold = target.snapThreshold || snapAngle, - rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, - leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; + var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), + curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), + angle = radiansToDegrees(curAngle - lastAngle + t.theta), + hasRotated = true; - if (Math.abs(angle - leftAngleLocked) < snapThreshold) { - angle = leftAngleLocked; - } - else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { - angle = rightAngleLocked; - } - } + if (target.snapAngle > 0) { + var snapAngle = target.snapAngle, + snapThreshold = target.snapThreshold || snapAngle, + rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, + leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; - // normalize angle to positive value - if (angle < 0) { - angle = 360 + angle; + if (Math.abs(angle - leftAngleLocked) < snapThreshold) { + angle = leftAngleLocked; + } + else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { + angle = rightAngleLocked; } - angle %= 360; + } - hasRotated = target.angle !== angle; - target.angle = angle; - return hasRotated; + // normalize angle to positive value + if (angle < 0) { + angle = 360 + angle; } + angle %= 360; - /** - * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @param {Object} options additional information for scaling - * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling - * @return {Boolean} true if some change happened - * @private - */ - function scaleObject(eventData, transform, x, y, options) { - options = options || {}; - var target = transform.target, - lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, - by = options.by, newPoint, scaleX, scaleY, dim, - scaleProportionally = scaleIsProportional(eventData, target), - forbidScaling = scalingIsForbidden(target, by, scaleProportionally), - signX, signY, gestureScale = transform.gestureScale; - - if (forbidScaling) { + hasRotated = target.angle !== angle; + target.angle = angle; + return hasRotated; + } + + /** + * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @param {Object} options additional information for scaling + * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling + * @return {Boolean} true if some change happened + * @private + */ + function scaleObject(eventData, transform, x, y, options) { + options = options || {}; + var target = transform.target, + lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, + by = options.by, newPoint, scaleX, scaleY, dim, + scaleProportionally = scaleIsProportional(eventData, target), + forbidScaling = scalingIsForbidden(target, by, scaleProportionally), + signX, signY, gestureScale = transform.gestureScale; + + if (forbidScaling) { + return false; + } + if (gestureScale) { + scaleX = transform.scaleX * gestureScale; + scaleY = transform.scaleY * gestureScale; + } + else { + newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // use of sign: We use sign to detect change of direction of an action. sign usually change when + // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling + // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily + // cross many time the origin point and flip the object. so we need a way to filter out the noise. + // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. + signX = by !== 'y' ? sign(newPoint.x) : 1; + signY = by !== 'x' ? sign(newPoint.y) : 1; + if (!transform.signX) { + transform.signX = signX; + } + if (!transform.signY) { + transform.signY = signY; + } + + if (target.lockScalingFlip && + (transform.signX !== signX || transform.signY !== signY) + ) { return false; } - if (gestureScale) { - scaleX = transform.scaleX * gestureScale; - scaleY = transform.scaleY * gestureScale; + + dim = target._getTransformedDimensions(); + // missing detection of flip and logic to switch the origin + if (scaleProportionally && !by) { + // uniform scaling + var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), + original = transform.original, + originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + + Math.abs(dim.y * original.scaleY / target.scaleY), + scale = distance / originalDistance; + scaleX = original.scaleX * scale; + scaleY = original.scaleY * scale; } else { - newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); - // use of sign: We use sign to detect change of direction of an action. sign usually change when - // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling - // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily - // cross many time the origin point and flip the object. so we need a way to filter out the noise. - // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. - signX = by !== 'y' ? sign(newPoint.x) : 1; - signY = by !== 'x' ? sign(newPoint.y) : 1; - if (!transform.signX) { - transform.signX = signX; - } - if (!transform.signY) { - transform.signY = signY; - } - - if (target.lockScalingFlip && - (transform.signX !== signX || transform.signY !== signY) - ) { - return false; - } - - dim = target._getTransformedDimensions(); - // missing detection of flip and logic to switch the origin - if (scaleProportionally && !by) { - // uniform scaling - var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), - original = transform.original, - originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + - Math.abs(dim.y * original.scaleY / target.scaleY), - scale = distance / originalDistance; - scaleX = original.scaleX * scale; - scaleY = original.scaleY * scale; - } - else { - scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); - scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); - } - // if we are scaling by center, we need to double the scale - if (isTransformCentered(transform)) { - scaleX *= 2; - scaleY *= 2; - } - if (transform.signX !== signX && by !== 'y') { - transform.originX = opposite[transform.originX]; - scaleX *= -1; - transform.signX = signX; - } - if (transform.signY !== signY && by !== 'x') { - transform.originY = opposite[transform.originY]; - scaleY *= -1; - transform.signY = signY; - } + scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); + scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); } - // minScale is taken are in the setter. - var oldScaleX = target.scaleX, oldScaleY = target.scaleY; - if (!by) { - !lockScalingX && target.set('scaleX', scaleX); - !lockScalingY && target.set('scaleY', scaleY); + // if we are scaling by center, we need to double the scale + if (isTransformCentered(transform)) { + scaleX *= 2; + scaleY *= 2; } - else { - // forbidden cases already handled on top here. - by === 'x' && target.set('scaleX', scaleX); - by === 'y' && target.set('scaleY', scaleY); + if (transform.signX !== signX && by !== 'y') { + transform.originX = opposite[transform.originX]; + scaleX *= -1; + transform.signX = signX; + } + if (transform.signY !== signY && by !== 'x') { + transform.originY = opposite[transform.originY]; + scaleY *= -1; + transform.signY = signY; } - return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; } + // minScale is taken are in the setter. + var oldScaleX = target.scaleX, oldScaleY = target.scaleY; + if (!by) { + !lockScalingX && target.set('scaleX', scaleX); + !lockScalingY && target.set('scaleY', scaleY); + } + else { + // forbidden cases already handled on top here. + by === 'x' && target.set('scaleX', scaleX); + by === 'y' && target.set('scaleY', scaleY); + } + return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; + } + + /** + * Generic scaling logic, to scale from corners either equally or freely. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scaleObjectFromCorner(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y); + } + + /** + * Scaling logic for the X axis. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scaleObjectX(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'x' }); + } + + /** + * Scaling logic for the Y axis. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scaleObjectY(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'y' }); + } + + /** + * Composed action handler to either scale Y or skew X + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scalingYOrSkewingX(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerX(eventData, transform, x, y); + } + return controls.scalingY(eventData, transform, x, y); + } + + /** + * Composed action handler to either scale X or skew Y + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scalingXOrSkewingY(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerY(eventData, transform, x, y); + } + return controls.scalingX(eventData, transform, x, y); + } + + /** + * Action handler to change textbox width + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function changeWidth(eventData, transform, x, y) { + var target = transform.target, localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), + multiplier = isTransformCentered(transform) ? 2 : 1, + oldWidth = target.width, + newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding; + target.set('width', Math.max(newWidth, 0)); + return oldWidth !== newWidth; + } + + /** + * Action handler + * @private + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if the translation occurred + */ + function dragHandler(eventData, transform, x, y) { + var target = transform.target, + newLeft = x - transform.offsetX, + newTop = y - transform.offsetY, + moveX = !target.get('lockMovementX') && target.left !== newLeft, + moveY = !target.get('lockMovementY') && target.top !== newTop; + moveX && target.set('left', newLeft); + moveY && target.set('top', newTop); + if (moveX || moveY) { + fireEvent('moving', commonEventInfo(eventData, transform, x, y)); + } + return moveX || moveY; + } + + controls.scaleCursorStyleHandler = scaleCursorStyleHandler; + controls.skewCursorStyleHandler = skewCursorStyleHandler; + controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; + controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); + controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); + controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); + controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); + controls.scalingYOrSkewingX = scalingYOrSkewingX; + controls.scalingXOrSkewingY = scalingXOrSkewingY; + controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); + controls.skewHandlerX = skewHandlerX; + controls.skewHandlerY = skewHandlerY; + controls.dragHandler = dragHandler; + controls.scaleOrSkewActionName = scaleOrSkewActionName; + controls.rotationStyleHandler = rotationStyleHandler; + controls.fireEvent = fireEvent; + controls.wrapWithFixedAnchor = wrapWithFixedAnchor; + controls.wrapWithFireEvent = wrapWithFireEvent; + controls.getLocalPoint = getLocalPoint; + fabric.controlsUtils = controls; + +})(typeof exports !== 'undefined' ? exports : this); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians, + controls = fabric.controlsUtils; + + /** + * Render a round control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ + function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), + myLeft = left, + myTop = top, size; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // as soon as fabric react v5, remove ie11, use proper ellipse code. + if (xSize > ySize) { + size = xSize; + ctx.scale(1.0, ySize / xSize); + myTop = top * xSize / ySize; + } + else if (ySize > xSize) { + size = ySize; + ctx.scale(xSize / ySize, 1.0); + myLeft = left * ySize / xSize; + } + else { + size = xSize; + } + // this is still wrong + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); + ctx[methodName](); + if (stroke) { + ctx.stroke(); + } + ctx.restore(); + } + + /** + * Render a square control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ + function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && ( + styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor + ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // this is still wrong + ctx.lineWidth = 1; + ctx.translate(left, top); + ctx.rotate(degreesToRadians(fabricObject.angle)); + // this does not work, and fixed with ( && ) does not make sense. + // to have real transparent corners we need the controls on upperCanvas + // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); + if (stroke) { + ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + } + ctx.restore(); + } + + controls.renderCircleControl = renderCircleControl; + controls.renderSquareControl = renderSquareControl; + +})(typeof exports !== 'undefined' ? exports : this); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }); + + function Control(options) { + for (var i in options) { + this[i] = options[i]; + } + } + + fabric.Control = Control; + + fabric.Control.prototype = /** @lends fabric.Control.prototype */ { /** - * Generic scaling logic, to scale from corners either equally or freely. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened + * keep track of control visibility. + * mainly for backward compatibility. + * if you do not want to see a control, you can remove it + * from the controlset. + * @type {Boolean} + * @default true */ - function scaleObjectFromCorner(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y); - } + visible: true, /** - * Scaling logic for the X axis. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened + * Name of the action that the control will likely execute. + * This is optional. FabricJS uses to identify what the user is doing for some + * extra optimizations. If you are writing a custom control and you want to know + * somewhere else in the code what is going on, you can use this string here. + * you can also provide a custom getActionName if your control run multiple actions + * depending on some external state. + * default to scale since is the most common, used on 4 corners by default + * @type {String} + * @default 'scale' */ - function scaleObjectX(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'x' }); - } + actionName: 'scale', /** - * Scaling logic for the Y axis. - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened + * Drawing angle of the control. + * NOT used for now, but name marked as needed for internal logic + * example: to reuse the same drawing function for different rotated controls + * @type {Number} + * @default 0 */ - function scaleObjectY(eventData, transform, x, y) { - return scaleObject(eventData, transform, x, y , { by: 'y' }); - } + angle: 0, /** - * Composed action handler to either scale Y or skew X - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened + * Relative position of the control. X + * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 */ - function scalingYOrSkewingX(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerX(eventData, transform, x, y); - } - return controls.scalingY(eventData, transform, x, y); - } + x: 0, /** - * Composed action handler to either scale X or skew Y - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened + * Relative position of the control. Y + * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 */ - function scalingXOrSkewingY(eventData, transform, x, y) { - // ok some safety needed here. - if (eventData[transform.target.canvas.altActionKey]) { - return controls.skewHandlerY(eventData, transform, x, y); - } - return controls.scalingX(eventData, transform, x, y); - } + y: 0, /** - * Action handler to change textbox width - * Needs to be wrapped with `wrapWithFixedAnchor` to be effective - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if some change happened + * Horizontal offset of the control from the defined position. In pixels + * Positive offset moves the control to the right, negative to the left. + * It used when you want to have position of control that does not scale with + * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on + * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will + * stay 30 pixels no matter how the object is big. Another example is having 2 + * controls in the corner, that stay in the same position when the object scale. + * of the bounding box. + * @type {Number} + * @default 0 */ - function changeWidth(eventData, transform, x, y) { - var localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); - // make sure the control changes width ONLY from it's side of target - if (transform.originX === 'center' || - (transform.originX === 'right' && localPoint.x < 0) || - (transform.originX === 'left' && localPoint.x > 0)) { - var target = transform.target, - strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), - multiplier = isTransformCentered(transform) ? 2 : 1, - oldWidth = target.width, - newWidth = Math.ceil(Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding); - target.set('width', Math.max(newWidth, 0)); - // check against actual target width in case `newWidth` was rejected - return oldWidth !== target.width; - } - return false; - } + offsetX: 0, /** - * Action handler - * @private - * @param {Event} eventData javascript event that is doing the transform - * @param {Object} transform javascript object containing a series of information around the current transform - * @param {number} x current mouse x position, canvas normalized - * @param {number} y current mouse y position, canvas normalized - * @return {Boolean} true if the translation occurred - */ - function dragHandler(eventData, transform, x, y) { - var target = transform.target, - newLeft = x - transform.offsetX, - newTop = y - transform.offsetY, - moveX = !target.get('lockMovementX') && target.left !== newLeft, - moveY = !target.get('lockMovementY') && target.top !== newTop; - moveX && target.set('left', newLeft); - moveY && target.set('top', newTop); - if (moveX || moveY) { - fireEvent('moving', commonEventInfo(eventData, transform, x, y)); - } - return moveX || moveY; - } - - controls.scaleCursorStyleHandler = scaleCursorStyleHandler; - controls.skewCursorStyleHandler = skewCursorStyleHandler; - controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; - controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); - controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); - controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); - controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); - controls.scalingYOrSkewingX = scalingYOrSkewingX; - controls.scalingXOrSkewingY = scalingXOrSkewingY; - controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); - controls.skewHandlerX = skewHandlerX; - controls.skewHandlerY = skewHandlerY; - controls.dragHandler = dragHandler; - controls.scaleOrSkewActionName = scaleOrSkewActionName; - controls.rotationStyleHandler = rotationStyleHandler; - controls.fireEvent = fireEvent; - controls.wrapWithFixedAnchor = wrapWithFixedAnchor; - controls.wrapWithFireEvent = wrapWithFireEvent; - controls.getLocalPoint = getLocalPoint; - fabric.controlsUtils = controls; - - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians, - controls = fabric.controlsUtils; - - /** - * Render a round control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + * Vertical offset of the control from the defined position. In pixels + * Positive offset moves the control to the bottom, negative to the top. + * @type {Number} + * @default 0 */ - function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), - myLeft = left, - myTop = top, size; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // as soon as fabric react v5, remove ie11, use proper ellipse code. - if (xSize > ySize) { - size = xSize; - ctx.scale(1.0, ySize / xSize); - myTop = top * xSize / ySize; - } - else if (ySize > xSize) { - size = ySize; - ctx.scale(xSize / ySize, 1.0); - myLeft = left * ySize / xSize; - } - else { - size = xSize; - } - // this is still wrong - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); - ctx[methodName](); - if (stroke) { - ctx.stroke(); - } - ctx.restore(); - } + offsetY: 0, /** - * Render a square control, as per fabric features. - * This function is written to respect object properties like transparentCorners, cornerSize - * cornerColor, cornerStrokeColor - * plus the addition of offsetY and offsetX. - * @param {CanvasRenderingContext2D} ctx context to render on - * @param {Number} left x coordinate where the control center should be - * @param {Number} top y coordinate where the control center should be - * @param {Object} styleOverride override for fabric.Object controls style - * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + * Sets the length of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null */ - function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, - ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, - transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? - styleOverride.transparentCorners : fabricObject.transparentCorners, - methodName = transparentCorners ? 'stroke' : 'fill', - stroke = !transparentCorners && ( - styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor - ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; - ctx.save(); - ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; - ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; - // this is still wrong - ctx.lineWidth = 1; - ctx.translate(left, top); - // angle is relative to canvas plane - var angle = fabricObject.getTotalAngle(); - ctx.rotate(degreesToRadians(angle)); - // this does not work, and fixed with ( && ) does not make sense. - // to have real transparent corners we need the controls on upperCanvas - // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); - ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); - if (stroke) { - ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); - } - ctx.restore(); - } + sizeX: null, - controls.renderCircleControl = renderCircleControl; - controls.renderSquareControl = renderSquareControl; + /** + * Sets the height of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeY: null, - })(typeof exports !== 'undefined' ? exports : window); + /** + * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeX: null, - (function(global) { + /** + * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeY: null, - var fabric = global.fabric || (global.fabric = { }); + /** + * Css cursor style to display when the control is hovered. + * if the method `cursorStyleHandler` is provided, this property is ignored. + * @type {String} + * @default 'crosshair' + */ + cursorStyle: 'crosshair', - function Control(options) { - for (var i in options) { - this[i] = options[i]; - } - } + /** + * If controls has an offsetY or offsetX, draw a line that connects + * the control to the bounding box + * @type {Boolean} + * @default false + */ + withConnection: false, - fabric.Control = Control; + /** + * The control actionHandler, provide one to handle action ( control being moved ) + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + actionHandler: function(/* eventData, transformData, x, y */) { }, - fabric.Control.prototype = /** @lends fabric.Control.prototype */ { + /** + * The control handler for mouse down, provide one to handle mouse down on control + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseDownHandler: function(/* eventData, transformData, x, y */) { }, - /** - * keep track of control visibility. - * mainly for backward compatibility. - * if you do not want to see a control, you can remove it - * from the controlset. - * @type {Boolean} - * @default true - */ - visible: true, + /** + * The control mouseUpHandler, provide one to handle an effect on mouse up. + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseUpHandler: function(/* eventData, transformData, x, y */) { }, - /** - * Name of the action that the control will likely execute. - * This is optional. FabricJS uses to identify what the user is doing for some - * extra optimizations. If you are writing a custom control and you want to know - * somewhere else in the code what is going on, you can use this string here. - * you can also provide a custom getActionName if your control run multiple actions - * depending on some external state. - * default to scale since is the most common, used on 4 corners by default - * @type {String} - * @default 'scale' - */ - actionName: 'scale', + /** + * Returns control actionHandler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getActionHandler: function(/* eventData, fabricObject, control */) { + return this.actionHandler; + }, - /** - * Drawing angle of the control. - * NOT used for now, but name marked as needed for internal logic - * example: to reuse the same drawing function for different rotated controls - * @type {Number} - * @default 0 - */ - angle: 0, + /** + * Returns control mouseDown handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseDownHandler: function(/* eventData, fabricObject, control */) { + return this.mouseDownHandler; + }, - /** - * Relative position of the control. X - * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 - */ - x: 0, + /** + * Returns control mouseUp handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseUpHandler: function(/* eventData, fabricObject, control */) { + return this.mouseUpHandler; + }, - /** - * Relative position of the control. Y - * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities - * of the bounding box. - * @type {Number} - * @default 0 - */ - y: 0, + /** + * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate + * function you can pass one in the constructor + * the cursorStyle property + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + cursorStyleHandler: function(eventData, control /* fabricObject */) { + return control.cursorStyle; + }, + + /** + * Returns the action name. The basic implementation just return the actionName property. + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + getActionName: function(eventData, control /* fabricObject */) { + return control.actionName; + }, + + /** + * Returns controls visibility + * @param {fabric.Object} object on which the control is displayed + * @param {String} controlKey key where the control is memorized on the + * @return {Boolean} + */ + getVisibility: function(fabricObject, controlKey) { + var objectVisibility = fabricObject._controlsVisibility; + if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { + return objectVisibility[controlKey]; + } + return this.visible; + }, + + /** + * Sets controls visibility + * @param {Boolean} visibility for the object + * @return {Void} + */ + setVisibility: function(visibility /* name, fabricObject */) { + this.visible = visibility; + }, + + + positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { + var point = fabric.util.transformPoint({ + x: this.x * dim.x + this.offsetX, + y: this.y * dim.y + this.offsetY }, finalMatrix); + return point; + }, + + /** + * Returns the coords for this control based on object values. + * @param {Number} objectAngle angle from the fabric object holding the control + * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if + * isTouch is true) + * @param {Number} centerX x coordinate where the control center should be + * @param {Number} centerY y coordinate where the control center should be + * @param {boolean} isTouch true if touch corner, false if normal corner + */ + calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { + var cosHalfOffset, + sinHalfOffset, + cosHalfOffsetComp, + sinHalfOffsetComp, + xSize = (isTouch) ? this.touchSizeX : this.sizeX, + ySize = (isTouch) ? this.touchSizeY : this.sizeY; + if (xSize && ySize && xSize !== ySize) { + // handle rectangular corners + var controlTriangleAngle = Math.atan2(ySize, xSize); + var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; + var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); + // use complementary angle for two corners + cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); + sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); + } + else { + // handle square corners + // use default object corner size unless size is defined + var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; + /* 0.7071067812 stands for sqrt(2)/2 */ + cornerHypotenuse = cornerSize * 0.7071067812; + // complementary angles are equal since they're both 45 degrees + var newTheta = fabric.util.degreesToRadians(45 - objectAngle); + cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); + } - /** - * Horizontal offset of the control from the defined position. In pixels - * Positive offset moves the control to the right, negative to the left. - * It used when you want to have position of control that does not scale with - * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on - * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will - * stay 30 pixels no matter how the object is big. Another example is having 2 - * controls in the corner, that stay in the same position when the object scale. - * of the bounding box. - * @type {Number} - * @default 0 - */ - offsetX: 0, + return { + tl: { + x: centerX - sinHalfOffsetComp, + y: centerY - cosHalfOffsetComp, + }, + tr: { + x: centerX + cosHalfOffset, + y: centerY - sinHalfOffset, + }, + bl: { + x: centerX - cosHalfOffset, + y: centerY + sinHalfOffset, + }, + br: { + x: centerX + sinHalfOffsetComp, + y: centerY + cosHalfOffsetComp, + }, + }; + }, + + /** + * Render function for the control. + * When this function runs the context is unscaled. unrotate. Just retina scaled. + * all the functions will have to translate to the point left,top before starting Drawing + * if they want to draw a control where the position is detected. + * left and top are the result of the positionHandler function + * @param {RenderingContext2D} ctx the context where the control will be drawn + * @param {Number} left position of the canvas where we are about to render the control. + * @param {Number} top position of the canvas where we are about to render the control. + * @param {Object} styleOverride + * @param {fabric.Object} fabricObject the object where the control is about to be rendered + */ + render: function(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { + case 'circle': + fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); + break; + default: + fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); + } + }, + }; - /** - * Vertical offset of the control from the defined position. In pixels - * Positive offset moves the control to the bottom, negative to the top. - * @type {Number} - * @default 0 - */ - offsetY: 0, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Sets the length of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeX: null, - /** - * Sets the height of the control. If null, defaults to object's cornerSize. - * Expects both sizeX and sizeY to be set when set. - * @type {?Number} - * @default null - */ - sizeY: null, +(function() { - /** - * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeX: null, + /* _FROM_SVG_START_ */ + function getColorStop(el, multiplier) { + var style = el.getAttribute('style'), + offset = el.getAttribute('offset') || 0, + color, colorAlpha, opacity, i; - /** - * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. - * Expects both touchSizeX and touchSizeY to be set when set. - * @type {?Number} - * @default null - */ - touchSizeY: null, + // convert percents to absolute values + offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); + offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; + if (style) { + var keyValuePairs = style.split(/\s*;\s*/); - /** - * Css cursor style to display when the control is hovered. - * if the method `cursorStyleHandler` is provided, this property is ignored. - * @type {String} - * @default 'crosshair' - */ - cursorStyle: 'crosshair', + if (keyValuePairs[keyValuePairs.length - 1] === '') { + keyValuePairs.pop(); + } - /** - * If controls has an offsetY or offsetX, draw a line that connects - * the control to the bounding box - * @type {Boolean} - * @default false - */ - withConnection: false, + for (i = keyValuePairs.length; i--; ) { - /** - * The control actionHandler, provide one to handle action ( control being moved ) - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - actionHandler: function(/* eventData, transformData, x, y */) { }, + var split = keyValuePairs[i].split(/\s*:\s*/), + key = split[0].trim(), + value = split[1].trim(); - /** - * The control handler for mouse down, provide one to handle mouse down on control - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - mouseDownHandler: function(/* eventData, transformData, x, y */) { }, + if (key === 'stop-color') { + color = value; + } + else if (key === 'stop-opacity') { + opacity = value; + } + } + } - /** - * The control mouseUpHandler, provide one to handle an effect on mouse up. - * @param {Event} eventData the native mouse event - * @param {Object} transformData properties of the current transform - * @param {Number} x x position of the cursor - * @param {Number} y y position of the cursor - * @return {Boolean} true if the action/event modified the object - */ - mouseUpHandler: function(/* eventData, transformData, x, y */) { }, + if (!color) { + color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; + } + if (!opacity) { + opacity = el.getAttribute('stop-opacity'); + } - /** - * Returns control actionHandler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getActionHandler: function(/* eventData, fabricObject, control */) { - return this.actionHandler; - }, + color = new fabric.Color(color); + colorAlpha = color.getAlpha(); + opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); + opacity *= colorAlpha * multiplier; - /** - * Returns control mouseDown handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getMouseDownHandler: function(/* eventData, fabricObject, control */) { - return this.mouseDownHandler; - }, + return { + offset: offset, + color: color.toRgb(), + opacity: opacity + }; + } - /** - * Returns control mouseUp handler - * @param {Event} eventData the native mouse event - * @param {fabric.Object} fabricObject on which the control is displayed - * @param {fabric.Control} control control for which the action handler is being asked - * @return {Function} the action handler - */ - getMouseUpHandler: function(/* eventData, fabricObject, control */) { - return this.mouseUpHandler; - }, - - /** - * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate - * function you can pass one in the constructor - * the cursorStyle property - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} - */ - cursorStyleHandler: function(eventData, control /* fabricObject */) { - return control.cursorStyle; - }, - - /** - * Returns the action name. The basic implementation just return the actionName property. - * @param {Event} eventData the native mouse event - * @param {fabric.Control} control the current control ( likely this) - * @param {fabric.Object} object on which the control is displayed - * @return {String} - */ - getActionName: function(eventData, control /* fabricObject */) { - return control.actionName; - }, - - /** - * Returns controls visibility - * @param {fabric.Object} object on which the control is displayed - * @param {String} controlKey key where the control is memorized on the - * @return {Boolean} - */ - getVisibility: function(fabricObject, controlKey) { - var objectVisibility = fabricObject._controlsVisibility; - if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { - return objectVisibility[controlKey]; - } - return this.visible; - }, - - /** - * Sets controls visibility - * @param {Boolean} visibility for the object - * @return {Void} - */ - setVisibility: function(visibility /* name, fabricObject */) { - this.visible = visibility; - }, - - - positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { - var point = fabric.util.transformPoint({ - x: this.x * dim.x + this.offsetX, - y: this.y * dim.y + this.offsetY }, finalMatrix); - return point; - }, + function getLinearCoords(el) { + return { + x1: el.getAttribute('x1') || 0, + y1: el.getAttribute('y1') || 0, + x2: el.getAttribute('x2') || '100%', + y2: el.getAttribute('y2') || 0 + }; + } - /** - * Returns the coords for this control based on object values. - * @param {Number} objectAngle angle from the fabric object holding the control - * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if - * isTouch is true) - * @param {Number} centerX x coordinate where the control center should be - * @param {Number} centerY y coordinate where the control center should be - * @param {boolean} isTouch true if touch corner, false if normal corner - */ - calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { - var cosHalfOffset, - sinHalfOffset, - cosHalfOffsetComp, - sinHalfOffsetComp, - xSize = (isTouch) ? this.touchSizeX : this.sizeX, - ySize = (isTouch) ? this.touchSizeY : this.sizeY; - if (xSize && ySize && xSize !== ySize) { - // handle rectangular corners - var controlTriangleAngle = Math.atan2(ySize, xSize); - var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; - var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); - cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); - // use complementary angle for two corners - cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); - sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); - } - else { - // handle square corners - // use default object corner size unless size is defined - var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; - /* 0.7071067812 stands for sqrt(2)/2 */ - cornerHypotenuse = cornerSize * 0.7071067812; - // complementary angles are equal since they're both 45 degrees - var newTheta = fabric.util.degreesToRadians(45 - objectAngle); - cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); - sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); - } + function getRadialCoords(el) { + return { + x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', + y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', + r1: 0, + x2: el.getAttribute('cx') || '50%', + y2: el.getAttribute('cy') || '50%', + r2: el.getAttribute('r') || '50%' + }; + } + /* _FROM_SVG_END_ */ - return { - tl: { - x: centerX - sinHalfOffsetComp, - y: centerY - cosHalfOffsetComp, - }, - tr: { - x: centerX + cosHalfOffset, - y: centerY - sinHalfOffset, - }, - bl: { - x: centerX - cosHalfOffset, - y: centerY + sinHalfOffset, - }, - br: { - x: centerX + sinHalfOffsetComp, - y: centerY + cosHalfOffsetComp, - }, - }; - }, + var clone = fabric.util.object.clone; - /** - * Render function for the control. - * When this function runs the context is unscaled. unrotate. Just retina scaled. - * all the functions will have to translate to the point left,top before starting Drawing - * if they want to draw a control where the position is detected. - * left and top are the result of the positionHandler function - * @param {RenderingContext2D} ctx the context where the control will be drawn - * @param {Number} left position of the canvas where we are about to render the control. - * @param {Number} top position of the canvas where we are about to render the control. - * @param {Object} styleOverride - * @param {fabric.Object} fabricObject the object where the control is about to be rendered - */ - render: function(ctx, left, top, styleOverride, fabricObject) { - styleOverride = styleOverride || {}; - switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { - case 'circle': - fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); - break; - default: - fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); - } - }, - }; + /** + * Gradient class + * @class fabric.Gradient + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients} + * @see {@link fabric.Gradient#initialize} for constructor definition + */ + fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { - })(typeof exports !== 'undefined' ? exports : window); + /** + * Horizontal offset for aligning gradients coming from SVG when outside pathgroups + * @type Number + * @default 0 + */ + offsetX: 0, - (function(global) { - var fabric = global.fabric; - /* _FROM_SVG_START_ */ - function getColorStop(el, multiplier) { - var style = el.getAttribute('style'), - offset = el.getAttribute('offset') || 0, - color, colorAlpha, opacity, i; + /** + * Vertical offset for aligning gradients coming from SVG when outside pathgroups + * @type Number + * @default 0 + */ + offsetY: 0, - // convert percents to absolute values - offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); - offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; - if (style) { - var keyValuePairs = style.split(/\s*;\s*/); + /** + * A transform matrix to apply to the gradient before painting. + * Imported from svg gradients, is not applied with the current transform in the center. + * Before this transform is applied, the origin point is at the top left corner of the object + * plus the addition of offsetY and offsetX. + * @type Number[] + * @default null + */ + gradientTransform: null, - if (keyValuePairs[keyValuePairs.length - 1] === '') { - keyValuePairs.pop(); - } + /** + * coordinates units for coords. + * If `pixels`, the number of coords are in the same unit of width / height. + * If set as `percentage` the coords are still a number, but 1 means 100% of width + * for the X and 100% of the height for the y. It can be bigger than 1 and negative. + * allowed values pixels or percentage. + * @type String + * @default 'pixels' + */ + gradientUnits: 'pixels', - for (i = keyValuePairs.length; i--; ) { + /** + * Gradient type linear or radial + * @type String + * @default 'pixels' + */ + type: 'linear', + + /** + * Constructor + * @param {Object} options Options object with type, coords, gradientUnits and colorStops + * @param {Object} [options.type] gradient type linear or radial + * @param {Object} [options.gradientUnits] gradient units + * @param {Object} [options.offsetX] SVG import compatibility + * @param {Object} [options.offsetY] SVG import compatibility + * @param {Object[]} options.colorStops contains the colorstops. + * @param {Object} options.coords contains the coords of the gradient + * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial + * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial + * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial + * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial + * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle + * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle + * @return {fabric.Gradient} thisArg + */ + initialize: function(options) { + options || (options = { }); + options.coords || (options.coords = { }); - var split = keyValuePairs[i].split(/\s*:\s*/), - key = split[0].trim(), - value = split[1].trim(); + var coords, _this = this; - if (key === 'stop-color') { - color = value; - } - else if (key === 'stop-opacity') { - opacity = value; - } - } - } + // sets everything, then coords and colorstops get sets again + Object.keys(options).forEach(function(option) { + _this[option] = options[option]; + }); - if (!color) { - color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; + if (this.id) { + this.id += '_' + fabric.Object.__uid++; } - if (!opacity) { - opacity = el.getAttribute('stop-opacity'); + else { + this.id = fabric.Object.__uid++; } - color = new fabric.Color(color); - colorAlpha = color.getAlpha(); - opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); - opacity *= colorAlpha * multiplier; - - return { - offset: offset, - color: color.toRgb(), - opacity: opacity + coords = { + x1: options.coords.x1 || 0, + y1: options.coords.y1 || 0, + x2: options.coords.x2 || 0, + y2: options.coords.y2 || 0 }; - } - function getLinearCoords(el) { - return { - x1: el.getAttribute('x1') || 0, - y1: el.getAttribute('y1') || 0, - x2: el.getAttribute('x2') || '100%', - y2: el.getAttribute('y2') || 0 - }; - } + if (this.type === 'radial') { + coords.r1 = options.coords.r1 || 0; + coords.r2 = options.coords.r2 || 0; + } - function getRadialCoords(el) { - return { - x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', - y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', - r1: 0, - x2: el.getAttribute('cx') || '50%', - y2: el.getAttribute('cy') || '50%', - r2: el.getAttribute('r') || '50%' - }; - } - /* _FROM_SVG_END_ */ + this.coords = coords; + this.colorStops = options.colorStops.slice(); + }, /** - * Gradient class - * @class fabric.Gradient - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients} - * @see {@link fabric.Gradient#initialize} for constructor definition + * Adds another colorStop + * @param {Object} colorStop Object with offset and color + * @return {fabric.Gradient} thisArg */ - fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { - - /** - * Horizontal offset for aligning gradients coming from SVG when outside pathgroups - * @type Number - * @default 0 - */ - offsetX: 0, - - /** - * Vertical offset for aligning gradients coming from SVG when outside pathgroups - * @type Number - * @default 0 - */ - offsetY: 0, + addColorStop: function(colorStops) { + for (var position in colorStops) { + var color = new fabric.Color(colorStops[position]); + this.colorStops.push({ + offset: parseFloat(position), + color: color.toRgb(), + opacity: color.getAlpha() + }); + } + return this; + }, - /** - * A transform matrix to apply to the gradient before painting. - * Imported from svg gradients, is not applied with the current transform in the center. - * Before this transform is applied, the origin point is at the top left corner of the object - * plus the addition of offsetY and offsetX. - * @type Number[] - * @default null - */ - gradientTransform: null, + /** + * Returns object representation of a gradient + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} + */ + toObject: function(propertiesToInclude) { + var object = { + type: this.type, + coords: this.coords, + colorStops: this.colorStops, + offsetX: this.offsetX, + offsetY: this.offsetY, + gradientUnits: this.gradientUnits, + gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); + + return object; + }, + + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of an gradient + * @param {Object} object Object to create a gradient for + * @return {String} SVG representation of an gradient (linear/radial) + */ + toSVG: function(object, options) { + var coords = clone(this.coords, true), i, len, options = options || {}, + markup, commonAttributes, colorStops = clone(this.colorStops, true), + needsSwap = coords.r1 > coords.r2, + transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), + offsetX = -this.offsetX, offsetY = -this.offsetY, + withViewport = !!options.additionalTransform, + gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; + // colorStops must be sorted ascending + colorStops.sort(function(a, b) { + return a.offset - b.offset; + }); - /** - * coordinates units for coords. - * If `pixels`, the number of coords are in the same unit of width / height. - * If set as `percentage` the coords are still a number, but 1 means 100% of width - * for the X and 100% of the height for the y. It can be bigger than 1 and negative. - * allowed values pixels or percentage. - * @type String - * @default 'pixels' - */ - gradientUnits: 'pixels', + if (gradientUnits === 'objectBoundingBox') { + offsetX /= object.width; + offsetY /= object.height; + } + else { + offsetX += object.width / 2; + offsetY += object.height / 2; + } + if (object.type === 'path' && this.gradientUnits !== 'percentage') { + offsetX -= object.pathOffset.x; + offsetY -= object.pathOffset.y; + } - /** - * Gradient type linear or radial - * @type String - * @default 'pixels' - */ - type: 'linear', - /** - * Constructor - * @param {Object} options Options object with type, coords, gradientUnits and colorStops - * @param {Object} [options.type] gradient type linear or radial - * @param {Object} [options.gradientUnits] gradient units - * @param {Object} [options.offsetX] SVG import compatibility - * @param {Object} [options.offsetY] SVG import compatibility - * @param {Object[]} options.colorStops contains the colorstops. - * @param {Object} options.coords contains the coords of the gradient - * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial - * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial - * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial - * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial - * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle - * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle - * @return {fabric.Gradient} thisArg - */ - initialize: function(options) { - options || (options = { }); - options.coords || (options.coords = { }); + transform[4] -= offsetX; + transform[5] -= offsetY; - var coords, _this = this; + commonAttributes = 'id="SVGID_' + this.id + + '" gradientUnits="' + gradientUnits + '"'; + commonAttributes += ' gradientTransform="' + (withViewport ? + options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; - // sets everything, then coords and colorstops get sets again - Object.keys(options).forEach(function(option) { - _this[option] = options[option]; - }); + if (this.type === 'linear') { + markup = [ + '\n' + ]; + } + else if (this.type === 'radial') { + // svg radial gradient has just 1 radius. the biggest. + markup = [ + '\n' + ]; + } - if (this.id) { - this.id += '_' + fabric.Object.__uid++; + if (this.type === 'radial') { + if (needsSwap) { + // svg goes from internal to external radius. if radius are inverted, swap color stops. + colorStops = colorStops.concat(); + colorStops.reverse(); + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset = 1 - colorStops[i].offset; + } } - else { - this.id = fabric.Object.__uid++; + var minRadius = Math.min(coords.r1, coords.r2); + if (minRadius > 0) { + // i have to shift all colorStops and add new one in 0. + var maxRadius = Math.max(coords.r1, coords.r2), + percentageShift = minRadius / maxRadius; + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); + } } + } - coords = { - x1: options.coords.x1 || 0, - y1: options.coords.y1 || 0, - x2: options.coords.x2 || 0, - y2: options.coords.y2 || 0 - }; + for (i = 0, len = colorStops.length; i < len; i++) { + var colorStop = colorStops[i]; + markup.push( + '\n' + ); + } - if (this.type === 'radial') { - coords.r1 = options.coords.r1 || 0; - coords.r2 = options.coords.r2 || 0; - } + markup.push((this.type === 'linear' ? '\n' : '\n')); - this.coords = coords; - this.colorStops = options.colorStops.slice(); - }, + return markup.join(''); + }, + /* _TO_SVG_END_ */ - /** - * Adds another colorStop - * @param {Object} colorStop Object with offset and color - * @return {fabric.Gradient} thisArg - */ - addColorStop: function(colorStops) { - for (var position in colorStops) { - var color = new fabric.Color(colorStops[position]); - this.colorStops.push({ - offset: parseFloat(position), - color: color.toRgb(), - opacity: color.getAlpha() - }); - } - return this; - }, + /** + * Returns an instance of CanvasGradient + * @param {CanvasRenderingContext2D} ctx Context to render on + * @return {CanvasGradient} + */ + toLive: function(ctx) { + var gradient, coords = fabric.util.object.clone(this.coords), i, len; - /** - * Returns object representation of a gradient - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} - */ - toObject: function(propertiesToInclude) { - var object = { - type: this.type, - coords: this.coords, - colorStops: this.colorStops, - offsetX: this.offsetX, - offsetY: this.offsetY, - gradientUnits: this.gradientUnits, - gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); + if (!this.type) { + return; + } - return object; - }, + if (this.type === 'linear') { + gradient = ctx.createLinearGradient( + coords.x1, coords.y1, coords.x2, coords.y2); + } + else if (this.type === 'radial') { + gradient = ctx.createRadialGradient( + coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); + } - /* _TO_SVG_START_ */ - /** - * Returns SVG representation of an gradient - * @param {Object} object Object to create a gradient for - * @return {String} SVG representation of an gradient (linear/radial) - */ - toSVG: function(object, options) { - var coords = this.coords, i, len, options = options || {}, - markup, commonAttributes, colorStops = this.colorStops, - needsSwap = coords.r1 > coords.r2, - transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), - offsetX = -this.offsetX, offsetY = -this.offsetY, - withViewport = !!options.additionalTransform, - gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; - // colorStops must be sorted ascending - colorStops.sort(function(a, b) { - return a.offset - b.offset; - }); + for (i = 0, len = this.colorStops.length; i < len; i++) { + var color = this.colorStops[i].color, + opacity = this.colorStops[i].opacity, + offset = this.colorStops[i].offset; - if (gradientUnits === 'objectBoundingBox') { - offsetX /= object.width; - offsetY /= object.height; + if (typeof opacity !== 'undefined') { + color = new fabric.Color(color).setAlpha(opacity).toRgba(); } - else { - offsetX += object.width / 2; - offsetY += object.height / 2; - } - if (object.type === 'path' && this.gradientUnits !== 'percentage') { - offsetX -= object.pathOffset.x; - offsetY -= object.pathOffset.y; - } - + gradient.addColorStop(offset, color); + } - transform[4] -= offsetX; - transform[5] -= offsetY; + return gradient; + } + }); - commonAttributes = 'id="SVGID_' + this.id + - '" gradientUnits="' + gradientUnits + '"'; - commonAttributes += ' gradientTransform="' + (withViewport ? - options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; + fabric.util.object.extend(fabric.Gradient, { - if (this.type === 'linear') { - markup = [ - '\n' - ]; - } - else if (this.type === 'radial') { - // svg radial gradient has just 1 radius. the biggest. - markup = [ - '\n' - ]; - } + /* _FROM_SVG_START_ */ + /** + * Returns {@link fabric.Gradient} instance from an SVG element + * @static + * @memberOf fabric.Gradient + * @param {SVGGradientElement} el SVG gradient element + * @param {fabric.Object} instance + * @param {String} opacityAttr A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity. + * @param {Object} svgOptions an object containing the size of the SVG in order to parse correctly gradients + * that uses gradientUnits as 'userSpaceOnUse' and percentages. + * @param {Object.number} viewBoxWidth width part of the viewBox attribute on svg + * @param {Object.number} viewBoxHeight height part of the viewBox attribute on svg + * @param {Object.number} width width part of the svg tag if viewBox is not specified + * @param {Object.number} height height part of the svg tag if viewBox is not specified + * @return {fabric.Gradient} Gradient instance + * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement + * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement + */ + fromElement: function(el, instance, opacityAttr, svgOptions) { + /** + * @example: + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * + */ - if (this.type === 'radial') { - if (needsSwap) { - // svg goes from internal to external radius. if radius are inverted, swap color stops. - colorStops = colorStops.concat(); - colorStops.reverse(); - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset = 1 - colorStops[i].offset; - } - } - var minRadius = Math.min(coords.r1, coords.r2); - if (minRadius > 0) { - // i have to shift all colorStops and add new one in 0. - var maxRadius = Math.max(coords.r1, coords.r2), - percentageShift = minRadius / maxRadius; - for (i = 0, len = colorStops.length; i < len; i++) { - colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); - } - } - } + var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); + multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; + if (isNaN(multiplier)) { + multiplier = 1; + } - for (i = 0, len = colorStops.length; i < len; i++) { - var colorStop = colorStops[i]; - markup.push( - '\n' - ); - } + var colorStopEls = el.getElementsByTagName('stop'), + type, + gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? + 'pixels' : 'percentage', + gradientTransform = el.getAttribute('gradientTransform') || '', + colorStops = [], + coords, i, offsetX = 0, offsetY = 0, + transformMatrix; + if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { + type = 'linear'; + coords = getLinearCoords(el); + } + else { + type = 'radial'; + coords = getRadialCoords(el); + } - markup.push((this.type === 'linear' ? '\n' : '\n')); + for (i = colorStopEls.length; i--; ) { + colorStops.push(getColorStop(colorStopEls[i], multiplier)); + } - return markup.join(''); - }, - /* _TO_SVG_END_ */ + transformMatrix = fabric.parseTransformAttribute(gradientTransform); - /** - * Returns an instance of CanvasGradient - * @param {CanvasRenderingContext2D} ctx Context to render on - * @return {CanvasGradient} - */ - toLive: function(ctx) { - var gradient, coords = this.coords, i, len; + __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); - if (!this.type) { - return; - } + if (gradientUnits === 'pixels') { + offsetX = -instance.left; + offsetY = -instance.top; + } - if (this.type === 'linear') { - gradient = ctx.createLinearGradient( - coords.x1, coords.y1, coords.x2, coords.y2); - } - else if (this.type === 'radial') { - gradient = ctx.createRadialGradient( - coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); - } + var gradient = new fabric.Gradient({ + id: el.getAttribute('id'), + type: type, + coords: coords, + colorStops: colorStops, + gradientUnits: gradientUnits, + gradientTransform: transformMatrix, + offsetX: offsetX, + offsetY: offsetY, + }); - for (i = 0, len = this.colorStops.length; i < len; i++) { - var color = this.colorStops[i].color, - opacity = this.colorStops[i].opacity, - offset = this.colorStops[i].offset; + return gradient; + } + /* _FROM_SVG_END_ */ + }); - if (typeof opacity !== 'undefined') { - color = new fabric.Color(color).setAlpha(opacity).toRgba(); + /** + * @private + */ + function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { + var propValue, finalValue; + Object.keys(options).forEach(function(prop) { + propValue = options[prop]; + if (propValue === 'Infinity') { + finalValue = 1; + } + else if (propValue === '-Infinity') { + finalValue = 0; + } + else { + finalValue = parseFloat(options[prop], 10); + if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { + finalValue *= 0.01; + if (gradientUnits === 'pixels') { + // then we need to fix those percentages here in svg parsing + if (prop === 'x1' || prop === 'x2' || prop === 'r2') { + finalValue *= svgOptions.viewBoxWidth || svgOptions.width; + } + if (prop === 'y1' || prop === 'y2') { + finalValue *= svgOptions.viewBoxHeight || svgOptions.height; + } } - gradient.addColorStop(offset, color); } - - return gradient; } + options[prop] = finalValue; }); + } +})(); - fabric.util.object.extend(fabric.Gradient, { - /* _FROM_SVG_START_ */ - /** - * Returns {@link fabric.Gradient} instance from an SVG element - * @static - * @memberOf fabric.Gradient - * @param {SVGGradientElement} el SVG gradient element - * @param {fabric.Object} instance - * @param {String} opacityAttr A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity. - * @param {Object} svgOptions an object containing the size of the SVG in order to parse correctly gradients - * that uses gradientUnits as 'userSpaceOnUse' and percentages. - * @param {Object.number} viewBoxWidth width part of the viewBox attribute on svg - * @param {Object.number} viewBoxHeight height part of the viewBox attribute on svg - * @param {Object.number} width width part of the svg tag if viewBox is not specified - * @param {Object.number} height height part of the svg tag if viewBox is not specified - * @return {fabric.Gradient} Gradient instance - * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement - * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement - */ - fromElement: function(el, instance, opacityAttr, svgOptions) { - /** - * @example: - * - * - * - * - * - * - * OR - * - * - * - * - * - * - * OR - * - * - * - * - * - * - * - * OR - * - * - * - * - * - * - * - */ - - var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); - multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; - if (isNaN(multiplier)) { - multiplier = 1; - } - - var colorStopEls = el.getElementsByTagName('stop'), - type, - gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? - 'pixels' : 'percentage', - gradientTransform = el.getAttribute('gradientTransform') || '', - colorStops = [], - coords, i, offsetX = 0, offsetY = 0, - transformMatrix; - if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { - type = 'linear'; - coords = getLinearCoords(el); - } - else { - type = 'radial'; - coords = getRadialCoords(el); - } +(function() { - for (i = colorStopEls.length; i--; ) { - colorStops.push(getColorStop(colorStopEls[i], multiplier)); - } + 'use strict'; - transformMatrix = fabric.parseTransformAttribute(gradientTransform); + var toFixed = fabric.util.toFixed; - __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); + /** + * Pattern class + * @class fabric.Pattern + * @see {@link http://fabricjs.com/patterns|Pattern demo} + * @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo} + * @see {@link fabric.Pattern#initialize} for constructor definition + */ - if (gradientUnits === 'pixels') { - offsetX = -instance.left; - offsetY = -instance.top; - } - var gradient = new fabric.Gradient({ - id: el.getAttribute('id'), - type: type, - coords: coords, - colorStops: colorStops, - gradientUnits: gradientUnits, - gradientTransform: transformMatrix, - offsetX: offsetX, - offsetY: offsetY, - }); + fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { - return gradient; - } - /* _FROM_SVG_END_ */ - }); + /** + * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) + * @type String + * @default + */ + repeat: 'repeat', /** - * @private + * Pattern horizontal offset from object's left/top corner + * @type Number + * @default */ - function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { - var propValue, finalValue; - Object.keys(options).forEach(function(prop) { - propValue = options[prop]; - if (propValue === 'Infinity') { - finalValue = 1; - } - else if (propValue === '-Infinity') { - finalValue = 0; - } - else { - finalValue = parseFloat(options[prop], 10); - if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { - finalValue *= 0.01; - if (gradientUnits === 'pixels') { - // then we need to fix those percentages here in svg parsing - if (prop === 'x1' || prop === 'x2' || prop === 'r2') { - finalValue *= svgOptions.viewBoxWidth || svgOptions.width; - } - if (prop === 'y1' || prop === 'y2') { - finalValue *= svgOptions.viewBoxHeight || svgOptions.height; - } - } - } - } - options[prop] = finalValue; - }); - } - })(typeof exports !== 'undefined' ? exports : window); + offsetX: 0, - (function(global) { - var fabric = global.fabric, toFixed = fabric.util.toFixed; + /** + * Pattern vertical offset from object's left/top corner + * @type Number + * @default + */ + offsetY: 0, /** - * Pattern class - * @class fabric.Pattern - * @see {@link http://fabricjs.com/patterns|Pattern demo} - * @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo} - * @see {@link fabric.Pattern#initialize} for constructor definition + * crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @type String + * @default */ + crossOrigin: '', + /** + * transform matrix to change the pattern, imported from svgs. + * @type Array + * @default + */ + patternTransform: null, - fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { + /** + * Constructor + * @param {Object} [options] Options object + * @param {Function} [callback] function to invoke after callback init. + * @return {fabric.Pattern} thisArg + */ + initialize: function(options, callback) { + options || (options = { }); - /** - * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) - * @type String - * @default - */ - repeat: 'repeat', + this.id = fabric.Object.__uid++; + this.setOptions(options); + if (!options.source || (options.source && typeof options.source !== 'string')) { + callback && callback(this); + return; + } + else { + // img src string + var _this = this; + this.source = fabric.util.createImage(); + fabric.util.loadImage(options.source, function(img, isError) { + _this.source = img; + callback && callback(_this, isError); + }, null, this.crossOrigin); + } + }, - /** - * Pattern horizontal offset from object's left/top corner - * @type Number - * @default - */ - offsetX: 0, + /** + * Returns object representation of a pattern + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of a pattern instance + */ + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + source, object; - /** - * Pattern vertical offset from object's left/top corner - * @type Number - * @default - */ - offsetY: 0, + // element + if (typeof this.source.src === 'string') { + source = this.source.src; + } + // element + else if (typeof this.source === 'object' && this.source.toDataURL) { + source = this.source.toDataURL(); + } - /** - * crossOrigin value (one of "", "anonymous", "use-credentials") - * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes - * @type String - * @default - */ - crossOrigin: '', + object = { + type: 'pattern', + source: source, + repeat: this.repeat, + crossOrigin: this.crossOrigin, + offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), + offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), + patternTransform: this.patternTransform ? this.patternTransform.concat() : null + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); - /** - * transform matrix to change the pattern, imported from svgs. - * @type Array - * @default - */ - patternTransform: null, + return object; + }, - type: 'pattern', + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of a pattern + * @param {fabric.Object} object + * @return {String} SVG representation of a pattern + */ + toSVG: function(object) { + var patternSource = typeof this.source === 'function' ? this.source() : this.source, + patternWidth = patternSource.width / object.width, + patternHeight = patternSource.height / object.height, + patternOffsetX = this.offsetX / object.width, + patternOffsetY = this.offsetY / object.height, + patternImgSrc = ''; + if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { + patternHeight = 1; + if (patternOffsetY) { + patternHeight += Math.abs(patternOffsetY); + } + } + if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { + patternWidth = 1; + if (patternOffsetX) { + patternWidth += Math.abs(patternOffsetX); + } - /** - * Constructor - * @param {Object} [options] Options object - * @param {option.source} [source] the pattern source, eventually empty or a drawable - * @return {fabric.Pattern} thisArg - */ - initialize: function(options) { - options || (options = { }); - this.id = fabric.Object.__uid++; - this.setOptions(options); - }, + } + if (patternSource.src) { + patternImgSrc = patternSource.src; + } + else if (patternSource.toDataURL) { + patternImgSrc = patternSource.toDataURL(); + } - /** - * Returns object representation of a pattern - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of a pattern instance - */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - source, object; - - // element - if (typeof this.source.src === 'string') { - source = this.source.src; - } - // element - else if (typeof this.source === 'object' && this.source.toDataURL) { - source = this.source.toDataURL(); - } - - object = { - type: 'pattern', - source: source, - repeat: this.repeat, - crossOrigin: this.crossOrigin, - offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), - offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), - patternTransform: this.patternTransform ? this.patternTransform.concat() : null - }; - fabric.util.populateWithProperties(this, object, propertiesToInclude); + return '\n' + + '\n' + + '\n'; + }, + /* _TO_SVG_END_ */ - return object; - }, + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, - /* _TO_SVG_START_ */ - /** - * Returns SVG representation of a pattern - * @param {fabric.Object} object - * @return {String} SVG representation of a pattern - */ - toSVG: function(object) { - var patternSource = typeof this.source === 'function' ? this.source() : this.source, - patternWidth = patternSource.width / object.width, - patternHeight = patternSource.height / object.height, - patternOffsetX = this.offsetX / object.width, - patternOffsetY = this.offsetY / object.height, - patternImgSrc = ''; - if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { - patternHeight = 1; - if (patternOffsetY) { - patternHeight += Math.abs(patternOffsetY); - } - } - if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { - patternWidth = 1; - if (patternOffsetX) { - patternWidth += Math.abs(patternOffsetX); - } + /** + * Returns an instance of CanvasPattern + * @param {CanvasRenderingContext2D} ctx Context to create pattern + * @return {CanvasPattern} + */ + toLive: function(ctx) { + var source = this.source; + // if the image failed to load, return, and allow rest to continue loading + if (!source) { + return ''; + } + // if an image + if (typeof source.src !== 'undefined') { + if (!source.complete) { + return ''; } - if (patternSource.src) { - patternImgSrc = patternSource.src; - } - else if (patternSource.toDataURL) { - patternImgSrc = patternSource.toDataURL(); + if (source.naturalWidth === 0 || source.naturalHeight === 0) { + return ''; } + } + return ctx.createPattern(source, this.repeat); + } + }); +})(); - return '\n' + - '\n' + - '\n'; - }, - /* _TO_SVG_END_ */ - setOptions: function(options) { - for (var prop in options) { - this[prop] = options[prop]; - } - }, +(function(global) { - /** - * Returns an instance of CanvasPattern - * @param {CanvasRenderingContext2D} ctx Context to create pattern - * @return {CanvasPattern} - */ - toLive: function(ctx) { - var source = this.source; - // if the image failed to load, return, and allow rest to continue loading - if (!source) { - return ''; - } + 'use strict'; - // if an image - if (typeof source.src !== 'undefined') { - if (!source.complete) { - return ''; - } - if (source.naturalWidth === 0 || source.naturalHeight === 0) { - return ''; - } - } - return ctx.createPattern(source, this.repeat); - } - }); + var fabric = global.fabric || (global.fabric = { }), + toFixed = fabric.util.toFixed; - fabric.Pattern.fromObject = function(object) { - var patternOptions = Object.assign({}, object); - return fabric.util.loadImage(object.source, { crossOrigin: object.crossOrigin }) - .then(function(img) { - patternOptions.source = img; - return new fabric.Pattern(patternOptions); - }); - }; - })(typeof exports !== 'undefined' ? exports : window); + if (fabric.Shadow) { + fabric.warn('fabric.Shadow is already defined.'); + return; + } - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - toFixed = fabric.util.toFixed; + /** + * Shadow class + * @class fabric.Shadow + * @see {@link http://fabricjs.com/shadows|Shadow demo} + * @see {@link fabric.Shadow#initialize} for constructor definition + */ + fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { /** - * Shadow class - * @class fabric.Shadow - * @see {@link http://fabricjs.com/shadows|Shadow demo} - * @see {@link fabric.Shadow#initialize} for constructor definition + * Shadow color + * @type String + * @default */ - fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { - - /** - * Shadow color - * @type String - * @default - */ - color: 'rgb(0,0,0)', + color: 'rgb(0,0,0)', - /** - * Shadow blur - * @type Number - */ - blur: 0, + /** + * Shadow blur + * @type Number + */ + blur: 0, - /** - * Shadow horizontal offset - * @type Number - * @default - */ - offsetX: 0, + /** + * Shadow horizontal offset + * @type Number + * @default + */ + offsetX: 0, - /** - * Shadow vertical offset - * @type Number - * @default - */ - offsetY: 0, + /** + * Shadow vertical offset + * @type Number + * @default + */ + offsetY: 0, - /** - * Whether the shadow should affect stroke operations - * @type Boolean - * @default - */ - affectStroke: false, + /** + * Whether the shadow should affect stroke operations + * @type Boolean + * @default + */ + affectStroke: false, - /** - * Indicates whether toObject should include default values - * @type Boolean - * @default - */ - includeDefaultValues: true, + /** + * Indicates whether toObject should include default values + * @type Boolean + * @default + */ + includeDefaultValues: true, - /** - * When `false`, the shadow will scale with the object. - * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale. - * default to false - * @type Boolean - * @default - */ - nonScaling: false, + /** + * When `false`, the shadow will scale with the object. + * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale. + * default to false + * @type Boolean + * @default + */ + nonScaling: false, - /** - * Constructor - * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px") - * @return {fabric.Shadow} thisArg - */ - initialize: function(options) { + /** + * Constructor + * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px") + * @return {fabric.Shadow} thisArg + */ + initialize: function(options) { - if (typeof options === 'string') { - options = this._parseShadow(options); - } + if (typeof options === 'string') { + options = this._parseShadow(options); + } - for (var prop in options) { - this[prop] = options[prop]; - } + for (var prop in options) { + this[prop] = options[prop]; + } - this.id = fabric.Object.__uid++; - }, + this.id = fabric.Object.__uid++; + }, - /** - * @private - * @param {String} shadow Shadow value to parse - * @return {Object} Shadow object with color, offsetX, offsetY and blur - */ - _parseShadow: function(shadow) { - var shadowStr = shadow.trim(), - offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], - color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; + /** + * @private + * @param {String} shadow Shadow value to parse + * @return {Object} Shadow object with color, offsetX, offsetY and blur + */ + _parseShadow: function(shadow) { + var shadowStr = shadow.trim(), + offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], + color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; + return { + color: color.trim(), + offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, + offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, + blur: parseFloat(offsetsAndBlur[3], 10) || 0 + }; + }, + + /** + * Returns a string representation of an instance + * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow + * @return {String} Returns CSS3 text-shadow declaration + */ + toString: function() { + return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); + }, + + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of a shadow + * @param {fabric.Object} object + * @return {String} SVG representation of a shadow + */ + toSVG: function(object) { + var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + offset = fabric.util.rotateVector( + { x: this.offsetX, y: this.offsetY }, + fabric.util.degreesToRadians(-object.angle)), + BLUR_BOX = 20, color = new fabric.Color(this.color); + + if (object.width && object.height) { + //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion + // we add some extra space to filter box to contain the blur ( 20 ) + fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + } + if (object.flipX) { + offset.x *= -1; + } + if (object.flipY) { + offset.y *= -1; + } + + return ( + '\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\t\n' + + '\t\t\n' + + '\t\n' + + '\n'); + }, + /* _TO_SVG_END_ */ + + /** + * Returns object representation of a shadow + * @return {Object} Object representation of a shadow instance + */ + toObject: function() { + if (this.includeDefaultValues) { return { - color: color.trim(), - offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, - offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, - blur: parseFloat(offsetsAndBlur[3], 10) || 0 + color: this.color, + blur: this.blur, + offsetX: this.offsetX, + offsetY: this.offsetY, + affectStroke: this.affectStroke, + nonScaling: this.nonScaling }; - }, - - /** - * Returns a string representation of an instance - * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow - * @return {String} Returns CSS3 text-shadow declaration - */ - toString: function() { - return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); - }, - - /* _TO_SVG_START_ */ - /** - * Returns SVG representation of a shadow - * @param {fabric.Object} object - * @return {String} SVG representation of a shadow - */ - toSVG: function(object) { - var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - offset = fabric.util.rotateVector( - { x: this.offsetX, y: this.offsetY }, - fabric.util.degreesToRadians(-object.angle)), - BLUR_BOX = 20, color = new fabric.Color(this.color); - - if (object.width && object.height) { - //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion - // we add some extra space to filter box to contain the blur ( 20 ) - fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; - } - if (object.flipX) { - offset.x *= -1; - } - if (object.flipY) { - offset.y *= -1; - } - - return ( - '\n' + - '\t\n' + - '\t\n' + - '\t\n' + - '\t\n' + - '\t\n' + - '\t\t\n' + - '\t\t\n' + - '\t\n' + - '\n'); - }, - /* _TO_SVG_END_ */ + } + var obj = { }, proto = fabric.Shadow.prototype; - /** - * Returns object representation of a shadow - * @return {Object} Object representation of a shadow instance - */ - toObject: function() { - if (this.includeDefaultValues) { - return { - color: this.color, - blur: this.blur, - offsetX: this.offsetX, - offsetY: this.offsetY, - affectStroke: this.affectStroke, - nonScaling: this.nonScaling - }; + ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { + if (this[prop] !== proto[prop]) { + obj[prop] = this[prop]; } - var obj = { }, proto = fabric.Shadow.prototype; + }, this); - ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { - if (this[prop] !== proto[prop]) { - obj[prop] = this[prop]; - } - }, this); - - return obj; - } - }); + return obj; + } + }); - /** - * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") - * @static - * @field - * @memberOf fabric.Shadow - */ - // eslint-disable-next-line max-len - fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; - - })(typeof exports !== 'undefined' ? exports : window); - - (function (global) { - // aliases for faster resolution - var fabric = global.fabric, extend = fabric.util.object.extend, - getElementOffset = fabric.util.getElementOffset, - removeFromArray = fabric.util.removeFromArray, - toFixed = fabric.util.toFixed, - transformPoint = fabric.util.transformPoint, - invertTransform = fabric.util.invertTransform, - getNodeCanvas = fabric.util.getNodeCanvas, - createCanvasElement = fabric.util.createCanvasElement, - - CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element'); - - /** - * Static canvas class - * @class fabric.StaticCanvas - * @mixes fabric.Collection - * @mixes fabric.Observable - * @see {@link http://fabricjs.com/static_canvas|StaticCanvas demo} - * @see {@link fabric.StaticCanvas#initialize} for constructor definition - * @fires before:render - * @fires after:render - * @fires canvas:cleared - * @fires object:added - * @fires object:removed - */ - // eslint-disable-next-line max-len - fabric.StaticCanvas = fabric.util.createClass(fabric.CommonMethods, fabric.Collection, /** @lends fabric.StaticCanvas.prototype */ { + /** + * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") + * @static + * @field + * @memberOf fabric.Shadow + */ + // eslint-disable-next-line max-len + fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; - /** - * Constructor - * @param {HTMLElement | String} el <canvas> element to initialize instance on - * @param {Object} [options] Options object - * @return {Object} thisArg - */ - initialize: function(el, options) { - options || (options = { }); - this.renderAndResetBound = this.renderAndReset.bind(this); - this.requestRenderAllBound = this.requestRenderAll.bind(this); - this._initStatic(el, options); - }, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Background color of canvas instance. - * @type {(String|fabric.Pattern)} - * @default - */ - backgroundColor: '', - /** - * Background image of canvas instance. - * since 2.4.0 image caching is active, please when putting an image as background, add to the - * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom - * vale. As an alternative you can disable image objectCaching - * @type fabric.Image - * @default - */ - backgroundImage: null, +(function () { - /** - * Overlay color of canvas instance. - * @since 1.3.9 - * @type {(String|fabric.Pattern)} - * @default - */ - overlayColor: '', + 'use strict'; - /** - * Overlay image of canvas instance. - * since 2.4.0 image caching is active, please when putting an image as overlay, add to the - * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom - * vale. As an alternative you can disable image objectCaching - * @type fabric.Image - * @default - */ - overlayImage: null, + if (fabric.StaticCanvas) { + fabric.warn('fabric.StaticCanvas is already defined.'); + return; + } - /** - * Indicates whether toObject/toDatalessObject should include default values - * if set to false, takes precedence over the object value. - * @type Boolean - * @default - */ - includeDefaultValues: true, + // aliases for faster resolution + var extend = fabric.util.object.extend, + getElementOffset = fabric.util.getElementOffset, + removeFromArray = fabric.util.removeFromArray, + toFixed = fabric.util.toFixed, + transformPoint = fabric.util.transformPoint, + invertTransform = fabric.util.invertTransform, + getNodeCanvas = fabric.util.getNodeCanvas, + createCanvasElement = fabric.util.createCanvasElement, - /** - * Indicates whether objects' state should be saved - * @type Boolean - * @default - */ - stateful: false, + CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element'); - /** - * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, - * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. - * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once - * since the renders are quequed and executed one per frame. - * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) - * Left default to true to do not break documentation and old app, fiddles. - * @type Boolean - * @default - */ - renderOnAddRemove: true, + /** + * Static canvas class + * @class fabric.StaticCanvas + * @mixes fabric.Collection + * @mixes fabric.Observable + * @see {@link http://fabricjs.com/static_canvas|StaticCanvas demo} + * @see {@link fabric.StaticCanvas#initialize} for constructor definition + * @fires before:render + * @fires after:render + * @fires canvas:cleared + * @fires object:added + * @fires object:removed + */ + fabric.StaticCanvas = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Indicates whether object controls (borders/controls) are rendered above overlay image - * @type Boolean - * @default - */ - controlsAboveOverlay: false, + /** + * Constructor + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + }, - /** - * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas - * @type Boolean - * @default - */ - allowTouchScrolling: false, + /** + * Background color of canvas instance. + * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}. + * @type {(String|fabric.Pattern)} + * @default + */ + backgroundColor: '', - /** - * Indicates whether this canvas will use image smoothing, this is on by default in browsers - * @type Boolean - * @default - */ - imageSmoothingEnabled: true, + /** + * Background image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as background, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image + * @default + */ + backgroundImage: null, - /** - * The transformation (a Canvas 2D API transform matrix) which focuses the viewport - * @type Array - * @example Default transform - * canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; - * @example Scale by 70% and translate toward bottom-right by 50, without skewing - * canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50]; - * @default - */ - viewportTransform: fabric.iMatrix.concat(), + /** + * Overlay color of canvas instance. + * Should be set via {@link fabric.StaticCanvas#setOverlayColor} + * @since 1.3.9 + * @type {(String|fabric.Pattern)} + * @default + */ + overlayColor: '', - /** - * if set to false background image is not affected by viewport transform - * @since 1.6.3 - * @type Boolean - * @default - */ - backgroundVpt: true, + /** + * Overlay image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as overlay, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image + * @default + */ + overlayImage: null, - /** - * if set to false overlya image is not affected by viewport transform - * @since 1.6.3 - * @type Boolean - * @default - */ - overlayVpt: true, + /** + * Indicates whether toObject/toDatalessObject should include default values + * if set to false, takes precedence over the object value. + * @type Boolean + * @default + */ + includeDefaultValues: true, - /** - * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens - * @type Boolean - * @default - */ - enableRetinaScaling: true, + /** + * Indicates whether objects' state should be saved + * @type Boolean + * @default + */ + stateful: false, - /** - * Describe canvas element extension over design - * properties are tl,tr,bl,br. - * if canvas is not zoomed/panned those points are the four corner of canvas - * if canvas is viewportTransformed you those points indicate the extension - * of canvas element in plain untrasformed coordinates - * The coordinates get updated with @method calcViewportBoundaries. - * @memberOf fabric.StaticCanvas.prototype - */ - vptCoords: { }, + /** + * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, + * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. + * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once + * since the renders are quequed and executed one per frame. + * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) + * Left default to true to do not break documentation and old app, fiddles. + * @type Boolean + * @default + */ + renderOnAddRemove: true, - /** - * Based on vptCoords and object.aCoords, skip rendering of objects that - * are not included in current viewport. - * May greatly help in applications with crowded canvas and use of zoom/pan - * If One of the corner of the bounding box of the object is on the canvas - * the objects get rendered. - * @memberOf fabric.StaticCanvas.prototype - * @type Boolean - * @default - */ - skipOffscreen: true, + /** + * Indicates whether object controls (borders/controls) are rendered above overlay image + * @type Boolean + * @default + */ + controlsAboveOverlay: false, - /** - * a fabricObject that, without stroke define a clipping area with their shape. filled in black - * the clipPath object gets used when the canvas has rendered, and the context is placed in the - * top left corner of the canvas. - * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true - * @type fabric.Object - */ - clipPath: undefined, + /** + * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas + * @type Boolean + * @default + */ + allowTouchScrolling: false, - /** - * @private - * @param {HTMLElement | String} el <canvas> element to initialize instance on - * @param {Object} [options] Options object - */ - _initStatic: function(el, options) { - this._objects = []; - this._createLowerCanvas(el); - this._initOptions(options); - // only initialize retina scaling once - if (!this.interactive) { - this._initRetinaScaling(); - } - this.calcOffset(); - }, + /** + * Indicates whether this canvas will use image smoothing, this is on by default in browsers + * @type Boolean + * @default + */ + imageSmoothingEnabled: true, - /** - * @private - */ - _isRetinaScaling: function() { - return (fabric.devicePixelRatio > 1 && this.enableRetinaScaling); - }, + /** + * The transformation (a Canvas 2D API transform matrix) which focuses the viewport + * @type Array + * @example Default transform + * canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; + * @example Scale by 70% and translate toward bottom-right by 50, without skewing + * canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50]; + * @default + */ + viewportTransform: fabric.iMatrix.concat(), - /** - * @private - * @return {Number} retinaScaling if applied, otherwise 1; - */ - getRetinaScaling: function() { - return this._isRetinaScaling() ? Math.max(1, fabric.devicePixelRatio) : 1; - }, + /** + * if set to false background image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @default + */ + backgroundVpt: true, - /** - * @private - */ - _initRetinaScaling: function() { - if (!this._isRetinaScaling()) { - return; - } - var scaleRatio = fabric.devicePixelRatio; - this.__initRetinaScaling(scaleRatio, this.lowerCanvasEl, this.contextContainer); - if (this.upperCanvasEl) { - this.__initRetinaScaling(scaleRatio, this.upperCanvasEl, this.contextTop); - } - }, + /** + * if set to false overlya image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @default + */ + overlayVpt: true, - __initRetinaScaling: function(scaleRatio, canvas, context) { - canvas.setAttribute('width', this.width * scaleRatio); - canvas.setAttribute('height', this.height * scaleRatio); - context.scale(scaleRatio, scaleRatio); - }, + /** + * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens + * @type Boolean + * @default + */ + enableRetinaScaling: true, + /** + * Describe canvas element extension over design + * properties are tl,tr,bl,br. + * if canvas is not zoomed/panned those points are the four corner of canvas + * if canvas is viewportTransformed you those points indicate the extension + * of canvas element in plain untrasformed coordinates + * The coordinates get updated with @method calcViewportBoundaries. + * @memberOf fabric.StaticCanvas.prototype + */ + vptCoords: { }, - /** - * Calculates canvas element offset relative to the document - * This method is also attached as "resize" event handler of window - * @return {fabric.Canvas} instance - * @chainable - */ - calcOffset: function () { - this._offset = getElementOffset(this.lowerCanvasEl); - return this; - }, + /** + * Based on vptCoords and object.aCoords, skip rendering of objects that + * are not included in current viewport. + * May greatly help in applications with crowded canvas and use of zoom/pan + * If One of the corner of the bounding box of the object is on the canvas + * the objects get rendered. + * @memberOf fabric.StaticCanvas.prototype + * @type Boolean + * @default + */ + skipOffscreen: true, - /** - * @private - */ - _createCanvasElement: function() { - var element = createCanvasElement(); - if (!element) { - throw CANVAS_INIT_ERROR; - } - if (!element.style) { - element.style = { }; - } - if (typeof element.getContext === 'undefined') { - throw CANVAS_INIT_ERROR; - } - return element; - }, + /** + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the canvas has rendered, and the context is placed in the + * top left corner of the canvas. + * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true + * @type fabric.Object + */ + clipPath: undefined, - /** - * @private - * @param {Object} [options] Options object - */ - _initOptions: function (options) { - var lowerCanvasEl = this.lowerCanvasEl; - this._setOptions(options); + /** + * @private + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + */ + _initStatic: function(el, options) { + var cb = this.requestRenderAllBound; + this._objects = []; + this._createLowerCanvas(el); + this._initOptions(options); + // only initialize retina scaling once + if (!this.interactive) { + this._initRetinaScaling(); + } - this.width = this.width || parseInt(lowerCanvasEl.width, 10) || 0; - this.height = this.height || parseInt(lowerCanvasEl.height, 10) || 0; + if (options.overlayImage) { + this.setOverlayImage(options.overlayImage, cb); + } + if (options.backgroundImage) { + this.setBackgroundImage(options.backgroundImage, cb); + } + if (options.backgroundColor) { + this.setBackgroundColor(options.backgroundColor, cb); + } + if (options.overlayColor) { + this.setOverlayColor(options.overlayColor, cb); + } + this.calcOffset(); + }, - if (!this.lowerCanvasEl.style) { - return; - } + /** + * @private + */ + _isRetinaScaling: function() { + return (fabric.devicePixelRatio > 1 && this.enableRetinaScaling); + }, - lowerCanvasEl.width = this.width; - lowerCanvasEl.height = this.height; + /** + * @private + * @return {Number} retinaScaling if applied, otherwise 1; + */ + getRetinaScaling: function() { + return this._isRetinaScaling() ? Math.max(1, fabric.devicePixelRatio) : 1; + }, - lowerCanvasEl.style.width = this.width + 'px'; - lowerCanvasEl.style.height = this.height + 'px'; + /** + * @private + */ + _initRetinaScaling: function() { + if (!this._isRetinaScaling()) { + return; + } + var scaleRatio = fabric.devicePixelRatio; + this.__initRetinaScaling(scaleRatio, this.lowerCanvasEl, this.contextContainer); + if (this.upperCanvasEl) { + this.__initRetinaScaling(scaleRatio, this.upperCanvasEl, this.contextTop); + } + }, - this.viewportTransform = this.viewportTransform.slice(); - }, + __initRetinaScaling: function(scaleRatio, canvas, context) { + canvas.setAttribute('width', this.width * scaleRatio); + canvas.setAttribute('height', this.height * scaleRatio); + context.scale(scaleRatio, scaleRatio); + }, - /** - * Creates a bottom canvas - * @private - * @param {HTMLElement} [canvasEl] - */ - _createLowerCanvas: function (canvasEl) { - // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node - if (canvasEl && canvasEl.getContext) { - this.lowerCanvasEl = canvasEl; - } - else { - this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement(); - } - if (this.lowerCanvasEl.hasAttribute('data-fabric')) { - /* _DEV_MODE_START_ */ - throw new Error('fabric.js: trying to initialize a canvas that has already been initialized'); - /* _DEV_MODE_END_ */ - } - fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas'); - this.lowerCanvasEl.setAttribute('data-fabric', 'main'); - if (this.interactive) { - this._originalCanvasStyle = this.lowerCanvasEl.style.cssText; - this._applyCanvasStyle(this.lowerCanvasEl); - } - this.contextContainer = this.lowerCanvasEl.getContext('2d'); - }, + /** + * Calculates canvas element offset relative to the document + * This method is also attached as "resize" event handler of window + * @return {fabric.Canvas} instance + * @chainable + */ + calcOffset: function () { + this._offset = getElementOffset(this.lowerCanvasEl); + return this; + }, - /** - * Returns canvas width (in px) - * @return {Number} - */ - getWidth: function () { - return this.width; - }, + /** + * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas + * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to + * @param {Function} callback callback to invoke when image is loaded and set as an overlay + * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}. + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/fabricjs/MnzHT/|jsFiddle demo} + * @example Normal overlayImage with left/top = 0 + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * // Needed to position overlayImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example overlayImage with different properties + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top' + * }); + * @example Stretched overlayImage #1 - width/height correspond to canvas width/height + * fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img, isError) { + * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); + * canvas.setOverlayImage(img, canvas.renderAll.bind(canvas)); + * }); + * @example Stretched overlayImage #2 - width/height correspond to canvas width/height + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * width: canvas.width, + * height: canvas.height, + * // Needed to position overlayImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example overlayImage loaded from cross-origin + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top', + * crossOrigin: 'anonymous' + * }); + */ + setOverlayImage: function (image, callback, options) { + return this.__setBgOverlayImage('overlayImage', image, callback, options); + }, + + /** + * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas + * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to + * @param {Function} callback Callback to invoke when image is loaded and set as background + * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}. + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/djnr8o7a/28/|jsFiddle demo} + * @example Normal backgroundImage with left/top = 0 + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * // Needed to position backgroundImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example backgroundImage with different properties + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top' + * }); + * @example Stretched backgroundImage #1 - width/height correspond to canvas width/height + * fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img, isError) { + * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); + * canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas)); + * }); + * @example Stretched backgroundImage #2 - width/height correspond to canvas width/height + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * width: canvas.width, + * height: canvas.height, + * // Needed to position backgroundImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example backgroundImage loaded from cross-origin + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top', + * crossOrigin: 'anonymous' + * }); + */ + // TODO: fix stretched examples + setBackgroundImage: function (image, callback, options) { + return this.__setBgOverlayImage('backgroundImage', image, callback, options); + }, + + /** + * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas + * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set foreground color to + * @param {Function} callback Callback to invoke when foreground color is set + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/fabricjs/pB55h/|jsFiddle demo} + * @example Normal overlayColor - color value + * canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as overlayColor + * canvas.setOverlayColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png' + * }, canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as overlayColor with repeat and offset + * canvas.setOverlayColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png', + * repeat: 'repeat', + * offsetX: 200, + * offsetY: 100 + * }, canvas.renderAll.bind(canvas)); + */ + setOverlayColor: function(overlayColor, callback) { + return this.__setBgOverlayColor('overlayColor', overlayColor, callback); + }, + + /** + * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas + * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to + * @param {Function} callback Callback to invoke when background color is set + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/fabricjs/hXzvk/|jsFiddle demo} + * @example Normal backgroundColor - color value + * canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as backgroundColor + * canvas.setBackgroundColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png' + * }, canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as backgroundColor with repeat and offset + * canvas.setBackgroundColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png', + * repeat: 'repeat', + * offsetX: 200, + * offsetY: 100 + * }, canvas.renderAll.bind(canvas)); + */ + setBackgroundColor: function(backgroundColor, callback) { + return this.__setBgOverlayColor('backgroundColor', backgroundColor, callback); + }, - /** - * Returns canvas height (in px) - * @return {Number} - */ - getHeight: function () { - return this.height; - }, + /** + * @private + * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundImage|backgroundImage} + * or {@link fabric.StaticCanvas#overlayImage|overlayImage}) + * @param {(fabric.Image|String|null)} image fabric.Image instance, URL of an image or null to set background or overlay to + * @param {Function} callback Callback to invoke when image is loaded and set as background or overlay. The first argument is the created image, the second argument is a flag indicating whether an error occurred or not. + * @param {Object} [options] Optional options to set for the {@link fabric.Image|image}. + */ + __setBgOverlayImage: function(property, image, callback, options) { + if (typeof image === 'string') { + fabric.util.loadImage(image, function(img, isError) { + if (img) { + var instance = new fabric.Image(img, options); + this[property] = instance; + instance.canvas = this; + } + callback && callback(img, isError); + }, this, options && options.crossOrigin); + } + else { + options && image.setOptions(options); + this[property] = image; + image && (image.canvas = this); + callback && callback(image, false); + } - /** - * Sets width of this canvas instance - * @param {Number|String} value Value to set width to - * @param {Object} [options] Options object - * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions - * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions - * @return {fabric.Canvas} instance - * @chainable true - */ - setWidth: function (value, options) { - return this.setDimensions({ width: value }, options); - }, + return this; + }, - /** - * Sets height of this canvas instance - * @param {Number|String} value Value to set height to - * @param {Object} [options] Options object - * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions - * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions - * @return {fabric.Canvas} instance - * @chainable true - */ - setHeight: function (value, options) { - return this.setDimensions({ height: value }, options); - }, + /** + * @private + * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundColor|backgroundColor} + * or {@link fabric.StaticCanvas#overlayColor|overlayColor}) + * @param {(Object|String|null)} color Object with pattern information, color value or null + * @param {Function} [callback] Callback is invoked when color is set + */ + __setBgOverlayColor: function(property, color, callback) { + this[property] = color; + this._initGradient(color, property); + this._initPattern(color, property, callback); + return this; + }, - /** - * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) - * @param {Object} dimensions Object with width/height properties - * @param {Number|String} [dimensions.width] Width of canvas element - * @param {Number|String} [dimensions.height] Height of canvas element - * @param {Object} [options] Options object - * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions - * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions - * @return {fabric.Canvas} thisArg - * @chainable - */ - setDimensions: function (dimensions, options) { - var cssValue; + /** + * @private + */ + _createCanvasElement: function() { + var element = createCanvasElement(); + if (!element) { + throw CANVAS_INIT_ERROR; + } + if (!element.style) { + element.style = { }; + } + if (typeof element.getContext === 'undefined') { + throw CANVAS_INIT_ERROR; + } + return element; + }, - options = options || {}; + /** + * @private + * @param {Object} [options] Options object + */ + _initOptions: function (options) { + var lowerCanvasEl = this.lowerCanvasEl; + this._setOptions(options); - for (var prop in dimensions) { - cssValue = dimensions[prop]; + this.width = this.width || parseInt(lowerCanvasEl.width, 10) || 0; + this.height = this.height || parseInt(lowerCanvasEl.height, 10) || 0; - if (!options.cssOnly) { - this._setBackstoreDimension(prop, dimensions[prop]); - cssValue += 'px'; - this.hasLostContext = true; - } + if (!this.lowerCanvasEl.style) { + return; + } - if (!options.backstoreOnly) { - this._setCssDimension(prop, cssValue); - } - } - if (this._isCurrentlyDrawing) { - this.freeDrawingBrush && this.freeDrawingBrush._setBrushStyles(this.contextTop); - } - this._initRetinaScaling(); - this.calcOffset(); + lowerCanvasEl.width = this.width; + lowerCanvasEl.height = this.height; - if (!options.cssOnly) { - this.requestRenderAll(); - } + lowerCanvasEl.style.width = this.width + 'px'; + lowerCanvasEl.style.height = this.height + 'px'; - return this; - }, + this.viewportTransform = this.viewportTransform.slice(); + }, - /** - * Helper for setting width/height - * @private - * @param {String} prop property (width|height) - * @param {Number} value value to set property to - * @return {fabric.Canvas} instance - * @chainable true - */ - _setBackstoreDimension: function (prop, value) { - this.lowerCanvasEl[prop] = value; + /** + * Creates a bottom canvas + * @private + * @param {HTMLElement} [canvasEl] + */ + _createLowerCanvas: function (canvasEl) { + // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node + if (canvasEl && canvasEl.getContext) { + this.lowerCanvasEl = canvasEl; + } + else { + this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement(); + } - if (this.upperCanvasEl) { - this.upperCanvasEl[prop] = value; - } + fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas'); + this._originalCanvasStyle = this.lowerCanvasEl.style; + if (this.interactive) { + this._applyCanvasStyle(this.lowerCanvasEl); + } - if (this.cacheCanvasEl) { - this.cacheCanvasEl[prop] = value; - } + this.contextContainer = this.lowerCanvasEl.getContext('2d'); + }, - this[prop] = value; + /** + * Returns canvas width (in px) + * @return {Number} + */ + getWidth: function () { + return this.width; + }, - return this; - }, + /** + * Returns canvas height (in px) + * @return {Number} + */ + getHeight: function () { + return this.height; + }, - /** - * Helper for setting css width/height - * @private - * @param {String} prop property (width|height) - * @param {String} value value to set property to - * @return {fabric.Canvas} instance - * @chainable true - */ - _setCssDimension: function (prop, value) { - this.lowerCanvasEl.style[prop] = value; + /** + * Sets width of this canvas instance + * @param {Number|String} value Value to set width to + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} instance + * @chainable true + */ + setWidth: function (value, options) { + return this.setDimensions({ width: value }, options); + }, - if (this.upperCanvasEl) { - this.upperCanvasEl.style[prop] = value; - } + /** + * Sets height of this canvas instance + * @param {Number|String} value Value to set height to + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} instance + * @chainable true + */ + setHeight: function (value, options) { + return this.setDimensions({ height: value }, options); + }, - if (this.wrapperEl) { - this.wrapperEl.style[prop] = value; - } + /** + * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) + * @param {Object} dimensions Object with width/height properties + * @param {Number|String} [dimensions.width] Width of canvas element + * @param {Number|String} [dimensions.height] Height of canvas element + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} thisArg + * @chainable + */ + setDimensions: function (dimensions, options) { + var cssValue; - return this; - }, + options = options || {}; - /** - * Returns canvas zoom level - * @return {Number} - */ - getZoom: function () { - return this.viewportTransform[0]; - }, + for (var prop in dimensions) { + cssValue = dimensions[prop]; - /** - * Sets viewport transformation of this canvas instance - * @param {Array} vpt a Canvas 2D API transform matrix - * @return {fabric.Canvas} instance - * @chainable true - */ - setViewportTransform: function (vpt) { - var activeObject = this._activeObject, - backgroundObject = this.backgroundImage, - overlayObject = this.overlayImage, - object, i, len; - this.viewportTransform = vpt; - for (i = 0, len = this._objects.length; i < len; i++) { - object = this._objects[i]; - object.group || object.setCoords(true); - } - if (activeObject) { - activeObject.setCoords(); - } - if (backgroundObject) { - backgroundObject.setCoords(true); + if (!options.cssOnly) { + this._setBackstoreDimension(prop, dimensions[prop]); + cssValue += 'px'; + this.hasLostContext = true; } - if (overlayObject) { - overlayObject.setCoords(true); + + if (!options.backstoreOnly) { + this._setCssDimension(prop, cssValue); } - this.calcViewportBoundaries(); - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + } + if (this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._setBrushStyles(this.contextTop); + } + this._initRetinaScaling(); + this.calcOffset(); - /** - * Sets zoom level of this canvas instance, the zoom centered around point - * meaning that following zoom to point with the same point will have the visual - * effect of the zoom originating from that point. The point won't move. - * It has nothing to do with canvas center or visual center of the viewport. - * @param {fabric.Point} point to zoom with respect to - * @param {Number} value to set zoom to, less than 1 zooms out - * @return {fabric.Canvas} instance - * @chainable true - */ - zoomToPoint: function (point, value) { - // TODO: just change the scale, preserve other transformations - var before = point, vpt = this.viewportTransform.slice(0); - point = transformPoint(point, invertTransform(this.viewportTransform)); - vpt[0] = value; - vpt[3] = value; - var after = transformPoint(point, vpt); - vpt[4] += before.x - after.x; - vpt[5] += before.y - after.y; - return this.setViewportTransform(vpt); - }, + if (!options.cssOnly) { + this.requestRenderAll(); + } - /** - * Sets zoom level of this canvas instance - * @param {Number} value to set zoom to, less than 1 zooms out - * @return {fabric.Canvas} instance - * @chainable true - */ - setZoom: function (value) { - this.zoomToPoint(new fabric.Point(0, 0), value); - return this; - }, + return this; + }, - /** - * Pan viewport so as to place point at top left corner of canvas - * @param {fabric.Point} point to move to - * @return {fabric.Canvas} instance - * @chainable true - */ - absolutePan: function (point) { - var vpt = this.viewportTransform.slice(0); - vpt[4] = -point.x; - vpt[5] = -point.y; - return this.setViewportTransform(vpt); - }, + /** + * Helper for setting width/height + * @private + * @param {String} prop property (width|height) + * @param {Number} value value to set property to + * @return {fabric.Canvas} instance + * @chainable true + */ + _setBackstoreDimension: function (prop, value) { + this.lowerCanvasEl[prop] = value; - /** - * Pans viewpoint relatively - * @param {fabric.Point} point (position vector) to move by - * @return {fabric.Canvas} instance - * @chainable true - */ - relativePan: function (point) { - return this.absolutePan(new fabric.Point( - -point.x - this.viewportTransform[4], - -point.y - this.viewportTransform[5] - )); - }, + if (this.upperCanvasEl) { + this.upperCanvasEl[prop] = value; + } - /** - * Returns <canvas> element corresponding to this instance - * @return {HTMLCanvasElement} - */ - getElement: function () { - return this.lowerCanvasEl; - }, + if (this.cacheCanvasEl) { + this.cacheCanvasEl[prop] = value; + } - /** - * @param {...fabric.Object} objects to add - * @return {Self} thisArg - * @chainable - */ - add: function () { - fabric.Collection.add.call(this, arguments, this._onObjectAdded); - arguments.length > 0 && this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + this[prop] = value; - /** - * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) - * An object should be an instance of (or inherit from) fabric.Object - * @param {fabric.Object|fabric.Object[]} objects Object(s) to insert - * @param {Number} index Index to insert object at - * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs - * @return {Self} thisArg - * @chainable - */ - insertAt: function (objects, index) { - fabric.Collection.insertAt.call(this, objects, index, this._onObjectAdded); - (Array.isArray(objects) ? objects.length > 0 : !!objects) && this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + return this; + }, - /** - * @param {...fabric.Object} objects to remove - * @return {Self} thisArg - * @chainable - */ - remove: function () { - var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); - removed.length > 0 && this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + /** + * Helper for setting css width/height + * @private + * @param {String} prop property (width|height) + * @param {String} value value to set property to + * @return {fabric.Canvas} instance + * @chainable true + */ + _setCssDimension: function (prop, value) { + this.lowerCanvasEl.style[prop] = value; - /** - * @private - * @param {fabric.Object} obj Object that was added - */ - _onObjectAdded: function(obj) { - this.stateful && obj.setupState(); - if (obj.canvas && obj.canvas !== this) { - /* _DEV_MODE_START_ */ - console.warn('fabric.Canvas: trying to add an object that belongs to a different canvas.\n' + - 'Resulting to default behavior: removing object from previous canvas and adding to new canvas'); - /* _DEV_MODE_END_ */ - obj.canvas.remove(obj); - } - obj._set('canvas', this); - obj.setCoords(); - this.fire('object:added', { target: obj }); - obj.fire('added', { target: this }); - }, + if (this.upperCanvasEl) { + this.upperCanvasEl.style[prop] = value; + } - /** - * @private - * @param {fabric.Object} obj Object that was removed - */ - _onObjectRemoved: function(obj) { - obj._set('canvas', undefined); - this.fire('object:removed', { target: obj }); - obj.fire('removed', { target: this }); - }, + if (this.wrapperEl) { + this.wrapperEl.style[prop] = value; + } - /** - * Clears specified context of canvas element - * @param {CanvasRenderingContext2D} ctx Context to clear - * @return {fabric.Canvas} thisArg - * @chainable - */ - clearContext: function(ctx) { - ctx.clearRect(0, 0, this.width, this.height); - return this; - }, + return this; + }, - /** - * Returns context of canvas where objects are drawn - * @return {CanvasRenderingContext2D} - */ - getContext: function () { - return this.contextContainer; - }, + /** + * Returns canvas zoom level + * @return {Number} + */ + getZoom: function () { + return this.viewportTransform[0]; + }, - /** - * Clears all contexts (background, main, top) of an instance - * @return {fabric.Canvas} thisArg - * @chainable - */ - clear: function () { - this.remove.apply(this, this.getObjects()); - this.backgroundImage = null; - this.overlayImage = null; - this.backgroundColor = ''; - this.overlayColor = ''; - if (this._hasITextHandlers) { - this.off('mouse:up', this._mouseUpITextHandler); - this._iTextInstances = null; - this._hasITextHandlers = false; - } - this.clearContext(this.contextContainer); - this.fire('canvas:cleared'); - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + /** + * Sets viewport transformation of this canvas instance + * @param {Array} vpt a Canvas 2D API transform matrix + * @return {fabric.Canvas} instance + * @chainable true + */ + setViewportTransform: function (vpt) { + var activeObject = this._activeObject, + backgroundObject = this.backgroundImage, + overlayObject = this.overlayImage, + object, i, len; + this.viewportTransform = vpt; + for (i = 0, len = this._objects.length; i < len; i++) { + object = this._objects[i]; + object.group || object.setCoords(true); + } + if (activeObject) { + activeObject.setCoords(); + } + if (backgroundObject) { + backgroundObject.setCoords(true); + } + if (overlayObject) { + overlayObject.setCoords(true); + } + this.calcViewportBoundaries(); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - /** - * Renders the canvas - * @return {fabric.Canvas} instance - * @chainable - */ - renderAll: function () { - var canvasToDrawOn = this.contextContainer; - this.renderCanvas(canvasToDrawOn, this._objects); - return this; - }, + /** + * Sets zoom level of this canvas instance, the zoom centered around point + * meaning that following zoom to point with the same point will have the visual + * effect of the zoom originating from that point. The point won't move. + * It has nothing to do with canvas center or visual center of the viewport. + * @param {fabric.Point} point to zoom with respect to + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable true + */ + zoomToPoint: function (point, value) { + // TODO: just change the scale, preserve other transformations + var before = point, vpt = this.viewportTransform.slice(0); + point = transformPoint(point, invertTransform(this.viewportTransform)); + vpt[0] = value; + vpt[3] = value; + var after = transformPoint(point, vpt); + vpt[4] += before.x - after.x; + vpt[5] += before.y - after.y; + return this.setViewportTransform(vpt); + }, - /** - * Function created to be instance bound at initialization - * used in requestAnimationFrame rendering - * Let the fabricJS call it. If you call it manually you could have more - * animationFrame stacking on to of each other - * for an imperative rendering, use canvas.renderAll - * @private - * @return {fabric.Canvas} instance - * @chainable - */ - renderAndReset: function() { - this.isRendering = 0; - this.renderAll(); - }, + /** + * Sets zoom level of this canvas instance + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable true + */ + setZoom: function (value) { + this.zoomToPoint(new fabric.Point(0, 0), value); + return this; + }, - /** - * Append a renderAll request to next animation frame. - * unless one is already in progress, in that case nothing is done - * a boolean flag will avoid appending more. - * @return {fabric.Canvas} instance - * @chainable - */ - requestRenderAll: function () { - if (!this.isRendering) { - this.isRendering = fabric.util.requestAnimFrame(this.renderAndResetBound); - } - return this; - }, + /** + * Pan viewport so as to place point at top left corner of canvas + * @param {fabric.Point} point to move to + * @return {fabric.Canvas} instance + * @chainable true + */ + absolutePan: function (point) { + var vpt = this.viewportTransform.slice(0); + vpt[4] = -point.x; + vpt[5] = -point.y; + return this.setViewportTransform(vpt); + }, - /** - * Calculate the position of the 4 corner of canvas with current viewportTransform. - * helps to determinate when an object is in the current rendering viewport using - * object absolute coordinates ( aCoords ) - * @return {Object} points.tl - * @chainable - */ - calcViewportBoundaries: function() { - var width = this.width, height = this.height, - iVpt = invertTransform(this.viewportTransform), - a = transformPoint({ x: 0, y: 0 }, iVpt), - b = transformPoint({ x: width, y: height }, iVpt), - // we don't support vpt flipping - // but the code is robust enough to mostly work with flipping - min = a.min(b), - max = a.max(b); - return this.vptCoords = { - tl: min, - tr: new fabric.Point(max.x, min.y), - bl: new fabric.Point(min.x, max.y), - br: max, - }; - }, - - cancelRequestedRender: function() { - if (this.isRendering) { - fabric.util.cancelAnimFrame(this.isRendering); - this.isRendering = 0; - } - }, + /** + * Pans viewpoint relatively + * @param {fabric.Point} point (position vector) to move by + * @return {fabric.Canvas} instance + * @chainable true + */ + relativePan: function (point) { + return this.absolutePan(new fabric.Point( + -point.x - this.viewportTransform[4], + -point.y - this.viewportTransform[5] + )); + }, - /** - * Renders background, objects, overlay and controls. - * @param {CanvasRenderingContext2D} ctx - * @param {Array} objects to render - * @return {fabric.Canvas} instance - * @chainable - */ - renderCanvas: function(ctx, objects) { - var v = this.viewportTransform, path = this.clipPath; - this.cancelRequestedRender(); - this.calcViewportBoundaries(); - this.clearContext(ctx); - fabric.util.setImageSmoothing(ctx, this.imageSmoothingEnabled); - this.fire('before:render', { ctx: ctx, }); - this._renderBackground(ctx); + /** + * Returns <canvas> element corresponding to this instance + * @return {HTMLCanvasElement} + */ + getElement: function () { + return this.lowerCanvasEl; + }, - ctx.save(); - //apply viewport transform once for all rendering process - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - this._renderObjects(ctx, objects); - ctx.restore(); - if (!this.controlsAboveOverlay && this.interactive) { - this.drawControls(ctx); - } - if (path) { - path._set('canvas', this); - // needed to setup a couple of variables - path.shouldCache(); - path._transformDone = true; - path.renderCache({ forClipping: true }); - this.drawClipPathOnCanvas(ctx); - } - this._renderOverlay(ctx); - if (this.controlsAboveOverlay && this.interactive) { - this.drawControls(ctx); - } - this.fire('after:render', { ctx: ctx, }); - }, + /** + * @private + * @param {fabric.Object} obj Object that was added + */ + _onObjectAdded: function(obj) { + this.stateful && obj.setupState(); + obj._set('canvas', this); + obj.setCoords(); + this.fire('object:added', { target: obj }); + obj.fire('added'); + }, - /** - * Paint the cached clipPath on the lowerCanvasEl - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawClipPathOnCanvas: function(ctx) { - var v = this.viewportTransform, path = this.clipPath; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - // DEBUG: uncomment this line, comment the following - // ctx.globalAlpha = 0.4; - ctx.globalCompositeOperation = 'destination-in'; - path.transform(ctx); - ctx.scale(1 / path.zoomX, 1 / path.zoomY); - ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY); - ctx.restore(); - }, + /** + * @private + * @param {fabric.Object} obj Object that was removed + */ + _onObjectRemoved: function(obj) { + this.fire('object:removed', { target: obj }); + obj.fire('removed'); + delete obj.canvas; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Array} objects to render - */ - _renderObjects: function(ctx, objects) { - var i, len; - for (i = 0, len = objects.length; i < len; ++i) { - objects[i] && objects[i].render(ctx); - } - }, + /** + * Clears specified context of canvas element + * @param {CanvasRenderingContext2D} ctx Context to clear + * @return {fabric.Canvas} thisArg + * @chainable + */ + clearContext: function(ctx) { + ctx.clearRect(0, 0, this.width, this.height); + return this; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {string} property 'background' or 'overlay' - */ - _renderBackgroundOrOverlay: function(ctx, property) { - var fill = this[property + 'Color'], object = this[property + 'Image'], - v = this.viewportTransform, needsVpt = this[property + 'Vpt']; - if (!fill && !object) { - return; - } - if (fill) { - ctx.save(); - ctx.beginPath(); - ctx.moveTo(0, 0); - ctx.lineTo(this.width, 0); - ctx.lineTo(this.width, this.height); - ctx.lineTo(0, this.height); - ctx.closePath(); - ctx.fillStyle = fill.toLive - ? fill.toLive(ctx, this) - : fill; - if (needsVpt) { - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - } - ctx.transform(1, 0, 0, 1, fill.offsetX || 0, fill.offsetY || 0); - var m = fill.gradientTransform || fill.patternTransform; - m && ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - ctx.fill(); - ctx.restore(); - } - if (object) { - ctx.save(); - if (needsVpt) { - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - } - object.render(ctx); - ctx.restore(); - } - }, + /** + * Returns context of canvas where objects are drawn + * @return {CanvasRenderingContext2D} + */ + getContext: function () { + return this.contextContainer; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderBackground: function(ctx) { - this._renderBackgroundOrOverlay(ctx, 'background'); - }, + /** + * Clears all contexts (background, main, top) of an instance + * @return {fabric.Canvas} thisArg + * @chainable + */ + clear: function () { + this.remove.apply(this, this.getObjects()); + this.backgroundImage = null; + this.overlayImage = null; + this.backgroundColor = ''; + this.overlayColor = ''; + if (this._hasITextHandlers) { + this.off('mouse:up', this._mouseUpITextHandler); + this._iTextInstances = null; + this._hasITextHandlers = false; + } + this.clearContext(this.contextContainer); + this.fire('canvas:cleared'); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderOverlay: function(ctx) { - this._renderBackgroundOrOverlay(ctx, 'overlay'); - }, + /** + * Renders the canvas + * @return {fabric.Canvas} instance + * @chainable + */ + renderAll: function () { + var canvasToDrawOn = this.contextContainer; + this.renderCanvas(canvasToDrawOn, this._objects); + return this; + }, - /** - * Returns coordinates of a center of canvas. - * Returned value is an object with top and left properties - * @return {Object} object with "top" and "left" number values - * @deprecated migrate to `getCenterPoint` - */ - getCenter: function () { - return { - top: this.height / 2, - left: this.width / 2 - }; - }, + /** + * Function created to be instance bound at initialization + * used in requestAnimationFrame rendering + * Let the fabricJS call it. If you call it manually you could have more + * animationFrame stacking on to of each other + * for an imperative rendering, use canvas.renderAll + * @private + * @return {fabric.Canvas} instance + * @chainable + */ + renderAndReset: function() { + this.isRendering = 0; + this.renderAll(); + }, + + /** + * Append a renderAll request to next animation frame. + * unless one is already in progress, in that case nothing is done + * a boolean flag will avoid appending more. + * @return {fabric.Canvas} instance + * @chainable + */ + requestRenderAll: function () { + if (!this.isRendering) { + this.isRendering = fabric.util.requestAnimFrame(this.renderAndResetBound); + } + return this; + }, + + /** + * Calculate the position of the 4 corner of canvas with current viewportTransform. + * helps to determinate when an object is in the current rendering viewport using + * object absolute coordinates ( aCoords ) + * @return {Object} points.tl + * @chainable + */ + calcViewportBoundaries: function() { + var points = { }, width = this.width, height = this.height, + iVpt = invertTransform(this.viewportTransform); + points.tl = transformPoint({ x: 0, y: 0 }, iVpt); + points.br = transformPoint({ x: width, y: height }, iVpt); + points.tr = new fabric.Point(points.br.x, points.tl.y); + points.bl = new fabric.Point(points.tl.x, points.br.y); + this.vptCoords = points; + return points; + }, + + cancelRequestedRender: function() { + if (this.isRendering) { + fabric.util.cancelAnimFrame(this.isRendering); + this.isRendering = 0; + } + }, - /** - * Returns coordinates of a center of canvas. - * @return {fabric.Point} - */ - getCenterPoint: function () { - return new fabric.Point(this.width / 2, this.height / 2); - }, + /** + * Renders background, objects, overlay and controls. + * @param {CanvasRenderingContext2D} ctx + * @param {Array} objects to render + * @return {fabric.Canvas} instance + * @chainable + */ + renderCanvas: function(ctx, objects) { + var v = this.viewportTransform, path = this.clipPath; + this.cancelRequestedRender(); + this.calcViewportBoundaries(); + this.clearContext(ctx); + fabric.util.setImageSmoothing(ctx, this.imageSmoothingEnabled); + this.fire('before:render', { ctx: ctx, }); + this._renderBackground(ctx); - /** - * Centers object horizontally in the canvas - * @param {fabric.Object} object Object to center horizontally - * @return {fabric.Canvas} thisArg - */ - centerObjectH: function (object) { - return this._centerObject(object, new fabric.Point(this.getCenterPoint().x, object.getCenterPoint().y)); - }, + ctx.save(); + //apply viewport transform once for all rendering process + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this._renderObjects(ctx, objects); + ctx.restore(); + if (!this.controlsAboveOverlay && this.interactive) { + this.drawControls(ctx); + } + if (path) { + path.canvas = this; + // needed to setup a couple of variables + path.shouldCache(); + path._transformDone = true; + path.renderCache({ forClipping: true }); + this.drawClipPathOnCanvas(ctx); + } + this._renderOverlay(ctx); + if (this.controlsAboveOverlay && this.interactive) { + this.drawControls(ctx); + } + this.fire('after:render', { ctx: ctx, }); + }, - /** - * Centers object vertically in the canvas - * @param {fabric.Object} object Object to center vertically - * @return {fabric.Canvas} thisArg - * @chainable - */ - centerObjectV: function (object) { - return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenterPoint().y)); - }, + /** + * Paint the cached clipPath on the lowerCanvasEl + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawClipPathOnCanvas: function(ctx) { + var v = this.viewportTransform, path = this.clipPath; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4; + ctx.globalCompositeOperation = 'destination-in'; + path.transform(ctx); + ctx.scale(1 / path.zoomX, 1 / path.zoomY); + ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY); + ctx.restore(); + }, - /** - * Centers object vertically and horizontally in the canvas - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - centerObject: function(object) { - var center = this.getCenterPoint(); - return this._centerObject(object, center); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Array} objects to render + */ + _renderObjects: function(ctx, objects) { + var i, len; + for (i = 0, len = objects.length; i < len; ++i) { + objects[i] && objects[i].render(ctx); + } + }, - /** - * Centers object vertically and horizontally in the viewport - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - viewportCenterObject: function(object) { - var vpCenter = this.getVpCenter(); - return this._centerObject(object, vpCenter); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {string} property 'background' or 'overlay' + */ + _renderBackgroundOrOverlay: function(ctx, property) { + var fill = this[property + 'Color'], object = this[property + 'Image'], + v = this.viewportTransform, needsVpt = this[property + 'Vpt']; + if (!fill && !object) { + return; + } + if (fill) { + ctx.save(); + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(this.width, 0); + ctx.lineTo(this.width, this.height); + ctx.lineTo(0, this.height); + ctx.closePath(); + ctx.fillStyle = fill.toLive + ? fill.toLive(ctx, this) + : fill; + if (needsVpt) { + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + } + ctx.transform(1, 0, 0, 1, fill.offsetX || 0, fill.offsetY || 0); + var m = fill.gradientTransform || fill.patternTransform; + m && ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + ctx.fill(); + ctx.restore(); + } + if (object) { + ctx.save(); + if (needsVpt) { + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + } + object.render(ctx); + ctx.restore(); + } + }, - /** - * Centers object horizontally in the viewport, object.top is unchanged - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - viewportCenterObjectH: function(object) { - var vpCenter = this.getVpCenter(); - this._centerObject(object, new fabric.Point(vpCenter.x, object.getCenterPoint().y)); - return this; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderBackground: function(ctx) { + this._renderBackgroundOrOverlay(ctx, 'background'); + }, - /** - * Centers object Vertically in the viewport, object.top is unchanged - * @param {fabric.Object} object Object to center vertically and horizontally - * @return {fabric.Canvas} thisArg - * @chainable - */ - viewportCenterObjectV: function(object) { - var vpCenter = this.getVpCenter(); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderOverlay: function(ctx) { + this._renderBackgroundOrOverlay(ctx, 'overlay'); + }, - return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, vpCenter.y)); - }, + /** + * Returns coordinates of a center of canvas. + * Returned value is an object with top and left properties + * @return {Object} object with "top" and "left" number values + */ + getCenter: function () { + return { + top: this.height / 2, + left: this.width / 2 + }; + }, - /** - * Calculate the point in canvas that correspond to the center of actual viewport. - * @return {fabric.Point} vpCenter, viewport center - * @chainable - */ - getVpCenter: function() { - var center = this.getCenterPoint(), - iVpt = invertTransform(this.viewportTransform); - return transformPoint(center, iVpt); - }, + /** + * Centers object horizontally in the canvas + * @param {fabric.Object} object Object to center horizontally + * @return {fabric.Canvas} thisArg + */ + centerObjectH: function (object) { + return this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y)); + }, - /** - * @private - * @param {fabric.Object} object Object to center - * @param {fabric.Point} center Center point - * @return {fabric.Canvas} thisArg - * @chainable - */ - _centerObject: function(object, center) { - object.setXY(center, 'center', 'center'); - object.setCoords(); - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + /** + * Centers object vertically in the canvas + * @param {fabric.Object} object Object to center vertically + * @return {fabric.Canvas} thisArg + * @chainable + */ + centerObjectV: function (object) { + return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top)); + }, - /** - * Returns dataless JSON representation of canvas - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {String} json string - */ - toDatalessJSON: function (propertiesToInclude) { - return this.toDatalessObject(propertiesToInclude); - }, + /** + * Centers object vertically and horizontally in the canvas + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + centerObject: function(object) { + var center = this.getCenter(); - /** - * Returns object representation of canvas - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function (propertiesToInclude) { - return this._toObjectMethod('toObject', propertiesToInclude); - }, + return this._centerObject(object, new fabric.Point(center.left, center.top)); + }, - /** - * Returns dataless object representation of canvas - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toDatalessObject: function (propertiesToInclude) { - return this._toObjectMethod('toDatalessObject', propertiesToInclude); - }, + /** + * Centers object vertically and horizontally in the viewport + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObject: function(object) { + var vpCenter = this.getVpCenter(); - /** - * @private - */ - _toObjectMethod: function (methodName, propertiesToInclude) { + return this._centerObject(object, vpCenter); + }, - var clipPath = this.clipPath, data = { - version: fabric.version, - objects: this._toObjects(methodName, propertiesToInclude), - }; - if (clipPath && !clipPath.excludeFromExport) { - data.clipPath = this._toObject(this.clipPath, methodName, propertiesToInclude); - } - extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude)); + /** + * Centers object horizontally in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectH: function(object) { + var vpCenter = this.getVpCenter(); + this._centerObject(object, new fabric.Point(vpCenter.x, object.getCenterPoint().y)); + return this; + }, - fabric.util.populateWithProperties(this, data, propertiesToInclude); + /** + * Centers object Vertically in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectV: function(object) { + var vpCenter = this.getVpCenter(); - return data; - }, + return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, vpCenter.y)); + }, - /** - * @private - */ - _toObjects: function(methodName, propertiesToInclude) { - return this._objects.filter(function(object) { - return !object.excludeFromExport; - }).map(function(instance) { - return this._toObject(instance, methodName, propertiesToInclude); - }, this); - }, + /** + * Calculate the point in canvas that correspond to the center of actual viewport. + * @return {fabric.Point} vpCenter, viewport center + * @chainable + */ + getVpCenter: function() { + var center = this.getCenter(), + iVpt = invertTransform(this.viewportTransform); + return transformPoint({ x: center.left, y: center.top }, iVpt); + }, - /** - * @private - */ - _toObject: function(instance, methodName, propertiesToInclude) { - var originalValue; + /** + * @private + * @param {fabric.Object} object Object to center + * @param {fabric.Point} center Center point + * @return {fabric.Canvas} thisArg + * @chainable + */ + _centerObject: function(object, center) { + object.setPositionByOrigin(center, 'center', 'center'); + object.setCoords(); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - if (!this.includeDefaultValues) { - originalValue = instance.includeDefaultValues; - instance.includeDefaultValues = false; - } + /** + * Returns dataless JSON representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {String} json string + */ + toDatalessJSON: function (propertiesToInclude) { + return this.toDatalessObject(propertiesToInclude); + }, - var object = instance[methodName](propertiesToInclude); - if (!this.includeDefaultValues) { - instance.includeDefaultValues = originalValue; - } - return object; - }, + /** + * Returns object representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function (propertiesToInclude) { + return this._toObjectMethod('toObject', propertiesToInclude); + }, - /** - * @private - */ - __serializeBgOverlay: function(methodName, propertiesToInclude) { - var data = {}, bgImage = this.backgroundImage, overlayImage = this.overlayImage, - bgColor = this.backgroundColor, overlayColor = this.overlayColor; + /** + * Returns dataless object representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function (propertiesToInclude) { + return this._toObjectMethod('toDatalessObject', propertiesToInclude); + }, - if (bgColor && bgColor.toObject) { - if (!bgColor.excludeFromExport) { - data.background = bgColor.toObject(propertiesToInclude); - } - } - else if (bgColor) { - data.background = bgColor; - } + /** + * @private + */ + _toObjectMethod: function (methodName, propertiesToInclude) { - if (overlayColor && overlayColor.toObject) { - if (!overlayColor.excludeFromExport) { - data.overlay = overlayColor.toObject(propertiesToInclude); - } - } - else if (overlayColor) { - data.overlay = overlayColor; - } + var clipPath = this.clipPath, data = { + version: fabric.version, + objects: this._toObjects(methodName, propertiesToInclude), + }; + if (clipPath && !clipPath.excludeFromExport) { + data.clipPath = this._toObject(this.clipPath, methodName, propertiesToInclude); + } + extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude)); - if (bgImage && !bgImage.excludeFromExport) { - data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude); - } - if (overlayImage && !overlayImage.excludeFromExport) { - data.overlayImage = this._toObject(overlayImage, methodName, propertiesToInclude); - } + fabric.util.populateWithProperties(this, data, propertiesToInclude); - return data; - }, + return data; + }, - /* _TO_SVG_START_ */ - /** - * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, - * a zoomed canvas will then produce zoomed SVG output. - * @type Boolean - * @default - */ - svgViewportTransformation: true, + /** + * @private + */ + _toObjects: function(methodName, propertiesToInclude) { + return this._objects.filter(function(object) { + return !object.excludeFromExport; + }).map(function(instance) { + return this._toObject(instance, methodName, propertiesToInclude); + }, this); + }, - /** - * Returns SVG representation of canvas - * @function - * @param {Object} [options] Options object for SVG output - * @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included - * @param {Object} [options.viewBox] SVG viewbox object - * @param {Number} [options.viewBox.x] x-coordinate of viewbox - * @param {Number} [options.viewBox.y] y-coordinate of viewbox - * @param {Number} [options.viewBox.width] Width of viewbox - * @param {Number} [options.viewBox.height] Height of viewbox - * @param {String} [options.encoding=UTF-8] Encoding of SVG output - * @param {String} [options.width] desired width of svg with or without units - * @param {String} [options.height] desired height of svg with or without units - * @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation. - * @return {String} SVG string - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} - * @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo} - * @example Normal SVG output - * var svg = canvas.toSVG(); - * @example SVG output without preamble (without <?xml ../>) - * var svg = canvas.toSVG({suppressPreamble: true}); - * @example SVG output with viewBox attribute - * var svg = canvas.toSVG({ - * viewBox: { - * x: 100, - * y: 100, - * width: 200, - * height: 300 - * } - * }); - * @example SVG output with different encoding (default: UTF-8) - * var svg = canvas.toSVG({encoding: 'ISO-8859-1'}); - * @example Modify SVG output with reviver function - * var svg = canvas.toSVG(null, function(svg) { - * return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', ''); - * }); - */ - toSVG: function(options, reviver) { - options || (options = { }); - options.reviver = reviver; - var markup = []; + /** + * @private + */ + _toObject: function(instance, methodName, propertiesToInclude) { + var originalValue; - this._setSVGPreamble(markup, options); - this._setSVGHeader(markup, options); - if (this.clipPath) { - markup.push('\n'); - } - this._setSVGBgOverlayColor(markup, 'background'); - this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver); - this._setSVGObjects(markup, reviver); - if (this.clipPath) { - markup.push('\n'); - } - this._setSVGBgOverlayColor(markup, 'overlay'); - this._setSVGBgOverlayImage(markup, 'overlayImage', reviver); + if (!this.includeDefaultValues) { + originalValue = instance.includeDefaultValues; + instance.includeDefaultValues = false; + } - markup.push(''); + var object = instance[methodName](propertiesToInclude); + if (!this.includeDefaultValues) { + instance.includeDefaultValues = originalValue; + } + return object; + }, - return markup.join(''); - }, + /** + * @private + */ + __serializeBgOverlay: function(methodName, propertiesToInclude) { + var data = {}, bgImage = this.backgroundImage, overlayImage = this.overlayImage, + bgColor = this.backgroundColor, overlayColor = this.overlayColor; - /** - * @private - */ - _setSVGPreamble: function(markup, options) { - if (options.suppressPreamble) { - return; + if (bgColor && bgColor.toObject) { + if (!bgColor.excludeFromExport) { + data.background = bgColor.toObject(propertiesToInclude); } - markup.push( - '\n', - '\n' - ); - }, - - /** - * @private - */ - _setSVGHeader: function(markup, options) { - var width = options.width || this.width, - height = options.height || this.height, - vpt, viewBox = 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ', - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + } + else if (bgColor) { + data.background = bgColor; + } - if (options.viewBox) { - viewBox = 'viewBox="' + - options.viewBox.x + ' ' + - options.viewBox.y + ' ' + - options.viewBox.width + ' ' + - options.viewBox.height + '" '; - } - else { - if (this.svgViewportTransformation) { - vpt = this.viewportTransform; - viewBox = 'viewBox="' + - toFixed(-vpt[4] / vpt[0], NUM_FRACTION_DIGITS) + ' ' + - toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS) + ' ' + - toFixed(this.width / vpt[0], NUM_FRACTION_DIGITS) + ' ' + - toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS) + '" '; - } + if (overlayColor && overlayColor.toObject) { + if (!overlayColor.excludeFromExport) { + data.overlay = overlayColor.toObject(propertiesToInclude); } + } + else if (overlayColor) { + data.overlay = overlayColor; + } - markup.push( - '\n', - 'Created with Fabric.js ', fabric.version, '\n', - '\n', - this.createSVGFontFacesMarkup(), - this.createSVGRefElementsMarkup(), - this.createSVGClipPathMarkup(options), - '\n' - ); - }, + if (bgImage && !bgImage.excludeFromExport) { + data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude); + } + if (overlayImage && !overlayImage.excludeFromExport) { + data.overlayImage = this._toObject(overlayImage, methodName, propertiesToInclude); + } - createSVGClipPathMarkup: function(options) { - var clipPath = this.clipPath; - if (clipPath) { - clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; - return '\n' + - this.clipPath.toClipPathSVG(options.reviver) + - '\n'; - } - return ''; - }, + return data; + }, - /** - * Creates markup containing SVG referenced elements like patterns, gradients etc. - * @return {String} - */ - createSVGRefElementsMarkup: function() { - var _this = this, - markup = ['background', 'overlay'].map(function(prop) { - var fill = _this[prop + 'Color']; - if (fill && fill.toLive) { - var shouldTransform = _this[prop + 'Vpt'], vpt = _this.viewportTransform, - object = { - width: _this.width / (shouldTransform ? vpt[0] : 1), - height: _this.height / (shouldTransform ? vpt[3] : 1) - }; - return fill.toSVG( - object, - { additionalTransform: shouldTransform ? fabric.util.matrixToSVG(vpt) : '' } - ); - } - }); - return markup.join(''); - }, + /* _TO_SVG_START_ */ + /** + * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, + * a zoomed canvas will then produce zoomed SVG output. + * @type Boolean + * @default + */ + svgViewportTransformation: true, - /** - * Creates markup containing SVG font faces, - * font URLs for font faces must be collected by developers - * and are not extracted from the DOM by fabricjs - * @param {Array} objects Array of fabric objects - * @return {String} - */ - createSVGFontFacesMarkup: function() { - var markup = '', fontList = { }, obj, fontFamily, - style, row, rowIndex, _char, charIndex, i, len, - fontPaths = fabric.fontPaths, objects = []; - - this._objects.forEach(function add(object) { - objects.push(object); - if (object._objects) { - object._objects.forEach(add); - } - }); + /** + * Returns SVG representation of canvas + * @function + * @param {Object} [options] Options object for SVG output + * @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included + * @param {Object} [options.viewBox] SVG viewbox object + * @param {Number} [options.viewBox.x] x-coordinate of viewbox + * @param {Number} [options.viewBox.y] y-coordinate of viewbox + * @param {Number} [options.viewBox.width] Width of viewbox + * @param {Number} [options.viewBox.height] Height of viewbox + * @param {String} [options.encoding=UTF-8] Encoding of SVG output + * @param {String} [options.width] desired width of svg with or without units + * @param {String} [options.height] desired height of svg with or without units + * @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation. + * @return {String} SVG string + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} + * @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo} + * @example Normal SVG output + * var svg = canvas.toSVG(); + * @example SVG output without preamble (without <?xml ../>) + * var svg = canvas.toSVG({suppressPreamble: true}); + * @example SVG output with viewBox attribute + * var svg = canvas.toSVG({ + * viewBox: { + * x: 100, + * y: 100, + * width: 200, + * height: 300 + * } + * }); + * @example SVG output with different encoding (default: UTF-8) + * var svg = canvas.toSVG({encoding: 'ISO-8859-1'}); + * @example Modify SVG output with reviver function + * var svg = canvas.toSVG(null, function(svg) { + * return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', ''); + * }); + */ + toSVG: function(options, reviver) { + options || (options = { }); + options.reviver = reviver; + var markup = []; + + this._setSVGPreamble(markup, options); + this._setSVGHeader(markup, options); + if (this.clipPath) { + markup.push('\n'); + } + this._setSVGBgOverlayColor(markup, 'background'); + this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver); + this._setSVGObjects(markup, reviver); + if (this.clipPath) { + markup.push('\n'); + } + this._setSVGBgOverlayColor(markup, 'overlay'); + this._setSVGBgOverlayImage(markup, 'overlayImage', reviver); - for (i = 0, len = objects.length; i < len; i++) { - obj = objects[i]; - fontFamily = obj.fontFamily; - if (obj.type.indexOf('text') === -1 || fontList[fontFamily] || !fontPaths[fontFamily]) { - continue; - } - fontList[fontFamily] = true; - if (!obj.styles) { - continue; - } - style = obj.styles; - for (rowIndex in style) { - row = style[rowIndex]; - for (charIndex in row) { - _char = row[charIndex]; - fontFamily = _char.fontFamily; - if (!fontList[fontFamily] && fontPaths[fontFamily]) { - fontList[fontFamily] = true; - } - } - } - } + markup.push(''); - for (var j in fontList) { - markup += [ - '\t\t@font-face {\n', - '\t\t\tfont-family: \'', j, '\';\n', - '\t\t\tsrc: url(\'', fontPaths[j], '\');\n', - '\t\t}\n' - ].join(''); - } + return markup.join(''); + }, - if (markup) { - markup = [ - '\t\n' - ].join(''); - } + /** + * @private + */ + _setSVGPreamble: function(markup, options) { + if (options.suppressPreamble) { + return; + } + markup.push( + '\n', + '\n' + ); + }, - return markup; - }, + /** + * @private + */ + _setSVGHeader: function(markup, options) { + var width = options.width || this.width, + height = options.height || this.height, + vpt, viewBox = 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - /** - * @private - */ - _setSVGObjects: function(markup, reviver) { - var instance, i, len, objects = this._objects; - for (i = 0, len = objects.length; i < len; i++) { - instance = objects[i]; - if (instance.excludeFromExport) { - continue; - } - this._setSVGObject(markup, instance, reviver); - } - }, + if (options.viewBox) { + viewBox = 'viewBox="' + + options.viewBox.x + ' ' + + options.viewBox.y + ' ' + + options.viewBox.width + ' ' + + options.viewBox.height + '" '; + } + else { + if (this.svgViewportTransformation) { + vpt = this.viewportTransform; + viewBox = 'viewBox="' + + toFixed(-vpt[4] / vpt[0], NUM_FRACTION_DIGITS) + ' ' + + toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS) + ' ' + + toFixed(this.width / vpt[0], NUM_FRACTION_DIGITS) + ' ' + + toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS) + '" '; + } + } + + markup.push( + '\n', + 'Created with Fabric.js ', fabric.version, '\n', + '\n', + this.createSVGFontFacesMarkup(), + this.createSVGRefElementsMarkup(), + this.createSVGClipPathMarkup(options), + '\n' + ); + }, + + createSVGClipPathMarkup: function(options) { + var clipPath = this.clipPath; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + return '\n' + + this.clipPath.toClipPathSVG(options.reviver) + + '\n'; + } + return ''; + }, + + /** + * Creates markup containing SVG referenced elements like patterns, gradients etc. + * @return {String} + */ + createSVGRefElementsMarkup: function() { + var _this = this, + markup = ['background', 'overlay'].map(function(prop) { + var fill = _this[prop + 'Color']; + if (fill && fill.toLive) { + var shouldTransform = _this[prop + 'Vpt'], vpt = _this.viewportTransform, + object = { + width: _this.width / (shouldTransform ? vpt[0] : 1), + height: _this.height / (shouldTransform ? vpt[3] : 1) + }; + return fill.toSVG( + object, + { additionalTransform: shouldTransform ? fabric.util.matrixToSVG(vpt) : '' } + ); + } + }); + return markup.join(''); + }, - /** - * @private - */ - _setSVGObject: function(markup, instance, reviver) { - markup.push(instance.toSVG(reviver)); - }, + /** + * Creates markup containing SVG font faces, + * font URLs for font faces must be collected by developers + * and are not extracted from the DOM by fabricjs + * @param {Array} objects Array of fabric objects + * @return {String} + */ + createSVGFontFacesMarkup: function() { + var markup = '', fontList = { }, obj, fontFamily, + style, row, rowIndex, _char, charIndex, i, len, + fontPaths = fabric.fontPaths, objects = []; - /** - * @private - */ - _setSVGBgOverlayImage: function(markup, property, reviver) { - if (this[property] && !this[property].excludeFromExport && this[property].toSVG) { - markup.push(this[property].toSVG(reviver)); + this._objects.forEach(function add(object) { + objects.push(object); + if (object._objects) { + object._objects.forEach(add); } - }, + }); - /** - * @private - */ - _setSVGBgOverlayColor: function(markup, property) { - var filler = this[property + 'Color'], vpt = this.viewportTransform, finalWidth = this.width, - finalHeight = this.height; - if (!filler) { - return; - } - if (filler.toLive) { - var repeat = filler.repeat, iVpt = fabric.util.invertTransform(vpt), shouldInvert = this[property + 'Vpt'], - additionalTransform = shouldInvert ? fabric.util.matrixToSVG(iVpt) : ''; - markup.push( - '\n' - ); + for (i = 0, len = objects.length; i < len; i++) { + obj = objects[i]; + fontFamily = obj.fontFamily; + if (obj.type.indexOf('text') === -1 || fontList[fontFamily] || !fontPaths[fontFamily]) { + continue; } - else { - markup.push( - '\n' - ); + fontList[fontFamily] = true; + if (!obj.styles) { + continue; } - }, - /* _TO_SVG_END_ */ - - /** - * Moves an object or the objects of a multiple selection - * to the bottom of the stack of drawn objects - * @param {fabric.Object} object Object to send to back - * @return {fabric.Canvas} thisArg - * @chainable - */ - sendToBack: function (object) { - if (!object) { - return this; - } - var activeSelection = this._activeObject, - i, obj, objs; - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = objs.length; i--;) { - obj = objs[i]; - removeFromArray(this._objects, obj); - this._objects.unshift(obj); + style = obj.styles; + for (rowIndex in style) { + row = style[rowIndex]; + for (charIndex in row) { + _char = row[charIndex]; + fontFamily = _char.fontFamily; + if (!fontList[fontFamily] && fontPaths[fontFamily]) { + fontList[fontFamily] = true; + } } } - else { - removeFromArray(this._objects, object); - this._objects.unshift(object); - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + } - /** - * Moves an object or the objects of a multiple selection - * to the top of the stack of drawn objects - * @param {fabric.Object} object Object to send - * @return {fabric.Canvas} thisArg - * @chainable - */ - bringToFront: function (object) { - if (!object) { - return this; - } - var activeSelection = this._activeObject, - i, obj, objs; - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = 0; i < objs.length; i++) { - obj = objs[i]; - removeFromArray(this._objects, obj); - this._objects.push(obj); - } - } - else { - removeFromArray(this._objects, object); - this._objects.push(object); - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + for (var j in fontList) { + markup += [ + '\t\t@font-face {\n', + '\t\t\tfont-family: \'', j, '\';\n', + '\t\t\tsrc: url(\'', fontPaths[j], '\');\n', + '\t\t}\n' + ].join(''); + } - /** - * Moves an object or a selection down in stack of drawn objects - * An optional parameter, intersecting allows to move the object in behind - * the first intersecting object. Where intersection is calculated with - * bounding box. If no intersection is found, there will not be change in the - * stack. - * @param {fabric.Object} object Object to send - * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object - * @return {fabric.Canvas} thisArg - * @chainable - */ - sendBackwards: function (object, intersecting) { - if (!object) { - return this; - } - var activeSelection = this._activeObject, - i, obj, idx, newIdx, objs, objsMoved = 0; - - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = 0; i < objs.length; i++) { - obj = objs[i]; - idx = this._objects.indexOf(obj); - if (idx > 0 + objsMoved) { - newIdx = idx - 1; - removeFromArray(this._objects, obj); - this._objects.splice(newIdx, 0, obj); - } - objsMoved++; - } - } - else { - idx = this._objects.indexOf(object); - if (idx !== 0) { - // if object is not on the bottom of stack - newIdx = this._findNewLowerIndex(object, idx, intersecting); - removeFromArray(this._objects, object); - this._objects.splice(newIdx, 0, object); - } - } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + if (markup) { + markup = [ + '\t\n' + ].join(''); + } - /** - * @private - */ - _findNewLowerIndex: function(object, idx, intersecting) { - var newIdx, i; + return markup; + }, - if (intersecting) { - newIdx = idx; + /** + * @private + */ + _setSVGObjects: function(markup, reviver) { + var instance, i, len, objects = this._objects; + for (i = 0, len = objects.length; i < len; i++) { + instance = objects[i]; + if (instance.excludeFromExport) { + continue; + } + this._setSVGObject(markup, instance, reviver); + } + }, - // traverse down the stack looking for the nearest intersecting object - for (i = idx - 1; i >= 0; --i) { + /** + * @private + */ + _setSVGObject: function(markup, instance, reviver) { + markup.push(instance.toSVG(reviver)); + }, - var isIntersecting = object.intersectsWithObject(this._objects[i]) || - object.isContainedWithinObject(this._objects[i]) || - this._objects[i].isContainedWithinObject(object); + /** + * @private + */ + _setSVGBgOverlayImage: function(markup, property, reviver) { + if (this[property] && !this[property].excludeFromExport && this[property].toSVG) { + markup.push(this[property].toSVG(reviver)); + } + }, - if (isIntersecting) { - newIdx = i; - break; - } - } + /** + * @private + */ + _setSVGBgOverlayColor: function(markup, property) { + var filler = this[property + 'Color'], vpt = this.viewportTransform, finalWidth = this.width, + finalHeight = this.height; + if (!filler) { + return; + } + if (filler.toLive) { + var repeat = filler.repeat, iVpt = fabric.util.invertTransform(vpt), shouldInvert = this[property + 'Vpt'], + additionalTransform = shouldInvert ? fabric.util.matrixToSVG(iVpt) : ''; + markup.push( + '\n' + ); + } + else { + markup.push( + '\n' + ); + } + }, + /* _TO_SVG_END_ */ + + /** + * Moves an object or the objects of a multiple selection + * to the bottom of the stack of drawn objects + * @param {fabric.Object} object Object to send to back + * @return {fabric.Canvas} thisArg + * @chainable + */ + sendToBack: function (object) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, objs; + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = objs.length; i--;) { + obj = objs[i]; + removeFromArray(this._objects, obj); + this._objects.unshift(obj); } - else { - newIdx = idx - 1; + } + else { + removeFromArray(this._objects, object); + this._objects.unshift(object); + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, + + /** + * Moves an object or the objects of a multiple selection + * to the top of the stack of drawn objects + * @param {fabric.Object} object Object to send + * @return {fabric.Canvas} thisArg + * @chainable + */ + bringToFront: function (object) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, objs; + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = 0; i < objs.length; i++) { + obj = objs[i]; + removeFromArray(this._objects, obj); + this._objects.push(obj); } + } + else { + removeFromArray(this._objects, object); + this._objects.push(object); + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - return newIdx; - }, + /** + * Moves an object or a selection down in stack of drawn objects + * An optional parameter, intersecting allows to move the object in behind + * the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Canvas} thisArg + * @chainable + */ + sendBackwards: function (object, intersecting) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, idx, newIdx, objs, objsMoved = 0; - /** - * Moves an object or a selection up in stack of drawn objects - * An optional parameter, intersecting allows to move the object in front - * of the first intersecting object. Where intersection is calculated with - * bounding box. If no intersection is found, there will not be change in the - * stack. - * @param {fabric.Object} object Object to send - * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object - * @return {fabric.Canvas} thisArg - * @chainable - */ - bringForward: function (object, intersecting) { - if (!object) { - return this; - } - var activeSelection = this._activeObject, - i, obj, idx, newIdx, objs, objsMoved = 0; - - if (object === activeSelection && object.type === 'activeSelection') { - objs = activeSelection._objects; - for (i = objs.length; i--;) { - obj = objs[i]; - idx = this._objects.indexOf(obj); - if (idx < this._objects.length - 1 - objsMoved) { - newIdx = idx + 1; - removeFromArray(this._objects, obj); - this._objects.splice(newIdx, 0, obj); - } - objsMoved++; + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = 0; i < objs.length; i++) { + obj = objs[i]; + idx = this._objects.indexOf(obj); + if (idx > 0 + objsMoved) { + newIdx = idx - 1; + removeFromArray(this._objects, obj); + this._objects.splice(newIdx, 0, obj); } + objsMoved++; } - else { - idx = this._objects.indexOf(object); - if (idx !== this._objects.length - 1) { - // if object is not on top of stack (last item in an array) - newIdx = this._findNewUpperIndex(object, idx, intersecting); - removeFromArray(this._objects, object); - this._objects.splice(newIdx, 0, object); - } + } + else { + idx = this._objects.indexOf(object); + if (idx !== 0) { + // if object is not on the bottom of stack + newIdx = this._findNewLowerIndex(object, idx, intersecting); + removeFromArray(this._objects, object); + this._objects.splice(newIdx, 0, object); } - this.renderOnAddRemove && this.requestRenderAll(); - return this; - }, + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - /** - * @private - */ - _findNewUpperIndex: function(object, idx, intersecting) { - var newIdx, i, len; + /** + * @private + */ + _findNewLowerIndex: function(object, idx, intersecting) { + var newIdx, i; - if (intersecting) { - newIdx = idx; + if (intersecting) { + newIdx = idx; - // traverse up the stack looking for the nearest intersecting object - for (i = idx + 1, len = this._objects.length; i < len; ++i) { + // traverse down the stack looking for the nearest intersecting object + for (i = idx - 1; i >= 0; --i) { - var isIntersecting = object.intersectsWithObject(this._objects[i]) || - object.isContainedWithinObject(this._objects[i]) || - this._objects[i].isContainedWithinObject(object); + var isIntersecting = object.intersectsWithObject(this._objects[i]) || + object.isContainedWithinObject(this._objects[i]) || + this._objects[i].isContainedWithinObject(object); - if (isIntersecting) { - newIdx = i; - break; - } + if (isIntersecting) { + newIdx = i; + break; } } - else { - newIdx = idx + 1; - } + } + else { + newIdx = idx - 1; + } - return newIdx; - }, + return newIdx; + }, - /** - * Moves an object to specified level in stack of drawn objects - * @param {fabric.Object} object Object to send - * @param {Number} index Position to move to - * @return {fabric.Canvas} thisArg - * @chainable - */ - moveTo: function (object, index) { - removeFromArray(this._objects, object); - this._objects.splice(index, 0, object); - return this.renderOnAddRemove && this.requestRenderAll(); - }, + /** + * Moves an object or a selection up in stack of drawn objects + * An optional parameter, intersecting allows to move the object in front + * of the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Canvas} thisArg + * @chainable + */ + bringForward: function (object, intersecting) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, idx, newIdx, objs, objsMoved = 0; - /** - * Clears a canvas element and dispose objects - * @return {fabric.Canvas} thisArg - * @chainable - */ - dispose: function () { - // cancel eventually ongoing renders - if (this.isRendering) { - fabric.util.cancelAnimFrame(this.isRendering); - this.isRendering = 0; - } - this.forEachObject(function(object) { - object.dispose && object.dispose(); - }); - this._objects = []; - if (this.backgroundImage && this.backgroundImage.dispose) { - this.backgroundImage.dispose(); + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = objs.length; i--;) { + obj = objs[i]; + idx = this._objects.indexOf(obj); + if (idx < this._objects.length - 1 - objsMoved) { + newIdx = idx + 1; + removeFromArray(this._objects, obj); + this._objects.splice(newIdx, 0, obj); + } + objsMoved++; } - this.backgroundImage = null; - if (this.overlayImage && this.overlayImage.dispose) { - this.overlayImage.dispose(); + } + else { + idx = this._objects.indexOf(object); + if (idx !== this._objects.length - 1) { + // if object is not on top of stack (last item in an array) + newIdx = this._findNewUpperIndex(object, idx, intersecting); + removeFromArray(this._objects, object); + this._objects.splice(newIdx, 0, object); } - this.overlayImage = null; - this._iTextInstances = null; - this.contextContainer = null; - // restore canvas style and attributes - this.lowerCanvasEl.classList.remove('lower-canvas'); - this.lowerCanvasEl.removeAttribute('data-fabric'); - if (this.interactive) { - this.lowerCanvasEl.style.cssText = this._originalCanvasStyle; - delete this._originalCanvasStyle; - } - // restore canvas size to original size in case retina scaling was applied - this.lowerCanvasEl.setAttribute('width', this.width); - this.lowerCanvasEl.setAttribute('height', this.height); - fabric.util.cleanUpJsdomNode(this.lowerCanvasEl); - this.lowerCanvasEl = undefined; - return this; - }, - - /** - * Returns a string representation of an instance - * @return {String} string representation of an instance - */ - toString: function () { - return '#'; } - }); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - extend(fabric.StaticCanvas.prototype, fabric.Observable); - extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter); - - extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ { + /** + * @private + */ + _findNewUpperIndex: function(object, idx, intersecting) { + var newIdx, i, len; - /** - * @static - * @type String - * @default - */ - EMPTY_JSON: '{"objects": [], "background": "white"}', + if (intersecting) { + newIdx = idx; - /** - * Provides a way to check support of some of the canvas methods - * (either those of HTMLCanvasElement itself, or rendering context) - * - * @param {String} methodName Method to check support for; - * Could be one of "setLineDash" - * @return {Boolean | null} `true` if method is supported (or at least exists), - * `null` if canvas element or context can not be initialized - */ - supports: function (methodName) { - var el = createCanvasElement(); + // traverse up the stack looking for the nearest intersecting object + for (i = idx + 1, len = this._objects.length; i < len; ++i) { - if (!el || !el.getContext) { - return null; - } + var isIntersecting = object.intersectsWithObject(this._objects[i]) || + object.isContainedWithinObject(this._objects[i]) || + this._objects[i].isContainedWithinObject(object); - var ctx = el.getContext('2d'); - if (!ctx) { - return null; + if (isIntersecting) { + newIdx = i; + break; + } } + } + else { + newIdx = idx + 1; + } - switch (methodName) { + return newIdx; + }, - case 'setLineDash': - return typeof ctx.setLineDash !== 'undefined'; + /** + * Moves an object to specified level in stack of drawn objects + * @param {fabric.Object} object Object to send + * @param {Number} index Position to move to + * @return {fabric.Canvas} thisArg + * @chainable + */ + moveTo: function (object, index) { + removeFromArray(this._objects, object); + this._objects.splice(index, 0, object); + return this.renderOnAddRemove && this.requestRenderAll(); + }, - default: - return null; - } + /** + * Clears a canvas element and dispose objects + * @return {fabric.Canvas} thisArg + * @chainable + */ + dispose: function () { + // cancel eventually ongoing renders + if (this.isRendering) { + fabric.util.cancelAnimFrame(this.isRendering); + this.isRendering = 0; } - }); + this.forEachObject(function(object) { + object.dispose && object.dispose(); + }); + this._objects = []; + if (this.backgroundImage && this.backgroundImage.dispose) { + this.backgroundImage.dispose(); + } + this.backgroundImage = null; + if (this.overlayImage && this.overlayImage.dispose) { + this.overlayImage.dispose(); + } + this.overlayImage = null; + this._iTextInstances = null; + this.contextContainer = null; + // restore canvas style + this.lowerCanvasEl.classList.remove('lower-canvas'); + fabric.util.setStyle(this.lowerCanvasEl, this._originalCanvasStyle); + delete this._originalCanvasStyle; + // restore canvas size to original size in case retina scaling was applied + this.lowerCanvasEl.setAttribute('width', this.width); + this.lowerCanvasEl.setAttribute('height', this.height); + fabric.util.cleanUpJsdomNode(this.lowerCanvasEl); + this.lowerCanvasEl = undefined; + return this; + }, + + /** + * Returns a string representation of an instance + * @return {String} string representation of an instance + */ + toString: function () { + return '#'; + } + }); + + extend(fabric.StaticCanvas.prototype, fabric.Observable); + extend(fabric.StaticCanvas.prototype, fabric.Collection); + extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter); + + extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ { /** - * Returns Object representation of canvas - * this alias is provided because if you call JSON.stringify on an instance, - * the toJSON object will be invoked if it exists. - * Having a toJSON method means you can do JSON.stringify(myCanvas) - * @function - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} JSON compatible object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} - * @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo} - * @example JSON without additional properties - * var json = canvas.toJSON(); - * @example JSON with additional properties included - * var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']); - * @example JSON without default values - * canvas.includeDefaultValues = false; - * var json = canvas.toJSON(); + * @static + * @type String + * @default */ - fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject; - - if (fabric.isLikelyNode) { - fabric.StaticCanvas.prototype.createPNGStream = function() { - var impl = getNodeCanvas(this.lowerCanvasEl); - return impl && impl.createPNGStream(); - }; - fabric.StaticCanvas.prototype.createJPEGStream = function(opts) { - var impl = getNodeCanvas(this.lowerCanvasEl); - return impl && impl.createJPEGStream(opts); - }; - } - })(typeof exports !== 'undefined' ? exports : window); + EMPTY_JSON: '{"objects": [], "background": "white"}', - (function(global) { - var fabric = global.fabric; /** - * BaseBrush class - * @class fabric.BaseBrush - * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo} + * Provides a way to check support of some of the canvas methods + * (either those of HTMLCanvasElement itself, or rendering context) + * + * @param {String} methodName Method to check support for; + * Could be one of "setLineDash" + * @return {Boolean | null} `true` if method is supported (or at least exists), + * `null` if canvas element or context can not be initialized */ - fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ { + supports: function (methodName) { + var el = createCanvasElement(); - /** - * Color of a brush - * @type String - * @default - */ - color: 'rgb(0, 0, 0)', + if (!el || !el.getContext) { + return null; + } - /** - * Width of a brush, has to be a Number, no string literals - * @type Number - * @default - */ - width: 1, + var ctx = el.getContext('2d'); + if (!ctx) { + return null; + } - /** - * Shadow object representing shadow of this shape. - * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), - * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 - * @type fabric.Shadow - * @default - */ - shadow: null, + switch (methodName) { - /** - * Line endings style of a brush (one of "butt", "round", "square") - * @type String - * @default - */ - strokeLineCap: 'round', - - /** - * Corner style of a brush (one of "bevel", "round", "miter") - * @type String - * @default - */ - strokeLineJoin: 'round', + case 'setLineDash': + return typeof ctx.setLineDash !== 'undefined'; - /** - * Maximum miter length (used for strokeLineJoin = "miter") of a brush's - * @type Number - * @default - */ - strokeMiterLimit: 10, + default: + return null; + } + } + }); - /** - * Stroke Dash Array. - * @type Array - * @default - */ - strokeDashArray: null, + /** + * Returns Object representation of canvas + * this alias is provided because if you call JSON.stringify on an instance, + * the toJSON object will be invoked if it exists. + * Having a toJSON method means you can do JSON.stringify(myCanvas) + * @function + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} JSON compatible object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} + * @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo} + * @example JSON without additional properties + * var json = canvas.toJSON(); + * @example JSON with additional properties included + * var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']); + * @example JSON without default values + * canvas.includeDefaultValues = false; + * var json = canvas.toJSON(); + */ + fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject; - /** - * When `true`, the free drawing is limited to the whiteboard size. Default to false. - * @type Boolean - * @default false - */ + if (fabric.isLikelyNode) { + fabric.StaticCanvas.prototype.createPNGStream = function() { + var impl = getNodeCanvas(this.lowerCanvasEl); + return impl && impl.createPNGStream(); + }; + fabric.StaticCanvas.prototype.createJPEGStream = function(opts) { + var impl = getNodeCanvas(this.lowerCanvasEl); + return impl && impl.createJPEGStream(opts); + }; + } +})(); - limitedToCanvasSize: false, +/** + * BaseBrush class + * @class fabric.BaseBrush + * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo} + */ +fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ { - /** - * Sets brush styles - * @private - * @param {CanvasRenderingContext2D} ctx - */ - _setBrushStyles: function (ctx) { - ctx.strokeStyle = this.color; - ctx.lineWidth = this.width; - ctx.lineCap = this.strokeLineCap; - ctx.miterLimit = this.strokeMiterLimit; - ctx.lineJoin = this.strokeLineJoin; - ctx.setLineDash(this.strokeDashArray || []); - }, + /** + * Color of a brush + * @type String + * @default + */ + color: 'rgb(0, 0, 0)', - /** - * Sets the transformation on given context - * @param {RenderingContext2d} ctx context to render on - * @private - */ - _saveAndTransform: function(ctx) { - var v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - }, + /** + * Width of a brush, has to be a Number, no string literals + * @type Number + * @default + */ + width: 1, - /** - * Sets brush shadow styles - * @private - */ - _setShadow: function() { - if (!this.shadow) { - return; - } + /** + * Shadow object representing shadow of this shape. + * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), + * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 + * @type fabric.Shadow + * @default + */ + shadow: null, - var canvas = this.canvas, - shadow = this.shadow, - ctx = canvas.contextTop, - zoom = canvas.getZoom(); - if (canvas && canvas._isRetinaScaling()) { - zoom *= fabric.devicePixelRatio; - } + /** + * Line endings style of a brush (one of "butt", "round", "square") + * @type String + * @default + */ + strokeLineCap: 'round', - ctx.shadowColor = shadow.color; - ctx.shadowBlur = shadow.blur * zoom; - ctx.shadowOffsetX = shadow.offsetX * zoom; - ctx.shadowOffsetY = shadow.offsetY * zoom; - }, + /** + * Corner style of a brush (one of "bevel", "round", "miter") + * @type String + * @default + */ + strokeLineJoin: 'round', - needsFullRender: function() { - var color = new fabric.Color(this.color); - return color.getAlpha() < 1 || !!this.shadow; - }, + /** + * Maximum miter length (used for strokeLineJoin = "miter") of a brush's + * @type Number + * @default + */ + strokeMiterLimit: 10, - /** - * Removes brush shadow styles - * @private - */ - _resetShadow: function() { - var ctx = this.canvas.contextTop; + /** + * Stroke Dash Array. + * @type Array + * @default + */ + strokeDashArray: null, - ctx.shadowColor = ''; - ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; - }, + /** + * When `true`, the free drawing is limited to the whiteboard size. Default to false. + * @type Boolean + * @default false + */ - /** - * Check is pointer is outside canvas boundaries - * @param {Object} pointer - * @private - */ - _isOutSideCanvas: function(pointer) { - return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); - } - }); - })(typeof exports !== 'undefined' ? exports : window); + limitedToCanvasSize: false, - (function(global) { - var fabric = global.fabric; - /** - * PencilBrush class - * @class fabric.PencilBrush - * @extends fabric.BaseBrush - */ - fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { - /** - * Discard points that are less than `decimate` pixel distant from each other - * @type Number - * @default 0.4 - */ - decimate: 0.4, + /** + * Sets brush styles + * @private + * @param {CanvasRenderingContext2D} ctx + */ + _setBrushStyles: function (ctx) { + ctx.strokeStyle = this.color; + ctx.lineWidth = this.width; + ctx.lineCap = this.strokeLineCap; + ctx.miterLimit = this.strokeMiterLimit; + ctx.lineJoin = this.strokeLineJoin; + ctx.setLineDash(this.strokeDashArray || []); + }, - /** - * Draws a straight line between last recorded point to current pointer - * Used for `shift` functionality - * - * @type boolean - * @default false - */ - drawStraightLine: false, + /** + * Sets the transformation on given context + * @param {RenderingContext2d} ctx context to render on + * @private + */ + _saveAndTransform: function(ctx) { + var v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + }, - /** - * The event modifier key that makes the brush draw a straight line. - * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. - * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} - */ - straightLineKey: 'shiftKey', + /** + * Sets brush shadow styles + * @private + */ + _setShadow: function() { + if (!this.shadow) { + return; + } - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.PencilBrush} Instance of a pencil brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this._points = []; - }, + var canvas = this.canvas, + shadow = this.shadow, + ctx = canvas.contextTop, + zoom = canvas.getZoom(); + if (canvas && canvas._isRetinaScaling()) { + zoom *= fabric.devicePixelRatio; + } - needsFullRender: function () { - return this.callSuper('needsFullRender') || this._hasStraightLine; - }, + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * zoom; + ctx.shadowOffsetX = shadow.offsetX * zoom; + ctx.shadowOffsetY = shadow.offsetY * zoom; + }, - /** - * Invoked inside on mouse down and mouse move - * @param {Object} pointer - */ - _drawSegment: function (ctx, p1, p2) { - var midPoint = p1.midPointFrom(p2); - ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); - return midPoint; - }, + needsFullRender: function() { + var color = new fabric.Color(this.color); + return color.getAlpha() < 1 || !!this.shadow; + }, - /** - * Invoked on mouse down - * @param {Object} pointer - */ - onMouseDown: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this.drawStraightLine = options.e[this.straightLineKey]; - this._prepareForDrawing(pointer); - // capture coordinates immediately - // this allows to draw dots (when movement never occurs) - this._captureDrawingPath(pointer); - this._render(); - }, + /** + * Removes brush shadow styles + * @private + */ + _resetShadow: function() { + var ctx = this.canvas.contextTop; - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer, options) { - if (!this.canvas._isMainEvent(options.e)) { - return; - } - this.drawStraightLine = options.e[this.straightLineKey]; - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - if (this._captureDrawingPath(pointer) && this._points.length > 1) { - if (this.needsFullRender()) { - // redraw curve - // clear top canvas - this.canvas.clearContext(this.canvas.contextTop); - this._render(); - } - else { - var points = this._points, length = points.length, ctx = this.canvas.contextTop; - // draw the curve update - this._saveAndTransform(ctx); - if (this.oldEnd) { - ctx.beginPath(); - ctx.moveTo(this.oldEnd.x, this.oldEnd.y); - } - this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); - ctx.stroke(); - ctx.restore(); - } - } - }, + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, - /** - * Invoked on mouse up - */ - onMouseUp: function(options) { - if (!this.canvas._isMainEvent(options.e)) { - return true; - } - this.drawStraightLine = false; - this.oldEnd = undefined; - this._finalizeAndAddPath(); - return false; - }, + /** + * Check is pointer is outside canvas boundaries + * @param {Object} pointer + * @private + */ + _isOutSideCanvas: function(pointer) { + return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); + } +}); - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _prepareForDrawing: function(pointer) { - var p = new fabric.Point(pointer.x, pointer.y); +(function() { + /** + * PencilBrush class + * @class fabric.PencilBrush + * @extends fabric.BaseBrush + */ + fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { - this._reset(); - this._addPoint(p); - this.canvas.contextTop.moveTo(p.x, p.y); - }, + /** + * Discard points that are less than `decimate` pixel distant from each other + * @type Number + * @default 0.4 + */ + decimate: 0.4, - /** - * @private - * @param {fabric.Point} point Point to be added to points array - */ - _addPoint: function(point) { - if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { - return false; - } - if (this.drawStraightLine && this._points.length > 1) { - this._hasStraightLine = true; - this._points.pop(); - } - this._points.push(point); - return true; - }, + /** + * Draws a straight line between last recorded point to current pointer + * Used for `shift` functionality + * + * @type boolean + * @default false + */ + drawStraightLine: false, - /** - * Clear points array and set contextTop canvas style. - * @private - */ - _reset: function() { - this._points = []; - this._setBrushStyles(this.canvas.contextTop); - this._setShadow(); - this._hasStraightLine = false; - }, + /** + * The event modifier key that makes the brush draw a straight line. + * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. + * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} + */ + straightLineKey: 'shiftKey', - /** - * @private - * @param {Object} pointer Actual mouse position related to the canvas. - */ - _captureDrawingPath: function(pointer) { - var pointerPoint = new fabric.Point(pointer.x, pointer.y); - return this._addPoint(pointerPoint); - }, + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.PencilBrush} Instance of a pencil brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this._points = []; + }, - /** - * Draw a smooth path on the topCanvas using quadraticCurveTo - * @private - * @param {CanvasRenderingContext2D} [ctx] - */ - _render: function(ctx) { - var i, len, - p1 = this._points[0], - p2 = this._points[1]; - ctx = ctx || this.canvas.contextTop; - this._saveAndTransform(ctx); - ctx.beginPath(); - //if we only have 2 points in the path and they are the same - //it means that the user only clicked the canvas without moving the mouse - //then we should be drawing a dot. A path isn't drawn between two identical dots - //that's why we set them apart a bit - if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { - var width = this.width / 1000; - p1 = new fabric.Point(p1.x, p1.y); - p2 = new fabric.Point(p2.x, p2.y); - p1.x -= width; - p2.x += width; - } - ctx.moveTo(p1.x, p1.y); - - for (i = 1, len = this._points.length; i < len; i++) { - // we pick the point between pi + 1 & pi + 2 as the - // end point and p1 as our control point. - this._drawSegment(ctx, p1, p2); - p1 = this._points[i]; - p2 = this._points[i + 1]; - } - // Draw last line as a straight line while - // we wait for the next point to be able to calculate - // the bezier control point - ctx.lineTo(p1.x, p1.y); - ctx.stroke(); - ctx.restore(); - }, + needsFullRender: function () { + return this.callSuper('needsFullRender') || this._hasStraightLine; + }, - /** - * Converts points to SVG path - * @param {Array} points Array of points - * @return {(string|number)[][]} SVG path commands - */ - convertPointsToSVGPath: function (points) { - var correction = this.width / 1000; - return fabric.util.getSmoothPathFromPoints(points, correction); - }, + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + _drawSegment: function (ctx, p1, p2) { + var midPoint = p1.midPointFrom(p2); + ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); + return midPoint; + }, - /** - * @private - * @param {(string|number)[][]} pathData SVG path commands - * @returns {boolean} - */ - _isEmptySVGPath: function (pathData) { - var pathString = fabric.util.joinPath(pathData); - return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; - }, + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this.drawStraightLine = options.e[this.straightLineKey]; + this._prepareForDrawing(pointer); + // capture coordinates immediately + // this allows to draw dots (when movement never occurs) + this._captureDrawingPath(pointer); + this._render(); + }, - /** - * Creates fabric.Path object to add on canvas - * @param {(string|number)[][]} pathData Path data - * @return {fabric.Path} Path to add on canvas - */ - createPath: function(pathData) { - var path = new fabric.Path(pathData, { - fill: null, - stroke: this.color, - strokeWidth: this.width, - strokeLineCap: this.strokeLineCap, - strokeMiterLimit: this.strokeMiterLimit, - strokeLineJoin: this.strokeLineJoin, - strokeDashArray: this.strokeDashArray, - }); - if (this.shadow) { - this.shadow.affectStroke = true; - path.shadow = new fabric.Shadow(this.shadow); + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this.drawStraightLine = options.e[this.straightLineKey]; + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this._captureDrawingPath(pointer) && this._points.length > 1) { + if (this.needsFullRender()) { + // redraw curve + // clear top canvas + this.canvas.clearContext(this.canvas.contextTop); + this._render(); } - - return path; - }, - - /** - * Decimate points array with the decimate value - */ - decimatePoints: function(points, distance) { - if (points.length <= 2) { - return points; - } - var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), - i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], - cDistance; - for (i = 1; i < l - 1; i++) { - cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); - if (cDistance >= adjustedDistance) { - lastPoint = points[i]; - newPoints.push(lastPoint); - } + else { + var points = this._points, length = points.length, ctx = this.canvas.contextTop; + // draw the curve update + this._saveAndTransform(ctx); + if (this.oldEnd) { + ctx.beginPath(); + ctx.moveTo(this.oldEnd.x, this.oldEnd.y); + } + this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); + ctx.stroke(); + ctx.restore(); } - /** - * Add the last point from the original line to the end of the array. - * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. - */ - newPoints.push(points[l]); - return newPoints; - }, + } + }, - /** - * On mouseup after drawing the path on contextTop canvas - * we use the points captured to create an new fabric path object - * and add it to the fabric canvas. - */ - _finalizeAndAddPath: function() { - var ctx = this.canvas.contextTop; - ctx.closePath(); - if (this.decimate) { - this._points = this.decimatePoints(this._points, this.decimate); - } - var pathData = this.convertPointsToSVGPath(this._points); - if (this._isEmptySVGPath(pathData)) { - // do not create 0 width/height paths, as they are - // rendered inconsistently across browsers - // Firefox 4, for example, renders a dot, - // whereas Chrome 10 renders nothing - this.canvas.requestRenderAll(); - return; - } + /** + * Invoked on mouse up + */ + onMouseUp: function(options) { + if (!this.canvas._isMainEvent(options.e)) { + return true; + } + this.drawStraightLine = false; + this.oldEnd = undefined; + this._finalizeAndAddPath(); + return false; + }, - var path = this.createPath(pathData); - this.canvas.clearContext(this.canvas.contextTop); - this.canvas.fire('before:path:created', { path: path }); - this.canvas.add(path); - this.canvas.requestRenderAll(); - path.setCoords(); - this._resetShadow(); + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _prepareForDrawing: function(pointer) { + + var p = new fabric.Point(pointer.x, pointer.y); + this._reset(); + this._addPoint(p); + this.canvas.contextTop.moveTo(p.x, p.y); + }, - // fire event 'path' created - this.canvas.fire('path:created', { path: path }); + /** + * @private + * @param {fabric.Point} point Point to be added to points array + */ + _addPoint: function(point) { + if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { + return false; } - }); - })(typeof exports !== 'undefined' ? exports : window); + if (this.drawStraightLine && this._points.length > 1) { + this._hasStraightLine = true; + this._points.pop(); + } + this._points.push(point); + return true; + }, - (function(global) { - var fabric = global.fabric; /** - * CircleBrush class - * @class fabric.CircleBrush + * Clear points array and set contextTop canvas style. + * @private */ - fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ { + _reset: function() { + this._points = []; + this._setBrushStyles(this.canvas.contextTop); + this._setShadow(); + this._hasStraightLine = false; + }, - /** - * Width of a brush - * @type Number - * @default - */ - width: 10, + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _captureDrawingPath: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y); + return this._addPoint(pointerPoint); + }, - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.CircleBrush} Instance of a circle brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this.points = []; - }, + /** + * Draw a smooth path on the topCanvas using quadraticCurveTo + * @private + * @param {CanvasRenderingContext2D} [ctx] + */ + _render: function(ctx) { + var i, len, + p1 = this._points[0], + p2 = this._points[1]; + ctx = ctx || this.canvas.contextTop; + this._saveAndTransform(ctx); + ctx.beginPath(); + //if we only have 2 points in the path and they are the same + //it means that the user only clicked the canvas without moving the mouse + //then we should be drawing a dot. A path isn't drawn between two identical dots + //that's why we set them apart a bit + if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { + var width = this.width / 1000; + p1 = new fabric.Point(p1.x, p1.y); + p2 = new fabric.Point(p2.x, p2.y); + p1.x -= width; + p2.x += width; + } + ctx.moveTo(p1.x, p1.y); + + for (i = 1, len = this._points.length; i < len; i++) { + // we pick the point between pi + 1 & pi + 2 as the + // end point and p1 as our control point. + this._drawSegment(ctx, p1, p2); + p1 = this._points[i]; + p2 = this._points[i + 1]; + } + // Draw last line as a straight line while + // we wait for the next point to be able to calculate + // the bezier control point + ctx.lineTo(p1.x, p1.y); + ctx.stroke(); + ctx.restore(); + }, - /** - * Invoked inside on mouse down and mouse move - * @param {Object} pointer - */ - drawDot: function(pointer) { - var point = this.addPoint(pointer), - ctx = this.canvas.contextTop; - this._saveAndTransform(ctx); - this.dot(ctx, point); - ctx.restore(); - }, + /** + * Converts points to SVG path + * @param {Array} points Array of points + * @return {(string|number)[][]} SVG path commands + */ + convertPointsToSVGPath: function (points) { + var correction = this.width / 1000; + return fabric.util.getSmoothPathFromPoints(points, correction); + }, - dot: function(ctx, point) { - ctx.fillStyle = point.fill; - ctx.beginPath(); - ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); - ctx.closePath(); - ctx.fill(); - }, + /** + * @private + * @param {(string|number)[][]} pathData SVG path commands + * @returns {boolean} + */ + _isEmptySVGPath: function (pathData) { + var pathString = fabric.util.joinPath(pathData); + return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; + }, + + /** + * Creates fabric.Path object to add on canvas + * @param {(string|number)[][]} pathData Path data + * @return {fabric.Path} Path to add on canvas + */ + createPath: function(pathData) { + var path = new fabric.Path(pathData, { + fill: null, + stroke: this.color, + strokeWidth: this.width, + strokeLineCap: this.strokeLineCap, + strokeMiterLimit: this.strokeMiterLimit, + strokeLineJoin: this.strokeLineJoin, + strokeDashArray: this.strokeDashArray, + }); + if (this.shadow) { + this.shadow.affectStroke = true; + path.shadow = new fabric.Shadow(this.shadow); + } - /** - * Invoked on mouse down - */ - onMouseDown: function(pointer) { - this.points.length = 0; - this.canvas.clearContext(this.canvas.contextTop); - this._setShadow(); - this.drawDot(pointer); - }, + return path; + }, - /** - * Render the full state of the brush - * @private - */ - _render: function() { - var ctx = this.canvas.contextTop, i, len, - points = this.points; - this._saveAndTransform(ctx); - for (i = 0, len = points.length; i < len; i++) { - this.dot(ctx, points[i]); + /** + * Decimate points array with the decimate value + */ + decimatePoints: function(points, distance) { + if (points.length <= 2) { + return points; + } + var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), + i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], + cDistance; + for (i = 1; i < l - 1; i++) { + cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); + if (cDistance >= adjustedDistance) { + lastPoint = points[i]; + newPoints.push(lastPoint); } - ctx.restore(); - }, - + } /** - * Invoked on mouse move - * @param {Object} pointer + * Add the last point from the original line to the end of the array. + * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. */ - onMouseMove: function(pointer) { - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - if (this.needsFullRender()) { - this.canvas.clearContext(this.canvas.contextTop); - this.addPoint(pointer); - this._render(); - } - else { - this.drawDot(pointer); - } - }, + newPoints.push(points[l]); + return newPoints; + }, - /** - * Invoked on mouse up - */ - onMouseUp: function() { - var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len; - this.canvas.renderOnAddRemove = false; + /** + * On mouseup after drawing the path on contextTop canvas + * we use the points captured to create an new fabric path object + * and add it to the fabric canvas. + */ + _finalizeAndAddPath: function() { + var ctx = this.canvas.contextTop; + ctx.closePath(); + if (this.decimate) { + this._points = this.decimatePoints(this._points, this.decimate); + } + var pathData = this.convertPointsToSVGPath(this._points); + if (this._isEmptySVGPath(pathData)) { + // do not create 0 width/height paths, as they are + // rendered inconsistently across browsers + // Firefox 4, for example, renders a dot, + // whereas Chrome 10 renders nothing + this.canvas.requestRenderAll(); + return; + } - var circles = []; + var path = this.createPath(pathData); + this.canvas.clearContext(this.canvas.contextTop); + this.canvas.fire('before:path:created', { path: path }); + this.canvas.add(path); + this.canvas.requestRenderAll(); + path.setCoords(); + this._resetShadow(); - for (i = 0, len = this.points.length; i < len; i++) { - var point = this.points[i], - circle = new fabric.Circle({ - radius: point.radius, - left: point.x, - top: point.y, - originX: 'center', - originY: 'center', - fill: point.fill - }); - this.shadow && (circle.shadow = new fabric.Shadow(this.shadow)); + // fire event 'path' created + this.canvas.fire('path:created', { path: path }); + } + }); +})(); - circles.push(circle); - } - var group = new fabric.Group(circles); - group.canvas = this.canvas; - this.canvas.fire('before:path:created', { path: group }); - this.canvas.add(group); - this.canvas.fire('path:created', { path: group }); +/** + * CircleBrush class + * @class fabric.CircleBrush + */ +fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ { - this.canvas.clearContext(this.canvas.contextTop); - this._resetShadow(); - this.canvas.renderOnAddRemove = originalRenderOnAddRemove; - this.canvas.requestRenderAll(); - }, + /** + * Width of a brush + * @type Number + * @default + */ + width: 10, - /** - * @param {Object} pointer - * @return {fabric.Point} Just added pointer point - */ - addPoint: function(pointer) { - var pointerPoint = new fabric.Point(pointer.x, pointer.y), + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.CircleBrush} Instance of a circle brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.points = []; + }, - circleRadius = fabric.util.getRandomInt( - Math.max(0, this.width - 20), this.width + 20) / 2, + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + drawDot: function(pointer) { + var point = this.addPoint(pointer), + ctx = this.canvas.contextTop; + this._saveAndTransform(ctx); + this.dot(ctx, point); + ctx.restore(); + }, + + dot: function(ctx, point) { + ctx.fillStyle = point.fill; + ctx.beginPath(); + ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); + ctx.closePath(); + ctx.fill(); + }, - circleColor = new fabric.Color(this.color) - .setAlpha(fabric.util.getRandomInt(0, 100) / 100) - .toRgba(); + /** + * Invoked on mouse down + */ + onMouseDown: function(pointer) { + this.points.length = 0; + this.canvas.clearContext(this.canvas.contextTop); + this._setShadow(); + this.drawDot(pointer); + }, - pointerPoint.radius = circleRadius; - pointerPoint.fill = circleColor; + /** + * Render the full state of the brush + * @private + */ + _render: function() { + var ctx = this.canvas.contextTop, i, len, + points = this.points; + this._saveAndTransform(ctx); + for (i = 0, len = points.length; i < len; i++) { + this.dot(ctx, points[i]); + } + ctx.restore(); + }, - this.points.push(pointerPoint); + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this.needsFullRender()) { + this.canvas.clearContext(this.canvas.contextTop); + this.addPoint(pointer); + this._render(); + } + else { + this.drawDot(pointer); + } + }, - return pointerPoint; - } - }); - })(typeof exports !== 'undefined' ? exports : window); + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len; + this.canvas.renderOnAddRemove = false; + + var circles = []; + + for (i = 0, len = this.points.length; i < len; i++) { + var point = this.points[i], + circle = new fabric.Circle({ + radius: point.radius, + left: point.x, + top: point.y, + originX: 'center', + originY: 'center', + fill: point.fill + }); - (function(global) { - var fabric = global.fabric; - /** - * SprayBrush class - * @class fabric.SprayBrush - */ - fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ { + this.shadow && (circle.shadow = new fabric.Shadow(this.shadow)); - /** - * Width of a spray - * @type Number - * @default - */ - width: 10, + circles.push(circle); + } + var group = new fabric.Group(circles); + group.canvas = this.canvas; - /** - * Density of a spray (number of dots per chunk) - * @type Number - * @default - */ - density: 20, + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); - /** - * Width of spray dots - * @type Number - * @default - */ - dotWidth: 1, + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, - /** - * Width variance of spray dots - * @type Number - * @default - */ - dotWidthVariance: 1, + /** + * @param {Object} pointer + * @return {fabric.Point} Just added pointer point + */ + addPoint: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y), - /** - * Whether opacity of a dot should be random - * @type Boolean - * @default - */ - randomOpacity: false, + circleRadius = fabric.util.getRandomInt( + Math.max(0, this.width - 20), this.width + 20) / 2, - /** - * Whether overlapping dots (rectangles) should be removed (for performance reasons) - * @type Boolean - * @default - */ - optimizeOverlapping: true, + circleColor = new fabric.Color(this.color) + .setAlpha(fabric.util.getRandomInt(0, 100) / 100) + .toRgba(); - /** - * Constructor - * @param {fabric.Canvas} canvas - * @return {fabric.SprayBrush} Instance of a spray brush - */ - initialize: function(canvas) { - this.canvas = canvas; - this.sprayChunks = []; - }, + pointerPoint.radius = circleRadius; + pointerPoint.fill = circleColor; - /** - * Invoked on mouse down - * @param {Object} pointer - */ - onMouseDown: function(pointer) { - this.sprayChunks.length = 0; - this.canvas.clearContext(this.canvas.contextTop); - this._setShadow(); + this.points.push(pointerPoint); - this.addSprayChunk(pointer); - this.render(this.sprayChunkPoints); - }, + return pointerPoint; + } +}); - /** - * Invoked on mouse move - * @param {Object} pointer - */ - onMouseMove: function(pointer) { - if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { - return; - } - this.addSprayChunk(pointer); - this.render(this.sprayChunkPoints); - }, - /** - * Invoked on mouse up - */ - onMouseUp: function() { - var originalRenderOnAddRemove = this.canvas.renderOnAddRemove; - this.canvas.renderOnAddRemove = false; - - var rects = []; - - for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { - var sprayChunk = this.sprayChunks[i]; - - for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) { - - var rect = new fabric.Rect({ - width: sprayChunk[j].width, - height: sprayChunk[j].width, - left: sprayChunk[j].x + 1, - top: sprayChunk[j].y + 1, - originX: 'center', - originY: 'center', - fill: this.color - }); - rects.push(rect); - } - } +/** + * SprayBrush class + * @class fabric.SprayBrush + */ +fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ { - if (this.optimizeOverlapping) { - rects = this._getOptimizedRects(rects); - } + /** + * Width of a spray + * @type Number + * @default + */ + width: 10, - var group = new fabric.Group(rects, { - objectCaching: true, - layout: 'fixed', - subTargetCheck: false, - interactive: false - }); - this.shadow && group.set('shadow', new fabric.Shadow(this.shadow)); - this.canvas.fire('before:path:created', { path: group }); - this.canvas.add(group); - this.canvas.fire('path:created', { path: group }); - - this.canvas.clearContext(this.canvas.contextTop); - this._resetShadow(); - this.canvas.renderOnAddRemove = originalRenderOnAddRemove; - this.canvas.requestRenderAll(); - }, + /** + * Density of a spray (number of dots per chunk) + * @type Number + * @default + */ + density: 20, - /** - * @private - * @param {Array} rects - */ - _getOptimizedRects: function(rects) { + /** + * Width of spray dots + * @type Number + * @default + */ + dotWidth: 1, - // avoid creating duplicate rects at the same coordinates - var uniqueRects = { }, key, i, len; + /** + * Width variance of spray dots + * @type Number + * @default + */ + dotWidthVariance: 1, - for (i = 0, len = rects.length; i < len; i++) { - key = rects[i].left + '' + rects[i].top; - if (!uniqueRects[key]) { - uniqueRects[key] = rects[i]; - } - } - var uniqueRectsArray = []; - for (key in uniqueRects) { - uniqueRectsArray.push(uniqueRects[key]); - } + /** + * Whether opacity of a dot should be random + * @type Boolean + * @default + */ + randomOpacity: false, - return uniqueRectsArray; - }, + /** + * Whether overlapping dots (rectangles) should be removed (for performance reasons) + * @type Boolean + * @default + */ + optimizeOverlapping: true, - /** - * Render new chunk of spray brush - */ - render: function(sprayChunk) { - var ctx = this.canvas.contextTop, i, len; - ctx.fillStyle = this.color; + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.SprayBrush} Instance of a spray brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.sprayChunks = []; + }, - this._saveAndTransform(ctx); + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer) { + this.sprayChunks.length = 0; + this.canvas.clearContext(this.canvas.contextTop); + this._setShadow(); - for (i = 0, len = sprayChunk.length; i < len; i++) { - var point = sprayChunk[i]; - if (typeof point.opacity !== 'undefined') { - ctx.globalAlpha = point.opacity; - } - ctx.fillRect(point.x, point.y, point.width, point.width); - } - ctx.restore(); - }, + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, - /** - * Render all spray chunks - */ - _render: function() { - var ctx = this.canvas.contextTop, i, ilen; - ctx.fillStyle = this.color; + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, - this._saveAndTransform(ctx); + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove; + this.canvas.renderOnAddRemove = false; - for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { - this.render(this.sprayChunks[i]); - } - ctx.restore(); - }, + var rects = []; - /** - * @param {Object} pointer - */ - addSprayChunk: function(pointer) { - this.sprayChunkPoints = []; + for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + var sprayChunk = this.sprayChunks[i]; - var x, y, width, radius = this.width / 2, i; + for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) { - for (i = 0; i < this.density; i++) { + var rect = new fabric.Rect({ + width: sprayChunk[j].width, + height: sprayChunk[j].width, + left: sprayChunk[j].x + 1, + top: sprayChunk[j].y + 1, + originX: 'center', + originY: 'center', + fill: this.color + }); + rects.push(rect); + } + } - x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius); - y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius); + if (this.optimizeOverlapping) { + rects = this._getOptimizedRects(rects); + } - if (this.dotWidthVariance) { - width = fabric.util.getRandomInt( - // bottom clamp width to 1 - Math.max(1, this.dotWidth - this.dotWidthVariance), - this.dotWidth + this.dotWidthVariance); - } - else { - width = this.dotWidth; - } + var group = new fabric.Group(rects); + this.shadow && group.set('shadow', new fabric.Shadow(this.shadow)); + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); - var point = new fabric.Point(x, y); - point.width = width; + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, - if (this.randomOpacity) { - point.opacity = fabric.util.getRandomInt(0, 100) / 100; - } + /** + * @private + * @param {Array} rects + */ + _getOptimizedRects: function(rects) { - this.sprayChunkPoints.push(point); - } + // avoid creating duplicate rects at the same coordinates + var uniqueRects = { }, key, i, len; - this.sprayChunks.push(this.sprayChunkPoints); + for (i = 0, len = rects.length; i < len; i++) { + key = rects[i].left + '' + rects[i].top; + if (!uniqueRects[key]) { + uniqueRects[key] = rects[i]; } - }); - })(typeof exports !== 'undefined' ? exports : window); + } + var uniqueRectsArray = []; + for (key in uniqueRects) { + uniqueRectsArray.push(uniqueRects[key]); + } - (function(global) { - var fabric = global.fabric; - /** - * PatternBrush class - * @class fabric.PatternBrush - * @extends fabric.BaseBrush - */ - fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ { + return uniqueRectsArray; + }, - getPatternSrc: function() { + /** + * Render new chunk of spray brush + */ + render: function(sprayChunk) { + var ctx = this.canvas.contextTop, i, len; + ctx.fillStyle = this.color; - var dotWidth = 20, - dotDistance = 5, - patternCanvas = fabric.util.createCanvasElement(), - patternCtx = patternCanvas.getContext('2d'); + this._saveAndTransform(ctx); - patternCanvas.width = patternCanvas.height = dotWidth + dotDistance; + for (i = 0, len = sprayChunk.length; i < len; i++) { + var point = sprayChunk[i]; + if (typeof point.opacity !== 'undefined') { + ctx.globalAlpha = point.opacity; + } + ctx.fillRect(point.x, point.y, point.width, point.width); + } + ctx.restore(); + }, - patternCtx.fillStyle = this.color; - patternCtx.beginPath(); - patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false); - patternCtx.closePath(); - patternCtx.fill(); + /** + * Render all spray chunks + */ + _render: function() { + var ctx = this.canvas.contextTop, i, ilen; + ctx.fillStyle = this.color; - return patternCanvas; - }, + this._saveAndTransform(ctx); - getPatternSrcFunction: function() { - return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"'); - }, + for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + this.render(this.sprayChunks[i]); + } + ctx.restore(); + }, - /** - * Creates "pattern" instance property - * @param {CanvasRenderingContext2D} ctx - */ - getPattern: function(ctx) { - return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat'); - }, + /** + * @param {Object} pointer + */ + addSprayChunk: function(pointer) { + this.sprayChunkPoints = []; - /** - * Sets brush styles - * @param {CanvasRenderingContext2D} ctx - */ - _setBrushStyles: function(ctx) { - this.callSuper('_setBrushStyles', ctx); - ctx.strokeStyle = this.getPattern(ctx); - }, + var x, y, width, radius = this.width / 2, i; - /** - * Creates path - */ - createPath: function(pathData) { - var path = this.callSuper('createPath', pathData), - topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2); - - path.stroke = new fabric.Pattern({ - source: this.source || this.getPatternSrcFunction(), - offsetX: -topLeft.x, - offsetY: -topLeft.y - }); - return path; - } - }); - })(typeof exports !== 'undefined' ? exports : window); + for (i = 0; i < this.density; i++) { - (function(global) { + x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius); + y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius); - var fabric = global.fabric, getPointer = fabric.util.getPointer, - degreesToRadians = fabric.util.degreesToRadians, - isTouchEvent = fabric.util.isTouchEvent; + if (this.dotWidthVariance) { + width = fabric.util.getRandomInt( + // bottom clamp width to 1 + Math.max(1, this.dotWidth - this.dotWidthVariance), + this.dotWidth + this.dotWidthVariance); + } + else { + width = this.dotWidth; + } - /** - * Canvas class - * @class fabric.Canvas - * @extends fabric.StaticCanvas - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas} - * @see {@link fabric.Canvas#initialize} for constructor definition - * - * @fires object:modified at the end of a transform or any change when statefull is true - * @fires object:rotating while an object is being rotated from the control - * @fires object:scaling while an object is being scaled by controls - * @fires object:moving while an object is being dragged - * @fires object:skewing while an object is being skewed from the controls - * - * @fires before:transform before a transform is is started - * @fires before:selection:cleared - * @fires selection:cleared - * @fires selection:updated - * @fires selection:created - * - * @fires path:created after a drawing operation ends and the path is added - * @fires mouse:down - * @fires mouse:move - * @fires mouse:up - * @fires mouse:down:before on mouse down, before the inner fabric logic runs - * @fires mouse:move:before on mouse move, before the inner fabric logic runs - * @fires mouse:up:before on mouse up, before the inner fabric logic runs - * @fires mouse:over - * @fires mouse:out - * @fires mouse:dblclick whenever a native dbl click event fires on the canvas. - * - * @fires dragover - * @fires dragenter - * @fires dragleave - * @fires drop:before before drop event. same native event. This is added to handle edge cases - * @fires drop - * @fires after:render at the end of the render process, receives the context in the callback - * @fires before:render at start the render process, receives the context in the callback - * - * @fires contextmenu:before - * @fires contextmenu - * @example - * let handler; - * targets.forEach(target => { - * target.on('contextmenu:before', opt => { - * // decide which target should handle the event before canvas hijacks it - * if (someCaseHappens && opt.targets.includes(target)) { - * handler = target; - * } - * }); - * target.on('contextmenu', opt => { - * // do something fantastic - * }); - * }); - * canvas.on('contextmenu', opt => { - * if (!handler) { - * // no one takes responsibility, it's always left to me - * // let's show them how it's done! - * } - * }); - * - */ - fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { + var point = new fabric.Point(x, y); + point.width = width; - /** - * Constructor - * @param {HTMLElement | String} el <canvas> element to initialize instance on - * @param {Object} [options] Options object - * @return {Object} thisArg - */ - initialize: function(el, options) { - options || (options = { }); - this.renderAndResetBound = this.renderAndReset.bind(this); - this.requestRenderAllBound = this.requestRenderAll.bind(this); - this._initStatic(el, options); - this._initInteractive(); - this._createCacheCanvas(); - }, + if (this.randomOpacity) { + point.opacity = fabric.util.getRandomInt(0, 100) / 100; + } - /** - * When true, objects can be transformed by one side (unproportionally) - * when dragged on the corners that normally would not do that. - * @type Boolean - * @default - * @since fabric 4.0 // changed name and default value - */ - uniformScaling: true, + this.sprayChunkPoints.push(point); + } - /** - * Indicates which key switches uniform scaling. - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled. - * totally wrong named. this sounds like `uniform scaling` - * if Canvas.uniformScaling is true, pressing this will set it to false - * and viceversa. - * @since 1.6.2 - * @type String - * @default - */ - uniScaleKey: 'shiftKey', + this.sprayChunks.push(this.sprayChunkPoints); + } +}); - /** - * When true, objects use center point as the origin of scale transformation. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredScaling: false, - /** - * When true, objects use center point as the origin of rotate transformation. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredRotation: false, +/** + * PatternBrush class + * @class fabric.PatternBrush + * @extends fabric.BaseBrush + */ +fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ { - /** - * Indicates which key enable centered Transform - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled feature disabled. - * @since 1.6.2 - * @type String - * @default - */ - centeredKey: 'altKey', + getPatternSrc: function() { - /** - * Indicates which key enable alternate action on corner - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled feature disabled. - * @since 1.6.2 - * @type String - * @default - */ - altActionKey: 'shiftKey', + var dotWidth = 20, + dotDistance = 5, + patternCanvas = fabric.util.createCanvasElement(), + patternCtx = patternCanvas.getContext('2d'); - /** - * Indicates that canvas is interactive. This property should not be changed. - * @type Boolean - * @default - */ - interactive: true, + patternCanvas.width = patternCanvas.height = dotWidth + dotDistance; - /** - * Indicates whether group selection should be enabled - * @type Boolean - * @default - */ - selection: true, + patternCtx.fillStyle = this.color; + patternCtx.beginPath(); + patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false); + patternCtx.closePath(); + patternCtx.fill(); - /** - * Indicates which key or keys enable multiple click selection - * Pass value as a string or array of strings - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * If `null` or empty or containing any other string that is not a modifier key - * feature is disabled. - * @since 1.6.2 - * @type String|Array - * @default - */ - selectionKey: 'shiftKey', + return patternCanvas; + }, - /** - * Indicates which key enable alternative selection - * in case of target overlapping with active object - * values: 'altKey', 'shiftKey', 'ctrlKey'. - * For a series of reason that come from the general expectations on how - * things should work, this feature works only for preserveObjectStacking true. - * If `null` or 'none' or any other string that is not a modifier key - * feature is disabled. - * @since 1.6.5 - * @type null|String - * @default - */ - altSelectionKey: null, + getPatternSrcFunction: function() { + return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"'); + }, - /** - * Color of selection - * @type String - * @default - */ - selectionColor: 'rgba(100, 100, 255, 0.3)', // blue + /** + * Creates "pattern" instance property + * @param {CanvasRenderingContext2D} ctx + */ + getPattern: function(ctx) { + return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat'); + }, - /** - * Default dash array pattern - * If not empty the selection border is dashed - * @type Array - */ - selectionDashArray: [], + /** + * Sets brush styles + * @param {CanvasRenderingContext2D} ctx + */ + _setBrushStyles: function(ctx) { + this.callSuper('_setBrushStyles', ctx); + ctx.strokeStyle = this.getPattern(ctx); + }, - /** - * Color of the border of selection (usually slightly darker than color of selection itself) - * @type String - * @default - */ - selectionBorderColor: 'rgba(255, 255, 255, 0.3)', + /** + * Creates path + */ + createPath: function(pathData) { + var path = this.callSuper('createPath', pathData), + topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2); + + path.stroke = new fabric.Pattern({ + source: this.source || this.getPatternSrcFunction(), + offsetX: -topLeft.x, + offsetY: -topLeft.y + }); + return path; + } +}); - /** - * Width of a line used in object/group selection - * @type Number - * @default - */ - selectionLineWidth: 1, - /** - * Select only shapes that are fully contained in the dragged selection rectangle. - * @type Boolean - * @default - */ - selectionFullyContained: false, +(function() { - /** - * Default cursor value used when hovering over an object on canvas - * @type String - * @default - */ - hoverCursor: 'move', + var getPointer = fabric.util.getPointer, + degreesToRadians = fabric.util.degreesToRadians, + isTouchEvent = fabric.util.isTouchEvent; - /** - * Default cursor value used when moving an object on canvas - * @type String - * @default - */ - moveCursor: 'move', + /** + * Canvas class + * @class fabric.Canvas + * @extends fabric.StaticCanvas + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas} + * @see {@link fabric.Canvas#initialize} for constructor definition + * + * @fires object:modified at the end of a transform or any change when statefull is true + * @fires object:rotating while an object is being rotated from the control + * @fires object:scaling while an object is being scaled by controls + * @fires object:moving while an object is being dragged + * @fires object:skewing while an object is being skewed from the controls + * + * @fires before:transform before a transform is is started + * @fires before:selection:cleared + * @fires selection:cleared + * @fires selection:updated + * @fires selection:created + * + * @fires path:created after a drawing operation ends and the path is added + * @fires mouse:down + * @fires mouse:move + * @fires mouse:up + * @fires mouse:down:before on mouse down, before the inner fabric logic runs + * @fires mouse:move:before on mouse move, before the inner fabric logic runs + * @fires mouse:up:before on mouse up, before the inner fabric logic runs + * @fires mouse:over + * @fires mouse:out + * @fires mouse:dblclick whenever a native dbl click event fires on the canvas. + * + * @fires dragover + * @fires dragenter + * @fires dragleave + * @fires drop:before before drop event. same native event. This is added to handle edge cases + * @fires drop + * @fires after:render at the end of the render process, receives the context in the callback + * @fires before:render at start the render process, receives the context in the callback + * + */ + fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { - /** - * Default cursor value used for the entire canvas - * @type String - * @default - */ - defaultCursor: 'default', + /** + * Constructor + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + this._initInteractive(); + this._createCacheCanvas(); + }, - /** - * Cursor value used during free drawing - * @type String - * @default - */ - freeDrawingCursor: 'crosshair', + /** + * When true, objects can be transformed by one side (unproportionally) + * when dragged on the corners that normally would not do that. + * @type Boolean + * @default + * @since fabric 4.0 // changed name and default value + */ + uniformScaling: true, - /** - * Cursor value used for disabled elements ( corners with disabled action ) - * @type String - * @since 2.0.0 - * @default - */ - notAllowedCursor: 'not-allowed', + /** + * Indicates which key switches uniform scaling. + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled. + * totally wrong named. this sounds like `uniform scaling` + * if Canvas.uniformScaling is true, pressing this will set it to false + * and viceversa. + * @since 1.6.2 + * @type String + * @default + */ + uniScaleKey: 'shiftKey', - /** - * Default element class that's given to wrapper (div) element of canvas - * @type String - * @default - */ - containerClass: 'canvas-container', + /** + * When true, objects use center point as the origin of scale transformation. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredScaling: false, - /** - * When true, object detection happens on per-pixel basis rather than on per-bounding-box - * @type Boolean - * @default - */ - perPixelTargetFind: false, + /** + * When true, objects use center point as the origin of rotate transformation. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredRotation: false, - /** - * Number of pixels around target pixel to tolerate (consider active) during object detection - * @type Number - * @default - */ - targetFindTolerance: 0, + /** + * Indicates which key enable centered Transform + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + centeredKey: 'altKey', - /** - * When true, target detection is skipped. Target detection will return always undefined. - * click selection won't work anymore, events will fire with no targets. - * if something is selected before setting it to true, it will be deselected at the first click. - * area selection will still work. check the `selection` property too. - * if you deactivate both, you should look into staticCanvas. - * @type Boolean - * @default - */ - skipTargetFind: false, + /** + * Indicates which key enable alternate action on corner + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + altActionKey: 'shiftKey', - /** - * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. - * After mousedown, mousemove creates a shape, - * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. - * @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing} - * @type Boolean - * @default - */ - isDrawingMode: false, + /** + * Indicates that canvas is interactive. This property should not be changed. + * @type Boolean + * @default + */ + interactive: true, - /** - * Indicates whether objects should remain in current stack position when selected. - * When false objects are brought to top and rendered as part of the selection group - * @type Boolean - * @default - */ - preserveObjectStacking: false, + /** + * Indicates whether group selection should be enabled + * @type Boolean + * @default + */ + selection: true, - /** - * Indicates the angle that an object will lock to while rotating. - * @type Number - * @since 1.6.7 - * @default - */ - snapAngle: 0, + /** + * Indicates which key or keys enable multiple click selection + * Pass value as a string or array of strings + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or empty or containing any other string that is not a modifier key + * feature is disabled. + * @since 1.6.2 + * @type String|Array + * @default + */ + selectionKey: 'shiftKey', - /** - * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. - * When `null`, the snapThreshold will default to the snapAngle. - * @type null|Number - * @since 1.6.7 - * @default - */ - snapThreshold: null, + /** + * Indicates which key enable alternative selection + * in case of target overlapping with active object + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * For a series of reason that come from the general expectations on how + * things should work, this feature works only for preserveObjectStacking true. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled. + * @since 1.6.5 + * @type null|String + * @default + */ + altSelectionKey: null, - /** - * Indicates if the right click on canvas can output the context menu or not - * @type Boolean - * @since 1.6.5 - * @default - */ - stopContextMenu: false, + /** + * Color of selection + * @type String + * @default + */ + selectionColor: 'rgba(100, 100, 255, 0.3)', // blue - /** - * Indicates if the canvas can fire right click events - * @type Boolean - * @since 1.6.5 - * @default - */ - fireRightClick: false, + /** + * Default dash array pattern + * If not empty the selection border is dashed + * @type Array + */ + selectionDashArray: [], - /** - * Indicates if the canvas can fire middle click events - * @type Boolean - * @since 1.7.8 - * @default - */ - fireMiddleClick: false, + /** + * Color of the border of selection (usually slightly darker than color of selection itself) + * @type String + * @default + */ + selectionBorderColor: 'rgba(255, 255, 255, 0.3)', - /** - * Keep track of the subTargets for Mouse Events - * @type fabric.Object[] - */ - targets: [], + /** + * Width of a line used in object/group selection + * @type Number + * @default + */ + selectionLineWidth: 1, - /** - * When the option is enabled, PointerEvent is used instead of MouseEvent. - * @type Boolean - * @default - */ - enablePointerEvents: false, + /** + * Select only shapes that are fully contained in the dragged selection rectangle. + * @type Boolean + * @default + */ + selectionFullyContained: false, - /** - * Keep track of the hovered target - * @type fabric.Object - * @private - */ - _hoveredTarget: null, + /** + * Default cursor value used when hovering over an object on canvas + * @type String + * @default + */ + hoverCursor: 'move', - /** - * hold the list of nested targets hovered - * @type fabric.Object[] - * @private - */ - _hoveredTargets: [], + /** + * Default cursor value used when moving an object on canvas + * @type String + * @default + */ + moveCursor: 'move', - /** - * hold the list of objects to render - * @type fabric.Object[] - * @private - */ - _objectsToRender: undefined, + /** + * Default cursor value used for the entire canvas + * @type String + * @default + */ + defaultCursor: 'default', - /** - * @private - */ - _initInteractive: function() { - this._currentTransform = null; - this._groupSelector = null; - this._initWrapperElement(); - this._createUpperCanvas(); - this._initEventListeners(); + /** + * Cursor value used during free drawing + * @type String + * @default + */ + freeDrawingCursor: 'crosshair', - this._initRetinaScaling(); + /** + * Cursor value used for disabled elements ( corners with disabled action ) + * @type String + * @since 2.0.0 + * @default + */ + notAllowedCursor: 'not-allowed', - this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); + /** + * Default element class that's given to wrapper (div) element of canvas + * @type String + * @default + */ + containerClass: 'canvas-container', - this.calcOffset(); - }, + /** + * When true, object detection happens on per-pixel basis rather than on per-bounding-box + * @type Boolean + * @default + */ + perPixelTargetFind: false, - /** - * @private - * @param {fabric.Object} obj Object that was added - */ - _onObjectAdded: function (obj) { - this._objectsToRender = undefined; - this.callSuper('_onObjectAdded', obj); - }, + /** + * Number of pixels around target pixel to tolerate (consider active) during object detection + * @type Number + * @default + */ + targetFindTolerance: 0, - /** - * @private - * @param {fabric.Object} obj Object that was removed - */ - _onObjectRemoved: function (obj) { - this._objectsToRender = undefined; - // removing active object should fire "selection:cleared" events - if (obj === this._activeObject) { - this.fire('before:selection:cleared', { target: obj }); - this._discardActiveObject(); - this.fire('selection:cleared', { target: obj }); - obj.fire('deselected'); - } - if (obj === this._hoveredTarget) { - this._hoveredTarget = null; - this._hoveredTargets = []; - } - this.callSuper('_onObjectRemoved', obj); - }, + /** + * When true, target detection is skipped. Target detection will return always undefined. + * click selection won't work anymore, events will fire with no targets. + * if something is selected before setting it to true, it will be deselected at the first click. + * area selection will still work. check the `selection` property too. + * if you deactivate both, you should look into staticCanvas. + * @type Boolean + * @default + */ + skipTargetFind: false, - /** - * Divides objects in two groups, one to render immediately - * and one to render as activeGroup. - * @return {Array} objects to render immediately and pushes the other in the activeGroup. - */ - _chooseObjectsToRender: function() { - var activeObjects = this.getActiveObjects(), - object, objsToRender, activeGroupObjects; - - if (!this.preserveObjectStacking && activeObjects.length > 1) { - objsToRender = []; - activeGroupObjects = []; - for (var i = 0, length = this._objects.length; i < length; i++) { - object = this._objects[i]; - if (activeObjects.indexOf(object) === -1 ) { - objsToRender.push(object); - } - else { - activeGroupObjects.push(object); - } - } - if (activeObjects.length > 1) { - this._activeObject._objects = activeGroupObjects; - } - objsToRender.push.apply(objsToRender, activeGroupObjects); - } - // in case a single object is selected render it's entire parent above the other objects - else if (!this.preserveObjectStacking && activeObjects.length === 1) { - var target = activeObjects[0], ancestors = target.getAncestors(true); - var topAncestor = ancestors.length === 0 ? target : ancestors.pop(); - objsToRender = this._objects.slice(); - var index = objsToRender.indexOf(topAncestor); - index > -1 && objsToRender.splice(objsToRender.indexOf(topAncestor), 1); - objsToRender.push(topAncestor); - } - else { - objsToRender = this._objects; - } - return objsToRender; - }, + /** + * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. + * After mousedown, mousemove creates a shape, + * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. + * @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing} + * @type Boolean + * @default + */ + isDrawingMode: false, - /** - * Renders both the top canvas and the secondary container canvas. - * @return {fabric.Canvas} instance - * @chainable - */ - renderAll: function () { - if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { - this.clearContext(this.contextTop); - this.contextTopDirty = false; - } - if (this.hasLostContext) { - this.renderTopLayer(this.contextTop); - this.hasLostContext = false; - } - var canvasToDrawOn = this.contextContainer; - !this._objectsToRender && (this._objectsToRender = this._chooseObjectsToRender()); - this.renderCanvas(canvasToDrawOn, this._objectsToRender); - return this; - }, + /** + * Indicates whether objects should remain in current stack position when selected. + * When false objects are brought to top and rendered as part of the selection group + * @type Boolean + * @default + */ + preserveObjectStacking: false, - renderTopLayer: function(ctx) { - ctx.save(); - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this.freeDrawingBrush && this.freeDrawingBrush._render(); - this.contextTopDirty = true; - } - // we render the top context - last object - if (this.selection && this._groupSelector) { - this._drawSelection(ctx); - this.contextTopDirty = true; - } - ctx.restore(); - }, + /** + * Indicates the angle that an object will lock to while rotating. + * @type Number + * @since 1.6.7 + * @default + */ + snapAngle: 0, - /** - * Method to render only the top canvas. - * Also used to render the group selection box. - * @return {fabric.Canvas} thisArg - * @chainable - */ - renderTop: function () { - var ctx = this.contextTop; - this.clearContext(ctx); - this.renderTopLayer(ctx); - this.fire('after:render'); - return this; - }, + /** + * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. + * When `null`, the snapThreshold will default to the snapAngle. + * @type null|Number + * @since 1.6.7 + * @default + */ + snapThreshold: null, - /** - * @private - */ - _normalizePointer: function (object, pointer) { - var m = object.calcTransformMatrix(), - invertedM = fabric.util.invertTransform(m), - vptPointer = this.restorePointerVpt(pointer); - return fabric.util.transformPoint(vptPointer, invertedM); - }, + /** + * Indicates if the right click on canvas can output the context menu or not + * @type Boolean + * @since 1.6.5 + * @default + */ + stopContextMenu: false, - /** - * Returns true if object is transparent at a certain location - * @param {fabric.Object} target Object to check - * @param {Number} x Left coordinate - * @param {Number} y Top coordinate - * @return {Boolean} - */ - isTargetTransparent: function (target, x, y) { - // in case the target is the activeObject, we cannot execute this optimization - // because we need to draw controls too. - if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { - var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), - targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), - targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); + /** + * Indicates if the canvas can fire right click events + * @type Boolean + * @since 1.6.5 + * @default + */ + fireRightClick: false, - var isTransparent = fabric.util.isTransparent( - target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); + /** + * Indicates if the canvas can fire middle click events + * @type Boolean + * @since 1.7.8 + * @default + */ + fireMiddleClick: false, - return isTransparent; - } + /** + * Keep track of the subTargets for Mouse Events + * @type fabric.Object[] + */ + targets: [], - var ctx = this.contextCache, - originalColor = target.selectionBackgroundColor, v = this.viewportTransform; + /** + * When the option is enabled, PointerEvent is used instead of MouseEvent. + * @type Boolean + * @default + */ + enablePointerEvents: false, - target.selectionBackgroundColor = ''; + /** + * Keep track of the hovered target + * @type fabric.Object + * @private + */ + _hoveredTarget: null, - this.clearContext(ctx); + /** + * hold the list of nested targets hovered + * @type fabric.Object[] + * @private + */ + _hoveredTargets: [], - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - target.render(ctx); - ctx.restore(); + /** + * @private + */ + _initInteractive: function() { + this._currentTransform = null; + this._groupSelector = null; + this._initWrapperElement(); + this._createUpperCanvas(); + this._initEventListeners(); - target.selectionBackgroundColor = originalColor; + this._initRetinaScaling(); - var isTransparent = fabric.util.isTransparent( - ctx, x, y, this.targetFindTolerance); + this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); - return isTransparent; - }, + this.calcOffset(); + }, - /** - * takes an event and determines if selection key has been pressed - * @private - * @param {Event} e Event object - */ - _isSelectionKeyPressed: function(e) { - var selectionKeyPressed = false; + /** + * Divides objects in two groups, one to render immediately + * and one to render as activeGroup. + * @return {Array} objects to render immediately and pushes the other in the activeGroup. + */ + _chooseObjectsToRender: function() { + var activeObjects = this.getActiveObjects(), + object, objsToRender, activeGroupObjects; - if (Array.isArray(this.selectionKey)) { - selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); + if (activeObjects.length > 0 && !this.preserveObjectStacking) { + objsToRender = []; + activeGroupObjects = []; + for (var i = 0, length = this._objects.length; i < length; i++) { + object = this._objects[i]; + if (activeObjects.indexOf(object) === -1 ) { + objsToRender.push(object); + } + else { + activeGroupObjects.push(object); + } } - else { - selectionKeyPressed = e[this.selectionKey]; + if (activeObjects.length > 1) { + this._activeObject._objects = activeGroupObjects; } + objsToRender.push.apply(objsToRender, activeGroupObjects); + } + else { + objsToRender = this._objects; + } + return objsToRender; + }, - return selectionKeyPressed; - }, - - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - */ - _shouldClearSelection: function (e, target) { - var activeObjects = this.getActiveObjects(), - activeObject = this._activeObject; - - return ( - !target - || - (target && - activeObject && - activeObjects.length > 1 && - activeObjects.indexOf(target) === -1 && - activeObject !== target && - !this._isSelectionKeyPressed(e)) - || - (target && !target.evented) - || - (target && - !target.selectable && - activeObject && - activeObject !== target) - ); - }, + /** + * Renders both the top canvas and the secondary container canvas. + * @return {fabric.Canvas} instance + * @chainable + */ + renderAll: function () { + if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { + this.clearContext(this.contextTop); + this.contextTopDirty = false; + } + if (this.hasLostContext) { + this.renderTopLayer(this.contextTop); + this.hasLostContext = false; + } + var canvasToDrawOn = this.contextContainer; + this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender()); + return this; + }, - /** - * centeredScaling from object can't override centeredScaling from canvas. - * this should be fixed, since object setting should take precedence over canvas. - * also this should be something that will be migrated in the control properties. - * as ability to define the origin of the transformation that the control provide. - * @private - * @param {fabric.Object} target - * @param {String} action - * @param {Boolean} altKey - */ - _shouldCenterTransform: function (target, action, altKey) { - if (!target) { - return; - } + renderTopLayer: function(ctx) { + ctx.save(); + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._render(); + this.contextTopDirty = true; + } + // we render the top context - last object + if (this.selection && this._groupSelector) { + this._drawSelection(ctx); + this.contextTopDirty = true; + } + ctx.restore(); + }, - var centerTransform; + /** + * Method to render only the top canvas. + * Also used to render the group selection box. + * @return {fabric.Canvas} thisArg + * @chainable + */ + renderTop: function () { + var ctx = this.contextTop; + this.clearContext(ctx); + this.renderTopLayer(ctx); + this.fire('after:render'); + return this; + }, - if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { - centerTransform = this.centeredScaling || target.centeredScaling; - } - else if (action === 'rotate') { - centerTransform = this.centeredRotation || target.centeredRotation; - } + /** + * @private + */ + _normalizePointer: function (object, pointer) { + var m = object.calcTransformMatrix(), + invertedM = fabric.util.invertTransform(m), + vptPointer = this.restorePointerVpt(pointer); + return fabric.util.transformPoint(vptPointer, invertedM); + }, - return centerTransform ? !altKey : altKey; - }, + /** + * Returns true if object is transparent at a certain location + * @param {fabric.Object} target Object to check + * @param {Number} x Left coordinate + * @param {Number} y Top coordinate + * @return {Boolean} + */ + isTargetTransparent: function (target, x, y) { + // in case the target is the activeObject, we cannot execute this optimization + // because we need to draw controls too. + if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { + var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), + targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), + targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); - /** - * should disappear before release 4.0 - * @private - */ - _getOriginFromCorner: function(target, corner) { - var origin = { - x: target.originX, - y: target.originY - }; + var isTransparent = fabric.util.isTransparent( + target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); - if (corner === 'ml' || corner === 'tl' || corner === 'bl') { - origin.x = 'right'; - } - else if (corner === 'mr' || corner === 'tr' || corner === 'br') { - origin.x = 'left'; - } + return isTransparent; + } - if (corner === 'tl' || corner === 'mt' || corner === 'tr') { - origin.y = 'bottom'; - } - else if (corner === 'bl' || corner === 'mb' || corner === 'br') { - origin.y = 'top'; - } - return origin; - }, + var ctx = this.contextCache, + originalColor = target.selectionBackgroundColor, v = this.viewportTransform; - /** - * @private - * @param {Boolean} alreadySelected true if target is already selected - * @param {String} corner a string representing the corner ml, mr, tl ... - * @param {Event} e Event object - * @param {fabric.Object} [target] inserted back to help overriding. Unused - */ - _getActionFromCorner: function(alreadySelected, corner, e, target) { - if (!corner || !alreadySelected) { - return 'drag'; - } - var control = target.controls[corner]; - return control.getActionName(e, control, target); - }, + target.selectionBackgroundColor = ''; - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - */ - _setupCurrentTransform: function (e, target, alreadySelected) { - if (!target) { - return; - } - var pointer = this.getPointer(e); - if (target.group) { - // transform pointer to target's containing coordinate plane - pointer = fabric.util.transformPoint(pointer, fabric.util.invertTransform(target.group.calcTransformMatrix())); - } - var corner = target.__corner, - control = target.controls[corner], - actionHandler = (alreadySelected && corner) ? - control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, - action = this._getActionFromCorner(alreadySelected, corner, e, target), - origin = this._getOriginFromCorner(target, corner), - altKey = e[this.centeredKey], - /** - * relative to target's containing coordinate plane - * both agree on every point - **/ - transform = { - target: target, - action: action, - actionHandler: actionHandler, - corner: corner, - scaleX: target.scaleX, - scaleY: target.scaleY, - skewX: target.skewX, - skewY: target.skewY, - offsetX: pointer.x - target.left, - offsetY: pointer.y - target.top, - originX: origin.x, - originY: origin.y, - ex: pointer.x, - ey: pointer.y, - lastX: pointer.x, - lastY: pointer.y, - theta: degreesToRadians(target.angle), - width: target.width * target.scaleX, - shiftKey: e.shiftKey, - altKey: altKey, - original: fabric.util.saveObjectTransform(target), - }; - - if (this._shouldCenterTransform(target, action, altKey)) { - transform.originX = 'center'; - transform.originY = 'center'; - } - transform.original.originX = origin.x; - transform.original.originY = origin.y; - this._currentTransform = transform; - this._beforeTransform(e); - }, + this.clearContext(ctx); - /** - * Set the cursor type of the canvas element - * @param {String} value Cursor type of the canvas element. - * @see http://www.w3.org/TR/css3-ui/#cursor - */ - setCursor: function (value) { - this.upperCanvasEl.style.cursor = value; - }, + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + target.render(ctx); + ctx.restore(); - /** - * @private - * @param {CanvasRenderingContext2D} ctx to draw the selection on - */ - _drawSelection: function (ctx) { - var selector = this._groupSelector, - viewportStart = new fabric.Point(selector.ex, selector.ey), - start = fabric.util.transformPoint(viewportStart, this.viewportTransform), - viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), - extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), - minX = Math.min(start.x, extent.x), - minY = Math.min(start.y, extent.y), - maxX = Math.max(start.x, extent.x), - maxY = Math.max(start.y, extent.y), - strokeOffset = this.selectionLineWidth / 2; - - if (this.selectionColor) { - ctx.fillStyle = this.selectionColor; - ctx.fillRect(minX, minY, maxX - minX, maxY - minY); - } + target.selectionBackgroundColor = originalColor; - if (!this.selectionLineWidth || !this.selectionBorderColor) { - return; - } - ctx.lineWidth = this.selectionLineWidth; - ctx.strokeStyle = this.selectionBorderColor; + var isTransparent = fabric.util.isTransparent( + ctx, x, y, this.targetFindTolerance); - minX += strokeOffset; - minY += strokeOffset; - maxX -= strokeOffset; - maxY -= strokeOffset; - // selection border - fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); - ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); - }, + return isTransparent; + }, - /** - * Method that determines what object we are clicking on - * the skipGroup parameter is for internal use, is needed for shift+click action - * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target - * or the outside part of the corner. - * @param {Event} e mouse event - * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through - * @return {fabric.Object} the target found - */ - findTarget: function (e, skipGroup) { - if (this.skipTargetFind) { - return; - } + /** + * takes an event and determines if selection key has been pressed + * @private + * @param {Event} e Event object + */ + _isSelectionKeyPressed: function(e) { + var selectionKeyPressed = false; - var ignoreZoom = true, - pointer = this.getPointer(e, ignoreZoom), - activeObject = this._activeObject, - aObjects = this.getActiveObjects(), - activeTarget, activeTargetSubs, - isTouch = isTouchEvent(e), - shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; + if (Object.prototype.toString.call(this.selectionKey) === '[object Array]') { + selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); + } + else { + selectionKeyPressed = e[this.selectionKey]; + } - // first check current group (if one exists) - // active group does not check sub targets like normal groups. - // if active group just exits. - this.targets = []; + return selectionKeyPressed; + }, - // if we hit the corner of an activeObject, let's return that. - if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { - return activeObject; - } - if (aObjects.length > 1 && activeObject.type === 'activeSelection' - && !skipGroup && this.searchPossibleTargets([activeObject], pointer)) { + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _shouldClearSelection: function (e, target) { + var activeObjects = this.getActiveObjects(), + activeObject = this._activeObject; + + return ( + !target + || + (target && + activeObject && + activeObjects.length > 1 && + activeObjects.indexOf(target) === -1 && + activeObject !== target && + !this._isSelectionKeyPressed(e)) + || + (target && !target.evented) + || + (target && + !target.selectable && + activeObject && + activeObject !== target) + ); + }, + + /** + * centeredScaling from object can't override centeredScaling from canvas. + * this should be fixed, since object setting should take precedence over canvas. + * also this should be something that will be migrated in the control properties. + * as ability to define the origin of the transformation that the control provide. + * @private + * @param {fabric.Object} target + * @param {String} action + * @param {Boolean} altKey + */ + _shouldCenterTransform: function (target, action, altKey) { + if (!target) { + return; + } + + var centerTransform; + + if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { + centerTransform = this.centeredScaling || target.centeredScaling; + } + else if (action === 'rotate') { + centerTransform = this.centeredRotation || target.centeredRotation; + } + + return centerTransform ? !altKey : altKey; + }, + + /** + * should disappear before release 4.0 + * @private + */ + _getOriginFromCorner: function(target, corner) { + var origin = { + x: target.originX, + y: target.originY + }; + + if (corner === 'ml' || corner === 'tl' || corner === 'bl') { + origin.x = 'right'; + } + else if (corner === 'mr' || corner === 'tr' || corner === 'br') { + origin.x = 'left'; + } + + if (corner === 'tl' || corner === 'mt' || corner === 'tr') { + origin.y = 'bottom'; + } + else if (corner === 'bl' || corner === 'mb' || corner === 'br') { + origin.y = 'top'; + } + return origin; + }, + + /** + * @private + * @param {Boolean} alreadySelected true if target is already selected + * @param {String} corner a string representing the corner ml, mr, tl ... + * @param {Event} e Event object + * @param {fabric.Object} [target] inserted back to help overriding. Unused + */ + _getActionFromCorner: function(alreadySelected, corner, e, target) { + if (!corner || !alreadySelected) { + return 'drag'; + } + var control = target.controls[corner]; + return control.getActionName(e, control, target); + }, + + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _setupCurrentTransform: function (e, target, alreadySelected) { + if (!target) { + return; + } + + var pointer = this.getPointer(e), corner = target.__corner, + control = target.controls[corner], + actionHandler = (alreadySelected && corner) ? + control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, + action = this._getActionFromCorner(alreadySelected, corner, e, target), + origin = this._getOriginFromCorner(target, corner), + altKey = e[this.centeredKey], + transform = { + target: target, + action: action, + actionHandler: actionHandler, + corner: corner, + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + // used by transation + offsetX: pointer.x - target.left, + offsetY: pointer.y - target.top, + originX: origin.x, + originY: origin.y, + ex: pointer.x, + ey: pointer.y, + lastX: pointer.x, + lastY: pointer.y, + // unsure they are useful anymore. + // left: target.left, + // top: target.top, + theta: degreesToRadians(target.angle), + // end of unsure + width: target.width * target.scaleX, + shiftKey: e.shiftKey, + altKey: altKey, + original: fabric.util.saveObjectTransform(target), + }; + + if (this._shouldCenterTransform(target, action, altKey)) { + transform.originX = 'center'; + transform.originY = 'center'; + } + transform.original.originX = origin.x; + transform.original.originY = origin.y; + this._currentTransform = transform; + this._beforeTransform(e); + }, + + /** + * Set the cursor type of the canvas element + * @param {String} value Cursor type of the canvas element. + * @see http://www.w3.org/TR/css3-ui/#cursor + */ + setCursor: function (value) { + this.upperCanvasEl.style.cursor = value; + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx to draw the selection on + */ + _drawSelection: function (ctx) { + var selector = this._groupSelector, + viewportStart = new fabric.Point(selector.ex, selector.ey), + start = fabric.util.transformPoint(viewportStart, this.viewportTransform), + viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), + extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), + minX = Math.min(start.x, extent.x), + minY = Math.min(start.y, extent.y), + maxX = Math.max(start.x, extent.x), + maxY = Math.max(start.y, extent.y), + strokeOffset = this.selectionLineWidth / 2; + + if (this.selectionColor) { + ctx.fillStyle = this.selectionColor; + ctx.fillRect(minX, minY, maxX - minX, maxY - minY); + } + + if (!this.selectionLineWidth || !this.selectionBorderColor) { + return; + } + ctx.lineWidth = this.selectionLineWidth; + ctx.strokeStyle = this.selectionBorderColor; + + minX += strokeOffset; + minY += strokeOffset; + maxX -= strokeOffset; + maxY -= strokeOffset; + // selection border + fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); + ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); + }, + + /** + * Method that determines what object we are clicking on + * the skipGroup parameter is for internal use, is needed for shift+click action + * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target + * or the outside part of the corner. + * @param {Event} e mouse event + * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through + * @return {fabric.Object} the target found + */ + findTarget: function (e, skipGroup) { + if (this.skipTargetFind) { + return; + } + + var ignoreZoom = true, + pointer = this.getPointer(e, ignoreZoom), + activeObject = this._activeObject, + aObjects = this.getActiveObjects(), + activeTarget, activeTargetSubs, + isTouch = isTouchEvent(e), + shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; + + // first check current group (if one exists) + // active group does not check sub targets like normal groups. + // if active group just exits. + this.targets = []; + + // if we hit the corner of an activeObject, let's return that. + if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { + return activeObject; + } + if (aObjects.length > 1 && !skipGroup && activeObject === this._searchPossibleTargets([activeObject], pointer)) { + return activeObject; + } + if (aObjects.length === 1 && + activeObject === this._searchPossibleTargets([activeObject], pointer)) { + if (!this.preserveObjectStacking) { return activeObject; } - if (aObjects.length === 1 && - activeObject === this.searchPossibleTargets([activeObject], pointer)) { - if (!this.preserveObjectStacking) { - return activeObject; - } - else { - activeTarget = activeObject; - activeTargetSubs = this.targets; - this.targets = []; - } - } - var target = this.searchPossibleTargets(this._objects, pointer); - if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { - target = activeTarget; - this.targets = activeTargetSubs; + else { + activeTarget = activeObject; + activeTargetSubs = this.targets; + this.targets = []; } - return target; - }, + } + var target = this._searchPossibleTargets(this._objects, pointer); + if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { + target = activeTarget; + this.targets = activeTargetSubs; + } + return target; + }, - /** - * Checks point is inside the object. - * @param {Object} [pointer] x,y object of point coordinates we want to check. - * @param {fabric.Object} obj Object to test against - * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target. - * @return {Boolean} true if point is contained within an area of given object - * @private - */ - _checkTarget: function(pointer, obj, globalPointer) { - if (obj && - obj.visible && - obj.evented && - // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html - // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html - obj.containsPoint(pointer) - ) { - if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { - var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); - if (!isTransparent) { - return true; - } - } - else { + /** + * Checks point is inside the object. + * @param {Object} [pointer] x,y object of point coordinates we want to check. + * @param {fabric.Object} obj Object to test against + * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target. + * @return {Boolean} true if point is contained within an area of given object + * @private + */ + _checkTarget: function(pointer, obj, globalPointer) { + if (obj && + obj.visible && + obj.evented && + // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html + // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html + obj.containsPoint(pointer) + ) { + if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { + var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); + if (!isTransparent) { return true; } } - }, + else { + return true; + } + } + }, - /** - * Internal Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted - * @param {Array} [objects] objects array to look into - * @param {Object} [pointer] x,y object of point coordinates we want to check. - * @return {fabric.Object} **top most object from given `objects`** that contains pointer - * @private - */ - _searchPossibleTargets: function(objects, pointer) { - // Cache all targets where their bounding box contains point. - var target, i = objects.length, subTarget; - // Do not check for currently grouped objects, since we check the parent group itself. - // until we call this function specifically to search inside the activeGroup - while (i--) { - var objToCheck = objects[i]; - var pointerToUse = objToCheck.group ? - this._normalizePointer(objToCheck.group, pointer) : pointer; - if (this._checkTarget(pointerToUse, objToCheck, pointer)) { - target = objects[i]; - if (target.subTargetCheck && Array.isArray(target._objects)) { - subTarget = this._searchPossibleTargets(target._objects, pointer); - subTarget && this.targets.push(subTarget); - } - break; + /** + * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted + * @param {Array} [objects] objects array to look into + * @param {Object} [pointer] x,y object of point coordinates we want to check. + * @return {fabric.Object} object that contains pointer + * @private + */ + _searchPossibleTargets: function(objects, pointer) { + // Cache all targets where their bounding box contains point. + var target, i = objects.length, subTarget; + // Do not check for currently grouped objects, since we check the parent group itself. + // until we call this function specifically to search inside the activeGroup + while (i--) { + var objToCheck = objects[i]; + var pointerToUse = objToCheck.group ? + this._normalizePointer(objToCheck.group, pointer) : pointer; + if (this._checkTarget(pointerToUse, objToCheck, pointer)) { + target = objects[i]; + if (target.subTargetCheck && target instanceof fabric.Group) { + subTarget = this._searchPossibleTargets(target._objects, pointer); + subTarget && this.targets.push(subTarget); } + break; } - return target; - }, - - /** - * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted - * @see {@link fabric.Canvas#_searchPossibleTargets} - * @param {Array} [objects] objects array to look into - * @param {Object} [pointer] x,y object of point coordinates we want to check. - * @return {fabric.Object} **top most object on screen** that contains pointer - */ - searchPossibleTargets: function (objects, pointer) { - var target = this._searchPossibleTargets(objects, pointer); - return target && target.interactive && this.targets[0] ? this.targets[0] : target; - }, + } + return target; + }, - /** - * Returns pointer coordinates without the effect of the viewport - * @param {Object} pointer with "x" and "y" number values - * @return {Object} object with "x" and "y" number values - */ - restorePointerVpt: function(pointer) { - return fabric.util.transformPoint( - pointer, - fabric.util.invertTransform(this.viewportTransform) - ); - }, + /** + * Returns pointer coordinates without the effect of the viewport + * @param {Object} pointer with "x" and "y" number values + * @return {Object} object with "x" and "y" number values + */ + restorePointerVpt: function(pointer) { + return fabric.util.transformPoint( + pointer, + fabric.util.invertTransform(this.viewportTransform) + ); + }, - /** - * Returns pointer coordinates relative to canvas. - * Can return coordinates with or without viewportTransform. - * ignoreVpt false gives back coordinates that represent - * the point clicked on canvas element. - * ignoreVpt true gives back coordinates after being processed - * by the viewportTransform ( sort of coordinates of what is displayed - * on the canvas where you are clicking. - * ignoreVpt true = HTMLElement coordinates relative to top,left - * ignoreVpt false, default = fabric space coordinates, the same used for shape position - * To interact with your shapes top and left you want to use ignoreVpt true - * most of the time, while ignoreVpt false will give you coordinates - * compatible with the object.oCoords system. - * of the time. - * @param {Event} e - * @param {Boolean} ignoreVpt - * @return {Object} object with "x" and "y" number values - */ - getPointer: function (e, ignoreVpt) { - // return cached values if we are in the event processing chain - if (this._absolutePointer && !ignoreVpt) { - return this._absolutePointer; - } - if (this._pointer && ignoreVpt) { - return this._pointer; - } + /** + * Returns pointer coordinates relative to canvas. + * Can return coordinates with or without viewportTransform. + * ignoreZoom false gives back coordinates that represent + * the point clicked on canvas element. + * ignoreZoom true gives back coordinates after being processed + * by the viewportTransform ( sort of coordinates of what is displayed + * on the canvas where you are clicking. + * ignoreZoom true = HTMLElement coordinates relative to top,left + * ignoreZoom false, default = fabric space coordinates, the same used for shape position + * To interact with your shapes top and left you want to use ignoreZoom true + * most of the time, while ignoreZoom false will give you coordinates + * compatible with the object.oCoords system. + * of the time. + * @param {Event} e + * @param {Boolean} ignoreZoom + * @return {Object} object with "x" and "y" number values + */ + getPointer: function (e, ignoreZoom) { + // return cached values if we are in the event processing chain + if (this._absolutePointer && !ignoreZoom) { + return this._absolutePointer; + } + if (this._pointer && ignoreZoom) { + return this._pointer; + } - var pointer = getPointer(e), - upperCanvasEl = this.upperCanvasEl, - bounds = upperCanvasEl.getBoundingClientRect(), - boundsWidth = bounds.width || 0, - boundsHeight = bounds.height || 0, - cssScale; + var pointer = getPointer(e), + upperCanvasEl = this.upperCanvasEl, + bounds = upperCanvasEl.getBoundingClientRect(), + boundsWidth = bounds.width || 0, + boundsHeight = bounds.height || 0, + cssScale; - if (!boundsWidth || !boundsHeight ) { - if ('top' in bounds && 'bottom' in bounds) { - boundsHeight = Math.abs( bounds.top - bounds.bottom ); - } - if ('right' in bounds && 'left' in bounds) { - boundsWidth = Math.abs( bounds.right - bounds.left ); - } + if (!boundsWidth || !boundsHeight ) { + if ('top' in bounds && 'bottom' in bounds) { + boundsHeight = Math.abs( bounds.top - bounds.bottom ); } - - this.calcOffset(); - pointer.x = pointer.x - this._offset.left; - pointer.y = pointer.y - this._offset.top; - if (!ignoreVpt) { - pointer = this.restorePointerVpt(pointer); + if ('right' in bounds && 'left' in bounds) { + boundsWidth = Math.abs( bounds.right - bounds.left ); } + } - var retinaScaling = this.getRetinaScaling(); - if (retinaScaling !== 1) { - pointer.x /= retinaScaling; - pointer.y /= retinaScaling; - } + this.calcOffset(); + pointer.x = pointer.x - this._offset.left; + pointer.y = pointer.y - this._offset.top; + if (!ignoreZoom) { + pointer = this.restorePointerVpt(pointer); + } - if (boundsWidth === 0 || boundsHeight === 0) { - // If bounds are not available (i.e. not visible), do not apply scale. - cssScale = { width: 1, height: 1 }; - } - else { - cssScale = { - width: upperCanvasEl.width / boundsWidth, - height: upperCanvasEl.height / boundsHeight - }; - } + var retinaScaling = this.getRetinaScaling(); + if (retinaScaling !== 1) { + pointer.x /= retinaScaling; + pointer.y /= retinaScaling; + } - return { - x: pointer.x * cssScale.width, - y: pointer.y * cssScale.height + if (boundsWidth === 0 || boundsHeight === 0) { + // If bounds are not available (i.e. not visible), do not apply scale. + cssScale = { width: 1, height: 1 }; + } + else { + cssScale = { + width: upperCanvasEl.width / boundsWidth, + height: upperCanvasEl.height / boundsHeight }; - }, + } - /** - * @private - * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized - */ - _createUpperCanvas: function () { - var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), - lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; + return { + x: pointer.x * cssScale.width, + y: pointer.y * cssScale.height + }; + }, - // there is no need to create a new upperCanvas element if we have already one. - if (upperCanvasEl) { - upperCanvasEl.className = ''; - } - else { - upperCanvasEl = this._createCanvasElement(); - this.upperCanvasEl = upperCanvasEl; - } - fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); - this.upperCanvasEl.setAttribute('data-fabric', 'top'); - this.wrapperEl.appendChild(upperCanvasEl); + /** + * @private + * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized + */ + _createUpperCanvas: function () { + var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), + lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; - this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); - this._applyCanvasStyle(upperCanvasEl); - this.contextTop = upperCanvasEl.getContext('2d'); - }, + // there is no need to create a new upperCanvas element if we have already one. + if (upperCanvasEl) { + upperCanvasEl.className = ''; + } + else { + upperCanvasEl = this._createCanvasElement(); + this.upperCanvasEl = upperCanvasEl; + } + fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); - /** - * @private - */ - _createCacheCanvas: function () { - this.cacheCanvasEl = this._createCanvasElement(); - this.cacheCanvasEl.setAttribute('width', this.width); - this.cacheCanvasEl.setAttribute('height', this.height); - this.contextCache = this.cacheCanvasEl.getContext('2d'); - }, + this.wrapperEl.appendChild(upperCanvasEl); - /** - * @private - */ - _initWrapperElement: function () { - if (this.wrapperEl) { - return; - } - this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { - 'class': this.containerClass - }); - this.wrapperEl.setAttribute('data-fabric', 'wrapper'); - fabric.util.setStyle(this.wrapperEl, { - width: this.width + 'px', - height: this.height + 'px', - position: 'relative' - }); - fabric.util.makeElementUnselectable(this.wrapperEl); - }, + this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); + this._applyCanvasStyle(upperCanvasEl); + this.contextTop = upperCanvasEl.getContext('2d'); + }, - /** - * @private - * @param {HTMLElement} element canvas element to apply styles on - */ - _applyCanvasStyle: function (element) { - var width = this.width || element.width, - height = this.height || element.height; - - fabric.util.setStyle(element, { - position: 'absolute', - width: width + 'px', - height: height + 'px', - left: 0, - top: 0, - 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', - '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' - }); - element.width = width; - element.height = height; - fabric.util.makeElementUnselectable(element); - }, + /** + * @private + */ + _createCacheCanvas: function () { + this.cacheCanvasEl = this._createCanvasElement(); + this.cacheCanvasEl.setAttribute('width', this.width); + this.cacheCanvasEl.setAttribute('height', this.height); + this.contextCache = this.cacheCanvasEl.getContext('2d'); + }, - /** - * Copy the entire inline style from one element (fromEl) to another (toEl) - * @private - * @param {Element} fromEl Element style is copied from - * @param {Element} toEl Element copied style is applied to - */ - _copyCanvasStyle: function (fromEl, toEl) { - toEl.style.cssText = fromEl.style.cssText; - }, + /** + * @private + */ + _initWrapperElement: function () { + this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { + 'class': this.containerClass + }); + fabric.util.setStyle(this.wrapperEl, { + width: this.width + 'px', + height: this.height + 'px', + position: 'relative' + }); + fabric.util.makeElementUnselectable(this.wrapperEl); + }, - /** - * Returns context of top canvas where interactions are drawn - * @returns {CanvasRenderingContext2D} - */ - getTopContext: function () { - return this.contextTop; - }, + /** + * @private + * @param {HTMLElement} element canvas element to apply styles on + */ + _applyCanvasStyle: function (element) { + var width = this.width || element.width, + height = this.height || element.height; + + fabric.util.setStyle(element, { + position: 'absolute', + width: width + 'px', + height: height + 'px', + left: 0, + top: 0, + 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', + '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' + }); + element.width = width; + element.height = height; + fabric.util.makeElementUnselectable(element); + }, - /** - * Returns context of canvas where object selection is drawn - * @alias - * @return {CanvasRenderingContext2D} - */ - getSelectionContext: function() { - return this.contextTop; - }, + /** + * Copy the entire inline style from one element (fromEl) to another (toEl) + * @private + * @param {Element} fromEl Element style is copied from + * @param {Element} toEl Element copied style is applied to + */ + _copyCanvasStyle: function (fromEl, toEl) { + toEl.style.cssText = fromEl.style.cssText; + }, - /** - * Returns <canvas> element on which object selection is drawn - * @return {HTMLCanvasElement} - */ - getSelectionElement: function () { - return this.upperCanvasEl; - }, + /** + * Returns context of canvas where object selection is drawn + * @return {CanvasRenderingContext2D} + */ + getSelectionContext: function() { + return this.contextTop; + }, - /** - * Returns currently active object - * @return {fabric.Object} active object - */ - getActiveObject: function () { - return this._activeObject; - }, + /** + * Returns <canvas> element on which object selection is drawn + * @return {HTMLCanvasElement} + */ + getSelectionElement: function () { + return this.upperCanvasEl; + }, - /** - * Returns an array with the current selected objects - * @return {fabric.Object} active object - */ - getActiveObjects: function () { - var active = this._activeObject; - if (active) { - if (active.type === 'activeSelection' && active._objects) { - return active._objects.slice(0); - } - else { - return [active]; - } - } - return []; - }, + /** + * Returns currently active object + * @return {fabric.Object} active object + */ + getActiveObject: function () { + return this._activeObject; + }, - /** - * @private - * Compares the old activeObject with the current one and fires correct events - * @param {fabric.Object} obj old activeObject - */ - _fireSelectionEvents: function(oldObjects, e) { - var somethingChanged = false, objects = this.getActiveObjects(), - added = [], removed = [], invalidate = false; - oldObjects.forEach(function(oldObject) { - if (objects.indexOf(oldObject) === -1) { - somethingChanged = true; - oldObject.fire('deselected', { - e: e, - target: oldObject - }); - removed.push(oldObject); - } - }); - objects.forEach(function(object) { - if (oldObjects.indexOf(object) === -1) { - somethingChanged = true; - object.fire('selected', { - e: e, - target: object - }); - added.push(object); - } - }); - if (oldObjects.length > 0 && objects.length > 0) { - invalidate = true; - somethingChanged && this.fire('selection:updated', { - e: e, - selected: added, - deselected: removed, - }); + /** + * Returns an array with the current selected objects + * @return {fabric.Object} active object + */ + getActiveObjects: function () { + var active = this._activeObject; + if (active) { + if (active.type === 'activeSelection' && active._objects) { + return active._objects.slice(0); + } + else { + return [active]; } - else if (objects.length > 0) { - invalidate = true; - this.fire('selection:created', { + } + return []; + }, + + /** + * @private + * @param {fabric.Object} obj Object that was removed + */ + _onObjectRemoved: function(obj) { + // removing active object should fire "selection:cleared" events + if (obj === this._activeObject) { + this.fire('before:selection:cleared', { target: obj }); + this._discardActiveObject(); + this.fire('selection:cleared', { target: obj }); + obj.fire('deselected'); + } + if (obj === this._hoveredTarget){ + this._hoveredTarget = null; + this._hoveredTargets = []; + } + this.callSuper('_onObjectRemoved', obj); + }, + + /** + * @private + * Compares the old activeObject with the current one and fires correct events + * @param {fabric.Object} obj old activeObject + */ + _fireSelectionEvents: function(oldObjects, e) { + var somethingChanged = false, objects = this.getActiveObjects(), + added = [], removed = []; + oldObjects.forEach(function(oldObject) { + if (objects.indexOf(oldObject) === -1) { + somethingChanged = true; + oldObject.fire('deselected', { e: e, - selected: added, + target: oldObject }); + removed.push(oldObject); } - else if (oldObjects.length > 0) { - invalidate = true; - this.fire('selection:cleared', { + }); + objects.forEach(function(object) { + if (oldObjects.indexOf(object) === -1) { + somethingChanged = true; + object.fire('selected', { e: e, - deselected: removed, + target: object }); + added.push(object); } - invalidate && (this._objectsToRender = undefined); - }, - - /** - * Sets given object as the only active object on canvas - * @param {fabric.Object} object Object to set as an active one - * @param {Event} [e] Event (passed along when firing "object:selected") - * @return {fabric.Canvas} thisArg - * @chainable - */ - setActiveObject: function (object, e) { - var currentActives = this.getActiveObjects(); - this._setActiveObject(object, e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + }); + if (oldObjects.length > 0 && objects.length > 0) { + somethingChanged && this.fire('selection:updated', { + e: e, + selected: added, + deselected: removed, + }); + } + else if (objects.length > 0) { + this.fire('selection:created', { + e: e, + selected: added, + }); + } + else if (oldObjects.length > 0) { + this.fire('selection:cleared', { + e: e, + deselected: removed, + }); + } + }, - /** - * This is a private method for now. - * This is supposed to be equivalent to setActiveObject but without firing - * any event. There is commitment to have this stay this way. - * This is the functional part of setActiveObject. - * @private - * @param {Object} object to set as active - * @param {Event} [e] Event (passed along when firing "object:selected") - * @return {Boolean} true if the selection happened - */ - _setActiveObject: function(object, e) { - if (this._activeObject === object) { - return false; - } - if (!this._discardActiveObject(e, object)) { - return false; - } - if (object.onSelect({ e: e })) { - return false; - } - this._activeObject = object; - return true; - }, + /** + * Sets given object as the only active object on canvas + * @param {fabric.Object} object Object to set as an active one + * @param {Event} [e] Event (passed along when firing "object:selected") + * @return {fabric.Canvas} thisArg + * @chainable + */ + setActiveObject: function (object, e) { + var currentActives = this.getActiveObjects(); + this._setActiveObject(object, e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** - * This is a private method for now. - * This is supposed to be equivalent to discardActiveObject but without firing - * any events. There is commitment to have this stay this way. - * This is the functional part of discardActiveObject. - * @param {Event} [e] Event (passed along when firing "object:deselected") - * @param {Object} object to set as active - * @return {Boolean} true if the selection happened - * @private - */ - _discardActiveObject: function(e, object) { - var obj = this._activeObject; - if (obj) { - // onDeselect return TRUE to cancel selection; - if (obj.onDeselect({ e: e, object: object })) { - return false; - } - this._activeObject = null; - } - return true; - }, + /** + * This is a private method for now. + * This is supposed to be equivalent to setActiveObject but without firing + * any event. There is commitment to have this stay this way. + * This is the functional part of setActiveObject. + * @private + * @param {Object} object to set as active + * @param {Event} [e] Event (passed along when firing "object:selected") + * @return {Boolean} true if the selection happened + */ + _setActiveObject: function(object, e) { + if (this._activeObject === object) { + return false; + } + if (!this._discardActiveObject(e, object)) { + return false; + } + if (object.onSelect({ e: e })) { + return false; + } + this._activeObject = object; + return true; + }, - /** - * Discards currently active object and fire events. If the function is called by fabric - * as a consequence of a mouse event, the event is passed as a parameter and - * sent to the fire function for the custom events. When used as a method the - * e param does not have any application. - * @param {event} e - * @return {fabric.Canvas} thisArg - * @chainable - */ - discardActiveObject: function (e) { - var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); - if (currentActives.length) { - this.fire('before:selection:cleared', { target: activeObject, e: e }); + /** + * This is a private method for now. + * This is supposed to be equivalent to discardActiveObject but without firing + * any events. There is commitment to have this stay this way. + * This is the functional part of discardActiveObject. + * @param {Event} [e] Event (passed along when firing "object:deselected") + * @param {Object} object to set as active + * @return {Boolean} true if the selection happened + * @private + */ + _discardActiveObject: function(e, object) { + var obj = this._activeObject; + if (obj) { + // onDeselect return TRUE to cancel selection; + if (obj.onDeselect({ e: e, object: object })) { + return false; } - this._discardActiveObject(e); - this._fireSelectionEvents(currentActives, e); - return this; - }, + this._activeObject = null; + } + return true; + }, - /** - * Clears a canvas element and removes all event listeners - * @return {fabric.Canvas} thisArg - * @chainable - */ - dispose: function () { - var wrapperEl = this.wrapperEl, - lowerCanvasEl = this.lowerCanvasEl, - upperCanvasEl = this.upperCanvasEl, - cacheCanvasEl = this.cacheCanvasEl; - this.removeListeners(); - this.callSuper('dispose'); - wrapperEl.removeChild(upperCanvasEl); - wrapperEl.removeChild(lowerCanvasEl); - this.contextCache = null; - this.contextTop = null; - fabric.util.cleanUpJsdomNode(upperCanvasEl); - this.upperCanvasEl = undefined; - fabric.util.cleanUpJsdomNode(cacheCanvasEl); - this.cacheCanvasEl = undefined; - if (wrapperEl.parentNode) { - wrapperEl.parentNode.replaceChild(lowerCanvasEl, wrapperEl); - } - delete this.wrapperEl; - return this; - }, + /** + * Discards currently active object and fire events. If the function is called by fabric + * as a consequence of a mouse event, the event is passed as a parameter and + * sent to the fire function for the custom events. When used as a method the + * e param does not have any application. + * @param {event} e + * @return {fabric.Canvas} thisArg + * @chainable + */ + discardActiveObject: function (e) { + var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); + if (currentActives.length) { + this.fire('before:selection:cleared', { target: activeObject, e: e }); + } + this._discardActiveObject(e); + this._fireSelectionEvents(currentActives, e); + return this; + }, - /** - * Clears all contexts (background, main, top) of an instance - * @return {fabric.Canvas} thisArg - * @chainable - */ - clear: function () { - // this.discardActiveGroup(); - this.discardActiveObject(); - this.clearContext(this.contextTop); - return this.callSuper('clear'); - }, + /** + * Clears a canvas element and removes all event listeners + * @return {fabric.Canvas} thisArg + * @chainable + */ + dispose: function () { + var wrapper = this.wrapperEl; + this.removeListeners(); + wrapper.removeChild(this.upperCanvasEl); + wrapper.removeChild(this.lowerCanvasEl); + this.contextCache = null; + this.contextTop = null; + ['upperCanvasEl', 'cacheCanvasEl'].forEach((function(element) { + fabric.util.cleanUpJsdomNode(this[element]); + this[element] = undefined; + }).bind(this)); + if (wrapper.parentNode) { + wrapper.parentNode.replaceChild(this.lowerCanvasEl, this.wrapperEl); + } + delete this.wrapperEl; + fabric.StaticCanvas.prototype.dispose.call(this); + return this; + }, - /** - * Draws objects' controls (borders/controls) - * @param {CanvasRenderingContext2D} ctx Context to render controls on - */ - drawControls: function(ctx) { - var activeObject = this._activeObject; + /** + * Clears all contexts (background, main, top) of an instance + * @return {fabric.Canvas} thisArg + * @chainable + */ + clear: function () { + // this.discardActiveGroup(); + this.discardActiveObject(); + this.clearContext(this.contextTop); + return this.callSuper('clear'); + }, - if (activeObject) { - activeObject._renderControls(ctx); - } - }, + /** + * Draws objects' controls (borders/controls) + * @param {CanvasRenderingContext2D} ctx Context to render controls on + */ + drawControls: function(ctx) { + var activeObject = this._activeObject; - /** - * @private - */ - _toObject: function(instance, methodName, propertiesToInclude) { - //If the object is part of the current selection group, it should - //be transformed appropriately - //i.e. it should be serialised as it would appear if the selection group - //were to be destroyed. - var originalProperties = this._realizeGroupTransformOnObject(instance), - object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); - //Undo the damage we did by changing all of its properties - originalProperties && instance.set(originalProperties); - return object; - }, + if (activeObject) { + activeObject._renderControls(ctx); + } + }, - /** - * Realises an object's group transformation on it - * @private - * @param {fabric.Object} [instance] the object to transform (gets mutated) - * @returns the original values of instance which were changed - */ - _realizeGroupTransformOnObject: function(instance) { - if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { - var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; - //Copy all the positionally relevant properties across now - var originalValues = {}; - layoutProps.forEach(function(prop) { - originalValues[prop] = instance[prop]; - }); - fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); - return originalValues; - } - else { - return null; - } - }, + /** + * @private + */ + _toObject: function(instance, methodName, propertiesToInclude) { + //If the object is part of the current selection group, it should + //be transformed appropriately + //i.e. it should be serialised as it would appear if the selection group + //were to be destroyed. + var originalProperties = this._realizeGroupTransformOnObject(instance), + object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); + //Undo the damage we did by changing all of its properties + this._unwindGroupTransformOnObject(instance, originalProperties); + return object; + }, - /** - * @private - */ - _setSVGObject: function(markup, instance, reviver) { - //If the object is in a selection group, simulate what would happen to that - //object when the group is deselected - var originalProperties = this._realizeGroupTransformOnObject(instance); - this.callSuper('_setSVGObject', markup, instance, reviver); - originalProperties && instance.set(originalProperties); - }, + /** + * Realises an object's group transformation on it + * @private + * @param {fabric.Object} [instance] the object to transform (gets mutated) + * @returns the original values of instance which were changed + */ + _realizeGroupTransformOnObject: function(instance) { + if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { + var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; + //Copy all the positionally relevant properties across now + var originalValues = {}; + layoutProps.forEach(function(prop) { + originalValues[prop] = instance[prop]; + }); + fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); + return originalValues; + } + else { + return null; + } + }, - setViewportTransform: function (vpt) { - if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { - this._activeObject.clearContextTop(); - } - fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); + /** + * Restores the changed properties of instance + * @private + * @param {fabric.Object} [instance] the object to un-transform (gets mutated) + * @param {Object} [originalValues] the original values of instance, as returned by _realizeGroupTransformOnObject + */ + _unwindGroupTransformOnObject: function(instance, originalValues) { + if (originalValues) { + instance.set(originalValues); } - }); + }, + + /** + * @private + */ + _setSVGObject: function(markup, instance, reviver) { + //If the object is in a selection group, simulate what would happen to that + //object when the group is deselected + var originalProperties = this._realizeGroupTransformOnObject(instance); + this.callSuper('_setSVGObject', markup, instance, reviver); + this._unwindGroupTransformOnObject(instance, originalProperties); + }, - // copying static properties manually to work around Opera's bug, - // where "prototype" property is enumerable and overrides existing prototype - for (var prop in fabric.StaticCanvas) { - if (prop !== 'prototype') { - fabric.Canvas[prop] = fabric.StaticCanvas[prop]; + setViewportTransform: function (vpt) { + if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { + this._activeObject.clearContextTop(); } + fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); } - })(typeof exports !== 'undefined' ? exports : window); + }); - (function(global) { + // copying static properties manually to work around Opera's bug, + // where "prototype" property is enumerable and overrides existing prototype + for (var prop in fabric.StaticCanvas) { + if (prop !== 'prototype') { + fabric.Canvas[prop] = fabric.StaticCanvas[prop]; + } + } +})(); - var fabric = global.fabric, - addListener = fabric.util.addListener, - removeListener = fabric.util.removeListener, - RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, - addEventOptions = { passive: false }; - function checkClick(e, value) { - return e.button && (e.button === value - 1); - } +(function() { - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + var addListener = fabric.util.addListener, + removeListener = fabric.util.removeListener, + RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, + addEventOptions = { passive: false }; - /** - * Contains the id of the touch event that owns the fabric transform - * @type Number - * @private - */ - mainTouchId: null, + function checkClick(e, value) { + return e.button && (e.button === value - 1); + } - /** - * Adds mouse listeners to canvas - * @private - */ - _initEventListeners: function () { - // in case we initialized the class twice. This should not happen normally - // but in some kind of applications where the canvas element may be changed - // this is a workaround to having double listeners. - this.removeListeners(); - this._bindEvents(); - this.addOrRemove(addListener, 'add'); - }, + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** - * return an event prefix pointer or mouse. - * @private - */ - _getEventPrefix: function () { - return this.enablePointerEvents ? 'pointer' : 'mouse'; - }, + /** + * Contains the id of the touch event that owns the fabric transform + * @type Number + * @private + */ + mainTouchId: null, - addOrRemove: function(functor, eventjsFunctor) { - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - functor(fabric.window, 'resize', this._onResize); - functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); - functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); - functor(canvasElement, 'wheel', this._onMouseWheel); - functor(canvasElement, 'contextmenu', this._onContextMenu); - functor(canvasElement, 'dblclick', this._onDoubleClick); - functor(canvasElement, 'dragover', this._onDragOver); - functor(canvasElement, 'dragenter', this._onDragEnter); - functor(canvasElement, 'dragleave', this._onDragLeave); - functor(canvasElement, 'drop', this._onDrop); - if (!this.enablePointerEvents) { - functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); - } - if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { - eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); - eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); - eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); - eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); - eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); - } - }, + /** + * Adds mouse listeners to canvas + * @private + */ + _initEventListeners: function () { + // in case we initialized the class twice. This should not happen normally + // but in some kind of applications where the canvas element may be changed + // this is a workaround to having double listeners. + this.removeListeners(); + this._bindEvents(); + this.addOrRemove(addListener, 'add'); + }, - /** - * Removes all event listeners - */ - removeListeners: function() { - this.addOrRemove(removeListener, 'remove'); - // if you dispose on a mouseDown, before mouse up, you need to clean document to... - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - }, + /** + * return an event prefix pointer or mouse. + * @private + */ + _getEventPrefix: function () { + return this.enablePointerEvents ? 'pointer' : 'mouse'; + }, + + addOrRemove: function(functor, eventjsFunctor) { + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + functor(fabric.window, 'resize', this._onResize); + functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); + functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); + functor(canvasElement, 'wheel', this._onMouseWheel); + functor(canvasElement, 'contextmenu', this._onContextMenu); + functor(canvasElement, 'dblclick', this._onDoubleClick); + functor(canvasElement, 'dragover', this._onDragOver); + functor(canvasElement, 'dragenter', this._onDragEnter); + functor(canvasElement, 'dragleave', this._onDragLeave); + functor(canvasElement, 'drop', this._onDrop); + if (!this.enablePointerEvents) { + functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); + } + if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { + eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); + eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); + eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); + eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); + eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); + } + }, + + /** + * Removes all event listeners + */ + removeListeners: function() { + this.addOrRemove(removeListener, 'remove'); + // if you dispose on a mouseDown, before mouse up, you need to clean document to... + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + }, - /** - * @private - */ - _bindEvents: function() { - if (this.eventsBound) { - // for any reason we pass here twice we do not want to bind events twice. - return; - } - this._onMouseDown = this._onMouseDown.bind(this); - this._onTouchStart = this._onTouchStart.bind(this); - this._onMouseMove = this._onMouseMove.bind(this); - this._onMouseUp = this._onMouseUp.bind(this); - this._onTouchEnd = this._onTouchEnd.bind(this); - this._onResize = this._onResize.bind(this); - this._onGesture = this._onGesture.bind(this); - this._onDrag = this._onDrag.bind(this); - this._onShake = this._onShake.bind(this); - this._onLongPress = this._onLongPress.bind(this); - this._onOrientationChange = this._onOrientationChange.bind(this); - this._onMouseWheel = this._onMouseWheel.bind(this); - this._onMouseOut = this._onMouseOut.bind(this); - this._onMouseEnter = this._onMouseEnter.bind(this); - this._onContextMenu = this._onContextMenu.bind(this); - this._onDoubleClick = this._onDoubleClick.bind(this); - this._onDragOver = this._onDragOver.bind(this); - this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); - this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); - this._onDrop = this._onDrop.bind(this); - this.eventsBound = true; - }, + /** + * @private + */ + _bindEvents: function() { + if (this.eventsBound) { + // for any reason we pass here twice we do not want to bind events twice. + return; + } + this._onMouseDown = this._onMouseDown.bind(this); + this._onTouchStart = this._onTouchStart.bind(this); + this._onMouseMove = this._onMouseMove.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); + this._onTouchEnd = this._onTouchEnd.bind(this); + this._onResize = this._onResize.bind(this); + this._onGesture = this._onGesture.bind(this); + this._onDrag = this._onDrag.bind(this); + this._onShake = this._onShake.bind(this); + this._onLongPress = this._onLongPress.bind(this); + this._onOrientationChange = this._onOrientationChange.bind(this); + this._onMouseWheel = this._onMouseWheel.bind(this); + this._onMouseOut = this._onMouseOut.bind(this); + this._onMouseEnter = this._onMouseEnter.bind(this); + this._onContextMenu = this._onContextMenu.bind(this); + this._onDoubleClick = this._onDoubleClick.bind(this); + this._onDragOver = this._onDragOver.bind(this); + this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); + this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); + this._onDrop = this._onDrop.bind(this); + this.eventsBound = true; + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js gesture - * @param {Event} [self] Inner Event object - */ - _onGesture: function(e, self) { - this.__onTransformGesture && this.__onTransformGesture(e, self); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js gesture + * @param {Event} [self] Inner Event object + */ + _onGesture: function(e, self) { + this.__onTransformGesture && this.__onTransformGesture(e, self); + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js drag - * @param {Event} [self] Inner Event object - */ - _onDrag: function(e, self) { - this.__onDrag && this.__onDrag(e, self); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js drag + * @param {Event} [self] Inner Event object + */ + _onDrag: function(e, self) { + this.__onDrag && this.__onDrag(e, self); + }, - /** - * @private - * @param {Event} [e] Event object fired on wheel event - */ - _onMouseWheel: function(e) { - this.__onMouseWheel(e); - }, + /** + * @private + * @param {Event} [e] Event object fired on wheel event + */ + _onMouseWheel: function(e) { + this.__onMouseWheel(e); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onMouseOut: function(e) { - var target = this._hoveredTarget; - this.fire('mouse:out', { target: target, e: e }); - this._hoveredTarget = null; - target && target.fire('mouseout', { e: e }); + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseOut: function(e) { + var target = this._hoveredTarget; + this.fire('mouse:out', { target: target, e: e }); + this._hoveredTarget = null; + target && target.fire('mouseout', { e: e }); + + var _this = this; + this._hoveredTargets.forEach(function(_target){ + _this.fire('mouse:out', { target: target, e: e }); + _target && target.fire('mouseout', { e: e }); + }); + this._hoveredTargets = []; - var _this = this; - this._hoveredTargets.forEach(function(_target){ - _this.fire('mouse:out', { target: target, e: e }); - _target && target.fire('mouseout', { e: e }); + if (this._iTextInstances) { + this._iTextInstances.forEach(function(obj) { + if (obj.isEditing) { + obj.hiddenTextarea.focus(); + } }); + } + }, + + /** + * @private + * @param {Event} e Event object fired on mouseenter + */ + _onMouseEnter: function(e) { + // This find target and consequent 'mouse:over' is used to + // clear old instances on hovered target. + // calling findTarget has the side effect of killing target.__corner. + // as a short term fix we are not firing this if we are currently transforming. + // as a long term fix we need to separate the action of finding a target with the + // side effects we added to it. + if (!this._currentTransform && !this.findTarget(e)) { + this.fire('mouse:over', { target: null, e: e }); + this._hoveredTarget = null; this._hoveredTargets = []; + } + }, - if (this._iTextInstances) { - this._iTextInstances.forEach(function(obj) { - if (obj.isEditing) { - obj.hiddenTextarea.focus(); - } - }); - } - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js orientation change + * @param {Event} [self] Inner Event object + */ + _onOrientationChange: function(e, self) { + this.__onOrientationChange && this.__onOrientationChange(e, self); + }, - /** - * @private - * @param {Event} e Event object fired on mouseenter - */ - _onMouseEnter: function(e) { - // This find target and consequent 'mouse:over' is used to - // clear old instances on hovered target. - // calling findTarget has the side effect of killing target.__corner. - // as a short term fix we are not firing this if we are currently transforming. - // as a long term fix we need to separate the action of finding a target with the - // side effects we added to it. - if (!this._currentTransform && !this.findTarget(e)) { - this.fire('mouse:over', { target: null, e: e }); - this._hoveredTarget = null; - this._hoveredTargets = []; - } - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js shake + * @param {Event} [self] Inner Event object + */ + _onShake: function(e, self) { + this.__onShake && this.__onShake(e, self); + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js orientation change - * @param {Event} [self] Inner Event object - */ - _onOrientationChange: function(e, self) { - this.__onOrientationChange && this.__onOrientationChange(e, self); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js shake + * @param {Event} [self] Inner Event object + */ + _onLongPress: function(e, self) { + this.__onLongPress && this.__onLongPress(e, self); + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js shake - * @param {Event} [self] Inner Event object - */ - _onShake: function(e, self) { - this.__onShake && this.__onShake(e, self); - }, + /** + * prevent default to allow drop event to be fired + * @private + * @param {Event} [e] Event object fired on Event.js shake + */ + _onDragOver: function(e) { + e.preventDefault(); + var target = this._simpleEventHandler('dragover', e); + this._fireEnterLeaveEvents(target, e); + }, - /** - * @private - * @param {Event} [e] Event object fired on Event.js shake - * @param {Event} [self] Inner Event object - */ - _onLongPress: function(e, self) { - this.__onLongPress && this.__onLongPress(e, self); - }, + /** + * `drop:before` is a an event that allow you to schedule logic + * before the `drop` event. Prefer `drop` event always, but if you need + * to run some drop-disabling logic on an event, since there is no way + * to handle event handlers ordering, use `drop:before` + * @param {Event} e + */ + _onDrop: function (e) { + this._simpleEventHandler('drop:before', e); + return this._simpleEventHandler('drop', e); + }, - /** - * prevent default to allow drop event to be fired - * @private - * @param {Event} [e] Event object fired on Event.js shake - */ - _onDragOver: function(e) { + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onContextMenu: function (e) { + if (this.stopContextMenu) { + e.stopPropagation(); e.preventDefault(); - var target = this._simpleEventHandler('dragover', e); - this._fireEnterLeaveEvents(target, e); - }, + } + return false; + }, - /** - * `drop:before` is a an event that allow you to schedule logic - * before the `drop` event. Prefer `drop` event always, but if you need - * to run some drop-disabling logic on an event, since there is no way - * to handle event handlers ordering, use `drop:before` - * @param {Event} e - */ - _onDrop: function (e) { - this._simpleEventHandler('drop:before', e); - return this._simpleEventHandler('drop', e); - }, - - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onContextMenu: function (e) { - this._simpleEventHandler('contextmenu:before', e); - if (this.stopContextMenu) { - e.stopPropagation(); - e.preventDefault(); - } - this._simpleEventHandler('contextmenu', e); - return false; - }, - - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onDoubleClick: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'dblclick'); - this._resetTransformEventData(e); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onDoubleClick: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'dblclick'); + this._resetTransformEventData(e); + }, - /** - * Return a the id of an event. - * returns either the pointerId or the identifier or 0 for the mouse event - * @private - * @param {Event} evt Event object - */ - getPointerId: function(evt) { - var changedTouches = evt.changedTouches; + /** + * Return a the id of an event. + * returns either the pointerId or the identifier or 0 for the mouse event + * @private + * @param {Event} evt Event object + */ + getPointerId: function(evt) { + var changedTouches = evt.changedTouches; - if (changedTouches) { - return changedTouches[0] && changedTouches[0].identifier; - } + if (changedTouches) { + return changedTouches[0] && changedTouches[0].identifier; + } - if (this.enablePointerEvents) { - return evt.pointerId; - } + if (this.enablePointerEvents) { + return evt.pointerId; + } - return -1; - }, + return -1; + }, - /** - * Determines if an event has the id of the event that is considered main - * @private - * @param {evt} event Event object - */ - _isMainEvent: function(evt) { - if (evt.isPrimary === true) { - return true; - } - if (evt.isPrimary === false) { - return false; - } - if (evt.type === 'touchend' && evt.touches.length === 0) { - return true; - } - if (evt.changedTouches) { - return evt.changedTouches[0].identifier === this.mainTouchId; - } + /** + * Determines if an event has the id of the event that is considered main + * @private + * @param {evt} event Event object + */ + _isMainEvent: function(evt) { + if (evt.isPrimary === true) { return true; - }, + } + if (evt.isPrimary === false) { + return false; + } + if (evt.type === 'touchend' && evt.touches.length === 0) { + return true; + } + if (evt.changedTouches) { + return evt.changedTouches[0].identifier === this.mainTouchId; + } + return true; + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onTouchStart: function(e) { - e.preventDefault(); - if (this.mainTouchId === null) { - this.mainTouchId = this.getPointerId(e); - } - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - // Unbind mousedown to prevent double triggers from touch devices - removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onTouchStart: function(e) { + e.preventDefault(); + if (this.mainTouchId === null) { + this.mainTouchId = this.getPointerId(e); + } + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + // Unbind mousedown to prevent double triggers from touch devices + removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onMouseDown: function (e) { - this.__onMouseDown(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseDown: function (e) { + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + }, - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onTouchEnd: function(e) { - if (e.touches.length > 0) { - // if there are still touches stop here - return; - } - this.__onMouseUp(e); - this._resetTransformEventData(); - this.mainTouchId = null; - var eventTypePrefix = this._getEventPrefix(); - removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); - removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); - var _this = this; - if (this._willAddMouseDown) { - clearTimeout(this._willAddMouseDown); - } - this._willAddMouseDown = setTimeout(function() { - // Wait 400ms before rebinding mousedown to prevent double triggers - // from touch devices - addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); - _this._willAddMouseDown = 0; - }, 400); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onTouchEnd: function(e) { + if (e.touches.length > 0) { + // if there are still touches stop here + return; + } + this.__onMouseUp(e); + this._resetTransformEventData(); + this.mainTouchId = null; + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + var _this = this; + if (this._willAddMouseDown) { + clearTimeout(this._willAddMouseDown); + } + this._willAddMouseDown = setTimeout(function() { + // Wait 400ms before rebinding mousedown to prevent double triggers + // from touch devices + addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); + _this._willAddMouseDown = 0; + }, 400); + }, - /** - * @private - * @param {Event} e Event object fired on mouseup - */ - _onMouseUp: function (e) { - this.__onMouseUp(e); - this._resetTransformEventData(); - var canvasElement = this.upperCanvasEl, - eventTypePrefix = this._getEventPrefix(); - if (this._isMainEvent(e)) { - removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); - removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); - } - }, + /** + * @private + * @param {Event} e Event object fired on mouseup + */ + _onMouseUp: function (e) { + this.__onMouseUp(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + if (this._isMainEvent(e)) { + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + } + }, - /** - * @private - * @param {Event} e Event object fired on mousemove - */ - _onMouseMove: function (e) { - !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); - this.__onMouseMove(e); - }, + /** + * @private + * @param {Event} e Event object fired on mousemove + */ + _onMouseMove: function (e) { + !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); + this.__onMouseMove(e); + }, - /** - * @private - */ - _onResize: function () { - this.calcOffset(); - }, + /** + * @private + */ + _onResize: function () { + this.calcOffset(); + }, - /** - * Decides whether the canvas should be redrawn in mouseup and mousedown events. - * @private - * @param {Object} target - */ - _shouldRender: function(target) { - var activeObject = this._activeObject; + /** + * Decides whether the canvas should be redrawn in mouseup and mousedown events. + * @private + * @param {Object} target + */ + _shouldRender: function(target) { + var activeObject = this._activeObject; - if ( - !!activeObject !== !!target || - (activeObject && target && (activeObject !== target)) - ) { - // this covers: switch of target, from target to no target, selection of target - // multiSelection with key and mouse - return true; - } - else if (activeObject && activeObject.isEditing) { - // if we mouse up/down over a editing textbox a cursor change, - // there is no need to re render - return false; - } + if ( + !!activeObject !== !!target || + (activeObject && target && (activeObject !== target)) + ) { + // this covers: switch of target, from target to no target, selection of target + // multiSelection with key and mouse + return true; + } + else if (activeObject && activeObject.isEditing) { + // if we mouse up/down over a editing textbox a cursor change, + // there is no need to re render return false; - }, + } + return false; + }, - /** - * Method that defines the actions when mouse is released on canvas. - * The method resets the currentTransform parameters, store the image corner - * position in the image object and render the canvas on top. - * @private - * @param {Event} e Event object fired on mouseup - */ - __onMouseUp: function (e) { - var target, transform = this._currentTransform, - groupSelector = this._groupSelector, shouldRender = false, - isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); - this._cacheTransformEventData(e); - target = this._target; - this._handleEvent(e, 'up:before'); - // if right/middle click just fire events and return - // target undefined will make the _handleEvent search the target - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'up', RIGHT_CLICK, isClick); - } - return; + /** + * Method that defines the actions when mouse is released on canvas. + * The method resets the currentTransform parameters, store the image corner + * position in the image object and render the canvas on top. + * @private + * @param {Event} e Event object fired on mouseup + */ + __onMouseUp: function (e) { + var target, transform = this._currentTransform, + groupSelector = this._groupSelector, shouldRender = false, + isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); + this._cacheTransformEventData(e); + target = this._target; + this._handleEvent(e, 'up:before'); + // if right/middle click just fire events and return + // target undefined will make the _handleEvent search the target + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'up', RIGHT_CLICK, isClick); } + return; + } - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); - } - this._resetTransformEventData(); - return; + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); } + this._resetTransformEventData(); + return; + } - if (this.isDrawingMode && this._isCurrentlyDrawing) { - this._onMouseUpInDrawingMode(e); - return; - } + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this._onMouseUpInDrawingMode(e); + return; + } - if (!this._isMainEvent(e)) { - return; - } - if (transform) { - this._finalizeCurrentTransform(e); - shouldRender = transform.actionPerformed; - } - if (!isClick) { - var targetWasActive = target === this._activeObject; - this._maybeGroupObjects(e); - if (!shouldRender) { - shouldRender = ( - this._shouldRender(target) || - (!targetWasActive && target === this._activeObject) - ); - } - } - var corner, pointer; - if (target) { - corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) + if (!this._isMainEvent(e)) { + return; + } + if (transform) { + this._finalizeCurrentTransform(e); + shouldRender = transform.actionPerformed; + } + if (!isClick) { + var targetWasActive = target === this._activeObject; + this._maybeGroupObjects(e); + if (!shouldRender) { + shouldRender = ( + this._shouldRender(target) || + (!targetWasActive && target === this._activeObject) ); - if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { - this.setActiveObject(target, e); - shouldRender = true; - } - else { - var control = target.controls[corner], - mouseUpHandler = control && control.getMouseUpHandler(e, target, control); - if (mouseUpHandler) { - pointer = this.getPointer(e); - mouseUpHandler(e, transform, pointer.x, pointer.y); - } - } - target.isMoving = false; - } - // if we are ending up a transform on a different control or a new object - // fire the original mouse up from the corner that started the transform - if (transform && (transform.target !== target || transform.corner !== corner)) { - var originalControl = transform.target && transform.target.controls[transform.corner], - originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); - pointer = pointer || this.getPointer(e); - originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); - } - this._setCursorFromEvent(e, target); - this._handleEvent(e, 'up', LEFT_CLICK, isClick); - this._groupSelector = null; - this._currentTransform = null; - // reset the target information about which corner is selected - target && (target.__corner = 0); - if (shouldRender) { - this.requestRenderAll(); } - else if (!isClick) { - this.renderTop(); + } + var corner, pointer; + if (target) { + corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { + this.setActiveObject(target, e); + shouldRender = true; } - }, + else { + var control = target.controls[corner], + mouseUpHandler = control && control.getMouseUpHandler(e, target, control); + if (mouseUpHandler) { + pointer = this.getPointer(e); + mouseUpHandler(e, transform, pointer.x, pointer.y); + } + } + target.isMoving = false; + } + // if we are ending up a transform on a different control or a new object + // fire the original mouse up from the corner that started the transform + if (transform && (transform.target !== target || transform.corner !== corner)) { + var originalControl = transform.target && transform.target.controls[transform.corner], + originalMouseUpHandler = originalControl && originalControl.getMouseUpHandler(e, target, control); + pointer = pointer || this.getPointer(e); + originalMouseUpHandler && originalMouseUpHandler(e, transform, pointer.x, pointer.y); + } + this._setCursorFromEvent(e, target); + this._handleEvent(e, 'up', LEFT_CLICK, isClick); + this._groupSelector = null; + this._currentTransform = null; + // reset the target information about which corner is selected + target && (target.__corner = 0); + if (shouldRender) { + this.requestRenderAll(); + } + else if (!isClick) { + this.renderTop(); + } + }, - /** - * @private - * Handle event firing for target and subtargets - * @param {Event} e event from mouse - * @param {String} eventType event to fire (up, down or move) - * @return {Fabric.Object} target return the the target found, for internal reasons. - */ - _simpleEventHandler: function(eventType, e) { - var target = this.findTarget(e), - targets = this.targets, - options = { - e: e, - target: target, - subTargets: targets, - }; - this.fire(eventType, options); - target && target.fire(eventType, options); - if (!targets) { - return target; - } - for (var i = 0; i < targets.length; i++) { - targets[i].fire(eventType, options); - } + /** + * @private + * Handle event firing for target and subtargets + * @param {Event} e event from mouse + * @param {String} eventType event to fire (up, down or move) + * @return {Fabric.Object} target return the the target found, for internal reasons. + */ + _simpleEventHandler: function(eventType, e) { + var target = this.findTarget(e), + targets = this.targets, + options = { + e: e, + target: target, + subTargets: targets, + }; + this.fire(eventType, options); + target && target.fire(eventType, options); + if (!targets) { return target; - }, - - /** - * @private - * Handle event firing for target and subtargets - * @param {Event} e event from mouse - * @param {String} eventType event to fire (up, down or move) - * @param {fabric.Object} targetObj receiving event - * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right - * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. - */ - _handleEvent: function(e, eventType, button, isClick) { - var target = this._target, - targets = this.targets || [], - options = { - e: e, - target: target, - subTargets: targets, - button: button || LEFT_CLICK, - isClick: isClick || false, - pointer: this._pointer, - absolutePointer: this._absolutePointer, - transform: this._currentTransform - }; - if (eventType === 'up') { - options.currentTarget = this.findTarget(e); - options.currentSubTargets = this.targets; - } - this.fire('mouse:' + eventType, options); - target && target.fire('mouse' + eventType, options); - for (var i = 0; i < targets.length; i++) { - targets[i].fire('mouse' + eventType, options); - } - }, + } + for (var i = 0; i < targets.length; i++) { + targets[i].fire(eventType, options); + } + return target; + }, - /** - * @private - * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event - */ - _finalizeCurrentTransform: function(e) { + /** + * @private + * Handle event firing for target and subtargets + * @param {Event} e event from mouse + * @param {String} eventType event to fire (up, down or move) + * @param {fabric.Object} targetObj receiving event + * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right + * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. + */ + _handleEvent: function(e, eventType, button, isClick) { + var target = this._target, + targets = this.targets || [], + options = { + e: e, + target: target, + subTargets: targets, + button: button || LEFT_CLICK, + isClick: isClick || false, + pointer: this._pointer, + absolutePointer: this._absolutePointer, + transform: this._currentTransform + }; + if (eventType === 'up') { + options.currentTarget = this.findTarget(e); + options.currentSubTargets = this.targets; + } + this.fire('mouse:' + eventType, options); + target && target.fire('mouse' + eventType, options); + for (var i = 0; i < targets.length; i++) { + targets[i].fire('mouse' + eventType, options); + } + }, - var transform = this._currentTransform, - target = transform.target, - options = { - e: e, - target: target, - transform: transform, - action: transform.action, - }; + /** + * @private + * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event + */ + _finalizeCurrentTransform: function(e) { - if (target._scaling) { - target._scaling = false; - } + var transform = this._currentTransform, + target = transform.target, + options = { + e: e, + target: target, + transform: transform, + action: transform.action, + }; - target.setCoords(); + if (target._scaling) { + target._scaling = false; + } - if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { - this._fire('modified', options); - } - }, + target.setCoords(); - /** - * @private - * @param {Event} e Event object fired on mousedown - */ - _onMouseDownInDrawingMode: function(e) { - this._isCurrentlyDrawing = true; - if (this.getActiveObject()) { - this.discardActiveObject(e).requestRenderAll(); - } - var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); - this._handleEvent(e, 'down'); - }, + if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { + this._fire('modified', options); + } + }, - /** - * @private - * @param {Event} e Event object fired on mousemove - */ - _onMouseMoveInDrawingMode: function(e) { - if (this._isCurrentlyDrawing) { - var pointer = this.getPointer(e); - this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); - } - this.setCursor(this.freeDrawingCursor); - this._handleEvent(e, 'move'); - }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseDownInDrawingMode: function(e) { + this._isCurrentlyDrawing = true; + if (this.getActiveObject()) { + this.discardActiveObject(e).requestRenderAll(); + } + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); + this._handleEvent(e, 'down'); + }, - /** - * @private - * @param {Event} e Event object fired on mouseup - */ - _onMouseUpInDrawingMode: function(e) { + /** + * @private + * @param {Event} e Event object fired on mousemove + */ + _onMouseMoveInDrawingMode: function(e) { + if (this._isCurrentlyDrawing) { var pointer = this.getPointer(e); - this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); - this._handleEvent(e, 'up'); - }, + this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); + } + this.setCursor(this.freeDrawingCursor); + this._handleEvent(e, 'move'); + }, - /** - * Method that defines the actions when mouse is clicked on canvas. - * The method inits the currentTransform parameters and renders all the - * canvas so the current image can be placed on the top canvas and the rest - * in on the container one. - * @private - * @param {Event} e Event object fired on mousedown - */ - __onMouseDown: function (e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'down:before'); - var target = this._target; - // if right click just fire events - if (checkClick(e, RIGHT_CLICK)) { - if (this.fireRightClick) { - this._handleEvent(e, 'down', RIGHT_CLICK); - } - return; - } + /** + * @private + * @param {Event} e Event object fired on mouseup + */ + _onMouseUpInDrawingMode: function(e) { + var pointer = this.getPointer(e); + this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); + this._handleEvent(e, 'up'); + }, - if (checkClick(e, MIDDLE_CLICK)) { - if (this.fireMiddleClick) { - this._handleEvent(e, 'down', MIDDLE_CLICK); - } - return; + /** + * Method that defines the actions when mouse is clicked on canvas. + * The method inits the currentTransform parameters and renders all the + * canvas so the current image can be placed on the top canvas and the rest + * in on the container one. + * @private + * @param {Event} e Event object fired on mousedown + */ + __onMouseDown: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'down:before'); + var target = this._target; + // if right click just fire events + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'down', RIGHT_CLICK); } + return; + } - if (this.isDrawingMode) { - this._onMouseDownInDrawingMode(e); - return; + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'down', MIDDLE_CLICK); } + return; + } - if (!this._isMainEvent(e)) { - return; - } + if (this.isDrawingMode) { + this._onMouseDownInDrawingMode(e); + return; + } - // ignore if some object is being transformed at this moment - if (this._currentTransform) { - return; - } + if (!this._isMainEvent(e)) { + return; + } - var pointer = this._pointer; - // save pointer for check in __onMouseUp event - this._previousPointer = pointer; - var shouldRender = this._shouldRender(target), - shouldGroup = this._shouldGroup(e, target); - if (this._shouldClearSelection(e, target)) { - this.discardActiveObject(e); - } - else if (shouldGroup) { - this._handleGrouping(e, target); - target = this._activeObject; - } + // ignore if some object is being transformed at this moment + if (this._currentTransform) { + return; + } - if (this.selection && (!target || - (!target.selectable && !target.isEditing && target !== this._activeObject))) { - this._groupSelector = { - ex: this._absolutePointer.x, - ey: this._absolutePointer.y, - top: 0, - left: 0 - }; - } + var pointer = this._pointer; + // save pointer for check in __onMouseUp event + this._previousPointer = pointer; + var shouldRender = this._shouldRender(target), + shouldGroup = this._shouldGroup(e, target); + if (this._shouldClearSelection(e, target)) { + this.discardActiveObject(e); + } + else if (shouldGroup) { + this._handleGrouping(e, target); + target = this._activeObject; + } - if (target) { - var alreadySelected = target === this._activeObject; - if (target.selectable && target.activeOn === 'down') { - this.setActiveObject(target, e); - } - var corner = target._findTargetCorner( - this.getPointer(e, true), - fabric.util.isTouchEvent(e) - ); - target.__corner = corner; - if (target === this._activeObject && (corner || !shouldGroup)) { - this._setupCurrentTransform(e, target, alreadySelected); - var control = target.controls[corner], - pointer = this.getPointer(e), - mouseDownHandler = control && control.getMouseDownHandler(e, target, control); - if (mouseDownHandler) { - mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); - } + if (this.selection && (!target || + (!target.selectable && !target.isEditing && target !== this._activeObject))) { + this._groupSelector = { + ex: this._absolutePointer.x, + ey: this._absolutePointer.y, + top: 0, + left: 0 + }; + } + + if (target) { + var alreadySelected = target === this._activeObject; + if (target.selectable && target.activeOn === 'down') { + this.setActiveObject(target, e); + } + var corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + target.__corner = corner; + if (target === this._activeObject && (corner || !shouldGroup)) { + this._setupCurrentTransform(e, target, alreadySelected); + var control = target.controls[corner], + pointer = this.getPointer(e), + mouseDownHandler = control && control.getMouseDownHandler(e, target, control); + if (mouseDownHandler) { + mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); } } - var invalidate = shouldRender || shouldGroup; - // we clear `_objectsToRender` in case of a change in order to repopulate it at rendering - // run before firing the `down` event to give the dev a chance to populate it themselves - invalidate && (this._objectsToRender = undefined); - this._handleEvent(e, 'down'); - // we must renderAll so that we update the visuals - invalidate && this.requestRenderAll(); - }, + } + this._handleEvent(e, 'down'); + // we must renderAll so that we update the visuals + (shouldRender || shouldGroup) && this.requestRenderAll(); + }, - /** - * reset cache form common information needed during event processing - * @private - */ - _resetTransformEventData: function() { - this._target = null; - this._pointer = null; - this._absolutePointer = null; - }, + /** + * reset cache form common information needed during event processing + * @private + */ + _resetTransformEventData: function() { + this._target = null; + this._pointer = null; + this._absolutePointer = null; + }, - /** - * Cache common information needed during event processing - * @private - * @param {Event} e Event object fired on event - */ - _cacheTransformEventData: function(e) { - // reset in order to avoid stale caching - this._resetTransformEventData(); - this._pointer = this.getPointer(e, true); - this._absolutePointer = this.restorePointerVpt(this._pointer); - this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; - }, - - /** - * @private - */ - _beforeTransform: function(e) { - var t = this._currentTransform; - this.stateful && t.target.saveState(); - this.fire('before:transform', { - e: e, - transform: t, - }); - }, + /** + * Cache common information needed during event processing + * @private + * @param {Event} e Event object fired on event + */ + _cacheTransformEventData: function(e) { + // reset in order to avoid stale caching + this._resetTransformEventData(); + this._pointer = this.getPointer(e, true); + this._absolutePointer = this.restorePointerVpt(this._pointer); + this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; + }, - /** - * Method that defines the actions when mouse is hovering the canvas. - * The currentTransform parameter will define whether the user is rotating/scaling/translating - * an image or neither of them (only hovering). A group selection is also possible and would cancel - * all any other type of action. - * In case of an image transformation only the top canvas will be rendered. - * @private - * @param {Event} e Event object fired on mousemove - */ - __onMouseMove: function (e) { - this._handleEvent(e, 'move:before'); - this._cacheTransformEventData(e); - var target, pointer; + /** + * @private + */ + _beforeTransform: function(e) { + var t = this._currentTransform; + this.stateful && t.target.saveState(); + this.fire('before:transform', { + e: e, + transform: t, + }); + }, - if (this.isDrawingMode) { - this._onMouseMoveInDrawingMode(e); - return; - } + /** + * Method that defines the actions when mouse is hovering the canvas. + * The currentTransform parameter will define whether the user is rotating/scaling/translating + * an image or neither of them (only hovering). A group selection is also possible and would cancel + * all any other type of action. + * In case of an image transformation only the top canvas will be rendered. + * @private + * @param {Event} e Event object fired on mousemove + */ + __onMouseMove: function (e) { + this._handleEvent(e, 'move:before'); + this._cacheTransformEventData(e); + var target, pointer; - if (!this._isMainEvent(e)) { - return; - } + if (this.isDrawingMode) { + this._onMouseMoveInDrawingMode(e); + return; + } - var groupSelector = this._groupSelector; + if (!this._isMainEvent(e)) { + return; + } - // We initially clicked in an empty area, so we draw a box for multiple selection - if (groupSelector) { - pointer = this._absolutePointer; + var groupSelector = this._groupSelector; - groupSelector.left = pointer.x - groupSelector.ex; - groupSelector.top = pointer.y - groupSelector.ey; + // We initially clicked in an empty area, so we draw a box for multiple selection + if (groupSelector) { + pointer = this._absolutePointer; - this.renderTop(); - } - else if (!this._currentTransform) { - target = this.findTarget(e) || null; - this._setCursorFromEvent(e, target); - this._fireOverOutEvents(target, e); - } - else { - this._transformObject(e); - } - this._handleEvent(e, 'move'); - this._resetTransformEventData(); - }, + groupSelector.left = pointer.x - groupSelector.ex; + groupSelector.top = pointer.y - groupSelector.ey; - /** - * Manage the mouseout, mouseover events for the fabric object on the canvas - * @param {Fabric.Object} target the target where the target from the mousemove event - * @param {Event} e Event object fired on mousemove - * @private - */ - _fireOverOutEvents: function(target, e) { - var _hoveredTarget = this._hoveredTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); + this.renderTop(); + } + else if (!this._currentTransform) { + target = this.findTarget(e) || null; + this._setCursorFromEvent(e, target); + this._fireOverOutEvents(target, e); + } + else { + this._transformObject(e); + } + this._handleEvent(e, 'move'); + this._resetTransformEventData(); + }, - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _hoveredTarget, + /** + * Manage the mouseout, mouseover events for the fabric object on the canvas + * @param {Fabric.Object} target the target where the target from the mousemove event + * @param {Event} e Event object fired on mousemove + * @private + */ + _fireOverOutEvents: function(target, e) { + var _hoveredTarget = this._hoveredTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); + + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _hoveredTarget, + evtOut: 'mouseout', + canvasEvtOut: 'mouse:out', + evtIn: 'mouseover', + canvasEvtIn: 'mouse:over', + }); + for (var i = 0; i < length; i++){ + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], evtOut: 'mouseout', - canvasEvtOut: 'mouse:out', evtIn: 'mouseover', - canvasEvtIn: 'mouse:over', }); - for (var i = 0; i < length; i++){ - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], - evtOut: 'mouseout', - evtIn: 'mouseover', - }); - } - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - }, + } + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + }, - /** - * Manage the dragEnter, dragLeave events for the fabric objects on the canvas - * @param {Fabric.Object} target the target where the target from the onDrag event - * @param {Event} e Event object fired on ondrag - * @private - */ - _fireEnterLeaveEvents: function(target, e) { - var _draggedoverTarget = this._draggedoverTarget, - _hoveredTargets = this._hoveredTargets, targets = this.targets, - length = Math.max(_hoveredTargets.length, targets.length); + /** + * Manage the dragEnter, dragLeave events for the fabric objects on the canvas + * @param {Fabric.Object} target the target where the target from the onDrag event + * @param {Event} e Event object fired on ondrag + * @private + */ + _fireEnterLeaveEvents: function(target, e) { + var _draggedoverTarget = this._draggedoverTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); - this.fireSyntheticInOutEvents(target, e, { - oldTarget: _draggedoverTarget, + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _draggedoverTarget, + evtOut: 'dragleave', + evtIn: 'dragenter', + }); + for (var i = 0; i < length; i++) { + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], evtOut: 'dragleave', evtIn: 'dragenter', }); - for (var i = 0; i < length; i++) { - this.fireSyntheticInOutEvents(targets[i], e, { - oldTarget: _hoveredTargets[i], - evtOut: 'dragleave', - evtIn: 'dragenter', - }); - } - this._draggedoverTarget = target; - }, + } + this._draggedoverTarget = target; + }, - /** - * Manage the synthetic in/out events for the fabric objects on the canvas - * @param {Fabric.Object} target the target where the target from the supported events - * @param {Event} e Event object fired - * @param {Object} config configuration for the function to work - * @param {String} config.targetName property on the canvas where the old target is stored - * @param {String} [config.canvasEvtOut] name of the event to fire at canvas level for out - * @param {String} config.evtOut name of the event to fire for out - * @param {String} [config.canvasEvtIn] name of the event to fire at canvas level for in - * @param {String} config.evtIn name of the event to fire for in - * @private - */ - fireSyntheticInOutEvents: function(target, e, config) { - var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, - targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; - if (targetChanged) { - inOpt = { e: e, target: target, previousTarget: oldTarget }; - outOpt = { e: e, target: oldTarget, nextTarget: target }; - } - inFires = target && targetChanged; - outFires = oldTarget && targetChanged; - if (outFires) { - canvasEvtOut && this.fire(canvasEvtOut, outOpt); - oldTarget.fire(config.evtOut, outOpt); - } - if (inFires) { - canvasEvtIn && this.fire(canvasEvtIn, inOpt); - target.fire(config.evtIn, inOpt); - } - }, + /** + * Manage the synthetic in/out events for the fabric objects on the canvas + * @param {Fabric.Object} target the target where the target from the supported events + * @param {Event} e Event object fired + * @param {Object} config configuration for the function to work + * @param {String} config.targetName property on the canvas where the old target is stored + * @param {String} [config.canvasEvtOut] name of the event to fire at canvas level for out + * @param {String} config.evtOut name of the event to fire for out + * @param {String} [config.canvasEvtIn] name of the event to fire at canvas level for in + * @param {String} config.evtIn name of the event to fire for in + * @private + */ + fireSyntheticInOutEvents: function(target, e, config) { + var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, + targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; + if (targetChanged) { + inOpt = { e: e, target: target, previousTarget: oldTarget }; + outOpt = { e: e, target: oldTarget, nextTarget: target }; + } + inFires = target && targetChanged; + outFires = oldTarget && targetChanged; + if (outFires) { + canvasEvtOut && this.fire(canvasEvtOut, outOpt); + oldTarget.fire(config.evtOut, outOpt); + } + if (inFires) { + canvasEvtIn && this.fire(canvasEvtIn, inOpt); + target.fire(config.evtIn, inOpt); + } + }, - /** - * Method that defines actions when an Event Mouse Wheel - * @param {Event} e Event object fired on mouseup - */ - __onMouseWheel: function(e) { - this._cacheTransformEventData(e); - this._handleEvent(e, 'wheel'); - this._resetTransformEventData(); - }, + /** + * Method that defines actions when an Event Mouse Wheel + * @param {Event} e Event object fired on mouseup + */ + __onMouseWheel: function(e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'wheel'); + this._resetTransformEventData(); + }, - /** - * @private - * @param {Event} e Event fired on mousemove - */ - _transformObject: function(e) { - var pointer = this.getPointer(e), - transform = this._currentTransform, - target = transform.target, - // transform pointer to target's containing coordinate plane - // both pointer and object should agree on every point - localPointer = target.group ? - fabric.util.sendPointToPlane(pointer, null, target.group.calcTransformMatrix()) : - pointer; - - transform.reset = false; - transform.shiftKey = e.shiftKey; - transform.altKey = e[this.centeredKey]; - - this._performTransformAction(e, transform, localPointer); - transform.actionPerformed && this.requestRenderAll(); - }, + /** + * @private + * @param {Event} e Event fired on mousemove + */ + _transformObject: function(e) { + var pointer = this.getPointer(e), + transform = this._currentTransform; - /** - * @private - */ - _performTransformAction: function(e, transform, pointer) { - var x = pointer.x, - y = pointer.y, - action = transform.action, - actionPerformed = false, - actionHandler = transform.actionHandler; - // this object could be created from the function in the control handlers + transform.reset = false; + transform.shiftKey = e.shiftKey; + transform.altKey = e[this.centeredKey]; + this._performTransformAction(e, transform, pointer); + transform.actionPerformed && this.requestRenderAll(); + }, - if (actionHandler) { - actionPerformed = actionHandler(e, transform, x, y); - } - if (action === 'drag' && actionPerformed) { - transform.target.isMoving = true; - this.setCursor(transform.target.moveCursor || this.moveCursor); - } - transform.actionPerformed = transform.actionPerformed || actionPerformed; - }, + /** + * @private + */ + _performTransformAction: function(e, transform, pointer) { + var x = pointer.x, + y = pointer.y, + action = transform.action, + actionPerformed = false, + actionHandler = transform.actionHandler; + // this object could be created from the function in the control handlers - /** - * @private - */ - _fire: fabric.controlsUtils.fireEvent, - /** - * Sets the cursor depending on where the canvas is being hovered. - * Note: very buggy in Opera - * @param {Event} e Event object - * @param {Object} target Object that the mouse is hovering, if so. - */ - _setCursorFromEvent: function (e, target) { - if (!target) { - this.setCursor(this.defaultCursor); - return false; - } - var hoverCursor = target.hoverCursor || this.hoverCursor, - activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? - this._activeObject : null, - // only show proper corner when group selection is not active - corner = (!activeSelection || !activeSelection.contains(target)) - // here we call findTargetCorner always with undefined for the touch parameter. - // we assume that if you are using a cursor you do not need to interact with - // the bigger touch area. - && target._findTargetCorner(this.getPointer(e, true)); - - if (!corner) { - if (target.subTargetCheck){ - // hoverCursor should come from top-most subTarget, - // so we walk the array backwards - this.targets.concat().reverse().map(function(_target){ - hoverCursor = _target.hoverCursor || hoverCursor; - }); - } - this.setCursor(hoverCursor); - } - else { - this.setCursor(this.getCornerCursor(corner, target, e)); - } - }, + if (actionHandler) { + actionPerformed = actionHandler(e, transform, x, y); + } + if (action === 'drag' && actionPerformed) { + transform.target.isMoving = true; + this.setCursor(transform.target.moveCursor || this.moveCursor); + } + transform.actionPerformed = transform.actionPerformed || actionPerformed; + }, - /** - * @private - */ - getCornerCursor: function(corner, target, e) { - var control = target.controls[corner]; - return control.cursorStyleHandler(e, control, target); + /** + * @private + */ + _fire: fabric.controlsUtils.fireEvent, + + /** + * Sets the cursor depending on where the canvas is being hovered. + * Note: very buggy in Opera + * @param {Event} e Event object + * @param {Object} target Object that the mouse is hovering, if so. + */ + _setCursorFromEvent: function (e, target) { + if (!target) { + this.setCursor(this.defaultCursor); + return false; } - }); - })(typeof exports !== 'undefined' ? exports : window); + var hoverCursor = target.hoverCursor || this.hoverCursor, + activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? + this._activeObject : null, + // only show proper corner when group selection is not active + corner = (!activeSelection || !activeSelection.contains(target)) + // here we call findTargetCorner always with undefined for the touch parameter. + // we assume that if you are using a cursor you do not need to interact with + // the bigger touch area. + && target._findTargetCorner(this.getPointer(e, true)); + + if (!corner) { + if (target.subTargetCheck){ + // hoverCursor should come from top-most subTarget, + // so we walk the array backwards + this.targets.concat().reverse().map(function(_target){ + hoverCursor = _target.hoverCursor || hoverCursor; + }); + } + this.setCursor(hoverCursor); + } + else { + this.setCursor(this.getCornerCursor(corner, target, e)); + } + }, - (function(global) { + /** + * @private + */ + getCornerCursor: function(corner, target, e) { + var control = target.controls[corner]; + return control.cursorStyleHandler(e, control, target); + } + }); +})(); - var fabric = global.fabric, - min = Math.min, - max = Math.max; - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { +(function() { - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - * @return {Boolean} - */ - _shouldGroup: function(e, target) { - var activeObject = this._activeObject; - // check if an active object exists on canvas and if the user is pressing the `selectionKey` while canvas supports multi selection. - return !!activeObject && this._isSelectionKeyPressed(e) && this.selection - // on top of that the user also has to hit a target that is selectable. - && !!target && target.selectable - // if all pre-requisite pass, the target is either something different from the current - // activeObject or if an activeSelection already exists - // TODO at time of writing why `activeObject.type === 'activeSelection'` matter is unclear. - // is a very old condition uncertain if still valid. - && (activeObject !== target || activeObject.type === 'activeSelection') - // make sure `activeObject` and `target` aren't ancestors of each other - && !target.isDescendantOf(activeObject) && !activeObject.isDescendantOf(target) - // target accepts selection - && !target.onSelect({ e: e }); - }, + var min = Math.min, + max = Math.max; - /** - * @private - * @param {Event} e Event object - * @param {fabric.Object} target - */ - _handleGrouping: function (e, target) { - var activeObject = this._activeObject; - // avoid multi select when shift click on a corner - if (activeObject.__corner) { + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { + + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + * @return {Boolean} + */ + _shouldGroup: function(e, target) { + var activeObject = this._activeObject; + return activeObject && this._isSelectionKeyPressed(e) && target && target.selectable && this.selection && + (activeObject !== target || activeObject.type === 'activeSelection') && !target.onSelect({ e: e }); + }, + + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _handleGrouping: function (e, target) { + var activeObject = this._activeObject; + // avoid multi select when shift click on a corner + if (activeObject.__corner) { + return; + } + if (target === activeObject) { + // if it's a group, find target again, using activeGroup objects + target = this.findTarget(e, true); + // if even object is not found or we are on activeObjectCorner, bail out + if (!target || !target.selectable) { return; } - if (target === activeObject) { - // if it's a group, find target again, using activeGroup objects - target = this.findTarget(e, true); - // if even object is not found or we are on activeObjectCorner, bail out - if (!target || !target.selectable) { - return; - } - } - if (activeObject && activeObject.type === 'activeSelection') { - this._updateActiveSelection(target, e); - } - else { - this._createActiveSelection(target, e); - } - }, + } + if (activeObject && activeObject.type === 'activeSelection') { + this._updateActiveSelection(target, e); + } + else { + this._createActiveSelection(target, e); + } + }, - /** - * @private - */ - _updateActiveSelection: function(target, e) { - var activeSelection = this._activeObject, - currentActiveObjects = activeSelection._objects.slice(0); - if (target.group === activeSelection) { - activeSelection.remove(target); - this._hoveredTarget = target; - this._hoveredTargets = this.targets.concat(); - if (activeSelection.size() === 1) { - // activate last remaining object - this._setActiveObject(activeSelection.item(0), e); - } - } - else { - activeSelection.add(target); - this._hoveredTarget = activeSelection; - this._hoveredTargets = this.targets.concat(); + /** + * @private + */ + _updateActiveSelection: function(target, e) { + var activeSelection = this._activeObject, + currentActiveObjects = activeSelection._objects.slice(0); + if (activeSelection.contains(target)) { + activeSelection.removeWithUpdate(target); + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + if (activeSelection.size() === 1) { + // activate last remaining object + this._setActiveObject(activeSelection.item(0), e); } - this._fireSelectionEvents(currentActiveObjects, e); - }, + } + else { + activeSelection.addWithUpdate(target); + this._hoveredTarget = activeSelection; + this._hoveredTargets = this.targets.concat(); + } + this._fireSelectionEvents(currentActiveObjects, e); + }, - /** - * @private - */ - _createActiveSelection: function(target, e) { - var currentActives = this.getActiveObjects(), group = this._createGroup(target); - this._hoveredTarget = group; - // ISSUE 4115: should we consider subTargets here? - // this._hoveredTargets = []; - // this._hoveredTargets = this.targets.concat(); - this._setActiveObject(group, e); - this._fireSelectionEvents(currentActives, e); - }, + /** + * @private + */ + _createActiveSelection: function(target, e) { + var currentActives = this.getActiveObjects(), group = this._createGroup(target); + this._hoveredTarget = group; + // ISSUE 4115: should we consider subTargets here? + // this._hoveredTargets = []; + // this._hoveredTargets = this.targets.concat(); + this._setActiveObject(group, e); + this._fireSelectionEvents(currentActives, e); + }, + /** + * @private + * @param {Object} target + */ + _createGroup: function(target) { + var objects = this._objects, + isActiveLower = objects.indexOf(this._activeObject) < objects.indexOf(target), + groupObjects = isActiveLower + ? [this._activeObject, target] + : [target, this._activeObject]; + this._activeObject.isEditing && this._activeObject.exitEditing(); + return new fabric.ActiveSelection(groupObjects, { + canvas: this + }); + }, - /** - * @private - * @param {Object} target - * @returns {fabric.ActiveSelection} - */ - _createGroup: function(target) { - var activeObject = this._activeObject; - var groupObjects = target.isInFrontOf(activeObject) ? - [activeObject, target] : - [target, activeObject]; - activeObject.isEditing && activeObject.exitEditing(); - // handle case: target is nested - return new fabric.ActiveSelection(groupObjects, { - canvas: this - }); - }, + /** + * @private + * @param {Event} e mouse event + */ + _groupSelectedObjects: function (e) { - /** - * @private - * @param {Event} e mouse event - */ - _groupSelectedObjects: function (e) { + var group = this._collectObjects(e), + aGroup; - var group = this._collectObjects(e), - aGroup; + // do not create group for 1 element only + if (group.length === 1) { + this.setActiveObject(group[0], e); + } + else if (group.length > 1) { + aGroup = new fabric.ActiveSelection(group.reverse(), { + canvas: this + }); + this.setActiveObject(aGroup, e); + } + }, - // do not create group for 1 element only - if (group.length === 1) { - this.setActiveObject(group[0], e); - } - else if (group.length > 1) { - aGroup = new fabric.ActiveSelection(group.reverse(), { - canvas: this - }); - this.setActiveObject(aGroup, e); + /** + * @private + */ + _collectObjects: function(e) { + var group = [], + currentObject, + x1 = this._groupSelector.ex, + y1 = this._groupSelector.ey, + x2 = x1 + this._groupSelector.left, + y2 = y1 + this._groupSelector.top, + selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), + selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), + allowIntersect = !this.selectionFullyContained, + isClick = x1 === x2 && y1 === y2; + // we iterate reverse order to collect top first in case of click. + for (var i = this._objects.length; i--; ) { + currentObject = this._objects[i]; + + if (!currentObject || !currentObject.selectable || !currentObject.visible) { + continue; } - }, - - /** - * @private - */ - _collectObjects: function(e) { - var group = [], - currentObject, - x1 = this._groupSelector.ex, - y1 = this._groupSelector.ey, - x2 = x1 + this._groupSelector.left, - y2 = y1 + this._groupSelector.top, - selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), - selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), - allowIntersect = !this.selectionFullyContained, - isClick = x1 === x2 && y1 === y2; - // we iterate reverse order to collect top first in case of click. - for (var i = this._objects.length; i--; ) { - currentObject = this._objects[i]; - - if (!currentObject || !currentObject.selectable || !currentObject.visible) { - continue; - } - if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || - currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) || - (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) || - (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true)) - ) { - group.push(currentObject); - // only add one object if it's a click - if (isClick) { - break; - } + if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || + currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) || + (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) || + (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true)) + ) { + group.push(currentObject); + // only add one object if it's a click + if (isClick) { + break; } } + } - if (group.length > 1) { - group = group.filter(function(object) { - return !object.onSelect({ e: e }); - }); - } + if (group.length > 1) { + group = group.filter(function(object) { + return !object.onSelect({ e: e }); + }); + } - return group; - }, + return group; + }, - /** - * @private - */ - _maybeGroupObjects: function(e) { - if (this.selection && this._groupSelector) { - this._groupSelectedObjects(e); - } - this.setCursor(this.defaultCursor); - // clear selection and current transformation - this._groupSelector = null; + /** + * @private + */ + _maybeGroupObjects: function(e) { + if (this.selection && this._groupSelector) { + this._groupSelectedObjects(e); } - }); + this.setCursor(this.defaultCursor); + // clear selection and current transformation + this._groupSelector = null; + } + }); - })(typeof exports !== 'undefined' ? exports : window); +})(); - (function (global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately - * @param {Object} [options] Options object - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 - * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. - * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format - * @see {@link https://jsfiddle.net/xsjua1rd/ demo} - * @example Generate jpeg dataURL with lower quality - * var dataURL = canvas.toDataURL({ - * format: 'jpeg', - * quality: 0.8 - * }); - * @example Generate cropped png dataURL (clipping of canvas) - * var dataURL = canvas.toDataURL({ - * format: 'png', - * left: 100, - * top: 100, - * width: 200, - * height: 200 - * }); - * @example Generate double scaled png dataURL - * var dataURL = canvas.toDataURL({ - * format: 'png', - * multiplier: 2 - * }); - * @example Generate dataURL with objects that overlap a specified object - * var myObject; - * var dataURL = canvas.toDataURL({ - * filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject) - * }); - */ - toDataURL: function (options) { - options || (options = { }); - - var format = options.format || 'png', - quality = options.quality || 1, - multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), - canvasEl = this.toCanvasElement(multiplier, options); - return fabric.util.toDataURL(canvasEl, format, quality); - }, +(function () { + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Create a new HTMLCanvas element painted with the current canvas content. - * No need to resize the actual one or repaint it. - * Will transfer object ownership to a new canvas, paint it, and set everything back. - * This is an intermediary step used to get to a dataUrl but also it is useful to - * create quick image copies of a canvas without passing for the dataUrl string - * @param {Number} [multiplier] a zoom factor. - * @param {Object} [options] Cropping informations - * @param {Number} [options.left] Cropping left offset. - * @param {Number} [options.top] Cropping top offset. - * @param {Number} [options.width] Cropping width. - * @param {Number} [options.height] Cropping height. - * @param {(object: fabric.Object) => boolean} [options.filter] Function to filter objects. - */ - toCanvasElement: function (multiplier, options) { - multiplier = multiplier || 1; - options = options || { }; - var scaledWidth = (options.width || this.width) * multiplier, - scaledHeight = (options.height || this.height) * multiplier, - zoom = this.getZoom(), - originalWidth = this.width, - originalHeight = this.height, - newZoom = zoom * multiplier, - vp = this.viewportTransform, - translateX = (vp[4] - (options.left || 0)) * multiplier, - translateY = (vp[5] - (options.top || 0)) * multiplier, - originalInteractive = this.interactive, - newVp = [newZoom, 0, 0, newZoom, translateX, translateY], - originalRetina = this.enableRetinaScaling, - canvasEl = fabric.util.createCanvasElement(), - originalContextTop = this.contextTop, - objectsToRender = options.filter ? this._objects.filter(options.filter) : this._objects; - canvasEl.width = scaledWidth; - canvasEl.height = scaledHeight; - this.contextTop = null; - this.enableRetinaScaling = false; - this.interactive = false; - this.viewportTransform = newVp; - this.width = scaledWidth; - this.height = scaledHeight; - this.calcViewportBoundaries(); - this.renderCanvas(canvasEl.getContext('2d'), objectsToRender); - this.viewportTransform = vp; - this.width = originalWidth; - this.height = originalHeight; - this.calcViewportBoundaries(); - this.interactive = originalInteractive; - this.enableRetinaScaling = originalRetina; - this.contextTop = originalContextTop; - return canvasEl; - }, - }); + /** + * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately + * @param {Object} [options] Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + * @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo} + * @example Generate jpeg dataURL with lower quality + * var dataURL = canvas.toDataURL({ + * format: 'jpeg', + * quality: 0.8 + * }); + * @example Generate cropped png dataURL (clipping of canvas) + * var dataURL = canvas.toDataURL({ + * format: 'png', + * left: 100, + * top: 100, + * width: 200, + * height: 200 + * }); + * @example Generate double scaled png dataURL + * var dataURL = canvas.toDataURL({ + * format: 'png', + * multiplier: 2 + * }); + */ + toDataURL: function (options) { + options || (options = { }); - })(typeof exports !== 'undefined' ? exports : window); + var format = options.format || 'png', + quality = options.quality || 1, + multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), + canvasEl = this.toCanvasElement(multiplier, options); + return fabric.util.toDataURL(canvasEl, format, quality); + }, + + /** + * Create a new HTMLCanvas element painted with the current canvas content. + * No need to resize the actual one or repaint it. + * Will transfer object ownership to a new canvas, paint it, and set everything back. + * This is an intermediary step used to get to a dataUrl but also it is useful to + * create quick image copies of a canvas without passing for the dataUrl string + * @param {Number} [multiplier] a zoom factor. + * @param {Object} [cropping] Cropping informations + * @param {Number} [cropping.left] Cropping left offset. + * @param {Number} [cropping.top] Cropping top offset. + * @param {Number} [cropping.width] Cropping width. + * @param {Number} [cropping.height] Cropping height. + */ + toCanvasElement: function(multiplier, cropping) { + multiplier = multiplier || 1; + cropping = cropping || { }; + var scaledWidth = (cropping.width || this.width) * multiplier, + scaledHeight = (cropping.height || this.height) * multiplier, + zoom = this.getZoom(), + originalWidth = this.width, + originalHeight = this.height, + newZoom = zoom * multiplier, + vp = this.viewportTransform, + translateX = (vp[4] - (cropping.left || 0)) * multiplier, + translateY = (vp[5] - (cropping.top || 0)) * multiplier, + originalInteractive = this.interactive, + newVp = [newZoom, 0, 0, newZoom, translateX, translateY], + originalRetina = this.enableRetinaScaling, + canvasEl = fabric.util.createCanvasElement(), + originalContextTop = this.contextTop; + canvasEl.width = scaledWidth; + canvasEl.height = scaledHeight; + this.contextTop = null; + this.enableRetinaScaling = false; + this.interactive = false; + this.viewportTransform = newVp; + this.width = scaledWidth; + this.height = scaledHeight; + this.calcViewportBoundaries(); + this.renderCanvas(canvasEl.getContext('2d'), this._objects); + this.viewportTransform = vp; + this.width = originalWidth; + this.height = originalHeight; + this.calcViewportBoundaries(); + this.interactive = originalInteractive; + this.enableRetinaScaling = originalRetina; + this.contextTop = originalContextTop; + return canvasEl; + }, + }); - (function (global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Populates canvas with data from the specified JSON. - * JSON format must conform to the one of {@link fabric.Canvas#toJSON} - * @param {String|Object} json JSON string or object - * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. - * @return {Promise} instance - * @chainable - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} - * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo} - * @example loadFromJSON - * canvas.loadFromJSON(json).then((canvas) => canvas.requestRenderAll()); - * @example loadFromJSON with reviver - * canvas.loadFromJSON(json, function(o, object) { - * // `o` = json object - * // `object` = fabric.Object instance - * // ... do some stuff ... - * }).then((canvas) => { - * ... canvas is restored, add your code. - * }); - */ - loadFromJSON: function (json, reviver) { - if (!json) { - return; - } +})(); - // serialize if it wasn't already - var serialized = (typeof json === 'string') - ? JSON.parse(json) - : Object.assign({}, json); - - var _this = this, - renderOnAddRemove = this.renderOnAddRemove; - - this.renderOnAddRemove = false; - - return fabric.util.enlivenObjects(serialized.objects || [], '', reviver) - .then(function(enlived) { - _this.clear(); - return fabric.util.enlivenObjectEnlivables({ - backgroundImage: serialized.backgroundImage, - backgroundColor: serialized.background, - overlayImage: serialized.overlayImage, - overlayColor: serialized.overlay, - clipPath: serialized.clipPath, - }) - .then(function(enlivedMap) { - _this.__setupCanvas(serialized, enlived, renderOnAddRemove); - _this.set(enlivedMap); - return _this; - }); - }); - }, - /** - * @private - * @param {Object} serialized Object with background and overlay information - * @param {Array} enlivenedObjects canvas objects - * @param {boolean} renderOnAddRemove renderOnAddRemove setting for the canvas - */ - __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove) { - var _this = this; - enlivenedObjects.forEach(function(obj, index) { - // we splice the array just in case some custom classes restored from JSON - // will add more object to canvas at canvas init. - _this.insertAt(obj, index); - }); - this.renderOnAddRemove = renderOnAddRemove; - // remove parts i cannot set as options - delete serialized.objects; - delete serialized.backgroundImage; - delete serialized.overlayImage; - delete serialized.background; - delete serialized.overlay; - // this._initOptions does too many things to just - // call it. Normally loading an Object from JSON - // create the Object instance. Here the Canvas is - // already an instance and we are just loading things over it - this._setOptions(serialized); - }, +fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + /** + * Populates canvas with data from the specified JSON. + * JSON format must conform to the one of {@link fabric.Canvas#toJSON} + * @param {String|Object} json JSON string or object + * @param {Function} callback Callback, invoked when json is parsed + * and corresponding objects (e.g: {@link fabric.Image}) + * are initialized + * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. + * @return {fabric.Canvas} instance + * @chainable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} + * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo} + * @example loadFromJSON + * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas)); + * @example loadFromJSON with reviver + * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) { + * // `o` = json object + * // `object` = fabric.Object instance + * // ... do some stuff ... + * }); + */ + loadFromJSON: function (json, callback, reviver) { + if (!json) { + return; + } - /** - * Clones canvas instance - * @param {Array} [properties] Array of properties to include in the cloned canvas and children - * @returns {Promise} - */ - clone: function (properties) { - var data = JSON.stringify(this.toJSON(properties)); - return this.cloneWithoutData().then(function(clone) { - return clone.loadFromJSON(data); - }); - }, + // serialize if it wasn't already + var serialized = (typeof json === 'string') + ? JSON.parse(json) + : fabric.util.object.clone(json); - /** - * Clones canvas instance without cloning existing data. - * This essentially copies canvas dimensions, clipping properties, etc. - * but leaves data empty (so that you can populate it with your own) - * @returns {Promise} - */ - cloneWithoutData: function() { - var el = fabric.util.createCanvasElement(); + var _this = this, + clipPath = serialized.clipPath, + renderOnAddRemove = this.renderOnAddRemove; + + this.renderOnAddRemove = false; - el.width = this.width; - el.height = this.height; - // this seems wrong. either Canvas or StaticCanvas - var clone = new fabric.Canvas(el); - var data = {}; - if (this.backgroundImage) { - data.backgroundImage = this.backgroundImage.toObject(); + delete serialized.clipPath; + + this._enlivenObjects(serialized.objects, function (enlivenedObjects) { + _this.clear(); + _this._setBgOverlay(serialized, function () { + if (clipPath) { + _this._enlivenObjects([clipPath], function (enlivenedCanvasClip) { + _this.clipPath = enlivenedCanvasClip[0]; + _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback); + }); } - if (this.backgroundColor) { - data.background = this.backgroundColor.toObject ? this.backgroundColor.toObject() : this.backgroundColor; + else { + _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback); } - return clone.loadFromJSON(data); - } + }); + }, reviver); + return this; + }, + + /** + * @private + * @param {Object} serialized Object with background and overlay information + * @param {Array} restored canvas objects + * @param {Function} cached renderOnAddRemove callback + * @param {Function} callback Invoked after all background and overlay images/patterns loaded + */ + __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove, callback) { + var _this = this; + enlivenedObjects.forEach(function(obj, index) { + // we splice the array just in case some custom classes restored from JSON + // will add more object to canvas at canvas init. + _this.insertAt(obj, index); }); - })(typeof exports !== 'undefined' ? exports : window); + this.renderOnAddRemove = renderOnAddRemove; + // remove parts i cannot set as options + delete serialized.objects; + delete serialized.backgroundImage; + delete serialized.overlayImage; + delete serialized.background; + delete serialized.overlay; + // this._initOptions does too many things to just + // call it. Normally loading an Object from JSON + // create the Object instance. Here the Canvas is + // already an instance and we are just loading things over it + this._setOptions(serialized); + this.renderAll(); + callback && callback(); + }, /** - * Adds support for multi-touch gestures using the Event.js library. - * Fires the following custom events: - * - touch:gesture - * - touch:drag - * - touch:orientation - * - touch:shake - * - touch:longpress + * @private + * @param {Object} serialized Object with background and overlay information + * @param {Function} callback Invoked after all background and overlay images/patterns loaded */ - (function(global) { + _setBgOverlay: function(serialized, callback) { + var loaded = { + backgroundColor: false, + overlayColor: false, + backgroundImage: false, + overlayImage: false + }; - var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians, - radiansToDegrees = fabric.util.radiansToDegrees; + if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background && !serialized.overlay) { + callback && callback(); + return; + } - fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { - /** - * Method that defines actions when an Event.js gesture is detected on an object. Currently only supports - * 2 finger gestures. - * @param {Event} e Event object by Event.js - * @param {Event} self Event proxy object by Event.js - */ - __onTransformGesture: function(e, self) { + var cbIfLoaded = function () { + if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) { + callback && callback(); + } + }; - if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) { - return; - } + this.__setBgOverlay('backgroundImage', serialized.backgroundImage, loaded, cbIfLoaded); + this.__setBgOverlay('overlayImage', serialized.overlayImage, loaded, cbIfLoaded); + this.__setBgOverlay('backgroundColor', serialized.background, loaded, cbIfLoaded); + this.__setBgOverlay('overlayColor', serialized.overlay, loaded, cbIfLoaded); + }, - var target = this.findTarget(e); - if ('undefined' !== typeof target) { - this.__gesturesParams = { - e: e, - self: self, - target: target - }; + /** + * @private + * @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor) + * @param {(Object|String)} value Value to set + * @param {Object} loaded Set loaded property to true if property is set + * @param {Object} callback Callback function to invoke after property is set + */ + __setBgOverlay: function(property, value, loaded, callback) { + var _this = this; - this.__gesturesRenderer(); - } + if (!value) { + loaded[property] = true; + callback && callback(); + return; + } - this.fire('touch:gesture', { - target: target, e: e, self: self - }); - }, - __gesturesParams: null, - __gesturesRenderer: function() { + if (property === 'backgroundImage' || property === 'overlayImage') { + fabric.util.enlivenObjects([value], function(enlivedObject){ + _this[property] = enlivedObject[0]; + loaded[property] = true; + callback && callback(); + }); + } + else { + this['set' + fabric.util.string.capitalize(property, true)](value, function() { + loaded[property] = true; + callback && callback(); + }); + } + }, - if (this.__gesturesParams === null || this._currentTransform === null) { - return; - } + /** + * @private + * @param {Array} objects + * @param {Function} callback + * @param {Function} [reviver] + */ + _enlivenObjects: function (objects, callback, reviver) { + if (!objects || objects.length === 0) { + callback && callback([]); + return; + } - var self = this.__gesturesParams.self, - t = this._currentTransform, - e = this.__gesturesParams.e; + fabric.util.enlivenObjects(objects, function(enlivenedObjects) { + callback && callback(enlivenedObjects); + }, null, reviver); + }, - t.action = 'scale'; - t.originX = t.originY = 'center'; + /** + * @private + * @param {String} format + * @param {Function} callback + */ + _toDataURL: function (format, callback) { + this.clone(function (clone) { + callback(clone.toDataURL(format)); + }); + }, - this._scaleObjectBy(self.scale, e); + /** + * @private + * @param {String} format + * @param {Number} multiplier + * @param {Function} callback + */ + _toDataURLWithMultiplier: function (format, multiplier, callback) { + this.clone(function (clone) { + callback(clone.toDataURLWithMultiplier(format, multiplier)); + }); + }, - if (self.rotation !== 0) { - t.action = 'rotate'; - this._rotateObjectByAngle(self.rotation, e); - } + /** + * Clones canvas instance + * @param {Object} [callback] Receives cloned instance as a first argument + * @param {Array} [properties] Array of properties to include in the cloned canvas and children + */ + clone: function (callback, properties) { + var data = JSON.stringify(this.toJSON(properties)); + this.cloneWithoutData(function(clone) { + clone.loadFromJSON(data, function() { + callback && callback(clone); + }); + }); + }, - this.requestRenderAll(); + /** + * Clones canvas instance without cloning existing data. + * This essentially copies canvas dimensions, clipping properties, etc. + * but leaves data empty (so that you can populate it with your own) + * @param {Object} [callback] Receives cloned instance as a first argument + */ + cloneWithoutData: function(callback) { + var el = fabric.util.createCanvasElement(); - t.action = 'drag'; - }, + el.width = this.width; + el.height = this.height; - /** - * Method that defines actions when an Event.js drag is detected. - * - * @param {Event} e Event object by Event.js - * @param {Event} self Event proxy object by Event.js - */ - __onDrag: function(e, self) { - this.fire('touch:drag', { - e: e, self: self - }); - }, + var clone = new fabric.Canvas(el); + if (this.backgroundImage) { + clone.setBackgroundImage(this.backgroundImage.src, function() { + clone.renderAll(); + callback && callback(clone); + }); + clone.backgroundImageOpacity = this.backgroundImageOpacity; + clone.backgroundImageStretch = this.backgroundImageStretch; + } + else { + callback && callback(clone); + } + } +}); - /** - * Method that defines actions when an Event.js orientation event is detected. - * - * @param {Event} e Event object by Event.js - * @param {Event} self Event proxy object by Event.js - */ - __onOrientationChange: function(e, self) { - this.fire('touch:orientation', { - e: e, self: self - }); - }, - /** - * Method that defines actions when an Event.js shake event is detected. - * - * @param {Event} e Event object by Event.js - * @param {Event} self Event proxy object by Event.js - */ - __onShake: function(e, self) { - this.fire('touch:shake', { - e: e, self: self - }); - }, +(function(global) { - /** - * Method that defines actions when an Event.js longpress event is detected. - * - * @param {Event} e Event object by Event.js - * @param {Event} self Event proxy object by Event.js - */ - __onLongPress: function(e, self) { - this.fire('touch:longpress', { - e: e, self: self - }); - }, + 'use strict'; - /** - * Scales an object by a factor - * @param {Number} s The scale factor to apply to the current scale level - * @param {Event} e Event object by Event.js - */ - _scaleObjectBy: function(s, e) { - var t = this._currentTransform, - target = t.target; - t.gestureScale = s; - target._scaling = true; - return fabric.controlsUtils.scalingEqually(e, t, 0, 0); - }, + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed, + capitalize = fabric.util.string.capitalize, + degreesToRadians = fabric.util.degreesToRadians, + objectCaching = !fabric.isLikelyNode, + ALIASING_LIMIT = 2; + + if (fabric.Object) { + return; + } - /** - * Rotates object by an angle - * @param {Number} curAngle The angle of rotation in degrees - * @param {Event} e Event object by Event.js - */ - _rotateObjectByAngle: function(curAngle, e) { - var t = this._currentTransform; + /** + * Root object class from which all 2d shape classes inherit from + * @class fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#objects} + * @see {@link fabric.Object#initialize} for constructor definition + * + * @fires added + * @fires removed + * + * @fires selected + * @fires deselected + * @fires modified + * @fires modified + * @fires moved + * @fires scaled + * @fires rotated + * @fires skewed + * + * @fires rotating + * @fires scaling + * @fires moving + * @fires skewing + * + * @fires mousedown + * @fires mouseup + * @fires mouseover + * @fires mouseout + * @fires mousewheel + * @fires mousedblclick + * + * @fires dragover + * @fires dragenter + * @fires dragleave + * @fires drop + */ + fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { - if (t.target.get('lockRotation')) { - return; - } - t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta)); - this._fire('rotating', { - target: t.target, - e: e, - transform: t, - }); - } - }); - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed, - capitalize = fabric.util.string.capitalize, - degreesToRadians = fabric.util.degreesToRadians, - objectCaching = !fabric.isLikelyNode, - ALIASING_LIMIT = 2; - /** - * Root object class from which all 2d shape classes inherit from - * @class fabric.Object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#objects} - * @see {@link fabric.Object#initialize} for constructor definition - * - * @fires added - * @fires removed - * - * @fires selected - * @fires deselected - * @fires modified - * @fires modified - * @fires moved - * @fires scaled - * @fires rotated - * @fires skewed - * - * @fires rotating - * @fires scaling - * @fires moving - * @fires skewing - * - * @fires mousedown - * @fires mouseup - * @fires mouseover - * @fires mouseout - * @fires mousewheel - * @fires mousedblclick - * - * @fires dragover - * @fires dragenter - * @fires dragleave - * @fires drop + /** + * Type of an object (rect, circle, path, etc.). + * Note that this property is meant to be read-only and not meant to be modified. + * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly. + * @type String + * @default */ - fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { + type: 'object', - /** - * Type of an object (rect, circle, path, etc.). - * Note that this property is meant to be read-only and not meant to be modified. - * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly. - * @type String - * @default - */ - type: 'object', + /** + * Horizontal origin of transformation of an object (one of "left", "right", "center") + * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups + * @type String + * @default + */ + originX: 'left', - /** - * Horizontal origin of transformation of an object (one of "left", "right", "center") - * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups - * @type String - * @default - */ - originX: 'left', + /** + * Vertical origin of transformation of an object (one of "top", "bottom", "center") + * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups + * @type String + * @default + */ + originY: 'top', - /** - * Vertical origin of transformation of an object (one of "top", "bottom", "center") - * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups - * @type String - * @default - */ - originY: 'top', + /** + * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom} + * @type Number + * @default + */ + top: 0, - /** - * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom} - * @type Number - * @default - */ - top: 0, + /** + * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right} + * @type Number + * @default + */ + left: 0, - /** - * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right} - * @type Number - * @default - */ - left: 0, + /** + * Object width + * @type Number + * @default + */ + width: 0, - /** - * Object width - * @type Number - * @default - */ - width: 0, + /** + * Object height + * @type Number + * @default + */ + height: 0, - /** - * Object height - * @type Number - * @default - */ - height: 0, + /** + * Object scale factor (horizontal) + * @type Number + * @default + */ + scaleX: 1, - /** - * Object scale factor (horizontal) - * @type Number - * @default - */ - scaleX: 1, + /** + * Object scale factor (vertical) + * @type Number + * @default + */ + scaleY: 1, - /** - * Object scale factor (vertical) - * @type Number - * @default - */ - scaleY: 1, + /** + * When true, an object is rendered as flipped horizontally + * @type Boolean + * @default + */ + flipX: false, - /** - * When true, an object is rendered as flipped horizontally - * @type Boolean - * @default - */ - flipX: false, + /** + * When true, an object is rendered as flipped vertically + * @type Boolean + * @default + */ + flipY: false, - /** - * When true, an object is rendered as flipped vertically - * @type Boolean - * @default - */ - flipY: false, + /** + * Opacity of an object + * @type Number + * @default + */ + opacity: 1, - /** - * Opacity of an object - * @type Number - * @default - */ - opacity: 1, + /** + * Angle of rotation of an object (in degrees) + * @type Number + * @default + */ + angle: 0, - /** - * Angle of rotation of an object (in degrees) - * @type Number - * @default - */ - angle: 0, + /** + * Angle of skew on x axes of an object (in degrees) + * @type Number + * @default + */ + skewX: 0, - /** - * Angle of skew on x axes of an object (in degrees) - * @type Number - * @default - */ - skewX: 0, + /** + * Angle of skew on y axes of an object (in degrees) + * @type Number + * @default + */ + skewY: 0, - /** - * Angle of skew on y axes of an object (in degrees) - * @type Number - * @default - */ - skewY: 0, + /** + * Size of object's controlling corners (in pixels) + * @type Number + * @default + */ + cornerSize: 13, - /** - * Size of object's controlling corners (in pixels) - * @type Number - * @default - */ - cornerSize: 13, + /** + * Size of object's controlling corners when touch interaction is detected + * @type Number + * @default + */ + touchCornerSize: 24, - /** - * Size of object's controlling corners when touch interaction is detected - * @type Number - * @default - */ - touchCornerSize: 24, + /** + * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) + * @type Boolean + * @default + */ + transparentCorners: true, - /** - * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) - * @type Boolean - * @default - */ - transparentCorners: true, + /** + * Default cursor value used when hovering over this object on canvas + * @type String + * @default + */ + hoverCursor: null, - /** - * Default cursor value used when hovering over this object on canvas - * @type String - * @default - */ - hoverCursor: null, + /** + * Default cursor value used when moving this object on canvas + * @type String + * @default + */ + moveCursor: null, - /** - * Default cursor value used when moving this object on canvas - * @type String - * @default - */ - moveCursor: null, + /** + * Padding between object and its controlling borders (in pixels) + * @type Number + * @default + */ + padding: 0, - /** - * Padding between object and its controlling borders (in pixels) - * @type Number - * @default - */ - padding: 0, + /** + * Color of controlling borders of an object (when it's active) + * @type String + * @default + */ + borderColor: 'rgb(178,204,255)', - /** - * Color of controlling borders of an object (when it's active) - * @type String - * @default - */ - borderColor: 'rgb(178,204,255)', + /** + * Array specifying dash pattern of an object's borders (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + borderDashArray: null, - /** - * Array specifying dash pattern of an object's borders (hasBorder must be true) - * @since 1.6.2 - * @type Array - */ - borderDashArray: null, - - /** - * Color of controlling corners of an object (when it's active) - * @type String - * @default - */ - cornerColor: 'rgb(178,204,255)', + /** + * Color of controlling corners of an object (when it's active) + * @type String + * @default + */ + cornerColor: 'rgb(178,204,255)', - /** - * Color of controlling corners of an object (when it's active and transparentCorners false) - * @since 1.6.2 - * @type String - * @default - */ - cornerStrokeColor: null, + /** + * Color of controlling corners of an object (when it's active and transparentCorners false) + * @since 1.6.2 + * @type String + * @default + */ + cornerStrokeColor: null, - /** - * Specify style of control, 'rect' or 'circle' - * @since 1.6.2 - * @type String - */ - cornerStyle: 'rect', + /** + * Specify style of control, 'rect' or 'circle' + * @since 1.6.2 + * @type String + */ + cornerStyle: 'rect', - /** - * Array specifying dash pattern of an object's control (hasBorder must be true) - * @since 1.6.2 - * @type Array - */ - cornerDashArray: null, + /** + * Array specifying dash pattern of an object's control (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + cornerDashArray: null, - /** - * When true, this object will use center point as the origin of transformation - * when being scaled via the controls. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredScaling: false, + /** + * When true, this object will use center point as the origin of transformation + * when being scaled via the controls. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredScaling: false, - /** - * When true, this object will use center point as the origin of transformation - * when being rotated via the controls. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ - centeredRotation: true, + /** + * When true, this object will use center point as the origin of transformation + * when being rotated via the controls. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredRotation: true, - /** - * Color of object's fill - * takes css colors https://www.w3.org/TR/css-color-3/ - * @type String - * @default - */ - fill: 'rgb(0,0,0)', + /** + * Color of object's fill + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + fill: 'rgb(0,0,0)', - /** - * Fill rule used to fill an object - * accepted values are nonzero, evenodd - * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead) - * @type String - * @default - */ - fillRule: 'nonzero', + /** + * Fill rule used to fill an object + * accepted values are nonzero, evenodd + * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead) + * @type String + * @default + */ + fillRule: 'nonzero', - /** - * Composite rule used for canvas globalCompositeOperation - * @type String - * @default - */ - globalCompositeOperation: 'source-over', + /** + * Composite rule used for canvas globalCompositeOperation + * @type String + * @default + */ + globalCompositeOperation: 'source-over', - /** - * Background color of an object. - * takes css colors https://www.w3.org/TR/css-color-3/ - * @type String - * @default - */ - backgroundColor: '', + /** + * Background color of an object. + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + backgroundColor: '', - /** - * Selection Background color of an object. colored layer behind the object when it is active. - * does not mix good with globalCompositeOperation methods. - * @type String - * @default - */ - selectionBackgroundColor: '', + /** + * Selection Background color of an object. colored layer behind the object when it is active. + * does not mix good with globalCompositeOperation methods. + * @type String + * @default + */ + selectionBackgroundColor: '', - /** - * When defined, an object is rendered via stroke and this property specifies its color - * takes css colors https://www.w3.org/TR/css-color-3/ - * @type String - * @default - */ - stroke: null, + /** + * When defined, an object is rendered via stroke and this property specifies its color + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + stroke: null, - /** - * Width of a stroke used to render this object - * @type Number - * @default - */ - strokeWidth: 1, + /** + * Width of a stroke used to render this object + * @type Number + * @default + */ + strokeWidth: 1, - /** - * Array specifying dash pattern of an object's stroke (stroke must be defined) - * @type Array - */ - strokeDashArray: null, + /** + * Array specifying dash pattern of an object's stroke (stroke must be defined) + * @type Array + */ + strokeDashArray: null, - /** - * Line offset of an object's stroke - * @type Number - * @default - */ - strokeDashOffset: 0, + /** + * Line offset of an object's stroke + * @type Number + * @default + */ + strokeDashOffset: 0, - /** - * Line endings style of an object's stroke (one of "butt", "round", "square") - * @type String - * @default - */ - strokeLineCap: 'butt', + /** + * Line endings style of an object's stroke (one of "butt", "round", "square") + * @type String + * @default + */ + strokeLineCap: 'butt', - /** - * Corner style of an object's stroke (one of "bevel", "round", "miter") - * @type String - * @default - */ - strokeLineJoin: 'miter', + /** + * Corner style of an object's stroke (one of "bevel", "round", "miter") + * @type String + * @default + */ + strokeLineJoin: 'miter', - /** - * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke - * @type Number - * @default - */ - strokeMiterLimit: 4, + /** + * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke + * @type Number + * @default + */ + strokeMiterLimit: 4, - /** - * Shadow object representing shadow of this shape - * @type fabric.Shadow - * @default - */ - shadow: null, + /** + * Shadow object representing shadow of this shape + * @type fabric.Shadow + * @default + */ + shadow: null, - /** - * Opacity of object's controlling borders when object is active and moving - * @type Number - * @default - */ - borderOpacityWhenMoving: 0.4, + /** + * Opacity of object's controlling borders when object is active and moving + * @type Number + * @default + */ + borderOpacityWhenMoving: 0.4, - /** - * Scale factor of object's controlling borders - * bigger number will make a thicker border - * border is 1, so this is basically a border thickness - * since there is no way to change the border itself. - * @type Number - * @default - */ - borderScaleFactor: 1, + /** + * Scale factor of object's controlling borders + * bigger number will make a thicker border + * border is 1, so this is basically a border thickness + * since there is no way to change the border itself. + * @type Number + * @default + */ + borderScaleFactor: 1, - /** - * Minimum allowed scale value of an object - * @type Number - * @default - */ - minScaleLimit: 0, + /** + * Minimum allowed scale value of an object + * @type Number + * @default + */ + minScaleLimit: 0, - /** - * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection). - * But events still fire on it. - * @type Boolean - * @default - */ - selectable: true, + /** + * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection). + * But events still fire on it. + * @type Boolean + * @default + */ + selectable: true, - /** - * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4 - * @type Boolean - * @default - */ - evented: true, + /** + * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4 + * @type Boolean + * @default + */ + evented: true, - /** - * When set to `false`, an object is not rendered on canvas - * @type Boolean - * @default - */ - visible: true, + /** + * When set to `false`, an object is not rendered on canvas + * @type Boolean + * @default + */ + visible: true, - /** - * When set to `false`, object's controls are not displayed and can not be used to manipulate object - * @type Boolean - * @default - */ - hasControls: true, + /** + * When set to `false`, object's controls are not displayed and can not be used to manipulate object + * @type Boolean + * @default + */ + hasControls: true, - /** - * When set to `false`, object's controlling borders are not rendered - * @type Boolean - * @default - */ - hasBorders: true, + /** + * When set to `false`, object's controlling borders are not rendered + * @type Boolean + * @default + */ + hasBorders: true, - /** - * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box - * @type Boolean - * @default - */ - perPixelTargetFind: false, + /** + * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box + * @type Boolean + * @default + */ + perPixelTargetFind: false, - /** - * When `false`, default object's values are not included in its serialization - * @type Boolean - * @default - */ - includeDefaultValues: true, + /** + * When `false`, default object's values are not included in its serialization + * @type Boolean + * @default + */ + includeDefaultValues: true, - /** - * When `true`, object horizontal movement is locked - * @type Boolean - * @default - */ - lockMovementX: false, + /** + * When `true`, object horizontal movement is locked + * @type Boolean + * @default + */ + lockMovementX: false, - /** - * When `true`, object vertical movement is locked - * @type Boolean - * @default - */ - lockMovementY: false, + /** + * When `true`, object vertical movement is locked + * @type Boolean + * @default + */ + lockMovementY: false, - /** - * When `true`, object rotation is locked - * @type Boolean - * @default - */ - lockRotation: false, + /** + * When `true`, object rotation is locked + * @type Boolean + * @default + */ + lockRotation: false, - /** - * When `true`, object horizontal scaling is locked - * @type Boolean - * @default - */ - lockScalingX: false, + /** + * When `true`, object horizontal scaling is locked + * @type Boolean + * @default + */ + lockScalingX: false, - /** - * When `true`, object vertical scaling is locked - * @type Boolean - * @default - */ - lockScalingY: false, + /** + * When `true`, object vertical scaling is locked + * @type Boolean + * @default + */ + lockScalingY: false, - /** - * When `true`, object horizontal skewing is locked - * @type Boolean - * @default - */ - lockSkewingX: false, + /** + * When `true`, object horizontal skewing is locked + * @type Boolean + * @default + */ + lockSkewingX: false, - /** - * When `true`, object vertical skewing is locked - * @type Boolean - * @default - */ - lockSkewingY: false, + /** + * When `true`, object vertical skewing is locked + * @type Boolean + * @default + */ + lockSkewingY: false, - /** - * When `true`, object cannot be flipped by scaling into negative values - * @type Boolean - * @default - */ - lockScalingFlip: false, + /** + * When `true`, object cannot be flipped by scaling into negative values + * @type Boolean + * @default + */ + lockScalingFlip: false, - /** - * When `true`, object is not exported in OBJECT/JSON - * @since 1.6.3 - * @type Boolean - * @default - */ - excludeFromExport: false, + /** + * When `true`, object is not exported in OBJECT/JSON + * @since 1.6.3 + * @type Boolean + * @default + */ + excludeFromExport: false, - /** - * When `true`, object is cached on an additional canvas. - * When `false`, object is not cached unless necessary ( clipPath ) - * default to true - * @since 1.7.0 - * @type Boolean - * @default true - */ - objectCaching: objectCaching, + /** + * When `true`, object is cached on an additional canvas. + * When `false`, object is not cached unless necessary ( clipPath ) + * default to true + * @since 1.7.0 + * @type Boolean + * @default true + */ + objectCaching: objectCaching, - /** - * When `true`, object properties are checked for cache invalidation. In some particular - * situation you may want this to be disabled ( spray brush, very big, groups) - * or if your application does not allow you to modify properties for groups child you want - * to disable it for groups. - * default to false - * since 1.7.0 - * @type Boolean - * @default false - */ - statefullCache: false, + /** + * When `true`, object properties are checked for cache invalidation. In some particular + * situation you may want this to be disabled ( spray brush, very big, groups) + * or if your application does not allow you to modify properties for groups child you want + * to disable it for groups. + * default to false + * since 1.7.0 + * @type Boolean + * @default false + */ + statefullCache: false, - /** - * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled - * too much and will be redrawn with correct details at the end of scaling. - * this setting is performance and application dependant. - * default to true - * since 1.7.0 - * @type Boolean - * @default true - */ - noScaleCache: true, + /** + * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled + * too much and will be redrawn with correct details at the end of scaling. + * this setting is performance and application dependant. + * default to true + * since 1.7.0 + * @type Boolean + * @default true + */ + noScaleCache: true, - /** - * When `false`, the stoke width will scale with the object. - * When `true`, the stroke will always match the exact pixel size entered for stroke width. - * this Property does not work on Text classes or drawing call that uses strokeText,fillText methods - * default to false - * @since 2.6.0 - * @type Boolean - * @default false - * @type Boolean - * @default false - */ - strokeUniform: false, + /** + * When `false`, the stoke width will scale with the object. + * When `true`, the stroke will always match the exact pixel size entered for stroke width. + * this Property does not work on Text classes or drawing call that uses strokeText,fillText methods + * default to false + * @since 2.6.0 + * @type Boolean + * @default false + * @type Boolean + * @default false + */ + strokeUniform: false, - /** - * When set to `true`, object's cache will be rerendered next render call. - * since 1.7.0 - * @type Boolean - * @default true - */ - dirty: true, - - /** - * keeps the value of the last hovered corner during mouse move. - * 0 is no corner, or 'mt', 'ml', 'mtr' etc.. - * It should be private, but there is no harm in using it as - * a read-only property. - * @type number|string|any - * @default 0 - */ - __corner: 0, + /** + * When set to `true`, object's cache will be rerendered next render call. + * since 1.7.0 + * @type Boolean + * @default true + */ + dirty: true, - /** - * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") - * @type String - * @default - */ - paintFirst: 'fill', + /** + * keeps the value of the last hovered corner during mouse move. + * 0 is no corner, or 'mt', 'ml', 'mtr' etc.. + * It should be private, but there is no harm in using it as + * a read-only property. + * @type number|string|any + * @default 0 + */ + __corner: 0, - /** - * When 'down', object is set to active on mousedown/touchstart - * When 'up', object is set to active on mouseup/touchend - * Experimental. Let's see if this breaks anything before supporting officially - * @private - * since 4.4.0 - * @type String - * @default 'down' - */ - activeOn: 'down', + /** + * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") + * @type String + * @default + */ + paintFirst: 'fill', - /** - * List of properties to consider when checking if state - * of an object is changed (fabric.Object#hasStateChanged) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: ( - 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + - 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + - 'angle opacity fill globalCompositeOperation shadow visible backgroundColor ' + - 'skewX skewY fillRule paintFirst clipPath strokeUniform' - ).split(' '), + /** + * When 'down', object is set to active on mousedown/touchstart + * When 'up', object is set to active on mouseup/touchend + * Experimental. Let's see if this breaks anything before supporting officially + * @private + * since 4.4.0 + * @type String + * @default 'down' + */ + activeOn: 'down', - /** - * List of properties to consider when checking if cache needs refresh - * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single - * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty - * and refreshed at the next render - * @type Array - */ - cacheProperties: ( - 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + - ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath' - ).split(' '), + /** + * List of properties to consider when checking if state + * of an object is changed (fabric.Object#hasStateChanged) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: ( + 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + + 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + + 'angle opacity fill globalCompositeOperation shadow visible backgroundColor ' + + 'skewX skewY fillRule paintFirst clipPath strokeUniform' + ).split(' '), - /** - * List of properties to consider for animating colors. - * @type Array - */ - colorProperties: ( - 'fill stroke backgroundColor' - ).split(' '), + /** + * List of properties to consider when checking if cache needs refresh + * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single + * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * and refreshed at the next render + * @type Array + */ + cacheProperties: ( + 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + + ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath' + ).split(' '), - /** - * a fabricObject that, without stroke define a clipping area with their shape. filled in black - * the clipPath object gets used when the object has rendered, and the context is placed in the center - * of the object cacheCanvas. - * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' - * @type fabric.Object - */ - clipPath: undefined, + /** + * List of properties to consider for animating colors. + * @type Array + */ + colorProperties: ( + 'fill stroke backgroundColor' + ).split(' '), - /** - * Meaningful ONLY when the object is used as clipPath. - * if true, the clipPath will make the object clip to the outside of the clipPath - * since 2.4.0 - * @type boolean - * @default false - */ - inverted: false, + /** + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the object has rendered, and the context is placed in the center + * of the object cacheCanvas. + * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' + * @type fabric.Object + */ + clipPath: undefined, - /** - * Meaningful ONLY when the object is used as clipPath. - * if true, the clipPath will have its top and left relative to canvas, and will - * not be influenced by the object transform. This will make the clipPath relative - * to the canvas, but clipping just a particular object. - * WARNING this is beta, this feature may change or be renamed. - * since 2.4.0 - * @type boolean - * @default false - */ - absolutePositioned: false, + /** + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will make the object clip to the outside of the clipPath + * since 2.4.0 + * @type boolean + * @default false + */ + inverted: false, - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - if (options) { - this.setOptions(options); - } - }, + /** + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will have its top and left relative to canvas, and will + * not be influenced by the object transform. This will make the clipPath relative + * to the canvas, but clipping just a particular object. + * WARNING this is beta, this feature may change or be renamed. + * since 2.4.0 + * @type boolean + * @default false + */ + absolutePositioned: false, - /** - * Create a the canvas used to keep the cached copy of the object - * @private - */ - _createCacheCanvas: function() { - this._cacheProperties = {}; - this._cacheCanvas = fabric.util.createCanvasElement(); - this._cacheContext = this._cacheCanvas.getContext('2d'); - this._updateCacheCanvas(); - // if canvas gets created, is empty, so dirty. - this.dirty = true; - }, + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, - /** - * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal - * and each side do not cross fabric.cacheSideLimit - * those numbers are configurable so that you can get as much detail as you want - * making bargain with performances. - * @param {Object} dims - * @param {Object} dims.width width of canvas - * @param {Object} dims.height height of canvas - * @param {Object} dims.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @param {Object} dims.zoomY zoomY zoom value to unscale the canvas before drawing cache - * @return {Object}.width width of canvas - * @return {Object}.height height of canvas - * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache - */ - _limitCacheSize: function(dims) { - var perfLimitSizeTotal = fabric.perfLimitSizeTotal, - width = dims.width, height = dims.height, - max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; - if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { - if (width < min) { - dims.width = min; - } - if (height < min) { - dims.height = min; - } - return dims; - } - var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), - capValue = fabric.util.capValue, - x = capValue(min, limitedDims.x, max), - y = capValue(min, limitedDims.y, max); - if (width > x) { - dims.zoomX /= width / x; - dims.width = x; - dims.capped = true; - } - if (height > y) { - dims.zoomY /= height / y; - dims.height = y; - dims.capped = true; + /** + * Create a the canvas used to keep the cached copy of the object + * @private + */ + _createCacheCanvas: function() { + this._cacheProperties = {}; + this._cacheCanvas = fabric.util.createCanvasElement(); + this._cacheContext = this._cacheCanvas.getContext('2d'); + this._updateCacheCanvas(); + // if canvas gets created, is empty, so dirty. + this.dirty = true; + }, + + /** + * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal + * and each side do not cross fabric.cacheSideLimit + * those numbers are configurable so that you can get as much detail as you want + * making bargain with performances. + * @param {Object} dims + * @param {Object} dims.width width of canvas + * @param {Object} dims.height height of canvas + * @param {Object} dims.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @param {Object} dims.zoomY zoomY zoom value to unscale the canvas before drawing cache + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _limitCacheSize: function(dims) { + var perfLimitSizeTotal = fabric.perfLimitSizeTotal, + width = dims.width, height = dims.height, + max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; + if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { + if (width < min) { + dims.width = min; + } + if (height < min) { + dims.height = min; } return dims; - }, + } + var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), + capValue = fabric.util.capValue, + x = capValue(min, limitedDims.x, max), + y = capValue(min, limitedDims.y, max); + if (width > x) { + dims.zoomX /= width / x; + dims.width = x; + dims.capped = true; + } + if (height > y) { + dims.zoomY /= height / y; + dims.height = y; + dims.capped = true; + } + return dims; + }, - /** - * Return the dimension and the zoom level needed to create a cache canvas - * big enough to host the object to be cached. - * @private - * @return {Object}.x width of object to be cached - * @return {Object}.y height of object to be cached - * @return {Object}.width width of canvas - * @return {Object}.height height of canvas - * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache - */ - _getCacheCanvasDimensions: function() { - var objectScale = this.getTotalObjectScaling(), - // caculate dimensions without skewing - dim = this._getTransformedDimensions({ skewX: 0, skewY: 0 }), - neededX = dim.x * objectScale.x / this.scaleX, - neededY = dim.y * objectScale.y / this.scaleY; - return { - // for sure this ALIASING_LIMIT is slightly creating problem - // in situation in which the cache canvas gets an upper limit - // also objectScale contains already scaleX and scaleY - width: neededX + ALIASING_LIMIT, - height: neededY + ALIASING_LIMIT, - zoomX: objectScale.x, - zoomY: objectScale.y, - x: neededX, - y: neededY - }; - }, + /** + * Return the dimension and the zoom level needed to create a cache canvas + * big enough to host the object to be cached. + * @private + * @return {Object}.x width of object to be cached + * @return {Object}.y height of object to be cached + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _getCacheCanvasDimensions: function() { + var objectScale = this.getTotalObjectScaling(), + // caculate dimensions without skewing + dim = this._getTransformedDimensions(0, 0), + neededX = dim.x * objectScale.scaleX / this.scaleX, + neededY = dim.y * objectScale.scaleY / this.scaleY; + return { + // for sure this ALIASING_LIMIT is slightly creating problem + // in situation in which the cache canvas gets an upper limit + // also objectScale contains already scaleX and scaleY + width: neededX + ALIASING_LIMIT, + height: neededY + ALIASING_LIMIT, + zoomX: objectScale.scaleX, + zoomY: objectScale.scaleY, + x: neededX, + y: neededY + }; + }, - /** - * Update width and height of the canvas for cache - * returns true or false if canvas needed resize. - * @private - * @return {Boolean} true if the canvas has been resized - */ - _updateCacheCanvas: function() { - var targetCanvas = this.canvas; - if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { - var target = targetCanvas._currentTransform.target, - action = targetCanvas._currentTransform.action; - if (this === target && action.slice && action.slice(0, 5) === 'scale') { - return false; - } - } - var canvas = this._cacheCanvas, - dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - minCacheSize = fabric.minCacheSideLimit, - width = dims.width, height = dims.height, drawingWidth, drawingHeight, - zoomX = dims.zoomX, zoomY = dims.zoomY, - dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, - zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, - shouldRedraw = dimensionsChanged || zoomChanged, - additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; - if (dimensionsChanged) { - var canvasWidth = this._cacheCanvas.width, - canvasHeight = this._cacheCanvas.height, - sizeGrowing = width > canvasWidth || height > canvasHeight, - sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && - canvasWidth > minCacheSize && canvasHeight > minCacheSize; - shouldResizeCanvas = sizeGrowing || sizeShrinking; - if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { - additionalWidth = width * 0.1; - additionalHeight = height * 0.1; - } - } - if (this instanceof fabric.Text && this.path) { - shouldRedraw = true; - shouldResizeCanvas = true; - additionalWidth += this.getHeightOfLine(0) * this.zoomX; - additionalHeight += this.getHeightOfLine(0) * this.zoomY; + /** + * Update width and height of the canvas for cache + * returns true or false if canvas needed resize. + * @private + * @return {Boolean} true if the canvas has been resized + */ + _updateCacheCanvas: function() { + var targetCanvas = this.canvas; + if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { + var target = targetCanvas._currentTransform.target, + action = targetCanvas._currentTransform.action; + if (this === target && action.slice && action.slice(0, 5) === 'scale') { + return false; } - if (shouldRedraw) { - if (shouldResizeCanvas) { - canvas.width = Math.ceil(width + additionalWidth); - canvas.height = Math.ceil(height + additionalHeight); - } - else { - this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); - this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); - } - drawingWidth = dims.x / 2; - drawingHeight = dims.y / 2; - this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; - this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; - this.cacheWidth = width; - this.cacheHeight = height; - this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); - this._cacheContext.scale(zoomX, zoomY); - this.zoomX = zoomX; - this.zoomY = zoomY; - return true; + } + var canvas = this._cacheCanvas, + dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + minCacheSize = fabric.minCacheSideLimit, + width = dims.width, height = dims.height, drawingWidth, drawingHeight, + zoomX = dims.zoomX, zoomY = dims.zoomY, + dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, + zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, + shouldRedraw = dimensionsChanged || zoomChanged, + additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; + if (dimensionsChanged) { + var canvasWidth = this._cacheCanvas.width, + canvasHeight = this._cacheCanvas.height, + sizeGrowing = width > canvasWidth || height > canvasHeight, + sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && + canvasWidth > minCacheSize && canvasHeight > minCacheSize; + shouldResizeCanvas = sizeGrowing || sizeShrinking; + if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { + additionalWidth = width * 0.1; + additionalHeight = height * 0.1; + } + } + if (this instanceof fabric.Text && this.path) { + shouldRedraw = true; + shouldResizeCanvas = true; + additionalWidth += this.getHeightOfLine(0) * this.zoomX; + additionalHeight += this.getHeightOfLine(0) * this.zoomY; + } + if (shouldRedraw) { + if (shouldResizeCanvas) { + canvas.width = Math.ceil(width + additionalWidth); + canvas.height = Math.ceil(height + additionalHeight); } - return false; - }, - - /** - * Sets object's properties from options - * @param {Object} [options] Options object - */ - setOptions: function(options) { - this._setOptions(options); - }, + else { + this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); + this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); + } + drawingWidth = dims.x / 2; + drawingHeight = dims.y / 2; + this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; + this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; + this.cacheWidth = width; + this.cacheHeight = height; + this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); + this._cacheContext.scale(zoomX, zoomY); + this.zoomX = zoomX; + this.zoomY = zoomY; + return true; + } + return false; + }, - /** - * Transforms context when rendering an object - * @param {CanvasRenderingContext2D} ctx Context - */ - transform: function(ctx) { - var needFullTransform = (this.group && !this.group._transformDone) || - (this.group && this.canvas && ctx === this.canvas.contextTop); - var m = this.calcTransformMatrix(!needFullTransform); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - }, + /** + * Sets object's properties from options + * @param {Object} [options] Options object + */ + setOptions: function(options) { + this._setOptions(options); + this._initGradient(options.fill, 'fill'); + this._initGradient(options.stroke, 'stroke'); + this._initPattern(options.fill, 'fill'); + this._initPattern(options.stroke, 'stroke'); + }, - /** - * Returns an object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function(propertiesToInclude) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, - - object = { - type: this.type, - version: fabric.version, - originX: this.originX, - originY: this.originY, - left: toFixed(this.left, NUM_FRACTION_DIGITS), - top: toFixed(this.top, NUM_FRACTION_DIGITS), - width: toFixed(this.width, NUM_FRACTION_DIGITS), - height: toFixed(this.height, NUM_FRACTION_DIGITS), - fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, - stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, - strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), - strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, - strokeLineCap: this.strokeLineCap, - strokeDashOffset: this.strokeDashOffset, - strokeLineJoin: this.strokeLineJoin, - strokeUniform: this.strokeUniform, - strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), - scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), - scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), - angle: toFixed(this.angle, NUM_FRACTION_DIGITS), - flipX: this.flipX, - flipY: this.flipY, - opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), - shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, - visible: this.visible, - backgroundColor: this.backgroundColor, - fillRule: this.fillRule, - paintFirst: this.paintFirst, - globalCompositeOperation: this.globalCompositeOperation, - skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), - skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), - }; - - if (this.clipPath && !this.clipPath.excludeFromExport) { - object.clipPath = this.clipPath.toObject(propertiesToInclude); - object.clipPath.inverted = this.clipPath.inverted; - object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; - } - - fabric.util.populateWithProperties(this, object, propertiesToInclude); - if (!this.includeDefaultValues) { - object = this._removeDefaultValues(object); - } - - return object; - }, + /** + * Transforms context when rendering an object + * @param {CanvasRenderingContext2D} ctx Context + */ + transform: function(ctx) { + var needFullTransform = (this.group && !this.group._transformDone) || + (this.group && this.canvas && ctx === this.canvas.contextTop); + var m = this.calcTransformMatrix(!needFullTransform); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + }, - /** - * Returns (dataless) object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toDatalessObject: function(propertiesToInclude) { - // will be overwritten by subclasses - return this.toObject(propertiesToInclude); - }, + /** + * Returns an object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + + object = { + type: this.type, + version: fabric.version, + originX: this.originX, + originY: this.originY, + left: toFixed(this.left, NUM_FRACTION_DIGITS), + top: toFixed(this.top, NUM_FRACTION_DIGITS), + width: toFixed(this.width, NUM_FRACTION_DIGITS), + height: toFixed(this.height, NUM_FRACTION_DIGITS), + fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, + stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, + strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), + strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, + strokeLineCap: this.strokeLineCap, + strokeDashOffset: this.strokeDashOffset, + strokeLineJoin: this.strokeLineJoin, + strokeUniform: this.strokeUniform, + strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), + scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), + scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), + angle: toFixed(this.angle, NUM_FRACTION_DIGITS), + flipX: this.flipX, + flipY: this.flipY, + opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), + shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, + visible: this.visible, + backgroundColor: this.backgroundColor, + fillRule: this.fillRule, + paintFirst: this.paintFirst, + globalCompositeOperation: this.globalCompositeOperation, + skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), + skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), + }; - /** - * @private - * @param {Object} object - */ - _removeDefaultValues: function(object) { - var prototype = fabric.util.getKlass(object.type).prototype; - Object.keys(object).forEach(function(prop) { - if (prop === 'left' || prop === 'top' || prop === 'type') { - return; - } - if (object[prop] === prototype[prop]) { - delete object[prop]; - } - // basically a check for [] === [] - if (Array.isArray(object[prop]) && Array.isArray(prototype[prop]) - && object[prop].length === 0 && prototype[prop].length === 0) { - delete object[prop]; - } - }); + if (this.clipPath && !this.clipPath.excludeFromExport) { + object.clipPath = this.clipPath.toObject(propertiesToInclude); + object.clipPath.inverted = this.clipPath.inverted; + object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; + } - return object; - }, + fabric.util.populateWithProperties(this, object, propertiesToInclude); + if (!this.includeDefaultValues) { + object = this._removeDefaultValues(object); + } - /** - * Returns a string representation of an instance - * @return {String} - */ - toString: function() { - return '#'; - }, + return object; + }, - /** - * Return the object scale factor counting also the group scaling - * @return {fabric.Point} - */ - getObjectScaling: function() { - // if the object is a top level one, on the canvas, we go for simple aritmetic - // otherwise the complex method with angles will return approximations and decimals - // and will likely kill the cache when not needed - // https://github.com/fabricjs/fabric.js/issues/7157 - if (!this.group) { - return new fabric.Point(Math.abs(this.scaleX), Math.abs(this.scaleY)); - } - // if we are inside a group total zoom calculation is complex, we defer to generic matrices - var options = fabric.util.qrDecompose(this.calcTransformMatrix()); - return new fabric.Point(Math.abs(options.scaleX), Math.abs(options.scaleY)); - }, + /** + * Returns (dataless) object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + // will be overwritten by subclasses + return this.toObject(propertiesToInclude); + }, - /** - * Return the object scale factor counting also the group scaling, zoom and retina - * @return {Object} object with scaleX and scaleY properties - */ - getTotalObjectScaling: function() { - var scale = this.getObjectScaling(); - if (this.canvas) { - var zoom = this.canvas.getZoom(); - var retina = this.canvas.getRetinaScaling(); - scale.scalarMultiplyEquals(zoom * retina); - } - return scale; - }, + /** + * @private + * @param {Object} object + */ + _removeDefaultValues: function(object) { + var prototype = fabric.util.getKlass(object.type).prototype, + stateProperties = prototype.stateProperties; + stateProperties.forEach(function(prop) { + if (prop === 'left' || prop === 'top') { + return; + } + if (object[prop] === prototype[prop]) { + delete object[prop]; + } + var isArray = Object.prototype.toString.call(object[prop]) === '[object Array]' && + Object.prototype.toString.call(prototype[prop]) === '[object Array]'; - /** - * Return the object opacity counting also the group property - * @return {Number} - */ - getObjectOpacity: function() { - var opacity = this.opacity; - if (this.group) { - opacity *= this.group.getObjectOpacity(); + // basically a check for [] === [] + if (isArray && object[prop].length === 0 && prototype[prop].length === 0) { + delete object[prop]; } - return opacity; - }, + }); - /** - * Returns the object angle relative to canvas counting also the group property - * @returns {number} - */ - getTotalAngle: function () { - return this.group ? - fabric.util.qrDecompose(this.calcTransformMatrix()).angle : - this.angle; - }, + return object; + }, - /** - * @private - * @param {String} key - * @param {*} value - * @return {fabric.Object} thisArg - */ - _set: function(key, value) { - var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), - isChanged = this[key] !== value, groupNeedsUpdate = false; + /** + * Returns a string representation of an instance + * @return {String} + */ + toString: function() { + return '#'; + }, - if (shouldConstrainValue) { - value = this._constrainScale(value); - } - if (key === 'scaleX' && value < 0) { - this.flipX = !this.flipX; - value *= -1; - } - else if (key === 'scaleY' && value < 0) { - this.flipY = !this.flipY; - value *= -1; - } - else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { - value = new fabric.Shadow(value); - } - else if (key === 'dirty' && this.group) { - this.group.set('dirty', value); - } + /** + * Return the object scale factor counting also the group scaling + * @return {Object} object with scaleX and scaleY properties + */ + getObjectScaling: function() { + // if the object is a top level one, on the canvas, we go for simple aritmetic + // otherwise the complex method with angles will return approximations and decimals + // and will likely kill the cache when not needed + // https://github.com/fabricjs/fabric.js/issues/7157 + if (!this.group) { + return { + scaleX: this.scaleX, + scaleY: this.scaleY, + }; + } + // if we are inside a group total zoom calculation is complex, we defer to generic matrices + var options = fabric.util.qrDecompose(this.calcTransformMatrix()); + return { scaleX: Math.abs(options.scaleX), scaleY: Math.abs(options.scaleY) }; + }, - this[key] = value; + /** + * Return the object scale factor counting also the group scaling, zoom and retina + * @return {Object} object with scaleX and scaleY properties + */ + getTotalObjectScaling: function() { + var scale = this.getObjectScaling(), scaleX = scale.scaleX, scaleY = scale.scaleY; + if (this.canvas) { + var zoom = this.canvas.getZoom(); + var retina = this.canvas.getRetinaScaling(); + scaleX *= zoom * retina; + scaleY *= zoom * retina; + } + return { scaleX: scaleX, scaleY: scaleY }; + }, - if (isChanged) { - groupNeedsUpdate = this.group && this.group.isOnACache(); - if (this.cacheProperties.indexOf(key) > -1) { - this.dirty = true; - groupNeedsUpdate && this.group.set('dirty', true); - } - else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { - this.group.set('dirty', true); - } - } - return this; - }, + /** + * Return the object opacity counting also the group property + * @return {Number} + */ + getObjectOpacity: function() { + var opacity = this.opacity; + if (this.group) { + opacity *= this.group.getObjectOpacity(); + } + return opacity; + }, - /** - * Retrieves viewportTransform from Object's canvas if possible - * @method getViewportTransform - * @memberOf fabric.Object.prototype - * @return {Array} - */ - getViewportTransform: function() { - if (this.canvas && this.canvas.viewportTransform) { - return this.canvas.viewportTransform; - } - return fabric.iMatrix.concat(); - }, + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Object} thisArg + */ + _set: function(key, value) { + var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), + isChanged = this[key] !== value, groupNeedsUpdate = false; - /* - * @private - * return if the object would be visible in rendering - * @memberOf fabric.Object.prototype - * @return {Boolean} - */ - isNotVisible: function() { - return this.opacity === 0 || - (!this.width && !this.height && this.strokeWidth === 0) || - !this.visible; - }, + if (shouldConstrainValue) { + value = this._constrainScale(value); + } + if (key === 'scaleX' && value < 0) { + this.flipX = !this.flipX; + value *= -1; + } + else if (key === 'scaleY' && value < 0) { + this.flipY = !this.flipY; + value *= -1; + } + else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { + value = new fabric.Shadow(value); + } + else if (key === 'dirty' && this.group) { + this.group.set('dirty', value); + } - /** - * Renders an object on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - render: function(ctx) { - // do not render if width/height are zeros or object is not visible - if (this.isNotVisible()) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - ctx.save(); - this._setupCompositeOperation(ctx); - this.drawSelectionBackground(ctx); - this.transform(ctx); - this._setOpacity(ctx); - this._setShadow(ctx, this); - if (this.shouldCache()) { - this.renderCache(); - this.drawCacheOnCanvas(ctx); - } - else { - this._removeCacheCanvas(); - this.dirty = false; - this.drawObject(ctx); - if (this.objectCaching && this.statefullCache) { - this.saveState({ propertySet: 'cacheProperties' }); - } - } - ctx.restore(); - }, + this[key] = value; - renderCache: function(options) { - options = options || {}; - if (!this._cacheCanvas || !this._cacheContext) { - this._createCacheCanvas(); + if (isChanged) { + groupNeedsUpdate = this.group && this.group.isOnACache(); + if (this.cacheProperties.indexOf(key) > -1) { + this.dirty = true; + groupNeedsUpdate && this.group.set('dirty', true); } - if (this.isCacheDirty()) { - this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); - this.drawObject(this._cacheContext, options.forClipping); - this.dirty = false; + else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { + this.group.set('dirty', true); } - }, + } + return this; + }, - /** - * Remove cacheCanvas and its dimensions from the objects - */ - _removeCacheCanvas: function() { - this._cacheCanvas = null; - this._cacheContext = null; - this.cacheWidth = 0; - this.cacheHeight = 0; - }, + /** + * This callback function is called by the parent group of an object every + * time a non-delegated property changes on the group. It is passed the key + * and value as parameters. Not adding in this function's signature to avoid + * Travis build error about unused variables. + */ + setOnGroup: function() { + // implemented by sub-classes, as needed. + }, - /** - * return true if the object will draw a stroke - * Does not consider text styles. This is just a shortcut used at rendering time - * We want it to be an approximation and be fast. - * wrote to avoid extra caching, it has to return true when stroke happens, - * can guess when it will not happen at 100% chance, does not matter if it misses - * some use case where the stroke is invisible. - * @since 3.0.0 - * @returns Boolean - */ - hasStroke: function() { - return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; - }, + /** + * Retrieves viewportTransform from Object's canvas if possible + * @method getViewportTransform + * @memberOf fabric.Object.prototype + * @return {Array} + */ + getViewportTransform: function() { + if (this.canvas && this.canvas.viewportTransform) { + return this.canvas.viewportTransform; + } + return fabric.iMatrix.concat(); + }, - /** - * return true if the object will draw a fill - * Does not consider text styles. This is just a shortcut used at rendering time - * We want it to be an approximation and be fast. - * wrote to avoid extra caching, it has to return true when fill happens, - * can guess when it will not happen at 100% chance, does not matter if it misses - * some use case where the fill is invisible. - * @since 3.0.0 - * @returns Boolean - */ - hasFill: function() { - return this.fill && this.fill !== 'transparent'; - }, + /* + * @private + * return if the object would be visible in rendering + * @memberOf fabric.Object.prototype + * @return {Boolean} + */ + isNotVisible: function() { + return this.opacity === 0 || + (!this.width && !this.height && this.strokeWidth === 0) || + !this.visible; + }, - /** - * When set to `true`, force the object to have its own cache, even if it is inside a group - * it may be needed when your object behave in a particular way on the cache and always needs - * its own isolated canvas to render correctly. - * Created to be overridden - * since 1.7.12 - * @returns Boolean - */ - needsItsOwnCache: function() { - if (this.paintFirst === 'stroke' && - this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') { - return true; - } - if (this.clipPath) { - return true; + /** + * Renders an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + // do not render if width/height are zeros or object is not visible + if (this.isNotVisible()) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + ctx.save(); + this._setupCompositeOperation(ctx); + this.drawSelectionBackground(ctx); + this.transform(ctx); + this._setOpacity(ctx); + this._setShadow(ctx, this); + if (this.shouldCache()) { + this.renderCache(); + this.drawCacheOnCanvas(ctx); + } + else { + this._removeCacheCanvas(); + this.dirty = false; + this.drawObject(ctx); + if (this.objectCaching && this.statefullCache) { + this.saveState({ propertySet: 'cacheProperties' }); } - return false; - }, + } + ctx.restore(); + }, - /** - * Decide if the object should cache or not. Create its own cache level - * objectCaching is a global flag, wins over everything - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group outside is cached. - * Read as: cache if is needed, or if the feature is enabled but we are not already caching. - * @return {Boolean} - */ - shouldCache: function() { - this.ownCaching = this.needsItsOwnCache() || ( - this.objectCaching && - (!this.group || !this.group.isOnACache()) - ); - return this.ownCaching; - }, + renderCache: function(options) { + options = options || {}; + if (!this._cacheCanvas) { + this._createCacheCanvas(); + } + if (this.isCacheDirty()) { + this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); + this.drawObject(this._cacheContext, options.forClipping); + this.dirty = false; + } + }, - /** - * Check if this object or a child object will cast a shadow - * used by Group.shouldCache to know if child has a shadow recursively - * @return {Boolean} - * @deprecated - */ - willDrawShadow: function() { - return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); - }, + /** + * Remove cacheCanvas and its dimensions from the objects + */ + _removeCacheCanvas: function() { + this._cacheCanvas = null; + this.cacheWidth = 0; + this.cacheHeight = 0; + }, - /** - * Execute the drawing operation for an object clipPath - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {fabric.Object} clipPath - */ - drawClipPathOnCache: function(ctx, clipPath) { - ctx.save(); - // DEBUG: uncomment this line, comment the following - // ctx.globalAlpha = 0.4 - if (clipPath.inverted) { - ctx.globalCompositeOperation = 'destination-out'; - } - else { - ctx.globalCompositeOperation = 'destination-in'; - } - //ctx.scale(1 / 2, 1 / 2); - if (clipPath.absolutePositioned) { - var m = fabric.util.invertTransform(this.calcTransformMatrix()); - ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); - } - clipPath.transform(ctx); - ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); - ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); - ctx.restore(); - }, + /** + * return true if the object will draw a stroke + * Does not consider text styles. This is just a shortcut used at rendering time + * We want it to be an approximation and be fast. + * wrote to avoid extra caching, it has to return true when stroke happens, + * can guess when it will not happen at 100% chance, does not matter if it misses + * some use case where the stroke is invisible. + * @since 3.0.0 + * @returns Boolean + */ + hasStroke: function() { + return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; + }, - /** - * Execute the drawing operation for an object on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawObject: function(ctx, forClipping) { - var originalFill = this.fill, originalStroke = this.stroke; - if (forClipping) { - this.fill = 'black'; - this.stroke = ''; - this._setClippingProperties(ctx); - } - else { - this._renderBackground(ctx); - } - this._render(ctx); - this._drawClipPath(ctx, this.clipPath); - this.fill = originalFill; - this.stroke = originalStroke; - }, + /** + * return true if the object will draw a fill + * Does not consider text styles. This is just a shortcut used at rendering time + * We want it to be an approximation and be fast. + * wrote to avoid extra caching, it has to return true when fill happens, + * can guess when it will not happen at 100% chance, does not matter if it misses + * some use case where the fill is invisible. + * @since 3.0.0 + * @returns Boolean + */ + hasFill: function() { + return this.fill && this.fill !== 'transparent'; + }, - /** - * Prepare clipPath state and cache and draw it on instance's cache - * @param {CanvasRenderingContext2D} ctx - * @param {fabric.Object} clipPath - */ - _drawClipPath: function (ctx, clipPath) { - if (!clipPath) { return; } - // needed to setup a couple of variables - // path canvas gets overridden with this one. - // TODO find a better solution? - clipPath._set('canvas', this.canvas); - clipPath.shouldCache(); - clipPath._transformDone = true; - clipPath.renderCache({ forClipping: true }); - this.drawClipPathOnCache(ctx, clipPath); - }, + /** + * When set to `true`, force the object to have its own cache, even if it is inside a group + * it may be needed when your object behave in a particular way on the cache and always needs + * its own isolated canvas to render correctly. + * Created to be overridden + * since 1.7.12 + * @returns Boolean + */ + needsItsOwnCache: function() { + if (this.paintFirst === 'stroke' && + this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') { + return true; + } + if (this.clipPath) { + return true; + } + return false; + }, - /** - * Paint the cached copy of the object on the target context. - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawCacheOnCanvas: function(ctx) { - ctx.scale(1 / this.zoomX, 1 / this.zoomY); - ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); - }, + /** + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * Read as: cache if is needed, or if the feature is enabled but we are not already caching. + * @return {Boolean} + */ + shouldCache: function() { + this.ownCaching = this.needsItsOwnCache() || ( + this.objectCaching && + (!this.group || !this.group.isOnACache()) + ); + return this.ownCaching; + }, - /** - * Check if cache is dirty - * @param {Boolean} skipCanvas skip canvas checks because this object is painted - * on parent canvas. - */ - isCacheDirty: function(skipCanvas) { - if (this.isNotVisible()) { - return false; - } - if (this._cacheCanvas && this._cacheContext && !skipCanvas && this._updateCacheCanvas()) { - // in this case the context is already cleared. - return true; - } - else { - if (this.dirty || - (this.clipPath && this.clipPath.absolutePositioned) || - (this.statefullCache && this.hasStateChanged('cacheProperties')) - ) { - if (this._cacheCanvas && this._cacheContext && !skipCanvas) { - var width = this.cacheWidth / this.zoomX; - var height = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-width / 2, -height / 2, width, height); - } - return true; - } - } - return false; - }, + /** + * Check if this object or a child object will cast a shadow + * used by Group.shouldCache to know if child has a shadow recursively + * @return {Boolean} + */ + willDrawShadow: function() { + return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); + }, - /** - * Draws a background for the object big as its untransformed dimensions - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderBackground: function(ctx) { - if (!this.backgroundColor) { - return; - } - var dim = this._getNonTransformedDimensions(); - ctx.fillStyle = this.backgroundColor; + /** + * Execute the drawing operation for an object clipPath + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {fabric.Object} clipPath + */ + drawClipPathOnCache: function(ctx, clipPath) { + ctx.save(); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4 + if (clipPath.inverted) { + ctx.globalCompositeOperation = 'destination-out'; + } + else { + ctx.globalCompositeOperation = 'destination-in'; + } + //ctx.scale(1 / 2, 1 / 2); + if (clipPath.absolutePositioned) { + var m = fabric.util.invertTransform(this.calcTransformMatrix()); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + } + clipPath.transform(ctx); + ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY); + ctx.drawImage(clipPath._cacheCanvas, -clipPath.cacheTranslationX, -clipPath.cacheTranslationY); + ctx.restore(); + }, - ctx.fillRect( - -dim.x / 2, - -dim.y / 2, - dim.x, - dim.y - ); - // if there is background color no other shadows - // should be casted - this._removeShadow(ctx); - }, + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject: function(ctx, forClipping) { + var originalFill = this.fill, originalStroke = this.stroke; + if (forClipping) { + this.fill = 'black'; + this.stroke = ''; + this._setClippingProperties(ctx); + } + else { + this._renderBackground(ctx); + } + this._render(ctx); + this._drawClipPath(ctx, this.clipPath); + this.fill = originalFill; + this.stroke = originalStroke; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _setOpacity: function(ctx) { - if (this.group && !this.group._transformDone) { - ctx.globalAlpha = this.getObjectOpacity(); - } - else { - ctx.globalAlpha *= this.opacity; - } - }, + /** + * Prepare clipPath state and cache and draw it on instance's cache + * @param {CanvasRenderingContext2D} ctx + * @param {fabric.Object} clipPath + */ + _drawClipPath: function (ctx, clipPath) { + if (!clipPath) { return; } + // needed to setup a couple of variables + // path canvas gets overridden with this one. + // TODO find a better solution? + clipPath.canvas = this.canvas; + clipPath.shouldCache(); + clipPath._transformDone = true; + clipPath.renderCache({ forClipping: true }); + this.drawClipPathOnCache(ctx, clipPath); + }, - _setStrokeStyles: function(ctx, decl) { - var stroke = decl.stroke; - if (stroke) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = decl.strokeLineCap; - ctx.lineDashOffset = decl.strokeDashOffset; - ctx.lineJoin = decl.strokeLineJoin; - ctx.miterLimit = decl.strokeMiterLimit; - if (stroke.toLive) { - if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - this._applyPatternForTransformedGradient(ctx, stroke); - } - else { - // is a simple gradient or pattern - ctx.strokeStyle = stroke.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, stroke); - } - } - else { - // is a color - ctx.strokeStyle = decl.stroke; + /** + * Paint the cached copy of the object on the target context. + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawCacheOnCanvas: function(ctx) { + ctx.scale(1 / this.zoomX, 1 / this.zoomY); + ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); + }, + + /** + * Check if cache is dirty + * @param {Boolean} skipCanvas skip canvas checks because this object is painted + * on parent canvas. + */ + isCacheDirty: function(skipCanvas) { + if (this.isNotVisible()) { + return false; + } + if (this._cacheCanvas && !skipCanvas && this._updateCacheCanvas()) { + // in this case the context is already cleared. + return true; + } + else { + if (this.dirty || + (this.clipPath && this.clipPath.absolutePositioned) || + (this.statefullCache && this.hasStateChanged('cacheProperties')) + ) { + if (this._cacheCanvas && !skipCanvas) { + var width = this.cacheWidth / this.zoomX; + var height = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-width / 2, -height / 2, width, height); } + return true; } - }, + } + return false; + }, + + /** + * Draws a background for the object big as its untransformed dimensions + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderBackground: function(ctx) { + if (!this.backgroundColor) { + return; + } + var dim = this._getNonTransformedDimensions(); + ctx.fillStyle = this.backgroundColor; + + ctx.fillRect( + -dim.x / 2, + -dim.y / 2, + dim.x, + dim.y + ); + // if there is background color no other shadows + // should be casted + this._removeShadow(ctx); + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _setOpacity: function(ctx) { + if (this.group && !this.group._transformDone) { + ctx.globalAlpha = this.getObjectOpacity(); + } + else { + ctx.globalAlpha *= this.opacity; + } + }, - _setFillStyles: function(ctx, decl) { - var fill = decl.fill; - if (fill) { - if (fill.toLive) { - ctx.fillStyle = fill.toLive(ctx, this); - this._applyPatternGradientTransform(ctx, decl.fill); + _setStrokeStyles: function(ctx, decl) { + var stroke = decl.stroke; + if (stroke) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = decl.strokeLineCap; + ctx.lineDashOffset = decl.strokeDashOffset; + ctx.lineJoin = decl.strokeLineJoin; + ctx.miterLimit = decl.strokeMiterLimit; + if (stroke.toLive) { + if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + this._applyPatternForTransformedGradient(ctx, stroke); } else { - ctx.fillStyle = fill; + // is a simple gradient or pattern + ctx.strokeStyle = stroke.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, stroke); } } - }, - - _setClippingProperties: function(ctx) { - ctx.globalAlpha = 1; - ctx.strokeStyle = 'transparent'; - ctx.fillStyle = '#000000'; - }, - - /** - * @private - * Sets line dash - * @param {CanvasRenderingContext2D} ctx Context to set the dash line on - * @param {Array} dashArray array representing dashes - */ - _setLineDash: function(ctx, dashArray) { - if (!dashArray || dashArray.length === 0) { - return; - } - // Spec requires the concatenation of two copies the dash list when the number of elements is odd - if (1 & dashArray.length) { - dashArray.push.apply(dashArray, dashArray); + else { + // is a color + ctx.strokeStyle = decl.stroke; } - ctx.setLineDash(dashArray); - }, + } + }, - /** - * Renders controls and borders for the object - * the context here is not transformed - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} [styleOverride] properties to override the object style - */ - _renderControls: function(ctx, styleOverride) { - var vpt = this.getViewportTransform(), - matrix = this.calcTransformMatrix(), - options, drawBorders, drawControls; - styleOverride = styleOverride || { }; - drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; - drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; - matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); - options = fabric.util.qrDecompose(matrix); - ctx.save(); - ctx.translate(options.translateX, options.translateY); - ctx.lineWidth = 1 * this.borderScaleFactor; - if (!this.group) { - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + _setFillStyles: function(ctx, decl) { + var fill = decl.fill; + if (fill) { + if (fill.toLive) { + ctx.fillStyle = fill.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, decl.fill); } - if (this.flipX) { - options.angle -= 180; + else { + ctx.fillStyle = fill; } - ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); - drawBorders && this.drawBorders(ctx, options, styleOverride); - drawControls && this.drawControls(ctx, styleOverride); - ctx.restore(); - }, + } + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _setShadow: function(ctx) { - if (!this.shadow) { - return; - } + _setClippingProperties: function(ctx) { + ctx.globalAlpha = 1; + ctx.strokeStyle = 'transparent'; + ctx.fillStyle = '#000000'; + }, - var shadow = this.shadow, canvas = this.canvas, - multX = (canvas && canvas.viewportTransform[0]) || 1, - multY = (canvas && canvas.viewportTransform[3]) || 1, - scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); - if (canvas && canvas._isRetinaScaling()) { - multX *= fabric.devicePixelRatio; - multY *= fabric.devicePixelRatio; - } - ctx.shadowColor = shadow.color; - ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * - (multX + multY) * (scaling.x + scaling.y) / 4; - ctx.shadowOffsetX = shadow.offsetX * multX * scaling.x; - ctx.shadowOffsetY = shadow.offsetY * multY * scaling.y; - }, + /** + * @private + * Sets line dash + * @param {CanvasRenderingContext2D} ctx Context to set the dash line on + * @param {Array} dashArray array representing dashes + */ + _setLineDash: function(ctx, dashArray) { + if (!dashArray || dashArray.length === 0) { + return; + } + // Spec requires the concatenation of two copies the dash list when the number of elements is odd + if (1 & dashArray.length) { + dashArray.push.apply(dashArray, dashArray); + } + ctx.setLineDash(dashArray); + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _removeShadow: function(ctx) { - if (!this.shadow) { - return; - } + /** + * Renders controls and borders for the object + * the context here is not transformed + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [styleOverride] properties to override the object style + */ + _renderControls: function(ctx, styleOverride) { + var vpt = this.getViewportTransform(), + matrix = this.calcTransformMatrix(), + options, drawBorders, drawControls; + styleOverride = styleOverride || { }; + drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; + drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; + matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); + options = fabric.util.qrDecompose(matrix); + ctx.save(); + ctx.translate(options.translateX, options.translateY); + ctx.lineWidth = 1 * this.borderScaleFactor; + if (!this.group) { + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + } + if (this.flipX) { + options.angle -= 180; + } + ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle)); + if (styleOverride.forActiveSelection || this.group) { + drawBorders && this.drawBordersInGroup(ctx, options, styleOverride); + } + else { + drawBorders && this.drawBorders(ctx, styleOverride); + } + drawControls && this.drawControls(ctx, styleOverride); + ctx.restore(); + }, - ctx.shadowColor = ''; - ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _setShadow: function(ctx) { + if (!this.shadow) { + return; + } - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} filler fabric.Pattern or fabric.Gradient - * @return {Object} offset.offsetX offset for text rendering - * @return {Object} offset.offsetY offset for text rendering - */ - _applyPatternGradientTransform: function(ctx, filler) { - if (!filler || !filler.toLive) { - return { offsetX: 0, offsetY: 0 }; - } - var t = filler.gradientTransform || filler.patternTransform; - var offsetX = -this.width / 2 + filler.offsetX || 0, - offsetY = -this.height / 2 + filler.offsetY || 0; + var shadow = this.shadow, canvas = this.canvas, scaling, + multX = (canvas && canvas.viewportTransform[0]) || 1, + multY = (canvas && canvas.viewportTransform[3]) || 1; + if (shadow.nonScaling) { + scaling = { scaleX: 1, scaleY: 1 }; + } + else { + scaling = this.getObjectScaling(); + } + if (canvas && canvas._isRetinaScaling()) { + multX *= fabric.devicePixelRatio; + multY *= fabric.devicePixelRatio; + } + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * + (multX + multY) * (scaling.scaleX + scaling.scaleY) / 4; + ctx.shadowOffsetX = shadow.offsetX * multX * scaling.scaleX; + ctx.shadowOffsetY = shadow.offsetY * multY * scaling.scaleY; + }, - if (filler.gradientUnits === 'percentage') { - ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); - } - else { - ctx.transform(1, 0, 0, 1, offsetX, offsetY); - } - if (t) { - ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); - } - return { offsetX: offsetX, offsetY: offsetY }; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _removeShadow: function(ctx) { + if (!this.shadow) { + return; + } - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderPaintInOrder: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderStroke(ctx); - this._renderFill(ctx); - } - else { - this._renderFill(ctx); - this._renderStroke(ctx); - } - }, + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, - /** - * @private - * function that actually render something on the context. - * empty here to allow Obects to work on tests to benchmark fabric functionalites - * not related to rendering - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(/* ctx */) { + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} filler fabric.Pattern or fabric.Gradient + * @return {Object} offset.offsetX offset for text rendering + * @return {Object} offset.offsetY offset for text rendering + */ + _applyPatternGradientTransform: function(ctx, filler) { + if (!filler || !filler.toLive) { + return { offsetX: 0, offsetY: 0 }; + } + var t = filler.gradientTransform || filler.patternTransform; + var offsetX = -this.width / 2 + filler.offsetX || 0, + offsetY = -this.height / 2 + filler.offsetY || 0; - }, + if (filler.gradientUnits === 'percentage') { + ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); + } + else { + ctx.transform(1, 0, 0, 1, offsetX, offsetY); + } + if (t) { + ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); + } + return { offsetX: offsetX, offsetY: offsetY }; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderFill: function(ctx) { - if (!this.fill) { - return; - } + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderPaintInOrder: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderStroke(ctx); + this._renderFill(ctx); + } + else { + this._renderFill(ctx); + this._renderStroke(ctx); + } + }, - ctx.save(); - this._setFillStyles(ctx, this); - if (this.fillRule === 'evenodd') { - ctx.fill('evenodd'); - } - else { - ctx.fill(); - } - ctx.restore(); - }, + /** + * @private + * function that actually render something on the context. + * empty here to allow Obects to work on tests to benchmark fabric functionalites + * not related to rendering + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(/* ctx */) { - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderStroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } + }, - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); - } + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderFill: function(ctx) { + if (!this.fill) { + return; + } - ctx.save(); - if (this.strokeUniform) { - var scaling = this.getObjectScaling(); - ctx.scale(1 / scaling.x, 1 / scaling.y); - } - this._setLineDash(ctx, this.strokeDashArray); - this._setStrokeStyles(ctx, this); - ctx.stroke(); - ctx.restore(); - }, - - /** - * This function try to patch the missing gradientTransform on canvas gradients. - * transforming a context to transform the gradient, is going to transform the stroke too. - * we want to transform the gradient but not the stroke operation, so we create - * a transformed gradient on a pattern and then we use the pattern instead of the gradient. - * this method has drwabacks: is slow, is in low resolution, needs a patch for when the size - * is limited. - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {fabric.Gradient} filler a fabric gradient instance - */ - _applyPatternForTransformedGradient: function(ctx, filler) { - var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), - pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), - width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.scale( - dims.zoomX / this.scaleX / retinaScaling, - dims.zoomY / this.scaleY / retinaScaling - ); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fillStyle = filler.toLive(ctx); - pCtx.fill(); - ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); - ctx.scale( - retinaScaling * this.scaleX / dims.zoomX, - retinaScaling * this.scaleY / dims.zoomY - ); - ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); - }, - - /** - * This function is an helper for svg import. it returns the center of the object in the svg - * untransformed coordinates - * @private - * @return {Object} center point from element coordinates - */ - _findCenterFromElement: function() { - return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; - }, - - /** - * This function is an helper for svg import. it decompose the transformMatrix - * and assign properties to object. - * untransformed coordinates - * @private - * @chainable - */ - _assignTransformMatrixProps: function() { - if (this.transformMatrix) { - var options = fabric.util.qrDecompose(this.transformMatrix); - this.flipX = false; - this.flipY = false; - this.set('scaleX', options.scaleX); - this.set('scaleY', options.scaleY); - this.angle = options.angle; - this.skewX = options.skewX; - this.skewY = 0; - } - }, - - /** - * This function is an helper for svg import. it removes the transform matrix - * and set to object properties that fabricjs can handle - * @private - * @param {Object} preserveAspectRatioOptions - * @return {thisArg} - */ - _removeTransformMatrix: function(preserveAspectRatioOptions) { - var center = this._findCenterFromElement(); - if (this.transformMatrix) { - this._assignTransformMatrixProps(); - center = fabric.util.transformPoint(center, this.transformMatrix); - } - this.transformMatrix = null; - if (preserveAspectRatioOptions) { - this.scaleX *= preserveAspectRatioOptions.scaleX; - this.scaleY *= preserveAspectRatioOptions.scaleY; - this.cropX = preserveAspectRatioOptions.cropX; - this.cropY = preserveAspectRatioOptions.cropY; - center.x += preserveAspectRatioOptions.offsetLeft; - center.y += preserveAspectRatioOptions.offsetTop; - this.width = preserveAspectRatioOptions.width; - this.height = preserveAspectRatioOptions.height; - } - this.setPositionByOrigin(center, 'center', 'center'); - }, - - /** - * Clones an instance. - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @returns {Promise} - */ - clone: function(propertiesToInclude) { - var objectForm = this.toObject(propertiesToInclude); - return this.constructor.fromObject(objectForm); - }, + ctx.save(); + this._setFillStyles(ctx, this); + if (this.fillRule === 'evenodd') { + ctx.fill('evenodd'); + } + else { + ctx.fill(); + } + ctx.restore(); + }, - /** - * Creates an instance of fabric.Image out of an object - * makes use of toCanvasElement. - * Once this method was based on toDataUrl and loadImage, so it also had a quality - * and format option. toCanvasElement is faster and produce no loss of quality. - * If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. - * toCanvasElement and then toBlob from the obtained canvas is also a good option. - * @param {Object} [options] for clone as image, passed to toDataURL - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 - * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 - * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 - * @return {fabric.Image} Object cloned as image. - */ - cloneAsImage: function(options) { - var canvasEl = this.toCanvasElement(options); - return new fabric.Image(canvasEl); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderStroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } - /** - * Converts an object into a HTMLCanvas element - * @param {Object} options Options object - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 - * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 - * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 - * @return {HTMLCanvasElement} Returns DOM element with the fabric.Object - */ - toCanvasElement: function(options) { - options || (options = { }); - - var utils = fabric.util, origParams = utils.saveObjectTransform(this), - originalGroup = this.group, - originalShadow = this.shadow, abs = Math.abs, - retinaScaling = options.enableRetinaScaling ? Math.max(fabric.devicePixelRatio, 1) : 1, - multiplier = (options.multiplier || 1) * retinaScaling; - delete this.group; - if (options.withoutTransform) { - utils.resetObjectTransform(this); - } - if (options.withoutShadow) { - this.shadow = null; - } - - var el = fabric.util.createCanvasElement(), - // skip canvas zoom and calculate with setCoords now. - boundingRect = this.getBoundingRect(true, true), - shadow = this.shadow, shadowOffset = { x: 0, y: 0 }, - width, height; - - if (shadow) { - var shadowBlur = shadow.blur; - var scaling = shadow.nonScaling ? new fabric.Point(1, 1) : this.getObjectScaling(); - // consider non scaling shadow. - shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.x)); - shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.y)); - } - width = boundingRect.width + shadowOffset.x; - height = boundingRect.height + shadowOffset.y; - // if the current width/height is not an integer - // we need to make it so. - el.width = Math.ceil(width); - el.height = Math.ceil(height); - var canvas = new fabric.StaticCanvas(el, { - enableRetinaScaling: false, - renderOnAddRemove: false, - skipOffscreen: false, - }); - if (options.format === 'jpeg') { - canvas.backgroundColor = '#fff'; - } - this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); - var originalCanvas = this.canvas; - canvas._objects = [this]; - this.set('canvas', canvas); - this.setCoords(); - var canvasEl = canvas.toCanvasElement(multiplier || 1, options); - this.set('canvas', originalCanvas); - this.shadow = originalShadow; - if (originalGroup) { - this.group = originalGroup; - } - this.set(origParams); - this.setCoords(); - // canvas.dispose will call image.dispose that will nullify the elements - // since this canvas is a simple element for the process, we remove references - // to objects in this way in order to avoid object trashing. - canvas._objects = []; - canvas.dispose(); - canvas = null; - - return canvasEl; - }, + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } - /** - * Converts an object into a data-url-like string - * @param {Object} options Options object - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 - * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 - * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 - * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 - * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format - */ - toDataURL: function(options) { - options || (options = { }); - return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); - }, + ctx.save(); + if (this.strokeUniform && this.group) { + var scaling = this.getObjectScaling(); + ctx.scale(1 / scaling.scaleX, 1 / scaling.scaleY); + } + else if (this.strokeUniform) { + ctx.scale(1 / this.scaleX, 1 / this.scaleY); + } + this._setLineDash(ctx, this.strokeDashArray); + this._setStrokeStyles(ctx, this); + ctx.stroke(); + ctx.restore(); + }, - /** - * Returns true if specified type is identical to the type of an instance - * @param {String} type Type to check against - * @return {Boolean} - */ - isType: function(type) { - return arguments.length > 1 ? Array.from(arguments).includes(this.type) : this.type === type; - }, + /** + * This function try to patch the missing gradientTransform on canvas gradients. + * transforming a context to transform the gradient, is going to transform the stroke too. + * we want to transform the gradient but not the stroke operation, so we create + * a transformed gradient on a pattern and then we use the pattern instead of the gradient. + * this method has drwabacks: is slow, is in low resolution, needs a patch for when the size + * is limited. + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {fabric.Gradient} filler a fabric gradient instance + */ + _applyPatternForTransformedGradient: function(ctx, filler) { + var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), + width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.scale( + dims.zoomX / this.scaleX / retinaScaling, + dims.zoomY / this.scaleY / retinaScaling + ); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fillStyle = filler.toLive(ctx); + pCtx.fill(); + ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); + ctx.scale( + retinaScaling * this.scaleX / dims.zoomX, + retinaScaling * this.scaleY / dims.zoomY + ); + ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); + }, - /** - * Returns complexity of an instance - * @return {Number} complexity of this instance (is 1 unless subclassed) - */ - complexity: function() { - return 1; - }, + /** + * This function is an helper for svg import. it returns the center of the object in the svg + * untransformed coordinates + * @private + * @return {Object} center point from element coordinates + */ + _findCenterFromElement: function() { + return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; + }, - /** - * Returns a JSON representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} JSON - */ - toJSON: function(propertiesToInclude) { - // delegate, not alias - return this.toObject(propertiesToInclude); - }, + /** + * This function is an helper for svg import. it decompose the transformMatrix + * and assign properties to object. + * untransformed coordinates + * @private + * @chainable + */ + _assignTransformMatrixProps: function() { + if (this.transformMatrix) { + var options = fabric.util.qrDecompose(this.transformMatrix); + this.flipX = false; + this.flipY = false; + this.set('scaleX', options.scaleX); + this.set('scaleY', options.scaleY); + this.angle = options.angle; + this.skewX = options.skewX; + this.skewY = 0; + } + }, - /** - * Sets "angle" of an instance with centered rotation - * @param {Number} angle Angle value (in degrees) - * @return {fabric.Object} thisArg - * @chainable - */ - rotate: function(angle) { - var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; + /** + * This function is an helper for svg import. it removes the transform matrix + * and set to object properties that fabricjs can handle + * @private + * @param {Object} preserveAspectRatioOptions + * @return {thisArg} + */ + _removeTransformMatrix: function(preserveAspectRatioOptions) { + var center = this._findCenterFromElement(); + if (this.transformMatrix) { + this._assignTransformMatrixProps(); + center = fabric.util.transformPoint(center, this.transformMatrix); + } + this.transformMatrix = null; + if (preserveAspectRatioOptions) { + this.scaleX *= preserveAspectRatioOptions.scaleX; + this.scaleY *= preserveAspectRatioOptions.scaleY; + this.cropX = preserveAspectRatioOptions.cropX; + this.cropY = preserveAspectRatioOptions.cropY; + center.x += preserveAspectRatioOptions.offsetLeft; + center.y += preserveAspectRatioOptions.offsetTop; + this.width = preserveAspectRatioOptions.width; + this.height = preserveAspectRatioOptions.height; + } + this.setPositionByOrigin(center, 'center', 'center'); + }, + + /** + * Clones an instance, using a callback method will work for every object. + * @param {Function} callback Callback is invoked with a clone as a first argument + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + */ + clone: function(callback, propertiesToInclude) { + var objectForm = this.toObject(propertiesToInclude); + if (this.constructor.fromObject) { + this.constructor.fromObject(objectForm, callback); + } + else { + fabric.Object._fromObject('Object', objectForm, callback); + } + }, + + /** + * Creates an instance of fabric.Image out of an object + * makes use of toCanvasElement. + * Once this method was based on toDataUrl and loadImage, so it also had a quality + * and format option. toCanvasElement is faster and produce no loss of quality. + * If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. + * toCanvasElement and then toBlob from the obtained canvas is also a good option. + * This method is sync now, but still support the callback because we did not want to break. + * When fabricJS 5.0 will be planned, this will probably be changed to not have a callback. + * @param {Function} callback callback, invoked with an instance as a first argument + * @param {Object} [options] for clone as image, passed to toDataURL + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {fabric.Object} thisArg + */ + cloneAsImage: function(callback, options) { + var canvasEl = this.toCanvasElement(options); + if (callback) { + callback(new fabric.Image(canvasEl)); + } + return this; + }, + + /** + * Converts an object into a HTMLCanvas element + * @param {Object} options Options object + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {HTMLCanvasElement} Returns DOM element with the fabric.Object + */ + toCanvasElement: function(options) { + options || (options = { }); - if (shouldCenterOrigin) { - this._setOriginToCenter(); - } + var utils = fabric.util, origParams = utils.saveObjectTransform(this), + originalGroup = this.group, + originalShadow = this.shadow, abs = Math.abs, + multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? fabric.devicePixelRatio : 1); + delete this.group; + if (options.withoutTransform) { + utils.resetObjectTransform(this); + } + if (options.withoutShadow) { + this.shadow = null; + } - this.set('angle', angle); + var el = fabric.util.createCanvasElement(), + // skip canvas zoom and calculate with setCoords now. + boundingRect = this.getBoundingRect(true, true), + shadow = this.shadow, scaling, + shadowOffset = { x: 0, y: 0 }, shadowBlur, + width, height; - if (shouldCenterOrigin) { - this._resetOrigin(); + if (shadow) { + shadowBlur = shadow.blur; + if (shadow.nonScaling) { + scaling = { scaleX: 1, scaleY: 1 }; } + else { + scaling = this.getObjectScaling(); + } + // consider non scaling shadow. + shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.scaleX)); + shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.scaleY)); + } + width = boundingRect.width + shadowOffset.x; + height = boundingRect.height + shadowOffset.y; + // if the current width/height is not an integer + // we need to make it so. + el.width = Math.ceil(width); + el.height = Math.ceil(height); + var canvas = new fabric.StaticCanvas(el, { + enableRetinaScaling: false, + renderOnAddRemove: false, + skipOffscreen: false, + }); + if (options.format === 'jpeg') { + canvas.backgroundColor = '#fff'; + } + this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); + + var originalCanvas = this.canvas; + canvas.add(this); + var canvasEl = canvas.toCanvasElement(multiplier || 1, options); + this.shadow = originalShadow; + this.set('canvas', originalCanvas); + if (originalGroup) { + this.group = originalGroup; + } + this.set(origParams).setCoords(); + // canvas.dispose will call image.dispose that will nullify the elements + // since this canvas is a simple element for the process, we remove references + // to objects in this way in order to avoid object trashing. + canvas._objects = []; + canvas.dispose(); + canvas = null; + + return canvasEl; + }, + + /** + * Converts an object into a data-url-like string + * @param {Object} options Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + */ + toDataURL: function(options) { + options || (options = { }); + return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); + }, - return this; - }, - - /** - * Centers object horizontally on canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - centerH: function () { - this.canvas && this.canvas.centerObjectH(this); - return this; - }, - - /** - * Centers object horizontally on current viewport of canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - viewportCenterH: function () { - this.canvas && this.canvas.viewportCenterObjectH(this); - return this; - }, - - /** - * Centers object vertically on canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - centerV: function () { - this.canvas && this.canvas.centerObjectV(this); - return this; - }, + /** + * Returns true if specified type is identical to the type of an instance + * @param {String} type Type to check against + * @return {Boolean} + */ + isType: function(type) { + return this.type === type; + }, - /** - * Centers object vertically on current viewport of canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - viewportCenterV: function () { - this.canvas && this.canvas.viewportCenterObjectV(this); - return this; - }, + /** + * Returns complexity of an instance + * @return {Number} complexity of this instance (is 1 unless subclassed) + */ + complexity: function() { + return 1; + }, - /** - * Centers object vertically and horizontally on canvas to which is was added last - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - center: function () { - this.canvas && this.canvas.centerObject(this); - return this; - }, + /** + * Returns a JSON representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} JSON + */ + toJSON: function(propertiesToInclude) { + // delegate, not alias + return this.toObject(propertiesToInclude); + }, - /** - * Centers object on current viewport of canvas to which it was added last. - * You might need to call `setCoords` on an object after centering, to update controls area. - * @return {fabric.Object} thisArg - * @chainable - */ - viewportCenter: function () { - this.canvas && this.canvas.viewportCenterObject(this); - return this; - }, + /** + * Sets "angle" of an instance with centered rotation + * @param {Number} angle Angle value (in degrees) + * @return {fabric.Object} thisArg + * @chainable + */ + rotate: function(angle) { + var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; - /** - * This callback function is called by the parent group of an object every - * time a non-delegated property changes on the group. It is passed the key - * and value as parameters. Not adding in this function's signature to avoid - * Travis build error about unused variables. - */ - setOnGroup: function() { - // implemented by sub-classes, as needed. - }, + if (shouldCenterOrigin) { + this._setOriginToCenter(); + } - /** - * Sets canvas globalCompositeOperation for specific object - * custom composition operation for the particular object can be specified using globalCompositeOperation property - * @param {CanvasRenderingContext2D} ctx Rendering canvas context - */ - _setupCompositeOperation: function (ctx) { - if (this.globalCompositeOperation) { - ctx.globalCompositeOperation = this.globalCompositeOperation; - } - }, + this.set('angle', angle); - /** - * cancel instance's running animations - * override if necessary to dispose artifacts such as `clipPath` - */ - dispose: function () { - if (fabric.runningAnimations) { - fabric.runningAnimations.cancelByTarget(this); - } + if (shouldCenterOrigin) { + this._resetOrigin(); } - }); - fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); + return this; + }, - extend(fabric.Object.prototype, fabric.Observable); + /** + * Centers object horizontally on canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + centerH: function () { + this.canvas && this.canvas.centerObjectH(this); + return this; + }, /** - * Defines the number of fraction digits to use when serializing object values. - * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc. - * @static - * @memberOf fabric.Object - * @constant - * @type Number + * Centers object horizontally on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable */ - fabric.Object.NUM_FRACTION_DIGITS = 2; + viewportCenterH: function () { + this.canvas && this.canvas.viewportCenterObjectH(this); + return this; + }, /** - * Defines which properties should be enlivened from the object passed to {@link fabric.Object._fromObject} - * @static - * @memberOf fabric.Object - * @constant - * @type string[] + * Centers object vertically on canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable */ + centerV: function () { + this.canvas && this.canvas.centerObjectV(this); + return this; + }, - fabric.Object._fromObject = function(klass, object, extraParam) { - var serializedObject = clone(object, true); - return fabric.util.enlivenObjectEnlivables(serializedObject).then(function(enlivedMap) { - var newObject = Object.assign(object, enlivedMap); - return extraParam ? new klass(object[extraParam], newObject) : new klass(newObject); - }); - }; + /** + * Centers object vertically on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenterV: function () { + this.canvas && this.canvas.viewportCenterObjectV(this); + return this; + }, - fabric.Object.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Object, object); - }; + /** + * Centers object vertically and horizontally on canvas to which is was added last + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + center: function () { + this.canvas && this.canvas.centerObject(this); + return this; + }, /** - * Unique id used internally when creating SVG elements - * @static - * @memberOf fabric.Object - * @type Number + * Centers object on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable */ - fabric.Object.__uid = 0; - })(typeof exports !== 'undefined' ? exports : window); + viewportCenter: function () { + this.canvas && this.canvas.viewportCenterObject(this); + return this; + }, - (function(global) { + /** + * Returns coordinates of a pointer relative to an object + * @param {Event} e Event to operate upon + * @param {Object} [pointer] Pointer to operate upon (instead of event) + * @return {Object} Coordinates of a pointer (x, y) + */ + getLocalPointer: function(e, pointer) { + pointer = pointer || this.canvas.getPointer(e); + var pClicked = new fabric.Point(pointer.x, pointer.y), + objectLeftTop = this._getLeftTopCoords(); + if (this.angle) { + pClicked = fabric.util.rotatePoint( + pClicked, objectLeftTop, degreesToRadians(-this.angle)); + } + return { + x: pClicked.x - objectLeftTop.x, + y: pClicked.y - objectLeftTop.y + }; + }, - var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians, - originXOffset = { - left: -0.5, - center: 0, - right: 0.5 - }, - originYOffset = { - top: -0.5, - center: 0, - bottom: 0.5 - }; + /** + * Sets canvas globalCompositeOperation for specific object + * custom composition operation for the particular object can be specified using globalCompositeOperation property + * @param {CanvasRenderingContext2D} ctx Rendering canvas context + */ + _setupCompositeOperation: function (ctx) { + if (this.globalCompositeOperation) { + ctx.globalCompositeOperation = this.globalCompositeOperation; + } + }, /** - * @typedef {number | 'left' | 'center' | 'right'} OriginX - * @typedef {number | 'top' | 'center' | 'bottom'} OriginY + * cancel instance's running animations + * override if necessary to dispose artifacts such as `clipPath` */ + dispose: function () { + if (fabric.runningAnimations) { + fabric.runningAnimations.cancelByTarget(this); + } + } + }); - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); - /** - * Resolves origin value relative to center - * @private - * @param {OriginX} originX - * @returns number - */ - resolveOriginX: function (originX) { - return typeof originX === 'string' ? - originXOffset[originX] : - originX - 0.5; - }, + extend(fabric.Object.prototype, fabric.Observable); - /** - * Resolves origin value relative to center - * @private - * @param {OriginY} originY - * @returns number - */ - resolveOriginY: function (originY) { - return typeof originY === 'string' ? - originYOffset[originY] : - originY - 0.5; - }, + /** + * Defines the number of fraction digits to use when serializing object values. + * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc. + * @static + * @memberOf fabric.Object + * @constant + * @type Number + */ + fabric.Object.NUM_FRACTION_DIGITS = 2; - /** - * Translates the coordinates from a set of origin to another (based on the object's dimensions) - * @param {fabric.Point} point The point which corresponds to the originX and originY params - * @param {OriginX} fromOriginX Horizontal origin: 'left', 'center' or 'right' - * @param {OriginY} fromOriginY Vertical origin: 'top', 'center' or 'bottom' - * @param {OriginX} toOriginX Horizontal origin: 'left', 'center' or 'right' - * @param {OriginY} toOriginY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { - var x = point.x, - y = point.y, - dim, - offsetX = this.resolveOriginX(toOriginX) - this.resolveOriginX(fromOriginX), - offsetY = this.resolveOriginY(toOriginY) - this.resolveOriginY(fromOriginY); + /** + * Defines which properties should be enlivened from the object passed to {@link fabric.Object._fromObject} + * @static + * @memberOf fabric.Object + * @constant + * @type string[] + */ + fabric.Object.ENLIVEN_PROPS = ['clipPath']; - if (offsetX || offsetY) { - dim = this._getTransformedDimensions(); - x = point.x + offsetX * dim.x; - y = point.y + offsetY * dim.y; - } + fabric.Object._fromObject = function(className, object, callback, extraParam) { + var klass = fabric[className]; + object = clone(object, true); + fabric.util.enlivenPatterns([object.fill, object.stroke], function(patterns) { + if (typeof patterns[0] !== 'undefined') { + object.fill = patterns[0]; + } + if (typeof patterns[1] !== 'undefined') { + object.stroke = patterns[1]; + } + fabric.util.enlivenObjectEnlivables(object, object, function () { + var instance = extraParam ? new klass(object[extraParam], object) : new klass(object); + callback && callback(instance); + }); + }); + }; - return new fabric.Point(x, y); - }, + /** + * Unique id used internally when creating SVG elements + * @static + * @memberOf fabric.Object + * @type Number + */ + fabric.Object.__uid = 0; +})(typeof exports !== 'undefined' ? exports : this); - /** - * Translates the coordinates from origin to center coordinates (based on the object's dimensions) - * @param {fabric.Point} point The point which corresponds to the originX and originY params - * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' - * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - translateToCenterPoint: function(point, originX, originY) { - var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); - if (this.angle) { - return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); - } - return p; - }, - /** - * Translates the coordinates from center to origin coordinates (based on the object's dimensions) - * @param {fabric.Point} center The point which corresponds to center of the object - * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' - * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - translateToOriginPoint: function(center, originX, originY) { - var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - if (this.angle) { - return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); - } - return p; - }, +(function() { - /** - * Returns the center coordinates of the object relative to canvas - * @return {fabric.Point} - */ - getCenterPoint: function() { - var relCenter = this.getRelativeCenterPoint(); - return this.group ? - fabric.util.transformPoint(relCenter, this.group.calcTransformMatrix()) : - relCenter; + var degreesToRadians = fabric.util.degreesToRadians, + originXOffset = { + left: -0.5, + center: 0, + right: 0.5 }, + originYOffset = { + top: -0.5, + center: 0, + bottom: 0.5 + }; - /** - * Returns the center coordinates of the object relative to it's containing group or null - * @return {fabric.Point|null} point or null of object has no parent group - */ - getCenterPointRelativeToParent: function () { - return this.group ? this.getRelativeCenterPoint() : null; - }, + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Returns the center coordinates of the object relative to it's parent - * @return {fabric.Point} - */ - getRelativeCenterPoint: function () { - return this.translateToCenterPoint(new fabric.Point(this.left, this.top), this.originX, this.originY); - }, + /** + * Translates the coordinates from a set of origin to another (based on the object's dimensions) + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom' + * @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { + var x = point.x, + y = point.y, + offsetX, offsetY, dim; - /** - * Returns the coordinates of the object based on center coordinates - * @param {fabric.Point} point The point which corresponds to the originX and originY params - * @return {fabric.Point} - */ - // getOriginPoint: function(center) { - // return this.translateToOriginPoint(center, this.originX, this.originY); - // }, + if (typeof fromOriginX === 'string') { + fromOriginX = originXOffset[fromOriginX]; + } + else { + fromOriginX -= 0.5; + } - /** - * Returns the coordinates of the object as if it has a different origin - * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' - * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - getPointByOrigin: function(originX, originY) { - var center = this.getRelativeCenterPoint(); - return this.translateToOriginPoint(center, originX, originY); - }, + if (typeof toOriginX === 'string') { + toOriginX = originXOffset[toOriginX]; + } + else { + toOriginX -= 0.5; + } - /** - * Returns the normalized point (rotated relative to center) in local coordinates - * @param {fabric.Point} point The point relative to instance coordinate system - * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' - * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {fabric.Point} - */ - normalizePoint: function(point, originX, originY) { - var center = this.getRelativeCenterPoint(), p, p2; - if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { - p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); - } - else { - p = new fabric.Point(this.left, this.top); - } + offsetX = toOriginX - fromOriginX; - p2 = new fabric.Point(point.x, point.y); - if (this.angle) { - p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); - } - return p2.subtractEquals(p); - }, + if (typeof fromOriginY === 'string') { + fromOriginY = originYOffset[fromOriginY]; + } + else { + fromOriginY -= 0.5; + } - /** - * Returns coordinates of a pointer relative to object's top left corner in object's plane - * @param {Event} e Event to operate upon - * @param {Object} [pointer] Pointer to operate upon (instead of event) - * @return {Object} Coordinates of a pointer (x, y) - */ - getLocalPointer: function (e, pointer) { - pointer = pointer || this.canvas.getPointer(e); - return fabric.util.transformPoint( - new fabric.Point(pointer.x, pointer.y), - fabric.util.invertTransform(this.calcTransformMatrix()) - ).addEquals(new fabric.Point(this.width / 2, this.height / 2)); - }, + if (typeof toOriginY === 'string') { + toOriginY = originYOffset[toOriginY]; + } + else { + toOriginY -= 0.5; + } - /** - * Returns the point in global coordinates - * @param {fabric.Point} The point relative to the local coordinate system - * @return {fabric.Point} - */ - // toGlobalPoint: function(point) { - // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); - // }, + offsetY = toOriginY - fromOriginY; - /** - * Sets the position of the object taking into consideration the object's origin - * @param {fabric.Point} pos The new position of the object - * @param {OriginX} originX Horizontal origin: 'left', 'center' or 'right' - * @param {OriginY} originY Vertical origin: 'top', 'center' or 'bottom' - * @return {void} - */ - setPositionByOrigin: function(pos, originX, originY) { - var center = this.translateToCenterPoint(pos, originX, originY), - position = this.translateToOriginPoint(center, this.originX, this.originY); - this.set('left', position.x); - this.set('top', position.y); - }, + if (offsetX || offsetY) { + dim = this._getTransformedDimensions(); + x = point.x + offsetX * dim.x; + y = point.y + offsetY * dim.y; + } - /** - * @param {String} to One of 'left', 'center', 'right' - */ - adjustPosition: function(to) { - var angle = degreesToRadians(this.angle), - hypotFull = this.getScaledWidth(), - xFull = fabric.util.cos(angle) * hypotFull, - yFull = fabric.util.sin(angle) * hypotFull, - offsetFrom, offsetTo; + return new fabric.Point(x, y); + }, - //TODO: this function does not consider mixed situation like top, center. - if (typeof this.originX === 'string') { - offsetFrom = originXOffset[this.originX]; - } - else { - offsetFrom = this.originX - 0.5; - } - if (typeof to === 'string') { - offsetTo = originXOffset[to]; - } - else { - offsetTo = to - 0.5; - } - this.left += xFull * (offsetTo - offsetFrom); - this.top += yFull * (offsetTo - offsetFrom); - this.setCoords(); - this.originX = to; - }, + /** + * Translates the coordinates from origin to center coordinates (based on the object's dimensions) + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToCenterPoint: function(point, originX, originY) { + var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); + if (this.angle) { + return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); + } + return p; + }, - /** - * Sets the origin/position of the object to it's center point - * @private - * @return {void} - */ - _setOriginToCenter: function() { - this._originalOriginX = this.originX; - this._originalOriginY = this.originY; + /** + * Translates the coordinates from center to origin coordinates (based on the object's dimensions) + * @param {fabric.Point} center The point which corresponds to center of the object + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToOriginPoint: function(center, originX, originY) { + var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + if (this.angle) { + return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); + } + return p; + }, - var center = this.getRelativeCenterPoint(); + /** + * Returns the real center coordinates of the object + * @return {fabric.Point} + */ + getCenterPoint: function() { + var leftTop = new fabric.Point(this.left, this.top); + return this.translateToCenterPoint(leftTop, this.originX, this.originY); + }, - this.originX = 'center'; - this.originY = 'center'; + /** + * Returns the coordinates of the object based on center coordinates + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @return {fabric.Point} + */ + // getOriginPoint: function(center) { + // return this.translateToOriginPoint(center, this.originX, this.originY); + // }, - this.left = center.x; - this.top = center.y; - }, + /** + * Returns the coordinates of the object as if it has a different origin + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + getPointByOrigin: function(originX, originY) { + var center = this.getCenterPoint(); + return this.translateToOriginPoint(center, originX, originY); + }, - /** - * Resets the origin/position of the object to it's original origin - * @private - * @return {void} - */ - _resetOrigin: function() { - var originPoint = this.translateToOriginPoint( - this.getRelativeCenterPoint(), - this._originalOriginX, - this._originalOriginY); + /** + * Returns the point in local coordinates + * @param {fabric.Point} point The point relative to the global coordinate system + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + toLocalPoint: function(point, originX, originY) { + var center = this.getCenterPoint(), + p, p2; - this.originX = this._originalOriginX; - this.originY = this._originalOriginY; + if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { + p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + } + else { + p = new fabric.Point(this.left, this.top); + } - this.left = originPoint.x; - this.top = originPoint.y; + p2 = new fabric.Point(point.x, point.y); + if (this.angle) { + p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); + } + return p2.subtractEquals(p); + }, - this._originalOriginX = null; - this._originalOriginY = null; - }, + /** + * Returns the point in global coordinates + * @param {fabric.Point} The point relative to the local coordinate system + * @return {fabric.Point} + */ + // toGlobalPoint: function(point) { + // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); + // }, - /** - * @private - */ - _getLeftTopCoords: function() { - return this.translateToOriginPoint(this.getRelativeCenterPoint(), 'left', 'top'); - }, - }); + /** + * Sets the position of the object taking into consideration the object's origin + * @param {fabric.Point} pos The new position of the object + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {void} + */ + setPositionByOrigin: function(pos, originX, originY) { + var center = this.translateToCenterPoint(pos, originX, originY), + position = this.translateToOriginPoint(center, this.originX, this.originY); + this.set('left', position.x); + this.set('top', position.y); + }, - })(typeof exports !== 'undefined' ? exports : window); + /** + * @param {String} to One of 'left', 'center', 'right' + */ + adjustPosition: function(to) { + var angle = degreesToRadians(this.angle), + hypotFull = this.getScaledWidth(), + xFull = fabric.util.cos(angle) * hypotFull, + yFull = fabric.util.sin(angle) * hypotFull, + offsetFrom, offsetTo; - (function(global) { + //TODO: this function does not consider mixed situation like top, center. + if (typeof this.originX === 'string') { + offsetFrom = originXOffset[this.originX]; + } + else { + offsetFrom = this.originX - 0.5; + } + if (typeof to === 'string') { + offsetTo = originXOffset[to]; + } + else { + offsetTo = to - 0.5; + } + this.left += xFull * (offsetTo - offsetFrom); + this.top += yFull * (offsetTo - offsetFrom); + this.setCoords(); + this.originX = to; + }, - function arrayFromCoords(coords) { - return [ - new fabric.Point(coords.tl.x, coords.tl.y), - new fabric.Point(coords.tr.x, coords.tr.y), - new fabric.Point(coords.br.x, coords.br.y), - new fabric.Point(coords.bl.x, coords.bl.y) - ]; - } + /** + * Sets the origin/position of the object to it's center point + * @private + * @return {void} + */ + _setOriginToCenter: function() { + this._originalOriginX = this.originX; + this._originalOriginY = this.originY; - var fabric = global.fabric, util = fabric.util, - degreesToRadians = util.degreesToRadians, - multiplyMatrices = util.multiplyTransformMatrices, - transformPoint = util.transformPoint; + var center = this.getCenterPoint(); - util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + this.originX = 'center'; + this.originY = 'center'; - /** - * Describe object's corner position in canvas element coordinates. - * properties are depending on control keys and padding the main controls. - * each property is an object with x, y and corner. - * The `corner` property contains in a similar manner the 4 points of the - * interactive area of the corner. - * The coordinates depends from the controls positionHandler and are used - * to draw and locate controls - * @memberOf fabric.Object.prototype - */ - oCoords: null, + this.left = center.x; + this.top = center.y; + }, - /** - * Describe object's corner position in canvas object absolute coordinates - * properties are tl,tr,bl,br and describe the four main corner. - * each property is an object with x, y, instance of Fabric.Point. - * The coordinates depends from this properties: width, height, scaleX, scaleY - * skewX, skewY, angle, strokeWidth, top, left. - * Those coordinates are useful to understand where an object is. They get updated - * with oCoords but they do not need to be updated when zoom or panning change. - * The coordinates get updated with @method setCoords. - * You can calculate them without updating with @method calcACoords(); - * @memberOf fabric.Object.prototype - */ - aCoords: null, + /** + * Resets the origin/position of the object to it's original origin + * @private + * @return {void} + */ + _resetOrigin: function() { + var originPoint = this.translateToOriginPoint( + this.getCenterPoint(), + this._originalOriginX, + this._originalOriginY); - /** - * Describe object's corner position in canvas element coordinates. - * includes padding. Used of object detection. - * set and refreshed with setCoords. - * @memberOf fabric.Object.prototype - */ - lineCoords: null, + this.originX = this._originalOriginX; + this.originY = this._originalOriginY; - /** - * storage for object transform matrix - */ - ownMatrixCache: null, + this.left = originPoint.x; + this.top = originPoint.y; - /** - * storage for object full transform matrix - */ - matrixCache: null, + this._originalOriginX = null; + this._originalOriginY = null; + }, - /** - * custom controls interface - * controls are added by default_controls.js - */ - controls: { }, + /** + * @private + */ + _getLeftTopCoords: function() { + return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top'); + }, + }); - /** - * @returns {number} x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane - */ - getX: function () { - return this.getXY().x; - }, +})(); - /** - * @param {number} value x position according to object's {@link fabric.Object#originX} property in canvas coordinate plane - */ - setX: function (value) { - this.setXY(this.getXY().setX(value)); - }, - /** - * @returns {number} x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ - * if parent is canvas then this property is identical to {@link fabric.Object#getX} - */ - getRelativeX: function () { - return this.left; - }, +(function() { - /** - * @param {number} value x position according to object's {@link fabric.Object#originX} property in parent's coordinate plane\ - * if parent is canvas then this method is identical to {@link fabric.Object#setX} - */ - setRelativeX: function (value) { - this.left = value; - }, + function arrayFromCoords(coords) { + return [ + new fabric.Point(coords.tl.x, coords.tl.y), + new fabric.Point(coords.tr.x, coords.tr.y), + new fabric.Point(coords.br.x, coords.br.y), + new fabric.Point(coords.bl.x, coords.bl.y) + ]; + } - /** - * @returns {number} y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane - */ - getY: function () { - return this.getXY().y; - }, + var util = fabric.util, + degreesToRadians = util.degreesToRadians, + multiplyMatrices = util.multiplyTransformMatrices, + transformPoint = util.transformPoint; - /** - * @param {number} value y position according to object's {@link fabric.Object#originY} property in canvas coordinate plane - */ - setY: function (value) { - this.setXY(this.getXY().setY(value)); - }, + util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * @returns {number} y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ - * if parent is canvas then this property is identical to {@link fabric.Object#getY} - */ - getRelativeY: function () { - return this.top; - }, + /** + * Describe object's corner position in canvas element coordinates. + * properties are depending on control keys and padding the main controls. + * each property is an object with x, y and corner. + * The `corner` property contains in a similar manner the 4 points of the + * interactive area of the corner. + * The coordinates depends from the controls positionHandler and are used + * to draw and locate controls + * @memberOf fabric.Object.prototype + */ + oCoords: null, - /** - * @param {number} value y position according to object's {@link fabric.Object#originY} property in parent's coordinate plane\ - * if parent is canvas then this property is identical to {@link fabric.Object#setY} - */ - setRelativeY: function (value) { - this.top = value; - }, + /** + * Describe object's corner position in canvas object absolute coordinates + * properties are tl,tr,bl,br and describe the four main corner. + * each property is an object with x, y, instance of Fabric.Point. + * The coordinates depends from this properties: width, height, scaleX, scaleY + * skewX, skewY, angle, strokeWidth, top, left. + * Those coordinates are useful to understand where an object is. They get updated + * with oCoords but they do not need to be updated when zoom or panning change. + * The coordinates get updated with @method setCoords. + * You can calculate them without updating with @method calcACoords(); + * @memberOf fabric.Object.prototype + */ + aCoords: null, - /** - * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in canvas coordinate plane - */ - getXY: function () { - var relativePosition = this.getRelativeXY(); - return this.group ? - fabric.util.transformPoint(relativePosition, this.group.calcTransformMatrix()) : - relativePosition; - }, + /** + * Describe object's corner position in canvas element coordinates. + * includes padding. Used of object detection. + * set and refreshed with setCoords. + * @memberOf fabric.Object.prototype + */ + lineCoords: null, - /** - * Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. - * You can specify {@link fabric.Object#originX} and {@link fabric.Object#originY} values, - * that otherwise are the object's current values. - * @example Set object's bottom left corner to point (5,5) on canvas - * object.setXY(new fabric.Point(5, 5), 'left', 'bottom'). - * @param {fabric.Point} point position in canvas coordinate plane - * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' - * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' - */ - setXY: function (point, originX, originY) { - if (this.group) { - point = fabric.util.transformPoint( - point, - fabric.util.invertTransform(this.group.calcTransformMatrix()) + /** + * storage for object transform matrix + */ + ownMatrixCache: null, + + /** + * storage for object full transform matrix + */ + matrixCache: null, + + /** + * custom controls interface + * controls are added by default_controls.js + */ + controls: { }, + + /** + * return correct set of coordinates for intersection + * this will return either aCoords or lineCoords. + * @param {Boolean} absolute will return aCoords if true or lineCoords + * @return {Object} {tl, tr, br, bl} points + */ + _getCoords: function(absolute, calculate) { + if (calculate) { + return (absolute ? this.calcACoords() : this.calcLineCoords()); + } + if (!this.aCoords || !this.lineCoords) { + this.setCoords(true); + } + return (absolute ? this.aCoords : this.lineCoords); + }, + + /** + * return correct set of coordinates for intersection + * this will return either aCoords or lineCoords. + * The coords are returned in an array. + * @return {Array} [tl, tr, br, bl] of points + */ + getCoords: function(absolute, calculate) { + return arrayFromCoords(this._getCoords(absolute, calculate)); + }, + + /** + * Checks if object intersects with an area formed by 2 points + * @param {Object} pointTL top-left point of area + * @param {Object} pointBR bottom-right point of area + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with an area formed by 2 points + */ + intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { + var coords = this.getCoords(absolute, calculate), + intersection = fabric.Intersection.intersectPolygonRectangle( + coords, + pointTL, + pointBR ); - } - this.setRelativeXY(point, originX, originY); - }, + return intersection.status === 'Intersection'; + }, - /** - * @returns {number} x position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane - */ - getRelativeXY: function () { - return new fabric.Point(this.left, this.top); - }, + /** + * Checks if object intersects with another object + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with another object + */ + intersectsWithObject: function(other, absolute, calculate) { + var intersection = fabric.Intersection.intersectPolygonPolygon( + this.getCoords(absolute, calculate), + other.getCoords(absolute, calculate) + ); - /** - * As {@link fabric.Object#setXY}, but in current parent's coordinate plane ( the current group if any or the canvas) - * @param {fabric.Point} point position according to object's {@link fabric.Object#originX} {@link fabric.Object#originY} properties in parent's coordinate plane - * @param {'left'|'center'|'right'|number} [originX] Horizontal origin: 'left', 'center' or 'right' - * @param {'top'|'center'|'bottom'|number} [originY] Vertical origin: 'top', 'center' or 'bottom' - */ - setRelativeXY: function (point, originX, originY) { - this.setPositionByOrigin(point, originX || this.originX, originY || this.originY); - }, + return intersection.status === 'Intersection' + || other.isContainedWithinObject(this, absolute, calculate) + || this.isContainedWithinObject(other, absolute, calculate); + }, - /** - * return correct set of coordinates for intersection - * this will return either aCoords or lineCoords. - * @param {Boolean} absolute will return aCoords if true or lineCoords - * @return {Object} {tl, tr, br, bl} points - */ - _getCoords: function(absolute, calculate) { - if (calculate) { - return (absolute ? this.calcACoords() : this.calcLineCoords()); - } - if (!this.aCoords || !this.lineCoords) { - this.setCoords(true); + /** + * Checks if object is fully contained within area of another object + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is fully contained within area of another object + */ + isContainedWithinObject: function(other, absolute, calculate) { + var points = this.getCoords(absolute, calculate), + otherCoords = absolute ? other.aCoords : other.lineCoords, + i = 0, lines = other._getImageLines(otherCoords); + for (; i < 4; i++) { + if (!other.containsPoint(points[i], lines)) { + return false; } - return (absolute ? this.aCoords : this.lineCoords); - }, + } + return true; + }, - /** - * return correct set of coordinates for intersection - * this will return either aCoords or lineCoords. - * The coords are returned in an array. - * @return {Array} [tl, tr, br, bl] of points - */ - getCoords: function (absolute, calculate) { - var coords = arrayFromCoords(this._getCoords(absolute, calculate)); - if (this.group) { - var t = this.group.calcTransformMatrix(); - return coords.map(function (p) { - return util.transformPoint(p, t); - }); - } - return coords; - }, + /** + * Checks if object is fully contained within area formed by 2 points + * @param {Object} pointTL top-left point of area + * @param {Object} pointBR bottom-right point of area + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is fully contained within area formed by 2 points + */ + isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { + var boundingRect = this.getBoundingRect(absolute, calculate); - /** - * Checks if object intersects with an area formed by 2 points - * @param {Object} pointTL top-left point of area - * @param {Object} pointBR bottom-right point of area - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object intersects with an area formed by 2 points - */ - intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { - var coords = this.getCoords(absolute, calculate), - intersection = fabric.Intersection.intersectPolygonRectangle( - coords, - pointTL, - pointBR - ); - return intersection.status === 'Intersection'; - }, + return ( + boundingRect.left >= pointTL.x && + boundingRect.left + boundingRect.width <= pointBR.x && + boundingRect.top >= pointTL.y && + boundingRect.top + boundingRect.height <= pointBR.y + ); + }, - /** - * Checks if object intersects with another object - * @param {Object} other Object to test - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object intersects with another object - */ - intersectsWithObject: function(other, absolute, calculate) { - var intersection = fabric.Intersection.intersectPolygonPolygon( - this.getCoords(absolute, calculate), - other.getCoords(absolute, calculate) - ); + /** + * Checks if point is inside the object + * @param {fabric.Point} point Point to check against + * @param {Object} [lines] object returned from @method _getImageLines + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if point is inside the object + */ + containsPoint: function(point, lines, absolute, calculate) { + var coords = this._getCoords(absolute, calculate), + lines = lines || this._getImageLines(coords), + xPoints = this._findCrossPoints(point, lines); + // if xPoints is odd then point is inside the object + return (xPoints !== 0 && xPoints % 2 === 1); + }, - return intersection.status === 'Intersection' - || other.isContainedWithinObject(this, absolute, calculate) - || this.isContainedWithinObject(other, absolute, calculate); - }, + /** + * Checks if object is contained within the canvas with current viewportTransform + * the check is done stopping at first point that appears on screen + * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords + * @return {Boolean} true if object is fully or partially contained within canvas + */ + isOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + var points = this.getCoords(true, calculate); + // if some point is on screen, the object is on screen. + if (points.some(function(point) { + return point.x <= pointBR.x && point.x >= pointTL.x && + point.y <= pointBR.y && point.y >= pointTL.y; + })) { + return true; + } + // no points on screen, check intersection with absolute coordinates + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + return this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - /** - * Checks if object is fully contained within area of another object - * @param {Object} other Object to test - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object is fully contained within area of another object - */ - isContainedWithinObject: function(other, absolute, calculate) { - var points = this.getCoords(absolute, calculate), - otherCoords = absolute ? other.aCoords : other.lineCoords, - i = 0, lines = other._getImageLines(otherCoords); - for (; i < 4; i++) { - if (!other.containsPoint(points[i], lines)) { - return false; - } - } + /** + * Checks if the object contains the midpoint between canvas extremities + * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen + * @private + * @param {Fabric.Point} pointTL Top Left point + * @param {Fabric.Point} pointBR Top Right point + * @param {Boolean} calculate use coordinates of current position instead of .oCoords + * @return {Boolean} true if the object contains the point + */ + _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { + // worst case scenario the object is so big that contains the screen + var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; + if (this.containsPoint(centerPoint, null, true, calculate)) { return true; - }, + } + return false; + }, - /** - * Checks if object is fully contained within area formed by 2 points - * @param {Object} pointTL top-left point of area - * @param {Object} pointBR bottom-right point of area - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object is fully contained within area formed by 2 points - */ - isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { - var boundingRect = this.getBoundingRect(absolute, calculate); - - return ( - boundingRect.left >= pointTL.x && - boundingRect.left + boundingRect.width <= pointBR.x && - boundingRect.top >= pointTL.y && - boundingRect.top + boundingRect.height <= pointBR.y - ); - }, + /** + * Checks if object is partially contained within the canvas with current viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is partially contained within canvas + */ + isPartiallyOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { + return (point.x >= pointBR.x || point.x <= pointTL.x) && + (point.y >= pointBR.y || point.y <= pointTL.y); + }); + return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, - /** - * Checks if point is inside the object - * @param {fabric.Point} point Point to check against - * @param {Object} [lines] object returned from @method _getImageLines - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if point is inside the object - */ - containsPoint: function(point, lines, absolute, calculate) { - var coords = this._getCoords(absolute, calculate), - lines = lines || this._getImageLines(coords), - xPoints = this._findCrossPoints(point, lines); - // if xPoints is odd then point is inside the object - return (xPoints !== 0 && xPoints % 2 === 1); - }, + /** + * Method that returns an object with the object edges in it, given the coordinates of the corners + * @private + * @param {Object} oCoords Coordinates of the object corners + */ + _getImageLines: function(oCoords) { - /** - * Checks if object is contained within the canvas with current viewportTransform - * the check is done stopping at first point that appears on screen - * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords - * @return {Boolean} true if object is fully or partially contained within canvas - */ - isOnScreen: function(calculate) { - if (!this.canvas) { - return false; + var lines = { + topline: { + o: oCoords.tl, + d: oCoords.tr + }, + rightline: { + o: oCoords.tr, + d: oCoords.br + }, + bottomline: { + o: oCoords.br, + d: oCoords.bl + }, + leftline: { + o: oCoords.bl, + d: oCoords.tl } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - var points = this.getCoords(true, calculate); - // if some point is on screen, the object is on screen. - if (points.some(function(point) { - return point.x <= pointBR.x && point.x >= pointTL.x && - point.y <= pointBR.y && point.y >= pointTL.y; - })) { - return true; + }; + + // // debugging + // if (this.canvas.contextTop) { + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + // } + + return lines; + }, + + /** + * Helper method to determine how many cross points are between the 4 object edges + * and the horizontal line determined by a point on canvas + * @private + * @param {fabric.Point} point Point to check + * @param {Object} lines Coordinates of the object being evaluated + */ + // remove yi, not used but left code here just in case. + _findCrossPoints: function(point, lines) { + var b1, b2, a1, a2, xi, // yi, + xcount = 0, + iLine; + + for (var lineKey in lines) { + iLine = lines[lineKey]; + // optimisation 1: line below point. no cross + if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { + continue; } - // no points on screen, check intersection with absolute coordinates - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { - return true; + // optimisation 2: line above point. no cross + if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { + continue; } - return this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, - - /** - * Checks if the object contains the midpoint between canvas extremities - * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen - * @private - * @param {Fabric.Point} pointTL Top Left point - * @param {Fabric.Point} pointBR Top Right point - * @param {Boolean} calculate use coordinates of current position instead of .oCoords - * @return {Boolean} true if the object contains the point - */ - _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { - // worst case scenario the object is so big that contains the screen - var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; - if (this.containsPoint(centerPoint, null, true, calculate)) { - return true; + // optimisation 3: vertical line case + if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { + xi = iLine.o.x; + // yi = point.y; } - return false; - }, + // calculate the intersection point + else { + b1 = 0; + b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); + a1 = point.y - b1 * point.x; + a2 = iLine.o.y - b2 * iLine.o.x; - /** - * Checks if object is partially contained within the canvas with current viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords - * @return {Boolean} true if object is partially contained within canvas - */ - isPartiallyOnScreen: function(calculate) { - if (!this.canvas) { - return false; + xi = -(a1 - a2) / (b1 - b2); + // yi = a1 + b1 * xi; } - var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; - if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { - return true; + // dont count xi < point.x cases + if (xi >= point.x) { + xcount += 1; } - var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { - return (point.x >= pointBR.x || point.x <= pointTL.x) && - (point.y >= pointBR.y || point.y <= pointTL.y); - }); - return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); - }, + // optimisation 4: specific for square images + if (xcount === 2) { + break; + } + } + return xcount; + }, - /** - * Method that returns an object with the object edges in it, given the coordinates of the corners - * @private - * @param {Object} oCoords Coordinates of the object corners - */ - _getImageLines: function(oCoords) { + /** + * Returns coordinates of object's bounding rectangle (left, top, width, height) + * the box is intended as aligned to axis of canvas. + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords + * @return {Object} Object with left, top, width, height properties + */ + getBoundingRect: function(absolute, calculate) { + var coords = this.getCoords(absolute, calculate); + return util.makeBoundingBoxFromPoints(coords); + }, - var lines = { - topline: { - o: oCoords.tl, - d: oCoords.tr - }, - rightline: { - o: oCoords.tr, - d: oCoords.br - }, - bottomline: { - o: oCoords.br, - d: oCoords.bl - }, - leftline: { - o: oCoords.bl, - d: oCoords.tl - } - }; + /** + * Returns width of an object's bounding box counting transformations + * before 2.0 it was named getWidth(); + * @return {Number} width value + */ + getScaledWidth: function() { + return this._getTransformedDimensions().x; + }, - // // debugging - // if (this.canvas.contextTop) { - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); - // } + /** + * Returns height of an object bounding box counting transformations + * before 2.0 it was named getHeight(); + * @return {Number} height value + */ + getScaledHeight: function() { + return this._getTransformedDimensions().y; + }, - return lines; - }, + /** + * Makes sure the scale is valid and modifies it if necessary + * @private + * @param {Number} value + * @return {Number} + */ + _constrainScale: function(value) { + if (Math.abs(value) < this.minScaleLimit) { + if (value < 0) { + return -this.minScaleLimit; + } + else { + return this.minScaleLimit; + } + } + else if (value === 0) { + return 0.0001; + } + return value; + }, - /** - * Helper method to determine how many cross points are between the 4 object edges - * and the horizontal line determined by a point on canvas - * @private - * @param {fabric.Point} point Point to check - * @param {Object} lines Coordinates of the object being evaluated - */ - // remove yi, not used but left code here just in case. - _findCrossPoints: function(point, lines) { - var b1, b2, a1, a2, xi, // yi, - xcount = 0, - iLine; - - for (var lineKey in lines) { - iLine = lines[lineKey]; - // optimisation 1: line below point. no cross - if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { - continue; - } - // optimisation 2: line above point. no cross - if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { - continue; - } - // optimisation 3: vertical line case - if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { - xi = iLine.o.x; - // yi = point.y; - } - // calculate the intersection point - else { - b1 = 0; - b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); - a1 = point.y - b1 * point.x; - a2 = iLine.o.y - b2 * iLine.o.x; + /** + * Scales an object (equally by x and y) + * @param {Number} value Scale factor + * @return {fabric.Object} thisArg + * @chainable + */ + scale: function(value) { + this._set('scaleX', value); + this._set('scaleY', value); + return this.setCoords(); + }, - xi = -(a1 - a2) / (b1 - b2); - // yi = a1 + b1 * xi; - } - // dont count xi < point.x cases - if (xi >= point.x) { - xcount += 1; - } - // optimisation 4: specific for square images - if (xcount === 2) { - break; - } - } - return xcount; - }, - - /** - * Returns coordinates of object's bounding rectangle (left, top, width, height) - * the box is intended as aligned to axis of canvas. - * @param {Boolean} [absolute] use coordinates without viewportTransform - * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords - * @return {Object} Object with left, top, width, height properties - */ - getBoundingRect: function(absolute, calculate) { - var coords = this.getCoords(absolute, calculate); - return util.makeBoundingBoxFromPoints(coords); - }, - - /** - * Returns width of an object's bounding box counting transformations - * before 2.0 it was named getWidth(); - * @return {Number} width value - */ - getScaledWidth: function() { - return this._getTransformedDimensions().x; - }, - - /** - * Returns height of an object bounding box counting transformations - * before 2.0 it was named getHeight(); - * @return {Number} height value - */ - getScaledHeight: function() { - return this._getTransformedDimensions().y; - }, - - /** - * Makes sure the scale is valid and modifies it if necessary - * @private - * @param {Number} value - * @return {Number} - */ - _constrainScale: function(value) { - if (Math.abs(value) < this.minScaleLimit) { - if (value < 0) { - return -this.minScaleLimit; - } - else { - return this.minScaleLimit; - } - } - else if (value === 0) { - return 0.0001; - } - return value; - }, - - /** - * Scales an object (equally by x and y) - * @param {Number} value Scale factor - * @return {fabric.Object} thisArg - * @chainable - */ - scale: function(value) { - this._set('scaleX', value); - this._set('scaleY', value); - return this.setCoords(); - }, - - /** - * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) - * @param {Number} value New width value - * @param {Boolean} absolute ignore viewport - * @return {fabric.Object} thisArg - * @chainable - */ - scaleToWidth: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); - return this.scale(value / this.width / boundingRectFactor); - }, + /** + * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) + * @param {Number} value New width value + * @param {Boolean} absolute ignore viewport + * @return {fabric.Object} thisArg + * @chainable + */ + scaleToWidth: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); + return this.scale(value / this.width / boundingRectFactor); + }, - /** - * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) - * @param {Number} value New height value - * @param {Boolean} absolute ignore viewport - * @return {fabric.Object} thisArg - * @chainable - */ - scaleToHeight: function(value, absolute) { - // adjust to bounding rect factor so that rotated shapes would fit as well - var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); - return this.scale(value / this.height / boundingRectFactor); - }, + /** + * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) + * @param {Number} value New height value + * @param {Boolean} absolute ignore viewport + * @return {fabric.Object} thisArg + * @chainable + */ + scaleToHeight: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); + return this.scale(value / this.height / boundingRectFactor); + }, - calcLineCoords: function() { - var vpt = this.getViewportTransform(), - padding = this.padding, angle = degreesToRadians(this.getTotalAngle()), - cos = util.cos(angle), sin = util.sin(angle), - cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, - cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); - - var lineCoords = { - tl: transformPoint(aCoords.tl, vpt), - tr: transformPoint(aCoords.tr, vpt), - bl: transformPoint(aCoords.bl, vpt), - br: transformPoint(aCoords.br, vpt), - }; + calcLineCoords: function() { + var vpt = this.getViewportTransform(), + padding = this.padding, angle = degreesToRadians(this.angle), + cos = util.cos(angle), sin = util.sin(angle), + cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, + cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); - if (padding) { - lineCoords.tl.x -= cosPMinusSinP; - lineCoords.tl.y -= cosPSinP; - lineCoords.tr.x += cosPSinP; - lineCoords.tr.y -= cosPMinusSinP; - lineCoords.bl.x -= cosPSinP; - lineCoords.bl.y += cosPMinusSinP; - lineCoords.br.x += cosPMinusSinP; - lineCoords.br.y += cosPSinP; - } + var lineCoords = { + tl: transformPoint(aCoords.tl, vpt), + tr: transformPoint(aCoords.tr, vpt), + bl: transformPoint(aCoords.bl, vpt), + br: transformPoint(aCoords.br, vpt), + }; - return lineCoords; - }, + if (padding) { + lineCoords.tl.x -= cosPMinusSinP; + lineCoords.tl.y -= cosPSinP; + lineCoords.tr.x += cosPSinP; + lineCoords.tr.y -= cosPMinusSinP; + lineCoords.bl.x -= cosPSinP; + lineCoords.bl.y += cosPMinusSinP; + lineCoords.br.x += cosPMinusSinP; + lineCoords.br.y += cosPSinP; + } + + return lineCoords; + }, + + calcOCoords: function() { + var rotateMatrix = this._calcRotateMatrix(), + translateMatrix = this._calcTranslateMatrix(), + vpt = this.getViewportTransform(), + startMatrix = multiplyMatrices(vpt, translateMatrix), + finalMatrix = multiplyMatrices(startMatrix, rotateMatrix), + finalMatrix = multiplyMatrices(finalMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), + dim = this._calculateCurrentDimensions(), + coords = {}; + this.forEachControl(function(control, key, fabricObject) { + coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); + }); - calcOCoords: function () { - var vpt = this.getViewportTransform(), - center = this.getCenterPoint(), - tMatrix = [1, 0, 0, 1, center.x, center.y], - rMatrix = util.calcRotateMatrix({ angle: this.getTotalAngle() - (!!this.group && this.flipX ? 180 : 0) }), - positionMatrix = multiplyMatrices(tMatrix, rMatrix), - startMatrix = multiplyMatrices(vpt, positionMatrix), - finalMatrix = multiplyMatrices(startMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), - transformOptions = this.group ? fabric.util.qrDecompose(this.calcTransformMatrix()) : undefined, - dim = this._calculateCurrentDimensions(transformOptions), - coords = {}; - this.forEachControl(function(control, key, fabricObject) { - coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); - }); + // debug code + // var canvas = this.canvas; + // setTimeout(function() { + // canvas.contextTop.clearRect(0, 0, 700, 700); + // canvas.contextTop.fillStyle = 'green'; + // Object.keys(coords).forEach(function(key) { + // var control = coords[key]; + // canvas.contextTop.fillRect(control.x, control.y, 3, 3); + // }); + // }, 50); + return coords; + }, + + calcACoords: function() { + var rotateMatrix = this._calcRotateMatrix(), + translateMatrix = this._calcTranslateMatrix(), + finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), + dim = this._getTransformedDimensions(), + w = dim.x / 2, h = dim.y / 2; + return { + // corners + tl: transformPoint({ x: -w, y: -h }, finalMatrix), + tr: transformPoint({ x: w, y: -h }, finalMatrix), + bl: transformPoint({ x: -w, y: h }, finalMatrix), + br: transformPoint({ x: w, y: h }, finalMatrix) + }; + }, - // debug code - /* - var canvas = this.canvas; - setTimeout(function () { - if (!canvas) return; - canvas.contextTop.clearRect(0, 0, 700, 700); - canvas.contextTop.fillStyle = 'green'; - Object.keys(coords).forEach(function(key) { - var control = coords[key]; - canvas.contextTop.fillRect(control.x, control.y, 3, 3); - }); - }, 50); - */ - return coords; - }, + /** + * Sets corner and controls position coordinates based on current angle, width and height, left and top. + * oCoords are used to find the corners + * aCoords are used to quickly find an object on the canvas + * lineCoords are used to quickly find object during pointer events. + * See {@link https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords} and {@link http://fabricjs.com/fabric-gotchas} + * + * @param {Boolean} [skipCorners] skip calculation of oCoords. + * @return {fabric.Object} thisArg + * @chainable + */ + setCoords: function(skipCorners) { + this.aCoords = this.calcACoords(); + // in case we are in a group, for how the inner group target check works, + // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. + this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); + if (skipCorners) { + return this; + } + // set coordinates of the draggable boxes in the corners used to scale/rotate the image + this.oCoords = this.calcOCoords(); + this._setCornerCoords && this._setCornerCoords(); + return this; + }, - calcACoords: function() { - var rotateMatrix = util.calcRotateMatrix({ angle: this.angle }), - center = this.getRelativeCenterPoint(), - translateMatrix = [1, 0, 0, 1, center.x, center.y], - finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), - dim = this._getTransformedDimensions(), - w = dim.x / 2, h = dim.y / 2; - return { - // corners - tl: transformPoint({ x: -w, y: -h }, finalMatrix), - tr: transformPoint({ x: w, y: -h }, finalMatrix), - bl: transformPoint({ x: -w, y: h }, finalMatrix), - br: transformPoint({ x: w, y: h }, finalMatrix) - }; - }, + /** + * calculate rotation matrix of an object + * @return {Array} rotation matrix for the object + */ + _calcRotateMatrix: function() { + return util.calcRotateMatrix(this); + }, - /** - * Sets corner and controls position coordinates based on current angle, width and height, left and top. - * oCoords are used to find the corners - * aCoords are used to quickly find an object on the canvas - * lineCoords are used to quickly find object during pointer events. - * See {@link https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords} and {@link http://fabricjs.com/fabric-gotchas} - * - * @param {Boolean} [skipCorners] skip calculation of oCoords. - * @return {fabric.Object} thisArg - * @chainable - */ - setCoords: function(skipCorners) { - this.aCoords = this.calcACoords(); - // in case we are in a group, for how the inner group target check works, - // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. - this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); - if (skipCorners) { - return this; - } - // set coordinates of the draggable boxes in the corners used to scale/rotate the image - this.oCoords = this.calcOCoords(); - this._setCornerCoords && this._setCornerCoords(); - return this; - }, + /** + * calculate the translation matrix for an object transform + * @return {Array} rotation matrix for the object + */ + _calcTranslateMatrix: function() { + var center = this.getCenterPoint(); + return [1, 0, 0, 1, center.x, center.y]; + }, - transformMatrixKey: function(skipGroup) { - var sep = '_', prefix = ''; - if (!skipGroup && this.group) { - prefix = this.group.transformMatrixKey(skipGroup) + sep; - } return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + - sep + this.skewX + sep + this.skewY + sep + this.angle + sep + this.originX + sep + this.originY + - sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY; - }, + transformMatrixKey: function(skipGroup) { + var sep = '_', prefix = ''; + if (!skipGroup && this.group) { + prefix = this.group.transformMatrixKey(skipGroup) + sep; + }; + return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + + sep + this.skewX + sep + this.skewY + sep + this.angle + sep + this.originX + sep + this.originY + + sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY; + }, - /** - * calculate transform matrix that represents the current transformations from the - * object's properties. - * @param {Boolean} [skipGroup] return transform matrix for object not counting parent transformations - * There are some situation in which this is useful to avoid the fake rotation. - * @return {Array} transform matrix for the object - */ - calcTransformMatrix: function(skipGroup) { - var matrix = this.calcOwnMatrix(); - if (skipGroup || !this.group) { - return matrix; - } - var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); - if (cache.key === key) { - return cache.value; - } - if (this.group) { - matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); - } - cache.key = key; - cache.value = matrix; + /** + * calculate transform matrix that represents the current transformations from the + * object's properties. + * @param {Boolean} [skipGroup] return transform matrix for object not counting parent transformations + * There are some situation in which this is useful to avoid the fake rotation. + * @return {Array} transform matrix for the object + */ + calcTransformMatrix: function(skipGroup) { + var matrix = this.calcOwnMatrix(); + if (skipGroup || !this.group) { return matrix; - }, + } + var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); + if (cache.key === key) { + return cache.value; + } + if (this.group) { + matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); + } + cache.key = key; + cache.value = matrix; + return matrix; + }, - /** - * calculate transform matrix that represents the current transformations from the - * object's properties, this matrix does not include the group transformation - * @return {Array} transform matrix for the object - */ - calcOwnMatrix: function() { - var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); - if (cache.key === key) { - return cache.value; - } - var center = this.getRelativeCenterPoint(), - options = { - angle: this.angle, - translateX: center.x, - translateY: center.y, - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: this.skewX, - skewY: this.skewY, - flipX: this.flipX, - flipY: this.flipY, - }; - cache.key = key; - cache.value = util.composeMatrix(options); + /** + * calculate transform matrix that represents the current transformations from the + * object's properties, this matrix does not include the group transformation + * @return {Array} transform matrix for the object + */ + calcOwnMatrix: function() { + var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); + if (cache.key === key) { return cache.value; - }, + } + var tMatrix = this._calcTranslateMatrix(), + options = { + angle: this.angle, + translateX: tMatrix[4], + translateY: tMatrix[5], + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + flipX: this.flipX, + flipY: this.flipY, + }; + cache.key = key; + cache.value = util.composeMatrix(options); + return cache.value; + }, - /** - * Calculate object dimensions from its properties - * @private - * @returns {fabric.Point} dimensions - */ - _getNonTransformedDimensions: function() { - return new fabric.Point(this.width, this.height).scalarAddEquals(this.strokeWidth); - }, + /* + * Calculate object dimensions from its properties + * @private + * @return {Object} .x width dimension + * @return {Object} .y height dimension + */ + _getNonTransformedDimensions: function() { + var strokeWidth = this.strokeWidth, + w = this.width + strokeWidth, + h = this.height + strokeWidth; + return { x: w, y: h }; + }, - /** - * Calculate object bounding box dimensions from its properties scale, skew. - * @param {Object} [options] - * @param {Number} [options.scaleX] - * @param {Number} [options.scaleY] - * @param {Number} [options.skewX] - * @param {Number} [options.skewY] - * @private - * @returns {fabric.Point} dimensions - */ - _getTransformedDimensions: function (options) { - options = Object.assign({ - scaleX: this.scaleX, - scaleY: this.scaleY, - skewX: this.skewX, - skewY: this.skewY, - width: this.width, - height: this.height, - strokeWidth: this.strokeWidth - }, options || {}); - // stroke is applied before/after transformations are applied according to `strokeUniform` - var preScalingStrokeValue, postScalingStrokeValue, strokeWidth = options.strokeWidth; - if (this.strokeUniform) { - preScalingStrokeValue = 0; - postScalingStrokeValue = strokeWidth; - } - else { - preScalingStrokeValue = strokeWidth; - postScalingStrokeValue = 0; - } - var dimX = options.width + preScalingStrokeValue, - dimY = options.height + preScalingStrokeValue, - finalDimensions, - noSkew = options.skewX === 0 && options.skewY === 0; - if (noSkew) { - finalDimensions = new fabric.Point(dimX * options.scaleX, dimY * options.scaleY); - } - else { - var bbox = util.sizeAfterTransform(dimX, dimY, options); - finalDimensions = new fabric.Point(bbox.x, bbox.y); - } + /* + * Calculate object bounding box dimensions from its properties scale, skew. + * @param {Number} skewX, a value to override current skewX + * @param {Number} skewY, a value to override current skewY + * @private + * @return {Object} .x width dimension + * @return {Object} .y height dimension + */ + _getTransformedDimensions: function(skewX, skewY) { + if (typeof skewX === 'undefined') { + skewX = this.skewX; + } + if (typeof skewY === 'undefined') { + skewY = this.skewY; + } + var dimensions, dimX, dimY, + noSkew = skewX === 0 && skewY === 0; - return finalDimensions.scalarAddEquals(postScalingStrokeValue); - }, + if (this.strokeUniform) { + dimX = this.width; + dimY = this.height; + } + else { + dimensions = this._getNonTransformedDimensions(); + dimX = dimensions.x; + dimY = dimensions.y; + } + if (noSkew) { + return this._finalizeDimensions(dimX * this.scaleX, dimY * this.scaleY); + } + var bbox = util.sizeAfterTransform(dimX, dimY, { + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: skewX, + skewY: skewY, + }); + return this._finalizeDimensions(bbox.x, bbox.y); + }, - /** - * Calculate object dimensions for controls box, including padding and canvas zoom. - * and active selection - * @private - * @param {object} [options] transform options - * @returns {fabric.Point} dimensions - */ - _calculateCurrentDimensions: function(options) { - var vpt = this.getViewportTransform(), - dim = this._getTransformedDimensions(options), - p = transformPoint(dim, vpt, true); - return p.scalarAdd(2 * this.padding); - }, - }); - })(typeof exports !== 'undefined' ? exports : window); + /* + * Calculate object bounding box dimensions from its properties scale, skew. + * @param Number width width of the bbox + * @param Number height height of the bbox + * @private + * @return {Object} .x finalized width dimension + * @return {Object} .y finalized height dimension + */ + _finalizeDimensions: function(width, height) { + return this.strokeUniform ? + { x: width + this.strokeWidth, y: height + this.strokeWidth } + : + { x: width, y: height }; + }, - (function (global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /* + * Calculate object dimensions for controls box, including padding and canvas zoom. + * and active selection + * private + */ + _calculateCurrentDimensions: function() { + var vpt = this.getViewportTransform(), + dim = this._getTransformedDimensions(), + p = transformPoint(dim, vpt, true); + return p.scalarAdd(2 * this.padding); + }, + }); +})(); - /** - * Checks if object is decendant of target - * Should be used instead of @link {fabric.Collection.contains} for performance reasons - * @param {fabric.Object|fabric.StaticCanvas} target - * @returns {boolean} - */ - isDescendantOf: function (target) { - var parent = this.group || this.canvas; - while (parent) { - if (target === parent) { - return true; - } - else if (parent instanceof fabric.StaticCanvas) { - // happens after all parents were traversed through without a match - return false; - } - parent = parent.group || parent.canvas; - } - return false; - }, - /** - * - * @typedef {fabric.Object[] | [...fabric.Object[], fabric.StaticCanvas]} Ancestors - * - * @param {boolean} [strict] returns only ancestors that are objects (without canvas) - * @returns {Ancestors} ancestors from bottom to top - */ - getAncestors: function (strict) { - var ancestors = []; - var parent = this.group || (strict ? undefined : this.canvas); - while (parent) { - ancestors.push(parent); - parent = parent.group || (strict ? undefined : parent.canvas); - } - return ancestors; - }, +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Returns an object that represent the ancestry situation. - * - * @typedef {object} AncestryComparison - * @property {Ancestors} common ancestors of `this` and `other` (may include `this` | `other`) - * @property {Ancestors} fork ancestors that are of `this` only - * @property {Ancestors} otherFork ancestors that are of `other` only - * - * @param {fabric.Object} other - * @param {boolean} [strict] finds only ancestors that are objects (without canvas) - * @returns {AncestryComparison | undefined} - * - */ - findCommonAncestors: function (other, strict) { - if (this === other) { - return { - fork: [], - otherFork: [], - common: [this].concat(this.getAncestors(strict)) - }; - } - else if (!other) { - // meh, warn and inform, and not my issue. - // the argument is NOT optional, we can't end up here. - return undefined; - } - var ancestors = this.getAncestors(strict); - var otherAncestors = other.getAncestors(strict); - // if `this` has no ancestors and `this` is top ancestor of `other` we must handle the following case - if (ancestors.length === 0 && otherAncestors.length > 0 && this === otherAncestors[otherAncestors.length - 1]) { - return { - fork: [], - otherFork: [other].concat(otherAncestors.slice(0, otherAncestors.length - 1)), - common: [this] - }; - } - // compare ancestors - for (var i = 0, ancestor; i < ancestors.length; i++) { - ancestor = ancestors[i]; - if (ancestor === other) { - return { - fork: [this].concat(ancestors.slice(0, i)), - otherFork: [], - common: ancestors.slice(i) - }; - } - for (var j = 0; j < otherAncestors.length; j++) { - if (this === otherAncestors[j]) { - return { - fork: [], - otherFork: [other].concat(otherAncestors.slice(0, j)), - common: [this].concat(ancestors) - }; - } - if (ancestor === otherAncestors[j]) { - return { - fork: [this].concat(ancestors.slice(0, i)), - otherFork: [other].concat(otherAncestors.slice(0, j)), - common: ancestors.slice(i) - }; - } - } - } - // nothing shared - return { - fork: [this].concat(ancestors), - otherFork: [other].concat(otherAncestors), - common: [] - }; - }, + /** + * Moves an object to the bottom of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + sendToBack: function() { + if (this.group) { + fabric.StaticCanvas.prototype.sendToBack.call(this.group, this); + } + else if (this.canvas) { + this.canvas.sendToBack(this); + } + return this; + }, - /** - * - * @param {fabric.Object} other - * @param {boolean} [strict] checks only ancestors that are objects (without canvas) - * @returns {boolean} - */ - hasCommonAncestors: function (other, strict) { - var commonAncestors = this.findCommonAncestors(other, strict); - return commonAncestors && !!commonAncestors.ancestors.length; - } - }); - })(typeof exports !== 'undefined' ? exports : window); + /** + * Moves an object to the top of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + bringToFront: function() { + if (this.group) { + fabric.StaticCanvas.prototype.bringToFront.call(this.group, this); + } + else if (this.canvas) { + this.canvas.bringToFront(this); + } + return this; + }, - (function (global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Moves an object down in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + sendBackwards: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.sendBackwards(this, intersecting); + } + return this; + }, - /** - * Moves an object to the bottom of the stack of drawn objects - * @return {fabric.Object} thisArg - * @chainable - */ - sendToBack: function() { - if (this.group) { - fabric.StaticCanvas.prototype.sendToBack.call(this.group, this); - } - else if (this.canvas) { - this.canvas.sendToBack(this); - } - return this; - }, + /** + * Moves an object up in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + bringForward: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.bringForward(this, intersecting); + } + return this; + }, - /** - * Moves an object to the top of the stack of drawn objects - * @return {fabric.Object} thisArg - * @chainable - */ - bringToFront: function() { - if (this.group) { - fabric.StaticCanvas.prototype.bringToFront.call(this.group, this); - } - else if (this.canvas) { - this.canvas.bringToFront(this); - } - return this; - }, + /** + * Moves an object to specified level in stack of drawn objects + * @param {Number} index New position of object + * @return {fabric.Object} thisArg + * @chainable + */ + moveTo: function(index) { + if (this.group && this.group.type !== 'activeSelection') { + fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index); + } + else if (this.canvas) { + this.canvas.moveTo(this, index); + } + return this; + } +}); - /** - * Moves an object down in stack of drawn objects - * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object - * @return {fabric.Object} thisArg - * @chainable - */ - sendBackwards: function(intersecting) { - if (this.group) { - fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting); - } - else if (this.canvas) { - this.canvas.sendBackwards(this, intersecting); - } - return this; - }, - /** - * Moves an object up in stack of drawn objects - * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object - * @return {fabric.Object} thisArg - * @chainable - */ - bringForward: function(intersecting) { - if (this.group) { - fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting); - } - else if (this.canvas) { - this.canvas.bringForward(this, intersecting); - } - return this; - }, +/* _TO_SVG_START_ */ +(function() { + function getSvgColorString(prop, value) { + if (!value) { + return prop + ': none; '; + } + else if (value.toLive) { + return prop + ': url(#SVGID_' + value.id + '); '; + } + else { + var color = new fabric.Color(value), + str = prop + ': ' + color.toRgb() + '; ', + opacity = color.getAlpha(); + if (opacity !== 1) { + //change the color in rgb + opacity + str += prop + '-opacity: ' + opacity.toString() + '; '; + } + return str; + } + } - /** - * Moves an object to specified level in stack of drawn objects - * @param {Number} index New position of object - * @return {fabric.Object} thisArg - * @chainable - */ - moveTo: function(index) { - if (this.group && this.group.type !== 'activeSelection') { - fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index); - } - else if (this.canvas) { - this.canvas.moveTo(this, index); - } - return this; - }, + var toFixed = fabric.util.toFixed; - /** - * - * @param {fabric.Object} other object to compare against - * @returns {boolean | undefined} if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns `undefined` - */ - isInFrontOf: function (other) { - if (this === other) { - return undefined; - } - var ancestorData = this.findCommonAncestors(other); - if (!ancestorData) { - return undefined; - } - if (ancestorData.fork.includes(other)) { - return true; - } - if (ancestorData.otherFork.includes(this)) { - return false; - } - var firstCommonAncestor = ancestorData.common[0]; - if (!firstCommonAncestor) { - return undefined; - } - var headOfFork = ancestorData.fork.pop(), - headOfOtherFork = ancestorData.otherFork.pop(), - thisIndex = firstCommonAncestor._objects.indexOf(headOfFork), - otherIndex = firstCommonAncestor._objects.indexOf(headOfOtherFork); - return thisIndex > -1 && thisIndex > otherIndex; - } - }); - })(typeof exports !== 'undefined' ? exports : window); + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} + */ + getSvgStyles: function(skipShadow) { - /* _TO_SVG_START_ */ - (function(global) { - var fabric = global.fabric; - function getSvgColorString(prop, value) { - if (!value) { - return prop + ': none; '; - } - else if (value.toLive) { - return prop + ': url(#SVGID_' + value.id + '); '; - } - else { - var color = new fabric.Color(value), - str = prop + ': ' + color.toRgb() + '; ', - opacity = color.getAlpha(); - if (opacity !== 1) { - //change the color in rgb + opacity - str += prop + '-opacity: ' + opacity.toString() + '; '; - } - return str; + var fillRule = this.fillRule ? this.fillRule : 'nonzero', + strokeWidth = this.strokeWidth ? this.strokeWidth : '0', + strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', + strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', + strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', + strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', + strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', + opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', + visibility = this.visible ? '' : ' visibility: hidden;', + filter = skipShadow ? '' : this.getSvgFilter(), + fill = getSvgColorString('fill', this.fill), + stroke = getSvgColorString('stroke', this.stroke); + + return [ + stroke, + 'stroke-width: ', strokeWidth, '; ', + 'stroke-dasharray: ', strokeDashArray, '; ', + 'stroke-linecap: ', strokeLineCap, '; ', + 'stroke-dashoffset: ', strokeDashOffset, '; ', + 'stroke-linejoin: ', strokeLineJoin, '; ', + 'stroke-miterlimit: ', strokeMiterLimit, '; ', + fill, + 'fill-rule: ', fillRule, '; ', + 'opacity: ', opacity, ';', + filter, + visibility + ].join(''); + }, + + /** + * Returns styles-string for svg-export + * @param {Object} style the object from which to retrieve style properties + * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. + * @return {String} + */ + getSvgSpanStyles: function(style, useWhiteSpace) { + var term = '; '; + var fontFamily = style.fontFamily ? + 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? + '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; + var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', + fontFamily = fontFamily, + fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', + fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', + fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', + fill = style.fill ? getSvgColorString('fill', style.fill) : '', + stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', + textDecoration = this.getSvgTextDecoration(style), + deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; + if (textDecoration) { + textDecoration = 'text-decoration: ' + textDecoration + term; } - } - var toFixed = fabric = global.fabric, toFixed = fabric.util.toFixed; + return [ + stroke, + strokeWidth, + fontFamily, + fontSize, + fontStyle, + fontWeight, + textDecoration, + fill, + deltaY, + useWhiteSpace ? 'white-space: pre; ' : '' + ].join(''); + }, - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Returns styles-string for svg-export - * @param {Boolean} skipShadow a boolean to skip shadow filter output - * @return {String} - */ - getSvgStyles: function(skipShadow) { - - var fillRule = this.fillRule ? this.fillRule : 'nonzero', - strokeWidth = this.strokeWidth ? this.strokeWidth : '0', - strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', - strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', - strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', - strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', - strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', - opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', - visibility = this.visible ? '' : ' visibility: hidden;', - filter = skipShadow ? '' : this.getSvgFilter(), - fill = getSvgColorString('fill', this.fill), - stroke = getSvgColorString('stroke', this.stroke); - - return [ - stroke, - 'stroke-width: ', strokeWidth, '; ', - 'stroke-dasharray: ', strokeDashArray, '; ', - 'stroke-linecap: ', strokeLineCap, '; ', - 'stroke-dashoffset: ', strokeDashOffset, '; ', - 'stroke-linejoin: ', strokeLineJoin, '; ', - 'stroke-miterlimit: ', strokeMiterLimit, '; ', - fill, - 'fill-rule: ', fillRule, '; ', - 'opacity: ', opacity, ';', - filter, - visibility - ].join(''); - }, + /** + * Returns text-decoration property for svg-export + * @param {Object} style the object from which to retrieve style properties + * @return {String} + */ + getSvgTextDecoration: function(style) { + return ['overline', 'underline', 'line-through'].filter(function(decoration) { + return style[decoration.replace('-', '')]; + }).join(' '); + }, - /** - * Returns styles-string for svg-export - * @param {Object} style the object from which to retrieve style properties - * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. - * @return {String} - */ - getSvgSpanStyles: function(style, useWhiteSpace) { - var term = '; '; - var fontFamily = style.fontFamily ? - 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? - '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; - var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', - fontFamily = fontFamily, - fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', - fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', - fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', - fill = style.fill ? getSvgColorString('fill', style.fill) : '', - stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', - textDecoration = this.getSvgTextDecoration(style), - deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; - if (textDecoration) { - textDecoration = 'text-decoration: ' + textDecoration + term; - } - - return [ - stroke, - strokeWidth, - fontFamily, - fontSize, - fontStyle, - fontWeight, - textDecoration, - fill, - deltaY, - useWhiteSpace ? 'white-space: pre; ' : '' - ].join(''); - }, + /** + * Returns filter for svg shadow + * @return {String} + */ + getSvgFilter: function() { + return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; + }, - /** - * Returns text-decoration property for svg-export - * @param {Object} style the object from which to retrieve style properties - * @return {String} - */ - getSvgTextDecoration: function(style) { - return ['overline', 'underline', 'line-through'].filter(function(decoration) { - return style[decoration.replace('-', '')]; - }).join(' '); - }, - - /** - * Returns filter for svg shadow - * @return {String} - */ - getSvgFilter: function() { - return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; - }, - - /** - * Returns id attribute for svg output - * @return {String} - */ - getSvgCommons: function() { - return [ - this.id ? 'id="' + this.id + '" ' : '', - this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', - ].join(''); - }, + /** + * Returns id attribute for svg output + * @return {String} + */ + getSvgCommons: function() { + return [ + this.id ? 'id="' + this.id + '" ' : '', + this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', + ].join(''); + }, - /** - * Returns transform-string for svg-export - * @param {Boolean} use the full transform or the single object one. - * @return {String} - */ - getSvgTransform: function(full, additionalTransform) { - var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), - svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); - return svgTransform + - (additionalTransform || '') + '" '; - }, + /** + * Returns transform-string for svg-export + * @param {Boolean} use the full transform or the single object one. + * @return {String} + */ + getSvgTransform: function(full, additionalTransform) { + var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), + svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); + return svgTransform + + (additionalTransform || '') + '" '; + }, - _setSVGBg: function(textBgRects) { - if (this.backgroundColor) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - } - }, + _setSVGBg: function(textBgRects) { + if (this.backgroundColor) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + } + }, - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - /** - * Returns svg clipPath representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toClipPathSVG: function(reviver) { - return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); - }, + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function(reviver) { + return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, - /** - * @private - */ - _createBaseClipPathSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var reviver = options.reviver, - additionalTransform = options.additionalTransform || '', - commonPieces = [ - this.getSvgTransform(true, additionalTransform), - this.getSvgCommons(), - ].join(''), - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'); - objectMarkup[index] = commonPieces; - return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); - }, + /** + * @private + */ + _createBaseClipPathSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var reviver = options.reviver, + additionalTransform = options.additionalTransform || '', + commonPieces = [ + this.getSvgTransform(true, additionalTransform), + this.getSvgCommons(), + ].join(''), + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'); + objectMarkup[index] = commonPieces; + return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); + }, - /** - * @private - */ - _createBaseSVGMarkup: function(objectMarkup, options) { - options = options || {}; - var noStyle = options.noStyle, - reviver = options.reviver, - styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', - shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', - clipPath = this.clipPath, - vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', - absoluteClipPath = clipPath && clipPath.absolutePositioned, - stroke = this.stroke, fill = this.fill, shadow = this.shadow, - commonPieces, markup = [], clipPathMarkup, - // insert commons in the markup, style and svgCommons - index = objectMarkup.indexOf('COMMON_PARTS'), - additionalTransform = options.additionalTransform; - if (clipPath) { - clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; - clipPathMarkup = '\n' + - clipPath.toClipPathSVG(reviver) + - '\n'; - } - if (absoluteClipPath) { - markup.push( - '\n' - ); - } + /** + * @private + */ + _createBaseSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var noStyle = options.noStyle, + reviver = options.reviver, + styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', + shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', + clipPath = this.clipPath, + vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', + absoluteClipPath = clipPath && clipPath.absolutePositioned, + stroke = this.stroke, fill = this.fill, shadow = this.shadow, + commonPieces, markup = [], clipPathMarkup, + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'), + additionalTransform = options.additionalTransform; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + clipPathMarkup = '\n' + + clipPath.toClipPathSVG(reviver) + + '\n'; + } + if (absoluteClipPath) { markup.push( - '\n' + '\n' ); - commonPieces = [ - styleInfo, - vectorEffect, - noStyle ? '' : this.addPaintOrder(), ' ', - additionalTransform ? 'transform="' + additionalTransform + '" ' : '', - ].join(''); - objectMarkup[index] = commonPieces; - if (fill && fill.toLive) { - markup.push(fill.toSVG(this)); - } - if (stroke && stroke.toLive) { - markup.push(stroke.toSVG(this)); - } - if (shadow) { - markup.push(shadow.toSVG(this)); - } - if (clipPath) { - markup.push(clipPathMarkup); - } - markup.push(objectMarkup.join('')); - markup.push('\n'); - absoluteClipPath && markup.push('\n'); - return reviver ? reviver(markup.join('')) : markup.join(''); - }, - - addPaintOrder: function() { - return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; } - }); - })(typeof exports !== 'undefined' ? exports : window); - /* _TO_SVG_END_ */ + markup.push( + '\n' + ); + commonPieces = [ + styleInfo, + vectorEffect, + noStyle ? '' : this.addPaintOrder(), ' ', + additionalTransform ? 'transform="' + additionalTransform + '" ' : '', + ].join(''); + objectMarkup[index] = commonPieces; + if (fill && fill.toLive) { + markup.push(fill.toSVG(this)); + } + if (stroke && stroke.toLive) { + markup.push(stroke.toSVG(this)); + } + if (shadow) { + markup.push(shadow.toSVG(this)); + } + if (clipPath) { + markup.push(clipPathMarkup); + } + markup.push(objectMarkup.join('')); + markup.push('\n'); + absoluteClipPath && markup.push('\n'); + return reviver ? reviver(markup.join('')) : markup.join(''); + }, + + addPaintOrder: function() { + return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; + } + }); +})(); +/* _TO_SVG_END_ */ - (function(global) { - var fabric = global.fabric, extend = fabric.util.object.extend, - originalSet = 'stateProperties'; - /* - Depends on `stateProperties` - */ - function saveProps(origin, destination, props) { - var tmpObj = { }, deep = true; - props.forEach(function(prop) { - tmpObj[prop] = origin[prop]; - }); +(function() { - extend(origin[destination], tmpObj, deep); - } + var extend = fabric.util.object.extend, + originalSet = 'stateProperties'; - function _isEqual(origValue, currentValue, firstPass) { - if (origValue === currentValue) { - // if the objects are identical, return - return true; + /* + Depends on `stateProperties` + */ + function saveProps(origin, destination, props) { + var tmpObj = { }, deep = true; + props.forEach(function(prop) { + tmpObj[prop] = origin[prop]; + }); + + extend(origin[destination], tmpObj, deep); + } + + function _isEqual(origValue, currentValue, firstPass) { + if (origValue === currentValue) { + // if the objects are identical, return + return true; + } + else if (Array.isArray(origValue)) { + if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { + return false; } - else if (Array.isArray(origValue)) { - if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { + for (var i = 0, len = origValue.length; i < len; i++) { + if (!_isEqual(origValue[i], currentValue[i])) { return false; } - for (var i = 0, len = origValue.length; i < len; i++) { - if (!_isEqual(origValue[i], currentValue[i])) { - return false; - } - } - return true; } - else if (origValue && typeof origValue === 'object') { - var keys = Object.keys(origValue), key; - if (!currentValue || - typeof currentValue !== 'object' || - (!firstPass && keys.length !== Object.keys(currentValue).length) - ) { - return false; + return true; + } + else if (origValue && typeof origValue === 'object') { + var keys = Object.keys(origValue), key; + if (!currentValue || + typeof currentValue !== 'object' || + (!firstPass && keys.length !== Object.keys(currentValue).length) + ) { + return false; + } + for (var i = 0, len = keys.length; i < len; i++) { + key = keys[i]; + // since clipPath is in the statefull cache list and the clipPath objects + // would be iterated as an object, this would lead to possible infinite recursion + // we do not want to compare those. + if (key === 'canvas' || key === 'group') { + continue; } - for (var i = 0, len = keys.length; i < len; i++) { - key = keys[i]; - // since clipPath is in the statefull cache list and the clipPath objects - // would be iterated as an object, this would lead to possible infinite recursion - // we do not want to compare those. - if (key === 'canvas' || key === 'group') { - continue; - } - if (!_isEqual(origValue[key], currentValue[key])) { - return false; - } + if (!_isEqual(origValue[key], currentValue[key])) { + return false; } - return true; } + return true; } + } - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - - /** - * Returns true if object state (one of its state properties) was changed - * @param {String} [propertySet] optional name for the set of property we want to save - * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called - */ - hasStateChanged: function(propertySet) { - propertySet = propertySet || originalSet; - var dashedPropertySet = '_' + propertySet; - if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { - return true; - } - return !_isEqual(this[dashedPropertySet], this, true); - }, + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Saves state of an object - * @param {Object} [options] Object with additional `stateProperties` array to include when saving state - * @return {fabric.Object} thisArg - */ - saveState: function(options) { - var propertySet = options && options.propertySet || originalSet, - destination = '_' + propertySet; - if (!this[destination]) { - return this.setupState(options); - } - saveProps(this, destination, this[propertySet]); - if (options && options.stateProperties) { - saveProps(this, destination, options.stateProperties); - } - return this; - }, + /** + * Returns true if object state (one of its state properties) was changed + * @param {String} [propertySet] optional name for the set of property we want to save + * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called + */ + hasStateChanged: function(propertySet) { + propertySet = propertySet || originalSet; + var dashedPropertySet = '_' + propertySet; + if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { + return true; + } + return !_isEqual(this[dashedPropertySet], this, true); + }, - /** - * Setups state of an object - * @param {Object} [options] Object with additional `stateProperties` array to include when saving state - * @return {fabric.Object} thisArg - */ - setupState: function(options) { - options = options || { }; - var propertySet = options.propertySet || originalSet; - options.propertySet = propertySet; - this['_' + propertySet] = { }; - this.saveState(options); - return this; + /** + * Saves state of an object + * @param {Object} [options] Object with additional `stateProperties` array to include when saving state + * @return {fabric.Object} thisArg + */ + saveState: function(options) { + var propertySet = options && options.propertySet || originalSet, + destination = '_' + propertySet; + if (!this[destination]) { + return this.setupState(options); } - }); - })(typeof exports !== 'undefined' ? exports : window); + saveProps(this, destination, this[propertySet]); + if (options && options.stateProperties) { + saveProps(this, destination, options.stateProperties); + } + return this; + }, - (function(global) { + /** + * Setups state of an object + * @param {Object} [options] Object with additional `stateProperties` array to include when saving state + * @return {fabric.Object} thisArg + */ + setupState: function(options) { + options = options || { }; + var propertySet = options.propertySet || originalSet; + options.propertySet = propertySet; + this['_' + propertySet] = { }; + this.saveState(options); + return this; + } + }); +})(); - var fabric = global.fabric, degreesToRadians = fabric.util.degreesToRadians; - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Determines which corner has been clicked - * @private - * @param {Object} pointer The pointer indicating the mouse position - * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found - */ - _findTargetCorner: function(pointer, forTouch) { - if (!this.hasControls || (!this.canvas || this.canvas._activeObject !== this)) { - return false; - } - var xPoints, - lines, keys = Object.keys(this.oCoords), - j = keys.length - 1, i; - this.__corner = 0; +(function() { - // cycle in reverse order so we pick first the one on top - for (; j >= 0; j--) { - i = keys[j]; - if (!this.isControlVisible(i)) { - continue; - } + var degreesToRadians = fabric.util.degreesToRadians; - lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); - // // debugging - // - // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); - // - // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); - // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); - - xPoints = this._findCrossPoints(pointer, lines); - if (xPoints !== 0 && xPoints % 2 === 1) { - this.__corner = i; - return i; - } - } + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Determines which corner has been clicked + * @private + * @param {Object} pointer The pointer indicating the mouse position + * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found + */ + _findTargetCorner: function(pointer, forTouch) { + // objects in group, anykind, are not self modificable, + // must not return an hovered corner. + if (!this.hasControls || this.group || (!this.canvas || this.canvas._activeObject !== this)) { return false; - }, - - /** - * Calls a function for each control. The function gets called, - * with the control, the object that is calling the iterator and the control's key - * @param {Function} fn function to iterate over the controls over - */ - forEachControl: function(fn) { - for (var i in this.controls) { - fn(this.controls[i], i, this); - } }, + } - /** - * Sets the coordinates of the draggable boxes in the corners of - * the image used to scale/rotate it. - * note: if we would switch to ROUND corner area, all of this would disappear. - * everything would resolve to a single point and a pythagorean theorem for the distance - * @private - */ - _setCornerCoords: function() { - var coords = this.oCoords; + var ex = pointer.x, + ey = pointer.y, + xPoints, + lines, keys = Object.keys(this.oCoords), + j = keys.length - 1, i; + this.__corner = 0; - for (var control in coords) { - var controlObject = this.controls[control]; - coords[control].corner = controlObject.calcCornerCoords( - this.angle, this.cornerSize, coords[control].x, coords[control].y, false); - coords[control].touchCorner = controlObject.calcCornerCoords( - this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); + // cycle in reverse order so we pick first the one on top + for (; j >= 0; j--) { + i = keys[j]; + if (!this.isControlVisible(i)) { + continue; } - }, - /** - * Draws a colored layer behind the object, inside its selection borders. - * Requires public options: padding, selectionBackgroundColor - * this function is called when the context is transformed - * has checks to be skipped when the object is on a staticCanvas - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @return {fabric.Object} thisArg - * @chainable - */ - drawSelectionBackground: function(ctx) { - if (!this.selectionBackgroundColor || - (this.canvas && !this.canvas.interactive) || - (this.canvas && this.canvas._activeObject !== this) - ) { - return this; + lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); + // // debugging + // + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + + xPoints = this._findCrossPoints({ x: ex, y: ey }, lines); + if (xPoints !== 0 && xPoints % 2 === 1) { + this.__corner = i; + return i; } - ctx.save(); - var center = this.getRelativeCenterPoint(), wh = this._calculateCurrentDimensions(), - vpt = this.canvas.viewportTransform; - ctx.translate(center.x, center.y); - ctx.scale(1 / vpt[0], 1 / vpt[3]); - ctx.rotate(degreesToRadians(this.angle)); - ctx.fillStyle = this.selectionBackgroundColor; - ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); - ctx.restore(); - return this; - }, + } + return false; + }, - /** - * @public override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style. - * @param {CanvasRenderingContext2D} ctx ctx is rotated and translated so that (0,0) is at object's center - * @param {fabric.Point} size the control box size used - */ - strokeBorders: function (ctx, size) { - ctx.strokeRect( - -size.x / 2, - -size.y / 2, - size.x, - size.y - ); - }, + /** + * Calls a function for each control. The function gets called, + * with the control, the object that is calling the iterator and the control's key + * @param {Function} fn function to iterate over the controls over + */ + forEachControl: function(fn) { + for (var i in this.controls) { + fn(this.controls[i], i, this); + }; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @param {fabric.Point} size - * @param {Object} styleOverride object to override the object style - */ - _drawBorders: function (ctx, size, styleOverride) { - var options = Object.assign({ - hasControls: this.hasControls, - borderColor: this.borderColor, - borderDashArray: this.borderDashArray - }, styleOverride || {}); - ctx.save(); - ctx.strokeStyle = options.borderColor; - this._setLineDash(ctx, options.borderDashArray); - this.strokeBorders(ctx, size); - options.hasControls && this.drawControlsConnectingLines(ctx, size); - ctx.restore(); - }, + /** + * Sets the coordinates of the draggable boxes in the corners of + * the image used to scale/rotate it. + * note: if we would switch to ROUND corner area, all of this would disappear. + * everything would resolve to a single point and a pythagorean theorem for the distance + * @private + */ + _setCornerCoords: function() { + var coords = this.oCoords; - /** - * Draws borders of an object's bounding box. - * Requires public properties: width, height - * Requires public options: padding, borderColor - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @param {object} options object representing current object parameters - * @param {Object} [styleOverride] object to override the object style - * @return {fabric.Object} thisArg - * @chainable - */ - drawBorders: function (ctx, options, styleOverride) { - var size; - if ((styleOverride && styleOverride.forActiveSelection) || this.group) { - var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), - strokeFactor = this.strokeUniform ? - new fabric.Point(0, 0).scalarAddEquals(this.canvas.getZoom()) : - new fabric.Point(options.scaleX, options.scaleY), - stroke = strokeFactor.scalarMultiplyEquals(this.strokeWidth); - size = bbox.addEquals(stroke).scalarAddEquals(this.borderScaleFactor); - } - else { - size = this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor); - } - this._drawBorders(ctx, size, styleOverride); + for (var control in coords) { + var controlObject = this.controls[control]; + coords[control].corner = controlObject.calcCornerCoords( + this.angle, this.cornerSize, coords[control].x, coords[control].y, false); + coords[control].touchCorner = controlObject.calcCornerCoords( + this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); + } + }, + + /** + * Draws a colored layer behind the object, inside its selection borders. + * Requires public options: padding, selectionBackgroundColor + * this function is called when the context is transformed + * has checks to be skipped when the object is on a staticCanvas + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @return {fabric.Object} thisArg + * @chainable + */ + drawSelectionBackground: function(ctx) { + if (!this.selectionBackgroundColor || + (this.canvas && !this.canvas.interactive) || + (this.canvas && this.canvas._activeObject !== this) + ) { return this; - }, + } + ctx.save(); + var center = this.getCenterPoint(), wh = this._calculateCurrentDimensions(), + vpt = this.canvas.viewportTransform; + ctx.translate(center.x, center.y); + ctx.scale(1 / vpt[0], 1 / vpt[3]); + ctx.rotate(degreesToRadians(this.angle)); + ctx.fillStyle = this.selectionBackgroundColor; + ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); + ctx.restore(); + return this; + }, - /** - * Draws lines from a borders of an object's bounding box to controls that have `withConnection` property set. - * Requires public properties: width, height - * Requires public options: padding, borderColor - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @param {number} width object final width - * @param {number} height object final height - * @return {fabric.Object} thisArg - * @chainable - */ - drawControlsConnectingLines: function (ctx, size) { - var shouldStroke = false; + /** + * Draws borders of an object's bounding box. + * Requires public properties: width, height + * Requires public options: padding, borderColor + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawBorders: function(ctx, styleOverride) { + styleOverride = styleOverride || {}; + var wh = this._calculateCurrentDimensions(), + strokeWidth = this.borderScaleFactor, + width = wh.x + strokeWidth, + height = wh.y + strokeWidth, + hasControls = typeof styleOverride.hasControls !== 'undefined' ? + styleOverride.hasControls : this.hasControls, + shouldStroke = false; + ctx.save(); + ctx.strokeStyle = styleOverride.borderColor || this.borderColor; + this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray); + + ctx.strokeRect( + -width / 2, + -height / 2, + width, + height + ); + + if (hasControls) { ctx.beginPath(); - this.forEachControl(function (control, key, fabricObject) { + this.forEachControl(function(control, key, fabricObject) { // in this moment, the ctx is centered on the object. // width and height of the above function are the size of the bbox. if (control.withConnection && control.getVisibility(fabricObject, key)) { // reset movement for each control shouldStroke = true; - ctx.moveTo(control.x * size.x, control.y * size.y); + ctx.moveTo(control.x * width, control.y * height); ctx.lineTo( - control.x * size.x + control.offsetX, - control.y * size.y + control.offsetY + control.x * width + control.offsetX, + control.y * height + control.offsetY ); } }); - shouldStroke && ctx.stroke(); - - return this; - }, - - /** - * Draws corners of an object's bounding box. - * Requires public properties: width, height - * Requires public options: cornerSize, padding - * @param {CanvasRenderingContext2D} ctx Context to draw on - * @param {Object} styleOverride object to override the object style - * @return {fabric.Object} thisArg - * @chainable - */ - drawControls: function(ctx, styleOverride) { - styleOverride = styleOverride || {}; - ctx.save(); - var retinaScaling = this.canvas.getRetinaScaling(), p; - ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); - ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; - if (!this.transparentCorners) { - ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; + if (shouldStroke) { + ctx.stroke(); } - this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); - this.setCoords(); - this.forEachControl(function(control, key, fabricObject) { - if (control.getVisibility(fabricObject, key)) { - p = fabricObject.oCoords[key]; - control.render(ctx, p.x, p.y, styleOverride, fabricObject); - } - }); - ctx.restore(); + } + ctx.restore(); + return this; + }, - return this; - }, + /** + * Draws borders of an object's bounding box when it is inside a group. + * Requires public properties: width, height + * Requires public options: padding, borderColor + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {object} options object representing current object parameters + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawBordersInGroup: function(ctx, options, styleOverride) { + styleOverride = styleOverride || {}; + var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), + strokeWidth = this.strokeWidth, + strokeUniform = this.strokeUniform, + borderScaleFactor = this.borderScaleFactor, + width = + bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor, + height = + bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor; + ctx.save(); + this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray); + ctx.strokeStyle = styleOverride.borderColor || this.borderColor; + ctx.strokeRect( + -width / 2, + -height / 2, + width, + height + ); - /** - * Returns true if the specified control is visible, false otherwise. - * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. - * @returns {Boolean} true if the specified control is visible, false otherwise - */ - isControlVisible: function(controlKey) { - return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); - }, + ctx.restore(); + return this; + }, - /** - * Sets the visibility of the specified control. - * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. - * @param {Boolean} visible true to set the specified control visible, false otherwise - * @return {fabric.Object} thisArg - * @chainable - */ - setControlVisible: function(controlKey, visible) { - if (!this._controlsVisibility) { - this._controlsVisibility = {}; + /** + * Draws corners of an object's bounding box. + * Requires public properties: width, height + * Requires public options: cornerSize, padding + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawControls: function(ctx, styleOverride) { + styleOverride = styleOverride || {}; + ctx.save(); + var retinaScaling = this.canvas.getRetinaScaling(), matrix, p; + ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); + ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; + if (!this.transparentCorners) { + ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; + } + this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); + this.setCoords(); + if (this.group) { + // fabricJS does not really support drawing controls inside groups, + // this piece of code here helps having at least the control in places. + // If an application needs to show some objects as selected because of some UI state + // can still call Object._renderControls() on any object they desire, independently of groups. + // using no padding, circular controls and hiding the rotating cursor is higly suggested, + matrix = this.group.calcTransformMatrix(); + } + this.forEachControl(function(control, key, fabricObject) { + p = fabricObject.oCoords[key]; + if (control.getVisibility(fabricObject, key)) { + if (matrix) { + p = fabric.util.transformPoint(p, matrix); + } + control.render(ctx, p.x, p.y, styleOverride, fabricObject); } - this._controlsVisibility[controlKey] = visible; - return this; - }, - - /** - * Sets the visibility state of object controls. - * @param {Object} [options] Options object - * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it - * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it - * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it - * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it - * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it - * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it - * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it - * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it - * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it - * @return {fabric.Object} thisArg - * @chainable - */ - setControlsVisibility: function(options) { - options || (options = { }); + }); + ctx.restore(); - for (var p in options) { - this.setControlVisible(p, options[p]); - } - return this; - }, + return this; + }, + /** + * Returns true if the specified control is visible, false otherwise. + * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. + * @returns {Boolean} true if the specified control is visible, false otherwise + */ + isControlVisible: function(controlKey) { + return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); + }, - /** - * This callback function is called every time _discardActiveObject or _setActiveObject - * try to to deselect this object. If the function returns true, the process is cancelled - * @param {Object} [options] options sent from the upper functions - * @param {Event} [options.e] event if the process is generated by an event - */ - onDeselect: function() { - // implemented by sub-classes, as needed. - }, + /** + * Sets the visibility of the specified control. + * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. + * @param {Boolean} visible true to set the specified control visible, false otherwise + * @return {fabric.Object} thisArg + * @chainable + */ + setControlVisible: function(controlKey, visible) { + if (!this._controlsVisibility) { + this._controlsVisibility = {}; + } + this._controlsVisibility[controlKey] = visible; + return this; + }, + /** + * Sets the visibility state of object controls. + * @param {Object} [options] Options object + * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it + * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it + * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it + * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it + * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it + * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it + * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it + * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it + * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it + * @return {fabric.Object} thisArg + * @chainable + */ + setControlsVisibility: function(options) { + options || (options = { }); - /** - * This callback function is called every time _discardActiveObject or _setActiveObject - * try to to select this object. If the function returns true, the process is cancelled - * @param {Object} [options] options sent from the upper functions - * @param {Event} [options.e] event if the process is generated by an event - */ - onSelect: function() { - // implemented by sub-classes, as needed. + for (var p in options) { + this.setControlVisible(p, options[p]); } - }); - })(typeof exports !== 'undefined' ? exports : window); + return this; + }, - (function (global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - /** - * Animation duration (in ms) for fx* methods - * @type Number - * @default - */ - FX_DURATION: 500, + /** + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to deselect this object. If the function returns true, the process is cancelled + * @param {Object} [options] options sent from the upper functions + * @param {Event} [options.e] event if the process is generated by an event + */ + onDeselect: function() { + // implemented by sub-classes, as needed. + }, - /** - * Centers object horizontally with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxCenterObjectH: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.getX(), - endValue: this.getCenterPoint().x, - duration: this.FX_DURATION, - onChange: function(value) { - object.setX(value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function() { - object.setCoords(); - onComplete(); - } - }); - }, - /** - * Centers object vertically with animation. - * @param {fabric.Object} object Object to center - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxCenterObjectV: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.getY(), - endValue: this.getCenterPoint().y, - duration: this.FX_DURATION, - onChange: function(value) { - object.setY(value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function() { - object.setCoords(); - onComplete(); - } - }); - }, + /** + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to select this object. If the function returns true, the process is cancelled + * @param {Object} [options] options sent from the upper functions + * @param {Event} [options.e] event if the process is generated by an event + */ + onSelect: function() { + // implemented by sub-classes, as needed. + } + }); +})(); - /** - * Same as `fabric.Canvas#remove` but animated - * @param {fabric.Object} object Object to remove - * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.AnimationContext} context - */ - fxRemove: function (object, callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: object.opacity, - endValue: 0, - duration: this.FX_DURATION, - onChange: function(value) { - object.set('opacity', value); - _this.requestRenderAll(); - onChange(); - }, - onComplete: function () { - _this.remove(object); - onComplete(); - } - }); + +fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + + /** + * Animation duration (in ms) for fx* methods + * @type Number + * @default + */ + FX_DURATION: 500, + + /** + * Centers object horizontally with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxCenterObjectH: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.left, + endValue: this.getCenter().left, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('left', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); } }); + }, - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - /** - * Animates object's properties - * @param {String|Object} property Property to animate (if string) or properties to animate (if object) - * @param {Number|Object} value Value to animate property to (if string was given first) or options object - * @return {fabric.Object} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation} - * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties) - * - * As object — multiple properties - * - * object.animate({ left: ..., top: ... }); - * object.animate({ left: ..., top: ... }, { duration: ... }); - * - * As string — one property - * - * object.animate('left', ...); - * object.animate('left', { duration: ... }); - * - */ - animate: function () { - if (arguments[0] && typeof arguments[0] === 'object') { - var propsToAnimate = [], prop, skipCallbacks, out = []; - for (prop in arguments[0]) { - propsToAnimate.push(prop); - } - for (var i = 0, len = propsToAnimate.length; i < len; i++) { - prop = propsToAnimate[i]; - skipCallbacks = i !== len - 1; - out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks)); - } - return out; - } - else { - return this._animate.apply(this, arguments); - } - }, + /** + * Centers object vertically with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxCenterObjectV: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.top, + endValue: this.getCenter().top, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('top', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); + } + }); + }, - /** - * @private - * @param {String} property Property to animate - * @param {String} to Value to animate to - * @param {Object} [options] Options object - * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked - */ - _animate: function(property, to, options, skipCallbacks) { - var _this = this, propPair; + /** + * Same as `fabric.Canvas#remove` but animated + * @param {fabric.Object} object Object to remove + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.AnimationContext} context + */ + fxRemove: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: object.opacity, + endValue: 0, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('opacity', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function () { + _this.remove(object); + onComplete(); + } + }); + } +}); - to = to.toString(); +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Animates object's properties + * @param {String|Object} property Property to animate (if string) or properties to animate (if object) + * @param {Number|Object} value Value to animate property to (if string was given first) or options object + * @return {fabric.Object} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation} + * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties) + * + * As object — multiple properties + * + * object.animate({ left: ..., top: ... }); + * object.animate({ left: ..., top: ... }, { duration: ... }); + * + * As string — one property + * + * object.animate('left', ...); + * object.animate('left', { duration: ... }); + * + */ + animate: function () { + if (arguments[0] && typeof arguments[0] === 'object') { + var propsToAnimate = [], prop, skipCallbacks, out = []; + for (prop in arguments[0]) { + propsToAnimate.push(prop); + } + for (var i = 0, len = propsToAnimate.length; i < len; i++) { + prop = propsToAnimate[i]; + skipCallbacks = i !== len - 1; + out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks)); + } + return out; + } + else { + return this._animate.apply(this, arguments); + } + }, - options = Object.assign({}, options); + /** + * @private + * @param {String} property Property to animate + * @param {String} to Value to animate to + * @param {Object} [options] Options object + * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked + */ + _animate: function(property, to, options, skipCallbacks) { + var _this = this, propPair; - if (~property.indexOf('.')) { - propPair = property.split('.'); - } + to = to.toString(); - var propIsColor = - _this.colorProperties.indexOf(property) > -1 || - (propPair && _this.colorProperties.indexOf(propPair[1]) > -1); + if (!options) { + options = { }; + } + else { + options = fabric.util.object.clone(options); + } - var currentValue = propPair - ? this.get(propPair[0])[propPair[1]] - : this.get(property); + if (~property.indexOf('.')) { + propPair = property.split('.'); + } - if (!('from' in options)) { - options.from = currentValue; - } + var propIsColor = + _this.colorProperties.indexOf(property) > -1 || + (propPair && _this.colorProperties.indexOf(propPair[1]) > -1); - if (!propIsColor) { - if (~to.indexOf('=')) { - to = currentValue + parseFloat(to.replace('=', '')); - } - else { - to = parseFloat(to); - } - } + var currentValue = propPair + ? this.get(propPair[0])[propPair[1]] + : this.get(property); - var _options = { - target: this, - startValue: options.from, - endValue: to, - byValue: options.by, - easing: options.easing, - duration: options.duration, - abort: options.abort && function(value, valueProgress, timeProgress) { - return options.abort.call(_this, value, valueProgress, timeProgress); - }, - onChange: function (value, valueProgress, timeProgress) { - if (propPair) { - _this[propPair[0]][propPair[1]] = value; - } - else { - _this.set(property, value); - } - if (skipCallbacks) { - return; - } - options.onChange && options.onChange(value, valueProgress, timeProgress); - }, - onComplete: function (value, valueProgress, timeProgress) { - if (skipCallbacks) { - return; - } + if (!('from' in options)) { + options.from = currentValue; + } - _this.setCoords(); - options.onComplete && options.onComplete(value, valueProgress, timeProgress); - } - }; + if (!propIsColor) { + if (~to.indexOf('=')) { + to = currentValue + parseFloat(to.replace('=', '')); + } + else { + to = parseFloat(to); + } + } - if (propIsColor) { - return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options); + var _options = { + target: this, + startValue: options.from, + endValue: to, + byValue: options.by, + easing: options.easing, + duration: options.duration, + abort: options.abort && function(value, valueProgress, timeProgress) { + return options.abort.call(_this, value, valueProgress, timeProgress); + }, + onChange: function (value, valueProgress, timeProgress) { + if (propPair) { + _this[propPair[0]][propPair[1]] = value; } else { - return fabric.util.animate(_options); + _this.set(property, value); + } + if (skipCallbacks) { + return; + } + options.onChange && options.onChange(value, valueProgress, timeProgress); + }, + onComplete: function (value, valueProgress, timeProgress) { + if (skipCallbacks) { + return; } - } - }); - })(typeof exports !== 'undefined' ? exports : window); - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; + _this.setCoords(); + options.onComplete && options.onComplete(value, valueProgress, timeProgress); + } + }; - /** - * Line class - * @class fabric.Line - * @extends fabric.Object - * @see {@link fabric.Line#initialize} for constructor definition - */ - fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { + if (propIsColor) { + return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options); + } + else { + return fabric.util.animate(_options); + } + } +}); - /** - * Type of an object - * @type String - * @default - */ - type: 'line', - /** - * x value or first line edge - * @type Number - * @default - */ - x1: 0, +(function(global) { - /** - * y value or first line edge - * @type Number - * @default - */ - y1: 0, + 'use strict'; - /** - * x value or second line edge - * @type Number - * @default - */ - x2: 0, + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; - /** - * y value or second line edge - * @type Number - * @default - */ - y2: 0, + if (fabric.Line) { + fabric.warn('fabric.Line is already defined'); + return; + } - cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), + /** + * Line class + * @class fabric.Line + * @extends fabric.Object + * @see {@link fabric.Line#initialize} for constructor definition + */ + fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { - /** - * Constructor - * @param {Array} [points] Array of points - * @param {Object} [options] Options object - * @return {fabric.Line} thisArg - */ - initialize: function(points, options) { - if (!points) { - points = [0, 0, 0, 0]; - } + /** + * Type of an object + * @type String + * @default + */ + type: 'line', - this.callSuper('initialize', options); + /** + * x value or first line edge + * @type Number + * @default + */ + x1: 0, - this.set('x1', points[0]); - this.set('y1', points[1]); - this.set('x2', points[2]); - this.set('y2', points[3]); + /** + * y value or first line edge + * @type Number + * @default + */ + y1: 0, - this._setWidthHeight(options); - }, + /** + * x value or second line edge + * @type Number + * @default + */ + x2: 0, - /** - * @private - * @param {Object} [options] Options - */ - _setWidthHeight: function(options) { - options || (options = { }); + /** + * y value or second line edge + * @type Number + * @default + */ + y2: 0, - this.width = Math.abs(this.x2 - this.x1); - this.height = Math.abs(this.y2 - this.y1); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), - this.left = 'left' in options - ? options.left - : this._getLeftToOriginX(); + /** + * Constructor + * @param {Array} [points] Array of points + * @param {Object} [options] Options object + * @return {fabric.Line} thisArg + */ + initialize: function(points, options) { + if (!points) { + points = [0, 0, 0, 0]; + } - this.top = 'top' in options - ? options.top - : this._getTopToOriginY(); - }, + this.callSuper('initialize', options); - /** - * @private - * @param {String} key - * @param {*} value - */ - _set: function(key, value) { - this.callSuper('_set', key, value); - if (typeof coordProps[key] !== 'undefined') { - this._setWidthHeight(); - } - return this; - }, + this.set('x1', points[0]); + this.set('y1', points[1]); + this.set('x2', points[2]); + this.set('y2', points[3]); - /** - * @private - * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line. - */ - _getLeftToOriginX: makeEdgeToOriginGetter( - { // property names - origin: 'originX', - axis1: 'x1', - axis2: 'x2', - dimension: 'width' - }, - { // possible values of origin - nearest: 'left', - center: 'center', - farthest: 'right' - } - ), + this._setWidthHeight(options); + }, - /** - * @private - * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line. - */ - _getTopToOriginY: makeEdgeToOriginGetter( - { // property names - origin: 'originY', - axis1: 'y1', - axis2: 'y2', - dimension: 'height' - }, - { // possible values of origin - nearest: 'top', - center: 'center', - farthest: 'bottom' - } - ), + /** + * @private + * @param {Object} [options] Options + */ + _setWidthHeight: function(options) { + options || (options = { }); - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - ctx.beginPath(); + this.width = Math.abs(this.x2 - this.x1); + this.height = Math.abs(this.y2 - this.y1); + this.left = 'left' in options + ? options.left + : this._getLeftToOriginX(); - var p = this.calcLinePoints(); - ctx.moveTo(p.x1, p.y1); - ctx.lineTo(p.x2, p.y2); + this.top = 'top' in options + ? options.top + : this._getTopToOriginY(); + }, - ctx.lineWidth = this.strokeWidth; + /** + * @private + * @param {String} key + * @param {*} value + */ + _set: function(key, value) { + this.callSuper('_set', key, value); + if (typeof coordProps[key] !== 'undefined') { + this._setWidthHeight(); + } + return this; + }, - // TODO: test this - // make sure setting "fill" changes color of a line - // (by copying fillStyle to strokeStyle, since line is stroked, not filled) - var origStrokeStyle = ctx.strokeStyle; - ctx.strokeStyle = this.stroke || ctx.fillStyle; - this.stroke && this._renderStroke(ctx); - ctx.strokeStyle = origStrokeStyle; + /** + * @private + * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line. + */ + _getLeftToOriginX: makeEdgeToOriginGetter( + { // property names + origin: 'originX', + axis1: 'x1', + axis2: 'x2', + dimension: 'width' }, + { // possible values of origin + nearest: 'left', + center: 'center', + farthest: 'right' + } + ), - /** - * This function is an helper for svg import. it returns the center of the object in the svg - * untransformed coordinates - * @private - * @return {Object} center point from element coordinates - */ - _findCenterFromElement: function() { - return { - x: (this.x1 + this.x2) / 2, - y: (this.y1 + this.y2) / 2, - }; + /** + * @private + * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line. + */ + _getTopToOriginY: makeEdgeToOriginGetter( + { // property names + origin: 'originY', + axis1: 'y1', + axis2: 'y2', + dimension: 'height' }, + { // possible values of origin + nearest: 'top', + center: 'center', + farthest: 'bottom' + } + ), - /** - * Returns object representation of an instance - * @method toObject - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + ctx.beginPath(); - /* - * Calculate object dimensions from its properties - * @private - */ - _getNonTransformedDimensions: function() { - var dim = this.callSuper('_getNonTransformedDimensions'); - if (this.strokeLineCap === 'butt') { - if (this.width === 0) { - dim.y -= this.strokeWidth; - } - if (this.height === 0) { - dim.x -= this.strokeWidth; - } - } - return dim; - }, - /** - * Recalculates line points given width and height - * @private - */ - calcLinePoints: function() { - var xMult = this.x1 <= this.x2 ? -1 : 1, - yMult = this.y1 <= this.y2 ? -1 : 1, - x1 = (xMult * this.width * 0.5), - y1 = (yMult * this.height * 0.5), - x2 = (xMult * this.width * -0.5), - y2 = (yMult * this.height * -0.5); + var p = this.calcLinePoints(); + ctx.moveTo(p.x1, p.y1); + ctx.lineTo(p.x2, p.y2); - return { - x1: x1, - x2: x2, - y1: y1, - y2: y2 - }; - }, + ctx.lineWidth = this.strokeWidth; - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var p = this.calcLinePoints(); - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - }); + // TODO: test this + // make sure setting "fill" changes color of a line + // (by copying fillStyle to strokeStyle, since line is stroked, not filled) + var origStrokeStyle = ctx.strokeStyle; + ctx.strokeStyle = this.stroke || ctx.fillStyle; + this.stroke && this._renderStroke(ctx); + ctx.strokeStyle = origStrokeStyle; + }, - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement}) - * @static - * @memberOf fabric.Line - * @see http://www.w3.org/TR/SVG/shapes.html#LineElement + * This function is an helper for svg import. it returns the center of the object in the svg + * untransformed coordinates + * @private + * @return {Object} center point from element coordinates */ - fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); + _findCenterFromElement: function() { + return { + x: (this.x1 + this.x2) / 2, + y: (this.y1 + this.y2) / 2, + }; + }, /** - * Returns fabric.Line instance from an SVG element - * @static - * @memberOf fabric.Line - * @param {SVGElement} element Element to parse - * @param {Object} [options] Options object - * @param {Function} [callback] callback function invoked after parsing + * Returns object representation of an instance + * @method toObject + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ - fabric.Line.fromElement = function(element, callback, options) { - options = options || { }; - var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), - points = [ - parsedAttributes.x1 || 0, - parsedAttributes.y1 || 0, - parsedAttributes.x2 || 0, - parsedAttributes.y2 || 0 - ]; - callback(new fabric.Line(points, extend(parsedAttributes, options))); - }; - /* _FROM_SVG_END_ */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); + }, - /** - * Returns fabric.Line instance from an object representation - * @static - * @memberOf fabric.Line - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Line.fromObject = function(object) { - var options = clone(object, true); - options.points = [object.x1, object.y1, object.x2, object.y2]; - return fabric.Object._fromObject(fabric.Line, options, 'points').then(function(fabricLine) { - delete fabricLine.points; - return fabricLine; - }); - }; + /* + * Calculate object dimensions from its properties + * @private + */ + _getNonTransformedDimensions: function() { + var dim = this.callSuper('_getNonTransformedDimensions'); + if (this.strokeLineCap === 'butt') { + if (this.width === 0) { + dim.y -= this.strokeWidth; + } + if (this.height === 0) { + dim.x -= this.strokeWidth; + } + } + return dim; + }, /** - * Produces a function that calculates distance from canvas edge to Line origin. + * Recalculates line points given width and height + * @private */ - function makeEdgeToOriginGetter(propertyNames, originValues) { - var origin = propertyNames.origin, - axis1 = propertyNames.axis1, - axis2 = propertyNames.axis2, - dimension = propertyNames.dimension, - nearest = originValues.nearest, - center = originValues.center, - farthest = originValues.farthest; + calcLinePoints: function() { + var xMult = this.x1 <= this.x2 ? -1 : 1, + yMult = this.y1 <= this.y2 ? -1 : 1, + x1 = (xMult * this.width * 0.5), + y1 = (yMult * this.height * 0.5), + x2 = (xMult * this.width * -0.5), + y2 = (yMult * this.height * -0.5); - return function() { - switch (this.get(origin)) { - case nearest: - return Math.min(this.get(axis1), this.get(axis2)); - case center: - return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); - case farthest: - return Math.max(this.get(axis1), this.get(axis2)); - } + return { + x1: x1, + x2: x2, + y1: y1, + y2: y2 }; + }, - } - - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - degreesToRadians = fabric.util.degreesToRadians; + /* _TO_SVG_START_ */ /** - * Circle class - * @class fabric.Circle - * @extends fabric.Object - * @see {@link fabric.Circle#initialize} for constructor definition + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { + _toSVG: function() { + var p = this.calcLinePoints(); + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); - /** - * Type of an object - * @type String - * @default - */ - type: 'circle', - - /** - * Radius of this circle - * @type Number - * @default - */ - radius: 0, - - /** - * degrees of start of the circle. - * probably will change to degrees in next major version - * @type Number 0 - 359 - * @default 0 - */ - startAngle: 0, - - /** - * End angle of the circle - * probably will change to degrees in next major version - * @type Number 1 - 360 - * @default 360 - */ - endAngle: 360, + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement}) + * @static + * @memberOf fabric.Line + * @see http://www.w3.org/TR/SVG/shapes.html#LineElement + */ + fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); - cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), + /** + * Returns fabric.Line instance from an SVG element + * @static + * @memberOf fabric.Line + * @param {SVGElement} element Element to parse + * @param {Object} [options] Options object + * @param {Function} [callback] callback function invoked after parsing + */ + fabric.Line.fromElement = function(element, callback, options) { + options = options || { }; + var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), + points = [ + parsedAttributes.x1 || 0, + parsedAttributes.y1 || 0, + parsedAttributes.x2 || 0, + parsedAttributes.y2 || 0 + ]; + callback(new fabric.Line(points, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ - /** - * @private - * @param {String} key - * @param {*} value - * @return {fabric.Circle} thisArg - */ - _set: function(key, value) { - this.callSuper('_set', key, value); + /** + * Returns fabric.Line instance from an object representation + * @static + * @memberOf fabric.Line + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + */ + fabric.Line.fromObject = function(object, callback) { + function _callback(instance) { + delete instance.points; + callback && callback(instance); + }; + var options = clone(object, true); + options.points = [object.x1, object.y1, object.x2, object.y2]; + fabric.Object._fromObject('Line', options, _callback, 'points'); + }; - if (key === 'radius') { - this.setRadius(value); - } + /** + * Produces a function that calculates distance from canvas edge to Line origin. + */ + function makeEdgeToOriginGetter(propertyNames, originValues) { + var origin = propertyNames.origin, + axis1 = propertyNames.axis1, + axis2 = propertyNames.axis2, + dimension = propertyNames.dimension, + nearest = originValues.nearest, + center = originValues.center, + farthest = originValues.farthest; + + return function() { + switch (this.get(origin)) { + case nearest: + return Math.min(this.get(axis1), this.get(axis2)); + case center: + return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); + case farthest: + return Math.max(this.get(axis1), this.get(axis2)); + } + }; - return this; - }, + } - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); - }, +})(typeof exports !== 'undefined' ? exports : this); - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var svgString, x = 0, y = 0, - angle = (this.endAngle - this.startAngle) % 360; - - if (angle === 0) { - svgString = [ - '\n' - ]; - } - else { - var start = degreesToRadians(this.startAngle), - end = degreesToRadians(this.endAngle), - radius = this.radius, - startX = fabric.util.cos(start) * radius, - startY = fabric.util.sin(start) * radius, - endX = fabric.util.cos(end) * radius, - endY = fabric.util.sin(end) * radius, - largeFlag = angle > 180 ? '1' : '0'; - svgString = [ - '\n' - ]; - } - return svgString; - }, - /* _TO_SVG_END_ */ +(function(global) { - /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render on - */ - _render: function(ctx) { - ctx.beginPath(); - ctx.arc( - 0, - 0, - this.radius, - degreesToRadians(this.startAngle), - degreesToRadians(this.endAngle), - false - ); - this._renderPaintInOrder(ctx); - }, + 'use strict'; - /** - * Returns horizontal radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRadiusX: function() { - return this.get('radius') * this.get('scaleX'); - }, + var fabric = global.fabric || (global.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians; - /** - * Returns vertical radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRadiusY: function() { - return this.get('radius') * this.get('scaleY'); - }, + if (fabric.Circle) { + fabric.warn('fabric.Circle is already defined.'); + return; + } - /** - * Sets radius of an object (and updates width accordingly) - * @return {fabric.Circle} thisArg - */ - setRadius: function(value) { - this.radius = value; - return this.set('width', value * 2).set('height', value * 2); - }, - }); + /** + * Circle class + * @class fabric.Circle + * @extends fabric.Object + * @see {@link fabric.Circle#initialize} for constructor definition + */ + fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) - * @static - * @memberOf fabric.Circle - * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement + * Type of an object + * @type String + * @default */ - fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); + type: 'circle', /** - * Returns {@link fabric.Circle} instance from an SVG element - * @static - * @memberOf fabric.Circle - * @param {SVGElement} element Element to parse - * @param {Function} [callback] Options callback invoked after parsing is finished - * @param {Object} [options] Options object - * @throws {Error} If value of `r` attribute is missing or invalid + * Radius of this circle + * @type Number + * @default */ - fabric.Circle.fromElement = function(element, callback) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); - - if (!isValidRadius(parsedAttributes)) { - throw new Error('value of `r` attribute is required and can not be negative'); - } - - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; - callback(new fabric.Circle(parsedAttributes)); - }; + radius: 0, /** - * @private + * degrees of start of the circle. + * probably will change to degrees in next major version + * @type Number 0 - 359 + * @default 0 */ - function isValidRadius(attributes) { - return (('radius' in attributes) && (attributes.radius >= 0)); - } - /* _FROM_SVG_END_ */ + startAngle: 0, /** - * Returns {@link fabric.Circle} instance from an object representation - * @static - * @memberOf fabric.Circle - * @param {Object} object Object to create an instance from - * @returns {Promise} + * End angle of the circle + * probably will change to degrees in next major version + * @type Number 1 - 360 + * @default 360 */ - fabric.Circle.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Circle, object); - }; + endAngle: 360, - })(typeof exports !== 'undefined' ? exports : window); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), - (function(global) { - var fabric = global.fabric || (global.fabric = { }); /** - * Triangle class - * @class fabric.Triangle - * @extends fabric.Object - * @return {fabric.Triangle} thisArg - * @see {@link fabric.Triangle#initialize} for constructor definition + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Circle} thisArg */ - fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { - - /** - * Type of an object - * @type String - * @default - */ - type: 'triangle', + _set: function(key, value) { + this.callSuper('_set', key, value); - /** - * Width is set to 100 to compensate the old initialize code that was setting it to 100 - * @type Number - * @default - */ - width: 100, + if (key === 'radius') { + this.setRadius(value); + } - /** - * Height is set to 100 to compensate the old initialize code that was setting it to 100 - * @type Number - * @default - */ - height: 100, + return this; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2; + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); + }, - ctx.beginPath(); - ctx.moveTo(-widthBy2, heightBy2); - ctx.lineTo(0, -heightBy2); - ctx.lineTo(widthBy2, heightBy2); - ctx.closePath(); + /* _TO_SVG_START_ */ - this._renderPaintInOrder(ctx); - }, + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var svgString, x = 0, y = 0, + angle = (this.endAngle - this.startAngle) % 360; - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var widthBy2 = this.width / 2, - heightBy2 = this.height / 2, - points = [ - -widthBy2 + ' ' + heightBy2, - '0 ' + -heightBy2, - widthBy2 + ' ' + heightBy2 - ].join(','); - return [ - '' + if (angle === 0) { + svgString = [ + '\n' ]; - }, - /* _TO_SVG_END_ */ - }); + } + else { + var start = degreesToRadians(this.startAngle), + end = degreesToRadians(this.endAngle), + radius = this.radius, + startX = fabric.util.cos(start) * radius, + startY = fabric.util.sin(start) * radius, + endX = fabric.util.cos(end) * radius, + endY = fabric.util.sin(end) * radius, + largeFlag = angle > 180 ? '1' : '0'; + svgString = [ + '\n' + ]; + } + return svgString; + }, + /* _TO_SVG_END_ */ /** - * Returns {@link fabric.Triangle} instance from an object representation - * @static - * @memberOf fabric.Triangle - * @param {Object} object Object to create an instance from - * @returns {Promise} + * @private + * @param {CanvasRenderingContext2D} ctx context to render on */ - fabric.Triangle.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Triangle, object); - }; + _render: function(ctx) { + ctx.beginPath(); + ctx.arc( + 0, + 0, + this.radius, + degreesToRadians(this.startAngle), + degreesToRadians(this.endAngle), + false + ); + this._renderPaintInOrder(ctx); + }, - })(typeof exports !== 'undefined' ? exports : window); + /** + * Returns horizontal radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRadiusX: function() { + return this.get('radius') * this.get('scaleX'); + }, - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - piBy2 = Math.PI * 2; /** - * Ellipse class - * @class fabric.Ellipse - * @extends fabric.Object - * @return {fabric.Ellipse} thisArg - * @see {@link fabric.Ellipse#initialize} for constructor definition + * Returns vertical radius of an object (according to how an object is scaled) + * @return {Number} */ - fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { + getRadiusY: function() { + return this.get('radius') * this.get('scaleY'); + }, - /** - * Type of an object - * @type String - * @default - */ - type: 'ellipse', + /** + * Sets radius of an object (and updates width accordingly) + * @return {fabric.Circle} thisArg + */ + setRadius: function(value) { + this.radius = value; + return this.set('width', value * 2).set('height', value * 2); + }, + }); - /** - * Horizontal radius - * @type Number - * @default - */ - rx: 0, + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) + * @static + * @memberOf fabric.Circle + * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement + */ + fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); - /** - * Vertical radius - * @type Number - * @default - */ - ry: 0, + /** + * Returns {@link fabric.Circle} instance from an SVG element + * @static + * @memberOf fabric.Circle + * @param {SVGElement} element Element to parse + * @param {Function} [callback] Options callback invoked after parsing is finished + * @param {Object} [options] Options object + * @throws {Error} If value of `r` attribute is missing or invalid + */ + fabric.Circle.fromElement = function(element, callback) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), + if (!isValidRadius(parsedAttributes)) { + throw new Error('value of `r` attribute is required and can not be negative'); + } - /** - * Constructor - * @param {Object} [options] Options object - * @return {fabric.Ellipse} thisArg - */ - initialize: function(options) { - this.callSuper('initialize', options); - this.set('rx', options && options.rx || 0); - this.set('ry', options && options.ry || 0); - }, + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; + callback(new fabric.Circle(parsedAttributes)); + }; - /** - * @private - * @param {String} key - * @param {*} value - * @return {fabric.Ellipse} thisArg - */ - _set: function(key, value) { - this.callSuper('_set', key, value); - switch (key) { + /** + * @private + */ + function isValidRadius(attributes) { + return (('radius' in attributes) && (attributes.radius >= 0)); + } + /* _FROM_SVG_END_ */ - case 'rx': - this.rx = value; - this.set('width', value * 2); - break; + /** + * Returns {@link fabric.Circle} instance from an object representation + * @static + * @memberOf fabric.Circle + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + * @return {void} + */ + fabric.Circle.fromObject = function(object, callback) { + fabric.Object._fromObject('Circle', object, callback); + }; - case 'ry': - this.ry = value; - this.set('height', value * 2); - break; +})(typeof exports !== 'undefined' ? exports : this); - } - return this; - }, - /** - * Returns horizontal radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRx: function() { - return this.get('rx') * this.get('scaleX'); - }, +(function(global) { - /** - * Returns Vertical radius of an object (according to how an object is scaled) - * @return {Number} - */ - getRy: function() { - return this.get('ry') * this.get('scaleY'); - }, + 'use strict'; - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + var fabric = global.fabric || (global.fabric = { }); - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ + if (fabric.Triangle) { + fabric.warn('fabric.Triangle is already defined'); + return; + } - /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render on - */ - _render: function(ctx) { - ctx.beginPath(); - ctx.save(); - ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); - ctx.arc( - 0, - 0, - this.rx, - 0, - piBy2, - false); - ctx.restore(); - this._renderPaintInOrder(ctx); - }, - }); + /** + * Triangle class + * @class fabric.Triangle + * @extends fabric.Object + * @return {fabric.Triangle} thisArg + * @see {@link fabric.Triangle#initialize} for constructor definition + */ + fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) - * @static - * @memberOf fabric.Ellipse - * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement + * Type of an object + * @type String + * @default */ - fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); + type: 'triangle', /** - * Returns {@link fabric.Ellipse} instance from an SVG element - * @static - * @memberOf fabric.Ellipse - * @param {SVGElement} element Element to parse - * @param {Function} [callback] Options callback invoked after parsing is finished - * @return {fabric.Ellipse} + * Width is set to 100 to compensate the old initialize code that was setting it to 100 + * @type Number + * @default */ - fabric.Ellipse.fromElement = function(element, callback) { + width: 100, - var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); - - parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; - parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; - callback(new fabric.Ellipse(parsedAttributes)); - }; - /* _FROM_SVG_END_ */ + /** + * Height is set to 100 to compensate the old initialize code that was setting it to 100 + * @type Number + * @default + */ + height: 100, /** - * Returns {@link fabric.Ellipse} instance from an object representation - * @static - * @memberOf fabric.Ellipse - * @param {Object} object Object to create an instance from - * @returns {Promise} + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ - fabric.Ellipse.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Ellipse, object); - }; + _render: function(ctx) { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2; - })(typeof exports !== 'undefined' ? exports : window); + ctx.beginPath(); + ctx.moveTo(-widthBy2, heightBy2); + ctx.lineTo(0, -heightBy2); + ctx.lineTo(widthBy2, heightBy2); + ctx.closePath(); - (function(global) { - var fabric = global.fabric || (global.fabric = { }); + this._renderPaintInOrder(ctx); + }, + /* _TO_SVG_START_ */ /** - * Rectangle class - * @class fabric.Rect - * @extends fabric.Object - * @return {fabric.Rect} thisArg - * @see {@link fabric.Rect#initialize} for constructor definition + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { - - /** - * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged}) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), + _toSVG: function() { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2, + points = [ + -widthBy2 + ' ' + heightBy2, + '0 ' + -heightBy2, + widthBy2 + ' ' + heightBy2 + ].join(','); + return [ + '' + ]; + }, + /* _TO_SVG_END_ */ + }); - /** - * Type of an object - * @type String - * @default - */ - type: 'rect', + /** + * Returns {@link fabric.Triangle} instance from an object representation + * @static + * @memberOf fabric.Triangle + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + */ + fabric.Triangle.fromObject = function(object, callback) { + return fabric.Object._fromObject('Triangle', object, callback); + }; - /** - * Horizontal border radius - * @type Number - * @default - */ - rx: 0, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Vertical border radius - * @type Number - * @default - */ - ry: 0, - cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), +(function(global) { - /** - * Constructor - * @param {Object} [options] Options object - * @return {Object} thisArg - */ - initialize: function(options) { - this.callSuper('initialize', options); - this._initRxRy(); - }, + 'use strict'; - /** - * Initializes rx/ry attributes - * @private - */ - _initRxRy: function() { - if (this.rx && !this.ry) { - this.ry = this.rx; - } - else if (this.ry && !this.rx) { - this.rx = this.ry; - } - }, + var fabric = global.fabric || (global.fabric = { }), + piBy2 = Math.PI * 2; - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - - // 1x1 case (used in spray brush) optimization was removed because - // with caching and higher zoom level this makes more damage than help - - var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, - ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, - w = this.width, - h = this.height, - x = -this.width / 2, - y = -this.height / 2, - isRounded = rx !== 0 || ry !== 0, - /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ - k = 1 - 0.5522847498; - ctx.beginPath(); + if (fabric.Ellipse) { + fabric.warn('fabric.Ellipse is already defined.'); + return; + } - ctx.moveTo(x + rx, y); + /** + * Ellipse class + * @class fabric.Ellipse + * @extends fabric.Object + * @return {fabric.Ellipse} thisArg + * @see {@link fabric.Ellipse#initialize} for constructor definition + */ + fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { - ctx.lineTo(x + w - rx, y); - isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); + /** + * Type of an object + * @type String + * @default + */ + type: 'ellipse', - ctx.lineTo(x + w, y + h - ry); - isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); + /** + * Horizontal radius + * @type Number + * @default + */ + rx: 0, - ctx.lineTo(x + rx, y + h); - isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); + /** + * Vertical radius + * @type Number + * @default + */ + ry: 0, - ctx.lineTo(x, y + ry); - isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), - ctx.closePath(); + /** + * Constructor + * @param {Object} [options] Options object + * @return {fabric.Ellipse} thisArg + */ + initialize: function(options) { + this.callSuper('initialize', options); + this.set('rx', options && options.rx || 0); + this.set('ry', options && options.ry || 0); + }, - this._renderPaintInOrder(ctx); - }, + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Ellipse} thisArg + */ + _set: function(key, value) { + this.callSuper('_set', key, value); + switch (key) { - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); - }, + case 'rx': + this.rx = value; + this.set('width', value * 2); + break; - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var x = -this.width / 2, y = -this.height / 2; - return [ - '\n' - ]; - }, - /* _TO_SVG_END_ */ - }); + case 'ry': + this.ry = value; + this.set('height', value * 2); + break; + + } + return this; + }, - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) - * @static - * @memberOf fabric.Rect - * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement + * Returns horizontal radius of an object (according to how an object is scaled) + * @return {Number} */ - fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); + getRx: function() { + return this.get('rx') * this.get('scaleX'); + }, /** - * Returns {@link fabric.Rect} instance from an SVG element - * @static - * @memberOf fabric.Rect - * @param {SVGElement} element Element to parse - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object + * Returns Vertical radius of an object (according to how an object is scaled) + * @return {Number} */ - fabric.Rect.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); - } - options = options || { }; - - var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); - parsedAttributes.left = parsedAttributes.left || 0; - parsedAttributes.top = parsedAttributes.top || 0; - parsedAttributes.height = parsedAttributes.height || 0; - parsedAttributes.width = parsedAttributes.width || 0; - var rect = new fabric.Rect(Object.assign({}, options, parsedAttributes)); - rect.visible = rect.visible && rect.width > 0 && rect.height > 0; - callback(rect); - }; - /* _FROM_SVG_END_ */ + getRy: function() { + return this.get('ry') * this.get('scaleY'); + }, /** - * Returns {@link fabric.Rect} instance from an object representation - * @static - * @memberOf fabric.Rect - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ - fabric.Rect.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Rect, object); - }; - - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - min = fabric.util.array.min, - max = fabric.util.array.max, - toFixed = fabric.util.toFixed, - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, + /* _TO_SVG_START_ */ /** - * Polyline class - * @class fabric.Polyline - * @extends fabric.Object - * @see {@link fabric.Polyline#initialize} for constructor definition + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { + _toSVG: function() { + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ - /** - * Type of an object - * @type String - * @default - */ - type: 'polyline', + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render on + */ + _render: function(ctx) { + ctx.beginPath(); + ctx.save(); + ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); + ctx.arc( + 0, + 0, + this.rx, + 0, + piBy2, + false); + ctx.restore(); + this._renderPaintInOrder(ctx); + }, + }); - /** - * Points array - * @type Array - * @default - */ - points: null, + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) + * @static + * @memberOf fabric.Ellipse + * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement + */ + fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); - /** - * WARNING: Feature in progress - * Calculate the exact bounding box taking in account strokeWidth on acute angles - * this will be turned to true by default on fabric 6.0 - * maybe will be left in as an optimization since calculations may be slow - * @deprecated - * @type Boolean - * @default false - */ - exactBoundingBox: false, + /** + * Returns {@link fabric.Ellipse} instance from an SVG element + * @static + * @memberOf fabric.Ellipse + * @param {SVGElement} element Element to parse + * @param {Function} [callback] Options callback invoked after parsing is finished + * @return {fabric.Ellipse} + */ + fabric.Ellipse.fromElement = function(element, callback) { - cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), + var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); - /** - * Constructor - * @param {Array} points Array of points (where each point is an object with x and y) - * @param {Object} [options] Options object - * @return {fabric.Polyline} thisArg - * @example - * var poly = new fabric.Polyline([ - * { x: 10, y: 10 }, - * { x: 50, y: 30 }, - * { x: 40, y: 70 }, - * { x: 60, y: 50 }, - * { x: 100, y: 150 }, - * { x: 40, y: 100 } - * ], { - * stroke: 'red', - * left: 100, - * top: 100 - * }); - */ - initialize: function(points, options) { - options = options || {}; - this.points = points || []; - this.callSuper('initialize', options); - this._setPositionDimensions(options); - }, + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; + callback(new fabric.Ellipse(parsedAttributes)); + }; + /* _FROM_SVG_END_ */ - /** - * @private - */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this, true); - }, + /** + * Returns {@link fabric.Ellipse} instance from an object representation + * @static + * @memberOf fabric.Ellipse + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + * @return {void} + */ + fabric.Ellipse.fromObject = function(object, callback) { + fabric.Object._fromObject('Ellipse', object, callback); + }; - _setPositionDimensions: function(options) { - options || (options = {}); - var calcDim = this._calcDimensions(options), correctLeftTop, - correctSize = this.exactBoundingBox ? this.strokeWidth : 0; - this.width = calcDim.width - correctSize; - this.height = calcDim.height - correctSize; - if (!options.fromSVG) { - correctLeftTop = this.translateToGivenOrigin( - { - // this looks bad, but is one way to keep it optional for now. - x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, - y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 - }, - 'left', - 'top', - this.originX, - this.originY - ); - } - if (typeof options.left === 'undefined') { - this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; - } - if (typeof options.top === 'undefined') { - this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; - } - this.pathOffset = { - x: calcDim.left + this.width / 2 + correctSize / 2, - y: calcDim.top + this.height / 2 + correctSize / 2 - }; - }, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Calculate the polygon min and max point from points array, - * returning an object with left, top, width, height to measure the - * polygon size - * @return {Object} object.left X coordinate of the polygon leftmost point - * @return {Object} object.top Y coordinate of the polygon topmost point - * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point - * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point - * @private - */ - _calcDimensions: function() { - var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, - minX = min(points, 'x') || 0, - minY = min(points, 'y') || 0, - maxX = max(points, 'x') || 0, - maxY = max(points, 'y') || 0, - width = (maxX - minX), - height = (maxY - minY); +(function(global) { - return { - left: minX, - top: minY, - width: width, - height: height, - }; - }, + 'use strict'; - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - points: this.points.concat() - }); - }, + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend; - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - - for (var i = 0, len = this.points.length; i < len; i++) { - points.push( - toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', - toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' - ); - } - return [ - '<' + this.type + ' ', 'COMMON_PARTS', - 'points="', points.join(''), - '" />\n' - ]; - }, - /* _TO_SVG_END_ */ + if (fabric.Rect) { + fabric.warn('fabric.Rect is already defined'); + return; + } + /** + * Rectangle class + * @class fabric.Rect + * @extends fabric.Object + * @return {fabric.Rect} thisArg + * @see {@link fabric.Rect#initialize} for constructor definition + */ + fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - commonRender: function(ctx) { - var point, len = this.points.length, - x = this.pathOffset.x, - y = this.pathOffset.y; - - if (!len || isNaN(this.points[len - 1].y)) { - // do not draw if no points or odd points - // NaN comes from parseFloat of a empty string in parser - return false; - } - ctx.beginPath(); - ctx.moveTo(this.points[0].x - x, this.points[0].y - y); - for (var i = 0; i < len; i++) { - point = this.points[i]; - ctx.lineTo(point.x - x, point.y - y); - } - return true; - }, + /** + * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; - } - this._renderPaintInOrder(ctx); - }, + /** + * Type of an object + * @type String + * @default + */ + type: 'rect', - /** - * Returns complexity of an instance - * @return {Number} complexity of this instance - */ - complexity: function() { - return this.get('points').length; - } - }); + /** + * Horizontal border radius + * @type Number + * @default + */ + rx: 0, - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement}) - * @static - * @memberOf fabric.Polyline - * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement + * Vertical border radius + * @type Number + * @default */ - fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); + ry: 0, + + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), /** - * Returns fabric.Polyline instance from an SVG element - * @static - * @memberOf fabric.Polyline - * @param {SVGElement} element Element to parser - * @param {Function} callback callback function invoked after parsing + * Constructor * @param {Object} [options] Options object + * @return {Object} thisArg */ - fabric.Polyline.fromElementGenerator = function(_class) { - return function(element, callback, options) { - if (!element) { - return callback(null); - } - options || (options = { }); + initialize: function(options) { + this.callSuper('initialize', options); + this._initRxRy(); + }, - var points = fabric.parsePointsAttribute(element.getAttribute('points')), - parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric[_class](points, extend(parsedAttributes, options))); - }; - }; + /** + * Initializes rx/ry attributes + * @private + */ + _initRxRy: function() { + if (this.rx && !this.ry) { + this.ry = this.rx; + } + else if (this.ry && !this.rx) { + this.rx = this.ry; + } + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + + // 1x1 case (used in spray brush) optimization was removed because + // with caching and higher zoom level this makes more damage than help + + var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, + ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, + w = this.width, + h = this.height, + x = -this.width / 2, + y = -this.height / 2, + isRounded = rx !== 0 || ry !== 0, + /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ + k = 1 - 0.5522847498; + ctx.beginPath(); - fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); + ctx.moveTo(x + rx, y); - /* _FROM_SVG_END_ */ + ctx.lineTo(x + w - rx, y); + isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); + + ctx.lineTo(x + w, y + h - ry); + isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); + + ctx.lineTo(x + rx, y + h); + isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); + + ctx.lineTo(x, y + ry); + isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); + + ctx.closePath(); + + this._renderPaintInOrder(ctx); + }, /** - * Returns fabric.Polyline instance from an object representation - * @static - * @memberOf fabric.Polyline - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ - fabric.Polyline.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Polyline, object, 'points'); - }; - - })(typeof exports !== 'undefined' ? exports : window); + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, - (function(global) { - var fabric = global.fabric || (global.fabric = {}), - projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; + /* _TO_SVG_START_ */ /** - * Polygon class - * @class fabric.Polygon - * @extends fabric.Polyline - * @see {@link fabric.Polygon#initialize} for constructor definition + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { + _toSVG: function() { + var x = -this.width / 2, y = -this.height / 2; + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); - /** - * Type of an object - * @type String - * @default - */ - type: 'polygon', + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) + * @static + * @memberOf fabric.Rect + * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement + */ + fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); - /** - * @private - */ - _projectStrokeOnPoints: function () { - return projectStrokeOnPoints(this.points, this); - }, + /** + * Returns {@link fabric.Rect} instance from an SVG element + * @static + * @memberOf fabric.Rect + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Rect.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } + options = options || { }; + + var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); + parsedAttributes.left = parsedAttributes.left || 0; + parsedAttributes.top = parsedAttributes.top || 0; + parsedAttributes.height = parsedAttributes.height || 0; + parsedAttributes.width = parsedAttributes.width || 0; + var rect = new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes)); + rect.visible = rect.visible && rect.width > 0 && rect.height > 0; + callback(rect); + }; + /* _FROM_SVG_END_ */ - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - if (!this.commonRender(ctx)) { - return; - } - ctx.closePath(); - this._renderPaintInOrder(ctx); - }, + /** + * Returns {@link fabric.Rect} instance from an object representation + * @static + * @memberOf fabric.Rect + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Rect instance is created + */ + fabric.Rect.fromObject = function(object, callback) { + return fabric.Object._fromObject('Rect', object, callback); + }; - }); +})(typeof exports !== 'undefined' ? exports : this); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + min = fabric.util.array.min, + max = fabric.util.array.max, + toFixed = fabric.util.toFixed, + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; + + if (fabric.Polyline) { + fabric.warn('fabric.Polyline is already defined'); + return; + } + + /** + * Polyline class + * @class fabric.Polyline + * @extends fabric.Object + * @see {@link fabric.Polyline#initialize} for constructor definition + */ + fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) - * @static - * @memberOf fabric.Polygon - * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement + * Type of an object + * @type String + * @default */ - fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); + type: 'polyline', /** - * Returns {@link fabric.Polygon} instance from an SVG element - * @static - * @memberOf fabric.Polygon - * @param {SVGElement} element Element to parse - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object + * Points array + * @type Array + * @default */ - fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); - /* _FROM_SVG_END_ */ + points: null, /** - * Returns fabric.Polygon instance from an object representation - * @static - * @memberOf fabric.Polygon - * @param {Object} object Object to create an instance from - * @returns {Promise} + * WARNING: Feature in progress + * Calculate the exact bounding box taking in account strokeWidth on acute angles + * this will be turned to true by default on fabric 6.0 + * maybe will be left in as an optimization since calculations may be slow + * @deprecated + * @type Boolean + * @default false */ - fabric.Polygon.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Polygon, object, 'points'); - }; + exactBoundingBox: false, - })(typeof exports !== 'undefined' ? exports : window); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - min = fabric.util.array.min, - max = fabric.util.array.max, - extend = fabric.util.object.extend, - clone = fabric.util.object.clone, - toFixed = fabric.util.toFixed; + /** + * Constructor + * @param {Array} points Array of points (where each point is an object with x and y) + * @param {Object} [options] Options object + * @return {fabric.Polyline} thisArg + * @example + * var poly = new fabric.Polyline([ + * { x: 10, y: 10 }, + * { x: 50, y: 30 }, + * { x: 40, y: 70 }, + * { x: 60, y: 50 }, + * { x: 100, y: 150 }, + * { x: 40, y: 100 } + * ], { + * stroke: 'red', + * left: 100, + * top: 100 + * }); + */ + initialize: function(points, options) { + options = options || {}; + this.points = points || []; + this.callSuper('initialize', options); + this._setPositionDimensions(options); + }, /** - * Path class - * @class fabric.Path - * @extends fabric.Object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup} - * @see {@link fabric.Path#initialize} for constructor definition + * @private */ - fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this, true); + }, + + _setPositionDimensions: function(options) { + var calcDim = this._calcDimensions(options), correctLeftTop, + correctSize = this.exactBoundingBox ? this.strokeWidth : 0; + this.width = calcDim.width - correctSize; + this.height = calcDim.height - correctSize; + if (!options.fromSVG) { + correctLeftTop = this.translateToGivenOrigin( + { + // this looks bad, but is one way to keep it optional for now. + x: calcDim.left - this.strokeWidth / 2 + correctSize / 2, + y: calcDim.top - this.strokeWidth / 2 + correctSize / 2 + }, + 'left', + 'top', + this.originX, + this.originY + ); + } + if (typeof options.left === 'undefined') { + this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; + } + if (typeof options.top === 'undefined') { + this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; + } + this.pathOffset = { + x: calcDim.left + this.width / 2 + correctSize / 2, + y: calcDim.top + this.height / 2 + correctSize / 2 + }; + }, - /** - * Type of an object - * @type String - * @default - */ - type: 'path', + /** + * Calculate the polygon min and max point from points array, + * returning an object with left, top, width, height to measure the + * polygon size + * @return {Object} object.left X coordinate of the polygon leftmost point + * @return {Object} object.top Y coordinate of the polygon topmost point + * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point + * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point + * @private + */ + _calcDimensions: function() { - /** - * Array of path points - * @type Array - * @default - */ - path: null, + var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points, + minX = min(points, 'x') || 0, + minY = min(points, 'y') || 0, + maxX = max(points, 'x') || 0, + maxY = max(points, 'y') || 0, + width = (maxX - minX), + height = (maxY - minY); - cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), + return { + left: minX, + top: minY, + width: width, + height: height, + }; + }, - stateProperties: fabric.Object.prototype.stateProperties.concat('path'), + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + points: this.points.concat() + }); + }, - /** - * Constructor - * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) - * @param {Object} [options] Options object - * @return {fabric.Path} thisArg - */ - initialize: function (path, options) { - options = clone(options || {}); - delete options.path; - this.callSuper('initialize', options); - this._setPath(path || [], options); - }, + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - /** - * @private - * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) - * @param {Object} [options] Options object - */ - _setPath: function (path, options) { - this.path = fabric.util.makePathSimpler( - Array.isArray(path) ? path : fabric.util.parsePath(path) + for (var i = 0, len = this.points.length; i < len; i++) { + points.push( + toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', + toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' ); + } + return [ + '<' + this.type + ' ', 'COMMON_PARTS', + 'points="', points.join(''), + '" />\n' + ]; + }, + /* _TO_SVG_END_ */ - fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); - }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render path on - */ - _renderPathCommands: function(ctx) { - var current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - controlX = 0, // current control point x - controlY = 0, // current control point y - l = -this.pathOffset.x, - t = -this.pathOffset.y; + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + commonRender: function(ctx) { + var point, len = this.points.length, + x = this.pathOffset.x, + y = this.pathOffset.y; - ctx.beginPath(); + if (!len || isNaN(this.points[len - 1].y)) { + // do not draw if no points or odd points + // NaN comes from parseFloat of a empty string in parser + return false; + } + ctx.beginPath(); + ctx.moveTo(this.points[0].x - x, this.points[0].y - y); + for (var i = 0; i < len; i++) { + point = this.points[i]; + ctx.lineTo(point.x - x, point.y - y); + } + return true; + }, - for (var i = 0, len = this.path.length; i < len; ++i) { - - current = this.path[i]; - - switch (current[0]) { // first letter - - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - ctx.lineTo(x + l, y + t); - break; - - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - ctx.moveTo(x + l, y + t); - break; - - case 'C': // bezierCurveTo, absolute - x = current[5]; - y = current[6]; - controlX = current[3]; - controlY = current[4]; - ctx.bezierCurveTo( - current[1] + l, - current[2] + t, - controlX + l, - controlY + t, - x + l, - y + t - ); - break; - - case 'Q': // quadraticCurveTo, absolute - ctx.quadraticCurveTo( - current[1] + l, - current[2] + t, - current[3] + l, - current[4] + t - ); - x = current[3]; - y = current[4]; - controlX = current[1]; - controlY = current[2]; - break; - - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - ctx.closePath(); - break; - } - } - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + this._renderPaintInOrder(ctx); + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx context to render path on - */ - _render: function(ctx) { - this._renderPathCommands(ctx); - this._renderPaintInOrder(ctx); - }, + /** + * Returns complexity of an instance + * @return {Number} complexity of this instance + */ + complexity: function() { + return this.get('points').length; + } + }); - /** - * Returns string representation of an instance - * @return {String} string representation of an instance - */ - toString: function() { - return '#'; - }, + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement}) + * @static + * @memberOf fabric.Polyline + * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement + */ + fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return extend(this.callSuper('toObject', propertiesToInclude), { - path: this.path.map(function(item) { return item.slice(); }), - }); - }, + /** + * Returns fabric.Polyline instance from an SVG element + * @static + * @memberOf fabric.Polyline + * @param {SVGElement} element Element to parser + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Polyline.fromElementGenerator = function(_class) { + return function(element, callback, options) { + if (!element) { + return callback(null); + } + options || (options = { }); - /** - * Returns dataless object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toDatalessObject: function(propertiesToInclude) { - var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); - if (o.sourcePath) { - delete o.path; - } - return o; - }, + var points = fabric.parsePointsAttribute(element.getAttribute('points')), + parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric[_class](points, extend(parsedAttributes, options))); + }; + }; - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var path = fabric.util.joinPath(this.path); - return [ - '\n' - ]; - }, + fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); - _getOffsetTransform: function() { - var digits = fabric.Object.NUM_FRACTION_DIGITS; - return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + - toFixed(-this.pathOffset.y, digits) + ')'; - }, + /* _FROM_SVG_END_ */ - /** - * Returns svg clipPath representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toClipPathSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return '\t' + this._createBaseClipPathSVGMarkup( - this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } - ); - }, + /** + * Returns fabric.Polyline instance from an object representation + * @static + * @memberOf fabric.Polyline + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created + */ + fabric.Polyline.fromObject = function(object, callback) { + return fabric.Object._fromObject('Polyline', object, callback, 'points'); + }; - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toSVG: function(reviver) { - var additionalTransform = this._getOffsetTransform(); - return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); - }, - /* _TO_SVG_END_ */ +})(typeof exports !== 'undefined' ? exports : this); - /** - * Returns number representation of an instance complexity - * @return {Number} complexity of this instance - */ - complexity: function() { - return this.path.length; - }, - /** - * @private - */ - _calcDimensions: function() { - - var aX = [], - aY = [], - current, // current instruction - subpathStartX = 0, - subpathStartY = 0, - x = 0, // current x - y = 0, // current y - bounds; - - for (var i = 0, len = this.path.length; i < len; ++i) { - - current = this.path[i]; - - switch (current[0]) { // first letter - - case 'L': // lineto, absolute - x = current[1]; - y = current[2]; - bounds = []; - break; - - case 'M': // moveTo, absolute - x = current[1]; - y = current[2]; - subpathStartX = x; - subpathStartY = y; - bounds = []; - break; - - case 'C': // bezierCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[3], - current[4], - current[5], - current[6] - ); - x = current[5]; - y = current[6]; - break; - - case 'Q': // quadraticCurveTo, absolute - bounds = fabric.util.getBoundsOfCurve(x, y, - current[1], - current[2], - current[1], - current[2], - current[3], - current[4] - ); - x = current[3]; - y = current[4]; - break; - - case 'z': - case 'Z': - x = subpathStartX; - y = subpathStartY; - break; - } - bounds.forEach(function (point) { - aX.push(point.x); - aY.push(point.y); - }); - aX.push(x); - aY.push(y); - } +(function(global) { - var minX = min(aX) || 0, - minY = min(aY) || 0, - maxX = max(aX) || 0, - maxY = max(aY) || 0, - deltaX = maxX - minX, - deltaY = maxY - minY; + 'use strict'; - return { - left: minX, - top: minY, - width: deltaX, - height: deltaY - }; - } - }); + var fabric = global.fabric || (global.fabric = {}), + projectStrokeOnPoints = fabric.util.projectStrokeOnPoints; - /** - * Creates an instance of fabric.Path from an object - * @static - * @memberOf fabric.Path - * @param {Object} object - * @returns {Promise} - */ - fabric.Path.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Path, object, 'path'); - }; + if (fabric.Polygon) { + fabric.warn('fabric.Polygon is already defined'); + return; + } + + /** + * Polygon class + * @class fabric.Polygon + * @extends fabric.Polyline + * @see {@link fabric.Polygon#initialize} for constructor definition + */ + fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) - * @static - * @memberOf fabric.Path - * @see http://www.w3.org/TR/SVG/paths.html#PathElement + * Type of an object + * @type String + * @default */ - fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); + type: 'polygon', /** - * Creates an instance of fabric.Path from an SVG element - * @static - * @memberOf fabric.Path - * @param {SVGElement} element to parse - * @param {Function} callback Callback to invoke when an fabric.Path instance is created - * @param {Object} [options] Options object - * @param {Function} [callback] Options callback invoked after parsing is finished + * @private */ - fabric.Path.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); - parsedAttributes.fromSVG = true; - callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); - }; - /* _FROM_SVG_END_ */ + _projectStrokeOnPoints: function () { + return projectStrokeOnPoints(this.points, this); + }, - })(typeof exports !== 'undefined' ? exports : window); - - (function (global) { - var fabric = global.fabric || (global.fabric = {}), - multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, - invertTransform = fabric.util.invertTransform, - transformPoint = fabric.util.transformPoint, - applyTransformToObject = fabric.util.applyTransformToObject, - degreesToRadians = fabric.util.degreesToRadians, - clone = fabric.util.object.clone; /** - * Group class - * @class fabric.Group - * @extends fabric.Object - * @mixes fabric.Collection - * @fires layout once layout completes - * @see {@link fabric.Group#initialize} for constructor definition + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ - fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + ctx.closePath(); + this._renderPaintInOrder(ctx); + }, - /** - * Type of an object - * @type string - * @default - */ - type: 'group', + }); - /** - * Specifies the **layout strategy** for instance - * Used by `getLayoutStrategyResult` to calculate layout - * `fit-content`, `fit-content-lazy`, `fixed`, `clip-path` are supported out of the box - * @type string - * @default - */ - layout: 'fit-content', + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) + * @static + * @memberOf fabric.Polygon + * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement + */ + fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); - /** - * Width of stroke - * @type Number - */ - strokeWidth: 0, + /** + * Returns {@link fabric.Polygon} instance from an SVG element + * @static + * @memberOf fabric.Polygon + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); + /* _FROM_SVG_END_ */ - /** - * List of properties to consider when checking if state - * of an object is changed (fabric.Object#hasStateChanged) - * as well as for history (undo/redo) purposes - * @type string[] - */ - stateProperties: fabric.Object.prototype.stateProperties.concat('layout'), + /** + * Returns fabric.Polygon instance from an object representation + * @static + * @memberOf fabric.Polygon + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created + * @return {void} + */ + fabric.Polygon.fromObject = function(object, callback) { + fabric.Object._fromObject('Polygon', object, callback, 'points'); + }; - /** - * Used to optimize performance - * set to `false` if you don't need contained objects to be targets of events - * @default - * @type boolean - */ - subTargetCheck: false, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Used to allow targeting of object inside groups. - * set to true if you want to select an object inside a group.\ - * **REQUIRES** `subTargetCheck` set to true - * @default - * @type boolean - */ - interactive: false, - /** - * Used internally to optimize performance - * Once an object is selected, instance is rendered without the selected object. - * This way instance is cached only once for the entire interaction with the selected object. - * @private - */ - _activeObjects: undefined, +(function(global) { - /** - * Constructor - * - * @param {fabric.Object[]} [objects] instance objects - * @param {Object} [options] Options object - * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane - * @return {fabric.Group} thisArg - */ - initialize: function (objects, options, objectsRelativeToGroup) { - this._objects = objects || []; - this._activeObjects = []; - this.__objectMonitor = this.__objectMonitor.bind(this); - this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true); - this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false); - this._firstLayoutDone = false; - // setting angle, skewX, skewY must occur after initial layout - this.callSuper('initialize', Object.assign({}, options, { angle: 0, skewX: 0, skewY: 0 })); - this.forEachObject(function (object) { - this.enterGroup(object, false); - }, this); - this._applyLayoutStrategy({ - type: 'initialization', - options: options, - objectsRelativeToGroup: objectsRelativeToGroup - }); - }, + 'use strict'; - /** - * @private - * @param {string} key - * @param {*} value - */ - _set: function (key, value) { - var prev = this[key]; - this.callSuper('_set', key, value); - if (key === 'canvas' && prev !== value) { - this.forEachObject(function (object) { - object._set(key, value); - }); - } - if (key === 'layout' && prev !== value) { - this._applyLayoutStrategy({ type: 'layout_change', layout: value, prevLayout: prev }); - } - if (key === 'interactive') { - this.forEachObject(this._watchObject.bind(this, value)); - } - return this; - }, + var fabric = global.fabric || (global.fabric = { }), + min = fabric.util.array.min, + max = fabric.util.array.max, + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + _toString = Object.prototype.toString, + toFixed = fabric.util.toFixed; + + if (fabric.Path) { + fabric.warn('fabric.Path is already defined'); + return; + } - /** - * @private - */ - _shouldSetNestedCoords: function () { - return this.subTargetCheck; - }, + /** + * Path class + * @class fabric.Path + * @extends fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup} + * @see {@link fabric.Path#initialize} for constructor definition + */ + fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { - /** - * Override this method to enhance performance (for groups with a lot of objects). - * If Overriding, be sure not pass illegal objects to group - it will break your app. - * @private - */ - _filterObjectsBeforeEnteringGroup: function (objects) { - return objects.filter(function (object, index, array) { - // can enter AND is the first occurrence of the object in the passed args (to prevent adding duplicates) - return this.canEnterGroup(object) && array.indexOf(object) === index; - }, this); - }, + /** + * Type of an object + * @type String + * @default + */ + type: 'path', - /** - * Add objects - * @param {...fabric.Object} objects - */ - add: function () { - var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.from(arguments)); - fabric.Collection.add.call(this, allowedObjects, this._onObjectAdded); - this._onAfterObjectsChange('added', allowedObjects); - }, + /** + * Array of path points + * @type Array + * @default + */ + path: null, - /** - * Inserts an object into collection at specified index - * @param {fabric.Object | fabric.Object[]} objects Object to insert - * @param {Number} index Index to insert object at - */ - insertAt: function (objects, index) { - var allowedObjects = this._filterObjectsBeforeEnteringGroup(Array.isArray(objects) ? objects : [objects]); - fabric.Collection.insertAt.call(this, allowedObjects, index, this._onObjectAdded); - this._onAfterObjectsChange('added', allowedObjects); - }, + cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), - /** - * Remove objects - * @param {...fabric.Object} objects - * @returns {fabric.Object[]} removed objects - */ - remove: function () { - var removed = fabric.Collection.remove.call(this, arguments, this._onObjectRemoved); - this._onAfterObjectsChange('removed', removed); - return removed; - }, + stateProperties: fabric.Object.prototype.stateProperties.concat('path'), - /** - * Remove all objects - * @returns {fabric.Object[]} removed objects - */ - removeAll: function () { - this._activeObjects = []; - return this.remove.apply(this, this._objects.slice()); - }, + /** + * Constructor + * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) + * @param {Object} [options] Options object + * @return {fabric.Path} thisArg + */ + initialize: function (path, options) { + options = clone(options || {}); + delete options.path; + this.callSuper('initialize', options); + this._setPath(path || [], options); + }, - /** - * invalidates layout on object modified - * @private - */ - __objectMonitor: function (opt) { - this._applyLayoutStrategy(Object.assign({}, opt, { - type: 'object_modified' - })); - this._set('dirty', true); - }, + /** + * @private + * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) + * @param {Object} [options] Options object + */ + _setPath: function (path, options) { + var fromArray = _toString.call(path) === '[object Array]'; - /** - * keeps track of the selected objects - * @private - */ - __objectSelectionMonitor: function (selected, opt) { - var object = opt.target; - if (selected) { - this._activeObjects.push(object); - this._set('dirty', true); - } - else if (this._activeObjects.length > 0) { - var index = this._activeObjects.indexOf(object); - if (index > -1) { - this._activeObjects.splice(index, 1); - this._set('dirty', true); - } - } - }, + this.path = fabric.util.makePathSimpler( + fromArray ? path : fabric.util.parsePath(path) + ); - /** - * @private - * @param {boolean} watch - * @param {fabric.Object} object - */ - _watchObject: function (watch, object) { - var directive = watch ? 'on' : 'off'; - // make sure we listen only once - watch && this._watchObject(false, object); - object[directive]('changed', this.__objectMonitor); - object[directive]('modified', this.__objectMonitor); - object[directive]('selected', this.__objectSelectionTracker); - object[directive]('deselected', this.__objectSelectionDisposer); - }, + fabric.Polyline.prototype._setPositionDimensions.call(this, options || {}); + }, - /** - * Checks if object can enter group and logs relevant warnings - * @private - * @param {fabric.Object} object - * @returns - */ - canEnterGroup: function (object) { - if (object === this || this.isDescendantOf(object)) { - // prevent circular object tree - /* _DEV_MODE_START_ */ - console.error('fabric.Group: circular object trees are not supported, this call has no effect'); - /* _DEV_MODE_END_ */ - return false; - } - else if (this._objects.indexOf(object) !== -1) { - // is already in the objects array - /* _DEV_MODE_START_ */ - console.error('fabric.Group: duplicate objects are not supported inside group, this call has no effect'); - /* _DEV_MODE_END_ */ - return false; - } - return true; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render path on + */ + _renderPathCommands: function(ctx) { + var current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + controlX = 0, // current control point x + controlY = 0, // current control point y + l = -this.pathOffset.x, + t = -this.pathOffset.y; - /** - * @private - * @param {fabric.Object} object - * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane - * @returns {boolean} true if object entered group - */ - enterGroup: function (object, removeParentTransform) { - if (object.group) { - object.group.remove(object); - } - this._enterGroup(object, removeParentTransform); - return true; - }, + ctx.beginPath(); - /** - * @private - * @param {fabric.Object} object - * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane - */ - _enterGroup: function (object, removeParentTransform) { - if (removeParentTransform) { - // can this be converted to utils (sendObjectToPlane)? - applyTransformToObject( - object, - multiplyTransformMatrices( - invertTransform(this.calcTransformMatrix()), - object.calcTransformMatrix() - ) - ); - } - this._shouldSetNestedCoords() && object.setCoords(); - object._set('group', this); - object._set('canvas', this.canvas); - this.interactive && this._watchObject(true, object); - var activeObject = this.canvas && this.canvas.getActiveObject && this.canvas.getActiveObject(); - // if we are adding the activeObject in a group - if (activeObject && (activeObject === object || object.isDescendantOf(activeObject))) { - this._activeObjects.push(object); - } - }, + for (var i = 0, len = this.path.length; i < len; ++i) { - /** - * @private - * @param {fabric.Object} object - * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it - */ - exitGroup: function (object, removeParentTransform) { - this._exitGroup(object, removeParentTransform); - object._set('canvas', undefined); - }, + current = this.path[i]; - /** - * @private - * @param {fabric.Object} object - * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it - */ - _exitGroup: function (object, removeParentTransform) { - object._set('group', undefined); - if (!removeParentTransform) { - applyTransformToObject( - object, - multiplyTransformMatrices( - this.calcTransformMatrix(), - object.calcTransformMatrix() - ) - ); - object.setCoords(); - } - this._watchObject(false, object); - var index = this._activeObjects.length > 0 ? this._activeObjects.indexOf(object) : -1; - if (index > -1) { - this._activeObjects.splice(index, 1); - } - }, + switch (current[0]) { // first letter - /** - * @private - * @param {'added'|'removed'} type - * @param {fabric.Object[]} targets - */ - _onAfterObjectsChange: function (type, targets) { - this._applyLayoutStrategy({ - type: type, - targets: targets - }); - this._set('dirty', true); - }, + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + ctx.lineTo(x + l, y + t); + break; - /** - * @private - * @param {fabric.Object} object - */ - _onObjectAdded: function (object) { - this.enterGroup(object, true); - object.fire('added', { target: this }); - }, + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + ctx.moveTo(x + l, y + t); + break; - /** - * @private - * @param {fabric.Object} object - */ - _onRelativeObjectAdded: function (object) { - this.enterGroup(object, false); - object.fire('added', { target: this }); - }, + case 'C': // bezierCurveTo, absolute + x = current[5]; + y = current[6]; + controlX = current[3]; + controlY = current[4]; + ctx.bezierCurveTo( + current[1] + l, + current[2] + t, + controlX + l, + controlY + t, + x + l, + y + t + ); + break; - /** - * @private - * @param {fabric.Object} object - * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it - */ - _onObjectRemoved: function (object, removeParentTransform) { - this.exitGroup(object, removeParentTransform); - object.fire('removed', { target: this }); - }, + case 'Q': // quadraticCurveTo, absolute + ctx.quadraticCurveTo( + current[1] + l, + current[2] + t, + current[3] + l, + current[4] + t + ); + x = current[3]; + y = current[4]; + controlX = current[1]; + controlY = current[2]; + break; - /** - * Decide if the object should cache or not. Create its own cache level - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group is already cached. - * @return {Boolean} - */ - shouldCache: function() { - var ownCache = fabric.Object.prototype.shouldCache.call(this); - if (ownCache) { - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].willDrawShadow()) { - this.ownCaching = false; - return false; - } - } + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + ctx.closePath(); + break; } - return ownCache; - }, + } + }, - /** - * Check if this object or a child object will cast a shadow - * @return {Boolean} - */ - willDrawShadow: function() { - if (fabric.Object.prototype.willDrawShadow.call(this)) { - return true; - } - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].willDrawShadow()) { - return true; - } - } - return false; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render path on + */ + _render: function(ctx) { + this._renderPathCommands(ctx); + this._renderPaintInOrder(ctx); + }, - /** - * Check if instance or its group are caching, recursively up - * @return {Boolean} - */ - isOnACache: function () { - return this.ownCaching || (!!this.group && this.group.isOnACache()); - }, + /** + * Returns string representation of an instance + * @return {String} string representation of an instance + */ + toString: function() { + return '#'; + }, - /** - * Execute the drawing operation for an object on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawObject: function(ctx) { - this._renderBackground(ctx); - for (var i = 0; i < this._objects.length; i++) { - this._objects[i].render(ctx); - } - this._drawClipPath(ctx, this.clipPath); - }, + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + path: this.path.map(function(item) { return item.slice(); }), + }); + }, - /** - * Check if cache is dirty - */ - isCacheDirty: function(skipCanvas) { - if (this.callSuper('isCacheDirty', skipCanvas)) { - return true; - } - if (!this.statefullCache) { - return false; - } - for (var i = 0; i < this._objects.length; i++) { - if (this._objects[i].isCacheDirty(true)) { - if (this._cacheCanvas) { - // if this group has not a cache canvas there is nothing to clean - var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; - this._cacheContext.clearRect(-x / 2, -y / 2, x, y); - } - return true; - } - } - return false; - }, + /** + * Returns dataless object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); + if (o.sourcePath) { + delete o.path; + } + return o; + }, - /** - * @override - * @return {Boolean} - */ - setCoords: function () { - this.callSuper('setCoords'); - this._shouldSetNestedCoords() && this.forEachObject(function (object) { - object.setCoords(); - }); - }, + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var path = fabric.util.joinPath(this.path); + return [ + '\n' + ]; + }, - /** - * Renders instance on a given context - * @param {CanvasRenderingContext2D} ctx context to render instance on - */ - render: function (ctx) { - // used to inform objects not to double opacity - this._transformDone = true; - this.callSuper('render', ctx); - this._transformDone = false; - }, + _getOffsetTransform: function() { + var digits = fabric.Object.NUM_FRACTION_DIGITS; + return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + + toFixed(-this.pathOffset.y, digits) + ')'; + }, - /** - * @public - * @param {Partial & { layout?: string }} [context] pass values to use for layout calculations - */ - triggerLayout: function (context) { - if (context && context.layout) { - context.prevLayout = this.layout; - this.layout = context.layout; - } - this._applyLayoutStrategy({ type: 'imperative', context: context }); - }, + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return '\t' + this._createBaseClipPathSVGMarkup( + this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } + ); + }, - /** - * @private - * @param {fabric.Object} object - * @param {fabric.Point} diff - */ - _adjustObjectPosition: function (object, diff) { - object.set({ - left: object.left + diff.x, - top: object.top + diff.y, - }); - }, + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); + }, + /* _TO_SVG_END_ */ - /** - * initial layout logic: - * calculate bbox of objects (if necessary) and translate it according to options received from the constructor (left, top, width, height) - * so it is placed in the center of the bbox received from the constructor - * - * @private - * @param {LayoutContext} context - */ - _applyLayoutStrategy: function (context) { - var isFirstLayout = context.type === 'initialization'; - if (!isFirstLayout && !this._firstLayoutDone) { - // reject layout requests before initialization layout - return; - } - var options = isFirstLayout && context.options; - var initialTransform = options && { - angle: options.angle || 0, - skewX: options.skewX || 0, - skewY: options.skewY || 0, - }; - var center = this.getRelativeCenterPoint(); - var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context); - if (result) { - // handle positioning - var newCenter = new fabric.Point(result.centerX, result.centerY); - var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0)); - var diff = transformPoint(vector, invertTransform(this.calcOwnMatrix()), true); - // set dimensions - this.set({ width: result.width, height: result.height }); - // adjust objects to account for new center - !context.objectsRelativeToGroup && this.forEachObject(function (object) { - this._adjustObjectPosition(object, diff); - }, this); - // clip path as well - !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned - && this._adjustObjectPosition(this.clipPath, diff); - if (!newCenter.eq(center) || initialTransform) { - // set position - this.setPositionByOrigin(newCenter, 'center', 'center'); - initialTransform && this.set(initialTransform); - this.setCoords(); - } - } - else if (isFirstLayout) { - // fill `result` with initial values for the layout hook - result = { - centerX: center.x, - centerY: center.y, - width: this.width, - height: this.height, - }; - initialTransform && this.set(initialTransform); - } - else { - // no `result` so we return - return; - } - // flag for next layouts - this._firstLayoutDone = true; - // fire layout hook and event (event will fire only for layouts after initialization layout) - this.onLayout(context, result); - this.fire('layout', { - context: context, - result: result, - diff: diff - }); - // recursive up - if (this.group && this.group._applyLayoutStrategy) { - // append the path recursion to context - if (!context.path) { - context.path = []; - } - context.path.push(this); - // all parents should invalidate their layout - this.group._applyLayoutStrategy(context); - } - }, + /** + * Returns number representation of an instance complexity + * @return {Number} complexity of this instance + */ + complexity: function() { + return this.path.length; + }, + /** + * @private + */ + _calcDimensions: function() { - /** - * Override this method to customize layout. - * If you need to run logic once layout completes use `onLayout` - * @public - * - * @typedef {'initialization'|'object_modified'|'added'|'removed'|'layout_change'|'imperative'} LayoutContextType - * - * @typedef LayoutContext context object with data regarding what triggered the call - * @property {LayoutContextType} type - * @property {fabric.Object[]} [path] array of objects starting from the object that triggered the call to the current one - * - * @typedef LayoutResult positioning and layout data **relative** to instance's parent - * @property {number} centerX new centerX as measured by the containing plane (same as `left` with `originX` set to `center`) - * @property {number} centerY new centerY as measured by the containing plane (same as `top` with `originY` set to `center`) - * @property {number} [correctionX] correctionX to translate objects by, measured as `centerX` - * @property {number} [correctionY] correctionY to translate objects by, measured as `centerY` - * @property {number} width - * @property {number} height - * - * @param {string} layoutDirective - * @param {fabric.Object[]} objects - * @param {LayoutContext} context - * @returns {LayoutResult | undefined} - */ - getLayoutStrategyResult: function (layoutDirective, objects, context) { // eslint-disable-line no-unused-vars - // `fit-content-lazy` performance enhancement - // skip if instance had no objects before the `added` event because it may have kept layout after removing all previous objects - if (layoutDirective === 'fit-content-lazy' - && context.type === 'added' && objects.length > context.targets.length) { - // calculate added objects' bbox with existing bbox - var addedObjects = context.targets.concat(this); - return this.prepareBoundingBox(layoutDirective, addedObjects, context); - } - else if (layoutDirective === 'fit-content' || layoutDirective === 'fit-content-lazy' - || (layoutDirective === 'fixed' && (context.type === 'initialization' || context.type === 'imperative'))) { - return this.prepareBoundingBox(layoutDirective, objects, context); - } - else if (layoutDirective === 'clip-path' && this.clipPath) { - var clipPath = this.clipPath; - var clipPathSizeAfter = clipPath._getTransformedDimensions(); - if (clipPath.absolutePositioned && (context.type === 'initialization' || context.type === 'layout_change')) { - // we want the center point to exist in group's containing plane - var clipPathCenter = clipPath.getCenterPoint(); - if (this.group) { - // send point from canvas plane to group's containing plane - var inv = invertTransform(this.group.calcTransformMatrix()); - clipPathCenter = transformPoint(clipPathCenter, inv); - } - return { - centerX: clipPathCenter.x, - centerY: clipPathCenter.y, - width: clipPathSizeAfter.x, - height: clipPathSizeAfter.y, - }; - } - else if (!clipPath.absolutePositioned) { - var center; - var clipPathRelativeCenter = clipPath.getRelativeCenterPoint(), - // we want the center point to exist in group's containing plane, so we send it upwards - clipPathCenter = transformPoint(clipPathRelativeCenter, this.calcOwnMatrix(), true); - if (context.type === 'initialization' || context.type === 'layout_change') { - var bbox = this.prepareBoundingBox(layoutDirective, objects, context) || {}; - center = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0); - return { - centerX: center.x + clipPathCenter.x, - centerY: center.y + clipPathCenter.y, - correctionX: bbox.correctionX - clipPathCenter.x, - correctionY: bbox.correctionY - clipPathCenter.y, - width: clipPath.width, - height: clipPath.height, - }; - } - else { - center = this.getRelativeCenterPoint(); - return { - centerX: center.x + clipPathCenter.x, - centerY: center.y + clipPathCenter.y, - width: clipPathSizeAfter.x, - height: clipPathSizeAfter.y, - }; - } - } - } - else if (layoutDirective === 'svg' && context.type === 'initialization') { - var bbox = this.getObjectsBoundingBox(objects, true) || {}; - return Object.assign(bbox, { - correctionX: -bbox.offsetX || 0, - correctionY: -bbox.offsetY || 0, - }); - } - }, + var aX = [], + aY = [], + current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + bounds; - /** - * Override this method to customize layout. - * A wrapper around {@link fabric.Group#getObjectsBoundingBox} - * @public - * @param {string} layoutDirective - * @param {fabric.Object[]} objects - * @param {LayoutContext} context - * @returns {LayoutResult | undefined} - */ - prepareBoundingBox: function (layoutDirective, objects, context) { - if (context.type === 'initialization') { - return this.prepareInitialBoundingBox(layoutDirective, objects, context); - } - else if (context.type === 'imperative' && context.context) { - return Object.assign( - this.getObjectsBoundingBox(objects) || {}, - context.context - ); - } - else { - return this.getObjectsBoundingBox(objects); - } - }, + for (var i = 0, len = this.path.length; i < len; ++i) { - /** - * Calculates center taking into account originX, originY while not being sure that width/height are initialized - * @public - * @param {string} layoutDirective - * @param {fabric.Object[]} objects - * @param {LayoutContext} context - * @returns {LayoutResult | undefined} - */ - prepareInitialBoundingBox: function (layoutDirective, objects, context) { - var options = context.options || {}, - hasX = typeof options.left === 'number', - hasY = typeof options.top === 'number', - hasWidth = typeof options.width === 'number', - hasHeight = typeof options.height === 'number'; - - // performance enhancement - // skip layout calculation if bbox is defined - if ((hasX && hasY && hasWidth && hasHeight && context.objectsRelativeToGroup) || objects.length === 0) { - // return nothing to skip layout - return; - } + current = this.path[i]; - var bbox = this.getObjectsBoundingBox(objects) || {}; - var width = hasWidth ? this.width : (bbox.width || 0), - height = hasHeight ? this.height : (bbox.height || 0), - calculatedCenter = new fabric.Point(bbox.centerX || 0, bbox.centerY || 0), - origin = new fabric.Point(this.resolveOriginX(this.originX), this.resolveOriginY(this.originY)), - size = new fabric.Point(width, height), - strokeWidthVector = this._getTransformedDimensions({ width: 0, height: 0 }), - sizeAfter = this._getTransformedDimensions({ - width: width, - height: height, - strokeWidth: 0 - }), - bboxSizeAfter = this._getTransformedDimensions({ - width: bbox.width, - height: bbox.height, - strokeWidth: 0 - }), - rotationCorrection = new fabric.Point(0, 0); - - // calculate center and correction - var originT = origin.scalarAdd(0.5); - var originCorrection = sizeAfter.multiply(originT); - var centerCorrection = new fabric.Point( - hasWidth ? bboxSizeAfter.x / 2 : originCorrection.x, - hasHeight ? bboxSizeAfter.y / 2 : originCorrection.y - ); - var center = new fabric.Point( - hasX ? this.left - (sizeAfter.x + strokeWidthVector.x) * origin.x : calculatedCenter.x - centerCorrection.x, - hasY ? this.top - (sizeAfter.y + strokeWidthVector.y) * origin.y : calculatedCenter.y - centerCorrection.y - ); - var offsetCorrection = new fabric.Point( - hasX ? - center.x - calculatedCenter.x + bboxSizeAfter.x * (hasWidth ? 0.5 : 0) : - -(hasWidth ? (sizeAfter.x - strokeWidthVector.x) * 0.5 : sizeAfter.x * originT.x), - hasY ? - center.y - calculatedCenter.y + bboxSizeAfter.y * (hasHeight ? 0.5 : 0) : - -(hasHeight ? (sizeAfter.y - strokeWidthVector.y) * 0.5 : sizeAfter.y * originT.y) - ).add(rotationCorrection); - var correction = new fabric.Point( - hasWidth ? -sizeAfter.x / 2 : 0, - hasHeight ? -sizeAfter.y / 2 : 0 - ).add(offsetCorrection); + switch (current[0]) { // first letter - return { - centerX: center.x, - centerY: center.y, - correctionX: correction.x, - correctionY: correction.y, - width: size.x, - height: size.y, - }; - }, + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + bounds = []; + break; - /** - * Calculate the bbox of objects relative to instance's containing plane - * @public - * @param {fabric.Object[]} objects - * @returns {LayoutResult | null} bounding box - */ - getObjectsBoundingBox: function (objects, ignoreOffset) { - if (objects.length === 0) { - return null; + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + bounds = []; + break; + + case 'C': // bezierCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + x = current[5]; + y = current[6]; + break; + + case 'Q': // quadraticCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[1], + current[2], + current[3], + current[4] + ); + x = current[3]; + y = current[4]; + break; + + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + break; } - var objCenter, sizeVector, min, max, a, b; - objects.forEach(function (object, i) { - objCenter = object.getRelativeCenterPoint(); - sizeVector = object._getTransformedDimensions().scalarDivideEquals(2); - if (object.angle) { - var rad = degreesToRadians(object.angle), - sin = Math.abs(fabric.util.sin(rad)), - cos = Math.abs(fabric.util.cos(rad)), - rx = sizeVector.x * cos + sizeVector.y * sin, - ry = sizeVector.x * sin + sizeVector.y * cos; - sizeVector = new fabric.Point(rx, ry); - } - a = objCenter.subtract(sizeVector); - b = objCenter.add(sizeVector); - if (i === 0) { - min = new fabric.Point(Math.min(a.x, b.x), Math.min(a.y, b.y)); - max = new fabric.Point(Math.max(a.x, b.x), Math.max(a.y, b.y)); - } - else { - min.setXY(Math.min(min.x, a.x, b.x), Math.min(min.y, a.y, b.y)); - max.setXY(Math.max(max.x, a.x, b.x), Math.max(max.y, a.y, b.y)); - } + bounds.forEach(function (point) { + aX.push(point.x); + aY.push(point.y); }); + aX.push(x); + aY.push(y); + } - var size = max.subtract(min), - relativeCenter = ignoreOffset ? size.scalarDivide(2) : min.midPointFrom(max), - // we send `relativeCenter` up to group's containing plane - offset = transformPoint(min, this.calcOwnMatrix()), - center = transformPoint(relativeCenter, this.calcOwnMatrix()); + var minX = min(aX) || 0, + minY = min(aY) || 0, + maxX = max(aX) || 0, + maxY = max(aY) || 0, + deltaX = maxX - minX, + deltaY = maxY - minY; - return { - offsetX: offset.x, - offsetY: offset.y, - centerX: center.x, - centerY: center.y, - width: size.x, - height: size.y, - }; - }, + return { + left: minX, + top: minY, + width: deltaX, + height: deltaY + }; + } + }); - /** - * Hook that is called once layout has completed. - * Provided for layout customization, override if necessary. - * Complements `getLayoutStrategyResult`, which is called at the beginning of layout. - * @public - * @param {LayoutContext} context layout context - * @param {LayoutResult} result layout result - */ - onLayout: function (/* context, result */) { - // override by subclass - }, + /** + * Creates an instance of fabric.Path from an object + * @static + * @memberOf fabric.Path + * @param {Object} object + * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created + */ + fabric.Path.fromObject = function(object, callback) { + if (typeof object.sourcePath === 'string') { + var pathUrl = object.sourcePath; + fabric.loadSVGFromURL(pathUrl, function (elements) { + var path = elements[0]; + path.setOptions(object); + callback && callback(path); + }); + } + else { + fabric.Object._fromObject('Path', object, callback, 'path'); + } + }; - /** - * - * @private - * @param {'toObject'|'toDatalessObject'} [method] - * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @returns {fabric.Object[]} serialized objects - */ - __serializeObjects: function (method, propertiesToInclude) { - var _includeDefaultValues = this.includeDefaultValues; - return this._objects - .filter(function (obj) { - return !obj.excludeFromExport; - }) - .map(function (obj) { - var originalDefaults = obj.includeDefaultValues; - obj.includeDefaultValues = _includeDefaultValues; - var data = obj[method || 'toObject'](propertiesToInclude); - obj.includeDefaultValues = originalDefaults; - //delete data.version; - return data; - }); - }, + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) + * @static + * @memberOf fabric.Path + * @see http://www.w3.org/TR/SVG/paths.html#PathElement + */ + fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); - /** - * Returns object representation of an instance - * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function (propertiesToInclude) { - var obj = this.callSuper('toObject', ['layout', 'subTargetCheck', 'interactive'].concat(propertiesToInclude)); - obj.objects = this.__serializeObjects('toObject', propertiesToInclude); - return obj; - }, + /** + * Creates an instance of fabric.Path from an SVG element + * @static + * @memberOf fabric.Path + * @param {SVGElement} element to parse + * @param {Function} callback Callback to invoke when an fabric.Path instance is created + * @param {Object} [options] Options object + * @param {Function} [callback] Options callback invoked after parsing is finished + */ + fabric.Path.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ - toString: function () { - return '#'; - }, +})(typeof exports !== 'undefined' ? exports : this); - dispose: function () { - this._activeObjects = []; - this.forEachObject(function (object) { - this._watchObject(false, object); - object.dispose && object.dispose(); - }, this); - this.callSuper('dispose'); - }, - /* _TO_SVG_START_ */ +(function(global) { - /** - * @private - */ - _createSVGBgRect: function (reviver) { - if (!this.backgroundColor) { - return ''; - } - var fillStroke = fabric.Rect.prototype._toSVG.call(this, reviver); - var commons = fillStroke.indexOf('COMMON_PARTS'); - fillStroke[commons] = 'for="group" '; - return fillStroke.join(''); - }, + 'use strict'; - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - _toSVG: function (reviver) { - var svgString = ['\n']; - var bg = this._createSVGBgRect(reviver); - bg && svgString.push('\t\t', bg); - for (var i = 0; i < this._objects.length; i++) { - svgString.push('\t\t', this._objects[i].toSVG(reviver)); - } - svgString.push('\n'); - return svgString; - }, + var fabric = global.fabric || (global.fabric = { }), + min = fabric.util.array.min, + max = fabric.util.array.max; - /** - * Returns styles-string for svg-export, specific version for group - * @return {String} - */ - getSvgStyles: function() { - var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? - 'opacity: ' + this.opacity + ';' : '', - visibility = this.visible ? '' : ' visibility: hidden;'; - return [ - opacity, - this.getSvgFilter(), - visibility - ].join(''); - }, + if (fabric.Group) { + return; + } - /** - * Returns svg clipPath representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toClipPathSVG: function (reviver) { - var svgString = []; - var bg = this._createSVGBgRect(reviver); - bg && svgString.push('\t', bg); - for (var i = 0; i < this._objects.length; i++) { - svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); - } - return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); - }, - /* _TO_SVG_END_ */ - }); + /** + * Group class + * @class fabric.Group + * @extends fabric.Object + * @mixes fabric.Collection + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} + * @see {@link fabric.Group#initialize} for constructor definition + */ + fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { /** - * @todo support loading from svg - * @private - * @static - * @memberOf fabric.Group - * @param {Object} object Object to create a group from - * @returns {Promise} + * Type of an object + * @type String + * @default */ - fabric.Group.fromObject = function(object) { - var objects = object.objects || [], - options = clone(object, true); - delete options.objects; - return Promise.all([ - fabric.util.enlivenObjects(objects), - fabric.util.enlivenObjectEnlivables(options) - ]).then(function (enlivened) { - return new fabric.Group(enlivened[0], Object.assign(options, enlivened[1]), true); - }); - }; + type: 'group', - })(typeof exports !== 'undefined' ? exports : window); + /** + * Width of stroke + * @type Number + * @default + */ + strokeWidth: 0, - (function(global) { - var fabric = global.fabric || (global.fabric = { }); + /** + * Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets + * @type Boolean + * @default + */ + subTargetCheck: false, /** - * Group class - * @class fabric.ActiveSelection - * @extends fabric.Group - * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} - * @see {@link fabric.ActiveSelection#initialize} for constructor definition + * Groups are container, do not render anything on theyr own, ence no cache properties + * @type Array + * @default */ - fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { + cacheProperties: [], - /** - * Type of an object - * @type String - * @default - */ - type: 'activeSelection', + /** + * setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still + * available setting this boolean to true. + * @type Boolean + * @since 2.0.0 + * @default + */ + useSetOnGroup: false, - /** - * @override - */ - layout: 'fit-content', + /** + * Constructor + * @param {Object} objects Group objects + * @param {Object} [options] Options object + * @param {Boolean} [isAlreadyGrouped] if true, objects have been grouped already. + * @return {Object} thisArg + */ + initialize: function(objects, options, isAlreadyGrouped) { + options = options || {}; + this._objects = []; + // if objects enclosed in a group have been grouped already, + // we cannot change properties of objects. + // Thus we need to set options to group without objects, + isAlreadyGrouped && this.callSuper('initialize', options); + this._objects = objects || []; + for (var i = this._objects.length; i--; ) { + this._objects[i].group = this; + } + + if (!isAlreadyGrouped) { + var center = options && options.centerPoint; + // we want to set origins before calculating the bounding box. + // so that the topleft can be set with that in mind. + // if specific top and left are passed, are overwritten later + // with the callSuper('initialize', options) + if (options.originX !== undefined) { + this.originX = options.originX; + } + if (options.originY !== undefined) { + this.originY = options.originY; + } + // if coming from svg i do not want to calc bounds. + // i assume width and height are passed along options + center || this._calcBounds(); + this._updateObjectsCoords(center); + delete options.centerPoint; + this.callSuper('initialize', options); + } + else { + this._updateObjectsACoords(); + } - /** - * @override - */ - subTargetCheck: false, + this.setCoords(); + }, - /** - * @override - */ - interactive: false, + /** + * @private + */ + _updateObjectsACoords: function() { + var skipControls = true; + for (var i = this._objects.length; i--; ){ + this._objects[i].setCoords(skipControls); + } + }, - /** - * Constructor - * - * @param {fabric.Object[]} [objects] instance objects - * @param {Object} [options] Options object - * @param {boolean} [objectsRelativeToGroup] true if objects exist in group coordinate plane - * @return {fabric.ActiveSelection} thisArg - */ - initialize: function (objects, options, objectsRelativeToGroup) { - this.callSuper('initialize', objects, options, objectsRelativeToGroup); + /** + * @private + * @param {Boolean} [skipCoordsChange] if true, coordinates of objects enclosed in a group do not change + */ + _updateObjectsCoords: function(center) { + var center = center || this.getCenterPoint(); + for (var i = this._objects.length; i--; ){ + this._updateObjectCoords(this._objects[i], center); + } + }, + + /** + * @private + * @param {Object} object + * @param {fabric.Point} center, current center of group. + */ + _updateObjectCoords: function(object, center) { + var objectLeft = object.left, + objectTop = object.top, + skipControls = true; + + object.set({ + left: objectLeft - center.x, + top: objectTop - center.y + }); + object.group = this; + object.setCoords(skipControls); + }, + + /** + * Returns string represenation of a group + * @return {String} + */ + toString: function() { + return '#'; + }, + + /** + * Adds an object to a group; Then recalculates group's dimension, position. + * @param {Object} object + * @return {fabric.Group} thisArg + * @chainable + */ + addWithUpdate: function(object) { + var nested = !!this.group; + this._restoreObjectsState(); + fabric.util.resetObjectTransform(this); + if (object) { + if (nested) { + // if this group is inside another group, we need to pre transform the object + fabric.util.removeTransformFromObject(object, this.group.calcTransformMatrix()); + } + this._objects.push(object); + object.group = this; + object._set('canvas', this.canvas); + } + this._calcBounds(); + this._updateObjectsCoords(); + this.dirty = true; + if (nested) { + this.group.addWithUpdate(); + } + else { this.setCoords(); - }, + } + return this; + }, - /** - * @private - */ - _shouldSetNestedCoords: function () { - return true; - }, + /** + * Removes an object from a group; Then recalculates group's dimension, position. + * @param {Object} object + * @return {fabric.Group} thisArg + * @chainable + */ + removeWithUpdate: function(object) { + this._restoreObjectsState(); + fabric.util.resetObjectTransform(this); - /** - * @private - * @param {fabric.Object} object - * @param {boolean} [removeParentTransform] true if object is in canvas coordinate plane - * @returns {boolean} true if object entered group - */ - enterGroup: function (object, removeParentTransform) { - if (object.group) { - // save ref to group for later in order to return to it - var parent = object.group; - parent._exitGroup(object); - object.__owningGroup = parent; - } - this._enterGroup(object, removeParentTransform); - return true; - }, + this.remove(object); + this._calcBounds(); + this._updateObjectsCoords(); + this.setCoords(); + this.dirty = true; + return this; + }, - /** - * we want objects to retain their canvas ref when exiting instance - * @private - * @param {fabric.Object} object - * @param {boolean} [removeParentTransform] true if object should exit group without applying group's transform to it - */ - exitGroup: function (object, removeParentTransform) { - this._exitGroup(object, removeParentTransform); - var parent = object.__owningGroup; - if (parent) { - // return to owning group - parent.enterGroup(object); - delete object.__owningGroup; + /** + * @private + */ + _onObjectAdded: function(object) { + this.dirty = true; + object.group = this; + object._set('canvas', this.canvas); + }, + + /** + * @private + */ + _onObjectRemoved: function(object) { + this.dirty = true; + delete object.group; + }, + + /** + * @private + */ + _set: function(key, value) { + var i = this._objects.length; + if (this.useSetOnGroup) { + while (i--) { + this._objects[i].setOnGroup(key, value); } - }, + } + if (key === 'canvas') { + while (i--) { + this._objects[i]._set(key, value); + } + } + fabric.Object.prototype._set.call(this, key, value); + }, - /** - * @private - * @param {'added'|'removed'} type - * @param {fabric.Object[]} targets - */ - _onAfterObjectsChange: function (type, targets) { - var groups = []; - targets.forEach(function (object) { - object.group && !groups.includes(object.group) && groups.push(object.group); + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + var _includeDefaultValues = this.includeDefaultValues; + var objsToObject = this._objects + .filter(function (obj) { + return !obj.excludeFromExport; + }) + .map(function (obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = _includeDefaultValues; + var _obj = obj.toObject(propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + return _obj; }); - if (type === 'removed') { - // invalidate groups' layout and mark as dirty - groups.forEach(function (group) { - group._onAfterObjectsChange('added', targets); - }); + var obj = fabric.Object.prototype.toObject.call(this, propertiesToInclude); + obj.objects = objsToObject; + return obj; + }, + + /** + * Returns object representation of an instance, in dataless mode. + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + var objsToObject, sourcePath = this.sourcePath; + if (sourcePath) { + objsToObject = sourcePath; + } + else { + var _includeDefaultValues = this.includeDefaultValues; + objsToObject = this._objects.map(function(obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = _includeDefaultValues; + var _obj = obj.toDatalessObject(propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + return _obj; + }); + } + var obj = fabric.Object.prototype.toDatalessObject.call(this, propertiesToInclude); + obj.objects = objsToObject; + return obj; + }, + + /** + * Renders instance on a given context + * @param {CanvasRenderingContext2D} ctx context to render instance on + */ + render: function(ctx) { + this._transformDone = true; + this.callSuper('render', ctx); + this._transformDone = false; + }, + + /** + * Decide if the object should cache or not. Create its own cache level + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group is already cached. + * @return {Boolean} + */ + shouldCache: function() { + var ownCache = fabric.Object.prototype.shouldCache.call(this); + if (ownCache) { + for (var i = 0, len = this._objects.length; i < len; i++) { + if (this._objects[i].willDrawShadow()) { + this.ownCaching = false; + return false; + } } - else { - // mark groups as dirty - groups.forEach(function (group) { - group._set('dirty', true); - }); + } + return ownCache; + }, + + /** + * Check if this object or a child object will cast a shadow + * @return {Boolean} + */ + willDrawShadow: function() { + if (fabric.Object.prototype.willDrawShadow.call(this)) { + return true; + } + for (var i = 0, len = this._objects.length; i < len; i++) { + if (this._objects[i].willDrawShadow()) { + return true; } - }, + } + return false; + }, - /** - * If returns true, deselection is cancelled. - * @since 2.0.0 - * @return {Boolean} [cancel] - */ - onDeselect: function() { - this.removeAll(); - return false; - }, + /** + * Check if this group or its parent group are caching, recursively up + * @return {Boolean} + */ + isOnACache: function() { + return this.ownCaching || (this.group && this.group.isOnACache()); + }, - /** - * Returns string representation of a group - * @return {String} - */ - toString: function() { - return '#'; - }, + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject: function(ctx) { + for (var i = 0, len = this._objects.length; i < len; i++) { + this._objects[i].render(ctx); + } + this._drawClipPath(ctx, this.clipPath); + }, - /** - * Decide if the object should cache or not. Create its own cache level - * objectCaching is a global flag, wins over everything - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group outside is cached. - * @return {Boolean} - */ - shouldCache: function() { + /** + * Check if cache is dirty + */ + isCacheDirty: function(skipCanvas) { + if (this.callSuper('isCacheDirty', skipCanvas)) { + return true; + } + if (!this.statefullCache) { return false; - }, + } + for (var i = 0, len = this._objects.length; i < len; i++) { + if (this._objects[i].isCacheDirty(true)) { + if (this._cacheCanvas) { + // if this group has not a cache canvas there is nothing to clean + var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-x / 2, -y / 2, x, y); + } + return true; + } + } + return false; + }, - /** - * Check if this group or its parent group are caching, recursively up - * @return {Boolean} - */ - isOnACache: function() { - return false; - }, + /** + * Restores original state of each of group objects (original state is that which was before group was created). + * if the nested boolean is true, the original state will be restored just for the + * first group and not for all the group chain + * @private + * @param {Boolean} nested tell the function to restore object state up to the parent group and not more + * @return {fabric.Group} thisArg + * @chainable + */ + _restoreObjectsState: function() { + var groupMatrix = this.calcOwnMatrix(); + this._objects.forEach(function(object) { + // instead of using _this = this; + fabric.util.addTransformToObject(object, groupMatrix); + delete object.group; + object.setCoords(); + }); + return this; + }, - /** - * Renders controls and borders for the object - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} [styleOverride] properties to override the object style - * @param {Object} [childrenOverride] properties to override the children overrides - */ - _renderControls: function(ctx, styleOverride, childrenOverride) { - ctx.save(); - ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; - this.callSuper('_renderControls', ctx, styleOverride); - var options = Object.assign( - { hasControls: false }, - childrenOverride, - { forActiveSelection: true } - ); - for (var i = 0; i < this._objects.length; i++) { - this._objects[i]._renderControls(ctx, options); - } - ctx.restore(); - }, - }); + /** + * Destroys a group (restoring state of its objects) + * @return {fabric.Group} thisArg + * @chainable + */ + destroy: function() { + // when group is destroyed objects needs to get a repaint to be eventually + // displayed on canvas. + this._objects.forEach(function(object) { + object.set('dirty', true); + }); + return this._restoreObjectsState(); + }, + + dispose: function () { + this.callSuper('dispose'); + this.forEachObject(function (object) { + object.dispose && object.dispose(); + }); + this._objects = []; + }, /** - * Returns {@link fabric.ActiveSelection} instance from an object representation - * @static - * @memberOf fabric.ActiveSelection - * @param {Object} object Object to create a group from - * @returns {Promise} + * make a group an active selection, remove the group from canvas + * the group has to be on canvas for this to work. + * @return {fabric.ActiveSelection} thisArg + * @chainable */ - fabric.ActiveSelection.fromObject = function(object) { - var objects = object.objects, - options = fabric.util.object.clone(object, true); + toActiveSelection: function() { + if (!this.canvas) { + return; + } + var objects = this._objects, canvas = this.canvas; + this._objects = []; + var options = this.toObject(); delete options.objects; - return fabric.util.enlivenObjects(objects).then(function(enlivenedObjects) { - return new fabric.ActiveSelection(enlivenedObjects, options, true); + var activeSelection = new fabric.ActiveSelection([]); + activeSelection.set(options); + activeSelection.type = 'activeSelection'; + canvas.remove(this); + objects.forEach(function(object) { + object.group = activeSelection; + object.dirty = true; + canvas.add(object); }); - }; + activeSelection.canvas = canvas; + activeSelection._objects = objects; + canvas._activeObject = activeSelection; + activeSelection.setCoords(); + return activeSelection; + }, - })(typeof exports !== 'undefined' ? exports : window); + /** + * Destroys a group (restoring state of its objects) + * @return {fabric.Group} thisArg + * @chainable + */ + ungroupOnCanvas: function() { + return this._restoreObjectsState(); + }, - (function(global) { - var fabric = global.fabric, extend = fabric.util.object.extend; /** - * Image class - * @class fabric.Image - * @extends fabric.Object - * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} - * @see {@link fabric.Image#initialize} for constructor definition + * Sets coordinates of all objects inside group + * @return {fabric.Group} thisArg + * @chainable */ - fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { + setObjectsCoords: function() { + var skipControls = true; + this.forEachObject(function(object) { + object.setCoords(skipControls); + }); + return this; + }, - /** - * Type of an object - * @type String - * @default - */ - type: 'image', + /** + * @private + */ + _calcBounds: function(onlyWidthHeight) { + var aX = [], + aY = [], + o, prop, coords, + props = ['tr', 'br', 'bl', 'tl'], + i = 0, iLen = this._objects.length, + j, jLen = props.length; - /** - * Width of a stroke. - * For image quality a stroke multiple of 2 gives better results. - * @type Number - * @default - */ - strokeWidth: 0, + for ( ; i < iLen; ++i) { + o = this._objects[i]; + coords = o.calcACoords(); + for (j = 0; j < jLen; j++) { + prop = props[j]; + aX.push(coords[prop].x); + aY.push(coords[prop].y); + } + o.aCoords = coords; + } - /** - * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. - * This allows for relative urls as image src. - * @since 2.7.0 - * @type Boolean - * @default - */ - srcFromAttribute: false, + this._getBounds(aX, aY, onlyWidthHeight); + }, - /** - * private - * contains last value of scaleX to detect - * if the Image got resized after the last Render - * @type Number - */ - _lastScaleX: 1, + /** + * @private + */ + _getBounds: function(aX, aY, onlyWidthHeight) { + var minXY = new fabric.Point(min(aX), min(aY)), + maxXY = new fabric.Point(max(aX), max(aY)), + top = minXY.y || 0, left = minXY.x || 0, + width = (maxXY.x - minXY.x) || 0, + height = (maxXY.y - minXY.y) || 0; + this.width = width; + this.height = height; + if (!onlyWidthHeight) { + // the bounding box always finds the topleft most corner. + // whatever is the group origin, we set up here the left/top position. + this.setPositionByOrigin({ x: left, y: top }, 'left', 'top'); + } + }, - /** - * private - * contains last value of scaleY to detect - * if the Image got resized after the last Render - * @type Number - */ - _lastScaleY: 1, + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + _toSVG: function(reviver) { + var svgString = ['\n']; - /** - * private - * contains last value of scaling applied by the apply filter chain - * @type Number - */ - _filterScalingX: 1, + for (var i = 0, len = this._objects.length; i < len; i++) { + svgString.push('\t\t', this._objects[i].toSVG(reviver)); + } + svgString.push('\n'); + return svgString; + }, - /** - * private - * contains last value of scaling applied by the apply filter chain - * @type Number - */ - _filterScalingY: 1, + /** + * Returns styles-string for svg-export, specific version for group + * @return {String} + */ + getSvgStyles: function() { + var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? + 'opacity: ' + this.opacity + ';' : '', + visibility = this.visible ? '' : ' visibility: hidden;'; + return [ + opacity, + this.getSvgFilter(), + visibility + ].join(''); + }, - /** - * minimum scale factor under which any resizeFilter is triggered to resize the image - * 0 will disable the automatic resize. 1 will trigger automatically always. - * number bigger than 1 are not implemented yet. - * @type Number - */ - minimumScaleTrigger: 0.5, + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function(reviver) { + var svgString = []; - /** - * List of properties to consider when checking if - * state of an object is changed ({@link fabric.Object#hasStateChanged}) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), + for (var i = 0, len = this._objects.length; i < len; i++) { + svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); + } - /** - * List of properties to consider when checking if cache needs refresh - * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single - * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty - * and refreshed at the next render - * @type Array - */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), + return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); + }, + /* _TO_SVG_END_ */ + }); - /** - * key used to retrieve the texture representing this image - * @since 2.0.0 - * @type String - * @default - */ - cacheKey: '', + /** + * Returns {@link fabric.Group} instance from an object representation + * @static + * @memberOf fabric.Group + * @param {Object} object Object to create a group from + * @param {Function} [callback] Callback to invoke when an group instance is created + */ + fabric.Group.fromObject = function(object, callback) { + var objects = object.objects, + options = fabric.util.object.clone(object, true); + delete options.objects; + if (typeof objects === 'string') { + // it has to be an url or something went wrong. + fabric.loadSVGFromURL(objects, function (elements) { + var group = fabric.util.groupSVGElements(elements, object, objects); + group.set(options); + callback && callback(group); + }); + return; + } + fabric.util.enlivenObjects(objects, function (enlivenedObjects) { + var options = fabric.util.object.clone(object, true); + delete options.objects; + fabric.util.enlivenObjectEnlivables(object, options, function () { + callback && callback(new fabric.Group(enlivenedObjects, options, true)); + }); + }); + }; - /** - * Image crop in pixels from original image size. - * @since 2.0.0 - * @type Number - * @default - */ - cropX: 0, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Image crop in pixels from original image size. - * @since 2.0.0 - * @type Number - * @default - */ - cropY: 0, - /** - * Indicates whether this canvas will use image smoothing when painting this image. - * Also influence if the cacheCanvas for this image uses imageSmoothing - * @since 4.0.0-beta.11 - * @type Boolean - * @default - */ - imageSmoothing: true, +(function(global) { - /** - * Constructor - * Image can be initialized with any canvas drawable or a string. - * The string should be a url and will be loaded as an image. - * Canvas and Image element work out of the box, while videos require extra code to work. - * Please check video element events for seeking. - * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} element Image element - * @param {Object} [options] Options object - * @return {fabric.Image} thisArg - */ - initialize: function(element, options) { - options || (options = { }); - this.filters = []; - this.cacheKey = 'texture' + fabric.Object.__uid++; - this.callSuper('initialize', options); - this._initElement(element, options); - }, + 'use strict'; - /** - * Returns image element which this instance if based on - * @return {HTMLImageElement} Image element - */ - getElement: function() { - return this._element || {}; - }, + var fabric = global.fabric || (global.fabric = { }); - /** - * Sets image element for this instance to a specified one. - * If filters defined they are applied to new image. - * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area. - * @param {HTMLImageElement} element - * @param {Object} [options] Options object - * @return {fabric.Image} thisArg - * @chainable - */ - setElement: function(element, options) { - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._element = element; - this._originalElement = element; - this._initConfig(options); - if (this.filters.length !== 0) { - this.applyFilters(); - } - // resizeFilters work on the already filtered copy. - // we need to apply resizeFilters AFTER normal filters. - // applyResizeFilters is run more often than normal filters - // and is triggered by user interactions rather than dev code - if (this.resizeFilter) { - this.applyResizeFilters(); - } - return this; - }, + if (fabric.ActiveSelection) { + return; + } - /** - * Delete a single texture if in webgl mode - */ - removeTexture: function(key) { - var backend = fabric.filterBackend; - if (backend && backend.evictCachesForKey) { - backend.evictCachesForKey(key); - } - }, + /** + * Group class + * @class fabric.ActiveSelection + * @extends fabric.Group + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} + * @see {@link fabric.ActiveSelection#initialize} for constructor definition + */ + fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { - /** - * Delete textures, reference to elements and eventually JSDOM cleanup - */ - dispose: function () { - this.callSuper('dispose'); - this.removeTexture(this.cacheKey); - this.removeTexture(this.cacheKey + '_filtered'); - this._cacheContext = undefined; - ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { - fabric.util.cleanUpJsdomNode(this[element]); - this[element] = undefined; - }).bind(this)); - }, + /** + * Type of an object + * @type String + * @default + */ + type: 'activeSelection', - /** - * Get the crossOrigin value (of the corresponding image element) - */ - getCrossOrigin: function() { - return this._originalElement && (this._originalElement.crossOrigin || null); - }, + /** + * Constructor + * @param {Object} objects ActiveSelection objects + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(objects, options) { + options = options || {}; + this._objects = objects || []; + for (var i = this._objects.length; i--; ) { + this._objects[i].group = this; + } + + if (options.originX) { + this.originX = options.originX; + } + if (options.originY) { + this.originY = options.originY; + } + this._calcBounds(); + this._updateObjectsCoords(); + fabric.Object.prototype.initialize.call(this, options); + this.setCoords(); + }, + + /** + * Change te activeSelection to a normal group, + * High level function that automatically adds it to canvas as + * active object. no events fired. + * @since 2.0.0 + * @return {fabric.Group} + */ + toGroup: function() { + var objects = this._objects.concat(); + this._objects = []; + var options = fabric.Object.prototype.toObject.call(this); + var newGroup = new fabric.Group([]); + delete options.type; + newGroup.set(options); + objects.forEach(function(object) { + object.canvas.remove(object); + object.group = newGroup; + }); + newGroup._objects = objects; + if (!this.canvas) { + return newGroup; + } + var canvas = this.canvas; + canvas.add(newGroup); + canvas._activeObject = newGroup; + newGroup.setCoords(); + return newGroup; + }, - /** - * Returns original size of an image - * @return {Object} Object with "width" and "height" properties - */ - getOriginalSize: function() { - var element = this.getElement(); - return { - width: element.naturalWidth || element.width, - height: element.naturalHeight || element.height - }; - }, + /** + * If returns true, deselection is cancelled. + * @since 2.0.0 + * @return {Boolean} [cancel] + */ + onDeselect: function() { + this.destroy(); + return false; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _stroke: function(ctx) { - if (!this.stroke || this.strokeWidth === 0) { - return; - } - var w = this.width / 2, h = this.height / 2; - ctx.beginPath(); - ctx.moveTo(-w, -h); - ctx.lineTo(w, -h); - ctx.lineTo(w, h); - ctx.lineTo(-w, h); - ctx.lineTo(-w, -h); - ctx.closePath(); - }, - - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function(propertiesToInclude) { - var filters = []; - - this.filters.forEach(function(filterObj) { - if (filterObj) { - filters.push(filterObj.toObject()); - } - }); - var object = extend( - this.callSuper( - 'toObject', - ['cropX', 'cropY'].concat(propertiesToInclude) - ), { - src: this.getSrc(), - crossOrigin: this.getCrossOrigin(), - filters: filters, - }); - if (this.resizeFilter) { - object.resizeFilter = this.resizeFilter.toObject(); - } - return object; - }, - - /** - * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height. - * @return {Boolean} - */ - hasCrop: function() { - return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; - }, + /** + * Returns string representation of a group + * @return {String} + */ + toString: function() { + return '#'; + }, - /* _TO_SVG_START_ */ - /** - * Returns svg representation of an instance - * @return {Array} an array of strings with the specific svg representation - * of the instance - */ - _toSVG: function() { - var svgString = [], imageMarkup = [], strokeSvg, element = this._element, - x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; - if (!element) { - return []; - } - if (this.hasCrop()) { - var clipPathId = fabric.Object.__uid++; - svgString.push( - '\n', - '\t\n', - '\n' - ); - clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; - } - if (!this.imageSmoothing) { - imageRendering = '" image-rendering="optimizeSpeed'; - } - imageMarkup.push('\t\n'); - - if (this.stroke || this.strokeDashArray) { - var origFill = this.fill; - this.fill = null; - strokeSvg = [ - '\t\n' - ]; - this.fill = origFill; - } - if (this.paintFirst !== 'fill') { - svgString = svgString.concat(strokeSvg, imageMarkup); - } - else { - svgString = svgString.concat(imageMarkup, strokeSvg); - } - return svgString; - }, - /* _TO_SVG_END_ */ + /** + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * @return {Boolean} + */ + shouldCache: function() { + return false; + }, - /** - * Returns source of an image - * @param {Boolean} filtered indicates if the src is needed for svg - * @return {String} Source of an image - */ - getSrc: function(filtered) { - var element = filtered ? this._element : this._originalElement; - if (element) { - if (element.toDataURL) { - return element.toDataURL(); - } + /** + * Check if this group or its parent group are caching, recursively up + * @return {Boolean} + */ + isOnACache: function() { + return false; + }, - if (this.srcFromAttribute) { - return element.getAttribute('src'); - } - else { - return element.src; - } - } - else { - return this.src || ''; - } - }, + /** + * Renders controls and borders for the object + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [styleOverride] properties to override the object style + * @param {Object} [childrenOverride] properties to override the children overrides + */ + _renderControls: function(ctx, styleOverride, childrenOverride) { + ctx.save(); + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + this.callSuper('_renderControls', ctx, styleOverride); + childrenOverride = childrenOverride || { }; + if (typeof childrenOverride.hasControls === 'undefined') { + childrenOverride.hasControls = false; + } + childrenOverride.forActiveSelection = true; + for (var i = 0, len = this._objects.length; i < len; i++) { + this._objects[i]._renderControls(ctx, childrenOverride); + } + ctx.restore(); + }, + }); - /** - * Sets source of an image - * @param {String} src Source string (URL) - * @param {Object} [options] Options object - * @param {String} [options.crossOrigin] crossOrigin value (one of "", "anonymous", "use-credentials") - * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes - * @return {Promise} thisArg - */ - setSrc: function(src, options) { - var _this = this; - return fabric.util.loadImage(src, options).then(function(img) { - _this.setElement(img, options); - _this._setWidthHeight(); - return _this; - }); - }, + /** + * Returns {@link fabric.ActiveSelection} instance from an object representation + * @static + * @memberOf fabric.ActiveSelection + * @param {Object} object Object to create a group from + * @param {Function} [callback] Callback to invoke when an ActiveSelection instance is created + */ + fabric.ActiveSelection.fromObject = function(object, callback) { + fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) { + delete object.objects; + callback && callback(new fabric.ActiveSelection(enlivenedObjects, object, true)); + }); + }; - /** - * Returns string representation of an instance - * @return {String} String representation of an instance - */ - toString: function() { - return '#'; - }, +})(typeof exports !== 'undefined' ? exports : this); - applyResizeFilters: function() { - var filter = this.resizeFilter, - minimumScale = this.minimumScaleTrigger, - objectScale = this.getTotalObjectScaling(), - scaleX = objectScale.x, - scaleY = objectScale.y, - elementToFilter = this._filteredEl || this._originalElement; - if (this.group) { - this.set('dirty', true); - } - if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { - this._element = elementToFilter; - this._filterScalingX = 1; - this._filterScalingY = 1; - this._lastScaleX = scaleX; - this._lastScaleY = scaleY; - return; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - var canvasEl = fabric.util.createCanvasElement(), - cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, - sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._lastScaleX = filter.scaleX = scaleX; - this._lastScaleY = filter.scaleY = scaleY; - fabric.filterBackend.applyFilters( - [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); - this._filterScalingX = canvasEl.width / this._originalElement.width; - this._filterScalingY = canvasEl.height / this._originalElement.height; - }, - /** - * Applies filters assigned to this image (from "filters" array) or from filter param - * @method applyFilters - * @param {Array} filters to be applied - * @param {Boolean} forResizing specify if the filter operation is a resize operation - * @return {thisArg} return the fabric.Image object - * @chainable - */ - applyFilters: function(filters) { +(function(global) { - filters = filters || this.filters || []; - filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); - this.set('dirty', true); + 'use strict'; - // needs to clear out or WEBGL will not resize correctly - this.removeTexture(this.cacheKey + '_filtered'); + var extend = fabric.util.object.extend; - if (filters.length === 0) { - this._element = this._originalElement; - this._filteredEl = null; - this._filterScalingX = 1; - this._filterScalingY = 1; - return this; - } + if (!global.fabric) { + global.fabric = { }; + } - var imgElement = this._originalElement, - sourceWidth = imgElement.naturalWidth || imgElement.width, - sourceHeight = imgElement.naturalHeight || imgElement.height; + if (global.fabric.Image) { + fabric.warn('fabric.Image is already defined.'); + return; + } - if (this._element === this._originalElement) { - // if the element is the same we need to create a new element - var canvasEl = fabric.util.createCanvasElement(); - canvasEl.width = sourceWidth; - canvasEl.height = sourceHeight; - this._element = canvasEl; - this._filteredEl = canvasEl; - } - else { - // clear the existing element to get new filter data - // also dereference the eventual resized _element - this._element = this._filteredEl; - this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); - // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y - this._lastScaleX = 1; - this._lastScaleY = 1; - } - if (!fabric.filterBackend) { - fabric.filterBackend = fabric.initFilterBackend(); - } - fabric.filterBackend.applyFilters( - filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); - if (this._originalElement.width !== this._element.width || - this._originalElement.height !== this._element.height) { - this._filterScalingX = this._element.width / this._originalElement.width; - this._filterScalingY = this._element.height / this._originalElement.height; - } - return this; - }, + /** + * Image class + * @class fabric.Image + * @extends fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} + * @see {@link fabric.Image#initialize} for constructor definition + */ + fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { - this.applyResizeFilters(); - } - this._stroke(ctx); - this._renderPaintInOrder(ctx); - }, + /** + * Type of an object + * @type String + * @default + */ + type: 'image', - /** - * Paint the cached copy of the object on the target context. - * it will set the imageSmoothing for the draw operation - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - drawCacheOnCanvas: function(ctx) { - fabric.util.setImageSmoothing(ctx, this.imageSmoothing); - fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); - }, + /** + * Width of a stroke. + * For image quality a stroke multiple of 2 gives better results. + * @type Number + * @default + */ + strokeWidth: 0, - /** - * Decide if the object should cache or not. Create its own cache level - * needsItsOwnCache should be used when the object drawing method requires - * a cache step. None of the fabric classes requires it. - * Generally you do not cache objects in groups because the group outside is cached. - * This is the special image version where we would like to avoid caching where possible. - * Essentially images do not benefit from caching. They may require caching, and in that - * case we do it. Also caching an image usually ends in a loss of details. - * A full performance audit should be done. - * @return {Boolean} - */ - shouldCache: function() { - return this.needsItsOwnCache(); - }, + /** + * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. + * This allows for relative urls as image src. + * @since 2.7.0 + * @type Boolean + * @default + */ + srcFromAttribute: false, - _renderFill: function(ctx) { - var elementToDraw = this._element; - if (!elementToDraw) { - return; - } - var scaleX = this._filterScalingX, scaleY = this._filterScalingY, - w = this.width, h = this.height, min = Math.min, max = Math.max, - // crop values cannot be lesser than 0. - cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), - elWidth = elementToDraw.naturalWidth || elementToDraw.width, - elHeight = elementToDraw.naturalHeight || elementToDraw.height, - sX = cropX * scaleX, - sY = cropY * scaleY, - // the width height cannot exceed element width/height, starting from the crop offset. - sW = min(w * scaleX, elWidth - sX), - sH = min(h * scaleY, elHeight - sY), - x = -w / 2, y = -h / 2, - maxDestW = min(w, elWidth / scaleX - cropX), - maxDestH = min(h, elHeight / scaleY - cropY); - - elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); - }, + /** + * private + * contains last value of scaleX to detect + * if the Image got resized after the last Render + * @type Number + */ + _lastScaleX: 1, - /** - * needed to check if image needs resize - * @private - */ - _needsResize: function() { - var scale = this.getTotalObjectScaling(); - return (scale.x !== this._lastScaleX || scale.y !== this._lastScaleY); - }, + /** + * private + * contains last value of scaleY to detect + * if the Image got resized after the last Render + * @type Number + */ + _lastScaleY: 1, - /** - * @private - */ - _resetWidthHeight: function() { - this.set(this.getOriginalSize()); - }, + /** + * private + * contains last value of scaling applied by the apply filter chain + * @type Number + */ + _filterScalingX: 1, - /** - * The Image class's initialization method. This method is automatically - * called by the constructor. - * @private - * @param {HTMLImageElement|String} element The element representing the image - * @param {Object} [options] Options object - */ - _initElement: function(element, options) { - this.setElement(fabric.util.getById(element), options); - fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); - }, + /** + * private + * contains last value of scaling applied by the apply filter chain + * @type Number + */ + _filterScalingY: 1, - /** - * @private - * @param {Object} [options] Options object - */ - _initConfig: function(options) { - options || (options = { }); - this.setOptions(options); - this._setWidthHeight(options); - }, + /** + * minimum scale factor under which any resizeFilter is triggered to resize the image + * 0 will disable the automatic resize. 1 will trigger automatically always. + * number bigger than 1 are not implemented yet. + * @type Number + */ + minimumScaleTrigger: 0.5, - /** - * @private - * Set the width and the height of the image object, using the element or the - * options. - * @param {Object} [options] Object with width/height properties - */ - _setWidthHeight: function(options) { - options || (options = { }); - var el = this.getElement(); - this.width = options.width || el.naturalWidth || el.width || 0; - this.height = options.height || el.naturalHeight || el.height || 0; - }, + /** + * List of properties to consider when checking if + * state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), - /** - * Calculate offset for center and scale factor for the image in order to respect - * the preserveAspectRatio attribute - * @private - * @return {Object} - */ - parsePreserveAspectRatioAttribute: function() { - var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), - rWidth = this._element.width, rHeight = this._element.height, - scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, - offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; - if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { - if (pAR.meetOrSlice === 'meet') { - scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); - offset = (pWidth - rWidth * scaleX) / 2; - if (pAR.alignX === 'Min') { - offsetLeft = -offset; - } - if (pAR.alignX === 'Max') { - offsetLeft = offset; - } - offset = (pHeight - rHeight * scaleY) / 2; - if (pAR.alignY === 'Min') { - offsetTop = -offset; - } - if (pAR.alignY === 'Max') { - offsetTop = offset; - } - } - if (pAR.meetOrSlice === 'slice') { - scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); - offset = rWidth - pWidth / scaleX; - if (pAR.alignX === 'Mid') { - cropX = offset / 2; - } - if (pAR.alignX === 'Max') { - cropX = offset; - } - offset = rHeight - pHeight / scaleY; - if (pAR.alignY === 'Mid') { - cropY = offset / 2; - } - if (pAR.alignY === 'Max') { - cropY = offset; - } - rWidth = pWidth / scaleX; - rHeight = pHeight / scaleY; - } - } - else { - scaleX = pWidth / rWidth; - scaleY = pHeight / rHeight; - } - return { - width: rWidth, - height: rHeight, - scaleX: scaleX, - scaleY: scaleY, - offsetLeft: offsetLeft, - offsetTop: offsetTop, - cropX: cropX, - cropY: cropY - }; - } - }); + /** + * List of properties to consider when checking if cache needs refresh + * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single + * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * and refreshed at the next render + * @type Array + */ + cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), /** - * Default CSS class name for canvas - * @static + * key used to retrieve the texture representing this image + * @since 2.0.0 * @type String * @default */ - fabric.Image.CSS_CANVAS = 'canvas-img'; + cacheKey: '', /** - * Alias for getSrc - * @static + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + * @default */ - fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; + cropX: 0, /** - * Creates an instance of fabric.Image from its object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Image.fromObject = function(_object) { - var object = Object.assign({}, _object), - filters = object.filters, - resizeFilter = object.resizeFilter; - // the generic enliving will fail on filters for now - delete object.resizeFilter; - delete object.filters; - return Promise.all([ - fabric.util.loadImage(object.src, { crossOrigin: _object.crossOrigin }), - filters && fabric.util.enlivenObjects(filters, 'fabric.Image.filters'), - resizeFilter && fabric.util.enlivenObjects([resizeFilter], 'fabric.Image.filters'), - fabric.util.enlivenObjectEnlivables(object), - ]) - .then(function(imgAndFilters) { - object.filters = imgAndFilters[1] || []; - object.resizeFilter = imgAndFilters[2] && imgAndFilters[2][0]; - return new fabric.Image(imgAndFilters[0], Object.assign(object, imgAndFilters[3])); - }); - }; + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + * @default + */ + cropY: 0, /** - * Creates an instance of fabric.Image from an URL string - * @static - * @param {String} url URL to create an image from - * @param {Object} [imgOptions] Options object - * @returns {Promise} + * Indicates whether this canvas will use image smoothing when painting this image. + * Also influence if the cacheCanvas for this image uses imageSmoothing + * @since 4.0.0-beta.11 + * @type Boolean + * @default */ - fabric.Image.fromURL = function(url, imgOptions) { - return fabric.util.loadImage(url, imgOptions || {}).then(function(img) { - return new fabric.Image(img, imgOptions); - }); - }; + imageSmoothing: true, - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement}) - * @static - * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement} + * Constructor + * Image can be initialized with any canvas drawable or a string. + * The string should be a url and will be loaded as an image. + * Canvas and Image element work out of the box, while videos require extra code to work. + * Please check video element events for seeking. + * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} element Image element + * @param {Object} [options] Options object + * @param {function} [callback] callback function to call after eventual filters applied. + * @return {fabric.Image} thisArg */ - fabric.Image.ATTRIBUTE_NAMES = - fabric.SHARED_ATTRIBUTES.concat( - 'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ') - ); + initialize: function(element, options) { + options || (options = { }); + this.filters = []; + this.cacheKey = 'texture' + fabric.Object.__uid++; + this.callSuper('initialize', options); + this._initElement(element, options); + }, /** - * Returns {@link fabric.Image} instance from an SVG element - * @static - * @param {SVGElement} element Element to parse + * Returns image element which this instance if based on + * @return {HTMLImageElement} Image element + */ + getElement: function() { + return this._element || {}; + }, + + /** + * Sets image element for this instance to a specified one. + * If filters defined they are applied to new image. + * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area. + * @param {HTMLImageElement} element * @param {Object} [options] Options object - * @param {Function} callback Callback to execute when fabric.Image object is created - * @return {fabric.Image} Instance of fabric.Image - */ - fabric.Image.fromElement = function(element, callback, options) { - var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); - fabric.Image.fromURL(parsedAttributes['xlink:href'], Object.assign({ }, options || { }, parsedAttributes)) - .then(function(fabricImage) { - callback(fabricImage); - }); - }; - /* _FROM_SVG_END_ */ + * @return {fabric.Image} thisArg + * @chainable + */ + setElement: function(element, options) { + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._element = element; + this._originalElement = element; + this._initConfig(options); + if (this.filters.length !== 0) { + this.applyFilters(); + } + // resizeFilters work on the already filtered copy. + // we need to apply resizeFilters AFTER normal filters. + // applyResizeFilters is run more often than normal filters + // and is triggered by user interactions rather than dev code + if (this.resizeFilter) { + this.applyResizeFilters(); + } + return this; + }, - })(typeof exports !== 'undefined' ? exports : window); + /** + * Delete a single texture if in webgl mode + */ + removeTexture: function(key) { + var backend = fabric.filterBackend; + if (backend && backend.evictCachesForKey) { + backend.evictCachesForKey(key); + } + }, - (function (global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Delete textures, reference to elements and eventually JSDOM cleanup + */ + dispose: function () { + this.callSuper('dispose'); + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._cacheContext = undefined; + ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { + fabric.util.cleanUpJsdomNode(this[element]); + this[element] = undefined; + }).bind(this)); + }, - /** - * @private - * @return {Number} angle value - */ - _getAngleValueForStraighten: function() { - var angle = this.angle % 360; - if (angle > 0) { - return Math.round((angle - 1) / 90) * 90; - } - return Math.round(angle / 90) * 90; - }, + /** + * Get the crossOrigin value (of the corresponding image element) + */ + getCrossOrigin: function() { + return this._originalElement && (this._originalElement.crossOrigin || null); + }, - /** - * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) - * @return {fabric.Object} thisArg - * @chainable - */ - straighten: function() { - return this.rotate(this._getAngleValueForStraighten()); - }, + /** + * Returns original size of an image + * @return {Object} Object with "width" and "height" properties + */ + getOriginalSize: function() { + var element = this.getElement(); + return { + width: element.naturalWidth || element.width, + height: element.naturalHeight || element.height + }; + }, - /** - * Same as {@link fabric.Object.prototype.straighten} but with animation - * @param {Object} callbacks Object with callback functions - * @param {Function} [callbacks.onComplete] Invoked on completion - * @param {Function} [callbacks.onChange] Invoked on every step of animation - * @return {fabric.Object} thisArg - */ - fxStraighten: function(callbacks) { - callbacks = callbacks || { }; - - var empty = function() { }, - onComplete = callbacks.onComplete || empty, - onChange = callbacks.onChange || empty, - _this = this; - - return fabric.util.animate({ - target: this, - startValue: this.get('angle'), - endValue: this._getAngleValueForStraighten(), - duration: this.FX_DURATION, - onChange: function(value) { - _this.rotate(value); - onChange(); - }, - onComplete: function() { - _this.setCoords(); - onComplete(); - }, - }); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _stroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; } - }); - - fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + var w = this.width / 2, h = this.height / 2; + ctx.beginPath(); + ctx.moveTo(-w, -h); + ctx.lineTo(w, -h); + ctx.lineTo(w, h); + ctx.lineTo(-w, h); + ctx.lineTo(-w, -h); + ctx.closePath(); + }, - /** - * Straightens object, then rerenders canvas - * @param {fabric.Object} object Object to straighten - * @return {fabric.Canvas} thisArg - * @chainable - */ - straightenObject: function (object) { - object.straighten(); - this.requestRenderAll(); - return this; - }, + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var filters = []; - /** - * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated - * @param {fabric.Object} object Object to straighten - * @return {fabric.Canvas} thisArg - */ - fxStraightenObject: function (object) { - return object.fxStraighten({ - onChange: this.requestRenderAllBound + this.filters.forEach(function(filterObj) { + if (filterObj) { + filters.push(filterObj.toObject()); + } + }); + var object = extend( + this.callSuper( + 'toObject', + ['cropX', 'cropY'].concat(propertiesToInclude) + ), { + src: this.getSrc(), + crossOrigin: this.getCrossOrigin(), + filters: filters, }); + if (this.resizeFilter) { + object.resizeFilter = this.resizeFilter.toObject(); } - }); - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric; - /** - * Tests if webgl supports certain precision - * @param {WebGL} Canvas WebGL context to test on - * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp' - * @returns {Boolean} Whether the user's browser WebGL supports given precision. - */ - function testPrecision(gl, precision){ - var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; - var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(fragmentShader, fragmentSource); - gl.compileShader(fragmentShader); - if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { - return false; - } - return true; - } + return object; + }, /** - * Indicate whether this filtering backend is supported by the user's browser. - * @param {Number} tileSize check if the tileSize is supported - * @returns {Boolean} Whether the user's browser supports WebGL. + * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height. + * @return {Boolean} */ - fabric.isWebglSupported = function(tileSize) { - if (fabric.isLikelyNode) { - return false; - } - tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; - var canvas = document.createElement('canvas'); - var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); - var isSupported = false; - // eslint-disable-next-line - if (gl) { - fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); - isSupported = fabric.maxTextureSize >= tileSize; - var precisions = ['highp', 'mediump', 'lowp']; - for (var i = 0; i < 3; i++){ - if (testPrecision(gl, precisions[i])){ - fabric.webGlPrecision = precisions[i]; - break; - } } - } - this.isSupported = isSupported; - return isSupported; - }; - - fabric.WebglFilterBackend = WebglFilterBackend; + hasCrop: function() { + return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; + }, + /* _TO_SVG_START_ */ /** - * WebGL filter backend. + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance */ - function WebglFilterBackend(options) { - if (options && options.tileSize) { - this.tileSize = options.tileSize; + _toSVG: function() { + var svgString = [], imageMarkup = [], strokeSvg, element = this._element, + x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; + if (!element) { + return []; } - this.setupGLContext(this.tileSize, this.tileSize); - this.captureGPUInfo(); - } - WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { + if (this.hasCrop()) { + var clipPathId = fabric.Object.__uid++; + svgString.push( + '\n', + '\t\n', + '\n' + ); + clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; + } + if (!this.imageSmoothing) { + imageRendering = '" image-rendering="optimizeSpeed'; + } + imageMarkup.push('\t\n'); + + if (this.stroke || this.strokeDashArray) { + var origFill = this.fill; + this.fill = null; + strokeSvg = [ + '\t\n' + ]; + this.fill = origFill; + } + if (this.paintFirst !== 'fill') { + svgString = svgString.concat(strokeSvg, imageMarkup); + } + else { + svgString = svgString.concat(imageMarkup, strokeSvg); + } + return svgString; + }, + /* _TO_SVG_END_ */ - tileSize: 2048, + /** + * Returns source of an image + * @param {Boolean} filtered indicates if the src is needed for svg + * @return {String} Source of an image + */ + getSrc: function(filtered) { + var element = filtered ? this._element : this._originalElement; + if (element) { + if (element.toDataURL) { + return element.toDataURL(); + } - /** - * Experimental. This object is a sort of repository of help layers used to avoid - * of recreating them during frequent filtering. If you are previewing a filter with - * a slider you probably do not want to create help layers every filter step. - * in this object there will be appended some canvases, created once, resized sometimes - * cleared never. Clearing is left to the developer. - **/ - resources: { + if (this.srcFromAttribute) { + return element.getAttribute('src'); + } + else { + return element.src; + } + } + else { + return this.src || ''; + } + }, - }, + /** + * Sets source of an image + * @param {String} src Source string (URL) + * @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied) + * @param {Object} [options] Options object + * @param {String} [options.crossOrigin] crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @return {fabric.Image} thisArg + * @chainable + */ + setSrc: function(src, callback, options) { + fabric.util.loadImage(src, function(img, isError) { + this.setElement(img, options); + this._setWidthHeight(); + callback && callback(this, isError); + }, this, options && options.crossOrigin); + return this; + }, + + /** + * Returns string representation of an instance + * @return {String} String representation of an instance + */ + toString: function() { + return '#'; + }, + + applyResizeFilters: function() { + var filter = this.resizeFilter, + minimumScale = this.minimumScaleTrigger, + objectScale = this.getTotalObjectScaling(), + scaleX = objectScale.scaleX, + scaleY = objectScale.scaleY, + elementToFilter = this._filteredEl || this._originalElement; + if (this.group) { + this.set('dirty', true); + } + if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { + this._element = elementToFilter; + this._filterScalingX = 1; + this._filterScalingY = 1; + this._lastScaleX = scaleX; + this._lastScaleY = scaleY; + return; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + var canvasEl = fabric.util.createCanvasElement(), + cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, + sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._lastScaleX = filter.scaleX = scaleX; + this._lastScaleY = filter.scaleY = scaleY; + fabric.filterBackend.applyFilters( + [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); + this._filterScalingX = canvasEl.width / this._originalElement.width; + this._filterScalingY = canvasEl.height / this._originalElement.height; + }, + + /** + * Applies filters assigned to this image (from "filters" array) or from filter param + * @method applyFilters + * @param {Array} filters to be applied + * @param {Boolean} forResizing specify if the filter operation is a resize operation + * @return {thisArg} return the fabric.Image object + * @chainable + */ + applyFilters: function(filters) { + + filters = filters || this.filters || []; + filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); + this.set('dirty', true); + + // needs to clear out or WEBGL will not resize correctly + this.removeTexture(this.cacheKey + '_filtered'); + + if (filters.length === 0) { + this._element = this._originalElement; + this._filteredEl = null; + this._filterScalingX = 1; + this._filterScalingY = 1; + return this; + } - /** - * Setup a WebGL context suitable for filtering, and bind any needed event handlers. - */ - setupGLContext: function(width, height) { - this.dispose(); - this.createWebGLCanvas(width, height); - // eslint-disable-next-line - this.aPosition = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]); - this.chooseFastestCopyGLTo2DMethod(width, height); - }, + var imgElement = this._originalElement, + sourceWidth = imgElement.naturalWidth || imgElement.width, + sourceHeight = imgElement.naturalHeight || imgElement.height; - /** - * Pick a method to copy data from GL context to 2d canvas. In some browsers using - * putImageData is faster than drawImage for that specific operation. - */ - chooseFastestCopyGLTo2DMethod: function(width, height) { - var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; - try { - new ImageData(1, 1); - canUseImageData = true; - } - catch (e) { - canUseImageData = false; - } - // eslint-disable-next-line no-undef - var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; - // eslint-disable-next-line no-undef - var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; + if (this._element === this._originalElement) { + // if the element is the same we need to create a new element + var canvasEl = fabric.util.createCanvasElement(); + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._filteredEl = canvasEl; + } + else { + // clear the existing element to get new filter data + // also dereference the eventual resized _element + this._element = this._filteredEl; + this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); + // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y + this._lastScaleX = 1; + this._lastScaleY = 1; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + fabric.filterBackend.applyFilters( + filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); + if (this._originalElement.width !== this._element.width || + this._originalElement.height !== this._element.height) { + this._filterScalingX = this._element.width / this._originalElement.width; + this._filterScalingY = this._element.height / this._originalElement.height; + } + return this; + }, - if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { - return; - } + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { + this.applyResizeFilters(); + } + this._stroke(ctx); + this._renderPaintInOrder(ctx); + }, - var targetCanvas = fabric.util.createCanvasElement(); - // eslint-disable-next-line no-undef - var imageBuffer = new ArrayBuffer(width * height * 4); - if (fabric.forceGLPutImageData) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - return; - } - var testContext = { - imageBuffer: imageBuffer, - destinationWidth: width, - destinationHeight: height, - targetCanvas: targetCanvas - }; - var startTime, drawImageTime, putImageDataTime; - targetCanvas.width = width; - targetCanvas.height = height; + /** + * Paint the cached copy of the object on the target context. + * it will set the imageSmoothing for the draw operation + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawCacheOnCanvas: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); + }, - startTime = window.performance.now(); - copyGLTo2DDrawImage.call(testContext, this.gl, testContext); - drawImageTime = window.performance.now() - startTime; + /** + * Decide if the object should cache or not. Create its own cache level + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * This is the special image version where we would like to avoid caching where possible. + * Essentially images do not benefit from caching. They may require caching, and in that + * case we do it. Also caching an image usually ends in a loss of details. + * A full performance audit should be done. + * @return {Boolean} + */ + shouldCache: function() { + return this.needsItsOwnCache(); + }, - startTime = window.performance.now(); - copyGLTo2DPutImageData.call(testContext, this.gl, testContext); - putImageDataTime = window.performance.now() - startTime; + _renderFill: function(ctx) { + var elementToDraw = this._element; + if (!elementToDraw) { + return; + } + var scaleX = this._filterScalingX, scaleY = this._filterScalingY, + w = this.width, h = this.height, min = Math.min, max = Math.max, + // crop values cannot be lesser than 0. + cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), + elWidth = elementToDraw.naturalWidth || elementToDraw.width, + elHeight = elementToDraw.naturalHeight || elementToDraw.height, + sX = cropX * scaleX, + sY = cropY * scaleY, + // the width height cannot exceed element width/height, starting from the crop offset. + sW = min(w * scaleX, elWidth - sX), + sH = min(h * scaleY, elHeight - sY), + x = -w / 2, y = -h / 2, + maxDestW = min(w, elWidth / scaleX - cropX), + maxDestH = min(h, elHeight / scaleY - cropY); + + elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); + }, + + /** + * needed to check if image needs resize + * @private + */ + _needsResize: function() { + var scale = this.getTotalObjectScaling(); + return (scale.scaleX !== this._lastScaleX || scale.scaleY !== this._lastScaleY); + }, - if (drawImageTime > putImageDataTime) { - this.imageBuffer = imageBuffer; - this.copyGLTo2D = copyGLTo2DPutImageData; - } - else { - this.copyGLTo2D = copyGLTo2DDrawImage; - } - }, + /** + * @private + */ + _resetWidthHeight: function() { + this.set(this.getOriginalSize()); + }, - /** - * Create a canvas element and associated WebGL context and attaches them as - * class properties to the GLFilterBackend class. - */ - createWebGLCanvas: function(width, height) { - var canvas = fabric.util.createCanvasElement(); - canvas.width = width; - canvas.height = height; - var glOptions = { - alpha: true, - premultipliedAlpha: false, - depth: false, - stencil: false, - antialias: false - }, - gl = canvas.getContext('webgl', glOptions); - if (!gl) { - gl = canvas.getContext('experimental-webgl', glOptions); - } - if (!gl) { - return; - } - gl.clearColor(0, 0, 0, 0); - // this canvas can fire webglcontextlost and webglcontextrestored - this.canvas = canvas; - this.gl = gl; - }, + /** + * The Image class's initialization method. This method is automatically + * called by the constructor. + * @private + * @param {HTMLImageElement|String} element The element representing the image + * @param {Object} [options] Options object + */ + _initElement: function(element, options) { + this.setElement(fabric.util.getById(element), options); + fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); + }, - /** - * Attempts to apply the requested filters to the source provided, drawing the filtered output - * to the provided target canvas. - * - * @param {Array} filters The filters to apply. - * @param {HTMLImageElement|HTMLCanvasElement} source The source to be filtered. - * @param {Number} width The width of the source input. - * @param {Number} height The height of the source input. - * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. - * @param {String|undefined} cacheKey A key used to cache resources related to the source. If - * omitted, caching will be skipped. - */ - applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { - var gl = this.gl; - var cachedTexture; - if (cacheKey) { - cachedTexture = this.getCachedTexture(cacheKey, source); - } - var pipelineState = { - originalWidth: source.width || source.originalWidth, - originalHeight: source.height || source.originalHeight, - sourceWidth: width, - sourceHeight: height, - destinationWidth: width, - destinationHeight: height, - context: gl, - sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), - targetTexture: this.createTexture(gl, width, height), - originalTexture: cachedTexture || - this.createTexture(gl, width, height, !cachedTexture && source), - passes: filters.length, - webgl: true, - aPosition: this.aPosition, - programCache: this.programCache, - pass: 0, - filterBackend: this, - targetCanvas: targetCanvas - }; - var tempFbo = gl.createFramebuffer(); - gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); - filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); - resizeCanvasIfNeeded(pipelineState); - this.copyGLTo2D(gl, pipelineState); - gl.bindTexture(gl.TEXTURE_2D, null); - gl.deleteTexture(pipelineState.sourceTexture); - gl.deleteTexture(pipelineState.targetTexture); - gl.deleteFramebuffer(tempFbo); - targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); - return pipelineState; - }, + /** + * @private + * @param {Object} [options] Options object + */ + _initConfig: function(options) { + options || (options = { }); + this.setOptions(options); + this._setWidthHeight(options); + }, - /** - * Detach event listeners, remove references, and clean up caches. - */ - dispose: function() { - if (this.canvas) { - this.canvas = null; - this.gl = null; - } - this.clearWebGLCaches(); - }, + /** + * @private + * @param {Array} filters to be initialized + * @param {Function} callback Callback to invoke when all fabric.Image.filters instances are created + */ + _initFilters: function(filters, callback) { + if (filters && filters.length) { + fabric.util.enlivenObjects(filters, function(enlivenedObjects) { + callback && callback(enlivenedObjects); + }, 'fabric.Image.filters'); + } + else { + callback && callback(); + } + }, - /** - * Wipe out WebGL-related caches. - */ - clearWebGLCaches: function() { - this.programCache = {}; - this.textureCache = {}; - }, + /** + * @private + * Set the width and the height of the image object, using the element or the + * options. + * @param {Object} [options] Object with width/height properties + */ + _setWidthHeight: function(options) { + options || (options = { }); + var el = this.getElement(); + this.width = options.width || el.naturalWidth || el.width || 0; + this.height = options.height || el.naturalHeight || el.height || 0; + }, - /** - * Create a WebGL texture object. - * - * Accepts specific dimensions to initialize the texture to or a source image. - * - * @param {WebGLRenderingContext} gl The GL context to use for creating the texture. - * @param {Number} width The width to initialize the texture at. - * @param {Number} height The height to initialize the texture. - * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data. - * @returns {WebGLTexture} - */ - createTexture: function(gl, width, height, textureImageSource) { - var texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - if (textureImageSource) { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); + /** + * Calculate offset for center and scale factor for the image in order to respect + * the preserveAspectRatio attribute + * @private + * @return {Object} + */ + parsePreserveAspectRatioAttribute: function() { + var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), + rWidth = this._element.width, rHeight = this._element.height, + scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, + offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; + if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { + if (pAR.meetOrSlice === 'meet') { + scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); + offset = (pWidth - rWidth * scaleX) / 2; + if (pAR.alignX === 'Min') { + offsetLeft = -offset; + } + if (pAR.alignX === 'Max') { + offsetLeft = offset; + } + offset = (pHeight - rHeight * scaleY) / 2; + if (pAR.alignY === 'Min') { + offsetTop = -offset; + } + if (pAR.alignY === 'Max') { + offsetTop = offset; + } } - else { - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + if (pAR.meetOrSlice === 'slice') { + scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); + offset = rWidth - pWidth / scaleX; + if (pAR.alignX === 'Mid') { + cropX = offset / 2; + } + if (pAR.alignX === 'Max') { + cropX = offset; + } + offset = rHeight - pHeight / scaleY; + if (pAR.alignY === 'Mid') { + cropY = offset / 2; + } + if (pAR.alignY === 'Max') { + cropY = offset; + } + rWidth = pWidth / scaleX; + rHeight = pHeight / scaleY; } - return texture; - }, + } + else { + scaleX = pWidth / rWidth; + scaleY = pHeight / rHeight; + } + return { + width: rWidth, + height: rHeight, + scaleX: scaleX, + scaleY: scaleY, + offsetLeft: offsetLeft, + offsetTop: offsetTop, + cropX: cropX, + cropY: cropY + }; + } + }); - /** - * Can be optionally used to get a texture from the cache array - * - * If an existing texture is not found, a new texture is created and cached. - * - * @param {String} uniqueId A cache key to use to find an existing texture. - * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the - * texture cache entry if one does not already exist. - */ - getCachedTexture: function(uniqueId, textureImageSource) { - if (this.textureCache[uniqueId]) { - return this.textureCache[uniqueId]; - } - else { - var texture = this.createTexture( - this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); - this.textureCache[uniqueId] = texture; - return texture; - } - }, + /** + * Default CSS class name for canvas + * @static + * @type String + * @default + */ + fabric.Image.CSS_CANVAS = 'canvas-img'; - /** - * Clear out cached resources related to a source image that has been - * filtered previously. - * - * @param {String} cacheKey The cache key provided when the source image was filtered. - */ - evictCachesForKey: function(cacheKey) { - if (this.textureCache[cacheKey]) { - this.gl.deleteTexture(this.textureCache[cacheKey]); - delete this.textureCache[cacheKey]; - } - }, + /** + * Alias for getSrc + * @static + */ + fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; + + /** + * Creates an instance of fabric.Image from its object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} callback Callback to invoke when an image instance is created + */ + fabric.Image.fromObject = function(_object, callback) { + var object = fabric.util.object.clone(_object); + fabric.util.loadImage(object.src, function(img, isError) { + if (isError) { + callback && callback(null, true); + return; + } + fabric.Image.prototype._initFilters.call(object, object.filters, function(filters) { + object.filters = filters || []; + fabric.Image.prototype._initFilters.call(object, [object.resizeFilter], function(resizeFilters) { + object.resizeFilter = resizeFilters[0]; + fabric.util.enlivenObjectEnlivables(object, object, function () { + var image = new fabric.Image(img, object); + callback(image, false); + }); + }); + }); + }, null, object.crossOrigin); + }; - copyGLTo2D: copyGLTo2DDrawImage, + /** + * Creates an instance of fabric.Image from an URL string + * @static + * @param {String} url URL to create an image from + * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument). Second argument is a boolean indicating if an error occurred or not. + * @param {Object} [imgOptions] Options object + */ + fabric.Image.fromURL = function(url, callback, imgOptions) { + fabric.util.loadImage(url, function(img, isError) { + callback && callback(new fabric.Image(img, imgOptions), isError); + }, null, imgOptions && imgOptions.crossOrigin); + }; - /** - * Attempt to extract GPU information strings from a WebGL context. - * - * Useful information when debugging or blacklisting specific GPUs. - * - * @returns {Object} A GPU info object with renderer and vendor strings. - */ - captureGPUInfo: function() { - if (this.gpuInfo) { - return this.gpuInfo; - } - var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; - if (!gl) { - return gpuInfo; - } - var ext = gl.getExtension('WEBGL_debug_renderer_info'); - if (ext) { - var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); - var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); - if (renderer) { - gpuInfo.renderer = renderer.toLowerCase(); - } - if (vendor) { - gpuInfo.vendor = vendor.toLowerCase(); - } - } - this.gpuInfo = gpuInfo; - return gpuInfo; - }, - }; - })(typeof exports !== 'undefined' ? exports : window); + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement}) + * @static + * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement} + */ + fabric.Image.ATTRIBUTE_NAMES = + fabric.SHARED_ATTRIBUTES.concat( + 'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ') + ); + + /** + * Returns {@link fabric.Image} instance from an SVG element + * @static + * @param {SVGElement} element Element to parse + * @param {Object} [options] Options object + * @param {Function} callback Callback to execute when fabric.Image object is created + * @return {fabric.Image} Instance of fabric.Image + */ + fabric.Image.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); + fabric.Image.fromURL(parsedAttributes['xlink:href'], callback, + extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes)); + }; + /* _FROM_SVG_END_ */ + +})(typeof exports !== 'undefined' ? exports : this); - function resizeCanvasIfNeeded(pipelineState) { - var targetCanvas = pipelineState.targetCanvas, - width = targetCanvas.width, height = targetCanvas.height, - dWidth = pipelineState.destinationWidth, - dHeight = pipelineState.destinationHeight; - if (width !== dWidth || height !== dHeight) { - targetCanvas.width = dWidth; - targetCanvas.height = dHeight; +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + + /** + * @private + * @return {Number} angle value + */ + _getAngleValueForStraighten: function() { + var angle = this.angle % 360; + if (angle > 0) { + return Math.round((angle - 1) / 90) * 90; } + return Math.round(angle / 90) * 90; + }, + + /** + * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) + * @return {fabric.Object} thisArg + * @chainable + */ + straighten: function() { + return this.rotate(this._getAngleValueForStraighten()); + }, + + /** + * Same as {@link fabric.Object.prototype.straighten} but with animation + * @param {Object} callbacks Object with callback functions + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Object} thisArg + */ + fxStraighten: function(callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + return fabric.util.animate({ + target: this, + startValue: this.get('angle'), + endValue: this._getAngleValueForStraighten(), + duration: this.FX_DURATION, + onChange: function(value) { + _this.rotate(value); + onChange(); + }, + onComplete: function() { + _this.setCoords(); + onComplete(); + }, + }); } +}); + +fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { /** - * Copy an input WebGL canvas on to an output 2D canvas. - * - * The WebGL canvas is assumed to be upside down, with the top-left pixel of the - * desired output image appearing in the bottom-left corner of the WebGL canvas. - * - * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. - * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. - * @param {Object} pipelineState The 2D target canvas to copy on to. - */ - function copyGLTo2DDrawImage(gl, pipelineState) { - var glCanvas = gl.canvas, targetCanvas = pipelineState.targetCanvas, - ctx = targetCanvas.getContext('2d'); - ctx.translate(0, targetCanvas.height); // move it down again - ctx.scale(1, -1); // vertical flip - // where is my image on the big glcanvas? - var sourceY = glCanvas.height - targetCanvas.height; - ctx.drawImage(glCanvas, 0, sourceY, targetCanvas.width, targetCanvas.height, 0, 0, - targetCanvas.width, targetCanvas.height); + * Straightens object, then rerenders canvas + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + straightenObject: function (object) { + object.straighten(); + this.requestRenderAll(); + return this; + }, + + /** + * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + */ + fxStraightenObject: function (object) { + return object.fxStraighten({ + onChange: this.requestRenderAllBound + }); } +}); + + +(function() { + + 'use strict'; /** - * Copy an input WebGL canvas on to an output 2D canvas using 2d canvas' putImageData - * API. Measurably faster than using ctx.drawImage in Firefox (version 54 on OSX Sierra). - * - * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. - * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. - * @param {Object} pipelineState The 2D target canvas to copy on to. - */ - function copyGLTo2DPutImageData(gl, pipelineState) { - var targetCanvas = pipelineState.targetCanvas, ctx = targetCanvas.getContext('2d'), - dWidth = pipelineState.destinationWidth, - dHeight = pipelineState.destinationHeight, - numBytes = dWidth * dHeight * 4; - - // eslint-disable-next-line no-undef - var u8 = new Uint8Array(this.imageBuffer, 0, numBytes); - // eslint-disable-next-line no-undef - var u8Clamped = new Uint8ClampedArray(this.imageBuffer, 0, numBytes); - - gl.readPixels(0, 0, dWidth, dHeight, gl.RGBA, gl.UNSIGNED_BYTE, u8); - var imgData = new ImageData(u8Clamped, dWidth, dHeight); - ctx.putImageData(imgData, 0, 0); + * Tests if webgl supports certain precision + * @param {WebGL} Canvas WebGL context to test on + * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp' + * @returns {Boolean} Whether the user's browser WebGL supports given precision. + */ + function testPrecision(gl, precision){ + var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + return false; + } + return true; } - (function(global) { - var fabric = global.fabric, noop = function() {}; + /** + * Indicate whether this filtering backend is supported by the user's browser. + * @param {Number} tileSize check if the tileSize is supported + * @returns {Boolean} Whether the user's browser supports WebGL. + */ + fabric.isWebglSupported = function(tileSize) { + if (fabric.isLikelyNode) { + return false; + } + tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; + var canvas = document.createElement('canvas'); + var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); + var isSupported = false; + // eslint-disable-next-line + if (gl) { + fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); + isSupported = fabric.maxTextureSize >= tileSize; + var precisions = ['highp', 'mediump', 'lowp']; + for (var i = 0; i < 3; i++){ + if (testPrecision(gl, precisions[i])){ + fabric.webGlPrecision = precisions[i]; + break; + }; + } + } + this.isSupported = isSupported; + return isSupported; + }; - fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; + fabric.WebglFilterBackend = WebglFilterBackend; - /** - * Canvas 2D filter backend. - */ - function Canvas2dFilterBackend() {} - Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { - evictCachesForKey: noop, - dispose: noop, - clearWebGLCaches: noop, + /** + * WebGL filter backend. + */ + function WebglFilterBackend(options) { + if (options && options.tileSize) { + this.tileSize = options.tileSize; + } + this.setupGLContext(this.tileSize, this.tileSize); + this.captureGPUInfo(); + }; - /** - * Experimental. This object is a sort of repository of help layers used to avoid - * of recreating them during frequent filtering. If you are previewing a filter with - * a slider you probably do not want to create help layers every filter step. - * in this object there will be appended some canvases, created once, resized sometimes - * cleared never. Clearing is left to the developer. - **/ - resources: { + WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { - }, + tileSize: 2048, - /** - * Apply a set of filters against a source image and draw the filtered output - * to the provided destination canvas. - * - * @param {EnhancedFilter} filters The filter to apply. - * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. - * @param {Number} sourceWidth The width of the source input. - * @param {Number} sourceHeight The height of the source input. - * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. - */ - applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { - var ctx = targetCanvas.getContext('2d'); - ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); - var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); - var pipelineState = { - sourceWidth: sourceWidth, - sourceHeight: sourceHeight, - imageData: imageData, - originalEl: sourceElement, - originalImageData: originalImageData, - canvasEl: targetCanvas, - ctx: ctx, - filterBackend: this, - }; - filters.forEach(function(filter) { filter.applyTo(pipelineState); }); - if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { - targetCanvas.width = pipelineState.imageData.width; - targetCanvas.height = pipelineState.imageData.height; - } - ctx.putImageData(pipelineState.imageData, 0, 0); - return pipelineState; - }, + /** + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { - }; - })(typeof exports !== 'undefined' ? exports : window); + }, - (function(global) { - var fabric = global.fabric; /** - * @namespace fabric.Image.filters - * @memberOf fabric.Image - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters} - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * Setup a WebGL context suitable for filtering, and bind any needed event handlers. */ - fabric.Image.filters = fabric.Image.filters || { }; + setupGLContext: function(width, height) { + this.dispose(); + this.createWebGLCanvas(width, height); + // eslint-disable-next-line + this.aPosition = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]); + this.chooseFastestCopyGLTo2DMethod(width, height); + }, /** - * Root filter class from which all filter classes inherit from - * @class fabric.Image.filters.BaseFilter - * @memberOf fabric.Image.filters + * Pick a method to copy data from GL context to 2d canvas. In some browsers using + * putImageData is faster than drawImage for that specific operation. */ - fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'BaseFilter', + chooseFastestCopyGLTo2DMethod: function(width, height) { + var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; + try { + new ImageData(1, 1); + canUseImageData = true; + } + catch (e) { + canUseImageData = false; + } + // eslint-disable-next-line no-undef + var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; + // eslint-disable-next-line no-undef + var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; - /** - * Array of attributes to send with buffers. do not modify - * @private - */ + if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { + return; + } - vertexSource: 'attribute vec2 aPosition;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vTexCoord = aPosition;\n' + - 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + - '}', + var targetCanvas = fabric.util.createCanvasElement(); + // eslint-disable-next-line no-undef + var imageBuffer = new ArrayBuffer(width * height * 4); + if (fabric.forceGLPutImageData) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + return; + } + var testContext = { + imageBuffer: imageBuffer, + destinationWidth: width, + destinationHeight: height, + targetCanvas: targetCanvas + }; + var startTime, drawImageTime, putImageDataTime; + targetCanvas.width = width; + targetCanvas.height = height; - fragmentSource: 'precision highp float;\n' + - 'varying vec2 vTexCoord;\n' + - 'uniform sampler2D uTexture;\n' + - 'void main() {\n' + - 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + - '}', + startTime = window.performance.now(); + copyGLTo2DDrawImage.call(testContext, this.gl, testContext); + drawImageTime = window.performance.now() - startTime; - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - if (options) { - this.setOptions(options); - } - }, + startTime = window.performance.now(); + copyGLTo2DPutImageData.call(testContext, this.gl, testContext); + putImageDataTime = window.performance.now() - startTime; - /** - * Sets filter's properties from options - * @param {Object} [options] Options object - */ - setOptions: function(options) { - for (var prop in options) { - this[prop] = options[prop]; - } - }, + if (drawImageTime > putImageDataTime) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + } + else { + this.copyGLTo2D = copyGLTo2DDrawImage; + } + }, - /** - * Compile this filter's shader program. - * - * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation. - * @param {String} fragmentSource fragmentShader source for compilation - * @param {String} vertexSource vertexShader source for compilation - */ - createProgram: function(gl, fragmentSource, vertexSource) { - fragmentSource = fragmentSource || this.fragmentSource; - vertexSource = vertexSource || this.vertexSource; - if (fabric.webGlPrecision !== 'highp'){ - fragmentSource = fragmentSource.replace( - /precision highp float/g, - 'precision ' + fabric.webGlPrecision + ' float' - ); - } - var vertexShader = gl.createShader(gl.VERTEX_SHADER); - gl.shaderSource(vertexShader, vertexSource); - gl.compileShader(vertexShader); - if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Vertex shader compile error for ' + this.type + ': ' + - gl.getShaderInfoLog(vertexShader) - ); - } - - var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); - gl.shaderSource(fragmentShader, fragmentSource); - gl.compileShader(fragmentShader); - if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Fragment shader compile error for ' + this.type + ': ' + - gl.getShaderInfoLog(fragmentShader) - ); - } - - var program = gl.createProgram(); - gl.attachShader(program, vertexShader); - gl.attachShader(program, fragmentShader); - gl.linkProgram(program); - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { - throw new Error( - // eslint-disable-next-line prefer-template - 'Shader link error for "${this.type}" ' + - gl.getProgramInfoLog(program) - ); - } - - var attributeLocations = this.getAttributeLocations(gl, program); - var uniformLocations = this.getUniformLocations(gl, program) || { }; - uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW'); - uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH'); - return { - program: program, - attributeLocations: attributeLocations, - uniformLocations: uniformLocations - }; - }, - - /** - * Return a map of attribute names to WebGLAttributeLocation objects. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {WebGLShaderProgram} program The shader program from which to take attribute locations. - * @returns {Object} A map of attribute names to attribute locations. - */ - getAttributeLocations: function(gl, program) { - return { - aPosition: gl.getAttribLocation(program, 'aPosition'), - }; - }, + /** + * Create a canvas element and associated WebGL context and attaches them as + * class properties to the GLFilterBackend class. + */ + createWebGLCanvas: function(width, height) { + var canvas = fabric.util.createCanvasElement(); + canvas.width = width; + canvas.height = height; + var glOptions = { + alpha: true, + premultipliedAlpha: false, + depth: false, + stencil: false, + antialias: false + }, + gl = canvas.getContext('webgl', glOptions); + if (!gl) { + gl = canvas.getContext('experimental-webgl', glOptions); + } + if (!gl) { + return; + } + gl.clearColor(0, 0, 0, 0); + // this canvas can fire webglcontextlost and webglcontextrestored + this.canvas = canvas; + this.gl = gl; + }, - /** - * Return a map of uniform names to WebGLUniformLocation objects. - * - * Intended to be overridden by subclasses. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {WebGLShaderProgram} program The shader program from which to take uniform locations. - * @returns {Object} A map of uniform names to uniform locations. - */ - getUniformLocations: function (/* gl, program */) { - // in case i do not need any special uniform i need to return an empty object - return { }; - }, + /** + * Attempts to apply the requested filters to the source provided, drawing the filtered output + * to the provided target canvas. + * + * @param {Array} filters The filters to apply. + * @param {HTMLImageElement|HTMLCanvasElement} source The source to be filtered. + * @param {Number} width The width of the source input. + * @param {Number} height The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + * @param {String|undefined} cacheKey A key used to cache resources related to the source. If + * omitted, caching will be skipped. + */ + applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { + var gl = this.gl; + var cachedTexture; + if (cacheKey) { + cachedTexture = this.getCachedTexture(cacheKey, source); + } + var pipelineState = { + originalWidth: source.width || source.originalWidth, + originalHeight: source.height || source.originalHeight, + sourceWidth: width, + sourceHeight: height, + destinationWidth: width, + destinationHeight: height, + context: gl, + sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), + targetTexture: this.createTexture(gl, width, height), + originalTexture: cachedTexture || + this.createTexture(gl, width, height, !cachedTexture && source), + passes: filters.length, + webgl: true, + aPosition: this.aPosition, + programCache: this.programCache, + pass: 0, + filterBackend: this, + targetCanvas: targetCanvas + }; + var tempFbo = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); + filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); + resizeCanvasIfNeeded(pipelineState); + this.copyGLTo2D(gl, pipelineState); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.deleteTexture(pipelineState.sourceTexture); + gl.deleteTexture(pipelineState.targetTexture); + gl.deleteFramebuffer(tempFbo); + targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); + return pipelineState; + }, - /** - * Send attribute data from this filter to its shader program on the GPU. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {Object} attributeLocations A map of shader attribute names to their locations. - */ - sendAttributeData: function(gl, attributeLocations, aPositionData) { - var attributeLocation = attributeLocations.aPosition; - var buffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, buffer); - gl.enableVertexAttribArray(attributeLocation); - gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); - gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW); - }, + /** + * Detach event listeners, remove references, and clean up caches. + */ + dispose: function() { + if (this.canvas) { + this.canvas = null; + this.gl = null; + } + this.clearWebGLCaches(); + }, - _setupFrameBuffer: function(options) { - var gl = options.context, width, height; - if (options.passes > 1) { - width = options.destinationWidth; - height = options.destinationHeight; - if (options.sourceWidth !== width || options.sourceHeight !== height) { - gl.deleteTexture(options.targetTexture); - options.targetTexture = options.filterBackend.createTexture(gl, width, height); - } - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, - options.targetTexture, 0); - } - else { - // draw last filter on canvas and not to framebuffer. - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.finish(); - } - }, + /** + * Wipe out WebGL-related caches. + */ + clearWebGLCaches: function() { + this.programCache = {}; + this.textureCache = {}; + }, - _swapTextures: function(options) { - options.passes--; - options.pass++; - var temp = options.targetTexture; - options.targetTexture = options.sourceTexture; - options.sourceTexture = temp; - }, + /** + * Create a WebGL texture object. + * + * Accepts specific dimensions to initialize the texture to or a source image. + * + * @param {WebGLRenderingContext} gl The GL context to use for creating the texture. + * @param {Number} width The width to initialize the texture at. + * @param {Number} height The height to initialize the texture. + * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data. + * @returns {WebGLTexture} + */ + createTexture: function(gl, width, height, textureImageSource) { + var texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + if (textureImageSource) { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); + } + else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + } + return texture; + }, - /** - * Generic isNeutral implementation for one parameter based filters. - * Used only in image applyFilters to discard filters that will not have an effect - * on the image - * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter ) - * @param {Object} options - **/ - isNeutralState: function(/* options */) { - var main = this.mainParameter, - _class = fabric.Image.filters[this.type].prototype; - if (main) { - if (Array.isArray(_class[main])) { - for (var i = _class[main].length; i--;) { - if (this[main][i] !== _class[main][i]) { - return false; - } - } - return true; - } - else { - return _class[main] === this[main]; - } - } - else { - return false; - } - }, + /** + * Can be optionally used to get a texture from the cache array + * + * If an existing texture is not found, a new texture is created and cached. + * + * @param {String} uniqueId A cache key to use to find an existing texture. + * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the + * texture cache entry if one does not already exist. + */ + getCachedTexture: function(uniqueId, textureImageSource) { + if (this.textureCache[uniqueId]) { + return this.textureCache[uniqueId]; + } + else { + var texture = this.createTexture( + this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); + this.textureCache[uniqueId] = texture; + return texture; + } + }, - /** - * Apply this filter to the input image data provided. - * - * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyTo: function(options) { - if (options.webgl) { - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - } - else { - this.applyTo2d(options); - } - }, + /** + * Clear out cached resources related to a source image that has been + * filtered previously. + * + * @param {String} cacheKey The cache key provided when the source image was filtered. + */ + evictCachesForKey: function(cacheKey) { + if (this.textureCache[cacheKey]) { + this.gl.deleteTexture(this.textureCache[cacheKey]); + delete this.textureCache[cacheKey]; + } + }, - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - if (!options.programCache.hasOwnProperty(this.type)) { - options.programCache[this.type] = this.createProgram(options.context); - } - return options.programCache[this.type]; - }, + copyGLTo2D: copyGLTo2DDrawImage, - /** - * Apply this filter using webgl. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.originalTexture The texture of the original input image. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyToWebGL: function(options) { - var gl = options.context; - var shader = this.retrieveShader(options); - if (options.pass === 0 && options.originalTexture) { - gl.bindTexture(gl.TEXTURE_2D, options.originalTexture); + /** + * Attempt to extract GPU information strings from a WebGL context. + * + * Useful information when debugging or blacklisting specific GPUs. + * + * @returns {Object} A GPU info object with renderer and vendor strings. + */ + captureGPUInfo: function() { + if (this.gpuInfo) { + return this.gpuInfo; + } + var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; + if (!gl) { + return gpuInfo; + } + var ext = gl.getExtension('WEBGL_debug_renderer_info'); + if (ext) { + var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); + var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); + if (renderer) { + gpuInfo.renderer = renderer.toLowerCase(); } - else { - gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture); + if (vendor) { + gpuInfo.vendor = vendor.toLowerCase(); } - gl.useProgram(shader.program); - this.sendAttributeData(gl, shader.attributeLocations, options.aPosition); + } + this.gpuInfo = gpuInfo; + return gpuInfo; + }, + }; +})(); - gl.uniform1f(shader.uniformLocations.uStepW, 1 / options.sourceWidth); - gl.uniform1f(shader.uniformLocations.uStepH, 1 / options.sourceHeight); +function resizeCanvasIfNeeded(pipelineState) { + var targetCanvas = pipelineState.targetCanvas, + width = targetCanvas.width, height = targetCanvas.height, + dWidth = pipelineState.destinationWidth, + dHeight = pipelineState.destinationHeight; - this.sendUniformData(gl, shader.uniformLocations); - gl.viewport(0, 0, options.destinationWidth, options.destinationHeight); - gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); - }, + if (width !== dWidth || height !== dHeight) { + targetCanvas.width = dWidth; + targetCanvas.height = dHeight; + } +} + +/** + * Copy an input WebGL canvas on to an output 2D canvas. + * + * The WebGL canvas is assumed to be upside down, with the top-left pixel of the + * desired output image appearing in the bottom-left corner of the WebGL canvas. + * + * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. + * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. + * @param {Object} pipelineState The 2D target canvas to copy on to. + */ +function copyGLTo2DDrawImage(gl, pipelineState) { + var glCanvas = gl.canvas, targetCanvas = pipelineState.targetCanvas, + ctx = targetCanvas.getContext('2d'); + ctx.translate(0, targetCanvas.height); // move it down again + ctx.scale(1, -1); // vertical flip + // where is my image on the big glcanvas? + var sourceY = glCanvas.height - targetCanvas.height; + ctx.drawImage(glCanvas, 0, sourceY, targetCanvas.width, targetCanvas.height, 0, 0, + targetCanvas.width, targetCanvas.height); +} + +/** + * Copy an input WebGL canvas on to an output 2D canvas using 2d canvas' putImageData + * API. Measurably faster than using ctx.drawImage in Firefox (version 54 on OSX Sierra). + * + * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. + * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. + * @param {Object} pipelineState The 2D target canvas to copy on to. + */ +function copyGLTo2DPutImageData(gl, pipelineState) { + var targetCanvas = pipelineState.targetCanvas, ctx = targetCanvas.getContext('2d'), + dWidth = pipelineState.destinationWidth, + dHeight = pipelineState.destinationHeight, + numBytes = dWidth * dHeight * 4; + + // eslint-disable-next-line no-undef + var u8 = new Uint8Array(this.imageBuffer, 0, numBytes); + // eslint-disable-next-line no-undef + var u8Clamped = new Uint8ClampedArray(this.imageBuffer, 0, numBytes); + + gl.readPixels(0, 0, dWidth, dHeight, gl.RGBA, gl.UNSIGNED_BYTE, u8); + var imgData = new ImageData(u8Clamped, dWidth, dHeight); + ctx.putImageData(imgData, 0, 0); +} + + +(function() { - bindAdditionalTexture: function(gl, texture, textureUnit) { - gl.activeTexture(textureUnit); - gl.bindTexture(gl.TEXTURE_2D, texture); - // reset active texture to 0 as usual - gl.activeTexture(gl.TEXTURE0); - }, + 'use strict'; - unbindAdditionalTexture: function(gl, textureUnit) { - gl.activeTexture(textureUnit); - gl.bindTexture(gl.TEXTURE_2D, null); - gl.activeTexture(gl.TEXTURE0); - }, + var noop = function() {}; - getMainParameter: function() { - return this[this.mainParameter]; - }, + fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; - setMainParameter: function(value) { - this[this.mainParameter] = value; - }, + /** + * Canvas 2D filter backend. + */ + function Canvas2dFilterBackend() {}; - /** - * Send uniform data from this filter to its shader program on the GPU. - * - * Intended to be overridden by subclasses. - * - * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. - * @param {Object} uniformLocations A map of shader uniform names to their locations. - */ - sendUniformData: function(/* gl, uniformLocations */) { - // Intentionally left blank. Override me in subclasses. - }, + Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { + evictCachesForKey: noop, + dispose: noop, + clearWebGLCaches: noop, - /** - * If needed by a 2d filter, this functions can create an helper canvas to be used - * remember that options.targetCanvas is available for use till end of chain. - */ - createHelpLayer: function(options) { - if (!options.helpLayer) { - var helpLayer = document.createElement('canvas'); - helpLayer.width = options.sourceWidth; - helpLayer.height = options.sourceHeight; - options.helpLayer = helpLayer; - } - }, + /** + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - var object = { type: this.type }, mainP = this.mainParameter; - if (mainP) { - object[mainP] = this[mainP]; - } - return object; - }, + }, - /** - * Returns a JSON representation of an instance - * @return {Object} JSON - */ - toJSON: function() { - // delegate, not alias - return this.toObject(); + /** + * Apply a set of filters against a source image and draw the filtered output + * to the provided destination canvas. + * + * @param {EnhancedFilter} filters The filter to apply. + * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. + * @param {Number} sourceWidth The width of the source input. + * @param {Number} sourceHeight The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + */ + applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { + var ctx = targetCanvas.getContext('2d'); + ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); + var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var pipelineState = { + sourceWidth: sourceWidth, + sourceHeight: sourceHeight, + imageData: imageData, + originalEl: sourceElement, + originalImageData: originalImageData, + canvasEl: targetCanvas, + ctx: ctx, + filterBackend: this, + }; + filters.forEach(function(filter) { filter.applyTo(pipelineState); }); + if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { + targetCanvas.width = pipelineState.imageData.width; + targetCanvas.height = pipelineState.imageData.height; } - }); + ctx.putImageData(pipelineState.imageData, 0, 0); + return pipelineState; + }, - /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Image.filters.BaseFilter.fromObject = function(object) { - return Promise.resolve(new fabric.Image.filters[object.type](object)); - }; - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - - /** - * Color Matrix filter class - * @class fabric.Image.filters.ColorMatrix - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} - * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} - * @example Kodachrome filter - * var filter = new fabric.Image.filters.ColorMatrix({ - * matrix: [ - 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, - -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, - -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, - 0, 0, 0, 1, 0 - ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { + }; +})(); - /** - * Filter type - * @param {String} type - * @default - */ - type: 'ColorMatrix', - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'varying vec2 vTexCoord;\n' + - 'uniform mat4 uColorMatrix;\n' + - 'uniform vec4 uConstants;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color *= uColorMatrix;\n' + - 'color += uConstants;\n' + - 'gl_FragColor = color;\n' + - '}', +/** + * @namespace fabric.Image.filters + * @memberOf fabric.Image + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters} + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + */ +fabric.Image = fabric.Image || { }; +fabric.Image.filters = fabric.Image.filters || { }; - /** - * Colormatrix for pixels. - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Array} matrix array of 20 numbers. - * @default - */ - matrix: [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ], +/** + * Root filter class from which all filter classes inherit from + * @class fabric.Image.filters.BaseFilter + * @memberOf fabric.Image.filters + */ +fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ { - mainParameter: 'matrix', + /** + * Filter type + * @param {String} type + * @default + */ + type: 'BaseFilter', - /** - * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario - * to save some calculation - * @type Boolean - * @default true - */ - colorsOnly: true, + /** + * Array of attributes to send with buffers. do not modify + * @private + */ - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.matrix = this.matrix.slice(0); - }, + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', - /** - * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = data.length, - m = this.matrix, - r, g, b, a, i, colorsOnly = this.colorsOnly; - - for (i = 0; i < iLen; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - if (colorsOnly) { - data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; - } - else { - a = data[i + 3]; - data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; - data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; - data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; - data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; - } - } - }, + fragmentSource: 'precision highp float;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform sampler2D uTexture;\n' + + 'void main() {\n' + + 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + + '}', - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), - uConstants: gl.getUniformLocation(program, 'uConstants'), - }; - }, + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var m = this.matrix, - matrix = [ - m[0], m[1], m[2], m[3], - m[5], m[6], m[7], m[8], - m[10], m[11], m[12], m[13], - m[15], m[16], m[17], m[18] - ], - constants = [m[4], m[9], m[14], m[19]]; - gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); - gl.uniform4fv(uniformLocations.uConstants, constants); - }, - }); + /** + * Sets filter's properties from options + * @param {Object} [options] Options object + */ + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, - /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; - })(typeof exports !== 'undefined' ? exports : window); + /** + * Compile this filter's shader program. + * + * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation. + * @param {String} fragmentSource fragmentShader source for compilation + * @param {String} vertexSource vertexShader source for compilation + */ + createProgram: function(gl, fragmentSource, vertexSource) { + fragmentSource = fragmentSource || this.fragmentSource; + vertexSource = vertexSource || this.vertexSource; + if (fabric.webGlPrecision !== 'highp'){ + fragmentSource = fragmentSource.replace( + /precision highp float/g, + 'precision ' + fabric.webGlPrecision + ' float' + ); + } + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader, vertexSource); + gl.compileShader(vertexShader); + if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Vertex shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(vertexShader) + ); + } - (function(global) { + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Fragment shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(fragmentShader) + ); + } - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + var program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Shader link error for "${this.type}" ' + + gl.getProgramInfoLog(program) + ); + } - /** - * Brightness filter class - * @class fabric.Image.filters.Brightness - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Brightness({ - * brightness: 0.05 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { + var attributeLocations = this.getAttributeLocations(gl, program); + var uniformLocations = this.getUniformLocations(gl, program) || { }; + uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW'); + uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH'); + return { + program: program, + attributeLocations: attributeLocations, + uniformLocations: uniformLocations + }; + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Brightness', + /** + * Return a map of attribute names to WebGLAttributeLocation objects. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take attribute locations. + * @returns {Object} A map of attribute names to attribute locations. + */ + getAttributeLocations: function(gl, program) { + return { + aPosition: gl.getAttribLocation(program, 'aPosition'), + }; + }, - /** - * Fragment source for the brightness program - */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uBrightness;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color.rgb += uBrightness;\n' + - 'gl_FragColor = color;\n' + - '}', + /** + * Return a map of uniform names to WebGLUniformLocation objects. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take uniform locations. + * @returns {Object} A map of uniform names to uniform locations. + */ + getUniformLocations: function (/* gl, program */) { + // in case i do not need any special uniform i need to return an empty object + return { }; + }, - /** - * Brightness value, from -1 to 1. - * translated to -255 to 255 for 2d - * 0.0039215686 is the part of 1 that get translated to 1 in 2d - * @param {Number} brightness - * @default - */ - brightness: 0, + /** + * Send attribute data from this filter to its shader program on the GPU. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} attributeLocations A map of shader attribute names to their locations. + */ + sendAttributeData: function(gl, attributeLocations, aPositionData) { + var attributeLocation = attributeLocations.aPosition; + var buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.enableVertexAttribArray(attributeLocation); + gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); + gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW); + }, + + _setupFrameBuffer: function(options) { + var gl = options.context, width, height; + if (options.passes > 1) { + width = options.destinationWidth; + height = options.destinationHeight; + if (options.sourceWidth !== width || options.sourceHeight !== height) { + gl.deleteTexture(options.targetTexture); + options.targetTexture = options.filterBackend.createTexture(gl, width, height); + } + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, + options.targetTexture, 0); + } + else { + // draw last filter on canvas and not to framebuffer. + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + gl.finish(); + } + }, - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'brightness', + _swapTextures: function(options) { + options.passes--; + options.pass++; + var temp = options.targetTexture; + options.targetTexture = options.sourceTexture; + options.sourceTexture = temp; + }, - /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.brightness === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - brightness = Math.round(this.brightness * 255); - for (i = 0; i < len; i += 4) { - data[i] = data[i] + brightness; - data[i + 1] = data[i + 1] + brightness; - data[i + 2] = data[i + 2] + brightness; + /** + * Generic isNeutral implementation for one parameter based filters. + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter ) + * @param {Object} options + **/ + isNeutralState: function(/* options */) { + var main = this.mainParameter, + _class = fabric.Image.filters[this.type].prototype; + if (main) { + if (Array.isArray(_class[main])) { + for (var i = _class[main].length; i--;) { + if (this[main][i] !== _class[main][i]) { + return false; + } } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uBrightness: gl.getUniformLocation(program, 'uBrightness'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBrightness, this.brightness); - }, - }); - - /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; - - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { + return true; + } + else { + return _class[main] === this[main]; + } + } + else { + return false; + } + }, - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Apply this filter to the input image data provided. + * + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + if (options.webgl) { + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, - /** - * Adapted from html5rocks article - * @class fabric.Image.filters.Convolute - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example Sharpen filter - * var filter = new fabric.Image.filters.Convolute({ - * matrix: [ 0, -1, 0, - * -1, 5, -1, - * 0, -1, 0 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - * @example Blur filter - * var filter = new fabric.Image.filters.Convolute({ - * matrix: [ 1/9, 1/9, 1/9, - * 1/9, 1/9, 1/9, - * 1/9, 1/9, 1/9 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - * @example Emboss filter - * var filter = new fabric.Image.filters.Convolute({ - * matrix: [ 1, 1, 1, - * 1, 0.7, -1, - * -1, -1, -1 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - * @example Emboss filter with opaqueness - * var filter = new fabric.Image.filters.Convolute({ - * opaque: true, - * matrix: [ 1, 1, 1, - * 1, 0.7, -1, - * -1, -1, -1 ] - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + if (!options.programCache.hasOwnProperty(this.type)) { + options.programCache[this.type] = this.createProgram(options.context); + } + return options.programCache[this.type]; + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Convolute', + /** + * Apply this filter using webgl. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.originalTexture The texture of the original input image. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyToWebGL: function(options) { + var gl = options.context; + var shader = this.retrieveShader(options); + if (options.pass === 0 && options.originalTexture) { + gl.bindTexture(gl.TEXTURE_2D, options.originalTexture); + } + else { + gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture); + } + gl.useProgram(shader.program); + this.sendAttributeData(gl, shader.attributeLocations, options.aPosition); + + gl.uniform1f(shader.uniformLocations.uStepW, 1 / options.sourceWidth); + gl.uniform1f(shader.uniformLocations.uStepH, 1 / options.sourceHeight); + + this.sendUniformData(gl, shader.uniformLocations); + gl.viewport(0, 0, options.destinationWidth, options.destinationHeight); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); + }, + + bindAdditionalTexture: function(gl, texture, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, texture); + // reset active texture to 0 as usual + gl.activeTexture(gl.TEXTURE0); + }, + + unbindAdditionalTexture: function(gl, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.activeTexture(gl.TEXTURE0); + }, + + getMainParameter: function() { + return this[this.mainParameter]; + }, + + setMainParameter: function(value) { + this[this.mainParameter] = value; + }, - /* - * Opaque value (true/false) - */ - opaque: false, + /** + * Send uniform data from this filter to its shader program on the GPU. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} uniformLocations A map of shader uniform names to their locations. + */ + sendUniformData: function(/* gl, uniformLocations */) { + // Intentionally left blank. Override me in subclasses. + }, - /* - * matrix for the filter, max 9x9 - */ - matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], + /** + * If needed by a 2d filter, this functions can create an helper canvas to be used + * remember that options.targetCanvas is available for use till end of chain. + */ + createHelpLayer: function(options) { + if (!options.helpLayer) { + var helpLayer = document.createElement('canvas'); + helpLayer.width = options.sourceWidth; + helpLayer.height = options.sourceHeight; + options.helpLayer = helpLayer; + } + }, - /** - * Fragment source for the brightness program - */ - fragmentSource: { - Convolute_3_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[9];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 1), uStepH * (h - 1));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 3.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_3_0: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[9];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 1.0), uStepH * (h - 1.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 3.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + - '}', - Convolute_5_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[25];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 5.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_5_0: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[25];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 5.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + - '}', - Convolute_7_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[49];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 7.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_7_0: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[49];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 7.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + - '}', - Convolute_9_1: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[81];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 0);\n' + - 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + - 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 9.0 + w)];\n' + - '}\n' + - '}\n' + - 'gl_FragColor = color;\n' + - '}', - Convolute_9_0: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uMatrix[81];\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = vec4(0, 0, 0, 1);\n' + - 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + - 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + - 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + - 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 9.0 + w)];\n' + - '}\n' + - '}\n' + - 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.a = alpha;\n' + - '}', - }, + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + var object = { type: this.type }, mainP = this.mainParameter; + if (mainP) { + object[mainP] = this[mainP]; + } + return object; + }, - /** - * Constructor - * @memberOf fabric.Image.filters.Convolute.prototype - * @param {Object} [options] Options object - * @param {Boolean} [options.opaque=false] Opaque value (true/false) - * @param {Array} [options.matrix] Filter matrix - */ + /** + * Returns a JSON representation of an instance + * @return {Object} JSON + */ + toJSON: function() { + // delegate, not alias + return this.toObject(); + } +}); +fabric.Image.filters.BaseFilter.fromObject = function(object, callback) { + var filter = new fabric.Image.filters[object.type](object); + callback && callback(filter); + return filter; +}; - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var size = Math.sqrt(this.matrix.length); - var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); - var shaderSource = this.fragmentSource[cacheKey]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, - /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - weights = this.matrix, - side = Math.round(Math.sqrt(weights.length)), - halfSide = Math.floor(side / 2), - sw = imageData.width, - sh = imageData.height, - output = options.ctx.createImageData(sw, sh), - dst = output.data, - // go through the destination image pixels - alphaFac = this.opaque ? 1 : 0, - r, g, b, a, dstOff, - scx, scy, srcOff, wt, - x, y, cx, cy; - - for (y = 0; y < sh; y++) { - for (x = 0; x < sw; x++) { - dstOff = (y * sw + x) * 4; - // calculate the weighed sum of the source image pixels that - // fall under the convolution matrix - r = 0; g = 0; b = 0; a = 0; - - for (cy = 0; cy < side; cy++) { - for (cx = 0; cx < side; cx++) { - scy = y + cy - halfSide; - scx = x + cx - halfSide; - - // eslint-disable-next-line max-depth - if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { - continue; - } +(function(global) { - srcOff = (scy * sw + scx) * 4; - wt = weights[cy * side + cx]; + 'use strict'; - r += data[srcOff] * wt; - g += data[srcOff + 1] * wt; - b += data[srcOff + 2] * wt; - // eslint-disable-next-line max-depth - if (!alphaFac) { - a += data[srcOff + 3] * wt; - } - } - } - dst[dstOff] = r; - dst[dstOff + 1] = g; - dst[dstOff + 2] = b; - if (!alphaFac) { - dst[dstOff + 3] = a; - } - else { - dst[dstOff + 3] = data[dstOff + 3]; - } - } - } - options.imageData = output; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uMatrix: gl.getUniformLocation(program, 'uMatrix'), - uOpaque: gl.getUniformLocation(program, 'uOpaque'), - uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), - uSize: gl.getUniformLocation(program, 'uSize'), - }; - }, + /** + * Color Matrix filter class + * @class fabric.Image.filters.ColorMatrix + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} + * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} + * @example Kodachrome filter + * var filter = new fabric.Image.filters.ColorMatrix({ + * matrix: [ + 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, + -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, + -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, + 0, 0, 0, 1, 0 + ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1fv(uniformLocations.uMatrix, this.matrix); - }, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'ColorMatrix', + + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform mat4 uColorMatrix;\n' + + 'uniform vec4 uConstants;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color *= uColorMatrix;\n' + + 'color += uConstants;\n' + + 'gl_FragColor = color;\n' + + '}', + + /** + * Colormatrix for pixels. + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ], - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return extend(this.callSuper('toObject'), { - opaque: this.opaque, - matrix: this.matrix - }); - } - }); + mainParameter: 'matrix', /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario + * to save some calculation + * @type Boolean + * @default true */ - fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; - - })(typeof exports !== 'undefined' ? exports : window); + colorsOnly: true, - (function(global) { + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.matrix = this.matrix.slice(0); + }, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = data.length, + m = this.matrix, + r, g, b, a, i, colorsOnly = this.colorsOnly; + + for (i = 0; i < iLen; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + if (colorsOnly) { + data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; + } + else { + a = data[i + 3]; + data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; + data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; + } + } + }, /** - * Grayscale image filter class - * @class fabric.Image.filters.Grayscale - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Grayscale(); - * object.filters.push(filter); - * object.applyFilters(); + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Grayscale', - - fragmentSource: { - average: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float average = (color.r + color.b + color.g) / 3.0;\n' + - 'gl_FragColor = vec4(average, average, average, color.a);\n' + - '}', - lightness: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform int uMode;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 col = texture2D(uTexture, vTexCoord);\n' + - 'float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\n' + - 'gl_FragColor = vec4(average, average, average, col.a);\n' + - '}', - luminosity: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform int uMode;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 col = texture2D(uTexture, vTexCoord);\n' + - 'float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\n' + - 'gl_FragColor = vec4(average, average, average, col.a);\n' + - '}', - }, + getUniformLocations: function(gl, program) { + return { + uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), + uConstants: gl.getUniformLocation(program, 'uConstants'), + }; + }, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var m = this.matrix, + matrix = [ + m[0], m[1], m[2], m[3], + m[5], m[6], m[7], m[8], + m[10], m[11], m[12], m[13], + m[15], m[16], m[17], m[18] + ], + constants = [m[4], m[9], m[14], m[19]]; + gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); + gl.uniform4fv(uniformLocations.uConstants, constants); + }, + }); - /** - * Grayscale mode, between 'average', 'lightness', 'luminosity' - * @param {String} type - * @default - */ - mode: 'average', + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] function to invoke after filter creation + * @return {fabric.Image.filters.ColorMatrix} Instance of fabric.Image.filters.ColorMatrix + */ + fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})(typeof exports !== 'undefined' ? exports : this); - mainParameter: 'mode', - /** - * Apply the Grayscale operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length, value, - mode = this.mode; - for (i = 0; i < len; i += 4) { - if (mode === 'average') { - value = (data[i] + data[i + 1] + data[i + 2]) / 3; - } - else if (mode === 'lightness') { - value = (Math.min(data[i], data[i + 1], data[i + 2]) + - Math.max(data[i], data[i + 1], data[i + 2])) / 2; - } - else if (mode === 'luminosity') { - value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; - } - data[i] = value; - data[i + 1] = value; - data[i + 2] = value; - } - }, +(function(global) { - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var shaderSource = this.fragmentSource[this.mode]; - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + 'use strict'; - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uMode: gl.getUniformLocation(program, 'uMode'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - // default average mode. - var mode = 1; - gl.uniform1i(uniformLocations.uMode, mode); - }, + /** + * Brightness filter class + * @class fabric.Image.filters.Brightness + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Brightness({ + * brightness: 0.05 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { - /** - * Grayscale filter isNeutralState implementation - * The filter is never neutral - * on the image - **/ - isNeutralState: function() { - return false; - }, - }); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Brightness', /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Fragment source for the brightness program */ - fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uBrightness;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color.rgb += uBrightness;\n' + + 'gl_FragColor = color;\n' + + '}', - })(typeof exports !== 'undefined' ? exports : window); + /** + * Brightness value, from -1 to 1. + * translated to -255 to 255 for 2d + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Number} brightness + * @default + */ + brightness: 0, - (function(global) { + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'brightness', - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.brightness === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + brightness = Math.round(this.brightness * 255); + for (i = 0; i < len; i += 4) { + data[i] = data[i] + brightness; + data[i + 1] = data[i + 1] + brightness; + data[i + 2] = data[i + 2] + brightness; + } + }, /** - * Invert filter class - * @class fabric.Image.filters.Invert - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Invert(); - * object.filters.push(filter); - * object.applyFilters(canvas.renderAll.bind(canvas)); + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { + getUniformLocations: function(gl, program) { + return { + uBrightness: gl.getUniformLocation(program, 'uBrightness'), + }; + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Invert', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBrightness, this.brightness); + }, + }); - /** - * Invert also alpha. - * @param {Boolean} alpha - * @default - **/ - alpha: false, - - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform int uInvert;\n' + - 'uniform int uAlpha;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'if (uInvert == 1) {\n' + - 'if (uAlpha == 1) {\n' + - 'gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,1.0 -color.a);\n' + - '} else {\n' + - 'gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,color.a);\n' + - '}\n' + - '} else {\n' + - 'gl_FragColor = color;\n' + - '}\n' + - '}', + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness + */ + fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Filter invert. if false, does nothing - * @param {Boolean} invert - * @default - */ - invert: true, +})(typeof exports !== 'undefined' ? exports : this); - mainParameter: 'invert', - /** - * Apply the Invert operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - len = data.length; - for (i = 0; i < len; i += 4) { - data[i] = 255 - data[i]; - data[i + 1] = 255 - data[i + 1]; - data[i + 2] = 255 - data[i + 2]; - - if (this.alpha) { - data[i + 3] = 255 - data[i + 3]; - } - } - }, +(function(global) { - /** - * Invert filter isNeutralState implementation - * Used only in image applyFilters to discard filters that will not have an effect - * on the image - * @param {Object} options - **/ - isNeutralState: function() { - return !this.invert; - }, + 'use strict'; - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uInvert: gl.getUniformLocation(program, 'uInvert'), - uAlpha: gl.getUniformLocation(program, 'uAlpha'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1i(uniformLocations.uInvert, this.invert); - gl.uniform1i(uniformLocations.uAlpha, this.alpha); - }, - }); + /** + * Adapted from html5rocks article + * @class fabric.Image.filters.Convolute + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example Sharpen filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 0, -1, 0, + * -1, 5, -1, + * 0, -1, 0 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Blur filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 1/9, 1/9, 1/9, + * 1/9, 1/9, 1/9, + * 1/9, 1/9, 1/9 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Emboss filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 1, 1, 1, + * 1, 0.7, -1, + * -1, -1, -1 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Emboss filter with opaqueness + * var filter = new fabric.Image.filters.Convolute({ + * opaque: true, + * matrix: [ 1, 1, 1, + * 1, 0.7, -1, + * -1, -1, -1 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Filter type + * @param {String} type + * @default */ - fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; - + type: 'Convolute', - })(typeof exports !== 'undefined' ? exports : window); + /* + * Opaque value (true/false) + */ + opaque: false, - (function(global) { - - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /* + * matrix for the filter, max 9x9 + */ + matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], /** - * Noise filter class - * @class fabric.Image.filters.Noise - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Noise#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Noise({ - * noise: 700 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); + * Fragment source for the brightness program */ - filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Noise', - - /** - * Fragment source for the noise program - */ - fragmentSource: 'precision highp float;\n' + + fragmentSource: { + Convolute_3_1: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[9];\n' + + 'uniform float uStepW;\n' + 'uniform float uStepH;\n' + - 'uniform float uNoise;\n' + - 'uniform float uSeed;\n' + 'varying vec2 vTexCoord;\n' + - 'float rand(vec2 co, float seed, float vScale) {\n' + - 'return fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);\n' + - '}\n' + 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'color.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 1), uStepH * (h - 1));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 3.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_3_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[9];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 1.0), uStepH * (h - 1.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 3.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_5_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[25];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 5.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_5_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[25];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 5.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_7_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[49];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 7.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_7_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[49];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 7.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_9_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[81];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 9.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_9_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[81];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 9.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + '}', + }, - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'noise', + /** + * Constructor + * @memberOf fabric.Image.filters.Convolute.prototype + * @param {Object} [options] Options object + * @param {Boolean} [options.opaque=false] Opaque value (true/false) + * @param {Array} [options.matrix] Filter matrix + */ - /** - * Noise value, from - * @param {Number} noise - * @default - */ - noise: 0, - /** - * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.noise === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, i, len = data.length, - noise = this.noise, rand; + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var size = Math.sqrt(this.matrix.length); + var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); + var shaderSource = this.fragmentSource[cacheKey]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - for (i = 0, len = data.length; i < len; i += 4) { + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + weights = this.matrix, + side = Math.round(Math.sqrt(weights.length)), + halfSide = Math.floor(side / 2), + sw = imageData.width, + sh = imageData.height, + output = options.ctx.createImageData(sw, sh), + dst = output.data, + // go through the destination image pixels + alphaFac = this.opaque ? 1 : 0, + r, g, b, a, dstOff, + scx, scy, srcOff, wt, + x, y, cx, cy; + + for (y = 0; y < sh; y++) { + for (x = 0; x < sw; x++) { + dstOff = (y * sw + x) * 4; + // calculate the weighed sum of the source image pixels that + // fall under the convolution matrix + r = 0; g = 0; b = 0; a = 0; + + for (cy = 0; cy < side; cy++) { + for (cx = 0; cx < side; cx++) { + scy = y + cy - halfSide; + scx = x + cx - halfSide; + + // eslint-disable-next-line max-depth + if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { + continue; + } - rand = (0.5 - Math.random()) * noise; + srcOff = (scy * sw + scx) * 4; + wt = weights[cy * side + cx]; - data[i] += rand; - data[i + 1] += rand; - data[i + 2] += rand; + r += data[srcOff] * wt; + g += data[srcOff + 1] * wt; + b += data[srcOff + 2] * wt; + // eslint-disable-next-line max-depth + if (!alphaFac) { + a += data[srcOff + 3] * wt; + } + } + } + dst[dstOff] = r; + dst[dstOff + 1] = g; + dst[dstOff + 2] = b; + if (!alphaFac) { + dst[dstOff + 3] = a; + } + else { + dst[dstOff + 3] = data[dstOff + 3]; + } } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uNoise: gl.getUniformLocation(program, 'uNoise'), - uSeed: gl.getUniformLocation(program, 'uSeed'), - }; - }, + } + options.imageData = output; + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uNoise, this.noise / 255); - gl.uniform1f(uniformLocations.uSeed, Math.random()); - }, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uMatrix: gl.getUniformLocation(program, 'uMatrix'), + uOpaque: gl.getUniformLocation(program, 'uOpaque'), + uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), + uSize: gl.getUniformLocation(program, 'uSize'), + }; + }, - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return extend(this.callSuper('toObject'), { - noise: this.noise - }); - } - }); + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1fv(uniformLocations.uMatrix, this.matrix); + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Returns object representation of an instance + * @return {Object} Object representation of an instance */ - fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; + toObject: function() { + return extend(this.callSuper('toObject'), { + opaque: this.opaque, + matrix: this.matrix + }); + } + }); - })(typeof exports !== 'undefined' ? exports : window); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Convolute} Instance of fabric.Image.filters.Convolute + */ + fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; - (function(global) { +})(typeof exports !== 'undefined' ? exports : this); - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - /** - * Pixelate filter class - * @class fabric.Image.filters.Pixelate - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Pixelate({ - * blocksize: 8 - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { +(function(global) { - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Pixelate', + 'use strict'; - blocksize: 4, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - mainParameter: 'blocksize', + /** + * Grayscale image filter class + * @class fabric.Image.filters.Grayscale + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Grayscale(); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { - /** - * Fragment source for the Pixelate program - */ - fragmentSource: 'precision highp float;\n' + + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Grayscale', + + fragmentSource: { + average: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + - 'uniform float uBlocksize;\n' + - 'uniform float uStepW;\n' + - 'uniform float uStepH;\n' + 'varying vec2 vTexCoord;\n' + 'void main() {\n' + - 'float blockW = uBlocksize * uStepW;\n' + - 'float blockH = uBlocksize * uStepW;\n' + - 'int posX = int(vTexCoord.x / blockW);\n' + - 'int posY = int(vTexCoord.y / blockH);\n' + - 'float fposX = float(posX);\n' + - 'float fposY = float(posY);\n' + - 'vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\n' + - 'vec4 color = texture2D(uTexture, squareCoords);\n' + - 'gl_FragColor = color;\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float average = (color.r + color.b + color.g) / 3.0;\n' + + 'gl_FragColor = vec4(average, average, average, color.a);\n' + '}', + lightness: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uMode;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 col = texture2D(uTexture, vTexCoord);\n' + + 'float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\n' + + 'gl_FragColor = vec4(average, average, average, col.a);\n' + + '}', + luminosity: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uMode;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 col = texture2D(uTexture, vTexCoord);\n' + + 'float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\n' + + 'gl_FragColor = vec4(average, average, average, col.a);\n' + + '}', + }, - /** - * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, - iLen = imageData.height, - jLen = imageData.width, - index, i, j, r, g, b, a, - _i, _j, _iLen, _jLen; - - for (i = 0; i < iLen; i += this.blocksize) { - for (j = 0; j < jLen; j += this.blocksize) { - - index = (i * 4) * jLen + (j * 4); - - r = data[index]; - g = data[index + 1]; - b = data[index + 2]; - a = data[index + 3]; - - _iLen = Math.min(i + this.blocksize, iLen); - _jLen = Math.min(j + this.blocksize, jLen); - for (_i = i; _i < _iLen; _i++) { - for (_j = j; _j < _jLen; _j++) { - index = (_i * 4) * jLen + (_j * 4); - data[index] = r; - data[index + 1] = g; - data[index + 2] = b; - data[index + 3] = a; - } - } - } - } - }, - - /** - * Indicate when the filter is not gonna apply changes to the image - **/ - isNeutralState: function() { - return this.blocksize === 1; - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), - uStepW: gl.getUniformLocation(program, 'uStepW'), - uStepH: gl.getUniformLocation(program, 'uStepH'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); - }, - }); /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Grayscale mode, between 'average', 'lightness', 'luminosity' + * @param {String} type + * @default */ - fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; + mode: 'average', - })(typeof exports !== 'undefined' ? exports : window); + mainParameter: 'mode', - (function(global) { + /** + * Apply the Grayscale operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length, value, + mode = this.mode; + for (i = 0; i < len; i += 4) { + if (mode === 'average') { + value = (data[i] + data[i + 1] + data[i + 2]) / 3; + } + else if (mode === 'lightness') { + value = (Math.min(data[i], data[i + 1], data[i + 2]) + + Math.max(data[i], data[i + 1], data[i + 2])) / 2; + } + else if (mode === 'luminosity') { + value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; + } + data[i] = value; + data[i + 1] = value; + data[i + 2] = value; + } + }, - var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var shaderSource = this.fragmentSource[this.mode]; + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, /** - * Remove white filter class - * @class fabric.Image.filters.RemoveColor - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.RemoveColor#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.RemoveColor({ - * threshold: 0.2, - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ - filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { + getUniformLocations: function(gl, program) { + return { + uMode: gl.getUniformLocation(program, 'uMode'), + }; + }, - /** - * Filter type - * @param {String} type - * @default - */ - type: 'RemoveColor', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + // default average mode. + var mode = 1; + gl.uniform1i(uniformLocations.uMode, mode); + }, - /** - * Color to remove, in any format understood by fabric.Color. - * @param {String} type - * @default - */ - color: '#FFFFFF', + /** + * Grayscale filter isNeutralState implementation + * The filter is never neutral + * on the image + **/ + isNeutralState: function() { + return false; + }, + }); - /** - * Fragment source for the brightness program - */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec4 uLow;\n' + - 'uniform vec4 uHigh;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + - 'if(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {\n' + - 'gl_FragColor.a = 0.0;\n' + - '}\n' + - '}', + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale + */ + fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * distance to actual color, as value up or down from each r,g,b - * between 0 and 1 - **/ - distance: 0.02, +})(typeof exports !== 'undefined' ? exports : this); - /** - * For color to remove inside distance, use alpha channel for a smoother deletion - * NOT IMPLEMENTED YET - **/ - useAlpha: false, - /** - * Constructor - * @memberOf fabric.Image.filters.RemoveWhite.prototype - * @param {Object} [options] Options object - * @param {Number} [options.color=#RRGGBB] Threshold value - * @param {Number} [options.distance=10] Distance value - */ +(function(global) { - /** - * Applies filter to canvas element - * @param {Object} canvasEl Canvas element to apply filter to - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, i, - distance = this.distance * 255, - r, g, b, - source = new fabric.Color(this.color).getSource(), - lowC = [ - source[0] - distance, - source[1] - distance, - source[2] - distance, - ], - highC = [ - source[0] + distance, - source[1] + distance, - source[2] + distance, - ]; - - - for (i = 0; i < data.length; i += 4) { - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - - if (r > lowC[0] && - g > lowC[1] && - b > lowC[2] && - r < highC[0] && - g < highC[1] && - b < highC[2]) { - data[i + 3] = 0; - } - } - }, + 'use strict'; - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uLow: gl.getUniformLocation(program, 'uLow'), - uHigh: gl.getUniformLocation(program, 'uHigh'), - }; - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(), - distance = parseFloat(this.distance), - lowC = [ - 0 + source[0] / 255 - distance, - 0 + source[1] / 255 - distance, - 0 + source[2] / 255 - distance, - 1 - ], - highC = [ - source[0] / 255 + distance, - source[1] / 255 + distance, - source[2] / 255 + distance, - 1 - ]; - gl.uniform4fv(uniformLocations.uLow, lowC); - gl.uniform4fv(uniformLocations.uHigh, highC); - }, + /** + * Invert filter class + * @class fabric.Image.filters.Invert + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Invert(); + * object.filters.push(filter); + * object.applyFilters(canvas.renderAll.bind(canvas)); + */ + filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return extend(this.callSuper('toObject'), { - color: this.color, - distance: this.distance - }); - } - }); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Invert', + + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uInvert;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'if (uInvert == 1) {\n' + + 'gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,color.a);\n' + + '} else {\n' + + 'gl_FragColor = color;\n' + + '}\n' + + '}', /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; - - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; - - var matrices = { - Brownie: [ - 0.59970,0.34553,-0.27082,0,0.186, - -0.03770,0.86095,0.15059,0,-0.1449, - 0.24113,-0.07441,0.44972,0,-0.02965, - 0,0,0,1,0 - ], - Vintage: [ - 0.62793,0.32021,-0.03965,0,0.03784, - 0.02578,0.64411,0.03259,0,0.02926, - 0.04660,-0.08512,0.52416,0,0.02023, - 0,0,0,1,0 - ], - Kodachrome: [ - 1.12855,-0.39673,-0.03992,0,0.24991, - -0.16404,1.08352,-0.05498,0,0.09698, - -0.16786,-0.56034,1.60148,0,0.13972, - 0,0,0,1,0 - ], - Technicolor: [ - 1.91252,-0.85453,-0.09155,0,0.04624, - -0.30878,1.76589,-0.10601,0,-0.27589, - -0.23110,-0.75018,1.84759,0,0.12137, - 0,0,0,1,0 - ], - Polaroid: [ - 1.438,-0.062,-0.062,0,0, - -0.122,1.378,-0.122,0,0, - -0.016,-0.016,1.483,0,0, - 0,0,0,1,0 - ], - Sepia: [ - 0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0 - ], - BlackWhite: [ - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 1.5, 1.5, 1.5, 0, -1, - 0, 0, 0, 1, 0, - ] - }; + * Filter invert. if false, does nothing + * @param {Boolean} invert + * @default + */ + invert: true, - for (var key in matrices) { - filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: key, - - /** - * Colormatrix for the effect - * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning - * outside the -1, 1 range. - * @param {Array} matrix array of 20 numbers. - * @default - */ - matrix: matrices[key], - - /** - * Lock the matrix export for this kind of static, parameter less filters. - */ - mainParameter: false, - /** - * Lock the colormatrix on the color part, skipping alpha - */ - colorsOnly: true, + mainParameter: 'invert', - }); - fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; - } - })(typeof exports !== 'undefined' ? exports : window); + /** + * Apply the Invert operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length; + for (i = 0; i < len; i += 4) { + data[i] = 255 - data[i]; + data[i + 1] = 255 - data[i + 1]; + data[i + 2] = 255 - data[i + 2]; + } + }, - (function(global) { + /** + * Invert filter isNeutralState implementation + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * @param {Object} options + **/ + isNeutralState: function() { + return !this.invert; + }, - var fabric = global.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uInvert: gl.getUniformLocation(program, 'uInvert'), + }; + }, /** - * Color Blend filter class - * @class fabric.Image.filter.BlendColor - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); + * Send data from this filter to its shader program's uniforms. * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1i(uniformLocations.uInvert, this.invert); + }, + }); - filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { - type: 'BlendColor', + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Invert} Instance of fabric.Image.filters.Invert + */ + fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - * @type String - * @default - **/ - color: '#F95C63', - /** - * Blend mode for the filter: one of multiply, add, diff, screen, subtract, - * darken, lighten, overlay, exclusion, tint. - * @type String - * @default - **/ - mode: 'multiply', +})(typeof exports !== 'undefined' ? exports : this); - /** - * alpha value. represent the strength of the blend color operation. - * @type Number - * @default - **/ - alpha: 1, - /** - * Fragment source for the Multiply program - */ - fragmentSource: { - multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', - screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', - add: 'gl_FragColor.rgb += uColor.rgb;\n', - diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', - subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', - lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', - darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', - exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', - overlay: 'if (uColor.r < 0.5) {\n' + - 'gl_FragColor.r *= 2.0 * uColor.r;\n' + - '} else {\n' + - 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + - '}\n' + - 'if (uColor.g < 0.5) {\n' + - 'gl_FragColor.g *= 2.0 * uColor.g;\n' + - '} else {\n' + - 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + - '}\n' + - 'if (uColor.b < 0.5) {\n' + - 'gl_FragColor.b *= 2.0 * uColor.b;\n' + - '} else {\n' + - 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + - '}\n', - tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + - 'gl_FragColor.rgb += uColor.rgb;\n', - }, +(function(global) { - /** - * build the fragment source for the filters, joining the common part with - * the specific one. - * @param {String} mode the mode of the filter, a key of this.fragmentSource - * @return {String} the source to be compiled - * @private - */ - buildSource: function(mode) { - return 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'gl_FragColor = color;\n' + - 'if (color.a > 0.0) {\n' + - this.fragmentSource[mode] + - '}\n' + - '}'; - }, + 'use strict'; - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode, shaderSource; - if (!options.programCache.hasOwnProperty(cacheKey)) { - shaderSource = this.buildSource(this.mode); - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - data = imageData.data, iLen = data.length, - tr, tg, tb, - r, g, b, - source, alpha1 = 1 - this.alpha; - - source = new fabric.Color(this.color).getSource(); - tr = source[0] * this.alpha; - tg = source[1] * this.alpha; - tb = source[2] * this.alpha; - - for (var i = 0; i < iLen; i += 4) { - - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - break; - case 'screen': - data[i] = 255 - (255 - r) * (255 - tr) / 255; - data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; - data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; - break; - case 'add': - data[i] = r + tr; - data[i + 1] = g + tg; - data[i + 2] = b + tb; - break; - case 'diff': - case 'difference': - data[i] = Math.abs(r - tr); - data[i + 1] = Math.abs(g - tg); - data[i + 2] = Math.abs(b - tb); - break; - case 'subtract': - data[i] = r - tr; - data[i + 1] = g - tg; - data[i + 2] = b - tb; - break; - case 'darken': - data[i] = Math.min(r, tr); - data[i + 1] = Math.min(g, tg); - data[i + 2] = Math.min(b, tb); - break; - case 'lighten': - data[i] = Math.max(r, tr); - data[i + 1] = Math.max(g, tg); - data[i + 2] = Math.max(b, tb); - break; - case 'overlay': - data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); - data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); - data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); - break; - case 'exclusion': - data[i] = tr + r - ((2 * tr * r) / 255); - data[i + 1] = tg + g - ((2 * tg * g) / 255); - data[i + 2] = tb + b - ((2 * tb * b) / 255); - break; - case 'tint': - data[i] = tr + r * alpha1; - data[i + 1] = tg + g * alpha1; - data[i + 2] = tb + b * alpha1; - } - } - }, + /** + * Noise filter class + * @class fabric.Image.filters.Noise + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Noise#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Noise({ + * noise: 700 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uColor: gl.getUniformLocation(program, 'uColor'), - }; - }, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Noise', - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var source = new fabric.Color(this.color).getSource(); - source[0] = this.alpha * source[0] / 255; - source[1] = this.alpha * source[1] / 255; - source[2] = this.alpha * source[2] / 255; - source[3] = this.alpha; - gl.uniform4fv(uniformLocations.uColor, source); - }, + /** + * Fragment source for the noise program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uStepH;\n' + + 'uniform float uNoise;\n' + + 'uniform float uSeed;\n' + + 'varying vec2 vTexCoord;\n' + + 'float rand(vec2 co, float seed, float vScale) {\n' + + 'return fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);\n' + + '}\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;\n' + + 'gl_FragColor = color;\n' + + '}', - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - color: this.color, - mode: this.mode, - alpha: this.alpha - }; - } - }); + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'noise', /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Noise value, from + * @param {Number} noise + * @default */ - fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; + noise: 0, - })(typeof exports !== 'undefined' ? exports : window); + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.noise === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + noise = this.noise, rand; + + for (i = 0, len = data.length; i < len; i += 4) { - (function(global) { + rand = (0.5 - Math.random()) * noise; - var fabric = global.fabric, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + data[i] += rand; + data[i + 1] += rand; + data[i + 2] += rand; + } + }, /** - * Image Blend filter class - * @class fabric.Image.filter.BlendImage - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @example - * var filter = new fabric.Image.filters.BlendColor({ - * color: '#000', - * mode: 'multiply' - * }); + * Return WebGL uniform locations for this filter's shader. * - * var filter = new fabric.Image.filters.BlendImage({ - * image: fabricImageObject, - * mode: 'multiply', - * alpha: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ + getUniformLocations: function(gl, program) { + return { + uNoise: gl.getUniformLocation(program, 'uNoise'), + uSeed: gl.getUniformLocation(program, 'uSeed'), + }; + }, - filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { - type: 'BlendImage', + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uNoise, this.noise / 255); + gl.uniform1f(uniformLocations.uSeed, Math.random()); + }, - /** - * Color to make the blend operation with. default to a reddish color since black or white - * gives always strong result. - **/ - image: null, + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return extend(this.callSuper('toObject'), { + noise: this.noise + }); + } + }); - /** - * Blend mode for the filter (one of "multiply", "mask") - * @type String - * @default - **/ - mode: 'multiply', + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Noise} Instance of fabric.Image.filters.Noise + */ + fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * alpha value. represent the strength of the blend image operation. - * not implemented. - **/ - alpha: 1, +})(typeof exports !== 'undefined' ? exports : this); - vertexSource: 'attribute vec2 aPosition;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'uniform mat3 uTransformMatrix;\n' + - 'void main() {\n' + - 'vTexCoord = aPosition;\n' + - 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + - 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + - '}', - /** - * Fragment source for the Multiply program - */ - fragmentSource: { - multiply: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.rgba *= color2.rgba;\n' + - 'gl_FragColor = color;\n' + - '}', - mask: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform sampler2D uImage;\n' + - 'uniform vec4 uColor;\n' + - 'varying vec2 vTexCoord;\n' + - 'varying vec2 vTexCoord2;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + - 'color.a = color2.a;\n' + - 'gl_FragColor = color;\n' + - '}', - }, +(function(global) { - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var cacheKey = this.type + '_' + this.mode; - var shaderSource = this.fragmentSource[this.mode]; - if (!options.programCache.hasOwnProperty(cacheKey)) { - options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); - } - return options.programCache[cacheKey]; - }, + 'use strict'; - applyToWebGL: function(options) { - // load texture to blend. - var gl = options.context, - texture = this.createTexture(options.filterBackend, this.image); - this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); - this.callSuper('applyToWebGL', options); - this.unbindAdditionalTexture(gl, gl.TEXTURE1); - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - createTexture: function(backend, image) { - return backend.getCachedTexture(image.cacheKey, image._element); - }, + /** + * Pixelate filter class + * @class fabric.Image.filters.Pixelate + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Pixelate({ + * blocksize: 8 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { - /** - * Calculate a transformMatrix to adapt the image to blend over - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - calculateMatrix: function() { - var image = this.image, - width = image._element.width, - height = image._element.height; - return [ - 1 / image.scaleX, 0, 0, - 0, 1 / image.scaleY, 0, - -image.left / width, -image.top / height, 1 - ]; - }, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Pixelate', - /** - * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, - resources = options.filterBackend.resources, - data = imageData.data, iLen = data.length, - width = imageData.width, - height = imageData.height, - tr, tg, tb, ta, - r, g, b, a, - canvas1, context, image = this.image, blendData; - - if (!resources.blendImage) { - resources.blendImage = fabric.util.createCanvasElement(); - } - canvas1 = resources.blendImage; - context = canvas1.getContext('2d'); - if (canvas1.width !== width || canvas1.height !== height) { - canvas1.width = width; - canvas1.height = height; - } - else { - context.clearRect(0, 0, width, height); - } - context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); - context.drawImage(image._element, 0, 0, width, height); - blendData = context.getImageData(0, 0, width, height).data; - for (var i = 0; i < iLen; i += 4) { + blocksize: 4, - r = data[i]; - g = data[i + 1]; - b = data[i + 2]; - a = data[i + 3]; + mainParameter: 'blocksize', - tr = blendData[i]; - tg = blendData[i + 1]; - tb = blendData[i + 2]; - ta = blendData[i + 3]; - - switch (this.mode) { - case 'multiply': - data[i] = r * tr / 255; - data[i + 1] = g * tg / 255; - data[i + 2] = b * tb / 255; - data[i + 3] = a * ta / 255; - break; - case 'mask': - data[i + 3] = ta; - break; + /** + * Fragment source for the Pixelate program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uBlocksize;\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'float blockW = uBlocksize * uStepW;\n' + + 'float blockH = uBlocksize * uStepW;\n' + + 'int posX = int(vTexCoord.x / blockW);\n' + + 'int posY = int(vTexCoord.y / blockH);\n' + + 'float fposX = float(posX);\n' + + 'float fposY = float(posY);\n' + + 'vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\n' + + 'vec4 color = texture2D(uTexture, squareCoords);\n' + + 'gl_FragColor = color;\n' + + '}', + + /** + * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = imageData.height, + jLen = imageData.width, + index, i, j, r, g, b, a, + _i, _j, _iLen, _jLen; + + for (i = 0; i < iLen; i += this.blocksize) { + for (j = 0; j < jLen; j += this.blocksize) { + + index = (i * 4) * jLen + (j * 4); + + r = data[index]; + g = data[index + 1]; + b = data[index + 2]; + a = data[index + 3]; + + _iLen = Math.min(i + this.blocksize, iLen); + _jLen = Math.min(j + this.blocksize, jLen); + for (_i = i; _i < _iLen; _i++) { + for (_j = j; _j < _jLen; _j++) { + index = (_i * 4) * jLen + (_j * 4); + data[index] = r; + data[index + 1] = g; + data[index + 2] = b; + data[index + 3] = a; + } } } - }, + } + }, - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), - uImage: gl.getUniformLocation(program, 'uImage'), - }; - }, + /** + * Indicate when the filter is not gonna apply changes to the image + **/ + isNeutralState: function() { + return this.blocksize === 1; + }, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var matrix = this.calculateMatrix(); - gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. - gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); - }, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), + uStepW: gl.getUniformLocation(program, 'uStepW'), + uStepH: gl.getUniformLocation(program, 'uStepH'), + }; + }, - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - image: this.image && this.image.toObject(), - mode: this.mode, - alpha: this.alpha - }; - } - }); + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); + }, + }); + + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Pixelate} Instance of fabric.Image.filters.Pixelate + */ + fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : this); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Remove white filter class + * @class fabric.Image.filters.RemoveColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.RemoveColor#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.RemoveColor({ + * threshold: 0.2, + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Filter type + * @param {String} type + * @default */ - fabric.Image.filters.BlendImage.fromObject = function(object) { - return fabric.Image.fromObject(object.image).then(function(image) { - return new fabric.Image.filters.BlendImage(Object.assign({}, object, { image: image })); - }); - }; + type: 'RemoveColor', + + /** + * Color to remove, in any format understood by fabric.Color. + * @param {String} type + * @default + */ + color: '#FFFFFF', - })(typeof exports !== 'undefined' ? exports : window); + /** + * Fragment source for the brightness program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec4 uLow;\n' + + 'uniform vec4 uHigh;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + + 'if(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {\n' + + 'gl_FragColor.a = 0.0;\n' + + '}\n' + + '}', - (function(global) { + /** + * distance to actual color, as value up or down from each r,g,b + * between 0 and 1 + **/ + distance: 0.02, - var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor, - sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, - ceil = Math.ceil, - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * For color to remove inside distance, use alpha channel for a smoother deletion + * NOT IMPLEMENTED YET + **/ + useAlpha: false, /** - * Resize image filter class - * @class fabric.Image.filters.Resize - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Resize(); - * object.filters.push(filter); - * object.applyFilters(canvas.renderAll.bind(canvas)); + * Constructor + * @memberOf fabric.Image.filters.RemoveWhite.prototype + * @param {Object} [options] Options object + * @param {Number} [options.color=#RRGGBB] Threshold value + * @param {Number} [options.distance=10] Distance value + */ + + /** + * Applies filter to canvas element + * @param {Object} canvasEl Canvas element to apply filter to + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + distance = this.distance * 255, + r, g, b, + source = new fabric.Color(this.color).getSource(), + lowC = [ + source[0] - distance, + source[1] - distance, + source[2] - distance, + ], + highC = [ + source[0] + distance, + source[1] + distance, + source[2] + distance, + ]; + + + for (i = 0; i < data.length; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + if (r > lowC[0] && + g > lowC[1] && + b > lowC[2] && + r < highC[0] && + g < highC[1] && + b < highC[2]) { + data[i + 3] = 0; + } + } + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uLow: gl.getUniformLocation(program, 'uLow'), + uHigh: gl.getUniformLocation(program, 'uHigh'), + }; + }, + + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(), + distance = parseFloat(this.distance), + lowC = [ + 0 + source[0] / 255 - distance, + 0 + source[1] / 255 - distance, + 0 + source[2] / 255 - distance, + 1 + ], + highC = [ + source[0] / 255 + distance, + source[1] / 255 + distance, + source[2] / 255 + distance, + 1 + ]; + gl.uniform4fv(uniformLocations.uLow, lowC); + gl.uniform4fv(uniformLocations.uHigh, highC); + }, + + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance */ - filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { + toObject: function() { + return extend(this.callSuper('toObject'), { + color: this.color, + distance: this.distance + }); + } + }); + + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.RemoveColor} Instance of fabric.Image.filters.RemoveWhite + */ + fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; + +})(typeof exports !== 'undefined' ? exports : this); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + var matrices = { + Brownie: [ + 0.59970,0.34553,-0.27082,0,0.186, + -0.03770,0.86095,0.15059,0,-0.1449, + 0.24113,-0.07441,0.44972,0,-0.02965, + 0,0,0,1,0 + ], + Vintage: [ + 0.62793,0.32021,-0.03965,0,0.03784, + 0.02578,0.64411,0.03259,0,0.02926, + 0.04660,-0.08512,0.52416,0,0.02023, + 0,0,0,1,0 + ], + Kodachrome: [ + 1.12855,-0.39673,-0.03992,0,0.24991, + -0.16404,1.08352,-0.05498,0,0.09698, + -0.16786,-0.56034,1.60148,0,0.13972, + 0,0,0,1,0 + ], + Technicolor: [ + 1.91252,-0.85453,-0.09155,0,0.04624, + -0.30878,1.76589,-0.10601,0,-0.27589, + -0.23110,-0.75018,1.84759,0,0.12137, + 0,0,0,1,0 + ], + Polaroid: [ + 1.438,-0.062,-0.062,0,0, + -0.122,1.378,-0.122,0,0, + -0.016,-0.016,1.483,0,0, + 0,0,0,1,0 + ], + Sepia: [ + 0.393, 0.769, 0.189, 0, 0, + 0.349, 0.686, 0.168, 0, 0, + 0.272, 0.534, 0.131, 0, 0, + 0, 0, 0, 1, 0 + ], + BlackWhite: [ + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 0, 0, 0, 1, 0, + ] + }; + + for (var key in matrices) { + filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { /** * Filter type * @param {String} type * @default */ - type: 'Resize', + type: key, /** - * Resize type - * for webgl resizeType is just lanczos, for canvas2d can be: - * bilinear, hermite, sliceHack, lanczos. - * @param {String} resizeType + * Colormatrix for the effect + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * @param {Array} matrix array of 20 numbers. * @default */ - resizeType: 'hermite', + matrix: matrices[key], /** - * Scale factor for resizing, x axis - * @param {Number} scaleX - * @default + * Lock the matrix export for this kind of static, parameter less filters. */ - scaleX: 1, - + mainParameter: false, /** - * Scale factor for resizing, y axis - * @param {Number} scaleY - * @default + * Lock the colormatrix on the color part, skipping alpha */ - scaleY: 1, + colorsOnly: true, - /** - * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos - * @param {Number} lanczosLobes - * @default - */ - lanczosLobes: 3, + }); + fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; + } +})(typeof exports !== 'undefined' ? exports : this); - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uDelta: gl.getUniformLocation(program, 'uDelta'), - uTaps: gl.getUniformLocation(program, 'uTaps'), - }; - }, +(function(global) { + 'use strict'; - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); - gl.uniform1fv(uniformLocations.uTaps, this.taps); - }, - - /** - * Retrieves the cached shader. - * @param {Object} options - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - retrieveShader: function(options) { - var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; - if (!options.programCache.hasOwnProperty(cacheKey)) { - var fragmentShader = this.generateShader(filterWindow); - options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); - } - return options.programCache[cacheKey]; - }, - - getFilterWindow: function() { - var scale = this.tempScale; - return Math.ceil(this.lanczosLobes / scale); - }, - - getTaps: function() { - var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, - filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); - for (var i = 1; i <= filterWindow; i++) { - taps[i - 1] = lobeFunction(i * scale); - } - return taps; - }, + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Generate vertex and shader sources from the necessary steps numbers - * @param {Number} filterWindow - */ - generateShader: function(filterWindow) { - var offsets = new Array(filterWindow), - fragmentShader = this.fragmentSourceTOP, filterWindow; + /** + * Color Blend filter class + * @class fabric.Image.filter.BlendColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ - for (var i = 1; i <= filterWindow; i++) { - offsets[i - 1] = i + '.0 * uDelta'; - } + filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { + type: 'BlendColor', - fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; - fragmentShader += 'void main() {\n'; - fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; - fragmentShader += ' float sum = 1.0;\n'; + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + * @type String + * @default + **/ + color: '#F95C63', - offsets.forEach(function(offset, i) { - fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; - fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; - }); - fragmentShader += ' gl_FragColor = color / sum;\n'; - fragmentShader += '}'; - return fragmentShader; - }, + /** + * Blend mode for the filter: one of multiply, add, diff, screen, subtract, + * darken, lighten, overlay, exclusion, tint. + * @type String + * @default + **/ + mode: 'multiply', - fragmentSourceTOP: 'precision highp float;\n' + + /** + * alpha value. represent the strength of the blend color operation. + * @type Number + * @default + **/ + alpha: 1, + + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', + screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', + add: 'gl_FragColor.rgb += uColor.rgb;\n', + diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', + subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', + lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', + darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', + exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', + overlay: 'if (uColor.r < 0.5) {\n' + + 'gl_FragColor.r *= 2.0 * uColor.r;\n' + + '} else {\n' + + 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + + '}\n' + + 'if (uColor.g < 0.5) {\n' + + 'gl_FragColor.g *= 2.0 * uColor.g;\n' + + '} else {\n' + + 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + + '}\n' + + 'if (uColor.b < 0.5) {\n' + + 'gl_FragColor.b *= 2.0 * uColor.b;\n' + + '} else {\n' + + 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + + '}\n', + tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + + 'gl_FragColor.rgb += uColor.rgb;\n', + }, + + /** + * build the fragment source for the filters, joining the common part with + * the specific one. + * @param {String} mode the mode of the filter, a key of this.fragmentSource + * @return {String} the source to be compiled + * @private + */ + buildSource: function(mode) { + return 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + - 'uniform vec2 uDelta;\n' + - 'varying vec2 vTexCoord;\n', - - /** - * Apply the resize filter to the image - * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyTo: function(options) { - if (options.webgl) { - options.passes++; - this.width = options.sourceWidth; - this.horizontal = true; - this.dW = Math.round(this.width * this.scaleX); - this.dH = options.sourceHeight; - this.tempScale = this.dW / this.width; - this.taps = this.getTaps(); - options.destinationWidth = this.dW; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceWidth = options.destinationWidth; - - this.height = options.sourceHeight; - this.horizontal = false; - this.dH = Math.round(this.height * this.scaleY); - this.tempScale = this.dH / this.height; - this.taps = this.getTaps(); - options.destinationHeight = this.dH; - this._setupFrameBuffer(options); - this.applyToWebGL(options); - this._swapTextures(options); - options.sourceHeight = options.destinationHeight; - } - else { - this.applyTo2d(options); - } - }, - - isNeutralState: function() { - return this.scaleX === 1 && this.scaleY === 1; - }, - - lanczosCreate: function(lobes) { - return function(x) { - if (x >= lobes || x <= -lobes) { - return 0.0; - } - if (x < 1.19209290E-07 && x > -1.19209290E-07) { - return 1.0; - } - x *= Math.PI; - var xx = x / lobes; - return (sin(x) / x) * sin(xx) / xx; - }; - }, + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'gl_FragColor = color;\n' + + 'if (color.a > 0.0) {\n' + + this.fragmentSource[mode] + + '}\n' + + '}'; + }, - /** - * Applies filter to canvas element - * @memberOf fabric.Image.filters.Resize.prototype - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} scaleX - * @param {Number} scaleY - */ - applyTo2d: function(options) { - var imageData = options.imageData, - scaleX = this.scaleX, - scaleY = this.scaleY; + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode, shaderSource; + if (!options.programCache.hasOwnProperty(cacheKey)) { + shaderSource = this.buildSource(this.mode); + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - this.rcpScaleX = 1 / scaleX; - this.rcpScaleY = 1 / scaleY; + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, iLen = data.length, + tr, tg, tb, + r, g, b, + source, alpha1 = 1 - this.alpha; + + source = new fabric.Color(this.color).getSource(); + tr = source[0] * this.alpha; + tg = source[1] * this.alpha; + tb = source[2] * this.alpha; + + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + break; + case 'screen': + data[i] = 255 - (255 - r) * (255 - tr) / 255; + data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; + data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; + break; + case 'add': + data[i] = r + tr; + data[i + 1] = g + tg; + data[i + 2] = b + tb; + break; + case 'diff': + case 'difference': + data[i] = Math.abs(r - tr); + data[i + 1] = Math.abs(g - tg); + data[i + 2] = Math.abs(b - tb); + break; + case 'subtract': + data[i] = r - tr; + data[i + 1] = g - tg; + data[i + 2] = b - tb; + break; + case 'darken': + data[i] = Math.min(r, tr); + data[i + 1] = Math.min(g, tg); + data[i + 2] = Math.min(b, tb); + break; + case 'lighten': + data[i] = Math.max(r, tr); + data[i + 1] = Math.max(g, tg); + data[i + 2] = Math.max(b, tb); + break; + case 'overlay': + data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); + data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); + data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); + break; + case 'exclusion': + data[i] = tr + r - ((2 * tr * r) / 255); + data[i + 1] = tg + g - ((2 * tg * g) / 255); + data[i + 2] = tb + b - ((2 * tb * b) / 255); + break; + case 'tint': + data[i] = tr + r * alpha1; + data[i + 1] = tg + g * alpha1; + data[i + 2] = tb + b * alpha1; + } + } + }, - var oW = imageData.width, oH = imageData.height, - dW = round(oW * scaleX), dH = round(oH * scaleY), - newData; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColor: gl.getUniformLocation(program, 'uColor'), + }; + }, - if (this.resizeType === 'sliceHack') { - newData = this.sliceByTwo(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'hermite') { - newData = this.hermiteFastResize(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'bilinear') { - newData = this.bilinearFiltering(options, oW, oH, dW, dH); - } - else if (this.resizeType === 'lanczos') { - newData = this.lanczosResize(options, oW, oH, dW, dH); - } - options.imageData = newData; - }, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(); + source[0] = this.alpha * source[0] / 255; + source[1] = this.alpha * source[1] / 255; + source[2] = this.alpha * source[2] / 255; + source[3] = this.alpha; + gl.uniform4fv(uniformLocations.uColor, source); + }, - /** - * Filter sliceByTwo - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - sliceByTwo: function(options, oW, oH, dW, dH) { - var imageData = options.imageData, - mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, - stepH = oH * mult, resources = fabric.filterBackend.resources, - tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; - if (!resources.sliceByTwo) { - resources.sliceByTwo = document.createElement('canvas'); - } - tmpCanvas = resources.sliceByTwo; - if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { - tmpCanvas.width = oW * 1.5; - tmpCanvas.height = oH; - } - ctx = tmpCanvas.getContext('2d'); - ctx.clearRect(0, 0, oW * 1.5, oH); - ctx.putImageData(imageData, 0, 0); - - dW = floor(dW); - dH = floor(dH); - - while (!doneW || !doneH) { - oW = stepW; - oH = stepH; - if (dW < floor(stepW * mult)) { - stepW = floor(stepW * mult); - } - else { - stepW = dW; - doneW = true; - } - if (dH < floor(stepH * mult)) { - stepH = floor(stepH * mult); - } - else { - stepH = dH; - doneH = true; - } - ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); - sX = dX; - sY = dY; - dY += stepH; - } - return ctx.getImageData(sX, sY, dW, dH); - }, + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + color: this.color, + mode: this.mode, + alpha: this.alpha + }; + } + }); - /** - * Filter lanczosResize - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - lanczosResize: function(options, oW, oH, dW, dH) { - - function process(u) { - var v, i, weight, idx, a, red, green, - blue, alpha, fX, fY; - center.x = (u + 0.5) * ratioX; - icenter.x = floor(center.x); - for (v = 0; v < dH; v++) { - center.y = (v + 0.5) * ratioY; - icenter.y = floor(center.y); - a = 0; red = 0; green = 0; blue = 0; alpha = 0; - for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { - if (i < 0 || i >= oW) { - continue; - } - fX = floor(1000 * abs(i - center.x)); - if (!cacheLanc[fX]) { - cacheLanc[fX] = { }; - } - for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { - if (j < 0 || j >= oH) { - continue; - } - fY = floor(1000 * abs(j - center.y)); - if (!cacheLanc[fX][fY]) { - cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); - } - weight = cacheLanc[fX][fY]; - if (weight > 0) { - idx = (j * oW + i) * 4; - a += weight; - red += weight * srcData[idx]; - green += weight * srcData[idx + 1]; - blue += weight * srcData[idx + 2]; - alpha += weight * srcData[idx + 3]; - } - } - } - idx = (v * dW + u) * 4; - destData[idx] = red / a; - destData[idx + 1] = green / a; - destData[idx + 2] = blue / a; - destData[idx + 3] = alpha / a; - } + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.BlendColor} Instance of fabric.Image.filters.BlendColor + */ + fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; - if (++u < dW) { - return process(u); - } - else { - return destImg; - } - } +})(typeof exports !== 'undefined' ? exports : this); - var srcData = options.imageData.data, - destImg = options.ctx.createImageData(dW, dH), - destData = destImg.data, - lanczos = this.lanczosCreate(this.lanczosLobes), - ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, - rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, - range2X = ceil(ratioX * this.lanczosLobes / 2), - range2Y = ceil(ratioY * this.lanczosLobes / 2), - cacheLanc = { }, center = { }, icenter = { }; - return process(0); - }, +(function(global) { + 'use strict'; - /** - * bilinearFiltering - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - bilinearFiltering: function(options, oW, oH, dW, dH) { - var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, - color, offset = 0, origPix, ratioX = this.rcpScaleX, - ratioY = this.rcpScaleY, - w4 = 4 * (oW - 1), img = options.imageData, - pixels = img.data, destImage = options.ctx.createImageData(dW, dH), - destPixels = destImage.data; - for (i = 0; i < dH; i++) { - for (j = 0; j < dW; j++) { - x = floor(ratioX * j); - y = floor(ratioY * i); - xDiff = ratioX * j - x; - yDiff = ratioY * i - y; - origPix = 4 * (y * oW + x); - - for (chnl = 0; chnl < 4; chnl++) { - a = pixels[origPix + chnl]; - b = pixels[origPix + 4 + chnl]; - c = pixels[origPix + w4 + chnl]; - d = pixels[origPix + w4 + 4 + chnl]; - color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + - c * yDiff * (1 - xDiff) + d * xDiff * yDiff; - destPixels[offset++] = color; - } - } - } - return destImage; - }, + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * hermiteFastResize - * @param {Object} canvasEl Canvas element to apply filter to - * @param {Number} oW Original Width - * @param {Number} oH Original Height - * @param {Number} dW Destination Width - * @param {Number} dH Destination Height - * @returns {ImageData} - */ - hermiteFastResize: function(options, oW, oH, dW, dH) { - var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, - ratioWHalf = ceil(ratioW / 2), - ratioHHalf = ceil(ratioH / 2), - img = options.imageData, data = img.data, - img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; - for (var j = 0; j < dH; j++) { - for (var i = 0; i < dW; i++) { - var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, - gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; - for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { - var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, - centerX = (i + 0.5) * ratioW, w0 = dy * dy; - for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { - var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, - w = sqrt(w0 + dx * dx); - /* eslint-disable max-depth */ - if (w > 1 && w < -1) { - continue; - } - //hermite filter - weight = 2 * w * w * w - 3 * w * w + 1; - if (weight > 0) { - dx = 4 * (xx + yy * oW); - //alpha - gxA += weight * data[dx + 3]; - weightsAlpha += weight; - //colors - if (data[dx + 3] < 255) { - weight = weight * data[dx + 3] / 250; - } - gxR += weight * data[dx]; - gxG += weight * data[dx + 1]; - gxB += weight * data[dx + 2]; - weights += weight; - } - /* eslint-enable max-depth */ - } - } - data2[x2] = gxR / weights; - data2[x2 + 1] = gxG / weights; - data2[x2 + 2] = gxB / weights; - data2[x2 + 3] = gxA / weightsAlpha; - } - } - return img2; - }, + /** + * Image Blend filter class + * @class fabric.Image.filter.BlendImage + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ - /** - * Returns object representation of an instance - * @return {Object} Object representation of an instance - */ - toObject: function() { - return { - type: this.type, - scaleX: this.scaleX, - scaleY: this.scaleY, - resizeType: this.resizeType, - lanczosLobes: this.lanczosLobes - }; - } - }); + filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { + type: 'BlendImage', /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + **/ + image: null, - })(typeof exports !== 'undefined' ? exports : window); + /** + * Blend mode for the filter (one of "multiply", "mask") + * @type String + * @default + **/ + mode: 'multiply', - (function(global) { + /** + * alpha value. represent the strength of the blend image operation. + * not implemented. + **/ + alpha: 1, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'uniform mat3 uTransformMatrix;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', /** - * Contrast filter class - * @class fabric.Image.filters.Contrast - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Contrast({ - * contrast: 0.25 - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Fragment source for the Multiply program */ - filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { - - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Contrast', - - fragmentSource: 'precision highp float;\n' + + fragmentSource: { + multiply: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.rgba *= color2.rgba;\n' + + 'gl_FragColor = color;\n' + + '}', + mask: 'precision highp float;\n' + 'uniform sampler2D uTexture;\n' + - 'uniform float uContrast;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + 'void main() {\n' + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + - 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.a = color2.a;\n' + 'gl_FragColor = color;\n' + '}', + }, + + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + var shaderSource = this.fragmentSource[this.mode]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, + + applyToWebGL: function(options) { + // load texture to blend. + var gl = options.context, + texture = this.createTexture(options.filterBackend, this.image); + this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); + this.callSuper('applyToWebGL', options); + this.unbindAdditionalTexture(gl, gl.TEXTURE1); + }, + + createTexture: function(backend, image) { + return backend.getCachedTexture(image.cacheKey, image._element); + }, + + /** + * Calculate a transformMatrix to adapt the image to blend over + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + calculateMatrix: function() { + var image = this.image, + width = image._element.width, + height = image._element.height; + return [ + 1 / image.scaleX, 0, 0, + 0, 1 / image.scaleY, 0, + -image.left / width, -image.top / height, 1 + ]; + }, - /** - * contrast value, range from -1 to 1. - * @param {Number} contrast - * @default 0 - */ - contrast: 0, + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + resources = options.filterBackend.resources, + data = imageData.data, iLen = data.length, + width = imageData.width, + height = imageData.height, + tr, tg, tb, ta, + r, g, b, a, + canvas1, context, image = this.image, blendData; + + if (!resources.blendImage) { + resources.blendImage = fabric.util.createCanvasElement(); + } + canvas1 = resources.blendImage; + context = canvas1.getContext('2d'); + if (canvas1.width !== width || canvas1.height !== height) { + canvas1.width = width; + canvas1.height = height; + } + else { + context.clearRect(0, 0, width, height); + } + context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); + context.drawImage(image._element, 0, 0, width, height); + blendData = context.getImageData(0, 0, width, height).data; + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + a = data[i + 3]; + + tr = blendData[i]; + tg = blendData[i + 1]; + tb = blendData[i + 2]; + ta = blendData[i + 3]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + data[i + 3] = a * ta / 255; + break; + case 'mask': + data[i + 3] = ta; + break; + } + } + }, - mainParameter: 'contrast', + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), + uImage: gl.getUniformLocation(program, 'uImage'), + }; + }, - /** - * Constructor - * @memberOf fabric.Image.filters.Contrast.prototype - * @param {Object} [options] Options object - * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) - */ + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var matrix = this.calculateMatrix(); + gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. + gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); + }, - /** - * Apply the Contrast operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - if (this.contrast === 0) { - return; - } - var imageData = options.imageData, i, len, - data = imageData.data, len = data.length, - contrast = Math.floor(this.contrast * 255), - contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + image: this.image && this.image.toObject(), + mode: this.mode, + alpha: this.alpha + }; + } + }); - for (i = 0; i < len; i += 4) { - data[i] = contrastF * (data[i] - 128) + 128; - data[i + 1] = contrastF * (data[i + 1] - 128) + 128; - data[i + 2] = contrastF * (data[i + 2] - 128) + 128; - } - }, + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} callback to be invoked after filter creation + * @return {fabric.Image.filters.BlendImage} Instance of fabric.Image.filters.BlendImage + */ + fabric.Image.filters.BlendImage.fromObject = function(object, callback) { + fabric.Image.fromObject(object.image, function(image) { + var options = fabric.util.object.clone(object); + options.image = image; + callback(new fabric.Image.filters.BlendImage(options)); + }); + }; - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uContrast: gl.getUniformLocation(program, 'uContrast'), - }; - }, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uContrast, this.contrast); - }, - }); - /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} - */ - fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; +(function(global) { - })(typeof exports !== 'undefined' ? exports : window); + 'use strict'; - (function(global) { + var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor, + sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, + ceil = Math.ceil, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Resize image filter class + * @class fabric.Image.filters.Resize + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Resize(); + * object.filters.push(filter); + * object.applyFilters(canvas.renderAll.bind(canvas)); + */ + filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { /** - * Saturate filter class - * @class fabric.Image.filters.Saturation - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Saturation#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Saturation({ - * saturation: 1 - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Filter type + * @param {String} type + * @default */ - filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { + type: 'Resize', - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Saturation', + /** + * Resize type + * for webgl resizeType is just lanczos, for canvas2d can be: + * bilinear, hermite, sliceHack, lanczos. + * @param {String} resizeType + * @default + */ + resizeType: 'hermite', - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uSaturation;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float rgMax = max(color.r, color.g);\n' + - 'float rgbMax = max(rgMax, color.b);\n' + - 'color.r += rgbMax != color.r ? (rgbMax - color.r) * uSaturation : 0.00;\n' + - 'color.g += rgbMax != color.g ? (rgbMax - color.g) * uSaturation : 0.00;\n' + - 'color.b += rgbMax != color.b ? (rgbMax - color.b) * uSaturation : 0.00;\n' + - 'gl_FragColor = color;\n' + - '}', + /** + * Scale factor for resizing, x axis + * @param {Number} scaleX + * @default + */ + scaleX: 1, - /** - * Saturation value, from -1 to 1. - * Increases/decreases the color saturation. - * A value of 0 has no effect. - * - * @param {Number} saturation - * @default - */ - saturation: 0, + /** + * Scale factor for resizing, y axis + * @param {Number} scaleY + * @default + */ + scaleY: 1, - mainParameter: 'saturation', + /** + * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos + * @param {Number} lanczosLobes + * @default + */ + lanczosLobes: 3, - /** - * Constructor - * @memberOf fabric.Image.filters.Saturate.prototype - * @param {Object} [options] Options object - * @param {Number} [options.saturate=0] Value to saturate the image (-1...1) - */ - /** - * Apply the Saturation operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.saturation === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.saturation, i, max; - - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; - } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uSaturation: gl.getUniformLocation(program, 'uSaturation'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uSaturation, -this.saturation); - }, - }); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uDelta: gl.getUniformLocation(program, 'uDelta'), + uTaps: gl.getUniformLocation(program, 'uTaps'), + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; + sendUniformData: function(gl, uniformLocations) { + gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); + gl.uniform1fv(uniformLocations.uTaps, this.taps); + }, - })(typeof exports !== 'undefined' ? exports : window); + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var fragmentShader = this.generateShader(filterWindow); + options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); + } + return options.programCache[cacheKey]; + }, - (function(global) { + getFilterWindow: function() { + var scale = this.tempScale; + return Math.ceil(this.lanczosLobes / scale); + }, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + getTaps: function() { + var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, + filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); + for (var i = 1; i <= filterWindow; i++) { + taps[i - 1] = lobeFunction(i * scale); + } + return taps; + }, /** - * Vibrance filter class - * @class fabric.Image.filters.Vibrance - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Vibrance#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Vibrance({ - * vibrance: 1 - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Generate vertex and shader sources from the necessary steps numbers + * @param {Number} filterWindow */ - filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { + generateShader: function(filterWindow) { + var offsets = new Array(filterWindow), + fragmentShader = this.fragmentSourceTOP, filterWindow; - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Vibrance', + for (var i = 1; i <= filterWindow; i++) { + offsets[i - 1] = i + '.0 * uDelta'; + } - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform float uVibrance;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'float max = max(color.r, max(color.g, color.b));\n' + - 'float avg = (color.r + color.g + color.b) / 3.0;\n' + - 'float amt = (abs(max - avg) * 2.0) * uVibrance;\n' + - 'color.r += max != color.r ? (max - color.r) * amt : 0.00;\n' + - 'color.g += max != color.g ? (max - color.g) * amt : 0.00;\n' + - 'color.b += max != color.b ? (max - color.b) * amt : 0.00;\n' + - 'gl_FragColor = color;\n' + - '}', + fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; + fragmentShader += 'void main() {\n'; + fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; + fragmentShader += ' float sum = 1.0;\n'; - /** - * Vibrance value, from -1 to 1. - * Increases/decreases the saturation of more muted colors with less effect on saturated colors. - * A value of 0 has no effect. - * - * @param {Number} vibrance - * @default - */ - vibrance: 0, + offsets.forEach(function(offset, i) { + fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; + }); + fragmentShader += ' gl_FragColor = color / sum;\n'; + fragmentShader += '}'; + return fragmentShader; + }, - mainParameter: 'vibrance', + fragmentSourceTOP: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n', - /** - * Constructor - * @memberOf fabric.Image.filters.Vibrance.prototype - * @param {Object} [options] Options object - * @param {Number} [options.vibrance=0] Vibrance value for the image (between -1 and 1) - */ + /** + * Apply the resize filter to the image + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + if (options.webgl) { + options.passes++; + this.width = options.sourceWidth; + this.horizontal = true; + this.dW = Math.round(this.width * this.scaleX); + this.dH = options.sourceHeight; + this.tempScale = this.dW / this.width; + this.taps = this.getTaps(); + options.destinationWidth = this.dW; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceWidth = options.destinationWidth; + + this.height = options.sourceHeight; + this.horizontal = false; + this.dH = Math.round(this.height * this.scaleY); + this.tempScale = this.dH / this.height; + this.taps = this.getTaps(); + options.destinationHeight = this.dH; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceHeight = options.destinationHeight; + } + else { + this.applyTo2d(options); + } + }, - /** - * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. - */ - applyTo2d: function(options) { - if (this.vibrance === 0) { - return; - } - var imageData = options.imageData, - data = imageData.data, len = data.length, - adjust = -this.vibrance, i, max, avg, amt; + isNeutralState: function() { + return this.scaleX === 1 && this.scaleY === 1; + }, - for (i = 0; i < len; i += 4) { - max = Math.max(data[i], data[i + 1], data[i + 2]); - avg = (data[i] + data[i + 1] + data[i + 2]) / 3; - amt = ((Math.abs(max - avg) * 2 / 255) * adjust); - data[i] += max !== data[i] ? (max - data[i]) * amt : 0; - data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; - data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; + lanczosCreate: function(lobes) { + return function(x) { + if (x >= lobes || x <= -lobes) { + return 0.0; } - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uVibrance: gl.getUniformLocation(program, 'uVibrance'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); - }, - }); + if (x < 1.19209290E-07 && x > -1.19209290E-07) { + return 1.0; + } + x *= Math.PI; + var xx = x / lobes; + return (sin(x) / x) * sin(xx) / xx; + }; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Applies filter to canvas element + * @memberOf fabric.Image.filters.Resize.prototype + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} scaleX + * @param {Number} scaleY */ - fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; + applyTo2d: function(options) { + var imageData = options.imageData, + scaleX = this.scaleX, + scaleY = this.scaleY; - })(typeof exports !== 'undefined' ? exports : window); + this.rcpScaleX = 1 / scaleX; + this.rcpScaleY = 1 / scaleY; - (function(global) { + var oW = imageData.width, oH = imageData.height, + dW = round(oW * scaleX), dH = round(oH * scaleY), + newData; - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + if (this.resizeType === 'sliceHack') { + newData = this.sliceByTwo(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'hermite') { + newData = this.hermiteFastResize(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'bilinear') { + newData = this.bilinearFiltering(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'lanczos') { + newData = this.lanczosResize(options, oW, oH, dW, dH); + } + options.imageData = newData; + }, /** - * Blur filter class - * @class fabric.Image.filters.Blur - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Blur({ - * blur: 0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); - * canvas.renderAll(); - */ - filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { - - type: 'Blur', - - /* - 'gl_FragColor = vec4(0.0);', - 'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;', - 'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;', - 'gl_FragColor += texture2D(texture, vTexCoord + -5 * uDelta)*0.0215963866053;', - 'gl_FragColor += texture2D(texture, vTexCoord + -4 * uDelta)*0.0443683338718;', - 'gl_FragColor += texture2D(texture, vTexCoord + -3 * uDelta)*0.0776744219933;', - 'gl_FragColor += texture2D(texture, vTexCoord + -2 * uDelta)*0.115876621105;', - 'gl_FragColor += texture2D(texture, vTexCoord + -1 * uDelta)*0.147308056121;', - 'gl_FragColor += texture2D(texture, vTexCoord )*0.159576912161;', - 'gl_FragColor += texture2D(texture, vTexCoord + 1 * uDelta)*0.147308056121;', - 'gl_FragColor += texture2D(texture, vTexCoord + 2 * uDelta)*0.115876621105;', - 'gl_FragColor += texture2D(texture, vTexCoord + 3 * uDelta)*0.0776744219933;', - 'gl_FragColor += texture2D(texture, vTexCoord + 4 * uDelta)*0.0443683338718;', - 'gl_FragColor += texture2D(texture, vTexCoord + 5 * uDelta)*0.0215963866053;', - 'gl_FragColor += texture2D(texture, vTexCoord + 6 * uDelta)*0.00895781211794;', - 'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;', - */ + * Filter sliceByTwo + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + sliceByTwo: function(options, oW, oH, dW, dH) { + var imageData = options.imageData, + mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, + stepH = oH * mult, resources = fabric.filterBackend.resources, + tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; + if (!resources.sliceByTwo) { + resources.sliceByTwo = document.createElement('canvas'); + } + tmpCanvas = resources.sliceByTwo; + if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { + tmpCanvas.width = oW * 1.5; + tmpCanvas.height = oH; + } + ctx = tmpCanvas.getContext('2d'); + ctx.clearRect(0, 0, oW * 1.5, oH); + ctx.putImageData(imageData, 0, 0); - /* eslint-disable max-len */ - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec2 uDelta;\n' + - 'varying vec2 vTexCoord;\n' + - 'const float nSamples = 15.0;\n' + - 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + - 'float random(vec3 scale) {\n' + - /* use the fragment position for a different seed per-pixel */ - 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + - '}\n' + - 'void main() {\n' + - 'vec4 color = vec4(0.0);\n' + - 'float total = 0.0;\n' + - 'float offset = random(v3offset);\n' + - 'for (float t = -nSamples; t <= nSamples; t++) {\n' + - 'float percent = (t + offset - 0.5) / nSamples;\n' + - 'float weight = 1.0 - abs(percent);\n' + - 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + - 'total += weight;\n' + - '}\n' + - 'gl_FragColor = color / total;\n' + - '}', - /* eslint-enable max-len */ + dW = floor(dW); + dH = floor(dH); - /** - * blur value, in percentage of image dimensions. - * specific to keep the image blur constant at different resolutions - * range between 0 and 1. - * @type Number - * @default - */ - blur: 0, - - mainParameter: 'blur', - - applyTo: function(options) { - if (options.webgl) { - // this aspectRatio is used to give the same blur to vertical and horizontal - this.aspectRatio = options.sourceWidth / options.sourceHeight; - options.passes++; - this._setupFrameBuffer(options); - this.horizontal = true; - this.applyToWebGL(options); - this._swapTextures(options); - this._setupFrameBuffer(options); - this.horizontal = false; - this.applyToWebGL(options); - this._swapTextures(options); + while (!doneW || !doneH) { + oW = stepW; + oH = stepH; + if (dW < floor(stepW * mult)) { + stepW = floor(stepW * mult); } else { - this.applyTo2d(options); + stepW = dW; + doneW = true; } - }, - - applyTo2d: function(options) { - // paint canvasEl with current image data. - //options.ctx.putImageData(options.imageData, 0, 0); - options.imageData = this.simpleBlur(options); - }, - - simpleBlur: function(options) { - var resources = options.filterBackend.resources, canvas1, canvas2, - width = options.imageData.width, - height = options.imageData.height; - - if (!resources.blurLayer1) { - resources.blurLayer1 = fabric.util.createCanvasElement(); - resources.blurLayer2 = fabric.util.createCanvasElement(); - } - canvas1 = resources.blurLayer1; - canvas2 = resources.blurLayer2; - if (canvas1.width !== width || canvas1.height !== height) { - canvas2.width = canvas1.width = width; - canvas2.height = canvas1.height = height; - } - var ctx1 = canvas1.getContext('2d'), - ctx2 = canvas2.getContext('2d'), - nSamples = 15, - random, percent, j, i, - blur = this.blur * 0.06 * 0.5; - - // load first canvas - ctx1.putImageData(options.imageData, 0, 0); - ctx2.clearRect(0, 0, width, height); - - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * width + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, j, random); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - for (i = -nSamples; i <= nSamples; i++) { - random = (Math.random() - 0.5) / 4; - percent = i / nSamples; - j = blur * percent * height + random; - ctx2.globalAlpha = 1 - Math.abs(percent); - ctx2.drawImage(canvas1, random, j); - ctx1.drawImage(canvas2, 0, 0); - ctx2.globalAlpha = 1; - ctx2.clearRect(0, 0, canvas2.width, canvas2.height); - } - options.ctx.drawImage(canvas1, 0, 0); - var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); - ctx1.globalAlpha = 1; - ctx1.clearRect(0, 0, canvas1.width, canvas1.height); - return newImageData; - }, - - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - delta: gl.getUniformLocation(program, 'uDelta'), - }; - }, - - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - var delta = this.chooseRightDelta(); - gl.uniform2fv(uniformLocations.delta, delta); - }, - - /** - * choose right value of image percentage to blur with - * @returns {Array} a numeric array with delta values - */ - chooseRightDelta: function() { - var blurScale = 1, delta = [0, 0], blur; - if (this.horizontal) { - if (this.aspectRatio > 1) { - // image is wide, i want to shrink radius horizontal - blurScale = 1 / this.aspectRatio; - } + if (dH < floor(stepH * mult)) { + stepH = floor(stepH * mult); } else { - if (this.aspectRatio < 1) { - // image is tall, i want to shrink radius vertical - blurScale = this.aspectRatio; + stepH = dH; + doneH = true; + } + ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); + sX = dX; + sY = dY; + dY += stepH; + } + return ctx.getImageData(sX, sY, dW, dH); + }, + + /** + * Filter lanczosResize + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + lanczosResize: function(options, oW, oH, dW, dH) { + + function process(u) { + var v, i, weight, idx, a, red, green, + blue, alpha, fX, fY; + center.x = (u + 0.5) * ratioX; + icenter.x = floor(center.x); + for (v = 0; v < dH; v++) { + center.y = (v + 0.5) * ratioY; + icenter.y = floor(center.y); + a = 0; red = 0; green = 0; blue = 0; alpha = 0; + for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { + if (i < 0 || i >= oW) { + continue; + } + fX = floor(1000 * abs(i - center.x)); + if (!cacheLanc[fX]) { + cacheLanc[fX] = { }; + } + for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { + if (j < 0 || j >= oH) { + continue; + } + fY = floor(1000 * abs(j - center.y)); + if (!cacheLanc[fX][fY]) { + cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); + } + weight = cacheLanc[fX][fY]; + if (weight > 0) { + idx = (j * oW + i) * 4; + a += weight; + red += weight * srcData[idx]; + green += weight * srcData[idx + 1]; + blue += weight * srcData[idx + 2]; + alpha += weight * srcData[idx + 3]; + } + } } + idx = (v * dW + u) * 4; + destData[idx] = red / a; + destData[idx + 1] = green / a; + destData[idx + 2] = blue / a; + destData[idx + 3] = alpha / a; } - blur = blurScale * this.blur * 0.12; - if (this.horizontal) { - delta[0] = blur; + + if (++u < dW) { + return process(u); } else { - delta[1] = blur; + return destImg; + } + } + + var srcData = options.imageData.data, + destImg = options.ctx.createImageData(dW, dH), + destData = destImg.data, + lanczos = this.lanczosCreate(this.lanczosLobes), + ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, + rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, + range2X = ceil(ratioX * this.lanczosLobes / 2), + range2Y = ceil(ratioY * this.lanczosLobes / 2), + cacheLanc = { }, center = { }, icenter = { }; + + return process(0); + }, + + /** + * bilinearFiltering + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + bilinearFiltering: function(options, oW, oH, dW, dH) { + var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, + color, offset = 0, origPix, ratioX = this.rcpScaleX, + ratioY = this.rcpScaleY, + w4 = 4 * (oW - 1), img = options.imageData, + pixels = img.data, destImage = options.ctx.createImageData(dW, dH), + destPixels = destImage.data; + for (i = 0; i < dH; i++) { + for (j = 0; j < dW; j++) { + x = floor(ratioX * j); + y = floor(ratioY * i); + xDiff = ratioX * j - x; + yDiff = ratioY * i - y; + origPix = 4 * (y * oW + x); + + for (chnl = 0; chnl < 4; chnl++) { + a = pixels[origPix + chnl]; + b = pixels[origPix + 4 + chnl]; + c = pixels[origPix + w4 + chnl]; + d = pixels[origPix + w4 + 4 + chnl]; + color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + + c * yDiff * (1 - xDiff) + d * xDiff * yDiff; + destPixels[offset++] = color; + } + } + } + return destImage; + }, + + /** + * hermiteFastResize + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + hermiteFastResize: function(options, oW, oH, dW, dH) { + var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, + ratioWHalf = ceil(ratioW / 2), + ratioHHalf = ceil(ratioH / 2), + img = options.imageData, data = img.data, + img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; + for (var j = 0; j < dH; j++) { + for (var i = 0; i < dW; i++) { + var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, + gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; + for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { + var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, + centerX = (i + 0.5) * ratioW, w0 = dy * dy; + for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { + var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, + w = sqrt(w0 + dx * dx); + /* eslint-disable max-depth */ + if (w > 1 && w < -1) { + continue; + } + //hermite filter + weight = 2 * w * w * w - 3 * w * w + 1; + if (weight > 0) { + dx = 4 * (xx + yy * oW); + //alpha + gxA += weight * data[dx + 3]; + weightsAlpha += weight; + //colors + if (data[dx + 3] < 255) { + weight = weight * data[dx + 3] / 250; + } + gxR += weight * data[dx]; + gxG += weight * data[dx + 1]; + gxB += weight * data[dx + 2]; + weights += weight; + } + /* eslint-enable max-depth */ + } + } + data2[x2] = gxR / weights; + data2[x2 + 1] = gxG / weights; + data2[x2 + 2] = gxB / weights; + data2[x2 + 3] = gxA / weightsAlpha; } - return delta; - }, - }); + } + return img2; + }, /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Returns object representation of an instance + * @return {Object} Object representation of an instance */ - filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; - - })(typeof exports !== 'undefined' ? exports : window); + toObject: function() { + return { + type: this.type, + scaleX: this.scaleX, + scaleY: this.scaleY, + resizeType: this.resizeType, + lanczosLobes: this.lanczosLobes + }; + } + }); - (function(global) { + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Resize} Instance of fabric.Image.filters.Resize + */ + fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; +})(typeof exports !== 'undefined' ? exports : this); - /** - * Gamma filter class - * @class fabric.Image.filters.Gamma - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.Gamma({ - * gamma: [1, 0.5, 2.1] - * }); - * object.filters.push(filter); - * object.applyFilters(); - */ - filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Gamma', +(function(global) { - fragmentSource: 'precision highp float;\n' + - 'uniform sampler2D uTexture;\n' + - 'uniform vec3 uGamma;\n' + - 'varying vec2 vTexCoord;\n' + - 'void main() {\n' + - 'vec4 color = texture2D(uTexture, vTexCoord);\n' + - 'vec3 correction = (1.0 / uGamma);\n' + - 'color.r = pow(color.r, correction.r);\n' + - 'color.g = pow(color.g, correction.g);\n' + - 'color.b = pow(color.b, correction.b);\n' + - 'gl_FragColor = color;\n' + - 'gl_FragColor.rgb *= color.a;\n' + - '}', + 'use strict'; - /** - * Gamma array value, from 0.01 to 2.2. - * @param {Array} gamma - * @default - */ - gamma: [1, 1, 1], + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'gamma', + /** + * Contrast filter class + * @class fabric.Image.filters.Contrast + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Contrast({ + * contrast: 0.25 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.gamma = [1, 1, 1]; - filters.BaseFilter.prototype.initialize.call(this, options); - }, + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Contrast', - /** - * Apply the Gamma operation to a Uint8Array representing the pixels of an image. - * - * @param {Object} options - * @param {ImageData} options.imageData The Uint8Array to be filtered. - */ - applyTo2d: function(options) { - var imageData = options.imageData, data = imageData.data, - gamma = this.gamma, len = data.length, - rInv = 1 / gamma[0], gInv = 1 / gamma[1], - bInv = 1 / gamma[2], i; - - if (!this.rVals) { - // eslint-disable-next-line - this.rVals = new Uint8Array(256); - // eslint-disable-next-line - this.gVals = new Uint8Array(256); - // eslint-disable-next-line - this.bVals = new Uint8Array(256); - } - - // This is an optimization - pre-compute a look-up table for each color channel - // instead of performing these pow calls for each pixel in the image. - for (i = 0, len = 256; i < len; i++) { - this.rVals[i] = Math.pow(i / 255, rInv) * 255; - this.gVals[i] = Math.pow(i / 255, gInv) * 255; - this.bVals[i] = Math.pow(i / 255, bInv) * 255; - } - for (i = 0, len = data.length; i < len; i += 4) { - data[i] = this.rVals[data[i]]; - data[i + 1] = this.gVals[data[i + 1]]; - data[i + 2] = this.bVals[data[i + 2]]; - } - }, + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uContrast;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + + 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + + 'gl_FragColor = color;\n' + + '}', - /** - * Return WebGL uniform locations for this filter's shader. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {WebGLShaderProgram} program This filter's compiled shader program. - */ - getUniformLocations: function(gl, program) { - return { - uGamma: gl.getUniformLocation(program, 'uGamma'), - }; - }, + /** + * contrast value, range from -1 to 1. + * @param {Number} contrast + * @default 0 + */ + contrast: 0, - /** - * Send data from this filter to its shader program's uniforms. - * - * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. - * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects - */ - sendUniformData: function(gl, uniformLocations) { - gl.uniform3fv(uniformLocations.uGamma, this.gamma); - }, - }); + mainParameter: 'contrast', /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Constructor + * @memberOf fabric.Image.filters.Contrast.prototype + * @param {Object} [options] Options object + * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) */ - fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; - })(typeof exports !== 'undefined' ? exports : window); + /** + * Apply the Contrast operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + if (this.contrast === 0) { + return; + } + var imageData = options.imageData, i, len, + data = imageData.data, len = data.length, + contrast = Math.floor(this.contrast * 255), + contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); - (function(global) { + for (i = 0; i < len; i += 4) { + data[i] = contrastF * (data[i] - 128) + 128; + data[i + 1] = contrastF * (data[i + 1] - 128) + 128; + data[i + 2] = contrastF * (data[i + 2] - 128) + 128; + } + }, - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uContrast: gl.getUniformLocation(program, 'uContrast'), + }; + }, /** - * A container class that knows how to apply a sequence of filters to an input image. + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ - filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uContrast, this.contrast); + }, + }); - type: 'Composed', + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Contrast} Instance of fabric.Image.filters.Contrast + */ + fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * A non sparse array of filters to apply - */ - subFilters: [], +})(typeof exports !== 'undefined' ? exports : this); - /** - * Constructor - * @param {Object} [options] Options object - */ - initialize: function(options) { - this.callSuper('initialize', options); - // create a new array instead mutating the prototype with push - this.subFilters = this.subFilters.slice(0); - }, - /** - * Apply this container's filters to the input image provided. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be applied. - */ - applyTo: function(options) { - options.passes += this.subFilters.length - 1; - this.subFilters.forEach(function(filter) { - filter.applyTo(options); - }); - }, +(function(global) { - /** - * Serialize this filter into JSON. - * - * @returns {Object} A JSON representation of this filter. - */ - toObject: function() { - return fabric.util.object.extend(this.callSuper('toObject'), { - subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), - }); - }, + 'use strict'; - isNeutralState: function() { - return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); - } - }); + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Saturate filter class + * @class fabric.Image.filters.Saturation + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Saturation#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Saturation({ + * saturation: 1 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { /** - * Deserialize a JSON definition of a ComposedFilter into a concrete instance. + * Filter type + * @param {String} type + * @default */ - fabric.Image.filters.Composed.fromObject = function(object) { - var filters = object.subFilters || []; - return Promise.all(filters.map(function(filter) { - return fabric.Image.filters[filter.type].fromObject(filter); - })).then(function(enlivedFilters) { - return new fabric.Image.filters.Composed({ subFilters: enlivedFilters }); - }); - }; - })(typeof exports !== 'undefined' ? exports : window); + type: 'Saturation', + + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uSaturation;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float rgMax = max(color.r, color.g);\n' + + 'float rgbMax = max(rgMax, color.b);\n' + + 'color.r += rgbMax != color.r ? (rgbMax - color.r) * uSaturation : 0.00;\n' + + 'color.g += rgbMax != color.g ? (rgbMax - color.g) * uSaturation : 0.00;\n' + + 'color.b += rgbMax != color.b ? (rgbMax - color.b) * uSaturation : 0.00;\n' + + 'gl_FragColor = color;\n' + + '}', + + /** + * Saturation value, from -1 to 1. + * Increases/decreases the color saturation. + * A value of 0 has no effect. + * + * @param {Number} saturation + * @default + */ + saturation: 0, - (function(global) { + mainParameter: 'saturation', - var fabric = global.fabric || (global.fabric = { }), - filters = fabric.Image.filters, - createClass = fabric.util.createClass; + /** + * Constructor + * @memberOf fabric.Image.filters.Saturate.prototype + * @param {Object} [options] Options object + * @param {Number} [options.saturate=0] Value to saturate the image (-1...1) + */ /** - * HueRotation filter class - * @class fabric.Image.filters.HueRotation - * @memberOf fabric.Image.filters - * @extends fabric.Image.filters.BaseFilter - * @see {@link fabric.Image.filters.HueRotation#initialize} for constructor definition - * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} - * @example - * var filter = new fabric.Image.filters.HueRotation({ - * rotation: -0.5 - * }); - * object.filters.push(filter); - * object.applyFilters(); + * Apply the Saturation operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { + applyTo2d: function(options) { + if (this.saturation === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.saturation, i, max; - /** - * Filter type - * @param {String} type - * @default - */ - type: 'HueRotation', + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; + } + }, - /** - * HueRotation value, from -1 to 1. - * the unit is radians - * @param {Number} myParameter - * @default - */ - rotation: 0, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uSaturation: gl.getUniformLocation(program, 'uSaturation'), + }; + }, - /** - * Describe the property that is the filter parameter - * @param {String} m - * @default - */ - mainParameter: 'rotation', - - calculateMatrix: function() { - var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), - aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; - this.matrix = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0 - ]; - this.matrix[0] = cos + OneMinusCos / 3; - this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[6] = cos + aThird * OneMinusCos; - this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; - this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; - this.matrix[12] = cos + aThird * OneMinusCos; - }, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uSaturation, -this.saturation); + }, + }); - /** - * HueRotation isNeutralState implementation - * Used only in image applyFilters to discard filters that will not have an effect - * on the image - * @param {Object} options - **/ - isNeutralState: function(options) { - this.calculateMatrix(); - return filters.BaseFilter.prototype.isNeutralState.call(this, options); - }, + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Saturation} Instance of fabric.Image.filters.Saturate + */ + fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Apply this filter to the input image data provided. - * - * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. - * - * @param {Object} options - * @param {Number} options.passes The number of filters remaining to be executed - * @param {Boolean} options.webgl Whether to use webgl to render the filter. - * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. - * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. - * @param {WebGLRenderingContext} options.context The GL context used for rendering. - * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. - */ - applyTo: function(options) { - this.calculateMatrix(); - filters.BaseFilter.prototype.applyTo.call(this, options); - }, +})(typeof exports !== 'undefined' ? exports : this); - }); + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Vibrance filter class + * @class fabric.Image.filters.Vibrance + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Vibrance#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Vibrance({ + * vibrance: 1 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { /** - * Create filter instance from an object representation - * @static - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Filter type + * @param {String} type + * @default */ - fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - - })(typeof exports !== 'undefined' ? exports : window); + type: 'Vibrance', + + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uVibrance;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float max = max(color.r, max(color.g, color.b));\n' + + 'float avg = (color.r + color.g + color.b) / 3.0;\n' + + 'float amt = (abs(max - avg) * 2.0) * uVibrance;\n' + + 'color.r += max != color.r ? (max - color.r) * amt : 0.00;\n' + + 'color.g += max != color.g ? (max - color.g) * amt : 0.00;\n' + + 'color.b += max != color.b ? (max - color.b) * amt : 0.00;\n' + + 'gl_FragColor = color;\n' + + '}', + + /** + * Vibrance value, from -1 to 1. + * Increases/decreases the saturation of more muted colors with less effect on saturated colors. + * A value of 0 has no effect. + * + * @param {Number} vibrance + * @default + */ + vibrance: 0, - (function(global) { - var fabric = global.fabric || (global.fabric = { }), - clone = fabric.util.object.clone; + mainParameter: 'vibrance', - var additionalProps = - ('fontFamily fontWeight fontSize text underline overline linethrough' + - ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + - ' direction path pathStartOffset pathSide pathAlign').split(' '); + /** + * Constructor + * @memberOf fabric.Image.filters.Vibrance.prototype + * @param {Object} [options] Options object + * @param {Number} [options.vibrance=0] Vibrance value for the image (between -1 and 1) + */ /** - * Text class - * @class fabric.Text - * @extends fabric.Object - * @return {fabric.Text} thisArg - * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} - * @see {@link fabric.Text#initialize} for constructor definition + * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ - fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { + applyTo2d: function(options) { + if (this.vibrance === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.vibrance, i, max, avg, amt; - /** - * Properties which when set cause object to change dimensions - * @type Array - * @private - */ - _dimensionAffectingProps: [ - 'fontSize', - 'fontWeight', - 'fontFamily', - 'fontStyle', - 'lineHeight', - 'text', - 'charSpacing', - 'textAlign', - 'styles', - 'path', - 'pathStartOffset', - 'pathSide', - 'pathAlign' - ], + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + amt = ((Math.abs(max - avg) * 2 / 255) * adjust); + data[i] += max !== data[i] ? (max - data[i]) * amt : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; + } + }, - /** - * @private - */ - _reNewline: /\r?\n/, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uVibrance: gl.getUniformLocation(program, 'uVibrance'), + }; + }, - /** - * Use this regular expression to filter for whitespaces that is not a new line. - * Mostly used when text is 'justify' aligned. - * @private - */ - _reSpacesAndTabs: /[ \t\r]/g, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); + }, + }); - /** - * Use this regular expression to filter for whitespace that is not a new line. - * Mostly used when text is 'justify' aligned. - * @private - */ - _reSpaceAndTab: /[ \t\r]/, + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Vibrance} Instance of fabric.Image.filters.Vibrance + */ + fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Use this regular expression to filter consecutive groups of non spaces. - * Mostly used when text is 'justify' aligned. - * @private - */ - _reWords: /\S+/g, +})(typeof exports !== 'undefined' ? exports : this); - /** - * Type of an object - * @type String - * @default - */ - type: 'text', - /** - * Font size (in pixels) - * @type Number - * @default - */ - fontSize: 40, +(function(global) { - /** - * Font weight (e.g. bold, normal, 400, 600, 800) - * @type {(Number|String)} - * @default - */ - fontWeight: 'normal', + 'use strict'; - /** - * Font family - * @type String - * @default - */ - fontFamily: 'Times New Roman', + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Text decoration underline. - * @type Boolean - * @default - */ - underline: false, + /** + * Blur filter class + * @class fabric.Image.filters.Blur + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Blur({ + * blur: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { - /** - * Text decoration overline. - * @type Boolean - * @default - */ - overline: false, + type: 'Blur', - /** - * Text decoration linethrough. - * @type Boolean - * @default - */ - linethrough: false, + /* +'gl_FragColor = vec4(0.0);', +'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;', +'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;', +'gl_FragColor += texture2D(texture, vTexCoord + -5 * uDelta)*0.0215963866053;', +'gl_FragColor += texture2D(texture, vTexCoord + -4 * uDelta)*0.0443683338718;', +'gl_FragColor += texture2D(texture, vTexCoord + -3 * uDelta)*0.0776744219933;', +'gl_FragColor += texture2D(texture, vTexCoord + -2 * uDelta)*0.115876621105;', +'gl_FragColor += texture2D(texture, vTexCoord + -1 * uDelta)*0.147308056121;', +'gl_FragColor += texture2D(texture, vTexCoord )*0.159576912161;', +'gl_FragColor += texture2D(texture, vTexCoord + 1 * uDelta)*0.147308056121;', +'gl_FragColor += texture2D(texture, vTexCoord + 2 * uDelta)*0.115876621105;', +'gl_FragColor += texture2D(texture, vTexCoord + 3 * uDelta)*0.0776744219933;', +'gl_FragColor += texture2D(texture, vTexCoord + 4 * uDelta)*0.0443683338718;', +'gl_FragColor += texture2D(texture, vTexCoord + 5 * uDelta)*0.0215963866053;', +'gl_FragColor += texture2D(texture, vTexCoord + 6 * uDelta)*0.00895781211794;', +'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;', +*/ + + /* eslint-disable max-len */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n' + + 'const float nSamples = 15.0;\n' + + 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + + 'float random(vec3 scale) {\n' + + /* use the fragment position for a different seed per-pixel */ + 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + + '}\n' + + 'void main() {\n' + + 'vec4 color = vec4(0.0);\n' + + 'float total = 0.0;\n' + + 'float offset = random(v3offset);\n' + + 'for (float t = -nSamples; t <= nSamples; t++) {\n' + + 'float percent = (t + offset - 0.5) / nSamples;\n' + + 'float weight = 1.0 - abs(percent);\n' + + 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + + 'total += weight;\n' + + '}\n' + + 'gl_FragColor = color / total;\n' + + '}', + /* eslint-enable max-len */ - /** - * Text alignment. Possible values: "left", "center", "right", "justify", - * "justify-left", "justify-center" or "justify-right". - * @type String - * @default - */ - textAlign: 'left', + /** + * blur value, in percentage of image dimensions. + * specific to keep the image blur constant at different resolutions + * range between 0 and 1. + * @type Number + * @default + */ + blur: 0, - /** - * Font style . Possible values: "", "normal", "italic" or "oblique". - * @type String - * @default - */ - fontStyle: 'normal', + mainParameter: 'blur', - /** - * Line height - * @type Number - * @default - */ - lineHeight: 1.16, + applyTo: function(options) { + if (options.webgl) { + // this aspectRatio is used to give the same blur to vertical and horizontal + this.aspectRatio = options.sourceWidth / options.sourceHeight; + options.passes++; + this._setupFrameBuffer(options); + this.horizontal = true; + this.applyToWebGL(options); + this._swapTextures(options); + this._setupFrameBuffer(options); + this.horizontal = false; + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, + + applyTo2d: function(options) { + // paint canvasEl with current image data. + //options.ctx.putImageData(options.imageData, 0, 0); + options.imageData = this.simpleBlur(options); + }, + + simpleBlur: function(options) { + var resources = options.filterBackend.resources, canvas1, canvas2, + width = options.imageData.width, + height = options.imageData.height; + + if (!resources.blurLayer1) { + resources.blurLayer1 = fabric.util.createCanvasElement(); + resources.blurLayer2 = fabric.util.createCanvasElement(); + } + canvas1 = resources.blurLayer1; + canvas2 = resources.blurLayer2; + if (canvas1.width !== width || canvas1.height !== height) { + canvas2.width = canvas1.width = width; + canvas2.height = canvas1.height = height; + } + var ctx1 = canvas1.getContext('2d'), + ctx2 = canvas2.getContext('2d'), + nSamples = 15, + random, percent, j, i, + blur = this.blur * 0.06 * 0.5; + + // load first canvas + ctx1.putImageData(options.imageData, 0, 0); + ctx2.clearRect(0, 0, width, height); + + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * width + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, j, random); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * height + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, random, j); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + options.ctx.drawImage(canvas1, 0, 0); + var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); + ctx1.globalAlpha = 1; + ctx1.clearRect(0, 0, canvas1.width, canvas1.height); + return newImageData; + }, + + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + delta: gl.getUniformLocation(program, 'uDelta'), + }; + }, - /** - * Superscript schema object (minimum overlap) - * @type {Object} - * @default - */ - superscript: { - size: 0.60, // fontSize factor - baseline: -0.35 // baseline-shift factor (upwards) - }, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var delta = this.chooseRightDelta(); + gl.uniform2fv(uniformLocations.delta, delta); + }, - /** - * Subscript schema object (minimum overlap) - * @type {Object} - * @default - */ - subscript: { - size: 0.60, // fontSize factor - baseline: 0.11 // baseline-shift factor (downwards) - }, + /** + * choose right value of image percentage to blur with + * @returns {Array} a numeric array with delta values + */ + chooseRightDelta: function() { + var blurScale = 1, delta = [0, 0], blur; + if (this.horizontal) { + if (this.aspectRatio > 1) { + // image is wide, i want to shrink radius horizontal + blurScale = 1 / this.aspectRatio; + } + } + else { + if (this.aspectRatio < 1) { + // image is tall, i want to shrink radius vertical + blurScale = this.aspectRatio; + } + } + blur = blurScale * this.blur * 0.12; + if (this.horizontal) { + delta[0] = blur; + } + else { + delta[1] = blur; + } + return delta; + }, + }); - /** - * Background color of text lines - * @type String - * @default - */ - textBackgroundColor: '', + /** + * Deserialize a JSON definition of a BlurFilter into a concrete instance. + */ + filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * List of properties to consider when checking if - * state of an object is changed ({@link fabric.Object#hasStateChanged}) - * as well as for history (undo/redo) purposes - * @type Array - */ - stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), +})(typeof exports !== 'undefined' ? exports : this); - /** - * List of properties to consider when checking if cache needs refresh - * @type Array - */ - cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), - /** - * When defined, an object is rendered via stroke and this property specifies its color. - * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 - * @type String - * @default - */ - stroke: null, +(function(global) { - /** - * Shadow object representing shadow of this shape. - * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 - * @type fabric.Shadow - * @default - */ - shadow: null, + 'use strict'; - /** - * fabric.Path that the text should follow. - * since 4.6.0 the path will be drawn automatically. - * if you want to make the path visible, give it a stroke and strokeWidth or fill value - * if you want it to be hidden, assign visible = false to the path. - * This feature is in BETA, and SVG import/export is not yet supported. - * @type fabric.Path - * @example - * var textPath = new fabric.Text('Text on a path', { - * top: 150, - * left: 150, - * textAlign: 'center', - * charSpacing: -50, - * path: new fabric.Path('M 0 0 C 50 -100 150 -100 200 0', { - * strokeWidth: 1, - * visible: false - * }), - * pathSide: 'left', - * pathStartOffset: 0 - * }); - * @default - */ - path: null, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Offset amount for text path starting position - * Only used when text has a path - * @type Number - * @default - */ - pathStartOffset: 0, + /** + * Gamma filter class + * @class fabric.Image.filters.Gamma + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Gamma({ + * gamma: [1, 0.5, 2.1] + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { - /** - * Which side of the path the text should be drawn on. - * Only used when text has a path - * @type {String} 'left|right' - * @default - */ - pathSide: 'left', + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Gamma', + + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec3 uGamma;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec3 correction = (1.0 / uGamma);\n' + + 'color.r = pow(color.r, correction.r);\n' + + 'color.g = pow(color.g, correction.g);\n' + + 'color.b = pow(color.b, correction.b);\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.rgb *= color.a;\n' + + '}', + + /** + * Gamma array value, from 0.01 to 2.2. + * @param {Array} gamma + * @default + */ + gamma: [1, 1, 1], - /** - * How text is aligned to the path. This property determines - * the perpendicular position of each character relative to the path. - * (one of "baseline", "center", "ascender", "descender") - * This feature is in BETA, and its behavior may change - * @type String - * @default - */ - pathAlign: 'baseline', + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'gamma', - /** - * @private - */ - _fontSizeFraction: 0.222, + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.gamma = [1, 1, 1]; + filters.BaseFilter.prototype.initialize.call(this, options); + }, - /** - * @private - */ - offsets: { - underline: 0.10, - linethrough: -0.315, - overline: -0.88 - }, + /** + * Apply the Gamma operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, data = imageData.data, + gamma = this.gamma, len = data.length, + rInv = 1 / gamma[0], gInv = 1 / gamma[1], + bInv = 1 / gamma[2], i; - /** - * Text Line proportion to font Size (in pixels) - * @type Number - * @default - */ - _fontSizeMult: 1.13, + if (!this.rVals) { + // eslint-disable-next-line + this.rVals = new Uint8Array(256); + // eslint-disable-next-line + this.gVals = new Uint8Array(256); + // eslint-disable-next-line + this.bVals = new Uint8Array(256); + } - /** - * additional space between characters - * expressed in thousands of em unit - * @type Number - * @default - */ - charSpacing: 0, + // This is an optimization - pre-compute a look-up table for each color channel + // instead of performing these pow calls for each pixel in the image. + for (i = 0, len = 256; i < len; i++) { + this.rVals[i] = Math.pow(i / 255, rInv) * 255; + this.gVals[i] = Math.pow(i / 255, gInv) * 255; + this.bVals[i] = Math.pow(i / 255, bInv) * 255; + } + for (i = 0, len = data.length; i < len; i += 4) { + data[i] = this.rVals[data[i]]; + data[i + 1] = this.gVals[data[i + 1]]; + data[i + 2] = this.bVals[data[i + 2]]; + } + }, - /** - * Object containing character styles - top-level properties -> line numbers, - * 2nd-level properties - character numbers - * @type Object - * @default - */ - styles: null, + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uGamma: gl.getUniformLocation(program, 'uGamma'), + }; + }, - /** - * Reference to a context to measure text char or couple of chars - * the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas - * once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every - * text object created. - * @type {CanvasRenderingContext2D} - * @default - */ - _measuringContext: null, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform3fv(uniformLocations.uGamma, this.gamma); + }, + }); - /** - * Baseline shift, styles only, keep at 0 for the main text object - * @type {Number} - * @default - */ - deltaY: 0, + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Gamma} Instance of fabric.Image.filters.Gamma + */ + fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * WARNING: EXPERIMENTAL. NOT SUPPORTED YET - * determine the direction of the text. - * This has to be set manually together with textAlign and originX for proper - * experience. - * some interesting link for the future - * https://www.w3.org/International/questions/qa-bidi-unicode-controls - * @since 4.5.0 - * @type {String} 'ltr|rtl' - * @default - */ - direction: 'ltr', +})(typeof exports !== 'undefined' ? exports : this); - /** - * Array of properties that define a style unit (of 'styles'). - * @type {Array} - * @default - */ - _styleProperties: [ - 'stroke', - 'strokeWidth', - 'fill', - 'fontFamily', - 'fontSize', - 'fontWeight', - 'fontStyle', - 'underline', - 'overline', - 'linethrough', - 'deltaY', - 'textBackgroundColor', - ], - /** - * contains characters bounding boxes - */ - __charBounds: [], +(function(global) { - /** - * use this size when measuring text. To avoid IE11 rounding errors - * @type {Number} - * @default - * @readonly - * @private - */ - CACHE_FONT_SIZE: 400, + 'use strict'; - /** - * contains the min text width to avoid getting 0 - * @type {Number} - * @default - */ - MIN_TEXT_WIDTH: 2, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Constructor - * @param {String} text Text string - * @param {Object} [options] Options object - * @return {fabric.Text} thisArg - */ - initialize: function(text, options) { - this.styles = options ? (options.styles || { }) : { }; - this.text = text; - this.__skipDimension = true; - this.callSuper('initialize', options); - if (this.path) { - this.setPathInfo(); - } - this.__skipDimension = false; - this.initDimensions(); - this.setCoords(); - this.setupState({ propertySet: '_dimensionAffectingProps' }); - }, + /** + * A container class that knows how to apply a sequence of filters to an input image. + */ + filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { - /** - * If text has a path, it will add the extra information needed - * for path and text calculations - * @return {fabric.Text} thisArg - */ - setPathInfo: function() { - var path = this.path; - if (path) { - path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); - } - }, + type: 'Composed', - /** - * Return a context for measurement of text string. - * if created it gets stored for reuse - * this is for internal use, please do not use it - * @private - * @param {String} text Text string - * @param {Object} [options] Options object - * @return {fabric.Text} thisArg - */ - getMeasuringContext: function() { - // if we did not return we have to measure something. - if (!fabric._measuringContext) { - fabric._measuringContext = this.canvas && this.canvas.contextCache || - fabric.util.createCanvasElement().getContext('2d'); - } - return fabric._measuringContext; - }, + /** + * A non sparse array of filters to apply + */ + subFilters: [], - /** - * @private - * Divides text into lines of text and lines of graphemes. - */ - _splitText: function() { - var newLines = this._splitTextIntoLines(this.text); - this.textLines = newLines.lines; - this._textLines = newLines.graphemeLines; - this._unwrappedTextLines = newLines._unwrappedLines; - this._text = newLines.graphemeText; - return newLines; - }, + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.subFilters = this.subFilters.slice(0); + }, - /** - * Initialize or update text dimensions. - * Updates this.width and this.height with the proper values. - * Does not return dimensions. - */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this._splitText(); - this._clearCache(); - if (this.path) { - this.width = this.path.width; - this.height = this.path.height; - } - else { - this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; - this.height = this.calcTextHeight(); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, + /** + * Apply this container's filters to the input image provided. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be applied. + */ + applyTo: function(options) { + options.passes += this.subFilters.length - 1; + this.subFilters.forEach(function(filter) { + filter.applyTo(options); + }); + }, - /** - * Enlarge space boxes and shift the others - */ - enlargeSpaces: function() { - var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; - for (var i = 0, len = this._textLines.length; i < len; i++) { - if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { - continue; - } - accumulatedSpace = 0; - line = this._textLines[i]; - currentLineWidth = this.getLineWidth(i); - if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { - numberOfSpaces = spaces.length; - diffSpace = (this.width - currentLineWidth) / numberOfSpaces; - for (var j = 0, jlen = line.length; j <= jlen; j++) { - charBound = this.__charBounds[i][j]; - if (this._reSpaceAndTab.test(line[j])) { - charBound.width += diffSpace; - charBound.kernedWidth += diffSpace; - charBound.left += accumulatedSpace; - accumulatedSpace += diffSpace; - } - else { - charBound.left += accumulatedSpace; - } - } - } - } - }, + /** + * Serialize this filter into JSON. + * + * @returns {Object} A JSON representation of this filter. + */ + toObject: function() { + return fabric.util.object.extend(this.callSuper('toObject'), { + subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), + }); + }, - /** - * Detect if the text line is ended with an hard break - * text and itext do not have wrapping, return false - * @return {Boolean} - */ - isEndOfWrapping: function(lineIndex) { - return lineIndex === this._textLines.length - 1; - }, + isNeutralState: function() { + return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); + } + }); - /** - * Detect if a line has a linebreak and so we need to account for it when moving - * and counting style. - * It return always for text and Itext. - * @return Number - */ - missingNewlineOffset: function() { - return 1; - }, + /** + * Deserialize a JSON definition of a ComposedFilter into a concrete instance. + */ + fabric.Image.filters.Composed.fromObject = function(object, callback) { + var filters = object.subFilters || [], + subFilters = filters.map(function(filter) { + return new fabric.Image.filters[filter.type](filter); + }), + instance = new fabric.Image.filters.Composed({ subFilters: subFilters }); + callback && callback(instance); + return instance; + }; +})(typeof exports !== 'undefined' ? exports : this); - /** - * Returns string representation of an instance - * @return {String} String representation of text object - */ - toString: function() { - return '#'; - }, - /** - * Return the dimension and the zoom level needed to create a cache canvas - * big enough to host the object to be cached. - * @private - * @param {Object} dim.x width of object to be cached - * @param {Object} dim.y height of object to be cached - * @return {Object}.width width of canvas - * @return {Object}.height height of canvas - * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache - * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache - */ - _getCacheCanvasDimensions: function() { - var dims = this.callSuper('_getCacheCanvasDimensions'); - var fontSize = this.fontSize; - dims.width += fontSize * dims.zoomX; - dims.height += fontSize * dims.zoomY; - return dims; - }, +(function(global) { - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - var path = this.path; - path && !path.isNotVisible() && path._render(ctx); - this._setTextStyles(ctx); - this._renderTextLinesBackground(ctx); - this._renderTextDecoration(ctx, 'underline'); - this._renderText(ctx); - this._renderTextDecoration(ctx, 'overline'); - this._renderTextDecoration(ctx, 'linethrough'); - }, + 'use strict'; - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderText: function(ctx) { - if (this.paintFirst === 'stroke') { - this._renderTextStroke(ctx); - this._renderTextFill(ctx); - } - else { - this._renderTextFill(ctx); - this._renderTextStroke(ctx); - } - }, + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * Set the font parameter of the context with the object properties or with charStyle - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Object} [charStyle] object with font style properties - * @param {String} [charStyle.fontFamily] Font Family - * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix ) - * @param {String} [charStyle.fontWeight] Font weight - * @param {String} [charStyle.fontStyle] Font style (italic|normal) - */ - _setTextStyles: function(ctx, charStyle, forMeasuring) { - ctx.textBaseline = 'alphabetical'; - if (this.path) { - switch (this.pathAlign) { - case 'center': - ctx.textBaseline = 'middle'; - break; - case 'ascender': - ctx.textBaseline = 'top'; - break; - case 'descender': - ctx.textBaseline = 'bottom'; - break; - } - } - ctx.font = this._getFontDeclaration(charStyle, forMeasuring); - }, + /** + * HueRotation filter class + * @class fabric.Image.filters.HueRotation + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.HueRotation#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.HueRotation({ + * rotation: -0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { - /** - * calculate and return the text Width measuring each line. - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @return {Number} Maximum width of fabric.Text object - */ - calcTextWidth: function() { - var maxWidth = this.getLineWidth(0); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'HueRotation', - for (var i = 1, len = this._textLines.length; i < len; i++) { - var currentLineWidth = this.getLineWidth(i); - if (currentLineWidth > maxWidth) { - maxWidth = currentLineWidth; - } - } - return maxWidth; - }, + /** + * HueRotation value, from -1 to 1. + * the unit is radians + * @param {Number} myParameter + * @default + */ + rotation: 0, - /** - * @private - * @param {String} method Method name ("fillText" or "strokeText") - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {String} line Text to render - * @param {Number} left Left position of text - * @param {Number} top Top position of text - * @param {Number} lineIndex Index of a line in a text - */ - _renderTextLine: function(method, ctx, line, left, top, lineIndex) { - this._renderChars(method, ctx, line, left, top, lineIndex); - }, + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'rotation', - /** - * Renders the text background for lines, taking care of style - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextLinesBackground: function(ctx) { - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { - return; - } - var heightOfLine, - lineLeftOffset, originalFill = ctx.fillStyle, - line, lastColor, - leftOffset = this._getLeftOffset(), - lineTopOffset = this._getTopOffset(), - boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, - drawStart; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { - lineTopOffset += heightOfLine; - continue; - } - line = this._textLines[i]; - lineLeftOffset = this._getLineLeftOffset(i); - boxWidth = 0; - boxStart = 0; - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - ctx.fillStyle = currentColor; - currentColor && ctx.fillRect( - -charBox.width / 2, - -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), - charBox.width, - heightOfLine / this.lineHeight - ); - ctx.restore(); - } - else if (currentColor !== lastColor) { - drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - ctx.fillStyle = lastColor; - lastColor && ctx.fillRect( - drawStart, - lineTopOffset, - boxWidth, - heightOfLine / this.lineHeight - ); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; - } - else { - boxWidth += charBox.kernedWidth; - } - } - if (currentColor && !path) { - drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - ctx.fillStyle = currentColor; - ctx.fillRect( - drawStart, - lineTopOffset, - boxWidth, - heightOfLine / this.lineHeight - ); - } - lineTopOffset += heightOfLine; - } - ctx.fillStyle = originalFill; - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, + calculateMatrix: function() { + var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), + aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; + this.matrix = [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ]; + this.matrix[0] = cos + OneMinusCos / 3; + this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[6] = cos + aThird * OneMinusCos; + this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[12] = cos + aThird * OneMinusCos; + }, + + /** + * HueRotation isNeutralState implementation + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * @param {Object} options + **/ + isNeutralState: function(options) { + this.calculateMatrix(); + return filters.BaseFilter.prototype.isNeutralState.call(this, options); + }, + + /** + * Apply this filter to the input image data provided. + * + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + this.calculateMatrix(); + filters.BaseFilter.prototype.applyTo.call(this, options); + }, - /** - * @private - * @param {Object} decl style declaration for cache - * @param {String} decl.fontFamily fontFamily - * @param {String} decl.fontStyle fontStyle - * @param {String} decl.fontWeight fontWeight - * @return {Object} reference to cache - */ - getFontCache: function(decl) { - var fontFamily = decl.fontFamily.toLowerCase(); - if (!fabric.charWidthsCache[fontFamily]) { - fabric.charWidthsCache[fontFamily] = { }; - } - var cache = fabric.charWidthsCache[fontFamily], - cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); - if (!cache[cacheProp]) { - cache[cacheProp] = { }; - } - return cache[cacheProp]; - }, + }); - /** - * measure and return the width of a single character. - * possibly overridden to accommodate different measure logic or - * to hook some external lib for character measurement - * @private - * @param {String} _char, char to be measured - * @param {Object} charStyle style of char to be measured - * @param {String} [previousChar] previous char - * @param {Object} [prevCharStyle] style of previous char - */ - _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { - // first i try to return from cache - var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), - previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, - stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, - fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; - - if (previousChar && fontCache[previousChar] !== undefined) { - previousWidth = fontCache[previousChar]; - } - if (fontCache[_char] !== undefined) { - kernedWidth = width = fontCache[_char]; - } - if (stylesAreEqual && fontCache[couple] !== undefined) { - coupleWidth = fontCache[couple]; - kernedWidth = coupleWidth - previousWidth; - } - if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { - var ctx = this.getMeasuringContext(); - // send a TRUE to specify measuring font size CACHE_FONT_SIZE - this._setTextStyles(ctx, charStyle, true); - } - if (width === undefined) { - kernedWidth = width = ctx.measureText(_char).width; - fontCache[_char] = width; - } - if (previousWidth === undefined && stylesAreEqual && previousChar) { - previousWidth = ctx.measureText(previousChar).width; - fontCache[previousChar] = previousWidth; - } - if (stylesAreEqual && coupleWidth === undefined) { - // we can measure the kerning couple and subtract the width of the previous character - coupleWidth = ctx.measureText(couple).width; - fontCache[couple] = coupleWidth; - kernedWidth = coupleWidth - previousWidth; - } - return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; - }, + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.HueRotation} Instance of fabric.Image.filters.HueRotation + */ + fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - /** - * Computes height of character at given position - * @param {Number} line the line index number - * @param {Number} _char the character index number - * @return {Number} fontSize of the character - */ - getHeightOfChar: function(line, _char) { - return this.getValueOfPropertyAt(line, _char, 'fontSize'); - }, +})(typeof exports !== 'undefined' ? exports : this); - /** - * measure a text line measuring all characters. - * @param {Number} lineIndex line number - * @return {Number} Line width - */ - measureLine: function(lineIndex) { - var lineInfo = this._measureLine(lineIndex); - if (this.charSpacing !== 0) { - lineInfo.width -= this._getWidthOfCharSpacing(); - } - if (lineInfo.width < 0) { - lineInfo.width = 0; - } - return lineInfo; - }, - /** - * measure every grapheme of a line, populating __charBounds - * @param {Number} lineIndex - * @return {Object} object.width total width of characters - * @return {Object} object.widthOfSpaces length of chars that match this._reSpacesAndTabs - */ - _measureLine: function(lineIndex) { - var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, - graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), - positionInPath = 0, startingPoint, totalPathLength, path = this.path, - reverse = this.pathSide === 'right'; - - this.__charBounds[lineIndex] = lineBounds; - for (i = 0; i < line.length; i++) { - grapheme = line[i]; - graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); - lineBounds[i] = graphemeInfo; - width += graphemeInfo.kernedWidth; - prevGrapheme = grapheme; - } - // this latest bound box represent the last character of the line - // to simplify cursor handling in interactive mode. - lineBounds[i] = { - left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, - width: 0, - kernedWidth: 0, - height: this.fontSize - }; - if (path) { - totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; - startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); - startingPoint.x += path.pathOffset.x; - startingPoint.y += path.pathOffset.y; - switch (this.textAlign) { - case 'left': - positionInPath = reverse ? (totalPathLength - width) : 0; - break; - case 'center': - positionInPath = (totalPathLength - width) / 2; - break; - case 'right': - positionInPath = reverse ? 0 : (totalPathLength - width); - break; - //todo - add support for justify - } - positionInPath += this.pathStartOffset * (reverse ? -1 : 1); - for (i = reverse ? line.length - 1 : 0; - reverse ? i >= 0 : i < line.length; - reverse ? i-- : i++) { - graphemeInfo = lineBounds[i]; - if (positionInPath > totalPathLength) { - positionInPath %= totalPathLength; - } - else if (positionInPath < 0) { - positionInPath += totalPathLength; - } - // it would probably much faster to send all the grapheme position for a line - // and calculate path position/angle at once. - this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); - positionInPath += graphemeInfo.kernedWidth; - } - } - return { width: width, numOfSpaces: numOfSpaces }; - }, +(function(global) { - /** - * Calculate the angle and the left,top position of the char that follow a path. - * It appends it to graphemeInfo to be reused later at rendering - * @private - * @param {Number} positionInPath to be measured - * @param {Object} graphemeInfo current grapheme box information - * @param {Object} startingPoint position of the point - */ - _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { - var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, - path = this.path; - - // we are at currentPositionOnPath. we want to know what point on the path is. - var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); - graphemeInfo.renderLeft = info.x - startingPoint.x; - graphemeInfo.renderTop = info.y - startingPoint.y; - graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); - }, + 'use strict'; - /** - * Measure and return the info of a single grapheme. - * needs the the info of previous graphemes already filled - * Override to customize measuring - * - * @typedef {object} GraphemeBBox - * @property {number} width - * @property {number} height - * @property {number} kernedWidth - * @property {number} left - * @property {number} deltaY - * - * @param {String} grapheme to be measured - * @param {Number} lineIndex index of the line where the char is - * @param {Number} charIndex position in the line - * @param {String} [prevGrapheme] character preceding the one to be measured - * @returns {GraphemeBBox} grapheme bbox - */ - _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { - var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), - prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, - info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), - kernedWidth = info.kernedWidth, - width = info.width, charSpacing; - - if (this.charSpacing !== 0) { - charSpacing = this._getWidthOfCharSpacing(); - width += charSpacing; - kernedWidth += charSpacing; - } - - var box = { - width: width, - left: 0, - height: style.fontSize, - kernedWidth: kernedWidth, - deltaY: style.deltaY, - }; - if (charIndex > 0 && !skipLeft) { - var previousBox = this.__charBounds[lineIndex][charIndex - 1]; - box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; - } - return box; - }, + var fabric = global.fabric || (global.fabric = { }), + clone = fabric.util.object.clone; - /** - * Calculate height of line at 'lineIndex' - * @param {Number} lineIndex index of line to calculate - * @return {Number} - */ - getHeightOfLine: function(lineIndex) { - if (this.__lineHeights[lineIndex]) { - return this.__lineHeights[lineIndex]; - } + if (fabric.Text) { + fabric.warn('fabric.Text is already defined'); + return; + } - var line = this._textLines[lineIndex], - // char 0 is measured before the line cycle because it nneds to char - // emptylines - maxHeight = this.getHeightOfChar(lineIndex, 0); - for (var i = 1, len = line.length; i < len; i++) { - maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); - } + var additionalProps = + ('fontFamily fontWeight fontSize text underline overline linethrough' + + ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + + ' direction path pathStartOffset pathSide pathAlign').split(' '); - return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; - }, + /** + * Text class + * @class fabric.Text + * @extends fabric.Object + * @return {fabric.Text} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} + * @see {@link fabric.Text#initialize} for constructor definition + */ + fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { - /** - * Calculate text box height - */ - calcTextHeight: function() { - var lineHeight, height = 0; - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineHeight = this.getHeightOfLine(i); - height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); - } - return height; - }, + /** + * Properties which when set cause object to change dimensions + * @type Array + * @private + */ + _dimensionAffectingProps: [ + 'fontSize', + 'fontWeight', + 'fontFamily', + 'fontStyle', + 'lineHeight', + 'text', + 'charSpacing', + 'textAlign', + 'styles', + 'path', + 'pathStartOffset', + 'pathSide', + 'pathAlign' + ], - /** - * @private - * @return {Number} Left offset - */ - _getLeftOffset: function() { - return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; - }, + /** + * @private + */ + _reNewline: /\r?\n/, - /** - * @private - * @return {Number} Top offset - */ - _getTopOffset: function() { - return -this.height / 2; - }, + /** + * Use this regular expression to filter for whitespaces that is not a new line. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reSpacesAndTabs: /[ \t\r]/g, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {String} method Method name ("fillText" or "strokeText") - */ - _renderTextCommon: function(ctx, method) { - ctx.save(); - var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); - for (var i = 0, len = this._textLines.length; i < len; i++) { - var heightOfLine = this.getHeightOfLine(i), - maxHeight = heightOfLine / this.lineHeight, - leftOffset = this._getLineLeftOffset(i); - this._renderTextLine( - method, - ctx, - this._textLines[i], - left + leftOffset, - top + lineHeights + maxHeight, - i - ); - lineHeights += heightOfLine; - } - ctx.restore(); - }, + /** + * Use this regular expression to filter for whitespace that is not a new line. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reSpaceAndTab: /[ \t\r]/, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextFill: function(ctx) { - if (!this.fill && !this.styleHas('fill')) { - return; + /** + * Use this regular expression to filter consecutive groups of non spaces. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reWords: /\S+/g, + + /** + * Type of an object + * @type String + * @default + */ + type: 'text', + + /** + * Font size (in pixels) + * @type Number + * @default + */ + fontSize: 40, + + /** + * Font weight (e.g. bold, normal, 400, 600, 800) + * @type {(Number|String)} + * @default + */ + fontWeight: 'normal', + + /** + * Font family + * @type String + * @default + */ + fontFamily: 'Times New Roman', + + /** + * Text decoration underline. + * @type Boolean + * @default + */ + underline: false, + + /** + * Text decoration overline. + * @type Boolean + * @default + */ + overline: false, + + /** + * Text decoration linethrough. + * @type Boolean + * @default + */ + linethrough: false, + + /** + * Text alignment. Possible values: "left", "center", "right", "justify", + * "justify-left", "justify-center" or "justify-right". + * @type String + * @default + */ + textAlign: 'left', + + /** + * Font style . Possible values: "", "normal", "italic" or "oblique". + * @type String + * @default + */ + fontStyle: 'normal', + + /** + * Line height + * @type Number + * @default + */ + lineHeight: 1.16, + + /** + * Superscript schema object (minimum overlap) + * @type {Object} + * @default + */ + superscript: { + size: 0.60, // fontSize factor + baseline: -0.35 // baseline-shift factor (upwards) + }, + + /** + * Subscript schema object (minimum overlap) + * @type {Object} + * @default + */ + subscript: { + size: 0.60, // fontSize factor + baseline: 0.11 // baseline-shift factor (downwards) + }, + + /** + * Background color of text lines + * @type String + * @default + */ + textBackgroundColor: '', + + /** + * List of properties to consider when checking if + * state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), + + /** + * List of properties to consider when checking if cache needs refresh + * @type Array + */ + cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), + + /** + * When defined, an object is rendered via stroke and this property specifies its color. + * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 + * @type String + * @default + */ + stroke: null, + + /** + * Shadow object representing shadow of this shape. + * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 + * @type fabric.Shadow + * @default + */ + shadow: null, + + /** + * fabric.Path that the text should follow. + * since 4.6.0 the path will be drawn automatically. + * if you want to make the path visible, give it a stroke and strokeWidth or fill value + * if you want it to be hidden, assign visible = false to the path. + * This feature is in BETA, and SVG import/export is not yet supported. + * @type fabric.Path + * @example + * var textPath = new fabric.Text('Text on a path', { + * top: 150, + * left: 150, + * textAlign: 'center', + * charSpacing: -50, + * path: new fabric.Path('M 0 0 C 50 -100 150 -100 200 0', { + * strokeWidth: 1, + * visible: false + * }), + * pathSide: 'left', + * pathStartOffset: 0 + * }); + * @default + */ + path: null, + + /** + * Offset amount for text path starting position + * Only used when text has a path + * @type Number + * @default + */ + pathStartOffset: 0, + + /** + * Which side of the path the text should be drawn on. + * Only used when text has a path + * @type {String} 'left|right' + * @default + */ + pathSide: 'left', + + /** + * How text is aligned to the path. This property determines + * the perpendicular position of each character relative to the path. + * (one of "baseline", "center", "ascender", "descender") + * This feature is in BETA, and its behavior may change + * @type String + * @default + */ + pathAlign: 'baseline', + + /** + * @private + */ + _fontSizeFraction: 0.222, + + /** + * @private + */ + offsets: { + underline: 0.10, + linethrough: -0.315, + overline: -0.88 + }, + + /** + * Text Line proportion to font Size (in pixels) + * @type Number + * @default + */ + _fontSizeMult: 1.13, + + /** + * additional space between characters + * expressed in thousands of em unit + * @type Number + * @default + */ + charSpacing: 0, + + /** + * Object containing character styles - top-level properties -> line numbers, + * 2nd-level properties - character numbers + * @type Object + * @default + */ + styles: null, + + /** + * Reference to a context to measure text char or couple of chars + * the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas + * once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every + * text object created. + * @type {CanvasRenderingContext2D} + * @default + */ + _measuringContext: null, + + /** + * Baseline shift, styles only, keep at 0 for the main text object + * @type {Number} + * @default + */ + deltaY: 0, + + /** + * WARNING: EXPERIMENTAL. NOT SUPPORTED YET + * determine the direction of the text. + * This has to be set manually together with textAlign and originX for proper + * experience. + * some interesting link for the future + * https://www.w3.org/International/questions/qa-bidi-unicode-controls + * @since 4.5.0 + * @type {String} 'ltr|rtl' + * @default + */ + direction: 'ltr', + + /** + * Array of properties that define a style unit (of 'styles'). + * @type {Array} + * @default + */ + _styleProperties: [ + 'stroke', + 'strokeWidth', + 'fill', + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'underline', + 'overline', + 'linethrough', + 'deltaY', + 'textBackgroundColor', + ], + + /** + * contains characters bounding boxes + */ + __charBounds: [], + + /** + * use this size when measuring text. To avoid IE11 rounding errors + * @type {Number} + * @default + * @readonly + * @private + */ + CACHE_FONT_SIZE: 400, + + /** + * contains the min text width to avoid getting 0 + * @type {Number} + * @default + */ + MIN_TEXT_WIDTH: 2, + + /** + * Constructor + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.Text} thisArg + */ + initialize: function(text, options) { + this.styles = options ? (options.styles || { }) : { }; + this.text = text; + this.__skipDimension = true; + this.callSuper('initialize', options); + if (this.path) { + this.setPathInfo(); + } + this.__skipDimension = false; + this.initDimensions(); + this.setCoords(); + this.setupState({ propertySet: '_dimensionAffectingProps' }); + }, + + /** + * If text has a path, it will add the extra information needed + * for path and text calculations + * @return {fabric.Text} thisArg + */ + setPathInfo: function() { + var path = this.path; + if (path) { + path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); + } + }, + + /** + * Return a context for measurement of text string. + * if created it gets stored for reuse + * this is for internal use, please do not use it + * @private + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.Text} thisArg + */ + getMeasuringContext: function() { + // if we did not return we have to measure something. + if (!fabric._measuringContext) { + fabric._measuringContext = this.canvas && this.canvas.contextCache || + fabric.util.createCanvasElement().getContext('2d'); + } + return fabric._measuringContext; + }, + + /** + * @private + * Divides text into lines of text and lines of graphemes. + */ + _splitText: function() { + var newLines = this._splitTextIntoLines(this.text); + this.textLines = newLines.lines; + this._textLines = newLines.graphemeLines; + this._unwrappedTextLines = newLines._unwrappedLines; + this._text = newLines.graphemeText; + return newLines; + }, + + /** + * Initialize or update text dimensions. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + */ + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this._splitText(); + this._clearCache(); + if (this.path) { + this.width = this.path.width; + this.height = this.path.height; + } + else { + this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; + this.height = this.calcTextHeight(); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, + + /** + * Enlarge space boxes and shift the others + */ + enlargeSpaces: function() { + var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { + continue; + } + accumulatedSpace = 0; + line = this._textLines[i]; + currentLineWidth = this.getLineWidth(i); + if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { + numberOfSpaces = spaces.length; + diffSpace = (this.width - currentLineWidth) / numberOfSpaces; + for (var j = 0, jlen = line.length; j <= jlen; j++) { + charBound = this.__charBounds[i][j]; + if (this._reSpaceAndTab.test(line[j])) { + charBound.width += diffSpace; + charBound.kernedWidth += diffSpace; + charBound.left += accumulatedSpace; + accumulatedSpace += diffSpace; + } + else { + charBound.left += accumulatedSpace; + } + } } + } + }, - this._renderTextCommon(ctx, 'fillText'); - }, + /** + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @return {Boolean} + */ + isEndOfWrapping: function(lineIndex) { + return lineIndex === this._textLines.length - 1; + }, - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextStroke: function(ctx) { - if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { - return; + /** + * Detect if a line has a linebreak and so we need to account for it when moving + * and counting style. + * It return always for text and Itext. + * @return Number + */ + missingNewlineOffset: function() { + return 1; + }, + + /** + * Returns string representation of an instance + * @return {String} String representation of text object + */ + toString: function() { + return '#'; + }, + + /** + * Return the dimension and the zoom level needed to create a cache canvas + * big enough to host the object to be cached. + * @private + * @param {Object} dim.x width of object to be cached + * @param {Object} dim.y height of object to be cached + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _getCacheCanvasDimensions: function() { + var dims = this.callSuper('_getCacheCanvasDimensions'); + var fontSize = this.fontSize; + dims.width += fontSize * dims.zoomX; + dims.height += fontSize * dims.zoomY; + return dims; + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + var path = this.path; + path && !path.isNotVisible() && path._render(ctx); + this._setTextStyles(ctx); + this._renderTextLinesBackground(ctx); + this._renderTextDecoration(ctx, 'underline'); + this._renderText(ctx); + this._renderTextDecoration(ctx, 'overline'); + this._renderTextDecoration(ctx, 'linethrough'); + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderText: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderTextStroke(ctx); + this._renderTextFill(ctx); + } + else { + this._renderTextFill(ctx); + this._renderTextStroke(ctx); + } + }, + + /** + * Set the font parameter of the context with the object properties or with charStyle + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [charStyle] object with font style properties + * @param {String} [charStyle.fontFamily] Font Family + * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix ) + * @param {String} [charStyle.fontWeight] Font weight + * @param {String} [charStyle.fontStyle] Font style (italic|normal) + */ + _setTextStyles: function(ctx, charStyle, forMeasuring) { + ctx.textBaseline = 'alphabetical'; + if (this.path) { + switch (this.pathAlign) { + case 'center': + ctx.textBaseline = 'middle'; + break; + case 'ascender': + ctx.textBaseline = 'top'; + break; + case 'descender': + ctx.textBaseline = 'bottom'; + break; } + } + ctx.font = this._getFontDeclaration(charStyle, forMeasuring); + }, + + /** + * calculate and return the text Width measuring each line. + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @return {Number} Maximum width of fabric.Text object + */ + calcTextWidth: function() { + var maxWidth = this.getLineWidth(0); - if (this.shadow && !this.shadow.affectStroke) { - this._removeShadow(ctx); + for (var i = 1, len = this._textLines.length; i < len; i++) { + var currentLineWidth = this.getLineWidth(i); + if (currentLineWidth > maxWidth) { + maxWidth = currentLineWidth; } + } + return maxWidth; + }, - ctx.save(); - this._setLineDash(ctx, this.strokeDashArray); - ctx.beginPath(); - this._renderTextCommon(ctx, 'strokeText'); - ctx.closePath(); - ctx.restore(); - }, + /** + * @private + * @param {String} method Method name ("fillText" or "strokeText") + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {String} line Text to render + * @param {Number} left Left position of text + * @param {Number} top Top position of text + * @param {Number} lineIndex Index of a line in a text + */ + _renderTextLine: function(method, ctx, line, left, top, lineIndex) { + this._renderChars(method, ctx, line, left, top, lineIndex); + }, - /** - * @private - * @param {String} method fillText or strokeText. - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Array} line Content of the line, splitted in an array by grapheme - * @param {Number} left - * @param {Number} top - * @param {Number} lineIndex - */ - _renderChars: function(method, ctx, line, left, top, lineIndex) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, - boxWidth = 0, - timeToRender, - path = this.path, - shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, - isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, - // this was changed in the PR #7674 - // currentDirection = ctx.canvas.getAttribute('dir'); - drawingLeft, currentDirection = ctx.direction; - ctx.save(); - if (currentDirection !== this.direction) { - ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); - ctx.direction = isLtr ? 'ltr' : 'rtl'; - ctx.textAlign = isLtr ? 'left' : 'right'; - } - top -= lineHeight * this._fontSizeFraction / this.lineHeight; - if (shortCut) { - // render all the line in one pass without checking - // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); - this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); - ctx.restore(); - return; + /** + * Renders the text background for lines, taking care of style + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextLinesBackground: function(ctx) { + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { + return; + } + var heightOfLine, + lineLeftOffset, originalFill = ctx.fillStyle, + line, lastColor, + leftOffset = this._getLeftOffset(), + lineTopOffset = this._getTopOffset(), + boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, + drawStart; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { + lineTopOffset += heightOfLine; + continue; } - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing || path; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - left += sign * (charBox.kernedWidth - charBox.width); - boxWidth += charBox.width; - } - else { - boxWidth += charBox.kernedWidth; + line = this._textLines[i]; + lineLeftOffset = this._getLineLeftOffset(i); + boxWidth = 0; + boxStart = 0; + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillStyle = currentColor; + currentColor && ctx.fillRect( + -charBox.width / 2, + -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), + charBox.width, + heightOfLine / this.lineHeight + ); + ctx.restore(); } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; + else if (currentColor !== lastColor) { + drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; } + ctx.fillStyle = lastColor; + lastColor && ctx.fillRect( + drawStart, + lineTopOffset, + boxWidth, + heightOfLine / this.lineHeight + ); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChanged(actualStyle, nextStyle); + else { + boxWidth += charBox.kernedWidth; } - if (timeToRender) { - if (path) { - ctx.save(); - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); - ctx.restore(); - } - else { - drawingLeft = left; - this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); - } - charsToRender = ''; - actualStyle = nextStyle; - left += sign * boxWidth; - boxWidth = 0; + } + if (currentColor && !path) { + drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; } + ctx.fillStyle = currentColor; + ctx.fillRect( + drawStart, + lineTopOffset, + boxWidth, + heightOfLine / this.lineHeight + ); } - ctx.restore(); - }, + lineTopOffset += heightOfLine; + } + ctx.fillStyle = originalFill; + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** - * This function try to patch the missing gradientTransform on canvas gradients. - * transforming a context to transform the gradient, is going to transform the stroke too. - * we want to transform the gradient but not the stroke operation, so we create - * a transformed gradient on a pattern and then we use the pattern instead of the gradient. - * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size - * is limited. - * @private - * @param {fabric.Gradient} filler a fabric gradient instance - * @return {CanvasPattern} a pattern to use as fill/stroke style - */ - _applyPatternGradientTransformText: function(filler) { - var pCanvas = fabric.util.createCanvasElement(), pCtx, - // TODO: verify compatibility with strokeUniform - width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; - pCanvas.width = width; - pCanvas.height = height; - pCtx = pCanvas.getContext('2d'); - pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); - pCtx.lineTo(0, height); pCtx.closePath(); - pCtx.translate(width / 2, height / 2); - pCtx.fillStyle = filler.toLive(pCtx); - this._applyPatternGradientTransform(pCtx, filler); - pCtx.fill(); - return pCtx.createPattern(pCanvas, 'no-repeat'); - }, + /** + * @private + * @param {Object} decl style declaration for cache + * @param {String} decl.fontFamily fontFamily + * @param {String} decl.fontStyle fontStyle + * @param {String} decl.fontWeight fontWeight + * @return {Object} reference to cache + */ + getFontCache: function(decl) { + var fontFamily = decl.fontFamily.toLowerCase(); + if (!fabric.charWidthsCache[fontFamily]) { + fabric.charWidthsCache[fontFamily] = { }; + } + var cache = fabric.charWidthsCache[fontFamily], + cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); + if (!cache[cacheProp]) { + cache[cacheProp] = { }; + } + return cache[cacheProp]; + }, - handleFiller: function(ctx, property, filler) { - var offsetX, offsetY; - if (filler.toLive) { - if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { - // need to transform gradient in a pattern. - // this is a slow process. If you are hitting this codepath, and the object - // is not using caching, you should consider switching it on. - // we need a canvas as big as the current object caching canvas. - offsetX = -this.width / 2; - offsetY = -this.height / 2; - ctx.translate(offsetX, offsetY); - ctx[property] = this._applyPatternGradientTransformText(filler); - return { offsetX: offsetX, offsetY: offsetY }; + /** + * measure and return the width of a single character. + * possibly overridden to accommodate different measure logic or + * to hook some external lib for character measurement + * @private + * @param {String} _char, char to be measured + * @param {Object} charStyle style of char to be measured + * @param {String} [previousChar] previous char + * @param {Object} [prevCharStyle] style of previous char + */ + _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { + // first i try to return from cache + var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), + previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, + stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, + fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; + + if (previousChar && fontCache[previousChar] !== undefined) { + previousWidth = fontCache[previousChar]; + } + if (fontCache[_char] !== undefined) { + kernedWidth = width = fontCache[_char]; + } + if (stylesAreEqual && fontCache[couple] !== undefined) { + coupleWidth = fontCache[couple]; + kernedWidth = coupleWidth - previousWidth; + } + if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { + var ctx = this.getMeasuringContext(); + // send a TRUE to specify measuring font size CACHE_FONT_SIZE + this._setTextStyles(ctx, charStyle, true); + } + if (width === undefined) { + kernedWidth = width = ctx.measureText(_char).width; + fontCache[_char] = width; + } + if (previousWidth === undefined && stylesAreEqual && previousChar) { + previousWidth = ctx.measureText(previousChar).width; + fontCache[previousChar] = previousWidth; + } + if (stylesAreEqual && coupleWidth === undefined) { + // we can measure the kerning couple and subtract the width of the previous character + coupleWidth = ctx.measureText(couple).width; + fontCache[couple] = coupleWidth; + kernedWidth = coupleWidth - previousWidth; + } + return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; + }, + + /** + * Computes height of character at given position + * @param {Number} line the line index number + * @param {Number} _char the character index number + * @return {Number} fontSize of the character + */ + getHeightOfChar: function(line, _char) { + return this.getValueOfPropertyAt(line, _char, 'fontSize'); + }, + + /** + * measure a text line measuring all characters. + * @param {Number} lineIndex line number + * @return {Number} Line width + */ + measureLine: function(lineIndex) { + var lineInfo = this._measureLine(lineIndex); + if (this.charSpacing !== 0) { + lineInfo.width -= this._getWidthOfCharSpacing(); + } + if (lineInfo.width < 0) { + lineInfo.width = 0; + } + return lineInfo; + }, + + /** + * measure every grapheme of a line, populating __charBounds + * @param {Number} lineIndex + * @return {Object} object.width total width of characters + * @return {Object} object.widthOfSpaces length of chars that match this._reSpacesAndTabs + */ + _measureLine: function(lineIndex) { + var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, + graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), + positionInPath = 0, startingPoint, totalPathLength, path = this.path, + reverse = this.pathSide === 'right'; + + this.__charBounds[lineIndex] = lineBounds; + for (i = 0; i < line.length; i++) { + grapheme = line[i]; + graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); + lineBounds[i] = graphemeInfo; + width += graphemeInfo.kernedWidth; + prevGrapheme = grapheme; + } + // this latest bound box represent the last character of the line + // to simplify cursor handling in interactive mode. + lineBounds[i] = { + left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, + width: 0, + kernedWidth: 0, + height: this.fontSize + }; + if (path) { + totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; + startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); + startingPoint.x += path.pathOffset.x; + startingPoint.y += path.pathOffset.y; + switch (this.textAlign) { + case 'left': + positionInPath = reverse ? (totalPathLength - width) : 0; + break; + case 'center': + positionInPath = (totalPathLength - width) / 2; + break; + case 'right': + positionInPath = reverse ? 0 : (totalPathLength - width); + break; + //todo - add support for justify + } + positionInPath += this.pathStartOffset * (reverse ? -1 : 1); + for (i = reverse ? line.length - 1 : 0; + reverse ? i >= 0 : i < line.length; + reverse ? i-- : i++) { + graphemeInfo = lineBounds[i]; + if (positionInPath > totalPathLength) { + positionInPath %= totalPathLength; } - else { - // is a simple gradient or pattern - ctx[property] = filler.toLive(ctx, this); - return this._applyPatternGradientTransform(ctx, filler); + else if (positionInPath < 0) { + positionInPath += totalPathLength; } + // it would probably much faster to send all the grapheme position for a line + // and calculate path position/angle at once. + this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); + positionInPath += graphemeInfo.kernedWidth; } - else { - // is a color - ctx[property] = filler; - } - return { offsetX: 0, offsetY: 0 }; - }, + } + return { width: width, numOfSpaces: numOfSpaces }; + }, - _setStrokeStyles: function(ctx, decl) { - ctx.lineWidth = decl.strokeWidth; - ctx.lineCap = this.strokeLineCap; - ctx.lineDashOffset = this.strokeDashOffset; - ctx.lineJoin = this.strokeLineJoin; - ctx.miterLimit = this.strokeMiterLimit; - return this.handleFiller(ctx, 'strokeStyle', decl.stroke); - }, + /** + * Calculate the angle and the left,top position of the char that follow a path. + * It appends it to graphemeInfo to be reused later at rendering + * @private + * @param {Number} positionInPath to be measured + * @param {Object} graphemeInfo current grapheme box information + * @param {Object} startingPoint position of the point + */ + _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { + var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, + path = this.path; - _setFillStyles: function(ctx, decl) { - return this.handleFiller(ctx, 'fillStyle', decl.fill); - }, + // we are at currentPositionOnPath. we want to know what point on the path is. + var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); + graphemeInfo.renderLeft = info.x - startingPoint.x; + graphemeInfo.renderTop = info.y - startingPoint.y; + graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); + }, - /** - * @private - * @param {String} method - * @param {CanvasRenderingContext2D} ctx Context to render on - * @param {Number} lineIndex - * @param {Number} charIndex - * @param {String} _char - * @param {Number} left Left coordinate - * @param {Number} top Top coordinate - * @param {Number} lineHeight Height of the line - */ - _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { - var decl = this._getStyleDeclaration(lineIndex, charIndex), - fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), - shouldFill = method === 'fillText' && fullDecl.fill, - shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, - fillOffsets, strokeOffsets; - - if (!shouldStroke && !shouldFill) { - return; - } - ctx.save(); + /** + * Measure and return the info of a single grapheme. + * needs the the info of previous graphemes already filled + * @private + * @param {String} grapheme to be measured + * @param {Number} lineIndex index of the line where the char is + * @param {Number} charIndex position in the line + * @param {String} [prevGrapheme] character preceding the one to be measured + */ + _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { + var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), + prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, + info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), + kernedWidth = info.kernedWidth, + width = info.width, charSpacing; + + if (this.charSpacing !== 0) { + charSpacing = this._getWidthOfCharSpacing(); + width += charSpacing; + kernedWidth += charSpacing; + } + + var box = { + width: width, + left: 0, + height: style.fontSize, + kernedWidth: kernedWidth, + deltaY: style.deltaY, + }; + if (charIndex > 0 && !skipLeft) { + var previousBox = this.__charBounds[lineIndex][charIndex - 1]; + box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; + } + return box; + }, - shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); - shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); + /** + * Calculate height of line at 'lineIndex' + * @param {Number} lineIndex index of line to calculate + * @return {Number} + */ + getHeightOfLine: function(lineIndex) { + if (this.__lineHeights[lineIndex]) { + return this.__lineHeights[lineIndex]; + } - ctx.font = this._getFontDeclaration(fullDecl); + var line = this._textLines[lineIndex], + // char 0 is measured before the line cycle because it nneds to char + // emptylines + maxHeight = this.getHeightOfChar(lineIndex, 0); + for (var i = 1, len = line.length; i < len; i++) { + maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); + } + return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; + }, - if (decl && decl.textBackgroundColor) { - this._removeShadow(ctx); - } - if (decl && decl.deltaY) { - top += decl.deltaY; - } - shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); - shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); - ctx.restore(); - }, + /** + * Calculate text box height + */ + calcTextHeight: function() { + var lineHeight, height = 0; + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineHeight = this.getHeightOfLine(i); + height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); + } + return height; + }, - /** - * Turns the character into a 'superior figure' (i.e. 'superscript') - * @param {Number} start selection start - * @param {Number} end selection end - * @returns {fabric.Text} thisArg - * @chainable - */ - setSuperscript: function(start, end) { - return this._setScript(start, end, this.superscript); - }, + /** + * @private + * @return {Number} Left offset + */ + _getLeftOffset: function() { + return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; + }, - /** - * Turns the character into an 'inferior figure' (i.e. 'subscript') - * @param {Number} start selection start - * @param {Number} end selection end - * @returns {fabric.Text} thisArg - * @chainable - */ - setSubscript: function(start, end) { - return this._setScript(start, end, this.subscript); - }, + /** + * @private + * @return {Number} Top offset + */ + _getTopOffset: function() { + return -this.height / 2; + }, - /** - * Applies 'schema' at given position - * @private - * @param {Number} start selection start - * @param {Number} end selection end - * @param {Number} schema - * @returns {fabric.Text} thisArg - * @chainable - */ - _setScript: function(start, end, schema) { - var loc = this.get2DCursorLocation(start, true), - fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), - dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), - style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; - this.setSelectionStyles(style, start, end); - return this; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {String} method Method name ("fillText" or "strokeText") + */ + _renderTextCommon: function(ctx, method) { + ctx.save(); + var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); + for (var i = 0, len = this._textLines.length; i < len; i++) { + var heightOfLine = this.getHeightOfLine(i), + maxHeight = heightOfLine / this.lineHeight, + leftOffset = this._getLineLeftOffset(i); + this._renderTextLine( + method, + ctx, + this._textLines[i], + left + leftOffset, + top + lineHeights + maxHeight, + i + ); + lineHeights += heightOfLine; + } + ctx.restore(); + }, - /** - * @private - * @param {Object} prevStyle - * @param {Object} thisStyle - */ - _hasStyleChanged: function(prevStyle, thisStyle) { - return prevStyle.fill !== thisStyle.fill || - prevStyle.stroke !== thisStyle.stroke || - prevStyle.strokeWidth !== thisStyle.strokeWidth || - prevStyle.fontSize !== thisStyle.fontSize || - prevStyle.fontFamily !== thisStyle.fontFamily || - prevStyle.fontWeight !== thisStyle.fontWeight || - prevStyle.fontStyle !== thisStyle.fontStyle || - prevStyle.deltaY !== thisStyle.deltaY; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextFill: function(ctx) { + if (!this.fill && !this.styleHas('fill')) { + return; + } - /** - * @private - * @param {Object} prevStyle - * @param {Object} thisStyle - */ - _hasStyleChangedForSvg: function(prevStyle, thisStyle) { - return this._hasStyleChanged(prevStyle, thisStyle) || - prevStyle.overline !== thisStyle.overline || - prevStyle.underline !== thisStyle.underline || - prevStyle.linethrough !== thisStyle.linethrough; - }, + this._renderTextCommon(ctx, 'fillText'); + }, - /** - * @private - * @param {Number} lineIndex index text line - * @return {Number} Line left offset - */ - _getLineLeftOffset: function(lineIndex) { - var lineWidth = this.getLineWidth(lineIndex), - lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, - isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); - if (textAlign === 'justify' - || (textAlign === 'justify-center' && !isEndOfWrapping) - || (textAlign === 'justify-right' && !isEndOfWrapping) - || (textAlign === 'justify-left' && !isEndOfWrapping) - ) { - return 0; - } - if (textAlign === 'center') { - leftOffset = lineDiff / 2; + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextStroke: function(ctx) { + if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { + return; + } + + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } + + ctx.save(); + this._setLineDash(ctx, this.strokeDashArray); + ctx.beginPath(); + this._renderTextCommon(ctx, 'strokeText'); + ctx.closePath(); + ctx.restore(); + }, + + /** + * @private + * @param {String} method fillText or strokeText. + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Array} line Content of the line, splitted in an array by grapheme + * @param {Number} left + * @param {Number} top + * @param {Number} lineIndex + */ + _renderChars: function(method, ctx, line, left, top, lineIndex) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, + boxWidth = 0, + timeToRender, + path = this.path, + shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, + isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, + drawingLeft, currentDirection = ctx.canvas.getAttribute('dir'); + ctx.save(); + if (currentDirection !== this.direction) { + ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); + ctx.direction = isLtr ? 'ltr' : 'rtl'; + ctx.textAlign = isLtr ? 'left' : 'right'; + } + top -= lineHeight * this._fontSizeFraction / this.lineHeight; + if (shortCut) { + // render all the line in one pass without checking + // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); + this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); + ctx.restore(); + return; + } + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing || path; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + left += sign * (charBox.kernedWidth - charBox.width); + boxWidth += charBox.width; } - if (textAlign === 'right') { - leftOffset = lineDiff; + else { + boxWidth += charBox.kernedWidth; } - if (textAlign === 'justify-center') { - leftOffset = lineDiff / 2; + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; + } } - if (textAlign === 'justify-right') { - leftOffset = lineDiff; + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChanged(actualStyle, nextStyle); } - if (direction === 'rtl') { - if (textAlign === 'right' || textAlign === 'justify' || textAlign === 'justify-right') { - leftOffset = 0; - } - else if (textAlign === 'left' || textAlign === 'justify-left') { - leftOffset = -lineDiff; + if (timeToRender) { + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); + ctx.restore(); } - else if (textAlign === 'center' || textAlign === 'justify-center') { - leftOffset = -lineDiff / 2; + else { + drawingLeft = left; + this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); } + charsToRender = ''; + actualStyle = nextStyle; + left += sign * boxWidth; + boxWidth = 0; } - return leftOffset; - }, - - /** - * @private - */ - _clearCache: function() { - this.__lineWidths = []; - this.__lineHeights = []; - this.__charBounds = []; - }, + } + ctx.restore(); + }, - /** - * @private - */ - _shouldClearDimensionCache: function() { - var shouldClear = this._forceClearCache; - shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); - if (shouldClear) { - this.dirty = true; - this._forceClearCache = false; + /** + * This function try to patch the missing gradientTransform on canvas gradients. + * transforming a context to transform the gradient, is going to transform the stroke too. + * we want to transform the gradient but not the stroke operation, so we create + * a transformed gradient on a pattern and then we use the pattern instead of the gradient. + * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size + * is limited. + * @private + * @param {fabric.Gradient} filler a fabric gradient instance + * @return {CanvasPattern} a pattern to use as fill/stroke style + */ + _applyPatternGradientTransformText: function(filler) { + var pCanvas = fabric.util.createCanvasElement(), pCtx, + // TODO: verify compatibility with strokeUniform + width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.fillStyle = filler.toLive(pCtx); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fill(); + return pCtx.createPattern(pCanvas, 'no-repeat'); + }, + + handleFiller: function(ctx, property, filler) { + var offsetX, offsetY; + if (filler.toLive) { + if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + offsetX = -this.width / 2; + offsetY = -this.height / 2; + ctx.translate(offsetX, offsetY); + ctx[property] = this._applyPatternGradientTransformText(filler); + return { offsetX: offsetX, offsetY: offsetY }; } - return shouldClear; - }, - - /** - * Measure a single line given its index. Used to calculate the initial - * text bounding box. The values are calculated and stored in __lineWidths cache. - * @private - * @param {Number} lineIndex line number - * @return {Number} Line width - */ - getLineWidth: function(lineIndex) { - if (this.__lineWidths[lineIndex] !== undefined) { - return this.__lineWidths[lineIndex]; + else { + // is a simple gradient or pattern + ctx[property] = filler.toLive(ctx, this); + return this._applyPatternGradientTransform(ctx, filler); } + } + else { + // is a color + ctx[property] = filler; + } + return { offsetX: 0, offsetY: 0 }; + }, - var lineInfo = this.measureLine(lineIndex); - var width = lineInfo.width; - this.__lineWidths[lineIndex] = width; - return width; - }, + _setStrokeStyles: function(ctx, decl) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = this.strokeLineCap; + ctx.lineDashOffset = this.strokeDashOffset; + ctx.lineJoin = this.strokeLineJoin; + ctx.miterLimit = this.strokeMiterLimit; + return this.handleFiller(ctx, 'strokeStyle', decl.stroke); + }, - _getWidthOfCharSpacing: function() { - if (this.charSpacing !== 0) { - return this.fontSize * this.charSpacing / 1000; - } - return 0; - }, + _setFillStyles: function(ctx, decl) { + return this.handleFiller(ctx, 'fillStyle', decl.fill); + }, - /** - * Retrieves the value of property at given character position - * @param {Number} lineIndex the line number - * @param {Number} charIndex the character number - * @param {String} property the property name - * @returns the value of 'property' - */ - getValueOfPropertyAt: function(lineIndex, charIndex, property) { - var charStyle = this._getStyleDeclaration(lineIndex, charIndex); - if (charStyle && typeof charStyle[property] !== 'undefined') { - return charStyle[property]; - } - return this[property]; - }, + /** + * @private + * @param {String} method + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {String} _char + * @param {Number} left Left coordinate + * @param {Number} top Top coordinate + * @param {Number} lineHeight Height of the line + */ + _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { + var decl = this._getStyleDeclaration(lineIndex, charIndex), + fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), + shouldFill = method === 'fillText' && fullDecl.fill, + shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, + fillOffsets, strokeOffsets; + + if (!shouldStroke && !shouldFill) { + return; + } + ctx.save(); - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _renderTextDecoration: function(ctx, type) { - if (!this[type] && !this.styleHas(type)) { - return; - } - var heightOfLine, size, _size, - lineLeftOffset, dy, _dy, - line, lastDecoration, - leftOffset = this._getLeftOffset(), - topOffset = this._getTopOffset(), top, - boxStart, boxWidth, charBox, currentDecoration, - maxHeight, currentFill, lastFill, path = this.path, - charSpacing = this._getWidthOfCharSpacing(), - offsetY = this.offsets[type]; - - for (var i = 0, len = this._textLines.length; i < len; i++) { - heightOfLine = this.getHeightOfLine(i); - if (!this[type] && !this.styleHas(type, i)) { - topOffset += heightOfLine; - continue; - } - line = this._textLines[i]; - maxHeight = heightOfLine / this.lineHeight; - lineLeftOffset = this._getLineLeftOffset(i); - boxStart = 0; - boxWidth = 0; - lastDecoration = this.getValueOfPropertyAt(i, 0, type); - lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); - top = topOffset + maxHeight * (1 - this._fontSizeFraction); - size = this.getHeightOfChar(i, 0); - dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentDecoration = this.getValueOfPropertyAt(i, j, type); - currentFill = this.getValueOfPropertyAt(i, j, 'fill'); - _size = this.getHeightOfChar(i, j); - _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); - if (path && currentDecoration && currentFill) { - ctx.save(); - ctx.fillStyle = lastFill; - ctx.translate(charBox.renderLeft, charBox.renderTop); - ctx.rotate(charBox.angle); - ctx.fillRect( - -charBox.kernedWidth / 2, - offsetY * _size + _dy, - charBox.kernedWidth, - this.fontSize / 15 - ); - ctx.restore(); - } - else if ( - (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) - && boxWidth > 0 - ) { - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - if (lastDecoration && lastFill) { - ctx.fillStyle = lastFill; - ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth, - this.fontSize / 15 - ); - } - boxStart = charBox.left; - boxWidth = charBox.width; - lastDecoration = currentDecoration; - lastFill = currentFill; - size = _size; - dy = _dy; - } - else { - boxWidth += charBox.kernedWidth; - } - } - var drawStart = leftOffset + lineLeftOffset + boxStart; - if (this.direction === 'rtl') { - drawStart = this.width - drawStart - boxWidth; - } - ctx.fillStyle = currentFill; - currentDecoration && currentFill && ctx.fillRect( - drawStart, - top + offsetY * size + dy, - boxWidth - charSpacing, - this.fontSize / 15 - ); - topOffset += heightOfLine; - } - // if there is text background color no - // other shadows should be casted - this._removeShadow(ctx); - }, + shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); + shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); - /** - * return font declaration string for canvas context - * @param {Object} [styleObject] object - * @returns {String} font declaration formatted for canvas context. - */ - _getFontDeclaration: function(styleObject, forMeasuring) { - var style = styleObject || this, family = this.fontFamily, - fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; - var fontFamily = family === undefined || - family.indexOf('\'') > -1 || family.indexOf(',') > -1 || - family.indexOf('"') > -1 || fontIsGeneric - ? style.fontFamily : '"' + style.fontFamily + '"'; - return [ - // node-canvas needs "weight style", while browsers need "style weight" - // verify if this can be fixed in JSDOM - (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), - (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), - forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', - fontFamily - ].join(' '); - }, + ctx.font = this._getFontDeclaration(fullDecl); - /** - * Renders text instance on a specified context - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - render: function(ctx) { - // do not render if object is not visible - if (!this.visible) { - return; - } - if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { - return; - } - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - } - this.callSuper('render', ctx); - }, - /** - * Override this method to customize grapheme splitting - * @param {string} value - * @returns {string[]} array of graphemes - */ - graphemeSplit: function (value) { - return fabric.util.string.graphemeSplit(value); - }, + if (decl && decl.textBackgroundColor) { + this._removeShadow(ctx); + } + if (decl && decl.deltaY) { + top += decl.deltaY; + } + shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); + shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); + ctx.restore(); + }, + + /** + * Turns the character into a 'superior figure' (i.e. 'superscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSuperscript: function(start, end) { + return this._setScript(start, end, this.superscript); + }, - /** - * Returns the text as an array of lines. - * @param {String} text text to split - * @returns {Array} Lines in the text - */ - _splitTextIntoLines: function(text) { - var lines = text.split(this._reNewline), - newLines = new Array(lines.length), - newLine = ['\n'], - newText = []; - for (var i = 0; i < lines.length; i++) { - newLines[i] = this.graphemeSplit(lines[i]); - newText = newText.concat(newLines[i], newLine); - } - newText.pop(); - return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; - }, + /** + * Turns the character into an 'inferior figure' (i.e. 'subscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSubscript: function(start, end) { + return this._setScript(start, end, this.subscript); + }, - /** - * Returns object representation of an instance - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} Object representation of an instance - */ - toObject: function(propertiesToInclude) { - var allProperties = additionalProps.concat(propertiesToInclude); - var obj = this.callSuper('toObject', allProperties); - // styles will be overridden with a properly cloned structure - obj.styles = clone(this.styles, true); - if (obj.path) { - obj.path = this.path.toObject(); - } - return obj; - }, + /** + * Applies 'schema' at given position + * @private + * @param {Number} start selection start + * @param {Number} end selection end + * @param {Number} schema + * @returns {fabric.Text} thisArg + * @chainable + */ + _setScript: function(start, end, schema) { + var loc = this.get2DCursorLocation(start, true), + fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), + dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), + style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; + this.setSelectionStyles(style, start, end); + return this; + }, - /** - * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. - * @param {String|Object} key Property name or object (if object, iterate over the object properties) - * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) - * @return {fabric.Object} thisArg - * @chainable - */ - set: function(key, value) { - this.callSuper('set', key, value); - var needsDims = false; - var isAddingPath = false; - if (typeof key === 'object') { - for (var _key in key) { - if (_key === 'path') { - this.setPathInfo(); - } - needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; - isAddingPath = isAddingPath || _key === 'path'; - } - } - else { - needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; - isAddingPath = key === 'path'; - } - if (isAddingPath) { - this.setPathInfo(); - } - if (needsDims) { - this.initDimensions(); - this.setCoords(); - } - return this; - }, + /** + * @private + * @param {Object} prevStyle + * @param {Object} thisStyle + */ + _hasStyleChanged: function(prevStyle, thisStyle) { + return prevStyle.fill !== thisStyle.fill || + prevStyle.stroke !== thisStyle.stroke || + prevStyle.strokeWidth !== thisStyle.strokeWidth || + prevStyle.fontSize !== thisStyle.fontSize || + prevStyle.fontFamily !== thisStyle.fontFamily || + prevStyle.fontWeight !== thisStyle.fontWeight || + prevStyle.fontStyle !== thisStyle.fontStyle || + prevStyle.deltaY !== thisStyle.deltaY; + }, - /** - * Returns complexity of an instance - * @return {Number} complexity - */ - complexity: function() { - return 1; + /** + * @private + * @param {Object} prevStyle + * @param {Object} thisStyle + */ + _hasStyleChangedForSvg: function(prevStyle, thisStyle) { + return this._hasStyleChanged(prevStyle, thisStyle) || + prevStyle.overline !== thisStyle.overline || + prevStyle.underline !== thisStyle.underline || + prevStyle.linethrough !== thisStyle.linethrough; + }, + + /** + * @private + * @param {Number} lineIndex index text line + * @return {Number} Line left offset + */ + _getLineLeftOffset: function(lineIndex) { + var lineWidth = this.getLineWidth(lineIndex), + lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, + isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); + if (textAlign === 'justify' + || (textAlign === 'justify-center' && !isEndOfWrapping) + || (textAlign === 'justify-right' && !isEndOfWrapping) + || (textAlign === 'justify-left' && !isEndOfWrapping) + ) { + return 0; } - }); + if (textAlign === 'center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'right') { + leftOffset = lineDiff; + } + if (textAlign === 'justify-center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'justify-right') { + leftOffset = lineDiff; + } + if (direction === 'rtl') { + leftOffset -= lineDiff; + } + return leftOffset; + }, - /* _FROM_SVG_START_ */ /** - * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement}) - * @static - * @memberOf fabric.Text - * @see: http://www.w3.org/TR/SVG/text.html#TextElement + * @private */ - fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( - 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); + _clearCache: function() { + this.__lineWidths = []; + this.__lineHeights = []; + this.__charBounds = []; + }, /** - * Default SVG font size - * @static - * @memberOf fabric.Text + * @private */ - fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; + _shouldClearDimensionCache: function() { + var shouldClear = this._forceClearCache; + shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); + if (shouldClear) { + this.dirty = true; + this._forceClearCache = false; + } + return shouldClear; + }, /** - * Returns fabric.Text instance from an SVG element (not yet implemented) - * @static - * @memberOf fabric.Text - * @param {SVGElement} element Element to parse - * @param {Function} callback callback function invoked after parsing - * @param {Object} [options] Options object + * Measure a single line given its index. Used to calculate the initial + * text bounding box. The values are calculated and stored in __lineWidths cache. + * @private + * @param {Number} lineIndex line number + * @return {Number} Line width */ - fabric.Text.fromElement = function(element, callback, options) { - if (!element) { - return callback(null); + getLineWidth: function(lineIndex) { + if (this.__lineWidths[lineIndex] !== undefined) { + return this.__lineWidths[lineIndex]; } - var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), - parsedAnchor = parsedAttributes.textAnchor || 'left'; - options = Object.assign({}, options, parsedAttributes); + var lineInfo = this.measureLine(lineIndex); + var width = lineInfo.width; + this.__lineWidths[lineIndex] = width; + return width; + }, - options.top = options.top || 0; - options.left = options.left || 0; - if (parsedAttributes.textDecoration) { - var textDecoration = parsedAttributes.textDecoration; - if (textDecoration.indexOf('underline') !== -1) { - options.underline = true; - } - if (textDecoration.indexOf('overline') !== -1) { - options.overline = true; + _getWidthOfCharSpacing: function() { + if (this.charSpacing !== 0) { + return this.fontSize * this.charSpacing / 1000; + } + return 0; + }, + + /** + * Retrieves the value of property at given character position + * @param {Number} lineIndex the line number + * @param {Number} charIndex the character number + * @param {String} property the property name + * @returns the value of 'property' + */ + getValueOfPropertyAt: function(lineIndex, charIndex, property) { + var charStyle = this._getStyleDeclaration(lineIndex, charIndex); + if (charStyle && typeof charStyle[property] !== 'undefined') { + return charStyle[property]; + } + return this[property]; + }, + + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextDecoration: function(ctx, type) { + if (!this[type] && !this.styleHas(type)) { + return; + } + var heightOfLine, size, _size, + lineLeftOffset, dy, _dy, + line, lastDecoration, + leftOffset = this._getLeftOffset(), + topOffset = this._getTopOffset(), top, + boxStart, boxWidth, charBox, currentDecoration, + maxHeight, currentFill, lastFill, path = this.path, + charSpacing = this._getWidthOfCharSpacing(), + offsetY = this.offsets[type]; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this[type] && !this.styleHas(type, i)) { + topOffset += heightOfLine; + continue; } - if (textDecoration.indexOf('line-through') !== -1) { - options.linethrough = true; + line = this._textLines[i]; + maxHeight = heightOfLine / this.lineHeight; + lineLeftOffset = this._getLineLeftOffset(i); + boxStart = 0; + boxWidth = 0; + lastDecoration = this.getValueOfPropertyAt(i, 0, type); + lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); + top = topOffset + maxHeight * (1 - this._fontSizeFraction); + size = this.getHeightOfChar(i, 0); + dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentDecoration = this.getValueOfPropertyAt(i, j, type); + currentFill = this.getValueOfPropertyAt(i, j, 'fill'); + _size = this.getHeightOfChar(i, j); + _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); + if (path && currentDecoration && currentFill) { + ctx.save(); + ctx.fillStyle = lastFill; + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillRect( + -charBox.kernedWidth / 2, + offsetY * _size + _dy, + charBox.kernedWidth, + this.fontSize / 15 + ); + ctx.restore(); + } + else if ( + (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) + && boxWidth > 0 + ) { + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + if (lastDecoration && lastFill) { + ctx.fillStyle = lastFill; + ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth, + this.fontSize / 15 + ); + } + boxStart = charBox.left; + boxWidth = charBox.width; + lastDecoration = currentDecoration; + lastFill = currentFill; + size = _size; + dy = _dy; + } + else { + boxWidth += charBox.kernedWidth; + } } - delete options.textDecoration; + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = currentFill; + currentDecoration && currentFill && ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth - charSpacing, + this.fontSize / 15 + ); + topOffset += heightOfLine; } - if ('dx' in parsedAttributes) { - options.left += parsedAttributes.dx; + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, + + /** + * return font declaration string for canvas context + * @param {Object} [styleObject] object + * @returns {String} font declaration formatted for canvas context. + */ + _getFontDeclaration: function(styleObject, forMeasuring) { + var style = styleObject || this, family = this.fontFamily, + fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; + var fontFamily = family === undefined || + family.indexOf('\'') > -1 || family.indexOf(',') > -1 || + family.indexOf('"') > -1 || fontIsGeneric + ? style.fontFamily : '"' + style.fontFamily + '"'; + return [ + // node-canvas needs "weight style", while browsers need "style weight" + // verify if this can be fixed in JSDOM + (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), + (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), + forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', + fontFamily + ].join(' '); + }, + + /** + * Renders text instance on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + // do not render if object is not visible + if (!this.visible) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; } - if ('dy' in parsedAttributes) { - options.top += parsedAttributes.dy; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); } - if (!('fontSize' in options)) { - options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + this.callSuper('render', ctx); + }, + + /** + * Returns the text as an array of lines. + * @param {String} text text to split + * @returns {Array} Lines in the text + */ + _splitTextIntoLines: function(text) { + var lines = text.split(this._reNewline), + newLines = new Array(lines.length), + newLine = ['\n'], + newText = []; + for (var i = 0; i < lines.length; i++) { + newLines[i] = fabric.util.string.graphemeSplit(lines[i]); + newText = newText.concat(newLines[i], newLine); } + newText.pop(); + return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; + }, - var textContent = ''; + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var allProperties = additionalProps.concat(propertiesToInclude); + var obj = this.callSuper('toObject', allProperties); + // styles will be overridden with a properly cloned structure + obj.styles = clone(this.styles, true); + if (obj.path) { + obj.path = this.path.toObject(); + } + return obj; + }, - // The XML is not properly parsed in IE9 so a workaround to get - // textContent is through firstChild.data. Another workaround would be - // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) - if (!('textContent' in element)) { - if ('firstChild' in element && element.firstChild !== null) { - if ('data' in element.firstChild && element.firstChild.data !== null) { - textContent = element.firstChild.data; + /** + * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. + * @param {String|Object} key Property name or object (if object, iterate over the object properties) + * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) + * @return {fabric.Object} thisArg + * @chainable + */ + set: function(key, value) { + this.callSuper('set', key, value); + var needsDims = false; + var isAddingPath = false; + if (typeof key === 'object') { + for (var _key in key) { + if (_key === 'path') { + this.setPathInfo(); } + needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; + isAddingPath = isAddingPath || _key === 'path'; } } else { - textContent = element.textContent; - } - - textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); - var originalStrokeWidth = options.strokeWidth; - options.strokeWidth = 0; - - var text = new fabric.Text(textContent, options), - textHeightScaleFactor = text.getScaledHeight() / text.height, - lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, - scaledDiff = lineHeightDiff * textHeightScaleFactor, - textHeight = text.getScaledHeight() + scaledDiff, - offX = 0; - /* - Adjust positioning: - x/y attributes in SVG correspond to the bottom-left corner of text bounding box - fabric output by default at top, left. - */ - if (parsedAnchor === 'center') { - offX = text.getScaledWidth() / 2; + needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; + isAddingPath = key === 'path'; } - if (parsedAnchor === 'right') { - offX = text.getScaledWidth(); + if (isAddingPath) { + this.setPathInfo(); } - text.set({ - left: text.left - offX, - top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, - strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, - }); - callback(text); - }; - /* _FROM_SVG_END_ */ + if (needsDims) { + this.initDimensions(); + this.setCoords(); + } + return this; + }, /** - * Returns fabric.Text instance from an object representation - * @static - * @memberOf fabric.Text - * @param {Object} object plain js Object to create an instance from - * @returns {Promise} + * Returns complexity of an instance + * @return {Number} complexity */ - fabric.Text.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Text, object, 'text'); - }; + complexity: function() { + return 1; + } + }); + + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement}) + * @static + * @memberOf fabric.Text + * @see: http://www.w3.org/TR/SVG/text.html#TextElement + */ + fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( + 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); + + /** + * Default SVG font size + * @static + * @memberOf fabric.Text + */ + fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; - fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; + /** + * Returns fabric.Text instance from an SVG element (not yet implemented) + * @static + * @memberOf fabric.Text + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Text.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } - fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); + var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), + parsedAnchor = parsedAttributes.textAnchor || 'left'; + options = fabric.util.object.extend((options ? clone(options) : { }), parsedAttributes); - })(typeof exports !== 'undefined' ? exports : window); + options.top = options.top || 0; + options.left = options.left || 0; + if (parsedAttributes.textDecoration) { + var textDecoration = parsedAttributes.textDecoration; + if (textDecoration.indexOf('underline') !== -1) { + options.underline = true; + } + if (textDecoration.indexOf('overline') !== -1) { + options.overline = true; + } + if (textDecoration.indexOf('line-through') !== -1) { + options.linethrough = true; + } + delete options.textDecoration; + } + if ('dx' in parsedAttributes) { + options.left += parsedAttributes.dx; + } + if ('dy' in parsedAttributes) { + options.top += parsedAttributes.dy; + } + if (!('fontSize' in options)) { + options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + } - (function(global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** - * Returns true if object has no styling or no styling in a line - * @param {Number} lineIndex , lineIndex is on wrapped lines. - * @return {Boolean} - */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { - return true; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return true; + var textContent = ''; + + // The XML is not properly parsed in IE9 so a workaround to get + // textContent is through firstChild.data. Another workaround would be + // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) + if (!('textContent' in element)) { + if ('firstChild' in element && element.firstChild !== null) { + if ('data' in element.firstChild && element.firstChild.data !== null) { + textContent = element.firstChild.data; } - var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; - } + } + } + else { + textContent = element.textContent; + } + + textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); + var originalStrokeWidth = options.strokeWidth; + options.strokeWidth = 0; + + var text = new fabric.Text(textContent, options), + textHeightScaleFactor = text.getScaledHeight() / text.height, + lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, + scaledDiff = lineHeightDiff * textHeightScaleFactor, + textHeight = text.getScaledHeight() + scaledDiff, + offX = 0; + /* + Adjust positioning: + x/y attributes in SVG correspond to the bottom-left corner of text bounding box + fabric output by default at top, left. + */ + if (parsedAnchor === 'center') { + offX = text.getScaledWidth() / 2; + } + if (parsedAnchor === 'right') { + offX = text.getScaledWidth(); + } + text.set({ + left: text.left - offX, + top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, + strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, + }); + callback(text); + }; + /* _FROM_SVG_END_ */ + + /** + * Returns fabric.Text instance from an object representation + * @static + * @memberOf fabric.Text + * @param {Object} object plain js Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created + */ + fabric.Text.fromObject = function(object, callback) { + var objectCopy = clone(object), path = object.path; + delete objectCopy.path; + return fabric.Object._fromObject('Text', objectCopy, function(textInstance) { + if (path) { + fabric.Object._fromObject('Path', path, function(pathInstance) { + textInstance.set('path', pathInstance); + callback(textInstance); + }, 'path'); + } + else { + callback(textInstance); + } + }, 'text'); + }; + + fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; + + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); + +})(typeof exports !== 'undefined' ? exports : this); + + +(function() { + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + /** + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} + */ + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return true; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; } } - return true; - }, + } + return true; + }, - /** - * Returns true if object has a style property or has it ina specified line - * This function is used to detect if a text will use a particular property or not. - * @param {String} property to check for - * @param {Number} lineIndex to check the style on - * @return {Boolean} - */ - styleHas: function(property, lineIndex) { - if (!this.styles || !property || property === '') { - return false; - } - if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { - return false; - } - var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; + /** + * Returns true if object has a style property or has it ina specified line + * This function is used to detect if a text will use a particular property or not. + * @param {String} property to check for + * @param {Number} lineIndex to check the style on + * @return {Boolean} + */ + styleHas: function(property, lineIndex) { + if (!this.styles || !property || property === '') { + return false; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return false; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; + // eslint-disable-next-line + for (var p1 in obj) { // eslint-disable-next-line - for (var p1 in obj) { - // eslint-disable-next-line - for (var p2 in obj[p1]) { - if (typeof obj[p1][p2][property] !== 'undefined') { - return true; - } + for (var p2 in obj[p1]) { + if (typeof obj[p1][p2][property] !== 'undefined') { + return true; } } - return false; - }, + } + return false; + }, - /** - * Check if characters in a text have a value for a property - * whose value matches the textbox's value for that property. If so, - * the character-level property is deleted. If the character - * has no other properties, then it is also deleted. Finally, - * if the line containing that character has no other characters - * then it also is deleted. - * - * @param {string} property The property to compare between characters and text. - */ - cleanStyle: function(property) { - if (!this.styles || !property || property === '') { - return false; - } - var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, - allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; + /** + * Check if characters in a text have a value for a property + * whose value matches the textbox's value for that property. If so, + * the character-level property is deleted. If the character + * has no other properties, then it is also deleted. Finally, + * if the line containing that character has no other characters + * then it also is deleted. + * + * @param {string} property The property to compare between characters and text. + */ + cleanStyle: function(property) { + if (!this.styles || !property || property === '') { + return false; + } + var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, + allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; + // eslint-disable-next-line + for (var p1 in obj) { + letterCount = 0; // eslint-disable-next-line - for (var p1 in obj) { - letterCount = 0; - // eslint-disable-next-line - for (var p2 in obj[p1]) { - var styleObject = obj[p1][p2], - stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); - - stylesCount++; - - if (stylePropertyHasBeenSet) { - if (!stylePropertyValue) { - stylePropertyValue = styleObject[property]; - } - else if (styleObject[property] !== stylePropertyValue) { - allStyleObjectPropertiesMatch = false; - } + for (var p2 in obj[p1]) { + var styleObject = obj[p1][p2], + stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); - if (styleObject[property] === this[property]) { - delete styleObject[property]; - } + stylesCount++; + + if (stylePropertyHasBeenSet) { + if (!stylePropertyValue) { + stylePropertyValue = styleObject[property]; } - else { + else if (styleObject[property] !== stylePropertyValue) { allStyleObjectPropertiesMatch = false; } - if (Object.keys(styleObject).length !== 0) { - letterCount++; - } - else { - delete obj[p1][p2]; + if (styleObject[property] === this[property]) { + delete styleObject[property]; } } + else { + allStyleObjectPropertiesMatch = false; + } + + if (Object.keys(styleObject).length !== 0) { + letterCount++; + } + else { + delete obj[p1][p2]; + } + } + + if (letterCount === 0) { + delete obj[p1]; + } + } + // if every grapheme has the same style set then + // delete those styles and set it on the parent + for (var i = 0; i < this._textLines.length; i++) { + graphemeCount += this._textLines[i].length; + } + if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { + this[property] = stylePropertyValue; + this.removeStyle(property); + } + }, - if (letterCount === 0) { - delete obj[p1]; + /** + * Remove a style property or properties from all individual character styles + * in a text object. Deletes the character style object if it contains no other style + * props. Deletes a line style object if it contains no other character styles. + * + * @param {String} props The property to remove from character styles. + */ + removeStyle: function(property) { + if (!this.styles || !property || property === '') { + return; + } + var obj = this.styles, line, lineNum, charNum; + for (lineNum in obj) { + line = obj[lineNum]; + for (charNum in line) { + delete line[charNum][property]; + if (Object.keys(line[charNum]).length === 0) { + delete line[charNum]; } } - // if every grapheme has the same style set then - // delete those styles and set it on the parent - for (var i = 0; i < this._textLines.length; i++) { - graphemeCount += this._textLines[i].length; + if (Object.keys(line).length === 0) { + delete obj[lineNum]; } - if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { - this[property] = stylePropertyValue; - this.removeStyle(property); + } + }, + + /** + * @private + */ + _extendStyles: function(index, styles) { + var loc = this.get2DCursorLocation(index); + + if (!this._getLineStyle(loc.lineIndex)) { + this._setLineStyle(loc.lineIndex); + } + + if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { + this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); + } + + fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); + }, + + /** + * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) + * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. + * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles. + */ + get2DCursorLocation: function(selectionStart, skipWrapping) { + if (typeof selectionStart === 'undefined') { + selectionStart = this.selectionStart; + } + var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, + len = lines.length; + for (var i = 0; i < len; i++) { + if (selectionStart <= lines[i].length) { + return { + lineIndex: i, + charIndex: selectionStart + }; } - }, + selectionStart -= lines[i].length + this.missingNewlineOffset(i); + } + return { + lineIndex: i - 1, + charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart + }; + }, - /** - * Remove a style property or properties from all individual character styles - * in a text object. Deletes the character style object if it contains no other style - * props. Deletes a line style object if it contains no other character styles. - * - * @param {String} props The property to remove from character styles. - */ - removeStyle: function(property) { - if (!this.styles || !property || property === '') { - return; - } - var obj = this.styles, line, lineNum, charNum; - for (lineNum in obj) { - line = obj[lineNum]; - for (charNum in line) { - delete line[charNum][property]; - if (Object.keys(line[charNum]).length === 0) { - delete line[charNum]; - } - } - if (Object.keys(line).length === 0) { - delete obj[lineNum]; - } - } - }, + /** + * Gets style of a current selection/cursor (at the start position) + * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used. + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @param {Boolean} [complete] get full style or not + * @return {Array} styles an array with one, zero or more Style objects + */ + getSelectionStyles: function(startIndex, endIndex, complete) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + var styles = []; + for (var i = startIndex; i < endIndex; i++) { + styles.push(this.getStyleAtPosition(i, complete)); + } + return styles; + }, - /** - * @private - */ - _extendStyles: function(index, styles) { - var loc = this.get2DCursorLocation(index); + /** + * Gets style of a current selection/cursor position + * @param {Number} position to get styles at + * @param {Boolean} [complete] full style if true + * @return {Object} style Style object at a specified index + * @private + */ + getStyleAtPosition: function(position, complete) { + var loc = this.get2DCursorLocation(position), + style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : + this._getStyleDeclaration(loc.lineIndex, loc.charIndex); + return style || {}; + }, - if (!this._getLineStyle(loc.lineIndex)) { - this._setLineStyle(loc.lineIndex); - } + /** + * Sets style of a current selection, if no selection exist, do not set anything. + * @param {Object} [styles] Styles object + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @return {fabric.IText} thisArg + * @chainable + */ + setSelectionStyles: function(styles, startIndex, endIndex) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + for (var i = startIndex; i < endIndex; i++) { + this._extendStyles(i, styles); + } + /* not included in _extendStyles to avoid clearing cache more than once */ + this._forceClearCache = true; + return this; + }, - if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { - this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); - } + /** + * get the reference, not a clone, of the style object for a given character + * @param {Number} lineIndex + * @param {Number} charIndex + * @return {Object} style object + */ + _getStyleDeclaration: function(lineIndex, charIndex) { + var lineStyle = this.styles && this.styles[lineIndex]; + if (!lineStyle) { + return null; + } + return lineStyle[charIndex]; + }, - fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); - }, + /** + * return a new object that contains all the style property for a character + * the object returned is newly created + * @param {Number} lineIndex of the line where the character is + * @param {Number} charIndex position of the character on the line + * @return {Object} style object + */ + getCompleteStyleDeclaration: function(lineIndex, charIndex) { + var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, + styleObject = { }, prop; + for (var i = 0; i < this._styleProperties.length; i++) { + prop = this._styleProperties[i]; + styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; + } + return styleObject; + }, - /** - * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) - * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. - * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles. - */ - get2DCursorLocation: function(selectionStart, skipWrapping) { - if (typeof selectionStart === 'undefined') { - selectionStart = this.selectionStart; - } - var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, - len = lines.length; - for (var i = 0; i < len; i++) { - if (selectionStart <= lines[i].length) { - return { - lineIndex: i, - charIndex: selectionStart - }; - } - selectionStart -= lines[i].length + this.missingNewlineOffset(i); - } - return { - lineIndex: i - 1, - charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart - }; - }, + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {Object} style + * @private + */ + _setStyleDeclaration: function(lineIndex, charIndex, style) { + this.styles[lineIndex][charIndex] = style; + }, - /** - * Gets style of a current selection/cursor (at the start position) - * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used. - * @param {Number} [startIndex] Start index to get styles at - * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 - * @param {Boolean} [complete] get full style or not - * @return {Array} styles an array with one, zero or more Style objects - */ - getSelectionStyles: function(startIndex, endIndex, complete) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - var styles = []; - for (var i = startIndex; i < endIndex; i++) { - styles.push(this.getStyleAtPosition(i, complete)); - } - return styles; - }, + /** + * + * @param {Number} lineIndex + * @param {Number} charIndex + * @private + */ + _deleteStyleDeclaration: function(lineIndex, charIndex) { + delete this.styles[lineIndex][charIndex]; + }, - /** - * Gets style of a current selection/cursor position - * @param {Number} position to get styles at - * @param {Boolean} [complete] full style if true - * @return {Object} style Style object at a specified index - * @private - */ - getStyleAtPosition: function(position, complete) { - var loc = this.get2DCursorLocation(position), - style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : - this._getStyleDeclaration(loc.lineIndex, loc.charIndex); - return style || {}; - }, + /** + * @param {Number} lineIndex + * @return {Boolean} if the line exists or not + * @private + */ + _getLineStyle: function(lineIndex) { + return !!this.styles[lineIndex]; + }, - /** - * Sets style of a current selection, if no selection exist, do not set anything. - * @param {Object} [styles] Styles object - * @param {Number} [startIndex] Start index to get styles at - * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 - * @return {fabric.IText} thisArg - * @chainable - */ - setSelectionStyles: function(styles, startIndex, endIndex) { - if (typeof startIndex === 'undefined') { - startIndex = this.selectionStart || 0; - } - if (typeof endIndex === 'undefined') { - endIndex = this.selectionEnd || startIndex; - } - for (var i = startIndex; i < endIndex; i++) { - this._extendStyles(i, styles); - } - /* not included in _extendStyles to avoid clearing cache more than once */ - this._forceClearCache = true; - return this; - }, + /** + * Set the line style to an empty object so that is initialized + * @param {Number} lineIndex + * @private + */ + _setLineStyle: function(lineIndex) { + this.styles[lineIndex] = {}; + }, - /** - * get the reference, not a clone, of the style object for a given character - * @param {Number} lineIndex - * @param {Number} charIndex - * @return {Object} style object - */ - _getStyleDeclaration: function(lineIndex, charIndex) { - var lineStyle = this.styles && this.styles[lineIndex]; - if (!lineStyle) { - return null; - } - return lineStyle[charIndex]; - }, + /** + * @param {Number} lineIndex + * @private + */ + _deleteLineStyle: function(lineIndex) { + delete this.styles[lineIndex]; + } + }); +})(); - /** - * return a new object that contains all the style property for a character - * the object returned is newly created - * @param {Number} lineIndex of the line where the character is - * @param {Number} charIndex position of the character on the line - * @return {Object} style object - */ - getCompleteStyleDeclaration: function(lineIndex, charIndex) { - var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, - styleObject = { }, prop; - for (var i = 0; i < this._styleProperties.length; i++) { - prop = this._styleProperties[i]; - styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; - } - return styleObject; - }, - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @param {Object} style - * @private - */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - this.styles[lineIndex][charIndex] = style; - }, +(function() { - /** - * - * @param {Number} lineIndex - * @param {Number} charIndex - * @private - */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { - delete this.styles[lineIndex][charIndex]; - }, + function parseDecoration(object) { + if (object.textDecoration) { + object.textDecoration.indexOf('underline') > -1 && (object.underline = true); + object.textDecoration.indexOf('line-through') > -1 && (object.linethrough = true); + object.textDecoration.indexOf('overline') > -1 && (object.overline = true); + delete object.textDecoration; + } + } - /** - * @param {Number} lineIndex - * @return {Boolean} if the line exists or not - * @private - */ - _getLineStyle: function(lineIndex) { - return !!this.styles[lineIndex]; - }, + /** + * IText class (introduced in v1.4) Events are also fired with "text:" + * prefix when observing canvas. + * @class fabric.IText + * @extends fabric.Text + * @mixes fabric.Observable + * + * @fires changed + * @fires selection:changed + * @fires editing:entered + * @fires editing:exited + * + * @return {fabric.IText} thisArg + * @see {@link fabric.IText#initialize} for constructor definition + * + *

Supported key combinations:

+ * 
+   *   Move cursor:                    left, right, up, down
+   *   Select character:               shift + left, shift + right
+   *   Select text vertically:         shift + up, shift + down
+   *   Move cursor by word:            alt + left, alt + right
+   *   Select words:                   shift + alt + left, shift + alt + right
+   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
+   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
+   *   Jump to start/end of text:      cmd + up, cmd + down
+   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
+   *   Delete character:               backspace
+   *   Delete word:                    alt + backspace
+   *   Delete line:                    cmd + backspace
+   *   Forward delete:                 delete
+   *   Copy text:                      ctrl/cmd + c
+   *   Paste text:                     ctrl/cmd + v
+   *   Cut text:                       ctrl/cmd + x
+   *   Select entire text:             ctrl/cmd + a
+   *   Quit editing                    tab or esc
+   *
+ * + *

Supported mouse/touch combination

+ * 
+   *   Position cursor:                click/touch
+   *   Create selection:               click/touch & drag
+   *   Create selection:               click & shift + click
+   *   Select word:                    double click
+   *   Select line:                    triple click
+   *
+ */ + fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { - /** - * Set the line style to an empty object so that is initialized - * @param {Number} lineIndex - * @private - */ - _setLineStyle: function(lineIndex) { - this.styles[lineIndex] = {}; - }, + /** + * Type of an object + * @type String + * @default + */ + type: 'i-text', - /** - * @param {Number} lineIndex - * @private - */ - _deleteLineStyle: function(lineIndex) { - delete this.styles[lineIndex]; - } - }); - })(typeof exports !== 'undefined' ? exports : window); + /** + * Index where text selection starts (or where cursor is when there is no selection) + * @type Number + * @default + */ + selectionStart: 0, - (function(global) { - var fabric = global.fabric; /** - * IText class (introduced in v1.4) Events are also fired with "text:" - * prefix when observing canvas. - * @class fabric.IText - * @extends fabric.Text - * @mixes fabric.Observable - * - * @fires changed - * @fires selection:changed - * @fires editing:entered - * @fires editing:exited - * - * @return {fabric.IText} thisArg - * @see {@link fabric.IText#initialize} for constructor definition - * - *

Supported key combinations:

- * 
-     *   Move cursor:                    left, right, up, down
-     *   Select character:               shift + left, shift + right
-     *   Select text vertically:         shift + up, shift + down
-     *   Move cursor by word:            alt + left, alt + right
-     *   Select words:                   shift + alt + left, shift + alt + right
-     *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
-     *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
-     *   Jump to start/end of text:      cmd + up, cmd + down
-     *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
-     *   Delete character:               backspace
-     *   Delete word:                    alt + backspace
-     *   Delete line:                    cmd + backspace
-     *   Forward delete:                 delete
-     *   Copy text:                      ctrl/cmd + c
-     *   Paste text:                     ctrl/cmd + v
-     *   Cut text:                       ctrl/cmd + x
-     *   Select entire text:             ctrl/cmd + a
-     *   Quit editing                    tab or esc
-     *
- * - *

Supported mouse/touch combination

- * 
-     *   Position cursor:                click/touch
-     *   Create selection:               click/touch & drag
-     *   Create selection:               click & shift + click
-     *   Select word:                    double click
-     *   Select line:                    triple click
-     *
+ * Index where text selection ends + * @type Number + * @default */ - fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { + selectionEnd: 0, - /** - * Type of an object - * @type String - * @default - */ - type: 'i-text', + /** + * Color of text selection + * @type String + * @default + */ + selectionColor: 'rgba(17,119,255,0.3)', - /** - * Index where text selection starts (or where cursor is when there is no selection) - * @type Number - * @default - */ - selectionStart: 0, + /** + * Indicates whether text is in editing mode + * @type Boolean + * @default + */ + isEditing: false, - /** - * Index where text selection ends - * @type Number - * @default - */ - selectionEnd: 0, + /** + * Indicates whether a text can be edited + * @type Boolean + * @default + */ + editable: true, - /** - * Color of text selection - * @type String - * @default - */ - selectionColor: 'rgba(17,119,255,0.3)', + /** + * Border color of text object while it's in editing mode + * @type String + * @default + */ + editingBorderColor: 'rgba(102,153,255,0.25)', - /** - * Indicates whether text is in editing mode - * @type Boolean - * @default - */ - isEditing: false, + /** + * Width of cursor (in px) + * @type Number + * @default + */ + cursorWidth: 2, - /** - * Indicates whether a text can be edited - * @type Boolean - * @default - */ - editable: true, + /** + * Color of text cursor color in editing mode. + * if not set (default) will take color from the text. + * if set to a color value that fabric can understand, it will + * be used instead of the color of the text at the current position. + * @type String + * @default + */ + cursorColor: '', - /** - * Border color of text object while it's in editing mode - * @type String - * @default - */ - editingBorderColor: 'rgba(102,153,255,0.25)', + /** + * Delay between cursor blink (in ms) + * @type Number + * @default + */ + cursorDelay: 1000, - /** - * Width of cursor (in px) - * @type Number - * @default - */ - cursorWidth: 2, + /** + * Duration of cursor fadein (in ms) + * @type Number + * @default + */ + cursorDuration: 600, - /** - * Color of text cursor color in editing mode. - * if not set (default) will take color from the text. - * if set to a color value that fabric can understand, it will - * be used instead of the color of the text at the current position. - * @type String - * @default - */ - cursorColor: '', + /** + * Indicates whether internal text char widths can be cached + * @type Boolean + * @default + */ + caching: true, - /** - * Delay between cursor blink (in ms) - * @type Number - * @default - */ - cursorDelay: 1000, + /** + * DOM container to append the hiddenTextarea. + * An alternative to attaching to the document.body. + * Useful to reduce laggish redraw of the full document.body tree and + * also with modals event capturing that won't let the textarea take focus. + * @type HTMLElement + * @default + */ + hiddenTextareaContainer: null, - /** - * Duration of cursor fadein (in ms) - * @type Number - * @default - */ - cursorDuration: 600, + /** + * @private + */ + _reSpace: /\s|\n/, - /** - * Indicates whether internal text char widths can be cached - * @type Boolean - * @default - */ - caching: true, + /** + * @private + */ + _currentCursorOpacity: 0, - /** - * DOM container to append the hiddenTextarea. - * An alternative to attaching to the document.body. - * Useful to reduce laggish redraw of the full document.body tree and - * also with modals event capturing that won't let the textarea take focus. - * @type HTMLElement - * @default - */ - hiddenTextareaContainer: null, + /** + * @private + */ + _selectionDirection: null, - /** - * @private - */ - _reSpace: /\s|\n/, + /** + * @private + */ + _abortCursorAnimation: false, - /** - * @private - */ - _currentCursorOpacity: 0, + /** + * @private + */ + __widthOfSpace: [], - /** - * @private - */ - _selectionDirection: null, + /** + * Helps determining when the text is in composition, so that the cursor + * rendering is altered. + */ + inCompositionMode: false, - /** - * @private - */ - _abortCursorAnimation: false, + /** + * Constructor + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.IText} thisArg + */ + initialize: function(text, options) { + this.callSuper('initialize', text, options); + this.initBehavior(); + }, - /** - * @private - */ - __widthOfSpace: [], + /** + * Sets selection start (left boundary of a selection) + * @param {Number} index Index to set selection start to + */ + setSelectionStart: function(index) { + index = Math.max(index, 0); + this._updateAndFire('selectionStart', index); + }, - /** - * Helps determining when the text is in composition, so that the cursor - * rendering is altered. - */ - inCompositionMode: false, + /** + * Sets selection end (right boundary of a selection) + * @param {Number} index Index to set selection end to + */ + setSelectionEnd: function(index) { + index = Math.min(index, this.text.length); + this._updateAndFire('selectionEnd', index); + }, - /** - * Constructor - * @param {String} text Text string - * @param {Object} [options] Options object - * @return {fabric.IText} thisArg - */ - initialize: function(text, options) { - this.callSuper('initialize', text, options); - this.initBehavior(); - }, + /** + * @private + * @param {String} property 'selectionStart' or 'selectionEnd' + * @param {Number} index new position of property + */ + _updateAndFire: function(property, index) { + if (this[property] !== index) { + this._fireSelectionChanged(); + this[property] = index; + } + this._updateTextarea(); + }, + + /** + * Fires the even of selection changed + * @private + */ + _fireSelectionChanged: function() { + this.fire('selection:changed'); + this.canvas && this.canvas.fire('text:selection:changed', { target: this }); + }, + + /** + * Initialize text dimensions. Render all text on given context + * or on a offscreen canvas to get the text width with measureText. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + * @private + */ + initDimensions: function() { + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this.callSuper('initDimensions'); + }, - /** - * While editing handle differently - * @private - * @param {string} key - * @param {*} value - */ - _set: function (key, value) { - if (this.isEditing && this._savedProps && key in this._savedProps) { - this._savedProps[key] = value; - } - else { - this.callSuper('_set', key, value); - } - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + this.clearContextTop(); + this.callSuper('render', ctx); + // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor + // the correct position but not at every cursor animation. + this.cursorOffsetCache = { }; + this.renderCursorOrSelection(); + }, - /** - * Sets selection start (left boundary of a selection) - * @param {Number} index Index to set selection start to - */ - setSelectionStart: function(index) { - index = Math.max(index, 0); - this._updateAndFire('selectionStart', index); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + this.callSuper('_render', ctx); + }, - /** - * Sets selection end (right boundary of a selection) - * @param {Number} index Index to set selection end to - */ - setSelectionEnd: function(index) { - index = Math.min(index, this.text.length); - this._updateAndFire('selectionEnd', index); - }, + /** + * Prepare and clean the contextTop + */ + clearContextTop: function(skipRestore) { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this.transform(ctx); + this._clearTextArea(ctx); + skipRestore || ctx.restore(); + }, + /** + * Renders cursor or selection (depending on what exists) + * it does on the contextTop. If contextTop is not available, do nothing. + */ + renderCursorOrSelection: function() { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var boundaries = this._getCursorBoundaries(), + ctx = this.canvas.contextTop; + this.clearContextTop(true); + if (this.selectionStart === this.selectionEnd) { + this.renderCursor(boundaries, ctx); + } + else { + this.renderSelection(boundaries, ctx); + } + ctx.restore(); + }, - /** - * @private - * @param {String} property 'selectionStart' or 'selectionEnd' - * @param {Number} index new position of property - */ - _updateAndFire: function(property, index) { - if (this[property] !== index) { - this._fireSelectionChanged(); - this[property] = index; - } - this._updateTextarea(); - }, + _clearTextArea: function(ctx) { + // we add 4 pixel, to be sure to do not leave any pixel out + var width = this.width + 4, height = this.height + 4; + ctx.clearRect(-width / 2, -height / 2, width, height); + }, - /** - * Fires the even of selection changed - * @private - */ - _fireSelectionChanged: function() { - this.fire('selection:changed'); - this.canvas && this.canvas.fire('text:selection:changed', { target: this }); - }, + /** + * Returns cursor boundaries (left, top, leftOffset, topOffset) + * @private + * @param {Array} chars Array of characters + * @param {String} typeOfBoundaries + */ + _getCursorBoundaries: function(position) { - /** - * Initialize text dimensions. Render all text on given context - * or on a offscreen canvas to get the text width with measureText. - * Updates this.width and this.height with the proper values. - * Does not return dimensions. - * @private - */ - initDimensions: function() { - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this.callSuper('initDimensions'); - }, + // left/top are left/top of entire text box + // leftOffset/topOffset are offset from that left/top point of a text box - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - render: function(ctx) { - this.clearContextTop(); - this.callSuper('render', ctx); - // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor - // the correct position but not at every cursor animation. - this.cursorOffsetCache = { }; - this.renderCursorOrSelection(); - }, + if (typeof position === 'undefined') { + position = this.selectionStart; + } - /** - * @private - * @param {CanvasRenderingContext2D} ctx Context to render on - */ - _render: function(ctx) { - this.callSuper('_render', ctx); - }, + var left = this._getLeftOffset(), + top = this._getTopOffset(), + offsets = this._getCursorBoundariesOffsets(position); + return { + left: left, + top: top, + leftOffset: offsets.left, + topOffset: offsets.top + }; + }, - /** - * Prepare and clean the contextTop - */ - clearContextTop: function(skipRestore) { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; + /** + * @private + */ + _getCursorBoundariesOffsets: function(position) { + if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { + return this.cursorOffsetCache; + } + var lineLeftOffset, + lineIndex, + charIndex, + topOffset = 0, + leftOffset = 0, + boundaries, + cursorPosition = this.get2DCursorLocation(position); + charIndex = cursorPosition.charIndex; + lineIndex = cursorPosition.lineIndex; + for (var i = 0; i < lineIndex; i++) { + topOffset += this.getHeightOfLine(i); + } + lineLeftOffset = this._getLineLeftOffset(lineIndex); + var bound = this.__charBounds[lineIndex][charIndex]; + bound && (leftOffset = bound.left); + if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { + leftOffset -= this._getWidthOfCharSpacing(); + } + boundaries = { + top: topOffset, + left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), + }; + if (this.direction === 'rtl') { + boundaries.left *= -1; + } + this.cursorOffsetCache = boundaries; + return this.cursorOffsetCache; + }, + + /** + * Renders cursor + * @param {Object} boundaries + * @param {CanvasRenderingContext2D} ctx transformed context to draw on + */ + renderCursor: function(boundaries, ctx) { + var cursorLocation = this.get2DCursorLocation(), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), + multiplier = this.scaleX * this.canvas.getZoom(), + cursorWidth = this.cursorWidth / multiplier, + topOffset = boundaries.topOffset, + dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); + topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight + - charHeight * (1 - this._fontSizeFraction); + + if (this.inCompositionMode) { + this.renderSelection(boundaries, ctx); + } + ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); + ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; + ctx.fillRect( + boundaries.left + boundaries.leftOffset - cursorWidth / 2, + topOffset + boundaries.top + dy, + cursorWidth, + charHeight); + }, + + /** + * Renders text selection + * @param {Object} boundaries Object with left/top/leftOffset/topOffset + * @param {CanvasRenderingContext2D} ctx transformed context to draw on + */ + renderSelection: function(boundaries, ctx) { + + var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, + selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, + isJustify = this.textAlign.indexOf('justify') !== -1, + start = this.get2DCursorLocation(selectionStart), + end = this.get2DCursorLocation(selectionEnd), + startLine = start.lineIndex, + endLine = end.lineIndex, + startChar = start.charIndex < 0 ? 0 : start.charIndex, + endChar = end.charIndex < 0 ? 0 : end.charIndex; + + for (var i = startLine; i <= endLine; i++) { + var lineOffset = this._getLineLeftOffset(i) || 0, + lineHeight = this.getHeightOfLine(i), + realLineHeight = 0, boxStart = 0, boxEnd = 0; + + if (i === startLine) { + boxStart = this.__charBounds[startLine][startChar].left; + } + if (i >= startLine && i < endLine) { + boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? + } + else if (i === endLine) { + if (endChar === 0) { + boxEnd = this.__charBounds[endLine][endChar].left; + } + else { + var charSpacing = this._getWidthOfCharSpacing(); + boxEnd = this.__charBounds[endLine][endChar - 1].left + + this.__charBounds[endLine][endChar - 1].width - charSpacing; + } } - var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - this.transform(ctx); - this._clearTextArea(ctx); - skipRestore || ctx.restore(); - }, - /** - * Renders cursor or selection (depending on what exists) - * it does on the contextTop. If contextTop is not available, do nothing. - */ - renderCursorOrSelection: function() { - if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { - return; + realLineHeight = lineHeight; + if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { + lineHeight /= this.lineHeight; } - var boundaries = this._getCursorBoundaries(), - ctx = this.canvas.contextTop; - this.clearContextTop(true); - if (this.selectionStart === this.selectionEnd) { - this.renderCursor(boundaries, ctx); + var drawStart = boundaries.left + lineOffset + boxStart, + drawWidth = boxEnd - boxStart, + drawHeight = lineHeight, extraTop = 0; + if (this.inCompositionMode) { + ctx.fillStyle = this.compositionColor || 'black'; + drawHeight = 1; + extraTop = lineHeight; } else { - this.renderSelection(boundaries, ctx); + ctx.fillStyle = this.selectionColor; } - ctx.restore(); - }, - - _clearTextArea: function(ctx) { - // we add 4 pixel, to be sure to do not leave any pixel out - var width = this.width + 4, height = this.height + 4; - ctx.clearRect(-width / 2, -height / 2, width, height); - }, - - /** - * Returns cursor boundaries (left, top, leftOffset, topOffset) - * @private - * @param {Array} chars Array of characters - * @param {String} typeOfBoundaries - */ - _getCursorBoundaries: function(position) { - - // left/top are left/top of entire text box - // leftOffset/topOffset are offset from that left/top point of a text box - - if (typeof position === 'undefined') { - position = this.selectionStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - drawWidth; } + ctx.fillRect( + drawStart, + boundaries.top + boundaries.topOffset + extraTop, + drawWidth, + drawHeight); + boundaries.topOffset += realLineHeight; + } + }, - var left = this._getLeftOffset(), - top = this._getTopOffset(), - offsets = this._getCursorBoundariesOffsets(position); - return { - left: left, - top: top, - leftOffset: offsets.left, - topOffset: offsets.top - }; - }, + /** + * High level function to know the height of the cursor. + * the currentChar is the one that precedes the cursor + * Returns fontSize of char at the current cursor + * Unused from the library, is for the end user + * @return {Number} Character font size + */ + getCurrentCharFontSize: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); + }, - /** - * @private - */ - _getCursorBoundariesOffsets: function(position) { - if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { - return this.cursorOffsetCache; - } - var lineLeftOffset, - lineIndex, - charIndex, - topOffset = 0, - leftOffset = 0, - boundaries, - cursorPosition = this.get2DCursorLocation(position); - charIndex = cursorPosition.charIndex; - lineIndex = cursorPosition.lineIndex; - for (var i = 0; i < lineIndex; i++) { - topOffset += this.getHeightOfLine(i); - } - lineLeftOffset = this._getLineLeftOffset(lineIndex); - var bound = this.__charBounds[lineIndex][charIndex]; - bound && (leftOffset = bound.left); - if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { - leftOffset -= this._getWidthOfCharSpacing(); - } - boundaries = { - top: topOffset, - left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), - }; - if (this.direction === 'rtl') { - if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { - boundaries.left *= -1; - } - else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { - boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); - } - else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { - boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0); - } - } - this.cursorOffsetCache = boundaries; - return this.cursorOffsetCache; - }, + /** + * High level function to know the color of the cursor. + * the currentChar is the one that precedes the cursor + * Returns color (fill) of char at the current cursor + * if the text object has a pattern or gradient for filler, it will return that. + * Unused by the library, is for the end user + * @return {String | fabric.Gradient | fabric.Pattern} Character color (fill) + */ + getCurrentCharColor: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); + }, - /** - * Renders cursor - * @param {Object} boundaries - * @param {CanvasRenderingContext2D} ctx transformed context to draw on - */ - renderCursor: function(boundaries, ctx) { - var cursorLocation = this.get2DCursorLocation(), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), - multiplier = this.scaleX * this.canvas.getZoom(), - cursorWidth = this.cursorWidth / multiplier, - topOffset = boundaries.topOffset, - dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); - topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight - - charHeight * (1 - this._fontSizeFraction); + /** + * Returns the cursor position for the getCurrent.. functions + * @private + */ + _getCurrentCharIndex: function() { + var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), + charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; + return { l: cursorPosition.lineIndex, c: charIndex }; + } + }); - if (this.inCompositionMode) { - this.renderSelection(boundaries, ctx); + /** + * Returns fabric.IText instance from an object representation + * @static + * @memberOf fabric.IText + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as argument + */ + fabric.IText.fromObject = function(object, callback) { + parseDecoration(object); + if (object.styles) { + for (var i in object.styles) { + for (var j in object.styles[i]) { + parseDecoration(object.styles[i][j]); } - ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); - ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; - ctx.fillRect( - boundaries.left + boundaries.leftOffset - cursorWidth / 2, - topOffset + boundaries.top + dy, - cursorWidth, - charHeight); - }, + } + } + fabric.Object._fromObject('IText', object, callback, 'text'); + }; +})(); - /** - * Renders text selection - * @param {Object} boundaries Object with left/top/leftOffset/topOffset - * @param {CanvasRenderingContext2D} ctx transformed context to draw on - */ - renderSelection: function(boundaries, ctx) { - - var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, - selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, - isJustify = this.textAlign.indexOf('justify') !== -1, - start = this.get2DCursorLocation(selectionStart), - end = this.get2DCursorLocation(selectionEnd), - startLine = start.lineIndex, - endLine = end.lineIndex, - startChar = start.charIndex < 0 ? 0 : start.charIndex, - endChar = end.charIndex < 0 ? 0 : end.charIndex; - - for (var i = startLine; i <= endLine; i++) { - var lineOffset = this._getLineLeftOffset(i) || 0, - lineHeight = this.getHeightOfLine(i), - realLineHeight = 0, boxStart = 0, boxEnd = 0; - - if (i === startLine) { - boxStart = this.__charBounds[startLine][startChar].left; - } - if (i >= startLine && i < endLine) { - boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? - } - else if (i === endLine) { - if (endChar === 0) { - boxEnd = this.__charBounds[endLine][endChar].left; - } - else { - var charSpacing = this._getWidthOfCharSpacing(); - boxEnd = this.__charBounds[endLine][endChar - 1].left - + this.__charBounds[endLine][endChar - 1].width - charSpacing; - } - } - realLineHeight = lineHeight; - if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { - lineHeight /= this.lineHeight; - } - var drawStart = boundaries.left + lineOffset + boxStart, - drawWidth = boxEnd - boxStart, - drawHeight = lineHeight, extraTop = 0; - if (this.inCompositionMode) { - ctx.fillStyle = this.compositionColor || 'black'; - drawHeight = 1; - extraTop = lineHeight; - } - else { - ctx.fillStyle = this.selectionColor; - } - if (this.direction === 'rtl') { - if (this.textAlign === 'right' || this.textAlign === 'justify' || this.textAlign === 'justify-right') { - drawStart = this.width - drawStart - drawWidth; - } - else if (this.textAlign === 'left' || this.textAlign === 'justify-left') { - drawStart = boundaries.left + lineOffset - boxEnd; - } - else if (this.textAlign === 'center' || this.textAlign === 'justify-center') { - drawStart = boundaries.left + lineOffset - boxEnd; - } - } - ctx.fillRect( - drawStart, - boundaries.top + boundaries.topOffset + extraTop, - drawWidth, - drawHeight); - boundaries.topOffset += realLineHeight; - } - }, - /** - * High level function to know the height of the cursor. - * the currentChar is the one that precedes the cursor - * Returns fontSize of char at the current cursor - * Unused from the library, is for the end user - * @return {Number} Character font size - */ - getCurrentCharFontSize: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); - }, +(function() { - /** - * High level function to know the color of the cursor. - * the currentChar is the one that precedes the cursor - * Returns color (fill) of char at the current cursor - * if the text object has a pattern or gradient for filler, it will return that. - * Unused by the library, is for the end user - * @return {String | fabric.Gradient | fabric.Pattern} Character color (fill) - */ - getCurrentCharColor: function() { - var cp = this._getCurrentCharIndex(); - return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); - }, + var clone = fabric.util.object.clone; - /** - * Returns the cursor position for the getCurrent.. functions - * @private - */ - _getCurrentCharIndex: function() { - var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), - charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; - return { l: cursorPosition.lineIndex, c: charIndex }; - } - }); + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { /** - * Returns fabric.IText instance from an object representation - * @static - * @memberOf fabric.IText - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Initializes all the interactive behavior of IText */ - fabric.IText.fromObject = function(object) { - return fabric.Object._fromObject(fabric.IText, object, 'text'); - }; - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - - /** - * Initializes all the interactive behavior of IText - */ - initBehavior: function() { - this.initAddedHandler(); - this.initRemovedHandler(); - this.initCursorSelectionHandlers(); - this.initDoubleClickSimulation(); - this.mouseMoveHandler = this.mouseMoveHandler.bind(this); - }, + initBehavior: function() { + this.initAddedHandler(); + this.initRemovedHandler(); + this.initCursorSelectionHandlers(); + this.initDoubleClickSimulation(); + this.mouseMoveHandler = this.mouseMoveHandler.bind(this); + }, - onDeselect: function() { - this.isEditing && this.exitEditing(); - this.selected = false; - }, + onDeselect: function() { + this.isEditing && this.exitEditing(); + this.selected = false; + }, - /** - * Initializes "added" event handler - */ - initAddedHandler: function() { - var _this = this; - this.on('added', function (opt) { - // make sure we listen to the canvas added event - var canvas = opt.target; - if (canvas) { - if (!canvas._hasITextHandlers) { - canvas._hasITextHandlers = true; - _this._initCanvasHandlers(canvas); - } - canvas._iTextInstances = canvas._iTextInstances || []; - canvas._iTextInstances.push(_this); + /** + * Initializes "added" event handler + */ + initAddedHandler: function() { + var _this = this; + this.on('added', function() { + var canvas = _this.canvas; + if (canvas) { + if (!canvas._hasITextHandlers) { + canvas._hasITextHandlers = true; + _this._initCanvasHandlers(canvas); } - }); - }, + canvas._iTextInstances = canvas._iTextInstances || []; + canvas._iTextInstances.push(_this); + } + }); + }, - initRemovedHandler: function() { - var _this = this; - this.on('removed', function (opt) { - // make sure we listen to the canvas removed event - var canvas = opt.target; - if (canvas) { - canvas._iTextInstances = canvas._iTextInstances || []; - fabric.util.removeFromArray(canvas._iTextInstances, _this); - if (canvas._iTextInstances.length === 0) { - canvas._hasITextHandlers = false; - _this._removeCanvasHandlers(canvas); - } + initRemovedHandler: function() { + var _this = this; + this.on('removed', function() { + var canvas = _this.canvas; + if (canvas) { + canvas._iTextInstances = canvas._iTextInstances || []; + fabric.util.removeFromArray(canvas._iTextInstances, _this); + if (canvas._iTextInstances.length === 0) { + canvas._hasITextHandlers = false; + _this._removeCanvasHandlers(canvas); } - }); - }, + } + }); + }, - /** - * register canvas event to manage exiting on other instances - * @private - */ - _initCanvasHandlers: function(canvas) { - canvas._mouseUpITextHandler = function() { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.__isMousedown = false; - }); - } - }; - canvas.on('mouse:up', canvas._mouseUpITextHandler); - }, + /** + * register canvas event to manage exiting on other instances + * @private + */ + _initCanvasHandlers: function(canvas) { + canvas._mouseUpITextHandler = function() { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.__isMousedown = false; + }); + } + }; + canvas.on('mouse:up', canvas._mouseUpITextHandler); + }, - /** - * remove canvas event to manage exiting on other instances - * @private - */ - _removeCanvasHandlers: function(canvas) { - canvas.off('mouse:up', canvas._mouseUpITextHandler); - }, + /** + * remove canvas event to manage exiting on other instances + * @private + */ + _removeCanvasHandlers: function(canvas) { + canvas.off('mouse:up', canvas._mouseUpITextHandler); + }, - /** - * @private - */ - _tick: function() { - this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); - }, + /** + * @private + */ + _tick: function() { + this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); + }, - /** - * @private - */ - _animateCursor: function(obj, targetOpacity, duration, completeMethod) { + /** + * @private + */ + _animateCursor: function(obj, targetOpacity, duration, completeMethod) { - var tickState; + var tickState; - tickState = { - isAborted: false, - abort: function() { - this.isAborted = true; - }, - }; + tickState = { + isAborted: false, + abort: function() { + this.isAborted = true; + }, + }; - obj.animate('_currentCursorOpacity', targetOpacity, { - duration: duration, - onComplete: function() { - if (!tickState.isAborted) { - obj[completeMethod](); - } - }, - onChange: function() { - // we do not want to animate a selection, only cursor - if (obj.canvas && obj.selectionStart === obj.selectionEnd) { - obj.renderCursorOrSelection(); - } - }, - abort: function() { - return tickState.isAborted; + obj.animate('_currentCursorOpacity', targetOpacity, { + duration: duration, + onComplete: function() { + if (!tickState.isAborted) { + obj[completeMethod](); } - }); - return tickState; - }, - - /** - * @private - */ - _onTickComplete: function() { - - var _this = this; - - if (this._cursorTimeout1) { - clearTimeout(this._cursorTimeout1); + }, + onChange: function() { + // we do not want to animate a selection, only cursor + if (obj.canvas && obj.selectionStart === obj.selectionEnd) { + obj.renderCursorOrSelection(); + } + }, + abort: function() { + return tickState.isAborted; } - this._cursorTimeout1 = setTimeout(function() { - _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); - }, 100); - }, - - /** - * Initializes delayed cursor - */ - initDelayedCursor: function(restart) { - var _this = this, - delay = restart ? 0 : this.cursorDelay; + }); + return tickState; + }, - this.abortCursorAnimation(); - this._currentCursorOpacity = 1; - if (delay) { - this._cursorTimeout2 = setTimeout(function () { - _this._tick(); - }, delay); - } - else { - this._tick(); - } - }, + /** + * @private + */ + _onTickComplete: function() { - /** - * Aborts cursor animation and clears all timeouts - */ - abortCursorAnimation: function() { - var shouldClear = this._currentTickState || this._currentTickCompleteState, - canvas = this.canvas; - this._currentTickState && this._currentTickState.abort(); - this._currentTickCompleteState && this._currentTickCompleteState.abort(); + var _this = this; + if (this._cursorTimeout1) { clearTimeout(this._cursorTimeout1); - clearTimeout(this._cursorTimeout2); - - this._currentCursorOpacity = 0; - // to clear just itext area we need to transform the context - // it may not be worth it - if (shouldClear && canvas) { - canvas.clearContext(canvas.contextTop || canvas.contextContainer); - } + } + this._cursorTimeout1 = setTimeout(function() { + _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); + }, 100); + }, - }, + /** + * Initializes delayed cursor + */ + initDelayedCursor: function(restart) { + var _this = this, + delay = restart ? 0 : this.cursorDelay; - /** - * Selects entire text - * @return {fabric.IText} thisArg - * @chainable - */ - selectAll: function() { - this.selectionStart = 0; - this.selectionEnd = this._text.length; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + this._cursorTimeout2 = setTimeout(function() { + _this._tick(); + }, delay); + }, - /** - * Returns selected text - * @return {String} - */ - getSelectedText: function() { - return this._text.slice(this.selectionStart, this.selectionEnd).join(''); - }, + /** + * Aborts cursor animation and clears all timeouts + */ + abortCursorAnimation: function() { + var shouldClear = this._currentTickState || this._currentTickCompleteState, + canvas = this.canvas; + this._currentTickState && this._currentTickState.abort(); + this._currentTickCompleteState && this._currentTickCompleteState.abort(); - /** - * Find new selection index representing start of current word according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findWordBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; - - // remove space before cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { - offset++; - index--; - } - } - while (/\S/.test(this._text[index]) && index > -1) { - offset++; - index--; - } + clearTimeout(this._cursorTimeout1); + clearTimeout(this._cursorTimeout2); - return startFrom - offset; - }, + this._currentCursorOpacity = 0; + // to clear just itext area we need to transform the context + // it may not be worth it + if (shouldClear && canvas) { + canvas.clearContext(canvas.contextTop || canvas.contextContainer); + } - /** - * Find new selection index representing end of current word according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findWordBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; - - // remove space after cursor first - if (this._reSpace.test(this._text[index])) { - while (this._reSpace.test(this._text[index])) { - offset++; - index++; - } - } - while (/\S/.test(this._text[index]) && index < this._text.length) { - offset++; - index++; - } + }, - return startFrom + offset; - }, + /** + * Selects entire text + * @return {fabric.IText} thisArg + * @chainable + */ + selectAll: function() { + this.selectionStart = 0; + this.selectionEnd = this._text.length; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** - * Find new selection index representing start of current line according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findLineBoundaryLeft: function(startFrom) { - var offset = 0, index = startFrom - 1; + /** + * Returns selected text + * @return {String} + */ + getSelectedText: function() { + return this._text.slice(this.selectionStart, this.selectionEnd).join(''); + }, + + /** + * Find new selection index representing start of current word according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findWordBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; - while (!/\n/.test(this._text[index]) && index > -1) { + // remove space before cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { offset++; index--; } + } + while (/\S/.test(this._text[index]) && index > -1) { + offset++; + index--; + } - return startFrom - offset; - }, + return startFrom - offset; + }, - /** - * Find new selection index representing end of current line according to current selection index - * @param {Number} startFrom Current selection index - * @return {Number} New selection index - */ - findLineBoundaryRight: function(startFrom) { - var offset = 0, index = startFrom; + /** + * Find new selection index representing end of current word according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findWordBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; - while (!/\n/.test(this._text[index]) && index < this._text.length) { + // remove space after cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { offset++; index++; } + } + while (/\S/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } - return startFrom + offset; - }, + return startFrom + offset; + }, - /** - * Finds index corresponding to beginning or end of a word - * @param {Number} selectionStart Index of a character - * @param {Number} direction 1 or -1 - * @return {Number} Index of the beginning or end of a word - */ - searchWordBoundary: function(selectionStart, direction) { - var text = this._text, - index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, - _char = text[index], - // wrong - reNonWord = fabric.reNonWord; + /** + * Find new selection index representing start of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; - while (!reNonWord.test(_char) && index > 0 && index < text.length) { - index += direction; - _char = text[index]; - } - if (reNonWord.test(_char)) { - index += direction === 1 ? 0 : 1; - } - return index; - }, + while (!/\n/.test(this._text[index]) && index > -1) { + offset++; + index--; + } - /** - * Selects a word based on the index - * @param {Number} selectionStart Index of a character - */ - selectWord: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ - newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ + return startFrom - offset; + }, - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - }, + /** + * Find new selection index representing end of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; - /** - * Selects a line based on the index - * @param {Number} selectionStart Index of a character - * @return {fabric.IText} thisArg - * @chainable - */ - selectLine: function(selectionStart) { - selectionStart = selectionStart || this.selectionStart; - var newSelectionStart = this.findLineBoundaryLeft(selectionStart), - newSelectionEnd = this.findLineBoundaryRight(selectionStart); + while (!/\n/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } - this.selectionStart = newSelectionStart; - this.selectionEnd = newSelectionEnd; - this._fireSelectionChanged(); - this._updateTextarea(); - return this; - }, + return startFrom + offset; + }, - /** - * Enters editing state - * @return {fabric.IText} thisArg - * @chainable - */ - enterEditing: function(e) { - if (this.isEditing || !this.editable) { - return; - } + /** + * Finds index corresponding to beginning or end of a word + * @param {Number} selectionStart Index of a character + * @param {Number} direction 1 or -1 + * @return {Number} Index of the beginning or end of a word + */ + searchWordBoundary: function(selectionStart, direction) { + var text = this._text, + index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, + _char = text[index], + // wrong + reNonWord = fabric.reNonWord; - if (this.canvas) { - this.canvas.calcOffset(); - this.exitEditingOnOthers(this.canvas); - } + while (!reNonWord.test(_char) && index > 0 && index < text.length) { + index += direction; + _char = text[index]; + } + if (reNonWord.test(_char)) { + index += direction === 1 ? 0 : 1; + } + return index; + }, - this.isEditing = true; + /** + * Selects a word based on the index + * @param {Number} selectionStart Index of a character + */ + selectWord: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ + newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ - this.initHiddenTextarea(e); - this.hiddenTextarea.focus(); - this.hiddenTextarea.value = this.text; - this._updateTextarea(); - this._saveEditingProps(); - this._setEditingProps(); - this._textBeforeEdit = this.text; + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + }, - this._tick(); - this.fire('editing:entered'); - this._fireSelectionChanged(); - if (!this.canvas) { - return this; - } - this.canvas.fire('text:editing:entered', { target: this }); - this.initMouseMoveHandler(); - this.canvas.requestRenderAll(); - return this; - }, + /** + * Selects a line based on the index + * @param {Number} selectionStart Index of a character + * @return {fabric.IText} thisArg + * @chainable + */ + selectLine: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.findLineBoundaryLeft(selectionStart), + newSelectionEnd = this.findLineBoundaryRight(selectionStart); - exitEditingOnOthers: function(canvas) { - if (canvas._iTextInstances) { - canvas._iTextInstances.forEach(function(obj) { - obj.selected = false; - if (obj.isEditing) { - obj.exitEditing(); - } - }); - } - }, + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - /** - * Initializes "mousemove" event handler - */ - initMouseMoveHandler: function() { - this.canvas.on('mouse:move', this.mouseMoveHandler); - }, + /** + * Enters editing state + * @return {fabric.IText} thisArg + * @chainable + */ + enterEditing: function(e) { + if (this.isEditing || !this.editable) { + return; + } - /** - * @private - */ - mouseMoveHandler: function(options) { - if (!this.__isMousedown || !this.isEditing) { - return; - } + if (this.canvas) { + this.canvas.calcOffset(); + this.exitEditingOnOthers(this.canvas); + } - var newSelectionStart = this.getSelectionStartFromPointer(options.e), - currentStart = this.selectionStart, - currentEnd = this.selectionEnd; - if ( - (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) - && - (currentStart === newSelectionStart || currentEnd === newSelectionStart) - ) { - return; - } - if (newSelectionStart > this.__selectionStartOnMouseDown) { - this.selectionStart = this.__selectionStartOnMouseDown; - this.selectionEnd = newSelectionStart; - } - else { - this.selectionStart = newSelectionStart; - this.selectionEnd = this.__selectionStartOnMouseDown; - } - if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { - this.restartCursorIfNeeded(); - this._fireSelectionChanged(); - this._updateTextarea(); - this.renderCursorOrSelection(); - } - }, + this.isEditing = true; - /** - * @private - */ - _setEditingProps: function() { - this.hoverCursor = 'text'; + this.initHiddenTextarea(e); + this.hiddenTextarea.focus(); + this.hiddenTextarea.value = this.text; + this._updateTextarea(); + this._saveEditingProps(); + this._setEditingProps(); + this._textBeforeEdit = this.text; - if (this.canvas) { - this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; - } + this._tick(); + this.fire('editing:entered'); + this._fireSelectionChanged(); + if (!this.canvas) { + return this; + } + this.canvas.fire('text:editing:entered', { target: this }); + this.initMouseMoveHandler(); + this.canvas.requestRenderAll(); + return this; + }, - this.borderColor = this.editingBorderColor; - this.hasControls = this.selectable = false; - this.lockMovementX = this.lockMovementY = true; - }, + exitEditingOnOthers: function(canvas) { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.selected = false; + if (obj.isEditing) { + obj.exitEditing(); + } + }); + } + }, - /** - * convert from textarea to grapheme indexes - */ - fromStringToGraphemeSelection: function(start, end, text) { - var smallerTextStart = text.slice(0, start), - graphemeStart = this.graphemeSplit(smallerTextStart).length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = text.slice(start, end), - graphemeEnd = this.graphemeSplit(smallerTextEnd).length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + /** + * Initializes "mousemove" event handler + */ + initMouseMoveHandler: function() { + this.canvas.on('mouse:move', this.mouseMoveHandler); + }, - /** - * convert from fabric to textarea values - */ - fromGraphemeToStringSelection: function(start, end, _text) { - var smallerTextStart = _text.slice(0, start), - graphemeStart = smallerTextStart.join('').length; - if (start === end) { - return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; - } - var smallerTextEnd = _text.slice(start, end), - graphemeEnd = smallerTextEnd.join('').length; - return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; - }, + /** + * @private + */ + mouseMoveHandler: function(options) { + if (!this.__isMousedown || !this.isEditing) { + return; + } - /** - * @private - */ - _updateTextarea: function() { - this.cursorOffsetCache = { }; - if (!this.hiddenTextarea) { - return; - } - if (!this.inCompositionMode) { - var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); - this.hiddenTextarea.selectionStart = newSelection.selectionStart; - this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; - } - this.updateTextareaPosition(); - }, + var newSelectionStart = this.getSelectionStartFromPointer(options.e), + currentStart = this.selectionStart, + currentEnd = this.selectionEnd; + if ( + (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) + && + (currentStart === newSelectionStart || currentEnd === newSelectionStart) + ) { + return; + } + if (newSelectionStart > this.__selectionStartOnMouseDown) { + this.selectionStart = this.__selectionStartOnMouseDown; + this.selectionEnd = newSelectionStart; + } + else { + this.selectionStart = newSelectionStart; + this.selectionEnd = this.__selectionStartOnMouseDown; + } + if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { + this.restartCursorIfNeeded(); + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + } + }, - /** - * @private - */ - updateFromTextArea: function() { - if (!this.hiddenTextarea) { - return; - } - this.cursorOffsetCache = { }; - this.text = this.hiddenTextarea.value; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - var newSelection = this.fromStringToGraphemeSelection( - this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); - this.selectionEnd = this.selectionStart = newSelection.selectionEnd; - if (!this.inCompositionMode) { - this.selectionStart = newSelection.selectionStart; - } - this.updateTextareaPosition(); - }, + /** + * @private + */ + _setEditingProps: function() { + this.hoverCursor = 'text'; - /** - * @private - */ - updateTextareaPosition: function() { - if (this.selectionStart === this.selectionEnd) { - var style = this._calcTextareaPosition(); - this.hiddenTextarea.style.left = style.left; - this.hiddenTextarea.style.top = style.top; - } - }, + if (this.canvas) { + this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; + } - /** - * @private - * @return {Object} style contains style for hiddenTextarea - */ - _calcTextareaPosition: function() { - if (!this.canvas) { - return { x: 1, y: 1 }; - } - var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, - boundaries = this._getCursorBoundaries(desiredPosition), - cursorLocation = this.get2DCursorLocation(desiredPosition), - lineIndex = cursorLocation.lineIndex, - charIndex = cursorLocation.charIndex, - charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, - leftOffset = boundaries.leftOffset, - m = this.calcTransformMatrix(), - p = { - x: boundaries.left + leftOffset, - y: boundaries.top + boundaries.topOffset + charHeight - }, - retinaScaling = this.canvas.getRetinaScaling(), - upperCanvas = this.canvas.upperCanvasEl, - upperCanvasWidth = upperCanvas.width / retinaScaling, - upperCanvasHeight = upperCanvas.height / retinaScaling, - maxWidth = upperCanvasWidth - charHeight, - maxHeight = upperCanvasHeight - charHeight, - scaleX = upperCanvas.clientWidth / upperCanvasWidth, - scaleY = upperCanvas.clientHeight / upperCanvasHeight; + this.borderColor = this.editingBorderColor; + this.hasControls = this.selectable = false; + this.lockMovementX = this.lockMovementY = true; + }, - p = fabric.util.transformPoint(p, m); - p = fabric.util.transformPoint(p, this.canvas.viewportTransform); - p.x *= scaleX; - p.y *= scaleY; - if (p.x < 0) { - p.x = 0; - } - if (p.x > maxWidth) { - p.x = maxWidth; - } - if (p.y < 0) { - p.y = 0; - } - if (p.y > maxHeight) { - p.y = maxHeight; - } + /** + * convert from textarea to grapheme indexes + */ + fromStringToGraphemeSelection: function(start, end, text) { + var smallerTextStart = text.slice(0, start), + graphemeStart = fabric.util.string.graphemeSplit(smallerTextStart).length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = text.slice(start, end), + graphemeEnd = fabric.util.string.graphemeSplit(smallerTextEnd).length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - // add canvas offset on document - p.x += this.canvas._offset.left; - p.y += this.canvas._offset.top; + /** + * convert from fabric to textarea values + */ + fromGraphemeToStringSelection: function(start, end, _text) { + var smallerTextStart = _text.slice(0, start), + graphemeStart = smallerTextStart.join('').length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = _text.slice(start, end), + graphemeEnd = smallerTextEnd.join('').length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, - return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; - }, + /** + * @private + */ + _updateTextarea: function() { + this.cursorOffsetCache = { }; + if (!this.hiddenTextarea) { + return; + } + if (!this.inCompositionMode) { + var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); + this.hiddenTextarea.selectionStart = newSelection.selectionStart; + this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; + } + this.updateTextareaPosition(); + }, - /** - * @private - */ - _saveEditingProps: function() { - this._savedProps = { - hasControls: this.hasControls, - borderColor: this.borderColor, - lockMovementX: this.lockMovementX, - lockMovementY: this.lockMovementY, - hoverCursor: this.hoverCursor, - selectable: this.selectable, - defaultCursor: this.canvas && this.canvas.defaultCursor, - moveCursor: this.canvas && this.canvas.moveCursor - }; - }, + /** + * @private + */ + updateFromTextArea: function() { + if (!this.hiddenTextarea) { + return; + } + this.cursorOffsetCache = { }; + this.text = this.hiddenTextarea.value; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + var newSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); + this.selectionEnd = this.selectionStart = newSelection.selectionEnd; + if (!this.inCompositionMode) { + this.selectionStart = newSelection.selectionStart; + } + this.updateTextareaPosition(); + }, - /** - * @private - */ - _restoreEditingProps: function() { - if (!this._savedProps) { - return; - } + /** + * @private + */ + updateTextareaPosition: function() { + if (this.selectionStart === this.selectionEnd) { + var style = this._calcTextareaPosition(); + this.hiddenTextarea.style.left = style.left; + this.hiddenTextarea.style.top = style.top; + } + }, - this.hoverCursor = this._savedProps.hoverCursor; - this.hasControls = this._savedProps.hasControls; - this.borderColor = this._savedProps.borderColor; - this.selectable = this._savedProps.selectable; - this.lockMovementX = this._savedProps.lockMovementX; - this.lockMovementY = this._savedProps.lockMovementY; + /** + * @private + * @return {Object} style contains style for hiddenTextarea + */ + _calcTextareaPosition: function() { + if (!this.canvas) { + return { x: 1, y: 1 }; + } + var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, + boundaries = this._getCursorBoundaries(desiredPosition), + cursorLocation = this.get2DCursorLocation(desiredPosition), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, + leftOffset = boundaries.leftOffset, + m = this.calcTransformMatrix(), + p = { + x: boundaries.left + leftOffset, + y: boundaries.top + boundaries.topOffset + charHeight + }, + retinaScaling = this.canvas.getRetinaScaling(), + upperCanvas = this.canvas.upperCanvasEl, + upperCanvasWidth = upperCanvas.width / retinaScaling, + upperCanvasHeight = upperCanvas.height / retinaScaling, + maxWidth = upperCanvasWidth - charHeight, + maxHeight = upperCanvasHeight - charHeight, + scaleX = upperCanvas.clientWidth / upperCanvasWidth, + scaleY = upperCanvas.clientHeight / upperCanvasHeight; - if (this.canvas) { - this.canvas.defaultCursor = this._savedProps.defaultCursor; - this.canvas.moveCursor = this._savedProps.moveCursor; - } + p = fabric.util.transformPoint(p, m); + p = fabric.util.transformPoint(p, this.canvas.viewportTransform); + p.x *= scaleX; + p.y *= scaleY; + if (p.x < 0) { + p.x = 0; + } + if (p.x > maxWidth) { + p.x = maxWidth; + } + if (p.y < 0) { + p.y = 0; + } + if (p.y > maxHeight) { + p.y = maxHeight; + } - delete this._savedProps; - }, + // add canvas offset on document + p.x += this.canvas._offset.left; + p.y += this.canvas._offset.top; - /** - * Exits from editing state - * @return {fabric.IText} thisArg - * @chainable - */ - exitEditing: function() { - var isTextChanged = (this._textBeforeEdit !== this.text); - var hiddenTextarea = this.hiddenTextarea; - this.selected = false; - this.isEditing = false; + return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; + }, - this.selectionEnd = this.selectionStart; + /** + * @private + */ + _saveEditingProps: function() { + this._savedProps = { + hasControls: this.hasControls, + borderColor: this.borderColor, + lockMovementX: this.lockMovementX, + lockMovementY: this.lockMovementY, + hoverCursor: this.hoverCursor, + selectable: this.selectable, + defaultCursor: this.canvas && this.canvas.defaultCursor, + moveCursor: this.canvas && this.canvas.moveCursor + }; + }, - if (hiddenTextarea) { - hiddenTextarea.blur && hiddenTextarea.blur(); - hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); - } - this.hiddenTextarea = null; - this.abortCursorAnimation(); - this._restoreEditingProps(); - this._currentCursorOpacity = 0; - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this.fire('editing:exited'); - isTextChanged && this.fire('modified'); - if (this.canvas) { - this.canvas.off('mouse:move', this.mouseMoveHandler); - this.canvas.fire('text:editing:exited', { target: this }); - isTextChanged && this.canvas.fire('object:modified', { target: this }); - } - return this; - }, + /** + * @private + */ + _restoreEditingProps: function() { + if (!this._savedProps) { + return; + } - /** - * @private - */ - _removeExtraneousStyles: function() { - for (var prop in this.styles) { - if (!this._textLines[prop]) { - delete this.styles[prop]; - } - } - }, + this.hoverCursor = this._savedProps.hoverCursor; + this.hasControls = this._savedProps.hasControls; + this.borderColor = this._savedProps.borderColor; + this.selectable = this._savedProps.selectable; + this.lockMovementX = this._savedProps.lockMovementX; + this.lockMovementY = this._savedProps.lockMovementY; - /** - * remove and reflow a style block from start to end. - * @param {Number} start linear start position for removal (included in removal) - * @param {Number} end linear end position for removal ( excluded from removal ) - */ - removeStyleFromTo: function(start, end) { - var cursorStart = this.get2DCursorLocation(start, true), - cursorEnd = this.get2DCursorLocation(end, true), - lineStart = cursorStart.lineIndex, - charStart = cursorStart.charIndex, - lineEnd = cursorEnd.lineIndex, - charEnd = cursorEnd.charIndex, - i, styleObj; - if (lineStart !== lineEnd) { - // step1 remove the trailing of lineStart - if (this.styles[lineStart]) { - for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { - delete this.styles[lineStart][i]; - } - } - // step2 move the trailing of lineEnd to lineStart if needed - if (this.styles[lineEnd]) { - for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { - styleObj = this.styles[lineEnd][i]; - if (styleObj) { - this.styles[lineStart] || (this.styles[lineStart] = { }); - this.styles[lineStart][charStart + i - charEnd] = styleObj; - } + if (this.canvas) { + this.canvas.defaultCursor = this._savedProps.defaultCursor; + this.canvas.moveCursor = this._savedProps.moveCursor; + } + }, + + /** + * Exits from editing state + * @return {fabric.IText} thisArg + * @chainable + */ + exitEditing: function() { + var isTextChanged = (this._textBeforeEdit !== this.text); + var hiddenTextarea = this.hiddenTextarea; + this.selected = false; + this.isEditing = false; + + this.selectionEnd = this.selectionStart; + + if (hiddenTextarea) { + hiddenTextarea.blur && hiddenTextarea.blur(); + hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); + } + this.hiddenTextarea = null; + this.abortCursorAnimation(); + this._restoreEditingProps(); + this._currentCursorOpacity = 0; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this.fire('editing:exited'); + isTextChanged && this.fire('modified'); + if (this.canvas) { + this.canvas.off('mouse:move', this.mouseMoveHandler); + this.canvas.fire('text:editing:exited', { target: this }); + isTextChanged && this.canvas.fire('object:modified', { target: this }); + } + return this; + }, + + /** + * @private + */ + _removeExtraneousStyles: function() { + for (var prop in this.styles) { + if (!this._textLines[prop]) { + delete this.styles[prop]; + } + } + }, + + /** + * remove and reflow a style block from start to end. + * @param {Number} start linear start position for removal (included in removal) + * @param {Number} end linear end position for removal ( excluded from removal ) + */ + removeStyleFromTo: function(start, end) { + var cursorStart = this.get2DCursorLocation(start, true), + cursorEnd = this.get2DCursorLocation(end, true), + lineStart = cursorStart.lineIndex, + charStart = cursorStart.charIndex, + lineEnd = cursorEnd.lineIndex, + charEnd = cursorEnd.charIndex, + i, styleObj; + if (lineStart !== lineEnd) { + // step1 remove the trailing of lineStart + if (this.styles[lineStart]) { + for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { + delete this.styles[lineStart][i]; + } + } + // step2 move the trailing of lineEnd to lineStart if needed + if (this.styles[lineEnd]) { + for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { + styleObj = this.styles[lineEnd][i]; + if (styleObj) { + this.styles[lineStart] || (this.styles[lineStart] = { }); + this.styles[lineStart][charStart + i - charEnd] = styleObj; } } - // step3 detects lines will be completely removed. - for (i = lineStart + 1; i <= lineEnd; i++) { - delete this.styles[i]; - } - // step4 shift remaining lines. - this.shiftLineStyles(lineEnd, lineStart - lineEnd); } - else { - // remove and shift left on the same line - if (this.styles[lineStart]) { - styleObj = this.styles[lineStart]; - var diff = charEnd - charStart, numericChar, _char; - for (i = charStart; i < charEnd; i++) { - delete styleObj[i]; - } - for (_char in this.styles[lineStart]) { - numericChar = parseInt(_char, 10); - if (numericChar >= charEnd) { - styleObj[numericChar - diff] = styleObj[_char]; - delete styleObj[_char]; - } + // step3 detects lines will be completely removed. + for (i = lineStart + 1; i <= lineEnd; i++) { + delete this.styles[i]; + } + // step4 shift remaining lines. + this.shiftLineStyles(lineEnd, lineStart - lineEnd); + } + else { + // remove and shift left on the same line + if (this.styles[lineStart]) { + styleObj = this.styles[lineStart]; + var diff = charEnd - charStart, numericChar, _char; + for (i = charStart; i < charEnd; i++) { + delete styleObj[i]; + } + for (_char in this.styles[lineStart]) { + numericChar = parseInt(_char, 10); + if (numericChar >= charEnd) { + styleObj[numericChar - diff] = styleObj[_char]; + delete styleObj[_char]; } } } - }, + } + }, - /** - * Shifts line styles up or down - * @param {Number} lineIndex Index of a line - * @param {Number} offset Can any number? - */ - shiftLineStyles: function(lineIndex, offset) { - // shift all line styles by offset upward or downward - // do not clone deep. we need new array, not new style objects - var clonedStyles = Object.assign({}, this.styles); - for (var line in this.styles) { - var numericLine = parseInt(line, 10); - if (numericLine > lineIndex) { - this.styles[numericLine + offset] = clonedStyles[numericLine]; - if (!clonedStyles[numericLine - offset]) { - delete this.styles[numericLine]; - } + /** + * Shifts line styles up or down + * @param {Number} lineIndex Index of a line + * @param {Number} offset Can any number? + */ + shiftLineStyles: function(lineIndex, offset) { + // shift all line styles by offset upward or downward + // do not clone deep. we need new array, not new style objects + var clonedStyles = clone(this.styles); + for (var line in this.styles) { + var numericLine = parseInt(line, 10); + if (numericLine > lineIndex) { + this.styles[numericLine + offset] = clonedStyles[numericLine]; + if (!clonedStyles[numericLine - offset]) { + delete this.styles[numericLine]; } } - }, + } + }, - restartCursorIfNeeded: function() { - if (!this._currentTickState || this._currentTickState.isAborted - || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted - ) { - this.initDelayedCursor(); - } - }, + restartCursorIfNeeded: function() { + if (!this._currentTickState || this._currentTickState.isAborted + || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted + ) { + this.initDelayedCursor(); + } + }, - /** - * Handle insertion of more consecutive style lines for when one or more - * newlines gets added to the text. Since current style needs to be shifted - * first we shift the current style of the number lines needed, then we add - * new lines from the last to the first. - * @param {Number} lineIndex Index of a line - * @param {Number} charIndex Index of a char - * @param {Number} qty number of lines to add - * @param {Array} copiedStyle Array of objects styles - */ - insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { - var currentCharStyle, - newLineStyles = {}, - somethingAdded = false, - isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; - - qty || (qty = 1); - this.shiftLineStyles(lineIndex, qty); - if (this.styles[lineIndex]) { - currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; - } - // we clone styles of all chars - // after cursor onto the current line - for (var index in this.styles[lineIndex]) { - var numIndex = parseInt(index, 10); - if (numIndex >= charIndex) { - somethingAdded = true; - newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; - // remove lines from the previous line since they're on a new line now - if (!(isEndOfLine && charIndex === 0)) { - delete this.styles[lineIndex][index]; - } - } - } - var styleCarriedOver = false; - if (somethingAdded && !isEndOfLine) { - // if is end of line, the extra style we copied - // is probably not something we want - this.styles[lineIndex + qty] = newLineStyles; - styleCarriedOver = true; - } - if (styleCarriedOver) { - // skip the last line of since we already prepared it. - qty--; - } - // for the all the lines or all the other lines - // we clone current char style onto the next (otherwise empty) line - while (qty > 0) { - if (copiedStyle && copiedStyle[qty - 1]) { - this.styles[lineIndex + qty] = { 0: Object.assign({}, copiedStyle[qty - 1]) }; - } - else if (currentCharStyle) { - this.styles[lineIndex + qty] = { 0: Object.assign({}, currentCharStyle) }; - } - else { - delete this.styles[lineIndex + qty]; - } - qty--; - } - this._forceClearCache = true; - }, + /** + * Handle insertion of more consecutive style lines for when one or more + * newlines gets added to the text. Since current style needs to be shifted + * first we shift the current style of the number lines needed, then we add + * new lines from the last to the first. + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} qty number of lines to add + * @param {Array} copiedStyle Array of objects styles + */ + insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { + var currentCharStyle, + newLineStyles = {}, + somethingAdded = false, + isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; - /** - * Inserts style object for a given line/char index - * @param {Number} lineIndex Index of a line - * @param {Number} charIndex Index of a char - * @param {Number} quantity number Style object to insert, if given - * @param {Array} copiedStyle array of style objects - */ - insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { - if (!this.styles) { - this.styles = {}; - } - var currentLineStyles = this.styles[lineIndex], - currentLineStylesCloned = currentLineStyles ? Object.assign({}, currentLineStyles) : {}; - - quantity || (quantity = 1); - // shift all char styles by quantity forward - // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 - for (var index in currentLineStylesCloned) { - var numericIndex = parseInt(index, 10); - if (numericIndex >= charIndex) { - currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; - // only delete the style if there was nothing moved there - if (!currentLineStylesCloned[numericIndex - quantity]) { - delete currentLineStyles[numericIndex]; - } + qty || (qty = 1); + this.shiftLineStyles(lineIndex, qty); + if (this.styles[lineIndex]) { + currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; + } + // we clone styles of all chars + // after cursor onto the current line + for (var index in this.styles[lineIndex]) { + var numIndex = parseInt(index, 10); + if (numIndex >= charIndex) { + somethingAdded = true; + newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; + // remove lines from the previous line since they're on a new line now + if (!(isEndOfLine && charIndex === 0)) { + delete this.styles[lineIndex][index]; } } - this._forceClearCache = true; - if (copiedStyle) { - while (quantity--) { - if (!Object.keys(copiedStyle[quantity]).length) { - continue; - } - if (!this.styles[lineIndex]) { - this.styles[lineIndex] = {}; - } - this.styles[lineIndex][charIndex + quantity] = Object.assign({}, copiedStyle[quantity]); - } - return; + } + var styleCarriedOver = false; + if (somethingAdded && !isEndOfLine) { + // if is end of line, the extra style we copied + // is probably not something we want + this.styles[lineIndex + qty] = newLineStyles; + styleCarriedOver = true; + } + if (styleCarriedOver) { + // skip the last line of since we already prepared it. + qty--; + } + // for the all the lines or all the other lines + // we clone current char style onto the next (otherwise empty) line + while (qty > 0) { + if (copiedStyle && copiedStyle[qty - 1]) { + this.styles[lineIndex + qty] = { 0: clone(copiedStyle[qty - 1]) }; } - if (!currentLineStyles) { - return; + else if (currentCharStyle) { + this.styles[lineIndex + qty] = { 0: clone(currentCharStyle) }; } - var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; - while (newStyle && quantity--) { - this.styles[lineIndex][charIndex + quantity] = Object.assign({}, newStyle); + else { + delete this.styles[lineIndex + qty]; } - }, + qty--; + } + this._forceClearCache = true; + }, - /** - * Inserts style object(s) - * @param {Array} insertedText Characters at the location where style is inserted - * @param {Number} start cursor index for inserting style - * @param {Array} [copiedStyle] array of style objects to insert. - */ - insertNewStyleBlock: function(insertedText, start, copiedStyle) { - var cursorLoc = this.get2DCursorLocation(start, true), - addedLines = [0], linesLength = 0; - // get an array of how many char per lines are being added. - for (var i = 0; i < insertedText.length; i++) { - if (insertedText[i] === '\n') { - linesLength++; - addedLines[linesLength] = 0; - } - else { - addedLines[linesLength]++; + /** + * Inserts style object for a given line/char index + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} quantity number Style object to insert, if given + * @param {Array} copiedStyle array of style objects + */ + insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { + if (!this.styles) { + this.styles = {}; + } + var currentLineStyles = this.styles[lineIndex], + currentLineStylesCloned = currentLineStyles ? clone(currentLineStyles) : {}; + + quantity || (quantity = 1); + // shift all char styles by quantity forward + // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 + for (var index in currentLineStylesCloned) { + var numericIndex = parseInt(index, 10); + if (numericIndex >= charIndex) { + currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; + // only delete the style if there was nothing moved there + if (!currentLineStylesCloned[numericIndex - quantity]) { + delete currentLineStyles[numericIndex]; } } - // for the first line copy the style from the current char position. - if (addedLines[0] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); - } - linesLength && this.insertNewlineStyleObject( - cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); - for (var i = 1; i < linesLength; i++) { - if (addedLines[i] > 0) { - this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); + } + this._forceClearCache = true; + if (copiedStyle) { + while (quantity--) { + if (!Object.keys(copiedStyle[quantity]).length) { + continue; } - else if (copiedStyle) { - // this test is required in order to close #6841 - // when a pasted buffer begins with a newline then - // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] - // may be undefined for some reason - if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { - this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; - } + if (!this.styles[lineIndex]) { + this.styles[lineIndex] = {}; } - copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); + this.styles[lineIndex][charIndex + quantity] = clone(copiedStyle[quantity]); + } + return; + } + if (!currentLineStyles) { + return; + } + var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; + while (newStyle && quantity--) { + this.styles[lineIndex][charIndex + quantity] = clone(newStyle); + } + }, + + /** + * Inserts style object(s) + * @param {Array} insertedText Characters at the location where style is inserted + * @param {Number} start cursor index for inserting style + * @param {Array} [copiedStyle] array of style objects to insert. + */ + insertNewStyleBlock: function(insertedText, start, copiedStyle) { + var cursorLoc = this.get2DCursorLocation(start, true), + addedLines = [0], linesLength = 0; + // get an array of how many char per lines are being added. + for (var i = 0; i < insertedText.length; i++) { + if (insertedText[i] === '\n') { + linesLength++; + addedLines[linesLength] = 0; + } + else { + addedLines[linesLength]++; } - // we use i outside the loop to get it like linesLength + } + // for the first line copy the style from the current char position. + if (addedLines[0] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); + } + linesLength && this.insertNewlineStyleObject( + cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); + for (var i = 1; i < linesLength; i++) { if (addedLines[i] > 0) { this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); } - }, - - /** - * Set the selectionStart and selectionEnd according to the new position of cursor - * mimic the key - mouse navigation when shift is pressed. - */ - setSelectionStartEndWithShift: function(start, end, newSelection) { - if (newSelection <= start) { - if (end === start) { - this._selectionDirection = 'left'; + else if (copiedStyle) { + // this test is required in order to close #6841 + // when a pasted buffer begins with a newline then + // this.styles[cursorLoc.lineIndex + i] and copiedStyle[0] + // may be undefined for some reason + if (this.styles[cursorLoc.lineIndex + i] && copiedStyle[0]) { + this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; } - else if (this._selectionDirection === 'right') { - this._selectionDirection = 'left'; - this.selectionEnd = start; - } - this.selectionStart = newSelection; } - else if (newSelection > start && newSelection < end) { - if (this._selectionDirection === 'right') { - this.selectionEnd = newSelection; - } - else { - this.selectionStart = newSelection; - } + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); + } + // we use i outside the loop to get it like linesLength + if (addedLines[i] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); + } + }, + + /** + * Set the selectionStart and selectionEnd according to the new position of cursor + * mimic the key - mouse navigation when shift is pressed. + */ + setSelectionStartEndWithShift: function(start, end, newSelection) { + if (newSelection <= start) { + if (end === start) { + this._selectionDirection = 'left'; } - else { - // newSelection is > selection start and end - if (end === start) { - this._selectionDirection = 'right'; - } - else if (this._selectionDirection === 'left') { - this._selectionDirection = 'right'; - this.selectionStart = end; - } - this.selectionEnd = newSelection; + else if (this._selectionDirection === 'right') { + this._selectionDirection = 'left'; + this.selectionEnd = start; } - }, - - setSelectionInBoundaries: function() { - var length = this.text.length; - if (this.selectionStart > length) { - this.selectionStart = length; + this.selectionStart = newSelection; + } + else if (newSelection > start && newSelection < end) { + if (this._selectionDirection === 'right') { + this.selectionEnd = newSelection; } - else if (this.selectionStart < 0) { - this.selectionStart = 0; + else { + this.selectionStart = newSelection; } - if (this.selectionEnd > length) { - this.selectionEnd = length; + } + else { + // newSelection is > selection start and end + if (end === start) { + this._selectionDirection = 'right'; } - else if (this.selectionEnd < 0) { - this.selectionEnd = 0; + else if (this._selectionDirection === 'left') { + this._selectionDirection = 'right'; + this.selectionStart = end; } + this.selectionEnd = newSelection; } - }); - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** - * Initializes "dbclick" event handler - */ - initDoubleClickSimulation: function() { - - // for double click - this.__lastClickTime = +new Date(); - - // for triple click - this.__lastLastClickTime = +new Date(); - - this.__lastPointer = { }; - - this.on('mousedown', this.onMouseDown); - }, + }, - /** - * Default event handler to simulate triple click - * @private - */ - onMouseDown: function(options) { - if (!this.canvas) { - return; - } - this.__newClickTime = +new Date(); - var newPointer = options.pointer; - if (this.isTripleClick(newPointer)) { - this.fire('tripleclick', options); - this._stopEvent(options.e); - } - this.__lastLastClickTime = this.__lastClickTime; - this.__lastClickTime = this.__newClickTime; - this.__lastPointer = newPointer; - this.__lastIsEditing = this.isEditing; - this.__lastSelected = this.selected; - }, + setSelectionInBoundaries: function() { + var length = this.text.length; + if (this.selectionStart > length) { + this.selectionStart = length; + } + else if (this.selectionStart < 0) { + this.selectionStart = 0; + } + if (this.selectionEnd > length) { + this.selectionEnd = length; + } + else if (this.selectionEnd < 0) { + this.selectionEnd = 0; + } + } + }); +})(); - isTripleClick: function(newPointer) { - return this.__newClickTime - this.__lastClickTime < 500 && - this.__lastClickTime - this.__lastLastClickTime < 500 && - this.__lastPointer.x === newPointer.x && - this.__lastPointer.y === newPointer.y; - }, - /** - * @private - */ - _stopEvent: function(e) { - e.preventDefault && e.preventDefault(); - e.stopPropagation && e.stopPropagation(); - }, +fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + /** + * Initializes "dbclick" event handler + */ + initDoubleClickSimulation: function() { - /** - * Initializes event handlers related to cursor or selection - */ - initCursorSelectionHandlers: function() { - this.initMousedownHandler(); - this.initMouseupHandler(); - this.initClicks(); - }, + // for double click + this.__lastClickTime = +new Date(); - /** - * Default handler for double click, select a word - */ - doubleClickHandler: function(options) { - if (!this.isEditing) { - return; - } - this.selectWord(this.getSelectionStartFromPointer(options.e)); - }, + // for triple click + this.__lastLastClickTime = +new Date(); - /** - * Default handler for triple click, select a line - */ - tripleClickHandler: function(options) { - if (!this.isEditing) { - return; - } - this.selectLine(this.getSelectionStartFromPointer(options.e)); - }, + this.__lastPointer = { }; - /** - * Initializes double and triple click event handlers - */ - initClicks: function() { - this.on('mousedblclick', this.doubleClickHandler); - this.on('tripleclick', this.tripleClickHandler); - }, + this.on('mousedown', this.onMouseDown); + }, - /** - * Default event handler for the basic functionalities needed on _mouseDown - * can be overridden to do something different. - * Scope of this implementation is: find the click position, set selectionStart - * find selectionEnd, initialize the drawing of either cursor or selection area - * initializing a mousedDown on a text area will cancel fabricjs knowledge of - * current compositionMode. It will be set to false. - */ - _mouseDownHandler: function(options) { - if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { - return; - } + /** + * Default event handler to simulate triple click + * @private + */ + onMouseDown: function(options) { + if (!this.canvas) { + return; + } + this.__newClickTime = +new Date(); + var newPointer = options.pointer; + if (this.isTripleClick(newPointer)) { + this.fire('tripleclick', options); + this._stopEvent(options.e); + } + this.__lastLastClickTime = this.__lastClickTime; + this.__lastClickTime = this.__newClickTime; + this.__lastPointer = newPointer; + this.__lastIsEditing = this.isEditing; + this.__lastSelected = this.selected; + }, + + isTripleClick: function(newPointer) { + return this.__newClickTime - this.__lastClickTime < 500 && + this.__lastClickTime - this.__lastLastClickTime < 500 && + this.__lastPointer.x === newPointer.x && + this.__lastPointer.y === newPointer.y; + }, - this.__isMousedown = true; + /** + * @private + */ + _stopEvent: function(e) { + e.preventDefault && e.preventDefault(); + e.stopPropagation && e.stopPropagation(); + }, - if (this.selected) { - this.inCompositionMode = false; - this.setCursorByClick(options.e); - } + /** + * Initializes event handlers related to cursor or selection + */ + initCursorSelectionHandlers: function() { + this.initMousedownHandler(); + this.initMouseupHandler(); + this.initClicks(); + }, - if (this.isEditing) { - this.__selectionStartOnMouseDown = this.selectionStart; - if (this.selectionStart === this.selectionEnd) { - this.abortCursorAnimation(); - } - this.renderCursorOrSelection(); - } - }, + /** + * Default handler for double click, select a word + */ + doubleClickHandler: function(options) { + if (!this.isEditing) { + return; + } + this.selectWord(this.getSelectionStartFromPointer(options.e)); + }, - /** - * Default event handler for the basic functionalities needed on mousedown:before - * can be overridden to do something different. - * Scope of this implementation is: verify the object is already selected when mousing down - */ - _mouseDownHandlerBefore: function(options) { - if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { - return; - } - // we want to avoid that an object that was selected and then becomes unselectable, - // may trigger editing mode in some way. - this.selected = this === this.canvas._activeObject; - }, + /** + * Default handler for triple click, select a line + */ + tripleClickHandler: function(options) { + if (!this.isEditing) { + return; + } + this.selectLine(this.getSelectionStartFromPointer(options.e)); + }, - /** - * Initializes "mousedown" event handler - */ - initMousedownHandler: function() { - this.on('mousedown', this._mouseDownHandler); - this.on('mousedown:before', this._mouseDownHandlerBefore); - }, + /** + * Initializes double and triple click event handlers + */ + initClicks: function() { + this.on('mousedblclick', this.doubleClickHandler); + this.on('tripleclick', this.tripleClickHandler); + }, - /** - * Initializes "mouseup" event handler - */ - initMouseupHandler: function() { - this.on('mouseup', this.mouseUpHandler); - }, + /** + * Default event handler for the basic functionalities needed on _mouseDown + * can be overridden to do something different. + * Scope of this implementation is: find the click position, set selectionStart + * find selectionEnd, initialize the drawing of either cursor or selection area + * initializing a mousedDown on a text area will cancel fabricjs knowledge of + * current compositionMode. It will be set to false. + */ + _mouseDownHandler: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; + } - /** - * standard handler for mouse up, overridable - * @private - */ - mouseUpHandler: function(options) { - this.__isMousedown = false; - if (!this.editable || - (this.group && !this.group.interactive) || - (options.transform && options.transform.actionPerformed) || - (options.e.button && options.e.button !== 1)) { - return; - } + this.__isMousedown = true; - if (this.canvas) { - var currentActive = this.canvas._activeObject; - if (currentActive && currentActive !== this) { - // avoid running this logic when there is an active object - // this because is possible with shift click and fast clicks, - // to rapidly deselect and reselect this object and trigger an enterEdit - return; - } - } + if (this.selected) { + this.inCompositionMode = false; + this.setCursorByClick(options.e); + } - if (this.__lastSelected && !this.__corner) { - this.selected = false; - this.__lastSelected = false; - this.enterEditing(options.e); - if (this.selectionStart === this.selectionEnd) { - this.initDelayedCursor(true); - } - else { - this.renderCursorOrSelection(); - } - } - else { - this.selected = true; - } - }, + if (this.isEditing) { + this.__selectionStartOnMouseDown = this.selectionStart; + if (this.selectionStart === this.selectionEnd) { + this.abortCursorAnimation(); + } + this.renderCursorOrSelection(); + } + }, - /** - * Changes cursor location in a text depending on passed pointer (x/y) object - * @param {Event} e Event object - */ - setCursorByClick: function(e) { - var newSelection = this.getSelectionStartFromPointer(e), - start = this.selectionStart, end = this.selectionEnd; - if (e.shiftKey) { - this.setSelectionStartEndWithShift(start, end, newSelection); - } - else { - this.selectionStart = newSelection; - this.selectionEnd = newSelection; - } - if (this.isEditing) { - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, + /** + * Default event handler for the basic functionalities needed on mousedown:before + * can be overridden to do something different. + * Scope of this implementation is: verify the object is already selected when mousing down + */ + _mouseDownHandlerBefore: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; + } + // we want to avoid that an object that was selected and then becomes unselectable, + // may trigger editing mode in some way. + this.selected = this === this.canvas._activeObject; + }, - /** - * Returns index of a character corresponding to where an object was clicked - * @param {Event} e Event object - * @return {Number} Index of a character - */ - getSelectionStartFromPointer: function(e) { - var mouseOffset = this.getLocalPointer(e), - prevWidth = 0, - width = 0, - height = 0, - charIndex = 0, - lineIndex = 0, - lineLeftOffset, - line; - for (var i = 0, len = this._textLines.length; i < len; i++) { - if (height <= mouseOffset.y) { - height += this.getHeightOfLine(i) * this.scaleY; - lineIndex = i; - if (i > 0) { - charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1); - } - } - else { - break; - } - } - lineLeftOffset = Math.abs(this._getLineLeftOffset(lineIndex)); - width = lineLeftOffset * this.scaleX; - line = this._textLines[lineIndex]; - // handling of RTL: in order to get things work correctly, - // we assume RTL writing is mirrored compared to LTR writing. - // so in position detection we mirror the X offset, and when is time - // of rendering it, we mirror it again. - if (this.direction === 'rtl') { - mouseOffset.x = this.width * this.scaleX - mouseOffset.x; - } - for (var j = 0, jlen = line.length; j < jlen; j++) { - prevWidth = width; - // i removed something about flipX here, check. - width += this.__charBounds[lineIndex][j].kernedWidth * this.scaleX; - if (width <= mouseOffset.x) { - charIndex++; - } - else { - break; - } - } - return this._getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, charIndex, jlen); - }, + /** + * Initializes "mousedown" event handler + */ + initMousedownHandler: function() { + this.on('mousedown', this._mouseDownHandler); + this.on('mousedown:before', this._mouseDownHandlerBefore); + }, - /** - * @private - */ - _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) { - // we need Math.abs because when width is after the last char, the offset is given as 1, while is 0 - var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth, - distanceBtwNextCharAndCursor = width - mouseOffset.x, - offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor || - distanceBtwNextCharAndCursor < 0 ? 0 : 1, - newSelectionStart = index + offset; - // if object is horizontally flipped, mirror cursor location from the end - if (this.flipX) { - newSelectionStart = jlen - newSelectionStart; - } + /** + * Initializes "mouseup" event handler + */ + initMouseupHandler: function() { + this.on('mouseup', this.mouseUpHandler); + }, - if (newSelectionStart > this._text.length) { - newSelectionStart = this._text.length; - } + /** + * standard handler for mouse up, overridable + * @private + */ + mouseUpHandler: function(options) { + this.__isMousedown = false; + if (!this.editable || this.group || + (options.transform && options.transform.actionPerformed) || + (options.e.button && options.e.button !== 1)) { + return; + } - return newSelectionStart; + if (this.canvas) { + var currentActive = this.canvas._activeObject; + if (currentActive && currentActive !== this) { + // avoid running this logic when there is an active object + // this because is possible with shift click and fast clicks, + // to rapidly deselect and reselect this object and trigger an enterEdit + return; } - }); - })(typeof exports !== 'undefined' ? exports : window); - - (function(global) { - var fabric = global.fabric; - fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - - /** - * Initializes hidden textarea (needed to bring up keyboard in iOS) - */ - initHiddenTextarea: function() { - this.hiddenTextarea = fabric.document.createElement('textarea'); - this.hiddenTextarea.setAttribute('autocapitalize', 'off'); - this.hiddenTextarea.setAttribute('autocorrect', 'off'); - this.hiddenTextarea.setAttribute('autocomplete', 'off'); - this.hiddenTextarea.setAttribute('spellcheck', 'false'); - this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); - this.hiddenTextarea.setAttribute('wrap', 'off'); - var style = this._calcTextareaPosition(); - // line-height: 1px; was removed from the style to fix this: - // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 - this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + - '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + - ' padding-top: ' + style.fontSize + ';'; + } - if (this.hiddenTextareaContainer) { - this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); - } - else { - fabric.document.body.appendChild(this.hiddenTextarea); - } + if (this.__lastSelected && !this.__corner) { + this.selected = false; + this.__lastSelected = false; + this.enterEditing(options.e); + if (this.selectionStart === this.selectionEnd) { + this.initDelayedCursor(true); + } + else { + this.renderCursorOrSelection(); + } + } + else { + this.selected = true; + } + }, - fabric.util.addListener(this.hiddenTextarea, 'blur', this.blur.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); - fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); + /** + * Changes cursor location in a text depending on passed pointer (x/y) object + * @param {Event} e Event object + */ + setCursorByClick: function(e) { + var newSelection = this.getSelectionStartFromPointer(e), + start = this.selectionStart, end = this.selectionEnd; + if (e.shiftKey) { + this.setSelectionStartEndWithShift(start, end, newSelection); + } + else { + this.selectionStart = newSelection; + this.selectionEnd = newSelection; + } + if (this.isEditing) { + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - if (!this._clickHandlerInitialized && this.canvas) { - fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this)); - this._clickHandlerInitialized = true; + /** + * Returns index of a character corresponding to where an object was clicked + * @param {Event} e Event object + * @return {Number} Index of a character + */ + getSelectionStartFromPointer: function(e) { + var mouseOffset = this.getLocalPointer(e), + prevWidth = 0, + width = 0, + height = 0, + charIndex = 0, + lineIndex = 0, + lineLeftOffset, + line; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (height <= mouseOffset.y) { + height += this.getHeightOfLine(i) * this.scaleY; + lineIndex = i; + if (i > 0) { + charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1); } - }, + } + else { + break; + } + } + lineLeftOffset = this._getLineLeftOffset(lineIndex); + width = lineLeftOffset * this.scaleX; + line = this._textLines[lineIndex]; + // handling of RTL: in order to get things work correctly, + // we assume RTL writing is mirrored compared to LTR writing. + // so in position detection we mirror the X offset, and when is time + // of rendering it, we mirror it again. + if (this.direction === 'rtl') { + mouseOffset.x = this.width * this.scaleX - mouseOffset.x + width; + } + for (var j = 0, jlen = line.length; j < jlen; j++) { + prevWidth = width; + // i removed something about flipX here, check. + width += this.__charBounds[lineIndex][j].kernedWidth * this.scaleX; + if (width <= mouseOffset.x) { + charIndex++; + } + else { + break; + } + } + return this._getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, charIndex, jlen); + }, - /** - * For functionalities on keyDown - * Map a special key to a function of the instance/prototype - * If you need different behaviour for ESC or TAB or arrows, you have to change - * this map setting the name of a function that you build on the fabric.Itext or - * your prototype. - * the map change will affect all Instances unless you need for only some text Instances - * in that case you have to clone this object and assign your Instance. - * this.keysMap = Object.assign({}, this.keysMap); - * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] - */ - keysMap: { - 9: 'exitEditing', - 27: 'exitEditing', - 33: 'moveCursorUp', - 34: 'moveCursorDown', - 35: 'moveCursorRight', - 36: 'moveCursorLeft', - 37: 'moveCursorLeft', - 38: 'moveCursorUp', - 39: 'moveCursorRight', - 40: 'moveCursorDown', - }, + /** + * @private + */ + _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) { + // we need Math.abs because when width is after the last char, the offset is given as 1, while is 0 + var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth, + distanceBtwNextCharAndCursor = width - mouseOffset.x, + offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor || + distanceBtwNextCharAndCursor < 0 ? 0 : 1, + newSelectionStart = index + offset; + // if object is horizontally flipped, mirror cursor location from the end + if (this.flipX) { + newSelectionStart = jlen - newSelectionStart; + } - keysMapRtl: { - 9: 'exitEditing', - 27: 'exitEditing', - 33: 'moveCursorUp', - 34: 'moveCursorDown', - 35: 'moveCursorLeft', - 36: 'moveCursorRight', - 37: 'moveCursorRight', - 38: 'moveCursorUp', - 39: 'moveCursorLeft', - 40: 'moveCursorDown', - }, + if (newSelectionStart > this._text.length) { + newSelectionStart = this._text.length; + } - /** - * For functionalities on keyUp + ctrl || cmd - */ - ctrlKeysMapUp: { - 67: 'copy', - 88: 'cut' - }, + return newSelectionStart; + } +}); - /** - * For functionalities on keyDown + ctrl || cmd - */ - ctrlKeysMapDown: { - 65: 'selectAll' - }, - onClick: function() { - // No need to trigger click event here, focus is enough to have the keyboard appear on Android - this.hiddenTextarea && this.hiddenTextarea.focus(); - }, +fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { - /** - * Override this method to customize cursor behavior on textbox blur - */ - blur: function () { - this.abortCursorAnimation(); - }, + /** + * Initializes hidden textarea (needed to bring up keyboard in iOS) + */ + initHiddenTextarea: function() { + this.hiddenTextarea = fabric.document.createElement('textarea'); + this.hiddenTextarea.setAttribute('autocapitalize', 'off'); + this.hiddenTextarea.setAttribute('autocorrect', 'off'); + this.hiddenTextarea.setAttribute('autocomplete', 'off'); + this.hiddenTextarea.setAttribute('spellcheck', 'false'); + this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); + this.hiddenTextarea.setAttribute('wrap', 'off'); + var style = this._calcTextareaPosition(); + // line-height: 1px; was removed from the style to fix this: + // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 + this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + + '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + + ' paddingï½°top: ' + style.fontSize + ';'; + + if (this.hiddenTextareaContainer) { + this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); + } + else { + fabric.document.body.appendChild(this.hiddenTextarea); + } - /** - * Handles keydown event - * only used for arrows and combination of modifier keys. - * @param {Event} e Event object - */ - onKeyDown: function(e) { - if (!this.isEditing) { - return; - } - var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap; - if (e.keyCode in keyMap) { - this[keyMap[e.keyCode]](e); - } - else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) { - this[this.ctrlKeysMapDown[e.keyCode]](e); - } - else { - return; - } - e.stopImmediatePropagation(); - e.preventDefault(); - if (e.keyCode >= 33 && e.keyCode <= 40) { - // if i press an arrow key just update selection - this.inCompositionMode = false; - this.clearContextTop(); - this.renderCursorOrSelection(); - } - else { - this.canvas && this.canvas.requestRenderAll(); - } - }, + fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); + + if (!this._clickHandlerInitialized && this.canvas) { + fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this)); + this._clickHandlerInitialized = true; + } + }, - /** - * Handles keyup event - * We handle KeyUp because ie11 and edge have difficulties copy/pasting - * if a copy/cut event fired, keyup is dismissed - * @param {Event} e Event object - */ - onKeyUp: function(e) { - if (!this.isEditing || this._copyDone || this.inCompositionMode) { - this._copyDone = false; - return; - } - if ((e.keyCode in this.ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) { - this[this.ctrlKeysMapUp[e.keyCode]](e); - } - else { - return; - } - e.stopImmediatePropagation(); - e.preventDefault(); - this.canvas && this.canvas.requestRenderAll(); - }, + /** + * For functionalities on keyDown + * Map a special key to a function of the instance/prototype + * If you need different behaviour for ESC or TAB or arrows, you have to change + * this map setting the name of a function that you build on the fabric.Itext or + * your prototype. + * the map change will affect all Instances unless you need for only some text Instances + * in that case you have to clone this object and assign your Instance. + * this.keysMap = fabric.util.object.clone(this.keysMap); + * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] + */ + keysMap: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorRight', + 36: 'moveCursorLeft', + 37: 'moveCursorLeft', + 38: 'moveCursorUp', + 39: 'moveCursorRight', + 40: 'moveCursorDown', + }, + + keysMapRtl: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorLeft', + 36: 'moveCursorRight', + 37: 'moveCursorRight', + 38: 'moveCursorUp', + 39: 'moveCursorLeft', + 40: 'moveCursorDown', + }, - /** - * Handles onInput event - * @param {Event} e Event object - */ - onInput: function(e) { - var fromPaste = this.fromPaste; - this.fromPaste = false; - e && e.stopPropagation(); - if (!this.isEditing) { - return; - } - // decisions about style changes. - var nextText = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, - charCount = this._text.length, - nextCharCount = nextText.length, - removedText, insertedText, - charDiff = nextCharCount - charCount, - selectionStart = this.selectionStart, selectionEnd = this.selectionEnd, - selection = selectionStart !== selectionEnd, - copiedStyle, removeFrom, removeTo; - if (this.hiddenTextarea.value === '') { - this.styles = { }; - this.updateFromTextArea(); - this.fire('changed'); - if (this.canvas) { - this.canvas.fire('text:changed', { target: this }); - this.canvas.requestRenderAll(); - } - return; - } + /** + * For functionalities on keyUp + ctrl || cmd + */ + ctrlKeysMapUp: { + 67: 'copy', + 88: 'cut' + }, - var textareaSelection = this.fromStringToGraphemeSelection( - this.hiddenTextarea.selectionStart, - this.hiddenTextarea.selectionEnd, - this.hiddenTextarea.value - ); - var backDelete = selectionStart > textareaSelection.selectionStart; + /** + * For functionalities on keyDown + ctrl || cmd + */ + ctrlKeysMapDown: { + 65: 'selectAll' + }, - if (selection) { - removedText = this._text.slice(selectionStart, selectionEnd); - charDiff += selectionEnd - selectionStart; - } - else if (nextCharCount < charCount) { - if (backDelete) { - removedText = this._text.slice(selectionEnd + charDiff, selectionEnd); - } - else { - removedText = this._text.slice(selectionStart, selectionStart - charDiff); - } - } - insertedText = nextText.slice(textareaSelection.selectionEnd - charDiff, textareaSelection.selectionEnd); - if (removedText && removedText.length) { - if (insertedText.length) { - // let's copy some style before deleting. - // we want to copy the style before the cursor OR the style at the cursor if selection - // is bigger than 0. - copiedStyle = this.getSelectionStyles(selectionStart, selectionStart + 1, false); - // now duplicate the style one for each inserted text. - copiedStyle = insertedText.map(function() { - // this return an array of references, but that is fine since we are - // copying the style later. - return copiedStyle[0]; - }); - } - if (selection) { - removeFrom = selectionStart; - removeTo = selectionEnd; - } - else if (backDelete) { - // detect differences between forwardDelete and backDelete - removeFrom = selectionEnd - removedText.length; - removeTo = selectionEnd; - } - else { - removeFrom = selectionEnd; - removeTo = selectionEnd + removedText.length; - } - this.removeStyleFromTo(removeFrom, removeTo); - } - if (insertedText.length) { - if (fromPaste && insertedText.join('') === fabric.copiedText && !fabric.disableStyleCopyPaste) { - copiedStyle = fabric.copiedTextStyle; - } - this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle); - } - this.updateFromTextArea(); - this.fire('changed'); - if (this.canvas) { - this.canvas.fire('text:changed', { target: this }); - this.canvas.requestRenderAll(); - } - }, - /** - * Composition start - */ - onCompositionStart: function() { - this.inCompositionMode = true; - }, + onClick: function() { + // No need to trigger click event here, focus is enough to have the keyboard appear on Android + this.hiddenTextarea && this.hiddenTextarea.focus(); + }, - /** - * Composition end - */ - onCompositionEnd: function() { - this.inCompositionMode = false; - }, + /** + * Handles keydown event + * only used for arrows and combination of modifier keys. + * @param {Event} e Event object + */ + onKeyDown: function(e) { + if (!this.isEditing) { + return; + } + var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap; + if (e.keyCode in keyMap) { + this[keyMap[e.keyCode]](e); + } + else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapDown[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); + if (e.keyCode >= 33 && e.keyCode <= 40) { + // if i press an arrow key just update selection + this.inCompositionMode = false; + this.clearContextTop(); + this.renderCursorOrSelection(); + } + else { + this.canvas && this.canvas.requestRenderAll(); + } + }, - // /** - // * Composition update - // */ - onCompositionUpdate: function(e) { - this.compositionStart = e.target.selectionStart; - this.compositionEnd = e.target.selectionEnd; - this.updateTextareaPosition(); - }, + /** + * Handles keyup event + * We handle KeyUp because ie11 and edge have difficulties copy/pasting + * if a copy/cut event fired, keyup is dismissed + * @param {Event} e Event object + */ + onKeyUp: function(e) { + if (!this.isEditing || this._copyDone || this.inCompositionMode) { + this._copyDone = false; + return; + } + if ((e.keyCode in this.ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapUp[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); + this.canvas && this.canvas.requestRenderAll(); + }, - /** - * Copies selected text - * @param {Event} e Event object - */ - copy: function() { - if (this.selectionStart === this.selectionEnd) { - //do not cut-copy if no selection - return; - } + /** + * Handles onInput event + * @param {Event} e Event object + */ + onInput: function(e) { + var fromPaste = this.fromPaste; + this.fromPaste = false; + e && e.stopPropagation(); + if (!this.isEditing) { + return; + } + // decisions about style changes. + var nextText = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, + charCount = this._text.length, + nextCharCount = nextText.length, + removedText, insertedText, + charDiff = nextCharCount - charCount, + selectionStart = this.selectionStart, selectionEnd = this.selectionEnd, + selection = selectionStart !== selectionEnd, + copiedStyle, removeFrom, removeTo; + if (this.hiddenTextarea.value === '') { + this.styles = { }; + this.updateFromTextArea(); + this.fire('changed'); + if (this.canvas) { + this.canvas.fire('text:changed', { target: this }); + this.canvas.requestRenderAll(); + } + return; + } - fabric.copiedText = this.getSelectedText(); - if (!fabric.disableStyleCopyPaste) { - fabric.copiedTextStyle = this.getSelectionStyles(this.selectionStart, this.selectionEnd, true); - } - else { - fabric.copiedTextStyle = null; - } - this._copyDone = true; - }, + var textareaSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, + this.hiddenTextarea.selectionEnd, + this.hiddenTextarea.value + ); + var backDelete = selectionStart > textareaSelection.selectionStart; - /** - * Pastes text - * @param {Event} e Event object - */ - paste: function() { - this.fromPaste = true; - }, + if (selection) { + removedText = this._text.slice(selectionStart, selectionEnd); + charDiff += selectionEnd - selectionStart; + } + else if (nextCharCount < charCount) { + if (backDelete) { + removedText = this._text.slice(selectionEnd + charDiff, selectionEnd); + } + else { + removedText = this._text.slice(selectionStart, selectionStart - charDiff); + } + } + insertedText = nextText.slice(textareaSelection.selectionEnd - charDiff, textareaSelection.selectionEnd); + if (removedText && removedText.length) { + if (insertedText.length) { + // let's copy some style before deleting. + // we want to copy the style before the cursor OR the style at the cursor if selection + // is bigger than 0. + copiedStyle = this.getSelectionStyles(selectionStart, selectionStart + 1, false); + // now duplicate the style one for each inserted text. + copiedStyle = insertedText.map(function() { + // this return an array of references, but that is fine since we are + // copying the style later. + return copiedStyle[0]; + }); + } + if (selection) { + removeFrom = selectionStart; + removeTo = selectionEnd; + } + else if (backDelete) { + // detect differences between forwardDelete and backDelete + removeFrom = selectionEnd - removedText.length; + removeTo = selectionEnd; + } + else { + removeFrom = selectionEnd; + removeTo = selectionEnd + removedText.length; + } + this.removeStyleFromTo(removeFrom, removeTo); + } + if (insertedText.length) { + if (fromPaste && insertedText.join('') === fabric.copiedText && !fabric.disableStyleCopyPaste) { + copiedStyle = fabric.copiedTextStyle; + } + this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle); + } + this.updateFromTextArea(); + this.fire('changed'); + if (this.canvas) { + this.canvas.fire('text:changed', { target: this }); + this.canvas.requestRenderAll(); + } + }, + /** + * Composition start + */ + onCompositionStart: function() { + this.inCompositionMode = true; + }, - /** - * @private - * @param {Event} e Event object - * @return {Object} Clipboard data object - */ - _getClipboardData: function(e) { - return (e && e.clipboardData) || fabric.window.clipboardData; - }, + /** + * Composition end + */ + onCompositionEnd: function() { + this.inCompositionMode = false; + }, + + // /** + // * Composition update + // */ + onCompositionUpdate: function(e) { + this.compositionStart = e.target.selectionStart; + this.compositionEnd = e.target.selectionEnd; + this.updateTextareaPosition(); + }, - /** - * Finds the width in pixels before the cursor on the same line - * @private - * @param {Number} lineIndex - * @param {Number} charIndex - * @return {Number} widthBeforeCursor width before cursor - */ - _getWidthBeforeCursor: function(lineIndex, charIndex) { - var widthBeforeCursor = this._getLineLeftOffset(lineIndex), bound; + /** + * Copies selected text + * @param {Event} e Event object + */ + copy: function() { + if (this.selectionStart === this.selectionEnd) { + //do not cut-copy if no selection + return; + } - if (charIndex > 0) { - bound = this.__charBounds[lineIndex][charIndex - 1]; - widthBeforeCursor += bound.left + bound.width; - } - return widthBeforeCursor; - }, + fabric.copiedText = this.getSelectedText(); + if (!fabric.disableStyleCopyPaste) { + fabric.copiedTextStyle = this.getSelectionStyles(this.selectionStart, this.selectionEnd, true); + } + else { + fabric.copiedTextStyle = null; + } + this._copyDone = true; + }, - /** - * Gets start offset of a selection - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - getDownCursorOffset: function(e, isRight) { - var selectionProp = this._getSelectionForOffset(e, isRight), - cursorLocation = this.get2DCursorLocation(selectionProp), - lineIndex = cursorLocation.lineIndex; - // if on last line, down cursor goes to end of line - if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) { - // move to the end of a text - return this._text.length - selectionProp; - } - var charIndex = cursorLocation.charIndex, - widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), - indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor), - textAfterCursor = this._textLines[lineIndex].slice(charIndex); - return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex); - }, + /** + * Pastes text + * @param {Event} e Event object + */ + paste: function() { + this.fromPaste = true; + }, - /** - * private - * Helps finding if the offset should be counted from Start or End - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - _getSelectionForOffset: function(e, isRight) { - if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) { - return this.selectionEnd; - } - else { - return this.selectionStart; - } - }, + /** + * @private + * @param {Event} e Event object + * @return {Object} Clipboard data object + */ + _getClipboardData: function(e) { + return (e && e.clipboardData) || fabric.window.clipboardData; + }, - /** - * @param {Event} e Event object - * @param {Boolean} isRight - * @return {Number} - */ - getUpCursorOffset: function(e, isRight) { - var selectionProp = this._getSelectionForOffset(e, isRight), - cursorLocation = this.get2DCursorLocation(selectionProp), - lineIndex = cursorLocation.lineIndex; - if (lineIndex === 0 || e.metaKey || e.keyCode === 33) { - // if on first line, up cursor goes to start of line - return -selectionProp; - } - var charIndex = cursorLocation.charIndex, - widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), - indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor), - textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex), - missingNewlineOffset = this.missingNewlineOffset(lineIndex - 1); - // return a negative offset - return -this._textLines[lineIndex - 1].length - + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset); - }, + /** + * Finds the width in pixels before the cursor on the same line + * @private + * @param {Number} lineIndex + * @param {Number} charIndex + * @return {Number} widthBeforeCursor width before cursor + */ + _getWidthBeforeCursor: function(lineIndex, charIndex) { + var widthBeforeCursor = this._getLineLeftOffset(lineIndex), bound; - /** - * for a given width it founds the matching character. - * @private - */ - _getIndexOnLine: function(lineIndex, width) { + if (charIndex > 0) { + bound = this.__charBounds[lineIndex][charIndex - 1]; + widthBeforeCursor += bound.left + bound.width; + } + return widthBeforeCursor; + }, - var line = this._textLines[lineIndex], - lineLeftOffset = this._getLineLeftOffset(lineIndex), - widthOfCharsOnLine = lineLeftOffset, - indexOnLine = 0, charWidth, foundMatch; + /** + * Gets start offset of a selection + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getDownCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + // if on last line, down cursor goes to end of line + if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) { + // move to the end of a text + return this._text.length - selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor), + textAfterCursor = this._textLines[lineIndex].slice(charIndex); + return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex); + }, - for (var j = 0, jlen = line.length; j < jlen; j++) { - charWidth = this.__charBounds[lineIndex][j].width; - widthOfCharsOnLine += charWidth; - if (widthOfCharsOnLine > width) { - foundMatch = true; - var leftEdge = widthOfCharsOnLine - charWidth, - rightEdge = widthOfCharsOnLine, - offsetFromLeftEdge = Math.abs(leftEdge - width), - offsetFromRightEdge = Math.abs(rightEdge - width); - - indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1); - break; - } - } + /** + * private + * Helps finding if the offset should be counted from Start or End + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + _getSelectionForOffset: function(e, isRight) { + if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) { + return this.selectionEnd; + } + else { + return this.selectionStart; + } + }, - // reached end - if (!foundMatch) { - indexOnLine = line.length - 1; - } + /** + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getUpCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + if (lineIndex === 0 || e.metaKey || e.keyCode === 33) { + // if on first line, up cursor goes to start of line + return -selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor), + textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex), + missingNewlineOffset = this.missingNewlineOffset(lineIndex - 1); + // return a negative offset + return -this._textLines[lineIndex - 1].length + + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset); + }, - return indexOnLine; - }, + /** + * for a given width it founds the matching character. + * @private + */ + _getIndexOnLine: function(lineIndex, width) { + + var line = this._textLines[lineIndex], + lineLeftOffset = this._getLineLeftOffset(lineIndex), + widthOfCharsOnLine = lineLeftOffset, + indexOnLine = 0, charWidth, foundMatch; + + for (var j = 0, jlen = line.length; j < jlen; j++) { + charWidth = this.__charBounds[lineIndex][j].width; + widthOfCharsOnLine += charWidth; + if (widthOfCharsOnLine > width) { + foundMatch = true; + var leftEdge = widthOfCharsOnLine - charWidth, + rightEdge = widthOfCharsOnLine, + offsetFromLeftEdge = Math.abs(leftEdge - width), + offsetFromRightEdge = Math.abs(rightEdge - width); + + indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1); + break; + } + } + // reached end + if (!foundMatch) { + indexOnLine = line.length - 1; + } - /** - * Moves cursor down - * @param {Event} e Event object - */ - moveCursorDown: function(e) { - if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { - return; - } - this._moveCursorUpOrDown('Down', e); - }, + return indexOnLine; + }, - /** - * Moves cursor up - * @param {Event} e Event object - */ - moveCursorUp: function(e) { - if (this.selectionStart === 0 && this.selectionEnd === 0) { - return; - } - this._moveCursorUpOrDown('Up', e); - }, - /** - * Moves cursor up or down, fires the events - * @param {String} direction 'Up' or 'Down' - * @param {Event} e Event object - */ - _moveCursorUpOrDown: function(direction, e) { - // getUpCursorOffset - // getDownCursorOffset - var action = 'get' + direction + 'CursorOffset', - offset = this[action](e, this._selectionDirection === 'right'); - if (e.shiftKey) { - this.moveCursorWithShift(offset); - } - else { - this.moveCursorWithoutShift(offset); - } - if (offset !== 0) { - this.setSelectionInBoundaries(); - this.abortCursorAnimation(); - this._currentCursorOpacity = 1; - this.initDelayedCursor(); - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, + /** + * Moves cursor down + * @param {Event} e Event object + */ + moveCursorDown: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; + } + this._moveCursorUpOrDown('Down', e); + }, - /** - * Moves cursor with shift - * @param {Number} offset - */ - moveCursorWithShift: function(offset) { - var newSelection = this._selectionDirection === 'left' - ? this.selectionStart + offset - : this.selectionEnd + offset; - this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection); - return offset !== 0; - }, + /** + * Moves cursor up + * @param {Event} e Event object + */ + moveCursorUp: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; + } + this._moveCursorUpOrDown('Up', e); + }, - /** - * Moves cursor up without shift - * @param {Number} offset - */ - moveCursorWithoutShift: function(offset) { - if (offset < 0) { - this.selectionStart += offset; - this.selectionEnd = this.selectionStart; - } - else { - this.selectionEnd += offset; - this.selectionStart = this.selectionEnd; - } - return offset !== 0; - }, + /** + * Moves cursor up or down, fires the events + * @param {String} direction 'Up' or 'Down' + * @param {Event} e Event object + */ + _moveCursorUpOrDown: function(direction, e) { + // getUpCursorOffset + // getDownCursorOffset + var action = 'get' + direction + 'CursorOffset', + offset = this[action](e, this._selectionDirection === 'right'); + if (e.shiftKey) { + this.moveCursorWithShift(offset); + } + else { + this.moveCursorWithoutShift(offset); + } + if (offset !== 0) { + this.setSelectionInBoundaries(); + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - /** - * Moves cursor left - * @param {Event} e Event object - */ - moveCursorLeft: function(e) { - if (this.selectionStart === 0 && this.selectionEnd === 0) { - return; - } - this._moveCursorLeftOrRight('Left', e); - }, + /** + * Moves cursor with shift + * @param {Number} offset + */ + moveCursorWithShift: function(offset) { + var newSelection = this._selectionDirection === 'left' + ? this.selectionStart + offset + : this.selectionEnd + offset; + this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection); + return offset !== 0; + }, - /** - * @private - * @return {Boolean} true if a change happened - */ - _move: function(e, prop, direction) { - var newValue; - if (e.altKey) { - newValue = this['findWordBoundary' + direction](this[prop]); - } - else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) { - newValue = this['findLineBoundary' + direction](this[prop]); - } - else { - this[prop] += direction === 'Left' ? -1 : 1; - return true; - } - if (typeof newValue !== undefined && this[prop] !== newValue) { - this[prop] = newValue; - return true; - } - }, + /** + * Moves cursor up without shift + * @param {Number} offset + */ + moveCursorWithoutShift: function(offset) { + if (offset < 0) { + this.selectionStart += offset; + this.selectionEnd = this.selectionStart; + } + else { + this.selectionEnd += offset; + this.selectionStart = this.selectionEnd; + } + return offset !== 0; + }, - /** - * @private - */ - _moveLeft: function(e, prop) { - return this._move(e, prop, 'Left'); - }, + /** + * Moves cursor left + * @param {Event} e Event object + */ + moveCursorLeft: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; + } + this._moveCursorLeftOrRight('Left', e); + }, - /** - * @private - */ - _moveRight: function(e, prop) { - return this._move(e, prop, 'Right'); - }, + /** + * @private + * @return {Boolean} true if a change happened + */ + _move: function(e, prop, direction) { + var newValue; + if (e.altKey) { + newValue = this['findWordBoundary' + direction](this[prop]); + } + else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) { + newValue = this['findLineBoundary' + direction](this[prop]); + } + else { + this[prop] += direction === 'Left' ? -1 : 1; + return true; + } + if (typeof newValue !== undefined && this[prop] !== newValue) { + this[prop] = newValue; + return true; + } + }, - /** - * Moves cursor left without keeping selection - * @param {Event} e - */ - moveCursorLeftWithoutShift: function(e) { - var change = true; - this._selectionDirection = 'left'; + /** + * @private + */ + _moveLeft: function(e, prop) { + return this._move(e, prop, 'Left'); + }, - // only move cursor when there is no selection, - // otherwise we discard it, and leave cursor on same place - if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) { - change = this._moveLeft(e, 'selectionStart'); + /** + * @private + */ + _moveRight: function(e, prop) { + return this._move(e, prop, 'Right'); + }, - } - this.selectionEnd = this.selectionStart; - return change; - }, + /** + * Moves cursor left without keeping selection + * @param {Event} e + */ + moveCursorLeftWithoutShift: function(e) { + var change = true; + this._selectionDirection = 'left'; - /** - * Moves cursor left while keeping selection - * @param {Event} e - */ - moveCursorLeftWithShift: function(e) { - if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) { - return this._moveLeft(e, 'selectionEnd'); - } - else if (this.selectionStart !== 0){ - this._selectionDirection = 'left'; - return this._moveLeft(e, 'selectionStart'); - } - }, + // only move cursor when there is no selection, + // otherwise we discard it, and leave cursor on same place + if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) { + change = this._moveLeft(e, 'selectionStart'); - /** - * Moves cursor right - * @param {Event} e Event object - */ - moveCursorRight: function(e) { - if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { - return; - } - this._moveCursorLeftOrRight('Right', e); - }, + } + this.selectionEnd = this.selectionStart; + return change; + }, - /** - * Moves cursor right or Left, fires event - * @param {String} direction 'Left', 'Right' - * @param {Event} e Event object - */ - _moveCursorLeftOrRight: function(direction, e) { - var actionName = 'moveCursor' + direction + 'With'; - this._currentCursorOpacity = 1; + /** + * Moves cursor left while keeping selection + * @param {Event} e + */ + moveCursorLeftWithShift: function(e) { + if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) { + return this._moveLeft(e, 'selectionEnd'); + } + else if (this.selectionStart !== 0){ + this._selectionDirection = 'left'; + return this._moveLeft(e, 'selectionStart'); + } + }, - if (e.shiftKey) { - actionName += 'Shift'; - } - else { - actionName += 'outShift'; - } - if (this[actionName](e)) { - this.abortCursorAnimation(); - this.initDelayedCursor(); - this._fireSelectionChanged(); - this._updateTextarea(); - } - }, + /** + * Moves cursor right + * @param {Event} e Event object + */ + moveCursorRight: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; + } + this._moveCursorLeftOrRight('Right', e); + }, - /** - * Moves cursor right while keeping selection - * @param {Event} e - */ - moveCursorRightWithShift: function(e) { - if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) { - return this._moveRight(e, 'selectionStart'); - } - else if (this.selectionEnd !== this._text.length) { - this._selectionDirection = 'right'; - return this._moveRight(e, 'selectionEnd'); - } - }, + /** + * Moves cursor right or Left, fires event + * @param {String} direction 'Left', 'Right' + * @param {Event} e Event object + */ + _moveCursorLeftOrRight: function(direction, e) { + var actionName = 'moveCursor' + direction + 'With'; + this._currentCursorOpacity = 1; - /** - * Moves cursor right without keeping selection - * @param {Event} e Event object - */ - moveCursorRightWithoutShift: function(e) { - var changed = true; - this._selectionDirection = 'right'; + if (e.shiftKey) { + actionName += 'Shift'; + } + else { + actionName += 'outShift'; + } + if (this[actionName](e)) { + this.abortCursorAnimation(); + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - if (this.selectionStart === this.selectionEnd) { - changed = this._moveRight(e, 'selectionStart'); - this.selectionEnd = this.selectionStart; - } - else { - this.selectionStart = this.selectionEnd; - } - return changed; - }, + /** + * Moves cursor right while keeping selection + * @param {Event} e + */ + moveCursorRightWithShift: function(e) { + if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) { + return this._moveRight(e, 'selectionStart'); + } + else if (this.selectionEnd !== this._text.length) { + this._selectionDirection = 'right'; + return this._moveRight(e, 'selectionEnd'); + } + }, - /** - * Removes characters from start/end - * start/end ar per grapheme position in _text array. - * - * @param {Number} start - * @param {Number} end default to start + 1 - */ - removeChars: function(start, end) { - if (typeof end === 'undefined') { - end = start + 1; - } - this.removeStyleFromTo(start, end); - this._text.splice(start, end - start); - this.text = this._text.join(''); - this.set('dirty', true); - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this._removeExtraneousStyles(); - }, + /** + * Moves cursor right without keeping selection + * @param {Event} e Event object + */ + moveCursorRightWithoutShift: function(e) { + var changed = true; + this._selectionDirection = 'right'; - /** - * insert characters at start position, before start position. - * start equal 1 it means the text get inserted between actual grapheme 0 and 1 - * if style array is provided, it must be as the same length of text in graphemes - * if end is provided and is bigger than start, old text is replaced. - * start/end ar per grapheme position in _text array. - * - * @param {String} text text to insert - * @param {Array} style array of style objects - * @param {Number} start - * @param {Number} end default to start + 1 - */ - insertChars: function(text, style, start, end) { - if (typeof end === 'undefined') { - end = start; - } - if (end > start) { - this.removeStyleFromTo(start, end); - } - var graphemes = this.graphemeSplit(text); - this.insertNewStyleBlock(graphemes, start, style); - this._text = [].concat(this._text.slice(0, start), graphemes, this._text.slice(end)); - this.text = this._text.join(''); - this.set('dirty', true); - if (this._shouldClearDimensionCache()) { - this.initDimensions(); - this.setCoords(); - } - this._removeExtraneousStyles(); - }, + if (this.selectionStart === this.selectionEnd) { + changed = this._moveRight(e, 'selectionStart'); + this.selectionEnd = this.selectionStart; + } + else { + this.selectionStart = this.selectionEnd; + } + return changed; + }, - }); - })(typeof exports !== 'undefined' ? exports : window); + /** + * Removes characters from start/end + * start/end ar per grapheme position in _text array. + * + * @param {Number} start + * @param {Number} end default to start + 1 + */ + removeChars: function(start, end) { + if (typeof end === 'undefined') { + end = start + 1; + } + this.removeStyleFromTo(start, end); + this._text.splice(start, end - start); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this._removeExtraneousStyles(); + }, + + /** + * insert characters at start position, before start position. + * start equal 1 it means the text get inserted between actual grapheme 0 and 1 + * if style array is provided, it must be as the same length of text in graphemes + * if end is provided and is bigger than start, old text is replaced. + * start/end ar per grapheme position in _text array. + * + * @param {String} text text to insert + * @param {Array} style array of style objects + * @param {Number} start + * @param {Number} end default to start + 1 + */ + insertChars: function(text, style, start, end) { + if (typeof end === 'undefined') { + end = start; + } + if (end > start) { + this.removeStyleFromTo(start, end); + } + var graphemes = fabric.util.string.graphemeSplit(text); + this.insertNewStyleBlock(graphemes, start, style); + this._text = [].concat(this._text.slice(0, start), graphemes, this._text.slice(end)); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this._removeExtraneousStyles(); + }, - /* _TO_SVG_START_ */ - (function(global) { - var fabric = global.fabric, toFixed = fabric.util.toFixed, - multipleSpacesRegex = / +/g; +}); - fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** - * Returns SVG representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - _toSVG: function() { - var offsets = this._getSVGLeftTopOffsets(), - textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); - return this._wrapSVGTextAndBg(textAndBg); - }, +/* _TO_SVG_START_ */ +(function() { + var toFixed = fabric.util.toFixed, + multipleSpacesRegex = / +/g; - /** - * Returns svg representation of an instance - * @param {Function} [reviver] Method for further parsing of svg representation. - * @return {String} svg representation of an instance - */ - toSVG: function(reviver) { - return this._createBaseSVGMarkup( - this._toSVG(), - { reviver: reviver, noStyle: true, withShadow: true } - ); - }, + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { - /** - * @private - */ - _getSVGLeftTopOffsets: function() { - return { - textLeft: -this.width / 2, - textTop: -this.height / 2, - lineTop: this.getHeightOfLine(0) - }; - }, + /** + * Returns SVG representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + _toSVG: function() { + var offsets = this._getSVGLeftTopOffsets(), + textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); + return this._wrapSVGTextAndBg(textAndBg); + }, - /** - * @private - */ - _wrapSVGTextAndBg: function(textAndBg) { - var noShadow = true, - textDecoration = this.getSvgTextDecoration(this); - return [ - textAndBg.textBgRects.join(''), - '\t\t', - textAndBg.textSpans.join(''), - '\n' - ]; - }, + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + return this._createBaseSVGMarkup( + this._toSVG(), + { reviver: reviver, noStyle: true, withShadow: true } + ); + }, - /** - * @private - * @param {Number} textTopOffset Text top offset - * @param {Number} textLeftOffset Text left offset - * @return {Object} - */ - _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { - var textSpans = [], - textBgRects = [], - height = textTopOffset, lineOffset; - // bounding-box background - this._setSVGBg(textBgRects); - - // text and text-background - for (var i = 0, len = this._textLines.length; i < len; i++) { - lineOffset = this._getLineLeftOffset(i); - if (this.direction === 'rtl') { - lineOffset += this.width; - } - if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { - this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); - } - this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); - height += this.getHeightOfLine(i); - } + /** + * @private + */ + _getSVGLeftTopOffsets: function() { + return { + textLeft: -this.width / 2, + textTop: -this.height / 2, + lineTop: this.getHeightOfLine(0) + }; + }, - return { - textSpans: textSpans, - textBgRects: textBgRects - }; - }, + /** + * @private + */ + _wrapSVGTextAndBg: function(textAndBg) { + var noShadow = true, + textDecoration = this.getSvgTextDecoration(this); + return [ + textAndBg.textBgRects.join(''), + '\t\t', + textAndBg.textSpans.join(''), + '\n' + ]; + }, - /** - * @private - */ - _createTextCharSpan: function(_char, styleDecl, left, top) { - var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), - styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), - fillStyles = styleProps ? 'style="' + styleProps + '"' : '', - dy = styleDecl.deltaY, dySpan = '', - NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - if (dy) { - dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; - } - return [ - '', - fabric.util.string.escapeXml(_char), - '' - ].join(''); - }, + /** + * @private + * @param {Number} textTopOffset Text top offset + * @param {Number} textLeftOffset Text left offset + * @return {Object} + */ + _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { + var textSpans = [], + textBgRects = [], + height = textTopOffset, lineOffset; + // bounding-box background + this._setSVGBg(textBgRects); - _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { - // set proper line offset - var lineHeight = this.getHeightOfLine(lineIndex), - isJustify = this.textAlign.indexOf('justify') !== -1, - actualStyle, - nextStyle, - charsToRender = '', - charBox, style, - boxWidth = 0, - line = this._textLines[lineIndex], - timeToRender; - - textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; - for (var i = 0, len = line.length - 1; i <= len; i++) { - timeToRender = i === len || this.charSpacing; - charsToRender += line[i]; - charBox = this.__charBounds[lineIndex][i]; - if (boxWidth === 0) { - textLeftOffset += charBox.kernedWidth - charBox.width; - boxWidth += charBox.width; - } - else { - boxWidth += charBox.kernedWidth; - } - if (isJustify && !timeToRender) { - if (this._reSpaceAndTab.test(line[i])) { - timeToRender = true; - } - } - if (!timeToRender) { - // if we have charSpacing, we render char by char - actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); - nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); - timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); - } - if (timeToRender) { - style = this._getStyleDeclaration(lineIndex, i) || { }; - textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); - charsToRender = ''; - actualStyle = nextStyle; - if (this.direction === 'rtl') { - textLeftOffset -= boxWidth; - } - else { - textLeftOffset += boxWidth; - } - boxWidth = 0; - } + // text and text-background + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineOffset = this._getLineLeftOffset(i); + if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { + this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); } - }, + this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); + height += this.getHeightOfLine(i); + } - _pushTextBgRect: function(textBgRects, color, left, top, width, height) { - var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - textBgRects.push( - '\t\t\n'); - }, + return { + textSpans: textSpans, + textBgRects: textBgRects + }; + }, - _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { - var line = this._textLines[i], - heightOfLine = this.getHeightOfLine(i) / this.lineHeight, - boxWidth = 0, - boxStart = 0, - charBox, currentColor, - lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); - for (var j = 0, jlen = line.length; j < jlen; j++) { - charBox = this.__charBounds[i][j]; - currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); - if (currentColor !== lastColor) { - lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - boxStart = charBox.left; - boxWidth = charBox.width; - lastColor = currentColor; - } - else { - boxWidth += charBox.kernedWidth; + /** + * @private + */ + _createTextCharSpan: function(_char, styleDecl, left, top) { + var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), + styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), + fillStyles = styleProps ? 'style="' + styleProps + '"' : '', + dy = styleDecl.deltaY, dySpan = '', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + if (dy) { + dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; + } + return [ + '', + fabric.util.string.escapeXml(_char), + '' + ].join(''); + }, + + _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, style, + boxWidth = 0, + line = this._textLines[lineIndex], + timeToRender; + + textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + textLeftOffset += charBox.kernedWidth - charBox.width; + boxWidth += charBox.width; + } + else { + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; } } - currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, - textTopOffset, boxWidth, heightOfLine); - }, - - /** - * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values - * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1 - * - * @private - * @param {*} value - * @return {String} - */ - _getFillAttributes: function(value) { - var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; - if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { - return 'fill="' + value + '"'; + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); } - return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; - }, - - /** - * @private - */ - _getSVGLineTopOffset: function(lineIndex) { - var lineTopOffset = 0, lastHeight = 0; - for (var j = 0; j < lineIndex; j++) { - lineTopOffset += this.getHeightOfLine(j); + if (timeToRender) { + style = this._getStyleDeclaration(lineIndex, i) || { }; + textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); + charsToRender = ''; + actualStyle = nextStyle; + textLeftOffset += boxWidth; + boxWidth = 0; } - lastHeight = this.getHeightOfLine(j); - return { - lineTop: lineTopOffset, - offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) - }; - }, + } + }, + + _pushTextBgRect: function(textBgRects, color, left, top, width, height) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + }, + + _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { + var line = this._textLines[i], + heightOfLine = this.getHeightOfLine(i) / this.lineHeight, + boxWidth = 0, + boxStart = 0, + charBox, currentColor, + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (currentColor !== lastColor) { + lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; + } + else { + boxWidth += charBox.kernedWidth; + } + } + currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + }, - /** - * Returns styles-string for svg-export - * @param {Boolean} skipShadow a boolean to skip shadow filter output - * @return {String} - */ - getSvgStyles: function(skipShadow) { - var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); - return svgStyle + ' white-space: pre;'; - }, - }); - })(typeof exports !== 'undefined' ? exports : window); - /* _TO_SVG_END_ */ + /** + * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values + * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1 + * + * @private + * @param {*} value + * @return {String} + */ + _getFillAttributes: function(value) { + var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; + if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { + return 'fill="' + value + '"'; + } + return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; + }, - (function(global) { - var fabric = global.fabric || (global.fabric = {}); + /** + * @private + */ + _getSVGLineTopOffset: function(lineIndex) { + var lineTopOffset = 0, lastHeight = 0; + for (var j = 0; j < lineIndex; j++) { + lineTopOffset += this.getHeightOfLine(j); + } + lastHeight = this.getHeightOfLine(j); + return { + lineTop: lineTopOffset, + offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) + }; + }, /** - * Textbox class, based on IText, allows the user to resize the text rectangle - * and wraps lines automatically. Textboxes have their Y scaling locked, the - * user can only change width. Height is adjusted automatically based on the - * wrapping of lines. - * @class fabric.Textbox - * @extends fabric.IText - * @mixes fabric.Observable - * @return {fabric.Textbox} thisArg - * @see {@link fabric.Textbox#initialize} for constructor definition + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} */ - fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { + getSvgStyles: function(skipShadow) { + var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); + return svgStyle + ' white-space: pre;'; + }, + }); +})(); +/* _TO_SVG_END_ */ - /** - * Type of an object - * @type String - * @default - */ - type: 'textbox', - /** - * Minimum width of textbox, in pixels. - * @type Number - * @default - */ - minWidth: 20, +(function(global) { - /** - * Minimum calculated width of a textbox, in pixels. - * fixed to 2 so that an empty textbox cannot go to 0 - * and is still selectable without text. - * @type Number - * @default - */ - dynamicMinWidth: 2, + 'use strict'; - /** - * Cached array of text wrapping. - * @type Array - */ - __cachedLines: null, + var fabric = global.fabric || (global.fabric = {}); - /** - * Override standard Object class values - */ - lockScalingFlip: true, + /** + * Textbox class, based on IText, allows the user to resize the text rectangle + * and wraps lines automatically. Textboxes have their Y scaling locked, the + * user can only change width. Height is adjusted automatically based on the + * wrapping of lines. + * @class fabric.Textbox + * @extends fabric.IText + * @mixes fabric.Observable + * @return {fabric.Textbox} thisArg + * @see {@link fabric.Textbox#initialize} for constructor definition + */ + fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { - /** - * Override standard Object class values - * Textbox needs this on false - */ - noScaleCache: false, + /** + * Type of an object + * @type String + * @default + */ + type: 'textbox', - /** - * Properties which when set cause object to change dimensions - * @type Object - * @private - */ - _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), + /** + * Minimum width of textbox, in pixels. + * @type Number + * @default + */ + minWidth: 20, - /** - * Use this regular expression to split strings in breakable lines - * @private - */ - _wordJoiners: /[ \t\r]/, + /** + * Minimum calculated width of a textbox, in pixels. + * fixed to 2 so that an empty textbox cannot go to 0 + * and is still selectable without text. + * @type Number + * @default + */ + dynamicMinWidth: 2, - /** - * Use this boolean property in order to split strings that have no white space concept. - * this is a cheap way to help with chinese/japanese - * @type Boolean - * @since 2.6.0 - */ - splitByGrapheme: false, + /** + * Cached array of text wrapping. + * @type Array + */ + __cachedLines: null, - /** - * Unlike superclass's version of this function, Textbox does not update - * its width. - * @private - * @override - */ - initDimensions: function() { - if (this.__skipDimension) { - return; - } - this.isEditing && this.initDelayedCursor(); - this.clearContextTop(); - this._clearCache(); - // clear dynamicMinWidth as it will be different after we re-wrap line - this.dynamicMinWidth = 0; - // wrap lines - this._styleMap = this._generateStyleMap(this._splitText()); - // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap - if (this.dynamicMinWidth > this.width) { - this._set('width', this.dynamicMinWidth); - } - if (this.textAlign.indexOf('justify') !== -1) { - // once text is measured we need to make space fatter to make justified text. - this.enlargeSpaces(); - } - // clear cache and re-calculate height - this.height = this.calcTextHeight(); - this.saveState({ propertySet: '_dimensionAffectingProps' }); - }, + /** + * Override standard Object class values + */ + lockScalingFlip: true, - /** - * Generate an object that translates the style object so that it is - * broken up by visual lines (new lines and automatic wrapping). - * The original text styles object is broken up by actual lines (new lines only), - * which is only sufficient for Text / IText - * @private - */ - _generateStyleMap: function(textInfo) { - var realLineCount = 0, - realLineCharCount = 0, - charCount = 0, - map = {}; - - for (var i = 0; i < textInfo.graphemeLines.length; i++) { - if (textInfo.graphemeText[charCount] === '\n' && i > 0) { - realLineCharCount = 0; - charCount++; - realLineCount++; - } - else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { - // this case deals with space's that are removed from end of lines when wrapping - realLineCharCount++; - charCount++; - } + /** + * Override standard Object class values + * Textbox needs this on false + */ + noScaleCache: false, - map[i] = { line: realLineCount, offset: realLineCharCount }; + /** + * Properties which when set cause object to change dimensions + * @type Object + * @private + */ + _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), - charCount += textInfo.graphemeLines[i].length; - realLineCharCount += textInfo.graphemeLines[i].length; - } + /** + * Use this regular expression to split strings in breakable lines + * @private + */ + _wordJoiners: /[ \t\r]/, - return map; - }, + /** + * Use this boolean property in order to split strings that have no white space concept. + * this is a cheap way to help with chinese/japanese + * @type Boolean + * @since 2.6.0 + */ + splitByGrapheme: false, - /** - * Returns true if object has a style property or has it on a specified line - * @param {Number} lineIndex - * @return {Boolean} - */ - styleHas: function(property, lineIndex) { - if (this._styleMap && !this.isWrapping) { - var map = this._styleMap[lineIndex]; - if (map) { - lineIndex = map.line; - } - } - return fabric.Text.prototype.styleHas.call(this, property, lineIndex); - }, + /** + * Unlike superclass's version of this function, Textbox does not update + * its width. + * @private + * @override + */ + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this._clearCache(); + // clear dynamicMinWidth as it will be different after we re-wrap line + this.dynamicMinWidth = 0; + // wrap lines + this._styleMap = this._generateStyleMap(this._splitText()); + // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap + if (this.dynamicMinWidth > this.width) { + this._set('width', this.dynamicMinWidth); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + // clear cache and re-calculate height + this.height = this.calcTextHeight(); + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, + + /** + * Generate an object that translates the style object so that it is + * broken up by visual lines (new lines and automatic wrapping). + * The original text styles object is broken up by actual lines (new lines only), + * which is only sufficient for Text / IText + * @private + */ + _generateStyleMap: function(textInfo) { + var realLineCount = 0, + realLineCharCount = 0, + charCount = 0, + map = {}; - /** - * Returns true if object has no styling or no styling in a line - * @param {Number} lineIndex , lineIndex is on wrapped lines. - * @return {Boolean} - */ - isEmptyStyles: function(lineIndex) { - if (!this.styles) { - return true; + for (var i = 0; i < textInfo.graphemeLines.length; i++) { + if (textInfo.graphemeText[charCount] === '\n' && i > 0) { + realLineCharCount = 0; + charCount++; + realLineCount++; } - var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, - map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; - if (map) { - lineIndex = map.line; - offset = map.offset; - } - if (mapNextLine) { - nextLineIndex = mapNextLine.line; - shouldLimit = nextLineIndex === lineIndex; - nextOffset = mapNextLine.offset; - } - obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; - for (var p1 in obj) { - for (var p2 in obj[p1]) { - if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { - // eslint-disable-next-line no-unused-vars - for (var p3 in obj[p1][p2]) { - return false; - } - } - } + else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { + // this case deals with space's that are removed from end of lines when wrapping + realLineCharCount++; + charCount++; } - return true; - }, - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @private - */ - _getStyleDeclaration: function(lineIndex, charIndex) { - if (this._styleMap && !this.isWrapping) { - var map = this._styleMap[lineIndex]; - if (!map) { - return null; - } + map[i] = { line: realLineCount, offset: realLineCharCount }; + + charCount += textInfo.graphemeLines[i].length; + realLineCharCount += textInfo.graphemeLines[i].length; + } + + return map; + }, + + /** + * Returns true if object has a style property or has it on a specified line + * @param {Number} lineIndex + * @return {Boolean} + */ + styleHas: function(property, lineIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (map) { lineIndex = map.line; - charIndex = map.offset + charIndex; } - return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); - }, + } + return fabric.Text.prototype.styleHas.call(this, property, lineIndex); + }, - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @param {Object} style - * @private - */ - _setStyleDeclaration: function(lineIndex, charIndex, style) { - var map = this._styleMap[lineIndex]; + /** + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} + */ + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, + map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; + if (map) { lineIndex = map.line; - charIndex = map.offset + charIndex; - - this.styles[lineIndex][charIndex] = style; - }, + offset = map.offset; + } + if (mapNextLine) { + nextLineIndex = mapNextLine.line; + shouldLimit = nextLineIndex === lineIndex; + nextOffset = mapNextLine.offset; + } + obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; + } + } + } + } + return true; + }, - /** - * @param {Number} lineIndex - * @param {Number} charIndex - * @private - */ - _deleteStyleDeclaration: function(lineIndex, charIndex) { + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @private + */ + _getStyleDeclaration: function(lineIndex, charIndex) { + if (this._styleMap && !this.isWrapping) { var map = this._styleMap[lineIndex]; + if (!map) { + return null; + } lineIndex = map.line; charIndex = map.offset + charIndex; - delete this.styles[lineIndex][charIndex]; - }, - - /** - * probably broken need a fix - * Returns the real style line that correspond to the wrapped lineIndex line - * Used just to verify if the line does exist or not. - * @param {Number} lineIndex - * @returns {Boolean} if the line exists or not - * @private - */ - _getLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - return !!this.styles[map.line]; - }, - - /** - * Set the line style to an empty object so that is initialized - * @param {Number} lineIndex - * @param {Object} style - * @private - */ - _setLineStyle: function(lineIndex) { - var map = this._styleMap[lineIndex]; - this.styles[map.line] = {}; - }, - - /** - * Wraps text using the 'width' property of Textbox. First this function - * splits text on newlines, so we preserve newlines entered by the user. - * Then it wraps each line using the width of the Textbox by calling - * _wrapLine(). - * @param {Array} lines The string array of text that is split into lines - * @param {Number} desiredWidth width you want to wrap to - * @returns {Array} Array of lines - */ - _wrapText: function(lines, desiredWidth) { - var wrapped = [], i; - this.isWrapping = true; - for (i = 0; i < lines.length; i++) { - wrapped.push.apply(wrapped, this._wrapLine(lines[i], i, desiredWidth)); - } - this.isWrapping = false; - return wrapped; - }, + } + return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); + }, - /** - * Helper function to measure a string of text, given its lineIndex and charIndex offset - * It gets called when charBounds are not available yet. - * Override if necessary - * Use with {@link fabric.Textbox#wordSplit} - * - * @param {CanvasRenderingContext2D} ctx - * @param {String} text - * @param {number} lineIndex - * @param {number} charOffset - * @returns {number} - */ - _measureWord: function(word, lineIndex, charOffset) { - var width = 0, prevGrapheme, skipLeft = true; - charOffset = charOffset || 0; - for (var i = 0, len = word.length; i < len; i++) { - var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); - width += box.kernedWidth; - prevGrapheme = word[i]; - } - return width; - }, + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {Object} style + * @private + */ + _setStyleDeclaration: function(lineIndex, charIndex, style) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; - /** - * Override this method to customize word splitting - * Use with {@link fabric.Textbox#_measureWord} - * @param {string} value - * @returns {string[]} array of words - */ - wordSplit: function (value) { - return value.split(this._wordJoiners); - }, + this.styles[lineIndex][charIndex] = style; + }, - /** - * Wraps a line of text using the width of the Textbox and a context. - * @param {Array} line The grapheme array that represent the line - * @param {Number} lineIndex - * @param {Number} desiredWidth width you want to wrap the line to - * @param {Number} reservedSpace space to remove from wrapping for custom functionalities - * @returns {Array} Array of line(s) into which the given text is wrapped - * to. - */ - _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { - var lineWidth = 0, - splitByGrapheme = this.splitByGrapheme, - graphemeLines = [], - line = [], - // spaces in different languages? - words = splitByGrapheme ? this.graphemeSplit(_line) : this.wordSplit(_line), - word = '', - offset = 0, - infix = splitByGrapheme ? '' : ' ', - wordWidth = 0, - infixWidth = 0, - largestWordWidth = 0, - lineJustStarted = true, - additionalSpace = this._getWidthOfCharSpacing(), - reservedSpace = reservedSpace || 0; - // fix a difference between split and graphemeSplit - if (words.length === 0) { - words.push([]); - } - desiredWidth -= reservedSpace; - // measure words - var data = words.map(function (word) { - // if using splitByGrapheme words are already in graphemes. - word = splitByGrapheme ? word : this.graphemeSplit(word); - var width = this._measureWord(word, lineIndex, offset); - largestWordWidth = Math.max(width, largestWordWidth); - offset += word.length + 1; - return { word: word, width: width }; - }.bind(this)); - var maxWidth = Math.max(desiredWidth, largestWordWidth, this.dynamicMinWidth); - // layout words - offset = 0; - for (var i = 0; i < words.length; i++) { - word = data[i].word; - wordWidth = data[i].width; - offset += word.length; - - lineWidth += infixWidth + wordWidth - additionalSpace; - if (lineWidth > maxWidth && !lineJustStarted) { - graphemeLines.push(line); - line = []; - lineWidth = wordWidth; - lineJustStarted = true; - } - else { - lineWidth += additionalSpace; - } + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @private + */ + _deleteStyleDeclaration: function(lineIndex, charIndex) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; + delete this.styles[lineIndex][charIndex]; + }, - if (!lineJustStarted && !splitByGrapheme) { - line.push(infix); - } - line = line.concat(word); + /** + * probably broken need a fix + * Returns the real style line that correspond to the wrapped lineIndex line + * Used just to verify if the line does exist or not. + * @param {Number} lineIndex + * @returns {Boolean} if the line exists or not + * @private + */ + _getLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + return !!this.styles[map.line]; + }, - infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); - offset++; - lineJustStarted = false; + /** + * Set the line style to an empty object so that is initialized + * @param {Number} lineIndex + * @param {Object} style + * @private + */ + _setLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + this.styles[map.line] = {}; + }, + + /** + * Wraps text using the 'width' property of Textbox. First this function + * splits text on newlines, so we preserve newlines entered by the user. + * Then it wraps each line using the width of the Textbox by calling + * _wrapLine(). + * @param {Array} lines The string array of text that is split into lines + * @param {Number} desiredWidth width you want to wrap to + * @returns {Array} Array of lines + */ + _wrapText: function(lines, desiredWidth) { + var wrapped = [], i; + this.isWrapping = true; + for (i = 0; i < lines.length; i++) { + wrapped = wrapped.concat(this._wrapLine(lines[i], i, desiredWidth)); + } + this.isWrapping = false; + return wrapped; + }, + + /** + * Helper function to measure a string of text, given its lineIndex and charIndex offset + * it gets called when charBounds are not available yet. + * @param {CanvasRenderingContext2D} ctx + * @param {String} text + * @param {number} lineIndex + * @param {number} charOffset + * @returns {number} + * @private + */ + _measureWord: function(word, lineIndex, charOffset) { + var width = 0, prevGrapheme, skipLeft = true; + charOffset = charOffset || 0; + for (var i = 0, len = word.length; i < len; i++) { + var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); + width += box.kernedWidth; + prevGrapheme = word[i]; + } + return width; + }, + + /** + * Wraps a line of text using the width of the Textbox and a context. + * @param {Array} line The grapheme array that represent the line + * @param {Number} lineIndex + * @param {Number} desiredWidth width you want to wrap the line to + * @param {Number} reservedSpace space to remove from wrapping for custom functionalities + * @returns {Array} Array of line(s) into which the given text is wrapped + * to. + */ + _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { + var lineWidth = 0, + splitByGrapheme = this.splitByGrapheme, + graphemeLines = [], + line = [], + // spaces in different languages? + words = splitByGrapheme ? fabric.util.string.graphemeSplit(_line) : _line.split(this._wordJoiners), + word = '', + offset = 0, + infix = splitByGrapheme ? '' : ' ', + wordWidth = 0, + infixWidth = 0, + largestWordWidth = 0, + lineJustStarted = true, + additionalSpace = this._getWidthOfCharSpacing(), + reservedSpace = reservedSpace || 0; + // fix a difference between split and graphemeSplit + if (words.length === 0) { + words.push([]); + } + desiredWidth -= reservedSpace; + for (var i = 0; i < words.length; i++) { + // if using splitByGrapheme words are already in graphemes. + word = splitByGrapheme ? words[i] : fabric.util.string.graphemeSplit(words[i]); + wordWidth = this._measureWord(word, lineIndex, offset); + offset += word.length; + + lineWidth += infixWidth + wordWidth - additionalSpace; + if (lineWidth > desiredWidth && !lineJustStarted) { + graphemeLines.push(line); + line = []; + lineWidth = wordWidth; + lineJustStarted = true; } - - i && graphemeLines.push(line); - - if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { - this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; + else { + lineWidth += additionalSpace; } - return graphemeLines; - }, - /** - * Detect if the text line is ended with an hard break - * text and itext do not have wrapping, return false - * @param {Number} lineIndex text to split - * @return {Boolean} - */ - isEndOfWrapping: function(lineIndex) { - if (!this._styleMap[lineIndex + 1]) { - // is last line, return true; - return true; + if (!lineJustStarted && !splitByGrapheme) { + line.push(infix); } - if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { - // this is last line before a line break, return true; - return true; - } - return false; - }, + line = line.concat(word); - /** - * Detect if a line has a linebreak and so we need to account for it when moving - * and counting style. - * @return Number - */ - missingNewlineOffset: function(lineIndex) { - if (this.splitByGrapheme) { - return this.isEndOfWrapping(lineIndex) ? 1 : 0; + infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); + offset++; + lineJustStarted = false; + // keep track of largest word + if (wordWidth > largestWordWidth) { + largestWordWidth = wordWidth; } - return 1; - }, - - /** - * Gets lines of text to render in the Textbox. This function calculates - * text wrapping on the fly every time it is called. - * @param {String} text text to split - * @returns {Array} Array of lines in the Textbox. - * @override - */ - _splitTextIntoLines: function(text) { - var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), - graphemeLines = this._wrapText(newText.lines, this.width), - lines = new Array(graphemeLines.length); - for (var i = 0; i < graphemeLines.length; i++) { - lines[i] = graphemeLines[i].join(''); - } - newText.lines = lines; - newText.graphemeLines = graphemeLines; - return newText; - }, + } - getMinWidth: function() { - return Math.max(this.minWidth, this.dynamicMinWidth); - }, + i && graphemeLines.push(line); - _removeExtraneousStyles: function() { - var linesToKeep = {}; - for (var prop in this._styleMap) { - if (this._textLines[prop]) { - linesToKeep[this._styleMap[prop].line] = 1; - } - } - for (var prop in this.styles) { - if (!linesToKeep[prop]) { - delete this.styles[prop]; - } - } - }, + if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { + this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; + } + return graphemeLines; + }, - /** - * Returns object representation of an instance - * @method toObject - * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output - * @return {Object} object representation of an instance - */ - toObject: function(propertiesToInclude) { - return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); + /** + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @param {Number} lineIndex text to split + * @return {Boolean} + */ + isEndOfWrapping: function(lineIndex) { + if (!this._styleMap[lineIndex + 1]) { + // is last line, return true; + return true; } - }); + if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { + // this is last line before a line break, return true; + return true; + } + return false; + }, /** - * Returns fabric.Textbox instance from an object representation - * @static - * @memberOf fabric.Textbox - * @param {Object} object Object to create an instance from - * @returns {Promise} + * Detect if a line has a linebreak and so we need to account for it when moving + * and counting style. + * @return Number */ - fabric.Textbox.fromObject = function(object) { - return fabric.Object._fromObject(fabric.Textbox, object, 'text'); - }; - })(typeof exports !== 'undefined' ? exports : window); + missingNewlineOffset: function(lineIndex) { + if (this.splitByGrapheme) { + return this.isEndOfWrapping(lineIndex) ? 1 : 0; + } + return 1; + }, + + /** + * Gets lines of text to render in the Textbox. This function calculates + * text wrapping on the fly every time it is called. + * @param {String} text text to split + * @returns {Array} Array of lines in the Textbox. + * @override + */ + _splitTextIntoLines: function(text) { + var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), + graphemeLines = this._wrapText(newText.lines, this.width), + lines = new Array(graphemeLines.length); + for (var i = 0; i < graphemeLines.length; i++) { + lines[i] = graphemeLines[i].join(''); + } + newText.lines = lines; + newText.graphemeLines = graphemeLines; + return newText; + }, - (function(global) { + getMinWidth: function() { + return Math.max(this.minWidth, this.dynamicMinWidth); + }, - var fabric = global.fabric, controlsUtils = fabric.controlsUtils, - scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, - scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, - scalingEqually = controlsUtils.scalingEqually, - scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, - scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, - scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, - objectControls = fabric.Object.prototype.controls; + _removeExtraneousStyles: function() { + var linesToKeep = {}; + for (var prop in this._styleMap) { + if (this._textLines[prop]) { + linesToKeep[this._styleMap[prop].line] = 1; + } + } + for (var prop in this.styles) { + if (!linesToKeep[prop]) { + delete this.styles[prop]; + } + } + }, - objectControls.ml = new fabric.Control({ - x: -0.5, - y: 0, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, - }); + /** + * Returns object representation of an instance + * @method toObject + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); + } + }); - objectControls.mr = new fabric.Control({ + /** + * Returns fabric.Textbox instance from an object representation + * @static + * @memberOf fabric.Textbox + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Textbox instance is created + */ + fabric.Textbox.fromObject = function(object, callback) { + return fabric.Object._fromObject('Textbox', object, callback, 'text'); + }; +})(typeof exports !== 'undefined' ? exports : this); + + +(function() { + + var controlsUtils = fabric.controlsUtils, + scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, + scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, + scalingEqually = controlsUtils.scalingEqually, + scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, + scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, + scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, + objectControls = fabric.Object.prototype.controls; + + objectControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, + }); + + objectControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, + }); + + objectControls.mb = new fabric.Control({ + x: 0, + y: 0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); + + objectControls.mt = new fabric.Control({ + x: 0, + y: -0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); + + objectControls.tl = new fabric.Control({ + x: -0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.tr = new fabric.Control({ + x: 0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.bl = new fabric.Control({ + x: -0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.br = new fabric.Control({ + x: 0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); + + objectControls.mtr = new fabric.Control({ + x: 0, + y: -0.5, + actionHandler: controlsUtils.rotationWithSnapping, + cursorStyleHandler: controlsUtils.rotationStyleHandler, + offsetY: -40, + withConnection: true, + actionName: 'rotate', + }); + + if (fabric.Textbox) { + // this is breaking the prototype inheritance, no time / ideas to fix it. + // is important to document that if you want to have all objects to have a + // specific custom control, you have to add it to Object prototype and to Textbox + // prototype. The controls are shared as references. So changes to control `tr` + // can still apply to all objects if needed. + var textBoxControls = fabric.Textbox.prototype.controls = { }; + + textBoxControls.mtr = objectControls.mtr; + textBoxControls.tr = objectControls.tr; + textBoxControls.br = objectControls.br; + textBoxControls.tl = objectControls.tl; + textBoxControls.bl = objectControls.bl; + textBoxControls.mt = objectControls.mt; + textBoxControls.mb = objectControls.mb; + + textBoxControls.mr = new fabric.Control({ x: 0.5, y: 0, + actionHandler: controlsUtils.changeWidth, cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingXOrSkewingY, - getActionName: scaleOrSkewActionName, - }); - - objectControls.mb = new fabric.Control({ - x: 0, - y: 0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, - }); - - objectControls.mt = new fabric.Control({ - x: 0, - y: -0.5, - cursorStyleHandler: scaleSkewStyleHandler, - actionHandler: scalingYOrSkewingX, - getActionName: scaleOrSkewActionName, + actionName: 'resizing', }); - objectControls.tl = new fabric.Control({ + textBoxControls.ml = new fabric.Control({ x: -0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.tr = new fabric.Control({ - x: 0.5, - y: -0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.bl = new fabric.Control({ - x: -0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.br = new fabric.Control({ - x: 0.5, - y: 0.5, - cursorStyleHandler: scaleStyleHandler, - actionHandler: scalingEqually - }); - - objectControls.mtr = new fabric.Control({ - x: 0, - y: -0.5, - actionHandler: controlsUtils.rotationWithSnapping, - cursorStyleHandler: controlsUtils.rotationStyleHandler, - offsetY: -40, - withConnection: true, - actionName: 'rotate', + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', }); - - if (fabric.Textbox) { - // this is breaking the prototype inheritance, no time / ideas to fix it. - // is important to document that if you want to have all objects to have a - // specific custom control, you have to add it to Object prototype and to Textbox - // prototype. The controls are shared as references. So changes to control `tr` - // can still apply to all objects if needed. - var textBoxControls = fabric.Textbox.prototype.controls = { }; - - textBoxControls.mtr = objectControls.mtr; - textBoxControls.tr = objectControls.tr; - textBoxControls.br = objectControls.br; - textBoxControls.tl = objectControls.tl; - textBoxControls.bl = objectControls.bl; - textBoxControls.mt = objectControls.mt; - textBoxControls.mb = objectControls.mb; - - textBoxControls.mr = new fabric.Control({ - x: 0.5, - y: 0, - actionHandler: controlsUtils.changeWidth, - cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', - }); - - textBoxControls.ml = new fabric.Control({ - x: -0.5, - y: 0, - actionHandler: controlsUtils.changeWidth, - cursorStyleHandler: scaleSkewStyleHandler, - actionName: 'resizing', - }); - } - })(typeof exports !== 'undefined' ? exports : window); - - // extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect - // import './src/mixins/eraser_brush.mixin.js'; // optional erasing - - module.exports = { - fabric: fabric$1, - }; - + } })(); + diff --git a/dist/fabric.min.js b/dist/fabric.min.js index 497386bdc55..f7d904ba60f 100644 --- a/dist/fabric.min.js +++ b/dist/fabric.min.js @@ -1,2 +1 @@ -var fabric=function(t){"use strict"; -/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */var e,i,r,n,s,o,a,h,c,l,u,f,d,g=g||{version:"5.1.0"};if(void 0!==t?t.fabric=g:"function"==typeof define&&define.amd&&define([],(function(){return g})),"undefined"!=typeof document&&"undefined"!=typeof window)document instanceof("undefined"!=typeof HTMLDocument?HTMLDocument:Document)?g.document=document:g.document=document.implementation.createHTMLDocument(""),g.window=window;else{var p=new(require("jsdom").JSDOM)(decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"),{features:{FetchExternalResources:["img"]},resources:"usable"}).window;g.document=p.document,g.jsdomImplForWrapper=require("jsdom/lib/jsdom/living/generated/utils").implForWrapper,g.nodeCanvas=require("jsdom/lib/jsdom/utils").Canvas,g.window=p,global.DOMParser=g.window.DOMParser}function v(t,e){var i=t.canvas,r=e.targetCanvas,n=r.getContext("2d");n.translate(0,r.height),n.scale(1,-1);var s=i.height-r.height;n.drawImage(i,0,s,r.width,r.height,0,0,r.width,r.height)}function m(t,e){var i=e.targetCanvas.getContext("2d"),r=e.destinationWidth,n=e.destinationHeight,s=r*n*4,o=new Uint8Array(this.imageBuffer,0,s),a=new Uint8ClampedArray(this.imageBuffer,0,s);t.readPixels(0,0,r,n,t.RGBA,t.UNSIGNED_BYTE,o);var h=new ImageData(a,r,n);i.putImageData(h,0,0)}return g.isTouchSupported="ontouchstart"in g.window||"ontouchstart"in g.document||g.window&&g.window.navigator&&g.window.navigator.maxTouchPoints>0,g.isLikelyNode="undefined"!=typeof Buffer&&"undefined"==typeof window,g.SHARED_ATTRIBUTES=["display","transform","fill","fill-opacity","fill-rule","opacity","stroke","stroke-dasharray","stroke-linecap","stroke-dashoffset","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","id","paint-order","vector-effect","instantiated_by_use","clip-path"],g.DPI=96,g.reNum="(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)",g.commaWsp="(?:\\s+,?\\s*|,\\s*)",g.rePathCommand=/([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/gi,g.reNonWord=/[ \n\.,;!\?\-]/,g.fontPaths={},g.iMatrix=[1,0,0,1,0,0],g.svgNS="http://www.w3.org/2000/svg",g.perfLimitSizeTotal=2097152,g.maxCacheSideLimit=4096,g.minCacheSideLimit=256,g.charWidthsCache={},g.textureSize=2048,g.disableStyleCopyPaste=!1,g.enableGLFiltering=!0,g.devicePixelRatio=g.window.devicePixelRatio||g.window.webkitDevicePixelRatio||g.window.mozDevicePixelRatio||1,g.browserShadowBlurConstant=1,g.arcToSegmentsCache={},g.boundsOfCurveCache={},g.cachesBoundsOfCurve=!0,g.forceGLPutImageData=!1,g.initFilterBackend=function(){return g.enableGLFiltering&&g.isWebglSupported&&g.isWebglSupported(g.textureSize)?(console.log("max texture size: "+g.maxTextureSize),new g.WebglFilterBackend({tileSize:g.textureSize})):g.Canvas2dFilterBackend?new g.Canvas2dFilterBackend:void 0},"undefined"!=typeof document&&"undefined"!=typeof window&&(window.fabric=fabric),function(t){var e=t.fabric;function i(t,i){if(this.__eventListeners[t]){var r=this.__eventListeners[t];i?r[r.indexOf(i)]=!1:e.util.array.fill(r,!1)}}function r(t,e){var i=function(){e.apply(this,arguments),this.off(t,i)}.bind(this);return this.on(t,i),i}function n(t,e){if(this.__eventListeners)if(0===arguments.length)for(t in this.__eventListeners)i.call(this,t);else if("object"==typeof t&&void 0===e)for(var r in t)i.call(this,r,t[r]);else i.call(this,t,e)}e.Observable={fire:function(t,e){if(this.__eventListeners){var i=this.__eventListeners[t];if(i){for(var r=0,n=i.length;r-1}))},item:function(t){return this._objects[t]},isEmpty:function(){return 0===this._objects.length},size:function(){return this._objects.length},contains:function(t,e){return this._objects.indexOf(t)>-1||!!e&&this._objects.some((function(e){return"function"==typeof e.contains&&e.contains(t,!0)}))},complexity:function(){return this._objects.reduce((function(t,e){return t+=e.complexity?e.complexity():0}),0)}}}(void 0!==t?t:window),function(t){t.fabric.CommonMethods={_setOptions:function(t){for(var e in t)this.set(e,t[e])},_setObject:function(t){for(var e in t)this._set(e,t[e])},set:function(t,e){return"object"==typeof t?this._setObject(t):this._set(t,e),this},_set:function(t,e){this[t]=e},toggle:function(t){var e=this.get(t);return"boolean"==typeof e&&this.set(t,!e),this},get:function(t){return this[t]}}}(void 0!==t?t:window),function(t){var e=t.fabric,i=Math.sqrt,r=Math.atan2,n=Math.pow,s=Math.PI/180,o=Math.PI/2;e.util={cos:function(t){if(0===t)return 1;switch(t<0&&(t=-t),t/o){case 1:case 3:return 0;case 2:return-1}return Math.cos(t)},sin:function(t){if(0===t)return 0;var e=1;switch(t<0&&(e=-1),t/o){case 1:return e;case 2:return 0;case 3:return-e}return Math.sin(t)},removeFromArray:function(t,e){var i=t.indexOf(e);return-1!==i&&t.splice(i,1),t},getRandomInt:function(t,e){return Math.floor(Math.random()*(e-t+1))+t},degreesToRadians:function(t){return t*s},radiansToDegrees:function(t){return t/s},rotatePoint:function(t,i,r){var n=new e.Point(t.x-i.x,t.y-i.y);return e.util.rotateVector(n,r).addEquals(i)},rotateVector:function(t,i){var r=e.util.sin(i),n=e.util.cos(i),s=t.x*n-t.y*r,o=t.x*r+t.y*n;return new e.Point(s,o)},createVector:function(t,i){return new e.Point(i.x-t.x,i.y-t.y)},calcAngleBetweenVectors:function(t,e){return Math.acos((t.x*e.x+t.y*e.y)/(Math.hypot(t.x,t.y)*Math.hypot(e.x,e.y)))},getHatVector:function(t){return new e.Point(t.x,t.y).scalarMultiply(1/Math.hypot(t.x,t.y))},getBisector:function(t,i,r){var n=e.util.createVector(t,i),s=e.util.createVector(t,r),o=e.util.calcAngleBetweenVectors(n,s),a=o*(0===e.util.calcAngleBetweenVectors(e.util.rotateVector(n,o),s)?1:-1)/2;return{vector:e.util.getHatVector(e.util.rotateVector(n,a)),angle:o}},projectStrokeOnPoints:function(t,i,r){var n=[],s=i.strokeWidth/2,o=i.strokeUniform?new e.Point(1/i.scaleX,1/i.scaleY):new e.Point(1,1),a=function(t){var i=s/Math.hypot(t.x,t.y);return new e.Point(t.x*i*o.x,t.y*i*o.y)};return t.length<=1||t.forEach((function(h,c){var l,u,f=new e.Point(h.x,h.y);0===c?(u=t[c+1],l=r?a(e.util.createVector(u,f)).addEquals(f):t[t.length-1]):c===t.length-1?(l=t[c-1],u=r?a(e.util.createVector(l,f)).addEquals(f):t[0]):(l=t[c-1],u=t[c+1]);var d,g,p=e.util.getBisector(f,l,u),v=p.vector,m=p.angle;if("miter"===i.strokeLineJoin&&(d=-s/Math.sin(m/2),g=new e.Point(v.x*d*o.x,v.y*d*o.y),Math.hypot(g.x,g.y)/s<=i.strokeMiterLimit))return n.push(f.add(g)),void n.push(f.subtract(g));d=-s*Math.SQRT2,g=new e.Point(v.x*d*o.x,v.y*d*o.y),n.push(f.add(g)),n.push(f.subtract(g))})),n},transformPoint:function(t,i,r){return r?new e.Point(i[0]*t.x+i[2]*t.y,i[1]*t.x+i[3]*t.y):new e.Point(i[0]*t.x+i[2]*t.y+i[4],i[1]*t.x+i[3]*t.y+i[5])},sendPointToPlane:function(t,i,r){var n=e.util.invertTransform(r||e.iMatrix),s=e.util.multiplyTransformMatrices(n,i||e.iMatrix);return e.util.transformPoint(t,s)},transformPointRelativeToCanvas:function(t,i,r,n){if("child"!==r&&"sibling"!==r)throw new Error("fabric.js: received bad argument "+r);if("child"!==n&&"sibling"!==n)throw new Error("fabric.js: received bad argument "+n);if(r===n)return t;var s=i.viewportTransform;return e.util.transformPoint(t,"child"===n?e.util.invertTransform(s):s)},makeBoundingBoxFromPoints:function(t,i){if(i)for(var r=0;r0&&(e>r?e-=r:e=0,i>r?i-=r:i=0);var n,s=!0,o=t.getImageData(e,i,2*r||1,2*r||1),a=o.data.length;for(n=3;n=n?s-n:2*Math.PI-(n-s)}function a(t,i,r){for(var n=r[1],a=r[2],h=r[3],c=r[4],l=r[5],u=function(t,i,r,n,a,h,c){var l=Math.PI,u=c*l/180,f=e.util.sin(u),d=e.util.cos(u),g=0,p=0,v=-d*t*.5-f*i*.5,m=-d*i*.5+f*t*.5,b=(r=Math.abs(r))*r,y=(n=Math.abs(n))*n,_=m*m,x=v*v,C=b*y-b*_-y*x,w=0;if(C<0){var S=Math.sqrt(1-C/(b*y));r*=S,n*=S}else w=(a===h?-1:1)*Math.sqrt(C/(b*_+y*x));var T=w*r*m/n,O=-w*n*v/r,P=d*T-f*O+.5*t,k=f*T+d*O+.5*i,j=o(1,0,(v-T)/r,(m-O)/n),E=o((v-T)/r,(m-O)/n,(-v-T)/r,(-m-O)/n);0===h&&E>0?E-=2*l:1===h&&E<0&&(E+=2*l);for(var A=Math.ceil(Math.abs(E/l*2)),M=[],D=E/A,F=8/3*Math.sin(D/4)*Math.sin(D/4)/Math.sin(D/2),I=j+D,L=0;L1e-4;)i=a(s),n=s,(r=h(c.x,c.y,i.x,i.y))+o>e?(s-=l,l/=2):(c=i,s+=l,o+=r);return i.angle=u(n),i}function p(t){for(var e,i,r,n,s=0,o=t.length,a=0,g=0,p=0,v=0,m=[],b=0;bw)for(var T=1,O=v.length;T2;for(i=i||0,l&&(h=t[2].xt[r-2].x?1:s.x===t[r-2].x?0:-1,c=s.y>t[r-2].y?1:s.y===t[r-2].y?0:-1),n.push(["L",s.x+h*i,s.y+c*i]),n},e.util.getPathSegmentsInfo=p,e.util.getBoundsOfCurve=function(t,r,n,s,o,a,h,c){var l;if(e.cachesBoundsOfCurve&&(l=i.call(arguments),e.boundsOfCurveCache[l]))return e.boundsOfCurveCache[l];var u,f,d,g,p,v,m,b,y=Math.sqrt,_=Math.min,x=Math.max,C=Math.abs,w=[],S=[[],[]];f=6*t-12*n+6*o,u=-3*t+9*n-9*o+3*h,d=3*n-3*t;for(var T=0;T<2;++T)if(T>0&&(f=6*r-12*s+6*a,u=-3*r+9*s-9*a+3*c,d=3*s-3*r),C(u)<1e-12){if(C(f)<1e-12)continue;0<(g=-d/f)&&g<1&&w.push(g)}else(m=f*f-4*d*u)<0||(0<(p=(-f+(b=y(m)))/(2*u))&&p<1&&w.push(p),0<(v=(-f-b)/(2*u))&&v<1&&w.push(v));for(var O,P,k,j=w.length,E=j;j--;)O=(k=1-(g=w[j]))*k*k*t+3*k*k*g*n+3*k*g*g*o+g*g*g*h,S[0][j]=O,P=k*k*k*r+3*k*k*g*s+3*k*g*g*a+g*g*g*c,S[1][j]=P;S[0][E]=t,S[1][E]=r,S[0][E+1]=h,S[1][E+1]=c;var A=[{x:_.apply(null,S[0]),y:_.apply(null,S[1])},{x:x.apply(null,S[0]),y:x.apply(null,S[1])}];return e.cachesBoundsOfCurve&&(e.boundsOfCurveCache[l]=A),A},e.util.getPointOnPath=function(t,i,r){r||(r=p(t));for(var n=0;i-r[n].length>0&&n=e}))}}}(void 0!==t?t:window),function(t){function e(t,i,r){if(r)if(!fabric.isLikelyNode&&i instanceof Element)t=i;else if(i instanceof Array){t=[];for(var n=0,s=i.length;n57343)return t.charAt(e);if(55296<=i&&i<=56319){if(t.length<=e+1)throw"High surrogate without following low surrogate";var r=t.charCodeAt(e+1);if(56320>r||r>57343)throw"High surrogate without following low surrogate";return t.charAt(e)+t.charAt(e+1)}if(0===e)throw"Low surrogate without preceding high surrogate";var n=t.charCodeAt(e-1);if(55296>n||n>56319)throw"Low surrogate without preceding high surrogate";return!1}fabric.util.string={camelize:function(t){return t.replace(/-+(.)?/g,(function(t,e){return e?e.toUpperCase():""}))},capitalize:function(t,e){return t.charAt(0).toUpperCase()+(e?t.slice(1):t.slice(1).toLowerCase())},escapeXml:function(t){return t.replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")},graphemeSplit:function(t){var i,r=0,n=[];for(r=0;r1?i.apply(this,e.call(arguments,1)):i.call(this):console.log("tried to callSuper "+t+", method not found in prototype chain",this)}addMethods=function(t,e,i){for(var r in e)r in t.prototype&&"function"==typeof t.prototype[r]&&(e[r]+"").indexOf("callSuper")>-1?t.prototype[r]=function(t){return function(){var r=this.constructor.superclass;this.constructor.superclass=i;var n=e[t].apply(this,arguments);if(this.constructor.superclass=r,"initialize"!==t)return n}}(r):t.prototype[r]=e[r],IS_DONTENUM_BUGGY&&(e.toString!==Object.prototype.toString&&(t.prototype.toString=e.toString),e.valueOf!==Object.prototype.valueOf&&(t.prototype.valueOf=e.valueOf))},fabric.util.createClass=function(){var t=null,s=e.call(arguments,0);function o(){this.initialize.apply(this,arguments)}"function"==typeof s[0]&&(t=s.shift()),o.superclass=t,o.subclasses=[],t&&(r.prototype=t.prototype,o.prototype=new r,t.subclasses.push(o));for(var a=0,h=s.length;a-1||"touch"===t.pointerType},void 0!==t||window,r=fabric.document.createElement("div"),n="string"==typeof r.style.opacity,s="string"==typeof r.style.filter,o=/alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,a=function(t){return t},n?a=function(t,e){return t.style.opacity=e,t}:s&&(a=function(t,e){var i=t.style;return t.currentStyle&&!t.currentStyle.hasLayout&&(i.zoom=1),o.test(i.filter)?(e=e>=.9999?"":"alpha(opacity="+100*e+")",i.filter=i.filter.replace(o,e)):i.filter+=" alpha(opacity="+100*e+")",t}),fabric.util.setStyle=function(t,e){var i=t.style;if(!i)return t;if("string"==typeof e)return t.style.cssText+=";"+e,e.indexOf("opacity")>-1?a(t,e.match(/opacity:\s*(\d?\.?\d*)/)[1]):t;for(var r in e)if("opacity"===r)a(t,e[r]);else{var n="float"===r||"cssFloat"===r?void 0===i.styleFloat?"cssFloat":"styleFloat":r;i.setProperty(n,e[r])}return t},function(e){var i=Array.prototype.slice;var r,n,s,o,a=function(t){return i.call(t,0)};try{r=a(fabric.document.childNodes)instanceof Array}catch(t){}function h(t,e){var i=fabric.document.createElement(t);for(var r in e)"class"===r?i.className=e[r]:"for"===r?i.htmlFor=e[r]:i.setAttribute(r,e[r]);return i}function c(t){for(var e=0,i=0,r=fabric.document.documentElement,n=fabric.document.body||{scrollLeft:0,scrollTop:0};t&&(t.parentNode||t.host)&&((t=t.parentNode||t.host)===fabric.document?(e=n.scrollLeft||r.scrollLeft||0,i=n.scrollTop||r.scrollTop||0):(e+=t.scrollLeft||0,i+=t.scrollTop||0),1!==t.nodeType||"fixed"!==t.style.position););return{left:e,top:i}}r||(a=function(t){for(var e=new Array(t.length),i=t.length;i--;)e[i]=t[i];return e}),n=fabric.document.defaultView&&fabric.document.defaultView.getComputedStyle?function(t,e){var i=fabric.document.defaultView.getComputedStyle(t,null);return i?i[e]:void 0}:function(t,e){var i=t.style[e];return!i&&t.currentStyle&&(i=t.currentStyle[e]),i},void 0!==t||window,s=fabric.document.documentElement.style,o="userSelect"in s?"userSelect":"MozUserSelect"in s?"MozUserSelect":"WebkitUserSelect"in s?"WebkitUserSelect":"KhtmlUserSelect"in s?"KhtmlUserSelect":"",fabric.util.makeElementUnselectable=function(t){return void 0!==t.onselectstart&&(t.onselectstart=fabric.util.falseFunction),o?t.style[o]="none":"string"==typeof t.unselectable&&(t.unselectable="on"),t},fabric.util.makeElementSelectable=function(t){return void 0!==t.onselectstart&&(t.onselectstart=null),o?t.style[o]="":"string"==typeof t.unselectable&&(t.unselectable=""),t},fabric.util.setImageSmoothing=function(t,e){t.imageSmoothingEnabled=t.imageSmoothingEnabled||t.webkitImageSmoothingEnabled||t.mozImageSmoothingEnabled||t.msImageSmoothingEnabled||t.oImageSmoothingEnabled,t.imageSmoothingEnabled=e},fabric.util.getById=function(t){return"string"==typeof t?fabric.document.getElementById(t):t},fabric.util.toArray=a,fabric.util.addClass=function(t,e){t&&-1===(" "+t.className+" ").indexOf(" "+e+" ")&&(t.className+=(t.className?" ":"")+e)},fabric.util.makeElement=h,fabric.util.wrapElement=function(t,e,i){return"string"==typeof e&&(e=h(e,i)),t.parentNode&&t.parentNode.replaceChild(e,t),e.appendChild(t),e},fabric.util.getScrollLeftTop=c,fabric.util.getElementOffset=function(t){var e,i,r=t&&t.ownerDocument,s={left:0,top:0},o={left:0,top:0},a={borderLeftWidth:"left",borderTopWidth:"top",paddingLeft:"left",paddingTop:"top"};if(!r)return o;for(var h in a)o[a[h]]+=parseInt(n(t,h),10)||0;return e=r.documentElement,void 0!==t.getBoundingClientRect&&(s=t.getBoundingClientRect()),i=c(t),{left:s.left+i.left-(e.clientLeft||0)+o.left,top:s.top+i.top-(e.clientTop||0)+o.top}},fabric.util.getNodeCanvas=function(t){var e=fabric.jsdomImplForWrapper(t);return e._canvas||e._image},fabric.util.cleanUpJsdomNode=function(t){if(fabric.isLikelyNode){var e=fabric.jsdomImplForWrapper(t);e&&(e._image=null,e._canvas=null,e._currentSrc=null,e._attributes=null,e._classList=null)}}}(void 0!==t||window),function(t){function e(){}fabric.util.request=function(t,i){i||(i={});var r=i.method?i.method.toUpperCase():"GET",n=i.onComplete||function(){},s=new fabric.window.XMLHttpRequest,o=i.body||i.parameters;return s.onreadystatechange=function(){4===s.readyState&&(n(s),s.onreadystatechange=e)},"GET"===r&&(o=null,"string"==typeof i.parameters&&(t=function(t,e){return t+(/\?/.test(t)?"&":"?")+e}(t,i.parameters))),s.open(r,t,!0),"POST"!==r&&"PUT"!==r||s.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),s.send(o),s}}(void 0!==t||window),fabric.log=console.log,fabric.warn=console.warn,function(){var t=[];function e(){return!1}function i(t,e,i,r){return-i*Math.cos(t/r*(Math.PI/2))+i+e}fabric.util.object.extend(t,{cancelAll:function(){var t=this.splice(0);return t.forEach((function(t){t.cancel()})),t},cancelByCanvas:function(t){if(!t)return[];var e=this.filter((function(e){return"object"==typeof e.target&&e.target.canvas===t}));return e.forEach((function(t){t.cancel()})),e},cancelByTarget:function(t){var e=this.findAnimationsByTarget(t);return e.forEach((function(t){t.cancel()})),e},findAnimationIndex:function(t){return this.indexOf(this.findAnimation(t))},findAnimation:function(t){return this.find((function(e){return e.cancel===t}))},findAnimationsByTarget:function(t){return t?this.filter((function(e){return e.target===t})):[]}});var r=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(t){return fabric.window.setTimeout(t,1e3/60)},n=fabric.window.cancelAnimationFrame||fabric.window.clearTimeout;function s(){return r.apply(fabric.window,arguments)}fabric.util.animate=function(t){t||(t={});var r,n=!1,o=function(){var t=fabric.runningAnimations.indexOf(r);return t>-1&&fabric.runningAnimations.splice(t,1)[0]};r=Object.assign({},t,{cancel:function(){return n=!0,o()},currentValue:"startValue"in t?t.startValue:0,completionRate:0,durationRate:0}),fabric.runningAnimations.push(r);var a=function(a){var h,c=a||+new Date,l=t.duration||500,u=c+l,f=t.onChange||e,d=t.abort||e,g=t.onComplete||e,p=t.easing||i,v="startValue"in t&&t.startValue.length>0,m="startValue"in t?t.startValue:0,b="endValue"in t?t.endValue:100,y=t.byValue||(v?m.map((function(t,e){return b[e]-m[e]})):b-m);t.onStart&&t.onStart(),function t(e){var i=(h=e||+new Date)>u?l:h-c,a=i/l,_=v?m.map((function(t,e){return p(i,m[e],y[e],l)})):p(i,m,y,l),x=v?Math.abs((_[0]-m[0])/y[0]):Math.abs((_-m)/y);if(r.currentValue=v?_.slice():_,r.completionRate=x,r.durationRate=a,!n){if(!d(_,x,a))return h>u?(r.currentValue=v?b.slice():b,r.completionRate=1,r.durationRate=1,f(v?b.slice():b,1,1),g(b,1,1),void o()):(f(_,x,a),void s(t));o()}}(c)};return t.delay?setTimeout((function(){s(a)}),t.delay):s(a),r.cancel},fabric.util.requestAnimFrame=s,fabric.util.cancelAnimFrame=function(){return n.apply(fabric.window,arguments)},fabric.runningAnimations=t}(void 0!==t||window),function(t){function e(t,e,i){var r="rgba("+parseInt(t[0]+i*(e[0]-t[0]),10)+","+parseInt(t[1]+i*(e[1]-t[1]),10)+","+parseInt(t[2]+i*(e[2]-t[2]),10);return r+=","+(t&&e?parseFloat(t[3]+i*(e[3]-t[3])):1),r+=")"}fabric.util.animateColor=function(t,i,r,n){var s=new fabric.Color(t).getSource(),o=new fabric.Color(i).getSource(),a=n.onComplete,h=n.onChange;return n=n||{},fabric.util.animate(Object.assign(n,{duration:r||500,startValue:s,endValue:o,byValue:o,easing:function(t,i,r,s){return e(i,r,n.colorEasing?n.colorEasing(t,s):1-Math.cos(t/s*(Math.PI/2)))},onComplete:function(t,i,r){if(a)return a(e(o,o,0),i,r)},onChange:function(t,i,r){if(h){if(Array.isArray(t))return h(e(t,t,0),i,r);h(t,i,r)}}}))}}(void 0!==t||window),function(t){function e(t,e,i,r){return t-1&&l>-1&&l-1)&&(e="stroke")}else{if("href"===t||"xlink:href"===t||"font"===t)return e;if("imageSmoothing"===t)return"optimizeQuality"===e;a=h?e.map(n):n(e,o)}}else e="";return!h&&isNaN(a)?e:a}function f(t){return new RegExp("^("+t.join("|")+")\\b","i")}function d(t,e){var i,r,n,s,o=[];for(n=0,s=e.length;n1;)h.shift(),c=i.util.multiplyTransformMatrices(c,h[0]);return c}}(void 0!==t||window);var m=new RegExp("^\\s*("+i.reNum+"+)\\s*,?\\s*("+i.reNum+"+)\\s*,?\\s*("+i.reNum+"+)\\s*,?\\s*("+i.reNum+"+)\\s*$");function b(t){if(!i.svgViewBoxElementsRegEx.test(t.nodeName))return{};var e,r,s,o,a,h,c=t.getAttribute("viewBox"),l=1,u=1,f=t.getAttribute("width"),d=t.getAttribute("height"),g=t.getAttribute("x")||0,p=t.getAttribute("y")||0,v=t.getAttribute("preserveAspectRatio")||"",b=!c||!(c=c.match(m)),y=!f||!d||"100%"===f||"100%"===d,_=b&&y,x={},C="",w=0,S=0;if(x.width=0,x.height=0,x.toBeParsed=_,b&&(g||p)&&t.parentNode&&"#document"!==t.parentNode.nodeName&&(C=" translate("+n(g)+" "+n(p)+") ",a=(t.getAttribute("transform")||"")+C,t.setAttribute("transform",a),t.removeAttribute("x"),t.removeAttribute("y")),_)return x;if(b)return x.width=n(f),x.height=n(d),x;if(e=-parseFloat(c[1]),r=-parseFloat(c[2]),s=parseFloat(c[3]),o=parseFloat(c[4]),x.minX=e,x.minY=r,x.viewBoxWidth=s,x.viewBoxHeight=o,y?(x.width=s,x.height=o):(x.width=n(f),x.height=n(d),l=x.width/s,u=x.height/o),"none"!==(v=i.util.parsePreserveAspectRatioAttribute(v)).alignX&&("meet"===v.meetOrSlice&&(u=l=l>u?u:l),"slice"===v.meetOrSlice&&(u=l=l>u?l:u),w=x.width-s*l,S=x.height-o*l,"Mid"===v.alignX&&(w/=2),"Mid"===v.alignY&&(S/=2),"Min"===v.alignX&&(w=0),"Min"===v.alignY&&(S=0)),1===l&&1===u&&0===e&&0===r&&0===g&&0===p)return x;if((g||p)&&"#document"!==t.parentNode.nodeName&&(C=" translate("+n(g)+" "+n(p)+") "),a=C+" matrix("+l+" 0 0 "+u+" "+(e*l+w)+" "+(r*u+S)+") ","svg"===t.nodeName){for(h=t.ownerDocument.createElementNS(i.svgNS,"g");t.firstChild;)h.appendChild(t.firstChild);t.appendChild(h)}else(h=t).removeAttribute("x"),h.removeAttribute("y"),a=h.getAttribute("transform")+a;return h.setAttribute("transform",a),x}function y(t,e){var i="xlink:href",r=v(t,e.getAttribute(i).slice(1));if(r&&r.getAttribute(i)&&y(t,r),["gradientTransform","x1","x2","y1","y2","gradientUnits","cx","cy","r","fx","fy"].forEach((function(t){r&&!e.hasAttribute(t)&&r.hasAttribute(t)&&e.setAttribute(t,r.getAttribute(t))})),!e.children.length)for(var n=r.cloneNode(!0);n.firstChild;)e.appendChild(n.firstChild);e.removeAttribute(i)}i.parseSVGDocument=function(t,e,r,n){if(t){!function(t){for(var e=d(t,["use","svg:use"]),r=0;e.length&&rt.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,e){return void 0===e&&(e=.5),e=Math.max(Math.min(1,e),0),new i(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)},distanceFrom:function(t){var e=this.x-t.x,i=this.y-t.y;return Math.sqrt(e*e+i*i)},midPointFrom:function(t){return this.lerp(t)},min:function(t){return new i(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new i(Math.max(this.x,t.x),Math.max(this.y,t.y))},toString:function(){return this.x+","+this.y},setXY:function(t,e){return this.x=t,this.y=e,this},setX:function(t){return this.x=t,this},setY:function(t){return this.y=t,this},setFromPoint:function(t){return this.x=t.x,this.y=t.y,this},swap:function(t){var e=this.x,i=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=i},clone:function(){return new i(this.x,this.y)}})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});function i(t){this.status=t,this.points=[]}e.Intersection?e.warn("fabric.Intersection is already defined"):(e.Intersection=i,e.Intersection.prototype={constructor:i,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},e.Intersection.intersectLineLine=function(t,r,n,s){var o,a=(s.x-n.x)*(t.y-n.y)-(s.y-n.y)*(t.x-n.x),h=(r.x-t.x)*(t.y-n.y)-(r.y-t.y)*(t.x-n.x),c=(s.y-n.y)*(r.x-t.x)-(s.x-n.x)*(r.y-t.y);if(0!==c){var l=a/c,u=h/c;0<=l&&l<=1&&0<=u&&u<=1?(o=new i("Intersection")).appendPoint(new e.Point(t.x+l*(r.x-t.x),t.y+l*(r.y-t.y))):o=new i}else o=new i(0===a||0===h?"Coincident":"Parallel");return o},e.Intersection.intersectLinePolygon=function(t,e,r){var n,s,o,a,h=new i,c=r.length;for(a=0;a0&&(h.status="Intersection"),h},e.Intersection.intersectPolygonPolygon=function(t,e){var r,n=new i,s=t.length;for(r=0;r0&&(n.status="Intersection"),n},e.Intersection.intersectPolygonRectangle=function(t,r,n){var s=r.min(n),o=r.max(n),a=new e.Point(o.x,s.y),h=new e.Point(s.x,o.y),c=i.intersectLinePolygon(s,a,t),l=i.intersectLinePolygon(a,o,t),u=i.intersectLinePolygon(o,h,t),f=i.intersectLinePolygon(h,s,t),d=new i;return d.appendPoints(c.points),d.appendPoints(l.points),d.appendPoints(u.points),d.appendPoints(f.points),d.points.length>0&&(d.status="Intersection"),d})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});function i(t){t?this._tryParsingColor(t):this.setSource([0,0,0,1])}function r(t,e,i){return i<0&&(i+=1),i>1&&(i-=1),i<1/6?t+6*(e-t)*i:i<.5?e:i<2/3?t+(e-t)*(2/3-i)*6:t}e.Color?e.warn("fabric.Color is already defined."):(e.Color=i,e.Color.prototype={_tryParsingColor:function(t){var e;t in i.colorNameMap&&(t=i.colorNameMap[t]),"transparent"===t&&(e=[255,255,255,0]),e||(e=i.sourceFromHex(t)),e||(e=i.sourceFromRgb(t)),e||(e=i.sourceFromHsl(t)),e||(e=[0,0,0,1]),e&&this.setSource(e)},_rgbToHsl:function(t,i,r){t/=255,i/=255,r/=255;var n,s,o,a=e.util.array.max([t,i,r]),h=e.util.array.min([t,i,r]);if(o=(a+h)/2,a===h)n=s=0;else{var c=a-h;switch(s=o>.5?c/(2-a-h):c/(a+h),a){case t:n=(i-r)/c+(i0)-(t<0)||+t};function d(t,e){var i=t.getTotalAngle()+u(Math.atan2(e.y,e.x))+360;return Math.round(i%360/45)}function g(t,e){var i=e.transform.target,r=i.canvas;r&&r.fire("object:"+t,Object.assign({},e,{target:i})),i.fire(t,e)}function p(t,e){var i=e.canvas,r=t[i.uniScaleKey];return i.uniformScaling&&!r||!i.uniformScaling&&r}function v(t){return t.originX===c&&t.originY===c}function m(t,e,i){var r=t.lockScalingX,n=t.lockScalingY;return!(!r||!n)||(!(e||!r&&!n||!i)||(!(!r||"x"!==e)||!(!n||"y"!==e)))}function b(t,e,i,r){return{e:t,transform:e,pointer:{x:i,y:r}}}function y(t){return function(e,i,r,n){var s=i.target,o=s.getRelativeCenterPoint(),a=s.translateToOriginPoint(o,i.originX,i.originY),h=t(e,i,r,n);return s.setPositionByOrigin(a,i.originX,i.originY),h}}function _(t,e){return function(i,r,n,s){var o=e(i,r,n,s);return o&&g(t,b(i,r,n,s)),o}}function x(t,i,r,n,s){var o=t.target,a=o.controls[t.corner],h=o.canvas.getZoom(),c=o.padding/h,l=o.normalizePoint(new e.Point(n,s),i,r);return l.x>=c&&(l.x-=c),l.x<=-c&&(l.x+=c),l.y>=c&&(l.y-=c),l.y<=c&&(l.y+=c),l.x-=a.offsetX,l.y-=a.offsetY,l}function C(t){return t.flipX!==t.flipY}function w(t,e,i,r,n){if(0!==t[e]){var s=n/t._getTransformedDimensions()[r]*t[i];t.set(i,s)}}function S(t,e,i,r){var n,c=e.target,l=c._getTransformedDimensions({skewX:0,skewY:c.skewY}),f=x(e,e.originX,e.originY,i,r),d=Math.abs(2*f.x)-l.x,g=c.skewX;d<2?n=0:(n=u(Math.atan2(d/c.scaleX,l.y/c.scaleY)),e.originX===s&&e.originY===h&&(n=-n),e.originX===a&&e.originY===o&&(n=-n),C(c)&&(n=-n));var p=g!==n;if(p){var v=c._getTransformedDimensions().y;c.set("skewX",n),w(c,"skewY","scaleY","y",v)}return p}function T(t,e,i,r){var n,c=e.target,l=c._getTransformedDimensions({skewX:c.skewX,skewY:0}),f=x(e,e.originX,e.originY,i,r),d=Math.abs(2*f.y)-l.y,g=c.skewY;d<2?n=0:(n=u(Math.atan2(d/c.scaleY,l.x/c.scaleX)),e.originX===s&&e.originY===h&&(n=-n),e.originX===a&&e.originY===o&&(n=-n),C(c)&&(n=-n));var p=g!==n;if(p){var v=c._getTransformedDimensions().x;c.set("skewY",n),w(c,"skewX","scaleX","x",v)}return p}function O(t,e,i,r,n){n=n||{};var s,o,a,h,c,u,d=e.target,g=d.lockScalingX,b=d.lockScalingY,y=n.by,_=p(t,d),C=m(d,y,_),w=e.gestureScale;if(C)return!1;if(w)o=e.scaleX*w,a=e.scaleY*w;else{if(s=x(e,e.originX,e.originY,i,r),c="y"!==y?f(s.x):1,u="x"!==y?f(s.y):1,e.signX||(e.signX=c),e.signY||(e.signY=u),d.lockScalingFlip&&(e.signX!==c||e.signY!==u))return!1;if(h=d._getTransformedDimensions(),_&&!y){var S=Math.abs(s.x)+Math.abs(s.y),T=e.original,O=S/(Math.abs(h.x*T.scaleX/d.scaleX)+Math.abs(h.y*T.scaleY/d.scaleY));o=T.scaleX*O,a=T.scaleY*O}else o=Math.abs(s.x*d.scaleX/h.x),a=Math.abs(s.y*d.scaleY/h.y);v(e)&&(o*=2,a*=2),e.signX!==c&&"y"!==y&&(e.originX=l[e.originX],o*=-1,e.signX=c),e.signY!==u&&"x"!==y&&(e.originY=l[e.originY],a*=-1,e.signY=u)}var P=d.scaleX,k=d.scaleY;return y?("x"===y&&d.set("scaleX",o),"y"===y&&d.set("scaleY",a)):(!g&&d.set("scaleX",o),!b&&d.set("scaleY",a)),P!==d.scaleX||k!==d.scaleY}n.scaleCursorStyleHandler=function(t,e,r){var n=p(t,r),s="";if(0!==e.x&&0===e.y?s="x":0===e.x&&0!==e.y&&(s="y"),m(r,s,n))return"not-allowed";var o=d(r,e);return i[o]+"-resize"},n.skewCursorStyleHandler=function(t,e,i){var n="not-allowed";if(0!==e.x&&i.lockSkewingY)return n;if(0!==e.y&&i.lockSkewingX)return n;var s=d(i,e)%4;return r[s]+"-resize"},n.scaleSkewCursorStyleHandler=function(t,e,i){return t[i.canvas.altActionKey]?n.skewCursorStyleHandler(t,e,i):n.scaleCursorStyleHandler(t,e,i)},n.rotationWithSnapping=_("rotating",y((function(t,e,i,r){var n=e,s=n.target,o=s.translateToOriginPoint(s.getRelativeCenterPoint(),n.originX,n.originY);if(s.lockRotation)return!1;var a,h=Math.atan2(n.ey-o.y,n.ex-o.x),c=Math.atan2(r-o.y,i-o.x),l=u(c-h+n.theta);if(s.snapAngle>0){var f=s.snapAngle,d=s.snapThreshold||f,g=Math.ceil(l/f)*f,p=Math.floor(l/f)*f;Math.abs(l-p)0){var s=e.target,o=s.strokeWidth/(s.strokeUniform?s.scaleX:1),a=v(e)?2:1,h=s.width,c=Math.ceil(Math.abs(n.x*a/s.scaleX)-o);return s.set("width",Math.max(c,0)),h!==s.width}return!1}))),n.skewHandlerX=function(t,e,i,r){var n,h=e.target,l=h.skewX,u=e.originY;return!h.lockSkewingX&&(0===l?n=x(e,c,c,i,r).x>0?s:a:(l>0&&(n=u===o?s:a),l<0&&(n=u===o?a:s),C(h)&&(n=n===s?a:s)),e.originX=n,_("skewing",y(S))(t,e,i,r))},n.skewHandlerY=function(t,e,i,r){var n,a=e.target,l=a.skewY,u=e.originX;return!a.lockSkewingY&&(0===l?n=x(e,c,c,i,r).y>0?o:h:(l>0&&(n=u===s?o:h),l<0&&(n=u===s?h:o),C(a)&&(n=n===o?h:o)),e.originY=n,_("skewing",y(T))(t,e,i,r))},n.dragHandler=function(t,e,i,r){var n=e.target,s=i-e.offsetX,o=r-e.offsetY,a=!n.get("lockMovementX")&&n.left!==s,h=!n.get("lockMovementY")&&n.top!==o;return a&&n.set("left",s),h&&n.set("top",o),(a||h)&&g("moving",b(t,e,i,r)),a||h},n.scaleOrSkewActionName=function(t,e,i){var r=t[i.canvas.altActionKey];return 0===e.x?r?"skewX":"scaleY":0===e.y?r?"skewY":"scaleX":void 0},n.rotationStyleHandler=function(t,e,i){return i.lockRotation?"not-allowed":e.cursorStyle},n.fireEvent=g,n.wrapWithFixedAnchor=y,n.wrapWithFireEvent=_,n.getLocalPoint=x,e.controlsUtils=n}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.util.degreesToRadians,r=e.controlsUtils;r.renderCircleControl=function(t,e,i,r,n){r=r||{};var s,o=this.sizeX||r.cornerSize||n.cornerSize,a=this.sizeY||r.cornerSize||n.cornerSize,h=void 0!==r.transparentCorners?r.transparentCorners:n.transparentCorners,c=h?"stroke":"fill",l=!h&&(r.cornerStrokeColor||n.cornerStrokeColor),u=e,f=i;t.save(),t.fillStyle=r.cornerColor||n.cornerColor,t.strokeStyle=r.cornerStrokeColor||n.cornerStrokeColor,o>a?(s=o,t.scale(1,a/o),f=i*o/a):a>o?(s=a,t.scale(o/a,1),u=e*a/o):s=o,t.lineWidth=1,t.beginPath(),t.arc(u,f,s/2,0,2*Math.PI,!1),t[c](),l&&t.stroke(),t.restore()},r.renderSquareControl=function(t,e,r,n,s){n=n||{};var o=this.sizeX||n.cornerSize||s.cornerSize,a=this.sizeY||n.cornerSize||s.cornerSize,h=void 0!==n.transparentCorners?n.transparentCorners:s.transparentCorners,c=h?"stroke":"fill",l=!h&&(n.cornerStrokeColor||s.cornerStrokeColor),u=o/2,f=a/2;t.save(),t.fillStyle=n.cornerColor||s.cornerColor,t.strokeStyle=n.cornerStrokeColor||s.cornerStrokeColor,t.lineWidth=1,t.translate(e,r);var d=s.getTotalAngle();t.rotate(i(d)),t[c+"Rect"](-u,-f,o,a),l&&t.strokeRect(-u,-f,o,a),t.restore()}}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});e.Control=function(t){for(var e in t)this[e]=t[e]},e.Control.prototype={visible:!0,actionName:"scale",angle:0,x:0,y:0,offsetX:0,offsetY:0,sizeX:null,sizeY:null,touchSizeX:null,touchSizeY:null,cursorStyle:"crosshair",withConnection:!1,actionHandler:function(){},mouseDownHandler:function(){},mouseUpHandler:function(){},getActionHandler:function(){return this.actionHandler},getMouseDownHandler:function(){return this.mouseDownHandler},getMouseUpHandler:function(){return this.mouseUpHandler},cursorStyleHandler:function(t,e){return e.cursorStyle},getActionName:function(t,e){return e.actionName},getVisibility:function(t,e){var i=t._controlsVisibility;return i&&void 0!==i[e]?i[e]:this.visible},setVisibility:function(t){this.visible=t},positionHandler:function(t,i){return e.util.transformPoint({x:this.x*t.x+this.offsetX,y:this.y*t.y+this.offsetY},i)},calcCornerCoords:function(t,i,r,n,s){var o,a,h,c,l=s?this.touchSizeX:this.sizeX,u=s?this.touchSizeY:this.sizeY;if(l&&u&&l!==u){var f=Math.atan2(u,l),d=Math.sqrt(l*l+u*u)/2,g=f-e.util.degreesToRadians(t),p=Math.PI/2-f-e.util.degreesToRadians(t);o=d*e.util.cos(g),a=d*e.util.sin(g),h=d*e.util.cos(p),c=d*e.util.sin(p)}else{d=.7071067812*(l&&u?l:i);g=e.util.degreesToRadians(45-t);o=h=d*e.util.cos(g),a=c=d*e.util.sin(g)}return{tl:{x:r-c,y:n-h},tr:{x:r+o,y:n-a},bl:{x:r-o,y:n+a},br:{x:r+c,y:n+h}}},render:function(t,i,r,n,s){if("circle"===((n=n||{}).cornerStyle||s.cornerStyle))e.controlsUtils.renderCircleControl.call(this,t,i,r,n,s);else e.controlsUtils.renderSquareControl.call(this,t,i,r,n,s)}}}(void 0!==t?t:window),function(t){function e(t,e){var i,r,n,s,o=t.getAttribute("style"),a=t.getAttribute("offset")||0;if(a=(a=parseFloat(a)/(/%$/.test(a)?100:1))<0?0:a>1?1:a,o){var h=o.split(/\s*;\s*/);for(""===h[h.length-1]&&h.pop(),s=h.length;s--;){var c=h[s].split(/\s*:\s*/),l=c[0].trim(),u=c[1].trim();"stop-color"===l?i=u:"stop-opacity"===l&&(n=u)}}return i||(i=t.getAttribute("stop-color")||"rgb(0,0,0)"),n||(n=t.getAttribute("stop-opacity")),r=(i=new fabric.Color(i)).getAlpha(),n=isNaN(parseFloat(n))?1:parseFloat(n),n*=r*e,{offset:a,color:i.toRgb(),opacity:n}}fabric.Gradient=fabric.util.createClass({offsetX:0,offsetY:0,gradientTransform:null,gradientUnits:"pixels",type:"linear",initialize:function(t){t||(t={}),t.coords||(t.coords={});var e,i=this;Object.keys(t).forEach((function(e){i[e]=t[e]})),this.id?this.id+="_"+fabric.Object.__uid++:this.id=fabric.Object.__uid++,e={x1:t.coords.x1||0,y1:t.coords.y1||0,x2:t.coords.x2||0,y2:t.coords.y2||0},"radial"===this.type&&(e.r1=t.coords.r1||0,e.r2=t.coords.r2||0),this.coords=e,this.colorStops=t.colorStops.slice()},addColorStop:function(t){for(var e in t){var i=new fabric.Color(t[e]);this.colorStops.push({offset:parseFloat(e),color:i.toRgb(),opacity:i.getAlpha()})}return this},toObject:function(t){var e={type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY,gradientUnits:this.gradientUnits,gradientTransform:this.gradientTransform?this.gradientTransform.concat():this.gradientTransform};return fabric.util.populateWithProperties(this,e,t),e},toSVG:function(t,e){var i,r,n,s,o=this.coords,a=(e=e||{},this.colorStops),h=o.r1>o.r2,c=this.gradientTransform?this.gradientTransform.concat():fabric.iMatrix.concat(),l=-this.offsetX,u=-this.offsetY,f=!!e.additionalTransform,d="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox";if(a.sort((function(t,e){return t.offset-e.offset})),"objectBoundingBox"===d?(l/=t.width,u/=t.height):(l+=t.width/2,u+=t.height/2),"path"===t.type&&"percentage"!==this.gradientUnits&&(l-=t.pathOffset.x,u-=t.pathOffset.y),c[4]-=l,c[5]-=u,s='id="SVGID_'+this.id+'" gradientUnits="'+d+'"',s+=' gradientTransform="'+(f?e.additionalTransform+" ":"")+fabric.util.matrixToSVG(c)+'" ',"linear"===this.type?n=["\n']:"radial"===this.type&&(n=["\n']),"radial"===this.type){if(h)for((a=a.concat()).reverse(),i=0,r=a.length;i0){var p=g/Math.max(o.r1,o.r2);for(i=0,r=a.length;i\n')}return n.push("linear"===this.type?"\n":"\n"),n.join("")},toLive:function(t){var e,i,r,n=this.coords;if(this.type){for("linear"===this.type?e=t.createLinearGradient(n.x1,n.y1,n.x2,n.y2):"radial"===this.type&&(e=t.createRadialGradient(n.x1,n.y1,n.r1,n.x2,n.y2,n.r2)),i=0,r=this.colorStops.length;i1?1:s,isNaN(s)&&(s=1);var o,a,h,c,l=t.getElementsByTagName("stop"),u="userSpaceOnUse"===t.getAttribute("gradientUnits")?"pixels":"percentage",f=t.getAttribute("gradientTransform")||"",d=[],g=0,p=0;for("linearGradient"===t.nodeName||"LINEARGRADIENT"===t.nodeName?(o="linear",a=function(t){return{x1:t.getAttribute("x1")||0,y1:t.getAttribute("y1")||0,x2:t.getAttribute("x2")||"100%",y2:t.getAttribute("y2")||0}}(t)):(o="radial",a=function(t){return{x1:t.getAttribute("fx")||t.getAttribute("cx")||"50%",y1:t.getAttribute("fy")||t.getAttribute("cy")||"50%",r1:0,x2:t.getAttribute("cx")||"50%",y2:t.getAttribute("cy")||"50%",r2:t.getAttribute("r")||"50%"}}(t)),h=l.length;h--;)d.push(e(l[h],s));return c=fabric.parseTransformAttribute(f),function(t,e,i,r){var n,s;Object.keys(e).forEach((function(t){"Infinity"===(n=e[t])?s=1:"-Infinity"===n?s=0:(s=parseFloat(e[t],10),"string"==typeof n&&/^(\d+\.\d+)%|(\d+)%$/.test(n)&&(s*=.01,"pixels"===r&&("x1"!==t&&"x2"!==t&&"r2"!==t||(s*=i.viewBoxWidth||i.width),"y1"!==t&&"y2"!==t||(s*=i.viewBoxHeight||i.height)))),e[t]=s}))}(0,a,n,u),"pixels"===u&&(g=-i.left,p=-i.top),new fabric.Gradient({id:t.getAttribute("id"),type:o,coords:a,colorStops:d,gradientUnits:u,gradientTransform:c,offsetX:g,offsetY:p})}})}(void 0!==t||window),void 0!==t||window,c=fabric.util.toFixed,fabric.Pattern=fabric.util.createClass({repeat:"repeat",offsetX:0,offsetY:0,crossOrigin:"",patternTransform:null,type:"pattern",initialize:function(t){t||(t={}),this.id=fabric.Object.__uid++,this.setOptions(t)},toObject:function(t){var e,i,r=fabric.Object.NUM_FRACTION_DIGITS;return"string"==typeof this.source.src?e=this.source.src:"object"==typeof this.source&&this.source.toDataURL&&(e=this.source.toDataURL()),i={type:"pattern",source:e,repeat:this.repeat,crossOrigin:this.crossOrigin,offsetX:c(this.offsetX,r),offsetY:c(this.offsetY,r),patternTransform:this.patternTransform?this.patternTransform.concat():null},fabric.util.populateWithProperties(this,i,t),i},toSVG:function(t){var e="function"==typeof this.source?this.source():this.source,i=e.width/t.width,r=e.height/t.height,n=this.offsetX/t.width,s=this.offsetY/t.height,o="";return"repeat-x"!==this.repeat&&"no-repeat"!==this.repeat||(r=1,s&&(r+=Math.abs(s))),"repeat-y"!==this.repeat&&"no-repeat"!==this.repeat||(i=1,n&&(i+=Math.abs(n))),e.src?o=e.src:e.toDataURL&&(o=e.toDataURL()),'\n\n\n'},setOptions:function(t){for(var e in t)this[e]=t[e]},toLive:function(t){var e=this.source;if(!e)return"";if(void 0!==e.src){if(!e.complete)return"";if(0===e.naturalWidth||0===e.naturalHeight)return""}return t.createPattern(e,this.repeat)}}),fabric.Pattern.fromObject=function(t){var e=Object.assign({},t);return fabric.util.loadImage(t.source,{crossOrigin:t.crossOrigin}).then((function(t){return e.source=t,new fabric.Pattern(e)}))},function(t){var e=t.fabric||(t.fabric={}),i=e.util.toFixed;e.Shadow?e.warn("fabric.Shadow is already defined."):(e.Shadow=e.util.createClass({color:"rgb(0,0,0)",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,nonScaling:!1,initialize:function(t){for(var i in"string"==typeof t&&(t=this._parseShadow(t)),t)this[i]=t[i];this.id=e.Object.__uid++},_parseShadow:function(t){var i=t.trim(),r=e.Shadow.reOffsetsAndBlur.exec(i)||[];return{color:(i.replace(e.Shadow.reOffsetsAndBlur,"")||"rgb(0,0,0)").trim(),offsetX:parseFloat(r[1],10)||0,offsetY:parseFloat(r[2],10)||0,blur:parseFloat(r[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join("px ")},toSVG:function(t){var r=40,n=40,s=e.Object.NUM_FRACTION_DIGITS,o=e.util.rotateVector({x:this.offsetX,y:this.offsetY},e.util.degreesToRadians(-t.angle)),a=new e.Color(this.color);return t.width&&t.height&&(r=100*i((Math.abs(o.x)+this.blur)/t.width,s)+20,n=100*i((Math.abs(o.y)+this.blur)/t.height,s)+20),t.flipX&&(o.x*=-1),t.flipY&&(o.y*=-1),'\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\n\n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke,nonScaling:this.nonScaling};var t={},i=e.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke","nonScaling"].forEach((function(e){this[e]!==i[e]&&(t[e]=this[e])}),this),t}}),e.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/)}(void 0!==t?t:window),function(){if(fabric.StaticCanvas)fabric.warn("fabric.StaticCanvas is already defined.");else{var t=fabric.util.object.extend,e=fabric.util.getElementOffset,i=fabric.util.removeFromArray,r=fabric.util.toFixed,n=fabric.util.transformPoint,s=fabric.util.invertTransform,o=fabric.util.getNodeCanvas,a=fabric.util.createCanvasElement,h=new Error("Could not initialize `canvas` element");fabric.StaticCanvas=fabric.util.createClass(fabric.CommonMethods,fabric.Collection,{initialize:function(t,e){e||(e={}),this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:fabric.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!0,clipPath:void 0,_initStatic:function(t,e){this._objects=[],this._createLowerCanvas(t),this._initOptions(e),this.interactive||this._initRetinaScaling(),this.calcOffset()},_isRetinaScaling:function(){return fabric.devicePixelRatio>1&&this.enableRetinaScaling},getRetinaScaling:function(){return this._isRetinaScaling()?Math.max(1,fabric.devicePixelRatio):1},_initRetinaScaling:function(){if(this._isRetinaScaling()){var t=fabric.devicePixelRatio;this.__initRetinaScaling(t,this.lowerCanvasEl,this.contextContainer),this.upperCanvasEl&&this.__initRetinaScaling(t,this.upperCanvasEl,this.contextTop)}},__initRetinaScaling:function(t,e,i){e.setAttribute("width",this.width*t),e.setAttribute("height",this.height*t),i.scale(t,t)},calcOffset:function(){return this._offset=e(this.lowerCanvasEl),this},_createCanvasElement:function(){var t=a();if(!t)throw h;if(t.style||(t.style={}),void 0===t.getContext)throw h;return t},_initOptions:function(t){var e=this.lowerCanvasEl;this._setOptions(t),this.width=this.width||parseInt(e.width,10)||0,this.height=this.height||parseInt(e.height,10)||0,this.lowerCanvasEl.style&&(e.width=this.width,e.height=this.height,e.style.width=this.width+"px",e.style.height=this.height+"px",this.viewportTransform=this.viewportTransform.slice())},_createLowerCanvas:function(t){if(t&&t.getContext?this.lowerCanvasEl=t:this.lowerCanvasEl=fabric.util.getById(t)||this._createCanvasElement(),this.lowerCanvasEl.hasAttribute("data-fabric"))throw new Error("fabric.js: trying to initialize a canvas that has already been initialized");fabric.util.addClass(this.lowerCanvasEl,"lower-canvas"),this.lowerCanvasEl.setAttribute("data-fabric","main"),this.interactive&&(this._originalCanvasStyle=this.lowerCanvasEl.style.cssText,this._applyCanvasStyle(this.lowerCanvasEl)),this.contextContainer=this.lowerCanvasEl.getContext("2d")},getWidth:function(){return this.width},getHeight:function(){return this.height},setWidth:function(t,e){return this.setDimensions({width:t},e)},setHeight:function(t,e){return this.setDimensions({height:t},e)},setDimensions:function(t,e){var i;for(var r in e=e||{},t)i=t[r],e.cssOnly||(this._setBackstoreDimension(r,t[r]),i+="px",this.hasLostContext=!0),e.backstoreOnly||this._setCssDimension(r,i);return this._isCurrentlyDrawing&&this.freeDrawingBrush&&this.freeDrawingBrush._setBrushStyles(this.contextTop),this._initRetinaScaling(),this.calcOffset(),e.cssOnly||this.requestRenderAll(),this},_setBackstoreDimension:function(t,e){return this.lowerCanvasEl[t]=e,this.upperCanvasEl&&(this.upperCanvasEl[t]=e),this.cacheCanvasEl&&(this.cacheCanvasEl[t]=e),this[t]=e,this},_setCssDimension:function(t,e){return this.lowerCanvasEl.style[t]=e,this.upperCanvasEl&&(this.upperCanvasEl.style[t]=e),this.wrapperEl&&(this.wrapperEl.style[t]=e),this},getZoom:function(){return this.viewportTransform[0]},setViewportTransform:function(t){var e,i,r,n=this._activeObject,s=this.backgroundImage,o=this.overlayImage;for(this.viewportTransform=t,i=0,r=this._objects.length;i0&&this.renderOnAddRemove&&this.requestRenderAll(),this},insertAt:function(t,e){return fabric.Collection.insertAt.call(this,t,e,this._onObjectAdded),(Array.isArray(t)?t.length>0:t)&&this.renderOnAddRemove&&this.requestRenderAll(),this},remove:function(){var t=fabric.Collection.remove.call(this,arguments,this._onObjectRemoved);return t.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),this},_onObjectAdded:function(t){this.stateful&&t.setupState(),t.canvas&&t.canvas!==this&&(console.warn("fabric.Canvas: trying to add an object that belongs to a different canvas.\nResulting to default behavior: removing object from previous canvas and adding to new canvas"),t.canvas.remove(t)),t._set("canvas",this),t.setCoords(),this.fire("object:added",{target:t}),t.fire("added",{target:this})},_onObjectRemoved:function(t){t._set("canvas",void 0),this.fire("object:removed",{target:t}),t.fire("removed",{target:this})},clearContext:function(t){return t.clearRect(0,0,this.width,this.height),this},getContext:function(){return this.contextContainer},clear:function(){return this.remove.apply(this,this.getObjects()),this.backgroundImage=null,this.overlayImage=null,this.backgroundColor="",this.overlayColor="",this._hasITextHandlers&&(this.off("mouse:up",this._mouseUpITextHandler),this._iTextInstances=null,this._hasITextHandlers=!1),this.clearContext(this.contextContainer),this.fire("canvas:cleared"),this.renderOnAddRemove&&this.requestRenderAll(),this},renderAll:function(){var t=this.contextContainer;return this.renderCanvas(t,this._objects),this},renderAndReset:function(){this.isRendering=0,this.renderAll()},requestRenderAll:function(){return this.isRendering||(this.isRendering=fabric.util.requestAnimFrame(this.renderAndResetBound)),this},calcViewportBoundaries:function(){var t=this.width,e=this.height,i=s(this.viewportTransform),r=n({x:0,y:0},i),o=n({x:t,y:e},i),a=r.min(o),h=r.max(o);return this.vptCoords={tl:a,tr:new fabric.Point(h.x,a.y),bl:new fabric.Point(a.x,h.y),br:h}},cancelRequestedRender:function(){this.isRendering&&(fabric.util.cancelAnimFrame(this.isRendering),this.isRendering=0)},renderCanvas:function(t,e){var i=this.viewportTransform,r=this.clipPath;this.cancelRequestedRender(),this.calcViewportBoundaries(),this.clearContext(t),fabric.util.setImageSmoothing(t,this.imageSmoothingEnabled),this.fire("before:render",{ctx:t}),this._renderBackground(t),t.save(),t.transform(i[0],i[1],i[2],i[3],i[4],i[5]),this._renderObjects(t,e),t.restore(),!this.controlsAboveOverlay&&this.interactive&&this.drawControls(t),r&&(r._set("canvas",this),r.shouldCache(),r._transformDone=!0,r.renderCache({forClipping:!0}),this.drawClipPathOnCanvas(t)),this._renderOverlay(t),this.controlsAboveOverlay&&this.interactive&&this.drawControls(t),this.fire("after:render",{ctx:t})},drawClipPathOnCanvas:function(t){var e=this.viewportTransform,i=this.clipPath;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5]),t.globalCompositeOperation="destination-in",i.transform(t),t.scale(1/i.zoomX,1/i.zoomY),t.drawImage(i._cacheCanvas,-i.cacheTranslationX,-i.cacheTranslationY),t.restore()},_renderObjects:function(t,e){var i,r;for(i=0,r=e.length;i\n'),this._setSVGBgOverlayColor(i,"background"),this._setSVGBgOverlayImage(i,"backgroundImage",e),this._setSVGObjects(i,e),this.clipPath&&i.push("\n"),this._setSVGBgOverlayColor(i,"overlay"),this._setSVGBgOverlayImage(i,"overlayImage",e),i.push(""),i.join("")},_setSVGPreamble:function(t,e){e.suppressPreamble||t.push('\n','\n')},_setSVGHeader:function(t,e){var i,n=e.width||this.width,s=e.height||this.height,o='viewBox="0 0 '+this.width+" "+this.height+'" ',a=fabric.Object.NUM_FRACTION_DIGITS;e.viewBox?o='viewBox="'+e.viewBox.x+" "+e.viewBox.y+" "+e.viewBox.width+" "+e.viewBox.height+'" ':this.svgViewportTransformation&&(i=this.viewportTransform,o='viewBox="'+r(-i[4]/i[0],a)+" "+r(-i[5]/i[3],a)+" "+r(this.width/i[0],a)+" "+r(this.height/i[3],a)+'" '),t.push("\n',"Created with Fabric.js ",fabric.version,"\n","\n",this.createSVGFontFacesMarkup(),this.createSVGRefElementsMarkup(),this.createSVGClipPathMarkup(e),"\n")},createSVGClipPathMarkup:function(t){var e=this.clipPath;return e?(e.clipPathId="CLIPPATH_"+fabric.Object.__uid++,'\n'+this.clipPath.toClipPathSVG(t.reviver)+"\n"):""},createSVGRefElementsMarkup:function(){var t=this;return["background","overlay"].map((function(e){var i=t[e+"Color"];if(i&&i.toLive){var r=t[e+"Vpt"],n=t.viewportTransform,s={width:t.width/(r?n[0]:1),height:t.height/(r?n[3]:1)};return i.toSVG(s,{additionalTransform:r?fabric.util.matrixToSVG(n):""})}})).join("")},createSVGFontFacesMarkup:function(){var t,e,i,r,n,s,o,a,h="",c={},l=fabric.fontPaths,u=[];for(this._objects.forEach((function t(e){u.push(e),e._objects&&e._objects.forEach(t)})),o=0,a=u.length;o',"\n",h,"","\n"].join("")),h},_setSVGObjects:function(t,e){var i,r,n,s=this._objects;for(r=0,n=s.length;r\n")}else t.push('\n")},sendToBack:function(t){if(!t)return this;var e,r,n,s=this._activeObject;if(t===s&&"activeSelection"===t.type)for(e=(n=s._objects).length;e--;)r=n[e],i(this._objects,r),this._objects.unshift(r);else i(this._objects,t),this._objects.unshift(t);return this.renderOnAddRemove&&this.requestRenderAll(),this},bringToFront:function(t){if(!t)return this;var e,r,n,s=this._activeObject;if(t===s&&"activeSelection"===t.type)for(n=s._objects,e=0;e0+c&&(o=s-1,i(this._objects,n),this._objects.splice(o,0,n)),c++;else 0!==(s=this._objects.indexOf(t))&&(o=this._findNewLowerIndex(t,s,e),i(this._objects,t),this._objects.splice(o,0,t));return this.renderOnAddRemove&&this.requestRenderAll(),this},_findNewLowerIndex:function(t,e,i){var r,n;if(i)for(r=e,n=e-1;n>=0;--n){if(t.intersectsWithObject(this._objects[n])||t.isContainedWithinObject(this._objects[n])||this._objects[n].isContainedWithinObject(t)){r=n;break}}else r=e-1;return r},bringForward:function(t,e){if(!t)return this;var r,n,s,o,a,h=this._activeObject,c=0;if(t===h&&"activeSelection"===t.type)for(r=(a=h._objects).length;r--;)n=a[r],(s=this._objects.indexOf(n))"}}),t(fabric.StaticCanvas.prototype,fabric.Observable),t(fabric.StaticCanvas.prototype,fabric.DataURLExporter),t(fabric.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(t){var e=a();if(!e||!e.getContext)return null;var i=e.getContext("2d");return i&&"setLineDash"===t?void 0!==i.setLineDash:null}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject,fabric.isLikelyNode&&(fabric.StaticCanvas.prototype.createPNGStream=function(){var t=o(this.lowerCanvasEl);return t&&t.createPNGStream()},fabric.StaticCanvas.prototype.createJPEGStream=function(t){var e=o(this.lowerCanvasEl);return e&&e.createJPEGStream(t)})}}(void 0!==t||window),fabric.BaseBrush=fabric.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeMiterLimit:10,strokeDashArray:null,limitedToCanvasSize:!1,_setBrushStyles:function(t){t.strokeStyle=this.color,t.lineWidth=this.width,t.lineCap=this.strokeLineCap,t.miterLimit=this.strokeMiterLimit,t.lineJoin=this.strokeLineJoin,t.setLineDash(this.strokeDashArray||[])},_saveAndTransform:function(t){var e=this.canvas.viewportTransform;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5])},_setShadow:function(){if(this.shadow){var t=this.canvas,e=this.shadow,i=t.contextTop,r=t.getZoom();t&&t._isRetinaScaling()&&(r*=fabric.devicePixelRatio),i.shadowColor=e.color,i.shadowBlur=e.blur*r,i.shadowOffsetX=e.offsetX*r,i.shadowOffsetY=e.offsetY*r}},needsFullRender:function(){return new fabric.Color(this.color).getAlpha()<1||!!this.shadow},_resetShadow:function(){var t=this.canvas.contextTop;t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0},_isOutSideCanvas:function(t){return t.x<0||t.x>this.canvas.getWidth()||t.y<0||t.y>this.canvas.getHeight()}}),void 0!==t||window,fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{decimate:.4,drawStraightLine:!1,straightLineKey:"shiftKey",initialize:function(t){this.canvas=t,this._points=[]},needsFullRender:function(){return this.callSuper("needsFullRender")||this._hasStraightLine},_drawSegment:function(t,e,i){var r=e.midPointFrom(i);return t.quadraticCurveTo(e.x,e.y,r.x,r.y),r},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],this._prepareForDrawing(t),this._captureDrawingPath(t),this._render())},onMouseMove:function(t,e){if(this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],(!0!==this.limitedToCanvasSize||!this._isOutSideCanvas(t))&&this._captureDrawingPath(t)&&this._points.length>1))if(this.needsFullRender())this.canvas.clearContext(this.canvas.contextTop),this._render();else{var i=this._points,r=i.length,n=this.canvas.contextTop;this._saveAndTransform(n),this.oldEnd&&(n.beginPath(),n.moveTo(this.oldEnd.x,this.oldEnd.y)),this.oldEnd=this._drawSegment(n,i[r-2],i[r-1],!0),n.stroke(),n.restore()}},onMouseUp:function(t){return!this.canvas._isMainEvent(t.e)||(this.drawStraightLine=!1,this.oldEnd=void 0,this._finalizeAndAddPath(),!1)},_prepareForDrawing:function(t){var e=new fabric.Point(t.x,t.y);this._reset(),this._addPoint(e),this.canvas.contextTop.moveTo(e.x,e.y)},_addPoint:function(t){return!(this._points.length>1&&t.eq(this._points[this._points.length-1])||(this.drawStraightLine&&this._points.length>1&&(this._hasStraightLine=!0,this._points.pop()),this._points.push(t),0))},_reset:function(){this._points=[],this._setBrushStyles(this.canvas.contextTop),this._setShadow(),this._hasStraightLine=!1},_captureDrawingPath:function(t){var e=new fabric.Point(t.x,t.y);return this._addPoint(e)},_render:function(t){var e,i,r=this._points[0],n=this._points[1];if(t=t||this.canvas.contextTop,this._saveAndTransform(t),t.beginPath(),2===this._points.length&&r.x===n.x&&r.y===n.y){var s=this.width/1e3;r=new fabric.Point(r.x,r.y),n=new fabric.Point(n.x,n.y),r.x-=s,n.x+=s}for(t.moveTo(r.x,r.y),e=1,i=this._points.length;e=n&&(o=t[i],a.push(o));return a.push(t[s]),a},_finalizeAndAddPath:function(){this.canvas.contextTop.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate));var t=this.convertPointsToSVGPath(this._points);if(this._isEmptySVGPath(t))this.canvas.requestRenderAll();else{var e=this.createPath(t);this.canvas.clearContext(this.canvas.contextTop),this.canvas.fire("before:path:created",{path:e}),this.canvas.add(e),this.canvas.requestRenderAll(),e.setCoords(),this._resetShadow(),this.canvas.fire("path:created",{path:e})}}}),fabric.CircleBrush=fabric.util.createClass(fabric.BaseBrush,{width:10,initialize:function(t){this.canvas=t,this.points=[]},drawDot:function(t){var e=this.addPoint(t),i=this.canvas.contextTop;this._saveAndTransform(i),this.dot(i,e),i.restore()},dot:function(t,e){t.fillStyle=e.fill,t.beginPath(),t.arc(e.x,e.y,e.radius,0,2*Math.PI,!1),t.closePath(),t.fill()},onMouseDown:function(t){this.points.length=0,this.canvas.clearContext(this.canvas.contextTop),this._setShadow(),this.drawDot(t)},_render:function(){var t,e,i=this.canvas.contextTop,r=this.points;for(this._saveAndTransform(i),t=0,e=r.length;t1){e=[],i=[];for(var n=0,s=this._objects.length;n1&&(this._activeObject._objects=i),e.push.apply(e,i)}else if(this.preserveObjectStacking||1!==r.length)e=this._objects;else{var o=r[0],a=o.getAncestors(!0),h=0===a.length?o:a.pop();(e=this._objects.slice()).indexOf(h)>-1&&e.splice(e.indexOf(h),1),e.push(h)}return e},renderAll:function(){!this.contextTopDirty||this._groupSelector||this.isDrawingMode||(this.clearContext(this.contextTop),this.contextTopDirty=!1),this.hasLostContext&&(this.renderTopLayer(this.contextTop),this.hasLostContext=!1);var t=this.contextContainer;return!this._objectsToRender&&(this._objectsToRender=this._chooseObjectsToRender()),this.renderCanvas(t,this._objectsToRender),this},renderTopLayer:function(t){t.save(),this.isDrawingMode&&this._isCurrentlyDrawing&&(this.freeDrawingBrush&&this.freeDrawingBrush._render(),this.contextTopDirty=!0),this.selection&&this._groupSelector&&(this._drawSelection(t),this.contextTopDirty=!0),t.restore()},renderTop:function(){var t=this.contextTop;return this.clearContext(t),this.renderTopLayer(t),this.fire("after:render"),this},_normalizePointer:function(t,e){var i=t.calcTransformMatrix(),r=fabric.util.invertTransform(i),n=this.restorePointerVpt(e);return fabric.util.transformPoint(n,r)},isTargetTransparent:function(t,e,i){if(t.shouldCache()&&t._cacheCanvas&&t!==this._activeObject){var r=this._normalizePointer(t,{x:e,y:i}),n=Math.max(t.cacheTranslationX+r.x*t.zoomX,0),s=Math.max(t.cacheTranslationY+r.y*t.zoomY,0);return fabric.util.isTransparent(t._cacheContext,Math.round(n),Math.round(s),this.targetFindTolerance)}var o=this.contextCache,a=t.selectionBackgroundColor,h=this.viewportTransform;return t.selectionBackgroundColor="",this.clearContext(o),o.save(),o.transform(h[0],h[1],h[2],h[3],h[4],h[5]),t.render(o),o.restore(),t.selectionBackgroundColor=a,fabric.util.isTransparent(o,e,i,this.targetFindTolerance)},_isSelectionKeyPressed:function(t){return Array.isArray(this.selectionKey)?!!this.selectionKey.find((function(e){return!0===t[e]})):t[this.selectionKey]},_shouldClearSelection:function(t,e){var i=this.getActiveObjects(),r=this._activeObject;return!e||e&&r&&i.length>1&&-1===i.indexOf(e)&&r!==e&&!this._isSelectionKeyPressed(t)||e&&!e.evented||e&&!e.selectable&&r&&r!==e},_shouldCenterTransform:function(t,e,i){var r;if(t)return"scale"===e||"scaleX"===e||"scaleY"===e||"resizing"===e?r=this.centeredScaling||t.centeredScaling:"rotate"===e&&(r=this.centeredRotation||t.centeredRotation),r?!i:i},_getOriginFromCorner:function(t,e){var i={x:t.originX,y:t.originY};return"ml"===e||"tl"===e||"bl"===e?i.x="right":"mr"!==e&&"tr"!==e&&"br"!==e||(i.x="left"),"tl"===e||"mt"===e||"tr"===e?i.y="bottom":"bl"!==e&&"mb"!==e&&"br"!==e||(i.y="top"),i},_getActionFromCorner:function(t,e,i,r){if(!e||!t)return"drag";var n=r.controls[e];return n.getActionName(i,n,r)},_setupCurrentTransform:function(t,e,r){if(e){var n=this.getPointer(t);e.group&&(n=fabric.util.transformPoint(n,fabric.util.invertTransform(e.group.calcTransformMatrix())));var s=e.__corner,o=e.controls[s],a=r&&s?o.getActionHandler(t,e,o):fabric.controlsUtils.dragHandler,h=this._getActionFromCorner(r,s,t,e),c=this._getOriginFromCorner(e,s),l=t[this.centeredKey],u={target:e,action:h,actionHandler:a,corner:s,scaleX:e.scaleX,scaleY:e.scaleY,skewX:e.skewX,skewY:e.skewY,offsetX:n.x-e.left,offsetY:n.y-e.top,originX:c.x,originY:c.y,ex:n.x,ey:n.y,lastX:n.x,lastY:n.y,theta:i(e.angle),width:e.width*e.scaleX,shiftKey:t.shiftKey,altKey:l,original:fabric.util.saveObjectTransform(e)};this._shouldCenterTransform(e,h,l)&&(u.originX="center",u.originY="center"),u.original.originX=c.x,u.original.originY=c.y,this._currentTransform=u,this._beforeTransform(t)}},setCursor:function(t){this.upperCanvasEl.style.cursor=t},_drawSelection:function(t){var e=this._groupSelector,i=new fabric.Point(e.ex,e.ey),r=fabric.util.transformPoint(i,this.viewportTransform),n=new fabric.Point(e.ex+e.left,e.ey+e.top),s=fabric.util.transformPoint(n,this.viewportTransform),o=Math.min(r.x,s.x),a=Math.min(r.y,s.y),h=Math.max(r.x,s.x),c=Math.max(r.y,s.y),l=this.selectionLineWidth/2;this.selectionColor&&(t.fillStyle=this.selectionColor,t.fillRect(o,a,h-o,c-a)),this.selectionLineWidth&&this.selectionBorderColor&&(t.lineWidth=this.selectionLineWidth,t.strokeStyle=this.selectionBorderColor,o+=l,a+=l,h-=l,c-=l,fabric.Object.prototype._setLineDash.call(this,t,this.selectionDashArray),t.strokeRect(o,a,h-o,c-a))},findTarget:function(t,e){if(!this.skipTargetFind){var i,n,s=this.getPointer(t,!0),o=this._activeObject,a=this.getActiveObjects(),h=r(t),c=a.length>1&&!e||1===a.length;if(this.targets=[],c&&o._findTargetCorner(s,h))return o;if(a.length>1&&"activeSelection"===o.type&&!e&&this.searchPossibleTargets([o],s))return o;if(1===a.length&&o===this.searchPossibleTargets([o],s)){if(!this.preserveObjectStacking)return o;i=o,n=this.targets,this.targets=[]}var l=this.searchPossibleTargets(this._objects,s);return t[this.altSelectionKey]&&l&&i&&l!==i&&(l=i,this.targets=n),l}},_checkTarget:function(t,e,i){if(e&&e.visible&&e.evented&&e.containsPoint(t)){if(!this.perPixelTargetFind&&!e.perPixelTargetFind||e.isEditing)return!0;if(!this.isTargetTransparent(e,i.x,i.y))return!0}},_searchPossibleTargets:function(t,e){for(var i,r,n=t.length;n--;){var s=t[n],o=s.group?this._normalizePointer(s.group,e):e;if(this._checkTarget(o,s,e)){(i=t[n]).subTargetCheck&&Array.isArray(i._objects)&&(r=this._searchPossibleTargets(i._objects,e))&&this.targets.push(r);break}}return i},searchPossibleTargets:function(t,e){var i=this._searchPossibleTargets(t,e);return i&&i.interactive&&this.targets[0]?this.targets[0]:i},restorePointerVpt:function(t){return fabric.util.transformPoint(t,fabric.util.invertTransform(this.viewportTransform))},getPointer:function(t,i){if(this._absolutePointer&&!i)return this._absolutePointer;if(this._pointer&&i)return this._pointer;var r,n=e(t),s=this.upperCanvasEl,o=s.getBoundingClientRect(),a=o.width||0,h=o.height||0;a&&h||("top"in o&&"bottom"in o&&(h=Math.abs(o.top-o.bottom)),"right"in o&&"left"in o&&(a=Math.abs(o.right-o.left))),this.calcOffset(),n.x=n.x-this._offset.left,n.y=n.y-this._offset.top,i||(n=this.restorePointerVpt(n));var c=this.getRetinaScaling();return 1!==c&&(n.x/=c,n.y/=c),r=0===a||0===h?{width:1,height:1}:{width:s.width/a,height:s.height/h},{x:n.x*r.width,y:n.y*r.height}},_createUpperCanvas:function(){var t=this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/,""),e=this.lowerCanvasEl,i=this.upperCanvasEl;i?i.className="":(i=this._createCanvasElement(),this.upperCanvasEl=i),fabric.util.addClass(i,"upper-canvas "+t),this.upperCanvasEl.setAttribute("data-fabric","top"),this.wrapperEl.appendChild(i),this._copyCanvasStyle(e,i),this._applyCanvasStyle(i),this.contextTop=i.getContext("2d")},_createCacheCanvas:function(){this.cacheCanvasEl=this._createCanvasElement(),this.cacheCanvasEl.setAttribute("width",this.width),this.cacheCanvasEl.setAttribute("height",this.height),this.contextCache=this.cacheCanvasEl.getContext("2d")},_initWrapperElement:function(){this.wrapperEl||(this.wrapperEl=fabric.util.wrapElement(this.lowerCanvasEl,"div",{class:this.containerClass}),this.wrapperEl.setAttribute("data-fabric","wrapper"),fabric.util.setStyle(this.wrapperEl,{width:this.width+"px",height:this.height+"px",position:"relative"}),fabric.util.makeElementUnselectable(this.wrapperEl))},_applyCanvasStyle:function(t){var e=this.width||t.width,i=this.height||t.height;fabric.util.setStyle(t,{position:"absolute",width:e+"px",height:i+"px",left:0,top:0,"touch-action":this.allowTouchScrolling?"manipulation":"none","-ms-touch-action":this.allowTouchScrolling?"manipulation":"none"}),t.width=e,t.height=i,fabric.util.makeElementUnselectable(t)},_copyCanvasStyle:function(t,e){e.style.cssText=t.style.cssText},getTopContext:function(){return this.contextTop},getSelectionContext:function(){return this.contextTop},getSelectionElement:function(){return this.upperCanvasEl},getActiveObject:function(){return this._activeObject},getActiveObjects:function(){var t=this._activeObject;return t?"activeSelection"===t.type&&t._objects?t._objects.slice(0):[t]:[]},_fireSelectionEvents:function(t,e){var i=!1,r=this.getActiveObjects(),n=[],s=[],o=!1;t.forEach((function(t){-1===r.indexOf(t)&&(i=!0,t.fire("deselected",{e:e,target:t}),s.push(t))})),r.forEach((function(r){-1===t.indexOf(r)&&(i=!0,r.fire("selected",{e:e,target:r}),n.push(r))})),t.length>0&&r.length>0?(o=!0,i&&this.fire("selection:updated",{e:e,selected:n,deselected:s})):r.length>0?(o=!0,this.fire("selection:created",{e:e,selected:n})):t.length>0&&(o=!0,this.fire("selection:cleared",{e:e,deselected:s})),o&&(this._objectsToRender=void 0)},setActiveObject:function(t,e){var i=this.getActiveObjects();return this._setActiveObject(t,e),this._fireSelectionEvents(i,e),this},_setActiveObject:function(t,e){return this._activeObject!==t&&(!!this._discardActiveObject(e,t)&&(!t.onSelect({e:e})&&(this._activeObject=t,!0)))},_discardActiveObject:function(t,e){var i=this._activeObject;if(i){if(i.onDeselect({e:t,object:e}))return!1;this._activeObject=null}return!0},discardActiveObject:function(t){var e=this.getActiveObjects(),i=this.getActiveObject();return e.length&&this.fire("before:selection:cleared",{target:i,e:t}),this._discardActiveObject(t),this._fireSelectionEvents(e,t),this},dispose:function(){var t=this.wrapperEl,e=this.lowerCanvasEl,i=this.upperCanvasEl,r=this.cacheCanvasEl;return this.removeListeners(),this.callSuper("dispose"),t.removeChild(i),t.removeChild(e),this.contextCache=null,this.contextTop=null,fabric.util.cleanUpJsdomNode(i),this.upperCanvasEl=void 0,fabric.util.cleanUpJsdomNode(r),this.cacheCanvasEl=void 0,t.parentNode&&t.parentNode.replaceChild(e,t),delete this.wrapperEl,this},clear:function(){return this.discardActiveObject(),this.clearContext(this.contextTop),this.callSuper("clear")},drawControls:function(t){var e=this._activeObject;e&&e._renderControls(t)},_toObject:function(t,e,i){var r=this._realizeGroupTransformOnObject(t),n=this.callSuper("_toObject",t,e,i);return r&&t.set(r),n},_realizeGroupTransformOnObject:function(t){if(t.group&&"activeSelection"===t.group.type&&this._activeObject===t.group){var e={};return["angle","flipX","flipY","left","scaleX","scaleY","skewX","skewY","top"].forEach((function(i){e[i]=t[i]})),fabric.util.addTransformToObject(t,this._activeObject.calcOwnMatrix()),e}return null},_setSVGObject:function(t,e,i){var r=this._realizeGroupTransformOnObject(e);this.callSuper("_setSVGObject",t,e,i),r&&e.set(r)},setViewportTransform:function(t){this.renderOnAddRemove&&this._activeObject&&this._activeObject.isEditing&&this._activeObject.clearContextTop(),fabric.StaticCanvas.prototype.setViewportTransform.call(this,t)}}),fabric.StaticCanvas)"prototype"!==n&&(fabric.Canvas[n]=fabric.StaticCanvas[n])}(void 0!==t||window),function(t){var e=t.fabric,i=e.util.addListener,r=e.util.removeListener,n={passive:!1};function s(t,e){return t.button&&t.button===e-1}e.util.object.extend(e.Canvas.prototype,{mainTouchId:null,_initEventListeners:function(){this.removeListeners(),this._bindEvents(),this.addOrRemove(i,"add")},_getEventPrefix:function(){return this.enablePointerEvents?"pointer":"mouse"},addOrRemove:function(t,i){var r=this.upperCanvasEl,s=this._getEventPrefix();t(e.window,"resize",this._onResize),t(r,s+"down",this._onMouseDown),t(r,s+"move",this._onMouseMove,n),t(r,s+"out",this._onMouseOut),t(r,s+"enter",this._onMouseEnter),t(r,"wheel",this._onMouseWheel),t(r,"contextmenu",this._onContextMenu),t(r,"dblclick",this._onDoubleClick),t(r,"dragover",this._onDragOver),t(r,"dragenter",this._onDragEnter),t(r,"dragleave",this._onDragLeave),t(r,"drop",this._onDrop),this.enablePointerEvents||t(r,"touchstart",this._onTouchStart,n),"undefined"!=typeof eventjs&&i in eventjs&&(eventjs[i](r,"gesture",this._onGesture),eventjs[i](r,"drag",this._onDrag),eventjs[i](r,"orientation",this._onOrientationChange),eventjs[i](r,"shake",this._onShake),eventjs[i](r,"longpress",this._onLongPress))},removeListeners:function(){this.addOrRemove(r,"remove");var t=this._getEventPrefix();r(e.document,t+"up",this._onMouseUp),r(e.document,"touchend",this._onTouchEnd,n),r(e.document,t+"move",this._onMouseMove,n),r(e.document,"touchmove",this._onMouseMove,n)},_bindEvents:function(){this.eventsBound||(this._onMouseDown=this._onMouseDown.bind(this),this._onTouchStart=this._onTouchStart.bind(this),this._onMouseMove=this._onMouseMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._onResize=this._onResize.bind(this),this._onGesture=this._onGesture.bind(this),this._onDrag=this._onDrag.bind(this),this._onShake=this._onShake.bind(this),this._onLongPress=this._onLongPress.bind(this),this._onOrientationChange=this._onOrientationChange.bind(this),this._onMouseWheel=this._onMouseWheel.bind(this),this._onMouseOut=this._onMouseOut.bind(this),this._onMouseEnter=this._onMouseEnter.bind(this),this._onContextMenu=this._onContextMenu.bind(this),this._onDoubleClick=this._onDoubleClick.bind(this),this._onDragOver=this._onDragOver.bind(this),this._onDragEnter=this._simpleEventHandler.bind(this,"dragenter"),this._onDragLeave=this._simpleEventHandler.bind(this,"dragleave"),this._onDrop=this._onDrop.bind(this),this.eventsBound=!0)},_onGesture:function(t,e){this.__onTransformGesture&&this.__onTransformGesture(t,e)},_onDrag:function(t,e){this.__onDrag&&this.__onDrag(t,e)},_onMouseWheel:function(t){this.__onMouseWheel(t)},_onMouseOut:function(t){var e=this._hoveredTarget;this.fire("mouse:out",{target:e,e:t}),this._hoveredTarget=null,e&&e.fire("mouseout",{e:t});var i=this;this._hoveredTargets.forEach((function(r){i.fire("mouse:out",{target:e,e:t}),r&&e.fire("mouseout",{e:t})})),this._hoveredTargets=[],this._iTextInstances&&this._iTextInstances.forEach((function(t){t.isEditing&&t.hiddenTextarea.focus()}))},_onMouseEnter:function(t){this._currentTransform||this.findTarget(t)||(this.fire("mouse:over",{target:null,e:t}),this._hoveredTarget=null,this._hoveredTargets=[])},_onOrientationChange:function(t,e){this.__onOrientationChange&&this.__onOrientationChange(t,e)},_onShake:function(t,e){this.__onShake&&this.__onShake(t,e)},_onLongPress:function(t,e){this.__onLongPress&&this.__onLongPress(t,e)},_onDragOver:function(t){t.preventDefault();var e=this._simpleEventHandler("dragover",t);this._fireEnterLeaveEvents(e,t)},_onDrop:function(t){return this._simpleEventHandler("drop:before",t),this._simpleEventHandler("drop",t)},_onContextMenu:function(t){return this._simpleEventHandler("contextmenu:before",t),this.stopContextMenu&&(t.stopPropagation(),t.preventDefault()),this._simpleEventHandler("contextmenu",t),!1},_onDoubleClick:function(t){this._cacheTransformEventData(t),this._handleEvent(t,"dblclick"),this._resetTransformEventData(t)},getPointerId:function(t){var e=t.changedTouches;return e?e[0]&&e[0].identifier:this.enablePointerEvents?t.pointerId:-1},_isMainEvent:function(t){return!0===t.isPrimary||!1!==t.isPrimary&&("touchend"===t.type&&0===t.touches.length||(!t.changedTouches||t.changedTouches[0].identifier===this.mainTouchId))},_onTouchStart:function(t){t.preventDefault(),null===this.mainTouchId&&(this.mainTouchId=this.getPointerId(t)),this.__onMouseDown(t),this._resetTransformEventData();var s=this.upperCanvasEl,o=this._getEventPrefix();i(e.document,"touchend",this._onTouchEnd,n),i(e.document,"touchmove",this._onMouseMove,n),r(s,o+"down",this._onMouseDown)},_onMouseDown:function(t){this.__onMouseDown(t),this._resetTransformEventData();var s=this.upperCanvasEl,o=this._getEventPrefix();r(s,o+"move",this._onMouseMove,n),i(e.document,o+"up",this._onMouseUp),i(e.document,o+"move",this._onMouseMove,n)},_onTouchEnd:function(t){if(!(t.touches.length>0)){this.__onMouseUp(t),this._resetTransformEventData(),this.mainTouchId=null;var s=this._getEventPrefix();r(e.document,"touchend",this._onTouchEnd,n),r(e.document,"touchmove",this._onMouseMove,n);var o=this;this._willAddMouseDown&&clearTimeout(this._willAddMouseDown),this._willAddMouseDown=setTimeout((function(){i(o.upperCanvasEl,s+"down",o._onMouseDown),o._willAddMouseDown=0}),400)}},_onMouseUp:function(t){this.__onMouseUp(t),this._resetTransformEventData();var s=this.upperCanvasEl,o=this._getEventPrefix();this._isMainEvent(t)&&(r(e.document,o+"up",this._onMouseUp),r(e.document,o+"move",this._onMouseMove,n),i(s,o+"move",this._onMouseMove,n))},_onMouseMove:function(t){!this.allowTouchScrolling&&t.preventDefault&&t.preventDefault(),this.__onMouseMove(t)},_onResize:function(){this.calcOffset()},_shouldRender:function(t){var e=this._activeObject;return!!(!!e!=!!t||e&&t&&e!==t)||(e&&e.isEditing,!1)},__onMouseUp:function(t){var i,r=this._currentTransform,n=this._groupSelector,o=!1,a=!n||0===n.left&&0===n.top;if(this._cacheTransformEventData(t),i=this._target,this._handleEvent(t,"up:before"),s(t,3))this.fireRightClick&&this._handleEvent(t,"up",3,a);else{if(s(t,2))return this.fireMiddleClick&&this._handleEvent(t,"up",2,a),void this._resetTransformEventData();if(this.isDrawingMode&&this._isCurrentlyDrawing)this._onMouseUpInDrawingMode(t);else if(this._isMainEvent(t)){if(r&&(this._finalizeCurrentTransform(t),o=r.actionPerformed),!a){var h=i===this._activeObject;this._maybeGroupObjects(t),o||(o=this._shouldRender(i)||!h&&i===this._activeObject)}var c,l;if(i){if(c=i._findTargetCorner(this.getPointer(t,!0),e.util.isTouchEvent(t)),i.selectable&&i!==this._activeObject&&"up"===i.activeOn)this.setActiveObject(i,t),o=!0;else{var u=i.controls[c],f=u&&u.getMouseUpHandler(t,i,u);f&&f(t,r,(l=this.getPointer(t)).x,l.y)}i.isMoving=!1}if(r&&(r.target!==i||r.corner!==c)){var d=r.target&&r.target.controls[r.corner],g=d&&d.getMouseUpHandler(t,i,u);l=l||this.getPointer(t),g&&g(t,r,l.x,l.y)}this._setCursorFromEvent(t,i),this._handleEvent(t,"up",1,a),this._groupSelector=null,this._currentTransform=null,i&&(i.__corner=0),o?this.requestRenderAll():a||this.renderTop()}}},_simpleEventHandler:function(t,e){var i=this.findTarget(e),r=this.targets,n={e:e,target:i,subTargets:r};if(this.fire(t,n),i&&i.fire(t,n),!r)return i;for(var s=0;s1&&(e=new fabric.ActiveSelection(i.reverse(),{canvas:this}),this.setActiveObject(e,t))},_collectObjects:function(t){for(var e,i=[],r=this._groupSelector.ex,n=this._groupSelector.ey,s=r+this._groupSelector.left,o=n+this._groupSelector.top,a=new fabric.Point(l(r,s),l(n,o)),h=new fabric.Point(u(r,s),u(n,o)),c=!this.selectionFullyContained,f=r===s&&n===o,d=this._objects.length;d--&&!((e=this._objects[d])&&e.selectable&&e.visible&&(c&&e.intersectsWithRect(a,h,!0)||e.isContainedWithinRect(a,h,!0)||c&&e.containsPoint(a,null,!0)||c&&e.containsPoint(h,null,!0))&&(i.push(e),f)););return i.length>1&&(i=i.filter((function(e){return!e.onSelect({e:t})}))),i},_maybeGroupObjects:function(t){this.selection&&this._groupSelector&&this._groupSelectedObjects(t),this.setCursor(this.defaultCursor),this._groupSelector=null}}),void 0!==t||window,fabric.util.object.extend(fabric.StaticCanvas.prototype,{toDataURL:function(t){t||(t={});var e=t.format||"png",i=t.quality||1,r=(t.multiplier||1)*(t.enableRetinaScaling?this.getRetinaScaling():1),n=this.toCanvasElement(r,t);return fabric.util.toDataURL(n,e,i)},toCanvasElement:function(t,e){t=t||1;var i=((e=e||{}).width||this.width)*t,r=(e.height||this.height)*t,n=this.getZoom(),s=this.width,o=this.height,a=n*t,h=this.viewportTransform,c=(h[4]-(e.left||0))*t,l=(h[5]-(e.top||0))*t,u=this.interactive,f=[a,0,0,a,c,l],d=this.enableRetinaScaling,g=fabric.util.createCanvasElement(),p=this.contextTop,v=e.filter?this._objects.filter(e.filter):this._objects;return g.width=i,g.height=r,this.contextTop=null,this.enableRetinaScaling=!1,this.interactive=!1,this.viewportTransform=f,this.width=i,this.height=r,this.calcViewportBoundaries(),this.renderCanvas(g.getContext("2d"),v),this.viewportTransform=h,this.width=s,this.height=o,this.calcViewportBoundaries(),this.interactive=u,this.enableRetinaScaling=d,this.contextTop=p,g}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{loadFromJSON:function(t,e){if(t){var i="string"==typeof t?JSON.parse(t):Object.assign({},t),r=this,n=this.renderOnAddRemove;return this.renderOnAddRemove=!1,fabric.util.enlivenObjects(i.objects||[],"",e).then((function(t){return r.clear(),fabric.util.enlivenObjectEnlivables({backgroundImage:i.backgroundImage,backgroundColor:i.background,overlayImage:i.overlayImage,overlayColor:i.overlay,clipPath:i.clipPath}).then((function(e){return r.__setupCanvas(i,t,n),r.set(e),r}))}))}},__setupCanvas:function(t,e,i){var r=this;e.forEach((function(t,e){r.insertAt(t,e)})),this.renderOnAddRemove=i,delete t.objects,delete t.backgroundImage,delete t.overlayImage,delete t.background,delete t.overlay,this._setOptions(t)},clone:function(t){var e=JSON.stringify(this.toJSON(t));return this.cloneWithoutData().then((function(t){return t.loadFromJSON(e)}))},cloneWithoutData:function(){var t=fabric.util.createCanvasElement();t.width=this.width,t.height=this.height;var e=new fabric.Canvas(t),i={};return this.backgroundImage&&(i.backgroundImage=this.backgroundImage.toObject()),this.backgroundColor&&(i.background=this.backgroundColor.toObject?this.backgroundColor.toObject():this.backgroundColor),e.loadFromJSON(i)}}),void 0!==t||window,f=fabric.util.degreesToRadians,d=fabric.util.radiansToDegrees,fabric.util.object.extend(fabric.Canvas.prototype,{__onTransformGesture:function(t,e){if(!this.isDrawingMode&&t.touches&&2===t.touches.length&&"gesture"===e.gesture){var i=this.findTarget(t);void 0!==i&&(this.__gesturesParams={e:t,self:e,target:i},this.__gesturesRenderer()),this.fire("touch:gesture",{target:i,e:t,self:e})}},__gesturesParams:null,__gesturesRenderer:function(){if(null!==this.__gesturesParams&&null!==this._currentTransform){var t=this.__gesturesParams.self,e=this._currentTransform,i=this.__gesturesParams.e;e.action="scale",e.originX=e.originY="center",this._scaleObjectBy(t.scale,i),0!==t.rotation&&(e.action="rotate",this._rotateObjectByAngle(t.rotation,i)),this.requestRenderAll(),e.action="drag"}},__onDrag:function(t,e){this.fire("touch:drag",{e:t,self:e})},__onOrientationChange:function(t,e){this.fire("touch:orientation",{e:t,self:e})},__onShake:function(t,e){this.fire("touch:shake",{e:t,self:e})},__onLongPress:function(t,e){this.fire("touch:longpress",{e:t,self:e})},_scaleObjectBy:function(t,e){var i=this._currentTransform,r=i.target;return i.gestureScale=t,r._scaling=!0,fabric.controlsUtils.scalingEqually(e,i,0,0)},_rotateObjectByAngle:function(t,e){var i=this._currentTransform;i.target.get("lockRotation")||(i.target.rotate(d(f(t)+i.theta)),this._fire("rotating",{target:i.target,e:e,transform:i}))}}),function(t){var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.object.clone,n=e.util.toFixed,s=e.util.string.capitalize,o=e.util.degreesToRadians,a=!e.isLikelyNode;e.Object||(e.Object=e.util.createClass(e.CommonMethods,{type:"object",originX:"left",originY:"top",top:0,left:0,width:0,height:0,scaleX:1,scaleY:1,flipX:!1,flipY:!1,opacity:1,angle:0,skewX:0,skewY:0,cornerSize:13,touchCornerSize:24,transparentCorners:!0,hoverCursor:null,moveCursor:null,padding:0,borderColor:"rgb(178,204,255)",borderDashArray:null,cornerColor:"rgb(178,204,255)",cornerStrokeColor:null,cornerStyle:"rect",cornerDashArray:null,centeredScaling:!1,centeredRotation:!0,fill:"rgb(0,0,0)",fillRule:"nonzero",globalCompositeOperation:"source-over",backgroundColor:"",selectionBackgroundColor:"",stroke:null,strokeWidth:1,strokeDashArray:null,strokeDashOffset:0,strokeLineCap:"butt",strokeLineJoin:"miter",strokeMiterLimit:4,shadow:null,borderOpacityWhenMoving:.4,borderScaleFactor:1,minScaleLimit:0,selectable:!0,evented:!0,visible:!0,hasControls:!0,hasBorders:!0,perPixelTargetFind:!1,includeDefaultValues:!0,lockMovementX:!1,lockMovementY:!1,lockRotation:!1,lockScalingX:!1,lockScalingY:!1,lockSkewingX:!1,lockSkewingY:!1,lockScalingFlip:!1,excludeFromExport:!1,objectCaching:a,statefullCache:!1,noScaleCache:!0,strokeUniform:!1,dirty:!0,__corner:0,paintFirst:"fill",activeOn:"down",stateProperties:"top left width height scaleX scaleY flipX flipY originX originY transformMatrix stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit angle opacity fill globalCompositeOperation shadow visible backgroundColor skewX skewY fillRule paintFirst clipPath strokeUniform".split(" "),cacheProperties:"fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath".split(" "),colorProperties:"fill stroke backgroundColor".split(" "),clipPath:void 0,inverted:!1,absolutePositioned:!1,initialize:function(t){t&&this.setOptions(t)},_createCacheCanvas:function(){this._cacheProperties={},this._cacheCanvas=e.util.createCanvasElement(),this._cacheContext=this._cacheCanvas.getContext("2d"),this._updateCacheCanvas(),this.dirty=!0},_limitCacheSize:function(t){var i=e.perfLimitSizeTotal,r=t.width,n=t.height,s=e.maxCacheSideLimit,o=e.minCacheSideLimit;if(r<=s&&n<=s&&r*n<=i)return rl&&(t.zoomX/=r/l,t.width=l,t.capped=!0),n>u&&(t.zoomY/=n/u,t.height=u,t.capped=!0),t},_getCacheCanvasDimensions:function(){var t=this.getTotalObjectScaling(),e=this._getTransformedDimensions({skewX:0,skewY:0}),i=e.x*t.x/this.scaleX,r=e.y*t.y/this.scaleY;return{width:i+2,height:r+2,zoomX:t.x,zoomY:t.y,x:i,y:r}},_updateCacheCanvas:function(){var t=this.canvas;if(this.noScaleCache&&t&&t._currentTransform){var i=t._currentTransform.target,r=t._currentTransform.action;if(this===i&&r.slice&&"scale"===r.slice(0,5))return!1}var n,s,o=this._cacheCanvas,a=this._limitCacheSize(this._getCacheCanvasDimensions()),h=e.minCacheSideLimit,c=a.width,l=a.height,u=a.zoomX,f=a.zoomY,d=c!==this.cacheWidth||l!==this.cacheHeight,g=this.zoomX!==u||this.zoomY!==f,p=d||g,v=0,m=0,b=!1;if(d){var y=this._cacheCanvas.width,_=this._cacheCanvas.height,x=c>y||l>_;b=x||(c<.9*y||l<.9*_)&&y>h&&_>h,x&&!a.capped&&(c>h||l>h)&&(v=.1*c,m=.1*l)}return this instanceof e.Text&&this.path&&(p=!0,b=!0,v+=this.getHeightOfLine(0)*this.zoomX,m+=this.getHeightOfLine(0)*this.zoomY),!!p&&(b?(o.width=Math.ceil(c+v),o.height=Math.ceil(l+m)):(this._cacheContext.setTransform(1,0,0,1,0,0),this._cacheContext.clearRect(0,0,o.width,o.height)),n=a.x/2,s=a.y/2,this.cacheTranslationX=Math.round(o.width/2-n)+n,this.cacheTranslationY=Math.round(o.height/2-s)+s,this.cacheWidth=c,this.cacheHeight=l,this._cacheContext.translate(this.cacheTranslationX,this.cacheTranslationY),this._cacheContext.scale(u,f),this.zoomX=u,this.zoomY=f,!0)},setOptions:function(t){this._setOptions(t)},transform:function(t){var e=this.group&&!this.group._transformDone||this.group&&this.canvas&&t===this.canvas.contextTop,i=this.calcTransformMatrix(!e);t.transform(i[0],i[1],i[2],i[3],i[4],i[5])},toObject:function(t){var i=e.Object.NUM_FRACTION_DIGITS,r={type:this.type,version:e.version,originX:this.originX,originY:this.originY,left:n(this.left,i),top:n(this.top,i),width:n(this.width,i),height:n(this.height,i),fill:this.fill&&this.fill.toObject?this.fill.toObject():this.fill,stroke:this.stroke&&this.stroke.toObject?this.stroke.toObject():this.stroke,strokeWidth:n(this.strokeWidth,i),strokeDashArray:this.strokeDashArray?this.strokeDashArray.concat():this.strokeDashArray,strokeLineCap:this.strokeLineCap,strokeDashOffset:this.strokeDashOffset,strokeLineJoin:this.strokeLineJoin,strokeUniform:this.strokeUniform,strokeMiterLimit:n(this.strokeMiterLimit,i),scaleX:n(this.scaleX,i),scaleY:n(this.scaleY,i),angle:n(this.angle,i),flipX:this.flipX,flipY:this.flipY,opacity:n(this.opacity,i),shadow:this.shadow&&this.shadow.toObject?this.shadow.toObject():this.shadow,visible:this.visible,backgroundColor:this.backgroundColor,fillRule:this.fillRule,paintFirst:this.paintFirst,globalCompositeOperation:this.globalCompositeOperation,skewX:n(this.skewX,i),skewY:n(this.skewY,i)};return this.clipPath&&!this.clipPath.excludeFromExport&&(r.clipPath=this.clipPath.toObject(t),r.clipPath.inverted=this.clipPath.inverted,r.clipPath.absolutePositioned=this.clipPath.absolutePositioned),e.util.populateWithProperties(this,r,t),this.includeDefaultValues||(r=this._removeDefaultValues(r)),r},toDatalessObject:function(t){return this.toObject(t)},_removeDefaultValues:function(t){var i=e.util.getKlass(t.type).prototype;return Object.keys(t).forEach((function(e){"left"!==e&&"top"!==e&&"type"!==e&&(t[e]===i[e]&&delete t[e],Array.isArray(t[e])&&Array.isArray(i[e])&&0===t[e].length&&0===i[e].length&&delete t[e])})),t},toString:function(){return"#"},getObjectScaling:function(){if(!this.group)return new e.Point(Math.abs(this.scaleX),Math.abs(this.scaleY));var t=e.util.qrDecompose(this.calcTransformMatrix());return new e.Point(Math.abs(t.scaleX),Math.abs(t.scaleY))},getTotalObjectScaling:function(){var t=this.getObjectScaling();if(this.canvas){var e=this.canvas.getZoom(),i=this.canvas.getRetinaScaling();t.scalarMultiplyEquals(e*i)}return t},getObjectOpacity:function(){var t=this.opacity;return this.group&&(t*=this.group.getObjectOpacity()),t},getTotalAngle:function(){return this.group?e.util.qrDecompose(this.calcTransformMatrix()).angle:this.angle},_set:function(t,i){var r="scaleX"===t||"scaleY"===t,n=this[t]!==i,s=!1;return r&&(i=this._constrainScale(i)),"scaleX"===t&&i<0?(this.flipX=!this.flipX,i*=-1):"scaleY"===t&&i<0?(this.flipY=!this.flipY,i*=-1):"shadow"!==t||!i||i instanceof e.Shadow?"dirty"===t&&this.group&&this.group.set("dirty",i):i=new e.Shadow(i),this[t]=i,n&&(s=this.group&&this.group.isOnACache(),this.cacheProperties.indexOf(t)>-1?(this.dirty=!0,s&&this.group.set("dirty",!0)):s&&this.stateProperties.indexOf(t)>-1&&this.group.set("dirty",!0)),this},getViewportTransform:function(){return this.canvas&&this.canvas.viewportTransform?this.canvas.viewportTransform:e.iMatrix.concat()},isNotVisible:function(){return 0===this.opacity||!this.width&&!this.height&&0===this.strokeWidth||!this.visible},render:function(t){this.isNotVisible()||this.canvas&&this.canvas.skipOffscreen&&!this.group&&!this.isOnScreen()||(t.save(),this._setupCompositeOperation(t),this.drawSelectionBackground(t),this.transform(t),this._setOpacity(t),this._setShadow(t,this),this.shouldCache()?(this.renderCache(),this.drawCacheOnCanvas(t)):(this._removeCacheCanvas(),this.dirty=!1,this.drawObject(t),this.objectCaching&&this.statefullCache&&this.saveState({propertySet:"cacheProperties"})),t.restore())},renderCache:function(t){t=t||{},this._cacheCanvas&&this._cacheContext||this._createCacheCanvas(),this.isCacheDirty()&&(this.statefullCache&&this.saveState({propertySet:"cacheProperties"}),this.drawObject(this._cacheContext,t.forClipping),this.dirty=!1)},_removeCacheCanvas:function(){this._cacheCanvas=null,this._cacheContext=null,this.cacheWidth=0,this.cacheHeight=0},hasStroke:function(){return this.stroke&&"transparent"!==this.stroke&&0!==this.strokeWidth},hasFill:function(){return this.fill&&"transparent"!==this.fill},needsItsOwnCache:function(){return!("stroke"!==this.paintFirst||!this.hasFill()||!this.hasStroke()||"object"!=typeof this.shadow)||!!this.clipPath},shouldCache:function(){return this.ownCaching=this.needsItsOwnCache()||this.objectCaching&&(!this.group||!this.group.isOnACache()),this.ownCaching},willDrawShadow:function(){return!!this.shadow&&(0!==this.shadow.offsetX||0!==this.shadow.offsetY)},drawClipPathOnCache:function(t,i){if(t.save(),i.inverted?t.globalCompositeOperation="destination-out":t.globalCompositeOperation="destination-in",i.absolutePositioned){var r=e.util.invertTransform(this.calcTransformMatrix());t.transform(r[0],r[1],r[2],r[3],r[4],r[5])}i.transform(t),t.scale(1/i.zoomX,1/i.zoomY),t.drawImage(i._cacheCanvas,-i.cacheTranslationX,-i.cacheTranslationY),t.restore()},drawObject:function(t,e){var i=this.fill,r=this.stroke;e?(this.fill="black",this.stroke="",this._setClippingProperties(t)):this._renderBackground(t),this._render(t),this._drawClipPath(t,this.clipPath),this.fill=i,this.stroke=r},_drawClipPath:function(t,e){e&&(e._set("canvas",this.canvas),e.shouldCache(),e._transformDone=!0,e.renderCache({forClipping:!0}),this.drawClipPathOnCache(t,e))},drawCacheOnCanvas:function(t){t.scale(1/this.zoomX,1/this.zoomY),t.drawImage(this._cacheCanvas,-this.cacheTranslationX,-this.cacheTranslationY)},isCacheDirty:function(t){if(this.isNotVisible())return!1;if(this._cacheCanvas&&this._cacheContext&&!t&&this._updateCacheCanvas())return!0;if(this.dirty||this.clipPath&&this.clipPath.absolutePositioned||this.statefullCache&&this.hasStateChanged("cacheProperties")){if(this._cacheCanvas&&this._cacheContext&&!t){var e=this.cacheWidth/this.zoomX,i=this.cacheHeight/this.zoomY;this._cacheContext.clearRect(-e/2,-i/2,e,i)}return!0}return!1},_renderBackground:function(t){if(this.backgroundColor){var e=this._getNonTransformedDimensions();t.fillStyle=this.backgroundColor,t.fillRect(-e.x/2,-e.y/2,e.x,e.y),this._removeShadow(t)}},_setOpacity:function(t){this.group&&!this.group._transformDone?t.globalAlpha=this.getObjectOpacity():t.globalAlpha*=this.opacity},_setStrokeStyles:function(t,e){var i=e.stroke;i&&(t.lineWidth=e.strokeWidth,t.lineCap=e.strokeLineCap,t.lineDashOffset=e.strokeDashOffset,t.lineJoin=e.strokeLineJoin,t.miterLimit=e.strokeMiterLimit,i.toLive?"percentage"===i.gradientUnits||i.gradientTransform||i.patternTransform?this._applyPatternForTransformedGradient(t,i):(t.strokeStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,i)):t.strokeStyle=e.stroke)},_setFillStyles:function(t,e){var i=e.fill;i&&(i.toLive?(t.fillStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,e.fill)):t.fillStyle=i)},_setClippingProperties:function(t){t.globalAlpha=1,t.strokeStyle="transparent",t.fillStyle="#000000"},_setLineDash:function(t,e){e&&0!==e.length&&(1&e.length&&e.push.apply(e,e),t.setLineDash(e))},_renderControls:function(t,i){var r,n,s,a=this.getViewportTransform(),h=this.calcTransformMatrix();n=void 0!==(i=i||{}).hasBorders?i.hasBorders:this.hasBorders,s=void 0!==i.hasControls?i.hasControls:this.hasControls,h=e.util.multiplyTransformMatrices(a,h),r=e.util.qrDecompose(h),t.save(),t.translate(r.translateX,r.translateY),t.lineWidth=1*this.borderScaleFactor,this.group||(t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1),this.flipX&&(r.angle-=180),t.rotate(o(this.group?r.angle:this.angle)),n&&this.drawBorders(t,r,i),s&&this.drawControls(t,i),t.restore()},_setShadow:function(t){if(this.shadow){var i=this.shadow,r=this.canvas,n=r&&r.viewportTransform[0]||1,s=r&&r.viewportTransform[3]||1,o=i.nonScaling?new e.Point(1,1):this.getObjectScaling();r&&r._isRetinaScaling()&&(n*=e.devicePixelRatio,s*=e.devicePixelRatio),t.shadowColor=i.color,t.shadowBlur=i.blur*e.browserShadowBlurConstant*(n+s)*(o.x+o.y)/4,t.shadowOffsetX=i.offsetX*n*o.x,t.shadowOffsetY=i.offsetY*s*o.y}},_removeShadow:function(t){this.shadow&&(t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0)},_applyPatternGradientTransform:function(t,e){if(!e||!e.toLive)return{offsetX:0,offsetY:0};var i=e.gradientTransform||e.patternTransform,r=-this.width/2+e.offsetX||0,n=-this.height/2+e.offsetY||0;return"percentage"===e.gradientUnits?t.transform(this.width,0,0,this.height,r,n):t.transform(1,0,0,1,r,n),i&&t.transform(i[0],i[1],i[2],i[3],i[4],i[5]),{offsetX:r,offsetY:n}},_renderPaintInOrder:function(t){"stroke"===this.paintFirst?(this._renderStroke(t),this._renderFill(t)):(this._renderFill(t),this._renderStroke(t))},_render:function(){},_renderFill:function(t){this.fill&&(t.save(),this._setFillStyles(t,this),"evenodd"===this.fillRule?t.fill("evenodd"):t.fill(),t.restore())},_renderStroke:function(t){if(this.stroke&&0!==this.strokeWidth){if(this.shadow&&!this.shadow.affectStroke&&this._removeShadow(t),t.save(),this.strokeUniform){var e=this.getObjectScaling();t.scale(1/e.x,1/e.y)}this._setLineDash(t,this.strokeDashArray),this._setStrokeStyles(t,this),t.stroke(),t.restore()}},_applyPatternForTransformedGradient:function(t,i){var r,n=this._limitCacheSize(this._getCacheCanvasDimensions()),s=e.util.createCanvasElement(),o=this.canvas.getRetinaScaling(),a=n.x/this.scaleX/o,h=n.y/this.scaleY/o;s.width=a,s.height=h,(r=s.getContext("2d")).beginPath(),r.moveTo(0,0),r.lineTo(a,0),r.lineTo(a,h),r.lineTo(0,h),r.closePath(),r.translate(a/2,h/2),r.scale(n.zoomX/this.scaleX/o,n.zoomY/this.scaleY/o),this._applyPatternGradientTransform(r,i),r.fillStyle=i.toLive(t),r.fill(),t.translate(-this.width/2-this.strokeWidth/2,-this.height/2-this.strokeWidth/2),t.scale(o*this.scaleX/n.zoomX,o*this.scaleY/n.zoomY),t.strokeStyle=r.createPattern(s,"no-repeat")},_findCenterFromElement:function(){return{x:this.left+this.width/2,y:this.top+this.height/2}},_assignTransformMatrixProps:function(){if(this.transformMatrix){var t=e.util.qrDecompose(this.transformMatrix);this.flipX=!1,this.flipY=!1,this.set("scaleX",t.scaleX),this.set("scaleY",t.scaleY),this.angle=t.angle,this.skewX=t.skewX,this.skewY=0}},_removeTransformMatrix:function(t){var i=this._findCenterFromElement();this.transformMatrix&&(this._assignTransformMatrixProps(),i=e.util.transformPoint(i,this.transformMatrix)),this.transformMatrix=null,t&&(this.scaleX*=t.scaleX,this.scaleY*=t.scaleY,this.cropX=t.cropX,this.cropY=t.cropY,i.x+=t.offsetLeft,i.y+=t.offsetTop,this.width=t.width,this.height=t.height),this.setPositionByOrigin(i,"center","center")},clone:function(t){var e=this.toObject(t);return this.constructor.fromObject(e)},cloneAsImage:function(t){var i=this.toCanvasElement(t);return new e.Image(i)},toCanvasElement:function(t){t||(t={});var i=e.util,r=i.saveObjectTransform(this),n=this.group,s=this.shadow,o=Math.abs,a=t.enableRetinaScaling?Math.max(e.devicePixelRatio,1):1,h=(t.multiplier||1)*a;delete this.group,t.withoutTransform&&i.resetObjectTransform(this),t.withoutShadow&&(this.shadow=null);var c,l,u=e.util.createCanvasElement(),f=this.getBoundingRect(!0,!0),d=this.shadow,g={x:0,y:0};if(d){var p=d.blur,v=d.nonScaling?new e.Point(1,1):this.getObjectScaling();g.x=2*Math.round(o(d.offsetX)+p)*o(v.x),g.y=2*Math.round(o(d.offsetY)+p)*o(v.y)}c=f.width+g.x,l=f.height+g.y,u.width=Math.ceil(c),u.height=Math.ceil(l);var m=new e.StaticCanvas(u,{enableRetinaScaling:!1,renderOnAddRemove:!1,skipOffscreen:!1});"jpeg"===t.format&&(m.backgroundColor="#fff"),this.setPositionByOrigin(new e.Point(m.width/2,m.height/2),"center","center");var b=this.canvas;m._objects=[this],this.set("canvas",m),this.setCoords();var y=m.toCanvasElement(h||1,t);return this.set("canvas",b),this.shadow=s,n&&(this.group=n),this.set(r),this.setCoords(),m._objects=[],m.dispose(),m=null,y},toDataURL:function(t){return t||(t={}),e.util.toDataURL(this.toCanvasElement(t),t.format||"png",t.quality||1)},isType:function(t){return arguments.length>1?Array.from(arguments).includes(this.type):this.type===t},complexity:function(){return 1},toJSON:function(t){return this.toObject(t)},rotate:function(t){var e=("center"!==this.originX||"center"!==this.originY)&&this.centeredRotation;return e&&this._setOriginToCenter(),this.set("angle",t),e&&this._resetOrigin(),this},centerH:function(){return this.canvas&&this.canvas.centerObjectH(this),this},viewportCenterH:function(){return this.canvas&&this.canvas.viewportCenterObjectH(this),this},centerV:function(){return this.canvas&&this.canvas.centerObjectV(this),this},viewportCenterV:function(){return this.canvas&&this.canvas.viewportCenterObjectV(this),this},center:function(){return this.canvas&&this.canvas.centerObject(this),this},viewportCenter:function(){return this.canvas&&this.canvas.viewportCenterObject(this),this},setOnGroup:function(){},_setupCompositeOperation:function(t){this.globalCompositeOperation&&(t.globalCompositeOperation=this.globalCompositeOperation)},dispose:function(){e.runningAnimations&&e.runningAnimations.cancelByTarget(this)}}),e.util.createAccessors&&e.util.createAccessors(e.Object),i(e.Object.prototype,e.Observable),e.Object.NUM_FRACTION_DIGITS=2,e.Object._fromObject=function(t,i,n){var s=r(i,!0);return e.util.enlivenObjectEnlivables(s).then((function(e){var r=Object.assign(i,e);return n?new t(i[n],r):new t(r)}))},e.Object.fromObject=function(t){return e.Object._fromObject(e.Object,t)},e.Object.__uid=0)}(void 0!==t?t:window),function(t){var e=fabric.util.degreesToRadians,i={left:-.5,center:0,right:.5},r={top:-.5,center:0,bottom:.5};fabric.util.object.extend(fabric.Object.prototype,{resolveOriginX:function(t){return"string"==typeof t?i[t]:t-.5},resolveOriginY:function(t){return"string"==typeof t?r[t]:t-.5},translateToGivenOrigin:function(t,e,i,r,n){var s,o=t.x,a=t.y,h=this.resolveOriginX(r)-this.resolveOriginX(e),c=this.resolveOriginY(n)-this.resolveOriginY(i);return(h||c)&&(s=this._getTransformedDimensions(),o=t.x+h*s.x,a=t.y+c*s.y),new fabric.Point(o,a)},translateToCenterPoint:function(t,i,r){var n=this.translateToGivenOrigin(t,i,r,"center","center");return this.angle?fabric.util.rotatePoint(n,t,e(this.angle)):n},translateToOriginPoint:function(t,i,r){var n=this.translateToGivenOrigin(t,"center","center",i,r);return this.angle?fabric.util.rotatePoint(n,t,e(this.angle)):n},getCenterPoint:function(){var t=this.getRelativeCenterPoint();return this.group?fabric.util.transformPoint(t,this.group.calcTransformMatrix()):t},getCenterPointRelativeToParent:function(){return this.group?this.getRelativeCenterPoint():null},getRelativeCenterPoint:function(){return this.translateToCenterPoint(new fabric.Point(this.left,this.top),this.originX,this.originY)},getPointByOrigin:function(t,e){var i=this.getRelativeCenterPoint();return this.translateToOriginPoint(i,t,e)},normalizePoint:function(t,i,r){var n,s,o=this.getRelativeCenterPoint();return n=void 0!==i&&void 0!==r?this.translateToGivenOrigin(o,"center","center",i,r):new fabric.Point(this.left,this.top),s=new fabric.Point(t.x,t.y),this.angle&&(s=fabric.util.rotatePoint(s,o,-e(this.angle))),s.subtractEquals(n)},getLocalPointer:function(t,e){return e=e||this.canvas.getPointer(t),fabric.util.transformPoint(new fabric.Point(e.x,e.y),fabric.util.invertTransform(this.calcTransformMatrix())).addEquals(new fabric.Point(this.width/2,this.height/2))},setPositionByOrigin:function(t,e,i){var r=this.translateToCenterPoint(t,e,i),n=this.translateToOriginPoint(r,this.originX,this.originY);this.set("left",n.x),this.set("top",n.y)},adjustPosition:function(t){var r,n,s=e(this.angle),o=this.getScaledWidth(),a=fabric.util.cos(s)*o,h=fabric.util.sin(s)*o;r="string"==typeof this.originX?i[this.originX]:this.originX-.5,n="string"==typeof t?i[t]:t-.5,this.left+=a*(n-r),this.top+=h*(n-r),this.setCoords(),this.originX=t},_setOriginToCenter:function(){this._originalOriginX=this.originX,this._originalOriginY=this.originY;var t=this.getRelativeCenterPoint();this.originX="center",this.originY="center",this.left=t.x,this.top=t.y},_resetOrigin:function(){var t=this.translateToOriginPoint(this.getRelativeCenterPoint(),this._originalOriginX,this._originalOriginY);this.originX=this._originalOriginX,this.originY=this._originalOriginY,this.left=t.x,this.top=t.y,this._originalOriginX=null,this._originalOriginY=null},_getLeftTopCoords:function(){return this.translateToOriginPoint(this.getRelativeCenterPoint(),"left","top")}})}(void 0!==t||window),function(t){var e=fabric.util,i=e.degreesToRadians,r=e.multiplyTransformMatrices,n=e.transformPoint;e.object.extend(fabric.Object.prototype,{oCoords:null,aCoords:null,lineCoords:null,ownMatrixCache:null,matrixCache:null,controls:{},getX:function(){return this.getXY().x},setX:function(t){this.setXY(this.getXY().setX(t))},getRelativeX:function(){return this.left},setRelativeX:function(t){this.left=t},getY:function(){return this.getXY().y},setY:function(t){this.setXY(this.getXY().setY(t))},getRelativeY:function(){return this.top},setRelativeY:function(t){this.top=t},getXY:function(){var t=this.getRelativeXY();return this.group?fabric.util.transformPoint(t,this.group.calcTransformMatrix()):t},setXY:function(t,e,i){this.group&&(t=fabric.util.transformPoint(t,fabric.util.invertTransform(this.group.calcTransformMatrix()))),this.setRelativeXY(t,e,i)},getRelativeXY:function(){return new fabric.Point(this.left,this.top)},setRelativeXY:function(t,e,i){this.setPositionByOrigin(t,e||this.originX,i||this.originY)},_getCoords:function(t,e){return e?t?this.calcACoords():this.calcLineCoords():(this.aCoords&&this.lineCoords||this.setCoords(!0),t?this.aCoords:this.lineCoords)},getCoords:function(t,i){var r=function(t){return[new fabric.Point(t.tl.x,t.tl.y),new fabric.Point(t.tr.x,t.tr.y),new fabric.Point(t.br.x,t.br.y),new fabric.Point(t.bl.x,t.bl.y)]}(this._getCoords(t,i));if(this.group){var n=this.group.calcTransformMatrix();return r.map((function(t){return e.transformPoint(t,n)}))}return r},intersectsWithRect:function(t,e,i,r){var n=this.getCoords(i,r);return"Intersection"===fabric.Intersection.intersectPolygonRectangle(n,t,e).status},intersectsWithObject:function(t,e,i){return"Intersection"===fabric.Intersection.intersectPolygonPolygon(this.getCoords(e,i),t.getCoords(e,i)).status||t.isContainedWithinObject(this,e,i)||this.isContainedWithinObject(t,e,i)},isContainedWithinObject:function(t,e,i){for(var r=this.getCoords(e,i),n=e?t.aCoords:t.lineCoords,s=0,o=t._getImageLines(n);s<4;s++)if(!t.containsPoint(r[s],o))return!1;return!0},isContainedWithinRect:function(t,e,i,r){var n=this.getBoundingRect(i,r);return n.left>=t.x&&n.left+n.width<=e.x&&n.top>=t.y&&n.top+n.height<=e.y},containsPoint:function(t,e,i,r){var n=this._getCoords(i,r),s=(e=e||this._getImageLines(n),this._findCrossPoints(t,e));return 0!==s&&s%2==1},isOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.getCoords(!0,t).some((function(t){return t.x<=i.x&&t.x>=e.x&&t.y<=i.y&&t.y>=e.y}))||(!!this.intersectsWithRect(e,i,!0,t)||this._containsCenterOfCanvas(e,i,t))},_containsCenterOfCanvas:function(t,e,i){var r={x:(t.x+e.x)/2,y:(t.y+e.y)/2};return!!this.containsPoint(r,null,!0,i)},isPartiallyOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.intersectsWithRect(e,i,!0,t)||this.getCoords(!0,t).every((function(t){return(t.x>=i.x||t.x<=e.x)&&(t.y>=i.y||t.y<=e.y)}))&&this._containsCenterOfCanvas(e,i,t)},_getImageLines:function(t){return{topline:{o:t.tl,d:t.tr},rightline:{o:t.tr,d:t.br},bottomline:{o:t.br,d:t.bl},leftline:{o:t.bl,d:t.tl}}},_findCrossPoints:function(t,e){var i,r,n,s=0;for(var o in e)if(!((n=e[o]).o.y=t.y&&n.d.y>=t.y||(n.o.x===n.d.x&&n.o.x>=t.x?r=n.o.x:(0,i=(n.d.y-n.o.y)/(n.d.x-n.o.x),r=-(t.y-0*t.x-(n.o.y-i*n.o.x))/(0-i)),r>=t.x&&(s+=1),2!==s)))break;return s},getBoundingRect:function(t,i){var r=this.getCoords(t,i);return e.makeBoundingBoxFromPoints(r)},getScaledWidth:function(){return this._getTransformedDimensions().x},getScaledHeight:function(){return this._getTransformedDimensions().y},_constrainScale:function(t){return Math.abs(t)0&&this===r[r.length-1])return{fork:[],otherFork:[t].concat(r.slice(0,r.length-1)),common:[this]};for(var n,s=0;s-1&&s>o}}}}}),function(t){function e(t,e){if(e){if(e.toLive)return t+": url(#SVGID_"+e.id+"); ";var i=new fabric.Color(e),r=t+": "+i.toRgb()+"; ",n=i.getAlpha();return 1!==n&&(r+=t+"-opacity: "+n.toString()+"; "),r}return t+": none; "}var i=fabric.util.toFixed;fabric.util.object.extend(fabric.Object.prototype,{getSvgStyles:function(t){var i=this.fillRule?this.fillRule:"nonzero",r=this.strokeWidth?this.strokeWidth:"0",n=this.strokeDashArray?this.strokeDashArray.join(" "):"none",s=this.strokeDashOffset?this.strokeDashOffset:"0",o=this.strokeLineCap?this.strokeLineCap:"butt",a=this.strokeLineJoin?this.strokeLineJoin:"miter",h=this.strokeMiterLimit?this.strokeMiterLimit:"4",c=void 0!==this.opacity?this.opacity:"1",l=this.visible?"":" visibility: hidden;",u=t?"":this.getSvgFilter(),f=e("fill",this.fill);return[e("stroke",this.stroke),"stroke-width: ",r,"; ","stroke-dasharray: ",n,"; ","stroke-linecap: ",o,"; ","stroke-dashoffset: ",s,"; ","stroke-linejoin: ",a,"; ","stroke-miterlimit: ",h,"; ",f,"fill-rule: ",i,"; ","opacity: ",c,";",u,l].join("")},getSvgSpanStyles:function(t,i){var r="; ",n=t.fontFamily?"font-family: "+(-1===t.fontFamily.indexOf("'")&&-1===t.fontFamily.indexOf('"')?"'"+t.fontFamily+"'":t.fontFamily)+r:"",s=t.strokeWidth?"stroke-width: "+t.strokeWidth+r:"",o=(n=n,t.fontSize?"font-size: "+t.fontSize+"px"+r:""),a=t.fontStyle?"font-style: "+t.fontStyle+r:"",h=t.fontWeight?"font-weight: "+t.fontWeight+r:"",c=t.fill?e("fill",t.fill):"",l=t.stroke?e("stroke",t.stroke):"",u=this.getSvgTextDecoration(t);return u&&(u="text-decoration: "+u+r),[l,s,n,o,a,h,u,c,t.deltaY?"baseline-shift: "+-t.deltaY+"; ":"",i?"white-space: pre; ":""].join("")},getSvgTextDecoration:function(t){return["overline","underline","line-through"].filter((function(e){return t[e.replace("-","")]})).join(" ")},getSvgFilter:function(){return this.shadow?"filter: url(#SVGID_"+this.shadow.id+");":""},getSvgCommons:function(){return[this.id?'id="'+this.id+'" ':"",this.clipPath?'clip-path="url(#'+this.clipPath.clipPathId+')" ':""].join("")},getSvgTransform:function(t,e){var i=t?this.calcTransformMatrix():this.calcOwnMatrix();return'transform="'+fabric.util.matrixToSVG(i)+(e||"")+'" '},_setSVGBg:function(t){if(this.backgroundColor){var e=fabric.Object.NUM_FRACTION_DIGITS;t.push("\t\t\n')}},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(t),{reviver:t})},toClipPathSVG:function(t){return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(t),{reviver:t})},_createBaseClipPathSVGMarkup:function(t,e){var i=(e=e||{}).reviver,r=e.additionalTransform||"",n=[this.getSvgTransform(!0,r),this.getSvgCommons()].join(""),s=t.indexOf("COMMON_PARTS");return t[s]=n,i?i(t.join("")):t.join("")},_createBaseSVGMarkup:function(t,e){var i,r,n=(e=e||{}).noStyle,s=e.reviver,o=n?"":'style="'+this.getSvgStyles()+'" ',a=e.withShadow?'style="'+this.getSvgFilter()+'" ':"",h=this.clipPath,c=this.strokeUniform?'vector-effect="non-scaling-stroke" ':"",l=h&&h.absolutePositioned,u=this.stroke,f=this.fill,d=this.shadow,g=[],p=t.indexOf("COMMON_PARTS"),v=e.additionalTransform;return h&&(h.clipPathId="CLIPPATH_"+fabric.Object.__uid++,r='\n'+h.toClipPathSVG(s)+"\n"),l&&g.push("\n"),g.push("\n"),i=[o,c,n?"":this.addPaintOrder()," ",v?'transform="'+v+'" ':""].join(""),t[p]=i,f&&f.toLive&&g.push(f.toSVG(this)),u&&u.toLive&&g.push(u.toSVG(this)),d&&g.push(d.toSVG(this)),h&&g.push(r),g.push(t.join("")),g.push("\n"),l&&g.push("\n"),s?s(g.join("")):g.join("")},addPaintOrder:function(){return"fill"!==this.paintFirst?' paint-order="'+this.paintFirst+'" ':""}})}(void 0!==t||window),function(t){var e=fabric.util.object.extend,i="stateProperties";function r(t,i,r){var n={};r.forEach((function(e){n[e]=t[e]})),e(t[i],n,!0)}function n(t,e,i){if(t===e)return!0;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var r=0,s=t.length;r=0;o--)if(n=s[o],this.isControlVisible(n)&&(r=this._getImageLines(e?this.oCoords[n].touchCorner:this.oCoords[n].corner),0!==(i=this._findCrossPoints(t,r))&&i%2==1))return this.__corner=n,n;return!1},forEachControl:function(t){for(var e in this.controls)t(this.controls[e],e,this)},_setCornerCoords:function(){var t=this.oCoords;for(var e in t){var i=this.controls[e];t[e].corner=i.calcCornerCoords(this.angle,this.cornerSize,t[e].x,t[e].y,!1),t[e].touchCorner=i.calcCornerCoords(this.angle,this.touchCornerSize,t[e].x,t[e].y,!0)}},drawSelectionBackground:function(t){if(!this.selectionBackgroundColor||this.canvas&&!this.canvas.interactive||this.canvas&&this.canvas._activeObject!==this)return this;t.save();var i=this.getRelativeCenterPoint(),r=this._calculateCurrentDimensions(),n=this.canvas.viewportTransform;return t.translate(i.x,i.y),t.scale(1/n[0],1/n[3]),t.rotate(e(this.angle)),t.fillStyle=this.selectionBackgroundColor,t.fillRect(-r.x/2,-r.y/2,r.x,r.y),t.restore(),this},strokeBorders:function(t,e){t.strokeRect(-e.x/2,-e.y/2,e.x,e.y)},_drawBorders:function(t,e,i){var r=Object.assign({hasControls:this.hasControls,borderColor:this.borderColor,borderDashArray:this.borderDashArray},i||{});t.save(),t.strokeStyle=r.borderColor,this._setLineDash(t,r.borderDashArray),this.strokeBorders(t,e),r.hasControls&&this.drawControlsConnectingLines(t,e),t.restore()},drawBorders:function(t,e,i){var r;if(i&&i.forActiveSelection||this.group){var n=fabric.util.sizeAfterTransform(this.width,this.height,e),s=(this.strokeUniform?new fabric.Point(0,0).scalarAddEquals(this.canvas.getZoom()):new fabric.Point(e.scaleX,e.scaleY)).scalarMultiplyEquals(this.strokeWidth);r=n.addEquals(s).scalarAddEquals(this.borderScaleFactor)}else r=this._calculateCurrentDimensions().scalarAddEquals(this.borderScaleFactor);return this._drawBorders(t,r,i),this},drawControlsConnectingLines:function(t,e){var i=!1;return t.beginPath(),this.forEachControl((function(r,n,s){r.withConnection&&r.getVisibility(s,n)&&(i=!0,t.moveTo(r.x*e.x,r.y*e.y),t.lineTo(r.x*e.x+r.offsetX,r.y*e.y+r.offsetY))})),i&&t.stroke(),this},drawControls:function(t,e){e=e||{},t.save();var i,r=this.canvas.getRetinaScaling();return t.setTransform(r,0,0,r,0,0),t.strokeStyle=t.fillStyle=e.cornerColor||this.cornerColor,this.transparentCorners||(t.strokeStyle=e.cornerStrokeColor||this.cornerStrokeColor),this._setLineDash(t,e.cornerDashArray||this.cornerDashArray),this.setCoords(),this.forEachControl((function(r,n,s){r.getVisibility(s,n)&&(i=s.oCoords[n],r.render(t,i.x,i.y,e,s))})),t.restore(),this},isControlVisible:function(t){return this.controls[t]&&this.controls[t].getVisibility(this,t)},setControlVisible:function(t,e){return this._controlsVisibility||(this._controlsVisibility={}),this._controlsVisibility[t]=e,this},setControlsVisibility:function(t){for(var e in t||(t={}),t)this.setControlVisible(e,t[e]);return this},onDeselect:function(){},onSelect:function(){}})}(void 0!==t||window),fabric.util.object.extend(fabric.StaticCanvas.prototype,{FX_DURATION:500,fxCenterObjectH:function(t,e){var i=function(){},r=(e=e||{}).onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.getX(),endValue:this.getCenterPoint().x,duration:this.FX_DURATION,onChange:function(e){t.setX(e),s.requestRenderAll(),n()},onComplete:function(){t.setCoords(),r()}})},fxCenterObjectV:function(t,e){var i=function(){},r=(e=e||{}).onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.getY(),endValue:this.getCenterPoint().y,duration:this.FX_DURATION,onChange:function(e){t.setY(e),s.requestRenderAll(),n()},onComplete:function(){t.setCoords(),r()}})},fxRemove:function(t,e){var i=function(){},r=(e=e||{}).onComplete||i,n=e.onChange||i,s=this;return fabric.util.animate({target:this,startValue:t.opacity,endValue:0,duration:this.FX_DURATION,onChange:function(e){t.set("opacity",e),s.requestRenderAll(),n()},onComplete:function(){s.remove(t),r()}})}}),fabric.util.object.extend(fabric.Object.prototype,{animate:function(){if(arguments[0]&&"object"==typeof arguments[0]){var t,e,i=[],r=[];for(t in arguments[0])i.push(t);for(var n=0,s=i.length;n-1||n&&s.colorProperties.indexOf(n[1])>-1,a=n?this.get(n[0])[n[1]]:this.get(t);"from"in i||(i.from=a),o||(e=~e.indexOf("=")?a+parseFloat(e.replace("=","")):parseFloat(e));var h={target:this,startValue:i.from,endValue:e,byValue:i.by,easing:i.easing,duration:i.duration,abort:i.abort&&function(t,e,r){return i.abort.call(s,t,e,r)},onChange:function(e,o,a){n?s[n[0]][n[1]]=e:s.set(t,e),r||i.onChange&&i.onChange(e,o,a)},onComplete:function(t,e,n){r||(s.setCoords(),i.onComplete&&i.onComplete(t,e,n))}};return o?fabric.util.animateColor(h.startValue,h.endValue,h.duration,h):fabric.util.animate(h)}}),function(t){var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.object.clone,n={x1:1,x2:1,y1:1,y2:1};function s(t,e){var i=t.origin,r=t.axis1,n=t.axis2,s=t.dimension,o=e.nearest,a=e.center,h=e.farthest;return function(){switch(this.get(i)){case o:return Math.min(this.get(r),this.get(n));case a:return Math.min(this.get(r),this.get(n))+.5*this.get(s);case h:return Math.max(this.get(r),this.get(n))}}}e.Line?e.warn("fabric.Line is already defined"):(e.Line=e.util.createClass(e.Object,{type:"line",x1:0,y1:0,x2:0,y2:0,cacheProperties:e.Object.prototype.cacheProperties.concat("x1","x2","y1","y2"),initialize:function(t,e){t||(t=[0,0,0,0]),this.callSuper("initialize",e),this.set("x1",t[0]),this.set("y1",t[1]),this.set("x2",t[2]),this.set("y2",t[3]),this._setWidthHeight(e)},_setWidthHeight:function(t){t||(t={}),this.width=Math.abs(this.x2-this.x1),this.height=Math.abs(this.y2-this.y1),this.left="left"in t?t.left:this._getLeftToOriginX(),this.top="top"in t?t.top:this._getTopToOriginY()},_set:function(t,e){return this.callSuper("_set",t,e),void 0!==n[t]&&this._setWidthHeight(),this},_getLeftToOriginX:s({origin:"originX",axis1:"x1",axis2:"x2",dimension:"width"},{nearest:"left",center:"center",farthest:"right"}),_getTopToOriginY:s({origin:"originY",axis1:"y1",axis2:"y2",dimension:"height"},{nearest:"top",center:"center",farthest:"bottom"}),_render:function(t){t.beginPath();var e=this.calcLinePoints();t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.lineWidth=this.strokeWidth;var i=t.strokeStyle;t.strokeStyle=this.stroke||t.fillStyle,this.stroke&&this._renderStroke(t),t.strokeStyle=i},_findCenterFromElement:function(){return{x:(this.x1+this.x2)/2,y:(this.y1+this.y2)/2}},toObject:function(t){return i(this.callSuper("toObject",t),this.calcLinePoints())},_getNonTransformedDimensions:function(){var t=this.callSuper("_getNonTransformedDimensions");return"butt"===this.strokeLineCap&&(0===this.width&&(t.y-=this.strokeWidth),0===this.height&&(t.x-=this.strokeWidth)),t},calcLinePoints:function(){var t=this.x1<=this.x2?-1:1,e=this.y1<=this.y2?-1:1,i=t*this.width*.5,r=e*this.height*.5;return{x1:i,x2:t*this.width*-.5,y1:r,y2:e*this.height*-.5}},_toSVG:function(){var t=this.calcLinePoints();return["\n']}}),e.Line.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x1 y1 x2 y2".split(" ")),e.Line.fromElement=function(t,r,n){n=n||{};var s=e.parseAttributes(t,e.Line.ATTRIBUTE_NAMES),o=[s.x1||0,s.y1||0,s.x2||0,s.y2||0];r(new e.Line(o,i(s,n)))},e.Line.fromObject=function(t){var i=r(t,!0);return i.points=[t.x1,t.y1,t.x2,t.y2],e.Object._fromObject(e.Line,i,"points").then((function(t){return delete t.points,t}))})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.util.degreesToRadians;e.Circle?e.warn("fabric.Circle is already defined."):(e.Circle=e.util.createClass(e.Object,{type:"circle",radius:0,startAngle:0,endAngle:360,cacheProperties:e.Object.prototype.cacheProperties.concat("radius","startAngle","endAngle"),_set:function(t,e){return this.callSuper("_set",t,e),"radius"===t&&this.setRadius(e),this},toObject:function(t){return this.callSuper("toObject",["radius","startAngle","endAngle"].concat(t))},_toSVG:function(){var t,r=(this.endAngle-this.startAngle)%360;if(0===r)t=["\n'];else{var n=i(this.startAngle),s=i(this.endAngle),o=this.radius;t=['180?"1":"0")+" 1"," "+e.util.cos(s)*o+" "+e.util.sin(s)*o,'" ',"COMMON_PARTS"," />\n"]}return t},_render:function(t){t.beginPath(),t.arc(0,0,this.radius,i(this.startAngle),i(this.endAngle),!1),this._renderPaintInOrder(t)},getRadiusX:function(){return this.get("radius")*this.get("scaleX")},getRadiusY:function(){return this.get("radius")*this.get("scaleY")},setRadius:function(t){return this.radius=t,this.set("width",2*t).set("height",2*t)}}),e.Circle.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("cx cy r".split(" ")),e.Circle.fromElement=function(t,i){var r,n=e.parseAttributes(t,e.Circle.ATTRIBUTE_NAMES);if(!("radius"in(r=n)&&r.radius>=0))throw new Error("value of `r` attribute is required and can not be negative");n.left=(n.left||0)-n.radius,n.top=(n.top||0)-n.radius,i(new e.Circle(n))},e.Circle.fromObject=function(t){return e.Object._fromObject(e.Circle,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});e.Triangle?e.warn("fabric.Triangle is already defined"):(e.Triangle=e.util.createClass(e.Object,{type:"triangle",width:100,height:100,_render:function(t){var e=this.width/2,i=this.height/2;t.beginPath(),t.moveTo(-e,i),t.lineTo(0,-i),t.lineTo(e,i),t.closePath(),this._renderPaintInOrder(t)},_toSVG:function(){var t=this.width/2,e=this.height/2;return["']}}),e.Triangle.fromObject=function(t){return e.Object._fromObject(e.Triangle,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=2*Math.PI;e.Ellipse?e.warn("fabric.Ellipse is already defined."):(e.Ellipse=e.util.createClass(e.Object,{type:"ellipse",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this.set("rx",t&&t.rx||0),this.set("ry",t&&t.ry||0)},_set:function(t,e){switch(this.callSuper("_set",t,e),t){case"rx":this.rx=e,this.set("width",2*e);break;case"ry":this.ry=e,this.set("height",2*e)}return this},getRx:function(){return this.get("rx")*this.get("scaleX")},getRy:function(){return this.get("ry")*this.get("scaleY")},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']},_render:function(t){t.beginPath(),t.save(),t.transform(1,0,0,this.ry/this.rx,0,0),t.arc(0,0,this.rx,0,i,!1),t.restore(),this._renderPaintInOrder(t)}}),e.Ellipse.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("cx cy rx ry".split(" ")),e.Ellipse.fromElement=function(t,i){var r=e.parseAttributes(t,e.Ellipse.ATTRIBUTE_NAMES);r.left=(r.left||0)-r.rx,r.top=(r.top||0)-r.ry,i(new e.Ellipse(r))},e.Ellipse.fromObject=function(t){return e.Object._fromObject(e.Ellipse,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={});e.Rect?e.warn("fabric.Rect is already defined"):(e.Rect=e.util.createClass(e.Object,{stateProperties:e.Object.prototype.stateProperties.concat("rx","ry"),type:"rect",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(t){var e=this.rx?Math.min(this.rx,this.width/2):0,i=this.ry?Math.min(this.ry,this.height/2):0,r=this.width,n=this.height,s=-this.width/2,o=-this.height/2,a=0!==e||0!==i,h=.4477152502;t.beginPath(),t.moveTo(s+e,o),t.lineTo(s+r-e,o),a&&t.bezierCurveTo(s+r-h*e,o,s+r,o+h*i,s+r,o+i),t.lineTo(s+r,o+n-i),a&&t.bezierCurveTo(s+r,o+n-h*i,s+r-h*e,o+n,s+r-e,o+n),t.lineTo(s+e,o+n),a&&t.bezierCurveTo(s+h*e,o+n,s,o+n-h*i,s,o+n-i),t.lineTo(s,o+i),a&&t.bezierCurveTo(s,o+h*i,s+h*e,o,s+e,o),t.closePath(),this._renderPaintInOrder(t)},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']}}),e.Rect.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x y rx ry width height".split(" ")),e.Rect.fromElement=function(t,i,r){if(!t)return i(null);r=r||{};var n=e.parseAttributes(t,e.Rect.ATTRIBUTE_NAMES);n.left=n.left||0,n.top=n.top||0,n.height=n.height||0,n.width=n.width||0;var s=new e.Rect(Object.assign({},r,n));s.visible=s.visible&&s.width>0&&s.height>0,i(s)},e.Rect.fromObject=function(t){return e.Object._fromObject(e.Rect,t)})}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.array.min,n=e.util.array.max,s=e.util.toFixed,o=e.util.projectStrokeOnPoints;e.Polyline?e.warn("fabric.Polyline is already defined"):(e.Polyline=e.util.createClass(e.Object,{type:"polyline",points:null,exactBoundingBox:!1,cacheProperties:e.Object.prototype.cacheProperties.concat("points"),initialize:function(t,e){e=e||{},this.points=t||[],this.callSuper("initialize",e),this._setPositionDimensions(e)},_projectStrokeOnPoints:function(){return o(this.points,this,!0)},_setPositionDimensions:function(t){t||(t={});var e,i=this._calcDimensions(t),r=this.exactBoundingBox?this.strokeWidth:0;this.width=i.width-r,this.height=i.height-r,t.fromSVG||(e=this.translateToGivenOrigin({x:i.left-this.strokeWidth/2+r/2,y:i.top-this.strokeWidth/2+r/2},"left","top",this.originX,this.originY)),void 0===t.left&&(this.left=t.fromSVG?i.left:e.x),void 0===t.top&&(this.top=t.fromSVG?i.top:e.y),this.pathOffset={x:i.left+this.width/2+r/2,y:i.top+this.height/2+r/2}},_calcDimensions:function(){var t=this.exactBoundingBox?this._projectStrokeOnPoints():this.points,e=r(t,"x")||0,i=r(t,"y")||0;return{left:e,top:i,width:(n(t,"x")||0)-e,height:(n(t,"y")||0)-i}},toObject:function(t){return i(this.callSuper("toObject",t),{points:this.points.concat()})},_toSVG:function(){for(var t=[],i=this.pathOffset.x,r=this.pathOffset.y,n=e.Object.NUM_FRACTION_DIGITS,o=0,a=this.points.length;o\n']},commonRender:function(t){var e,i=this.points.length,r=this.pathOffset.x,n=this.pathOffset.y;if(!i||isNaN(this.points[i-1].y))return!1;t.beginPath(),t.moveTo(this.points[0].x-r,this.points[0].y-n);for(var s=0;s"},toObject:function(t){return n(this.callSuper("toObject",t),{path:this.path.map((function(t){return t.slice()}))})},toDatalessObject:function(t){var e=this.toObject(["sourcePath"].concat(t));return e.sourcePath&&delete e.path,e},_toSVG:function(){return["\n"]},_getOffsetTransform:function(){var t=e.Object.NUM_FRACTION_DIGITS;return" translate("+o(-this.pathOffset.x,t)+", "+o(-this.pathOffset.y,t)+")"},toClipPathSVG:function(t){var e=this._getOffsetTransform();return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},toSVG:function(t){var e=this._getOffsetTransform();return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},complexity:function(){return this.path.length},_calcDimensions:function(){for(var t,n,s=[],o=[],a=0,h=0,c=0,l=0,u=0,f=this.path.length;u0){var r=this._activeObjects.indexOf(i);r>-1&&(this._activeObjects.splice(r,1),this._set("dirty",!0))}},_watchObject:function(t,e){var i=t?"on":"off";t&&this._watchObject(!1,e),e[i]("changed",this.__objectMonitor),e[i]("modified",this.__objectMonitor),e[i]("selected",this.__objectSelectionTracker),e[i]("deselected",this.__objectSelectionDisposer)},canEnterGroup:function(t){return t===this||this.isDescendantOf(t)?(console.error("fabric.Group: circular object trees are not supported, this call has no effect"),!1):-1===this._objects.indexOf(t)||(console.error("fabric.Group: duplicate objects are not supported inside group, this call has no effect"),!1)},enterGroup:function(t,e){return t.group&&t.group.remove(t),this._enterGroup(t,e),!0},_enterGroup:function(t,e){e&&s(t,i(r(this.calcTransformMatrix()),t.calcTransformMatrix())),this._shouldSetNestedCoords()&&t.setCoords(),t._set("group",this),t._set("canvas",this.canvas),this.interactive&&this._watchObject(!0,t);var n=this.canvas&&this.canvas.getActiveObject&&this.canvas.getActiveObject();n&&(n===t||t.isDescendantOf(n))&&this._activeObjects.push(t)},exitGroup:function(t,e){this._exitGroup(t,e),t._set("canvas",void 0)},_exitGroup:function(t,e){t._set("group",void 0),e||(s(t,i(this.calcTransformMatrix(),t.calcTransformMatrix())),t.setCoords()),this._watchObject(!1,t);var r=this._activeObjects.length>0?this._activeObjects.indexOf(t):-1;r>-1&&this._activeObjects.splice(r,1)},_onAfterObjectsChange:function(t,e){this._applyLayoutStrategy({type:t,targets:e}),this._set("dirty",!0)},_onObjectAdded:function(t){this.enterGroup(t,!0),t.fire("added",{target:this})},_onRelativeObjectAdded:function(t){this.enterGroup(t,!1),t.fire("added",{target:this})},_onObjectRemoved:function(t,e){this.exitGroup(t,e),t.fire("removed",{target:this})},shouldCache:function(){var t=e.Object.prototype.shouldCache.call(this);if(t)for(var i=0;is.targets.length){var o=s.targets.concat(this);return this.prepareBoundingBox(t,o,s)}if("fit-content"===t||"fit-content-lazy"===t||"fixed"===t&&("initialization"===s.type||"imperative"===s.type))return this.prepareBoundingBox(t,i,s);if("clip-path"===t&&this.clipPath){var a=this.clipPath,h=a._getTransformedDimensions();if(a.absolutePositioned&&("initialization"===s.type||"layout_change"===s.type)){var c=a.getCenterPoint();if(this.group){var l=r(this.group.calcTransformMatrix());c=n(c,l)}return{centerX:c.x,centerY:c.y,width:h.x,height:h.y}}if(!a.absolutePositioned){var u,f=a.getRelativeCenterPoint();c=n(f,this.calcOwnMatrix(),!0);if("initialization"===s.type||"layout_change"===s.type){var d=this.prepareBoundingBox(t,i,s)||{};return{centerX:(u=new e.Point(d.centerX||0,d.centerY||0)).x+c.x,centerY:u.y+c.y,correctionX:d.correctionX-c.x,correctionY:d.correctionY-c.y,width:a.width,height:a.height}}return{centerX:(u=this.getRelativeCenterPoint()).x+c.x,centerY:u.y+c.y,width:h.x,height:h.y}}}else if("svg"===t&&"initialization"===s.type){d=this.getObjectsBoundingBox(i,!0)||{};return Object.assign(d,{correctionX:-d.offsetX||0,correctionY:-d.offsetY||0})}},prepareBoundingBox:function(t,e,i){return"initialization"===i.type?this.prepareInitialBoundingBox(t,e,i):"imperative"===i.type&&i.context?Object.assign(this.getObjectsBoundingBox(e)||{},i.context):this.getObjectsBoundingBox(e)},prepareInitialBoundingBox:function(t,i,r){var n=r.options||{},s="number"==typeof n.left,o="number"==typeof n.top,a="number"==typeof n.width,h="number"==typeof n.height;if(!(s&&o&&a&&h&&r.objectsRelativeToGroup||0===i.length)){var c=this.getObjectsBoundingBox(i)||{},l=a?this.width:c.width||0,u=h?this.height:c.height||0,f=new e.Point(c.centerX||0,c.centerY||0),d=new e.Point(this.resolveOriginX(this.originX),this.resolveOriginY(this.originY)),g=new e.Point(l,u),p=this._getTransformedDimensions({width:0,height:0}),v=this._getTransformedDimensions({width:l,height:u,strokeWidth:0}),m=this._getTransformedDimensions({width:c.width,height:c.height,strokeWidth:0}),b=new e.Point(0,0),y=d.scalarAdd(.5),_=v.multiply(y),x=new e.Point(a?m.x/2:_.x,h?m.y/2:_.y),C=new e.Point(s?this.left-(v.x+p.x)*d.x:f.x-x.x,o?this.top-(v.y+p.y)*d.y:f.y-x.y),w=new e.Point(s?C.x-f.x+m.x*(a?.5:0):-(a?.5*(v.x-p.x):v.x*y.x),o?C.y-f.y+m.y*(h?.5:0):-(h?.5*(v.y-p.y):v.y*y.y)).add(b),S=new e.Point(a?-v.x/2:0,h?-v.y/2:0).add(w);return{centerX:C.x,centerY:C.y,correctionX:S.x,correctionY:S.y,width:g.x,height:g.y}}},getObjectsBoundingBox:function(t,i){if(0===t.length)return null;var r,s,a,h,c,l;t.forEach((function(t,i){if(r=t.getRelativeCenterPoint(),s=t._getTransformedDimensions().scalarDivideEquals(2),t.angle){var n=o(t.angle),u=Math.abs(e.util.sin(n)),f=Math.abs(e.util.cos(n)),d=s.x*f+s.y*u,g=s.x*u+s.y*f;s=new e.Point(d,g)}c=r.subtract(s),l=r.add(s),0===i?(a=new e.Point(Math.min(c.x,l.x),Math.min(c.y,l.y)),h=new e.Point(Math.max(c.x,l.x),Math.max(c.y,l.y))):(a.setXY(Math.min(a.x,c.x,l.x),Math.min(a.y,c.y,l.y)),h.setXY(Math.max(h.x,c.x,l.x),Math.max(h.y,c.y,l.y)))}));var u=h.subtract(a),f=i?u.scalarDivide(2):a.midPointFrom(h),d=n(a,this.calcOwnMatrix()),g=n(f,this.calcOwnMatrix());return{offsetX:d.x,offsetY:d.y,centerX:g.x,centerY:g.y,width:u.x,height:u.y}},onLayout:function(){},__serializeObjects:function(t,e){var i=this.includeDefaultValues;return this._objects.filter((function(t){return!t.excludeFromExport})).map((function(r){var n=r.includeDefaultValues;r.includeDefaultValues=i;var s=r[t||"toObject"](e);return r.includeDefaultValues=n,s}))},toObject:function(t){var e=this.callSuper("toObject",["layout","subTargetCheck","interactive"].concat(t));return e.objects=this.__serializeObjects("toObject",t),e},toString:function(){return"#"},dispose:function(){this._activeObjects=[],this.forEachObject((function(t){this._watchObject(!1,t),t.dispose&&t.dispose()}),this),this.callSuper("dispose")},_createSVGBgRect:function(t){if(!this.backgroundColor)return"";var i=e.Rect.prototype._toSVG.call(this,t),r=i.indexOf("COMMON_PARTS");return i[r]='for="group" ',i.join("")},_toSVG:function(t){var e=["\n"],i=this._createSVGBgRect(t);i&&e.push("\t\t",i);for(var r=0;r\n"),e},getSvgStyles:function(){var t=void 0!==this.opacity&&1!==this.opacity?"opacity: "+this.opacity+";":"",e=this.visible?"":" visibility: hidden;";return[t,this.getSvgFilter(),e].join("")},toClipPathSVG:function(t){var e=[],i=this._createSVGBgRect(t);i&&e.push("\t",i);for(var r=0;r"},shouldCache:function(){return!1},isOnACache:function(){return!1},_renderControls:function(t,e,i){t.save(),t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,this.callSuper("_renderControls",t,e);for(var r=Object.assign({hasControls:!1},i,{forActiveSelection:!0}),n=0;n\n','\t\n',"\n"),o=' clip-path="url(#imageCrop_'+h+')" '}if(this.imageSmoothing||(a='" image-rendering="optimizeSpeed'),i.push("\t\n"),this.stroke||this.strokeDashArray){var c=this.fill;this.fill=null,t=["\t\n'],this.fill=c}return e="fill"!==this.paintFirst?e.concat(t,i):e.concat(i,t)},getSrc:function(t){var e=t?this._element:this._originalElement;return e?e.toDataURL?e.toDataURL():this.srcFromAttribute?e.getAttribute("src"):e.src:this.src||""},setSrc:function(t,e){var i=this;return fabric.util.loadImage(t,e).then((function(t){return i.setElement(t,e),i._setWidthHeight(),i}))},toString:function(){return'#'},applyResizeFilters:function(){var t=this.resizeFilter,e=this.minimumScaleTrigger,i=this.getTotalObjectScaling(),r=i.x,n=i.y,s=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||r>e&&n>e)return this._element=s,this._filterScalingX=1,this._filterScalingY=1,this._lastScaleX=r,void(this._lastScaleY=n);fabric.filterBackend||(fabric.filterBackend=fabric.initFilterBackend());var o=fabric.util.createCanvasElement(),a=this._filteredEl?this.cacheKey+"_filtered":this.cacheKey,h=s.width,c=s.height;o.width=h,o.height=c,this._element=o,this._lastScaleX=t.scaleX=r,this._lastScaleY=t.scaleY=n,fabric.filterBackend.applyFilters([t],s,h,c,this._element,a),this._filterScalingX=o.width/this._originalElement.width,this._filterScalingY=o.height/this._originalElement.height},applyFilters:function(t){if(t=(t=t||this.filters||[]).filter((function(t){return t&&!t.isNeutralState()})),this.set("dirty",!0),this.removeTexture(this.cacheKey+"_filtered"),0===t.length)return this._element=this._originalElement,this._filteredEl=null,this._filterScalingX=1,this._filterScalingY=1,this;var e=this._originalElement,i=e.naturalWidth||e.width,r=e.naturalHeight||e.height;if(this._element===this._originalElement){var n=fabric.util.createCanvasElement();n.width=i,n.height=r,this._element=n,this._filteredEl=n}else this._element=this._filteredEl,this._filteredEl.getContext("2d").clearRect(0,0,i,r),this._lastScaleX=1,this._lastScaleY=1;return fabric.filterBackend||(fabric.filterBackend=fabric.initFilterBackend()),fabric.filterBackend.applyFilters(t,this._originalElement,i,r,this._element,this.cacheKey),this._originalElement.width===this._element.width&&this._originalElement.height===this._element.height||(this._filterScalingX=this._element.width/this._originalElement.width,this._filterScalingY=this._element.height/this._originalElement.height),this},_render:function(t){fabric.util.setImageSmoothing(t,this.imageSmoothing),!0!==this.isMoving&&this.resizeFilter&&this._needsResize()&&this.applyResizeFilters(),this._stroke(t),this._renderPaintInOrder(t)},drawCacheOnCanvas:function(t){fabric.util.setImageSmoothing(t,this.imageSmoothing),fabric.Object.prototype.drawCacheOnCanvas.call(this,t)},shouldCache:function(){return this.needsItsOwnCache()},_renderFill:function(t){var e=this._element;if(e){var i=this._filterScalingX,r=this._filterScalingY,n=this.width,s=this.height,o=Math.min,a=Math.max,h=a(this.cropX,0),c=a(this.cropY,0),l=e.naturalWidth||e.width,u=e.naturalHeight||e.height,f=h*i,d=c*r,g=o(n*i,l-f),p=o(s*r,u-d),v=-n/2,m=-s/2,b=o(n,l/i-h),y=o(s,u/r-c);e&&t.drawImage(e,f,d,g,p,v,m,b,y)}},_needsResize:function(){var t=this.getTotalObjectScaling();return t.x!==this._lastScaleX||t.y!==this._lastScaleY},_resetWidthHeight:function(){this.set(this.getOriginalSize())},_initElement:function(t,e){this.setElement(fabric.util.getById(t),e),fabric.util.addClass(this.getElement(),fabric.Image.CSS_CANVAS)},_initConfig:function(t){t||(t={}),this.setOptions(t),this._setWidthHeight(t)},_setWidthHeight:function(t){t||(t={});var e=this.getElement();this.width=t.width||e.naturalWidth||e.width||0,this.height=t.height||e.naturalHeight||e.height||0},parsePreserveAspectRatioAttribute:function(){var t,e=fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio||""),i=this._element.width,r=this._element.height,n=1,s=1,o=0,a=0,h=0,c=0,l=this.width,u=this.height,f={width:l,height:u};return!e||"none"===e.alignX&&"none"===e.alignY?(n=l/i,s=u/r):("meet"===e.meetOrSlice&&(t=(l-i*(n=s=fabric.util.findScaleToFit(this._element,f)))/2,"Min"===e.alignX&&(o=-t),"Max"===e.alignX&&(o=t),t=(u-r*s)/2,"Min"===e.alignY&&(a=-t),"Max"===e.alignY&&(a=t)),"slice"===e.meetOrSlice&&(t=i-l/(n=s=fabric.util.findScaleToCover(this._element,f)),"Mid"===e.alignX&&(h=t/2),"Max"===e.alignX&&(h=t),t=r-u/s,"Mid"===e.alignY&&(c=t/2),"Max"===e.alignY&&(c=t),i=l/n,r=u/s)),{width:i,height:r,scaleX:n,scaleY:s,offsetLeft:o,offsetTop:a,cropX:h,cropY:c}}}),fabric.Image.CSS_CANVAS="canvas-img",fabric.Image.prototype.getSvgSrc=fabric.Image.prototype.getSrc,fabric.Image.fromObject=function(t){var e=Object.assign({},t),i=e.filters,r=e.resizeFilter;return delete e.resizeFilter,delete e.filters,Promise.all([fabric.util.loadImage(e.src,{crossOrigin:t.crossOrigin}),i&&fabric.util.enlivenObjects(i,"fabric.Image.filters"),r&&fabric.util.enlivenObjects([r],"fabric.Image.filters"),fabric.util.enlivenObjectEnlivables(e)]).then((function(t){return e.filters=t[1]||[],e.resizeFilter=t[2]&&t[2][0],new fabric.Image(t[0],Object.assign(e,t[3]))}))},fabric.Image.fromURL=function(t,e){return fabric.util.loadImage(t,e||{}).then((function(t){return new fabric.Image(t,e)}))},fabric.Image.ATTRIBUTE_NAMES=fabric.SHARED_ATTRIBUTES.concat("x y width height preserveAspectRatio xlink:href crossOrigin image-rendering".split(" ")),fabric.Image.fromElement=function(t,e,i){var r=fabric.parseAttributes(t,fabric.Image.ATTRIBUTE_NAMES);fabric.Image.fromURL(r["xlink:href"],Object.assign({},i||{},r)).then((function(t){e(t)}))})}(void 0!==t?t:window),fabric.util.object.extend(fabric.Object.prototype,{_getAngleValueForStraighten:function(){var t=this.angle%360;return t>0?90*Math.round((t-1)/90):90*Math.round(t/90)},straighten:function(){return this.rotate(this._getAngleValueForStraighten())},fxStraighten:function(t){var e=function(){},i=(t=t||{}).onComplete||e,r=t.onChange||e,n=this;return fabric.util.animate({target:this,startValue:this.get("angle"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(t){n.rotate(t),r()},onComplete:function(){n.setCoords(),i()}})}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{straightenObject:function(t){return t.straighten(),this.requestRenderAll(),this},fxStraightenObject:function(t){return t.fxStraighten({onChange:this.requestRenderAllBound})}}),function(t){function e(t,e){var i="precision "+e+" float;\nvoid main(){}",r=t.createShader(t.FRAGMENT_SHADER);return t.shaderSource(r,i),t.compileShader(r),!!t.getShaderParameter(r,t.COMPILE_STATUS)}function i(t){t&&t.tileSize&&(this.tileSize=t.tileSize),this.setupGLContext(this.tileSize,this.tileSize),this.captureGPUInfo()}fabric.isWebglSupported=function(t){if(fabric.isLikelyNode)return!1;t=t||fabric.WebglFilterBackend.prototype.tileSize;var i=document.createElement("canvas"),r=i.getContext("webgl")||i.getContext("experimental-webgl"),n=!1;if(r){fabric.maxTextureSize=r.getParameter(r.MAX_TEXTURE_SIZE),n=fabric.maxTextureSize>=t;for(var s=["highp","mediump","lowp"],o=0;o<3;o++)if(e(r,s[o])){fabric.webGlPrecision=s[o];break}}return this.isSupported=n,n},fabric.WebglFilterBackend=i,i.prototype={tileSize:2048,resources:{},setupGLContext:function(t,e){this.dispose(),this.createWebGLCanvas(t,e),this.aPosition=new Float32Array([0,0,0,1,1,0,1,1]),this.chooseFastestCopyGLTo2DMethod(t,e)},chooseFastestCopyGLTo2DMethod:function(t,e){var i,r=void 0!==window.performance;try{new ImageData(1,1),i=!0}catch(t){i=!1}var n="undefined"!=typeof ArrayBuffer,s="undefined"!=typeof Uint8ClampedArray;if(r&&i&&n&&s){var o=fabric.util.createCanvasElement(),a=new ArrayBuffer(t*e*4);if(fabric.forceGLPutImageData)return this.imageBuffer=a,void(this.copyGLTo2D=m);var h,c,l={imageBuffer:a,destinationWidth:t,destinationHeight:e,targetCanvas:o};o.width=t,o.height=e,h=window.performance.now(),v.call(l,this.gl,l),c=window.performance.now()-h,h=window.performance.now(),m.call(l,this.gl,l),c>window.performance.now()-h?(this.imageBuffer=a,this.copyGLTo2D=m):this.copyGLTo2D=v}},createWebGLCanvas:function(t,e){var i=fabric.util.createCanvasElement();i.width=t,i.height=e;var r={alpha:!0,premultipliedAlpha:!1,depth:!1,stencil:!1,antialias:!1},n=i.getContext("webgl",r);n||(n=i.getContext("experimental-webgl",r)),n&&(n.clearColor(0,0,0,0),this.canvas=i,this.gl=n)},applyFilters:function(t,e,i,r,n,s){var o,a=this.gl;s&&(o=this.getCachedTexture(s,e));var h={originalWidth:e.width||e.originalWidth,originalHeight:e.height||e.originalHeight,sourceWidth:i,sourceHeight:r,destinationWidth:i,destinationHeight:r,context:a,sourceTexture:this.createTexture(a,i,r,!o&&e),targetTexture:this.createTexture(a,i,r),originalTexture:o||this.createTexture(a,i,r,!o&&e),passes:t.length,webgl:!0,aPosition:this.aPosition,programCache:this.programCache,pass:0,filterBackend:this,targetCanvas:n},c=a.createFramebuffer();return a.bindFramebuffer(a.FRAMEBUFFER,c),t.forEach((function(t){t&&t.applyTo(h)})),function(t){var e=t.targetCanvas,i=e.width,r=e.height,n=t.destinationWidth,s=t.destinationHeight;i===n&&r===s||(e.width=n,e.height=s)}(h),this.copyGLTo2D(a,h),a.bindTexture(a.TEXTURE_2D,null),a.deleteTexture(h.sourceTexture),a.deleteTexture(h.targetTexture),a.deleteFramebuffer(c),n.getContext("2d").setTransform(1,0,0,1,0,0),h},dispose:function(){this.canvas&&(this.canvas=null,this.gl=null),this.clearWebGLCaches()},clearWebGLCaches:function(){this.programCache={},this.textureCache={}},createTexture:function(t,e,i,r){var n=t.createTexture();return t.bindTexture(t.TEXTURE_2D,n),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),r?t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,r):t.texImage2D(t.TEXTURE_2D,0,t.RGBA,e,i,0,t.RGBA,t.UNSIGNED_BYTE,null),n},getCachedTexture:function(t,e){if(this.textureCache[t])return this.textureCache[t];var i=this.createTexture(this.gl,e.width,e.height,e);return this.textureCache[t]=i,i},evictCachesForKey:function(t){this.textureCache[t]&&(this.gl.deleteTexture(this.textureCache[t]),delete this.textureCache[t])},copyGLTo2D:v,captureGPUInfo:function(){if(this.gpuInfo)return this.gpuInfo;var t=this.gl,e={renderer:"",vendor:""};if(!t)return e;var i=t.getExtension("WEBGL_debug_renderer_info");if(i){var r=t.getParameter(i.UNMASKED_RENDERER_WEBGL),n=t.getParameter(i.UNMASKED_VENDOR_WEBGL);r&&(e.renderer=r.toLowerCase()),n&&(e.vendor=n.toLowerCase())}return this.gpuInfo=e,e}}}(void 0!==t||window),function(t){var e=function(){};function i(){}fabric.Canvas2dFilterBackend=i,i.prototype={evictCachesForKey:e,dispose:e,clearWebGLCaches:e,resources:{},applyFilters:function(t,e,i,r,n){var s=n.getContext("2d");s.drawImage(e,0,0,i,r);var o={sourceWidth:i,sourceHeight:r,imageData:s.getImageData(0,0,i,r),originalEl:e,originalImageData:s.getImageData(0,0,i,r),canvasEl:n,ctx:s,filterBackend:this};return t.forEach((function(t){t.applyTo(o)})),o.imageData.width===i&&o.imageData.height===r||(n.width=o.imageData.width,n.height=o.imageData.height),s.putImageData(o.imageData,0,0),o}}}(void 0!==t||window),fabric.Image=fabric.Image||{},fabric.Image.filters=fabric.Image.filters||{},fabric.Image.filters.BaseFilter=fabric.util.createClass({type:"BaseFilter",vertexSource:"attribute vec2 aPosition;\nvarying vec2 vTexCoord;\nvoid main() {\nvTexCoord = aPosition;\ngl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n}",fragmentSource:"precision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D uTexture;\nvoid main() {\ngl_FragColor = texture2D(uTexture, vTexCoord);\n}",initialize:function(t){t&&this.setOptions(t)},setOptions:function(t){for(var e in t)this[e]=t[e]},createProgram:function(t,e,i){e=e||this.fragmentSource,i=i||this.vertexSource,"highp"!==fabric.webGlPrecision&&(e=e.replace(/precision highp float/g,"precision "+fabric.webGlPrecision+" float"));var r=t.createShader(t.VERTEX_SHADER);if(t.shaderSource(r,i),t.compileShader(r),!t.getShaderParameter(r,t.COMPILE_STATUS))throw new Error("Vertex shader compile error for "+this.type+": "+t.getShaderInfoLog(r));var n=t.createShader(t.FRAGMENT_SHADER);if(t.shaderSource(n,e),t.compileShader(n),!t.getShaderParameter(n,t.COMPILE_STATUS))throw new Error("Fragment shader compile error for "+this.type+": "+t.getShaderInfoLog(n));var s=t.createProgram();if(t.attachShader(s,r),t.attachShader(s,n),t.linkProgram(s),!t.getProgramParameter(s,t.LINK_STATUS))throw new Error('Shader link error for "${this.type}" '+t.getProgramInfoLog(s));var o=this.getAttributeLocations(t,s),a=this.getUniformLocations(t,s)||{};return a.uStepW=t.getUniformLocation(s,"uStepW"),a.uStepH=t.getUniformLocation(s,"uStepH"),{program:s,attributeLocations:o,uniformLocations:a}},getAttributeLocations:function(t,e){return{aPosition:t.getAttribLocation(e,"aPosition")}},getUniformLocations:function(){return{}},sendAttributeData:function(t,e,i){var r=e.aPosition,n=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,n),t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,0,0),t.bufferData(t.ARRAY_BUFFER,i,t.STATIC_DRAW)},_setupFrameBuffer:function(t){var e,i,r=t.context;t.passes>1?(e=t.destinationWidth,i=t.destinationHeight,t.sourceWidth===e&&t.sourceHeight===i||(r.deleteTexture(t.targetTexture),t.targetTexture=t.filterBackend.createTexture(r,e,i)),r.framebufferTexture2D(r.FRAMEBUFFER,r.COLOR_ATTACHMENT0,r.TEXTURE_2D,t.targetTexture,0)):(r.bindFramebuffer(r.FRAMEBUFFER,null),r.finish())},_swapTextures:function(t){t.passes--,t.pass++;var e=t.targetTexture;t.targetTexture=t.sourceTexture,t.sourceTexture=e},isNeutralState:function(){var t=this.mainParameter,e=fabric.Image.filters[this.type].prototype;if(t){if(Array.isArray(e[t])){for(var i=e[t].length;i--;)if(this[t][i]!==e[t][i])return!1;return!0}return e[t]===this[t]}return!1},applyTo:function(t){t.webgl?(this._setupFrameBuffer(t),this.applyToWebGL(t),this._swapTextures(t)):this.applyTo2d(t)},retrieveShader:function(t){return t.programCache.hasOwnProperty(this.type)||(t.programCache[this.type]=this.createProgram(t.context)),t.programCache[this.type]},applyToWebGL:function(t){var e=t.context,i=this.retrieveShader(t);0===t.pass&&t.originalTexture?e.bindTexture(e.TEXTURE_2D,t.originalTexture):e.bindTexture(e.TEXTURE_2D,t.sourceTexture),e.useProgram(i.program),this.sendAttributeData(e,i.attributeLocations,t.aPosition),e.uniform1f(i.uniformLocations.uStepW,1/t.sourceWidth),e.uniform1f(i.uniformLocations.uStepH,1/t.sourceHeight),this.sendUniformData(e,i.uniformLocations),e.viewport(0,0,t.destinationWidth,t.destinationHeight),e.drawArrays(e.TRIANGLE_STRIP,0,4)},bindAdditionalTexture:function(t,e,i){t.activeTexture(i),t.bindTexture(t.TEXTURE_2D,e),t.activeTexture(t.TEXTURE0)},unbindAdditionalTexture:function(t,e){t.activeTexture(e),t.bindTexture(t.TEXTURE_2D,null),t.activeTexture(t.TEXTURE0)},getMainParameter:function(){return this[this.mainParameter]},setMainParameter:function(t){this[this.mainParameter]=t},sendUniformData:function(){},createHelpLayer:function(t){if(!t.helpLayer){var e=document.createElement("canvas");e.width=t.sourceWidth,e.height=t.sourceHeight,t.helpLayer=e}},toObject:function(){var t={type:this.type},e=this.mainParameter;return e&&(t[e]=this[e]),t},toJSON:function(){return this.toObject()}}),fabric.Image.filters.BaseFilter.fromObject=function(t){return Promise.resolve(new fabric.Image.filters[t.type](t))},function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.ColorMatrix=r(i.BaseFilter,{type:"ColorMatrix",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nuniform mat4 uColorMatrix;\nuniform vec4 uConstants;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\ncolor *= uColorMatrix;\ncolor += uConstants;\ngl_FragColor = color;\n}",matrix:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],mainParameter:"matrix",colorsOnly:!0,initialize:function(t){this.callSuper("initialize",t),this.matrix=this.matrix.slice(0)},applyTo2d:function(t){var e,i,r,n,s,o=t.imageData.data,a=o.length,h=this.matrix,c=this.colorsOnly;for(s=0;s=_||o<0||o>=y||(h=4*(a*y+o),c=v[d*m+f],e+=p[h]*c,i+=p[h+1]*c,r+=p[h+2]*c,w||(n+=p[h+3]*c));C[s]=e,C[s+1]=i,C[s+2]=r,C[s+3]=w?p[s+3]:n}t.imageData=x},getUniformLocations:function(t,e){return{uMatrix:t.getUniformLocation(e,"uMatrix"),uOpaque:t.getUniformLocation(e,"uOpaque"),uHalfSize:t.getUniformLocation(e,"uHalfSize"),uSize:t.getUniformLocation(e,"uSize")}},sendUniformData:function(t,e){t.uniform1fv(e.uMatrix,this.matrix)},toObject:function(){return i(this.callSuper("toObject"),{opaque:this.opaque,matrix:this.matrix})}}),e.Image.filters.Convolute.fromObject=e.Image.filters.BaseFilter.fromObject}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Grayscale=r(i.BaseFilter,{type:"Grayscale",fragmentSource:{average:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat average = (color.r + color.b + color.g) / 3.0;\ngl_FragColor = vec4(average, average, average, color.a);\n}",lightness:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\ngl_FragColor = vec4(average, average, average, col.a);\n}",luminosity:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\ngl_FragColor = vec4(average, average, average, col.a);\n}"},mode:"average",mainParameter:"mode",applyTo2d:function(t){var e,i,r=t.imageData.data,n=r.length,s=this.mode;for(e=0;ec[0]&&n>c[1]&&s>c[2]&&r 0.0) {\n"+this.fragmentSource[t]+"}\n}"},retrieveShader:function(t){var e,i=this.type+"_"+this.mode;return t.programCache.hasOwnProperty(i)||(e=this.buildSource(this.mode),t.programCache[i]=this.createProgram(t.context,e)),t.programCache[i]},applyTo2d:function(t){var i,r,n,s,o,a,h,c=t.imageData.data,l=c.length,u=1-this.alpha;i=(h=new e.Color(this.color).getSource())[0]*this.alpha,r=h[1]*this.alpha,n=h[2]*this.alpha;for(var f=0;f=t||e<=-t)return 0;if(e<1.1920929e-7&&e>-1.1920929e-7)return 1;var i=(e*=Math.PI)/t;return a(e)/e*a(i)/i}},applyTo2d:function(t){var e=t.imageData,i=this.scaleX,r=this.scaleY;this.rcpScaleX=1/i,this.rcpScaleY=1/r;var n,s=e.width,a=e.height,h=o(s*i),c=o(a*r);"sliceHack"===this.resizeType?n=this.sliceByTwo(t,s,a,h,c):"hermite"===this.resizeType?n=this.hermiteFastResize(t,s,a,h,c):"bilinear"===this.resizeType?n=this.bilinearFiltering(t,s,a,h,c):"lanczos"===this.resizeType&&(n=this.lanczosResize(t,s,a,h,c)),t.imageData=n},sliceByTwo:function(t,i,n,s,o){var a,h,c=t.imageData,l=.5,u=!1,f=!1,d=i*l,g=n*l,p=e.filterBackend.resources,v=0,m=0,b=i,y=0;for(p.sliceByTwo||(p.sliceByTwo=document.createElement("canvas")),((a=p.sliceByTwo).width<1.5*i||a.height=e)){M=r(1e3*s(S-x.x)),_[M]||(_[M]={});for(var F=C.y-y;F<=C.y+y;F++)F<0||F>=o||(D=r(1e3*s(F-x.y)),_[M][D]||(_[M][D]=d(n(i(M*v,2)+i(D*m,2))/1e3)),(T=_[M][D])>0&&(P+=T,k+=T*l[O=4*(F*e+S)],j+=T*l[O+1],E+=T*l[O+2],A+=T*l[O+3]))}f[O=4*(w*a+h)]=k/P,f[O+1]=j/P,f[O+2]=E/P,f[O+3]=A/P}return++h1&&D<-1||(y=2*D*D*D-3*D*D+1)>0&&(T+=y*d[(M=4*(A+P*e))+3],x+=y,d[M+3]<255&&(y=y*d[M+3]/250),C+=y*d[M],w+=y*d[M+1],S+=y*d[M+2],_+=y)}p[b]=C/_,p[b+1]=w/_,p[b+2]=S/_,p[b+3]=T/x}return g},toObject:function(){return{type:this.type,scaleX:this.scaleX,scaleY:this.scaleY,resizeType:this.resizeType,lanczosLobes:this.lanczosLobes}}}),e.Image.filters.Resize.fromObject=e.Image.filters.BaseFilter.fromObject}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Contrast=r(i.BaseFilter,{type:"Contrast",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uContrast;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\ncolor.rgb = contrastF * (color.rgb - 0.5) + 0.5;\ngl_FragColor = color;\n}",contrast:0,mainParameter:"contrast",applyTo2d:function(t){if(0!==this.contrast){var e,i=t.imageData.data,r=i.length,n=Math.floor(255*this.contrast),s=259*(n+255)/(255*(259-n));for(e=0;e1&&(e=1/this.aspectRatio):this.aspectRatio<1&&(e=this.aspectRatio),t=e*this.blur*.12,this.horizontal?i[0]=t:i[1]=t,i}}),i.Blur.fromObject=e.Image.filters.BaseFilter.fromObject}(void 0!==t?t:window),function(t){var e=t.fabric||(t.fabric={}),i=e.Image.filters,r=e.util.createClass;i.Gamma=r(i.BaseFilter,{type:"Gamma",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform vec3 uGamma;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nvec3 correction = (1.0 / uGamma);\ncolor.r = pow(color.r, correction.r);\ncolor.g = pow(color.g, correction.g);\ncolor.b = pow(color.b, correction.b);\ngl_FragColor = color;\ngl_FragColor.rgb *= color.a;\n}",gamma:[1,1,1],mainParameter:"gamma",initialize:function(t){this.gamma=[1,1,1],i.BaseFilter.prototype.initialize.call(this,t)},applyTo2d:function(t){var e,i=t.imageData.data,r=this.gamma,n=i.length,s=1/r[0],o=1/r[1],a=1/r[2];for(this.rVals||(this.rVals=new Uint8Array(256),this.gVals=new Uint8Array(256),this.bVals=new Uint8Array(256)),e=0,n=256;e'},_getCacheCanvasDimensions:function(){var t=this.callSuper("_getCacheCanvasDimensions"),e=this.fontSize;return t.width+=e*t.zoomX,t.height+=e*t.zoomY,t},_render:function(t){var e=this.path;e&&!e.isNotVisible()&&e._render(t),this._setTextStyles(t),this._renderTextLinesBackground(t),this._renderTextDecoration(t,"underline"),this._renderText(t),this._renderTextDecoration(t,"overline"),this._renderTextDecoration(t,"linethrough")},_renderText:function(t){"stroke"===this.paintFirst?(this._renderTextStroke(t),this._renderTextFill(t)):(this._renderTextFill(t),this._renderTextStroke(t))},_setTextStyles:function(t,e,i){if(t.textBaseline="alphabetical",this.path)switch(this.pathAlign){case"center":t.textBaseline="middle";break;case"ascender":t.textBaseline="top";break;case"descender":t.textBaseline="bottom"}t.font=this._getFontDeclaration(e,i)},calcTextWidth:function(){for(var t=this.getLineWidth(0),e=1,i=this._textLines.length;et&&(t=r)}return t},_renderTextLine:function(t,e,i,r,n,s){this._renderChars(t,e,i,r,n,s)},_renderTextLinesBackground:function(t){if(this.textBackgroundColor||this.styleHas("textBackgroundColor")){for(var e,i,r,n,s,o,a,h=t.fillStyle,c=this._getLeftOffset(),l=this._getTopOffset(),u=0,f=0,d=this.path,g=0,p=this._textLines.length;g=0:ia?u%=a:u<0&&(u+=a),this._setGraphemeOnPath(u,s,o),u+=s.kernedWidth}return{width:h,numOfSpaces:0}},_setGraphemeOnPath:function(t,i,r){var n=t+i.kernedWidth/2,s=this.path,o=e.util.getPointOnPath(s.path,n,s.segmentsInfo);i.renderLeft=o.x-r.x,i.renderTop=o.y-r.y,i.angle=o.angle+("right"===this.pathSide?Math.PI:0)},_getGraphemeBox:function(t,e,i,r,n){var s,o=this.getCompleteStyleDeclaration(e,i),a=r?this.getCompleteStyleDeclaration(e,i-1):{},h=this._measureChar(t,o,r,a),c=h.kernedWidth,l=h.width;0!==this.charSpacing&&(l+=s=this._getWidthOfCharSpacing(),c+=s);var u={width:l,left:0,height:o.fontSize,kernedWidth:c,deltaY:o.deltaY};if(i>0&&!n){var f=this.__charBounds[e][i-1];u.left=f.left+f.width+h.kernedWidth-h.width}return u},getHeightOfLine:function(t){if(this.__lineHeights[t])return this.__lineHeights[t];for(var e=this._textLines[t],i=this.getHeightOfChar(t,0),r=1,n=e.length;r0){var P=b+s+u;"rtl"===this.direction&&(P=this.width-P-f),c&&m&&(t.fillStyle=m,t.fillRect(P,l+C*r+o,f,this.fontSize/15)),u=d.left,f=d.width,c=g,m=v,r=n,o=a}else f+=d.kernedWidth;P=b+s+u;"rtl"===this.direction&&(P=this.width-P-f),t.fillStyle=v,g&&v&&t.fillRect(P,l+C*r+o,f-x,this.fontSize/15),y+=i}else y+=i;this._removeShadow(t)}},_getFontDeclaration:function(t,i){var r=t||this,n=this.fontFamily,s=e.Text.genericFonts.indexOf(n.toLowerCase())>-1,o=void 0===n||n.indexOf("'")>-1||n.indexOf(",")>-1||n.indexOf('"')>-1||s?r.fontFamily:'"'+r.fontFamily+'"';return[e.isLikelyNode?r.fontWeight:r.fontStyle,e.isLikelyNode?r.fontStyle:r.fontWeight,i?this.CACHE_FONT_SIZE+"px":r.fontSize+"px",o].join(" ")},render:function(t){this.visible&&(this.canvas&&this.canvas.skipOffscreen&&!this.group&&!this.isOnScreen()||(this._shouldClearDimensionCache()&&this.initDimensions(),this.callSuper("render",t)))},graphemeSplit:function(t){return e.util.string.graphemeSplit(t)},_splitTextIntoLines:function(t){for(var e=t.split(this._reNewline),i=new Array(e.length),r=["\n"],n=[],s=0;s0?o:0)},"rtl"===this.direction&&("right"===this.textAlign||"justify"===this.textAlign||"justify-right"===this.textAlign?n.left*=-1:"left"===this.textAlign||"justify-left"===this.textAlign?n.left=e-(o>0?o:0):"center"!==this.textAlign&&"justify-center"!==this.textAlign||(n.left=e-(o>0?o:0))),this.cursorOffsetCache=n,this.cursorOffsetCache},renderCursor:function(t,e){var i=this.get2DCursorLocation(),r=i.lineIndex,n=i.charIndex>0?i.charIndex-1:0,s=this.getValueOfPropertyAt(r,n,"fontSize"),o=this.scaleX*this.canvas.getZoom(),a=this.cursorWidth/o,h=t.topOffset,c=this.getValueOfPropertyAt(r,n,"deltaY");h+=(1-this._fontSizeFraction)*this.getHeightOfLine(r)/this.lineHeight-s*(1-this._fontSizeFraction),this.inCompositionMode&&this.renderSelection(t,e),e.fillStyle=this.cursorColor||this.getValueOfPropertyAt(r,n,"fill"),e.globalAlpha=this.__isMousedown?1:this._currentCursorOpacity,e.fillRect(t.left+t.leftOffset-a/2,h+t.top+c,a,s)},renderSelection:function(t,e){for(var i=this.inCompositionMode?this.hiddenTextarea.selectionStart:this.selectionStart,r=this.inCompositionMode?this.hiddenTextarea.selectionEnd:this.selectionEnd,n=-1!==this.textAlign.indexOf("justify"),s=this.get2DCursorLocation(i),o=this.get2DCursorLocation(r),a=s.lineIndex,h=o.lineIndex,c=s.charIndex<0?0:s.charIndex,l=o.charIndex<0?0:o.charIndex,u=a;u<=h;u++){var f,d=this._getLineLeftOffset(u)||0,g=this.getHeightOfLine(u),p=0,v=0;if(u===a&&(p=this.__charBounds[a][c].left),u>=a&&u1)&&(g/=this.lineHeight);var b=t.left+d+p,y=v-p,_=g,x=0;this.inCompositionMode?(e.fillStyle=this.compositionColor||"black",_=1,x=g):e.fillStyle=this.selectionColor,"rtl"===this.direction&&("right"===this.textAlign||"justify"===this.textAlign||"justify-right"===this.textAlign?b=this.width-b-y:"left"===this.textAlign||"justify-left"===this.textAlign?b=t.left+d-v:"center"!==this.textAlign&&"justify-center"!==this.textAlign||(b=t.left+d-v)),e.fillRect(b,t.top+t.topOffset+x,y,_),t.topOffset+=f}},getCurrentCharFontSize:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fontSize")},getCurrentCharColor:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fill")},_getCurrentCharIndex:function(){var t=this.get2DCursorLocation(this.selectionStart,!0),e=t.charIndex>0?t.charIndex-1:0;return{l:t.lineIndex,c:e}}}),fabric.IText.fromObject=function(t){return fabric.Object._fromObject(fabric.IText,t,"text")},function(t){var e=e.global;e.util.object.extend(e.IText.prototype,{initBehavior:function(){this.initAddedHandler(),this.initRemovedHandler(),this.initCursorSelectionHandlers(),this.initDoubleClickSimulation(),this.mouseMoveHandler=this.mouseMoveHandler.bind(this)},onDeselect:function(){this.isEditing&&this.exitEditing(),this.selected=!1},initAddedHandler:function(){var t=this;this.on("added",(function(e){var i=e.target;i&&(i._hasITextHandlers||(i._hasITextHandlers=!0,t._initCanvasHandlers(i)),i._iTextInstances=i._iTextInstances||[],i._iTextInstances.push(t))}))},initRemovedHandler:function(){var t=this;this.on("removed",(function(i){var r=i.target;r&&(r._iTextInstances=r._iTextInstances||[],e.util.removeFromArray(r._iTextInstances,t),0===r._iTextInstances.length&&(r._hasITextHandlers=!1,t._removeCanvasHandlers(r)))}))},_initCanvasHandlers:function(t){t._mouseUpITextHandler=function(){t._iTextInstances&&t._iTextInstances.forEach((function(t){t.__isMousedown=!1}))},t.on("mouse:up",t._mouseUpITextHandler)},_removeCanvasHandlers:function(t){t.off("mouse:up",t._mouseUpITextHandler)},_tick:function(){this._currentTickState=this._animateCursor(this,1,this.cursorDuration,"_onTickComplete")},_animateCursor:function(t,e,i,r){var n;return n={isAborted:!1,abort:function(){this.isAborted=!0}},t.animate("_currentCursorOpacity",e,{duration:i,onComplete:function(){n.isAborted||t[r]()},onChange:function(){t.canvas&&t.selectionStart===t.selectionEnd&&t.renderCursorOrSelection()},abort:function(){return n.isAborted}}),n},_onTickComplete:function(){var t=this;this._cursorTimeout1&&clearTimeout(this._cursorTimeout1),this._cursorTimeout1=setTimeout((function(){t._currentTickCompleteState=t._animateCursor(t,0,this.cursorDuration/2,"_tick")}),100)},initDelayedCursor:function(t){var e=this,i=t?0:this.cursorDelay;this.abortCursorAnimation(),this._currentCursorOpacity=1,i?this._cursorTimeout2=setTimeout((function(){e._tick()}),i):this._tick()},abortCursorAnimation:function(){var t=this._currentTickState||this._currentTickCompleteState,e=this.canvas;this._currentTickState&&this._currentTickState.abort(),this._currentTickCompleteState&&this._currentTickCompleteState.abort(),clearTimeout(this._cursorTimeout1),clearTimeout(this._cursorTimeout2),this._currentCursorOpacity=0,t&&e&&e.clearContext(e.contextTop||e.contextContainer)},selectAll:function(){return this.selectionStart=0,this.selectionEnd=this._text.length,this._fireSelectionChanged(),this._updateTextarea(),this},getSelectedText:function(){return this._text.slice(this.selectionStart,this.selectionEnd).join("")},findWordBoundaryLeft:function(t){var e=0,i=t-1;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i--;for(;/\S/.test(this._text[i])&&i>-1;)e++,i--;return t-e},findWordBoundaryRight:function(t){var e=0,i=t;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i++;for(;/\S/.test(this._text[i])&&i-1;)e++,i--;return t-e},findLineBoundaryRight:function(t){for(var e=0,i=t;!/\n/.test(this._text[i])&&i0&&nthis.__selectionStartOnMouseDown?(this.selectionStart=this.__selectionStartOnMouseDown,this.selectionEnd=e):(this.selectionStart=e,this.selectionEnd=this.__selectionStartOnMouseDown),this.selectionStart===i&&this.selectionEnd===r||(this.restartCursorIfNeeded(),this._fireSelectionChanged(),this._updateTextarea(),this.renderCursorOrSelection()))}},_setEditingProps:function(){this.hoverCursor="text",this.canvas&&(this.canvas.defaultCursor=this.canvas.moveCursor="text"),this.borderColor=this.editingBorderColor,this.hasControls=this.selectable=!1,this.lockMovementX=this.lockMovementY=!0},fromStringToGraphemeSelection:function(t,e,i){var r=i.slice(0,t),n=this.graphemeSplit(r).length;if(t===e)return{selectionStart:n,selectionEnd:n};var s=i.slice(t,e);return{selectionStart:n,selectionEnd:n+this.graphemeSplit(s).length}},fromGraphemeToStringSelection:function(t,e,i){var r=i.slice(0,t).join("").length;return t===e?{selectionStart:r,selectionEnd:r}:{selectionStart:r,selectionEnd:r+i.slice(t,e).join("").length}},_updateTextarea:function(){if(this.cursorOffsetCache={},this.hiddenTextarea){if(!this.inCompositionMode){var t=this.fromGraphemeToStringSelection(this.selectionStart,this.selectionEnd,this._text);this.hiddenTextarea.selectionStart=t.selectionStart,this.hiddenTextarea.selectionEnd=t.selectionEnd}this.updateTextareaPosition()}},updateFromTextArea:function(){if(this.hiddenTextarea){this.cursorOffsetCache={},this.text=this.hiddenTextarea.value,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords());var t=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value);this.selectionEnd=this.selectionStart=t.selectionEnd,this.inCompositionMode||(this.selectionStart=t.selectionStart),this.updateTextareaPosition()}},updateTextareaPosition:function(){if(this.selectionStart===this.selectionEnd){var t=this._calcTextareaPosition();this.hiddenTextarea.style.left=t.left,this.hiddenTextarea.style.top=t.top}},_calcTextareaPosition:function(){if(!this.canvas)return{x:1,y:1};var t=this.inCompositionMode?this.compositionStart:this.selectionStart,i=this._getCursorBoundaries(t),r=this.get2DCursorLocation(t),n=r.lineIndex,s=r.charIndex,o=this.getValueOfPropertyAt(n,s,"fontSize")*this.lineHeight,a=i.leftOffset,h=this.calcTransformMatrix(),c={x:i.left+a,y:i.top+i.topOffset+o},l=this.canvas.getRetinaScaling(),u=this.canvas.upperCanvasEl,f=u.width/l,d=u.height/l,g=f-o,p=d-o,v=u.clientWidth/f,m=u.clientHeight/d;return c=e.util.transformPoint(c,h),(c=e.util.transformPoint(c,this.canvas.viewportTransform)).x*=v,c.y*=m,c.x<0&&(c.x=0),c.x>g&&(c.x=g),c.y<0&&(c.y=0),c.y>p&&(c.y=p),c.x+=this.canvas._offset.left,c.y+=this.canvas._offset.top,{left:c.x+"px",top:c.y+"px",fontSize:o+"px",charHeight:o}},_saveEditingProps:function(){this._savedProps={hasControls:this.hasControls,borderColor:this.borderColor,lockMovementX:this.lockMovementX,lockMovementY:this.lockMovementY,hoverCursor:this.hoverCursor,selectable:this.selectable,defaultCursor:this.canvas&&this.canvas.defaultCursor,moveCursor:this.canvas&&this.canvas.moveCursor}},_restoreEditingProps:function(){this._savedProps&&(this.hoverCursor=this._savedProps.hoverCursor,this.hasControls=this._savedProps.hasControls,this.borderColor=this._savedProps.borderColor,this.selectable=this._savedProps.selectable,this.lockMovementX=this._savedProps.lockMovementX,this.lockMovementY=this._savedProps.lockMovementY,this.canvas&&(this.canvas.defaultCursor=this._savedProps.defaultCursor,this.canvas.moveCursor=this._savedProps.moveCursor),delete this._savedProps)},exitEditing:function(){var t=this._textBeforeEdit!==this.text,e=this.hiddenTextarea;return this.selected=!1,this.isEditing=!1,this.selectionEnd=this.selectionStart,e&&(e.blur&&e.blur(),e.parentNode&&e.parentNode.removeChild(e)),this.hiddenTextarea=null,this.abortCursorAnimation(),this._restoreEditingProps(),this._currentCursorOpacity=0,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this.fire("editing:exited"),t&&this.fire("modified"),this.canvas&&(this.canvas.off("mouse:move",this.mouseMoveHandler),this.canvas.fire("text:editing:exited",{target:this}),t&&this.canvas.fire("object:modified",{target:this})),this},_removeExtraneousStyles:function(){for(var t in this.styles)this._textLines[t]||delete this.styles[t]},removeStyleFromTo:function(t,e){var i,r,n=this.get2DCursorLocation(t,!0),s=this.get2DCursorLocation(e,!0),o=n.lineIndex,a=n.charIndex,h=s.lineIndex,c=s.charIndex;if(o!==h){if(this.styles[o])for(i=a;i=c&&(r[l-f]=r[u],delete r[u])}},shiftLineStyles:function(t,e){var i=Object.assign({},this.styles);for(var r in this.styles){var n=parseInt(r,10);n>t&&(this.styles[n+e]=i[n],i[n-e]||delete this.styles[n])}},restartCursorIfNeeded:function(){this._currentTickState&&!this._currentTickState.isAborted&&this._currentTickCompleteState&&!this._currentTickCompleteState.isAborted||this.initDelayedCursor()},insertNewlineStyleObject:function(t,e,i,r){var n,s={},o=!1,a=this._unwrappedTextLines[t].length===e;for(var h in i||(i=1),this.shiftLineStyles(t,i),this.styles[t]&&(n=this.styles[t][0===e?e:e-1]),this.styles[t]){var c=parseInt(h,10);c>=e&&(o=!0,s[c-e]=this.styles[t][h],a&&0===e||delete this.styles[t][h])}var l=!1;for(o&&!a&&(this.styles[t+i]=s,l=!0),l&&i--;i>0;)r&&r[i-1]?this.styles[t+i]={0:Object.assign({},r[i-1])}:n?this.styles[t+i]={0:Object.assign({},n)}:delete this.styles[t+i],i--;this._forceClearCache=!0},insertCharStyleObject:function(t,e,i,r){this.styles||(this.styles={});var n=this.styles[t],s=n?Object.assign({},n):{};for(var o in i||(i=1),s){var a=parseInt(o,10);a>=e&&(n[a+i]=s[a],s[a-i]||delete n[a])}if(this._forceClearCache=!0,r)for(;i--;)Object.keys(r[i]).length&&(this.styles[t]||(this.styles[t]={}),this.styles[t][e+i]=Object.assign({},r[i]));else if(n)for(var h=n[e?e-1:1];h&&i--;)this.styles[t][e+i]=Object.assign({},h)},insertNewStyleBlock:function(t,e,i){for(var r=this.get2DCursorLocation(e,!0),n=[0],s=0,o=0;o0&&(this.insertCharStyleObject(r.lineIndex,r.charIndex,n[0],i),i=i&&i.slice(n[0]+1)),s&&this.insertNewlineStyleObject(r.lineIndex,r.charIndex+n[0],s);for(o=1;o0?this.insertCharStyleObject(r.lineIndex+o,0,n[o],i):i&&this.styles[r.lineIndex+o]&&i[0]&&(this.styles[r.lineIndex+o][0]=i[0]),i=i&&i.slice(n[o]+1);n[o]>0&&this.insertCharStyleObject(r.lineIndex+o,0,n[o],i)},setSelectionStartEndWithShift:function(t,e,i){i<=t?(e===t?this._selectionDirection="left":"right"===this._selectionDirection&&(this._selectionDirection="left",this.selectionEnd=t),this.selectionStart=i):i>t&&it?this.selectionStart=t:this.selectionStart<0&&(this.selectionStart=0),this.selectionEnd>t?this.selectionEnd=t:this.selectionEnd<0&&(this.selectionEnd=0)}})}(void 0!==t||window),fabric.util.object.extend(fabric.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+new Date,this.__lastLastClickTime=+new Date,this.__lastPointer={},this.on("mousedown",this.onMouseDown)},onMouseDown:function(t){if(this.canvas){this.__newClickTime=+new Date;var e=t.pointer;this.isTripleClick(e)&&(this.fire("tripleclick",t),this._stopEvent(t.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=e,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected}},isTripleClick:function(t){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===t.x&&this.__lastPointer.y===t.y},_stopEvent:function(t){t.preventDefault&&t.preventDefault(),t.stopPropagation&&t.stopPropagation()},initCursorSelectionHandlers:function(){this.initMousedownHandler(),this.initMouseupHandler(),this.initClicks()},doubleClickHandler:function(t){this.isEditing&&this.selectWord(this.getSelectionStartFromPointer(t.e))},tripleClickHandler:function(t){this.isEditing&&this.selectLine(this.getSelectionStartFromPointer(t.e))},initClicks:function(){this.on("mousedblclick",this.doubleClickHandler),this.on("tripleclick",this.tripleClickHandler)},_mouseDownHandler:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.__isMousedown=!0,this.selected&&(this.inCompositionMode=!1,this.setCursorByClick(t.e)),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.selectionStart===this.selectionEnd&&this.abortCursorAnimation(),this.renderCursorOrSelection()))},_mouseDownHandlerBefore:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.selected=this===this.canvas._activeObject)},initMousedownHandler:function(){this.on("mousedown",this._mouseDownHandler),this.on("mousedown:before",this._mouseDownHandlerBefore)},initMouseupHandler:function(){this.on("mouseup",this.mouseUpHandler)},mouseUpHandler:function(t){if(this.__isMousedown=!1,!(!this.editable||this.group&&!this.group.interactive||t.transform&&t.transform.actionPerformed||t.e.button&&1!==t.e.button)){if(this.canvas){var e=this.canvas._activeObject;if(e&&e!==this)return}this.__lastSelected&&!this.__corner?(this.selected=!1,this.__lastSelected=!1,this.enterEditing(t.e),this.selectionStart===this.selectionEnd?this.initDelayedCursor(!0):this.renderCursorOrSelection()):this.selected=!0}},setCursorByClick:function(t){var e=this.getSelectionStartFromPointer(t),i=this.selectionStart,r=this.selectionEnd;t.shiftKey?this.setSelectionStartEndWithShift(i,r,e):(this.selectionStart=e,this.selectionEnd=e),this.isEditing&&(this._fireSelectionChanged(),this._updateTextarea())},getSelectionStartFromPointer:function(t){for(var e,i=this.getLocalPointer(t),r=0,n=0,s=0,o=0,a=0,h=0,c=this._textLines.length;h0&&(o+=this._textLines[h-1].length+this.missingNewlineOffset(h-1));n=Math.abs(this._getLineLeftOffset(a))*this.scaleX,e=this._textLines[a],"rtl"===this.direction&&(i.x=this.width*this.scaleX-i.x);for(var l=0,u=e.length;ls||o<0?0:1);return this.flipX&&(a=n-a),a>this._text.length&&(a=this._text.length),a}}),fabric.util.object.extend(fabric.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=fabric.document.createElement("textarea"),this.hiddenTextarea.setAttribute("autocapitalize","off"),this.hiddenTextarea.setAttribute("autocorrect","off"),this.hiddenTextarea.setAttribute("autocomplete","off"),this.hiddenTextarea.setAttribute("spellcheck","false"),this.hiddenTextarea.setAttribute("data-fabric-hiddentextarea",""),this.hiddenTextarea.setAttribute("wrap","off");var t=this._calcTextareaPosition();this.hiddenTextarea.style.cssText="position: absolute; top: "+t.top+"; left: "+t.left+"; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; padding-top: "+t.fontSize+";",this.hiddenTextareaContainer?this.hiddenTextareaContainer.appendChild(this.hiddenTextarea):fabric.document.body.appendChild(this.hiddenTextarea),fabric.util.addListener(this.hiddenTextarea,"blur",this.blur.bind(this)),fabric.util.addListener(this.hiddenTextarea,"keydown",this.onKeyDown.bind(this)),fabric.util.addListener(this.hiddenTextarea,"keyup",this.onKeyUp.bind(this)),fabric.util.addListener(this.hiddenTextarea,"input",this.onInput.bind(this)),fabric.util.addListener(this.hiddenTextarea,"copy",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"cut",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"paste",this.paste.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionstart",this.onCompositionStart.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionupdate",this.onCompositionUpdate.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionend",this.onCompositionEnd.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(fabric.util.addListener(this.canvas.upperCanvasEl,"click",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},keysMap:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorRight",36:"moveCursorLeft",37:"moveCursorLeft",38:"moveCursorUp",39:"moveCursorRight",40:"moveCursorDown"},keysMapRtl:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorLeft",36:"moveCursorRight",37:"moveCursorRight",38:"moveCursorUp",39:"moveCursorLeft",40:"moveCursorDown"},ctrlKeysMapUp:{67:"copy",88:"cut"},ctrlKeysMapDown:{65:"selectAll"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},blur:function(){this.abortCursorAnimation()},onKeyDown:function(t){if(this.isEditing){var e="rtl"===this.direction?this.keysMapRtl:this.keysMap;if(t.keyCode in e)this[e[t.keyCode]](t);else{if(!(t.keyCode in this.ctrlKeysMapDown)||!t.ctrlKey&&!t.metaKey)return;this[this.ctrlKeysMapDown[t.keyCode]](t)}t.stopImmediatePropagation(),t.preventDefault(),t.keyCode>=33&&t.keyCode<=40?(this.inCompositionMode=!1,this.clearContextTop(),this.renderCursorOrSelection()):this.canvas&&this.canvas.requestRenderAll()}},onKeyUp:function(t){!this.isEditing||this._copyDone||this.inCompositionMode?this._copyDone=!1:t.keyCode in this.ctrlKeysMapUp&&(t.ctrlKey||t.metaKey)&&(this[this.ctrlKeysMapUp[t.keyCode]](t),t.stopImmediatePropagation(),t.preventDefault(),this.canvas&&this.canvas.requestRenderAll())},onInput:function(t){var e=this.fromPaste;if(this.fromPaste=!1,t&&t.stopPropagation(),this.isEditing){var i,r,n,s,o,a=this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText,h=this._text.length,c=a.length,l=c-h,u=this.selectionStart,f=this.selectionEnd,d=u!==f;if(""===this.hiddenTextarea.value)return this.styles={},this.updateFromTextArea(),this.fire("changed"),void(this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll()));var g=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value),p=u>g.selectionStart;d?(i=this._text.slice(u,f),l+=f-u):c0&&(r+=(i=this.__charBounds[t][e-1]).left+i.width),r},getDownCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),r=this.get2DCursorLocation(i),n=r.lineIndex;if(n===this._textLines.length-1||t.metaKey||34===t.keyCode)return this._text.length-i;var s=r.charIndex,o=this._getWidthBeforeCursor(n,s),a=this._getIndexOnLine(n+1,o);return this._textLines[n].slice(s).length+a+1+this.missingNewlineOffset(n)},_getSelectionForOffset:function(t,e){return t.shiftKey&&this.selectionStart!==this.selectionEnd&&e?this.selectionEnd:this.selectionStart},getUpCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),r=this.get2DCursorLocation(i),n=r.lineIndex;if(0===n||t.metaKey||33===t.keyCode)return-i;var s=r.charIndex,o=this._getWidthBeforeCursor(n,s),a=this._getIndexOnLine(n-1,o),h=this._textLines[n].slice(0,s),c=this.missingNewlineOffset(n-1);return-this._textLines[n-1].length+a-h.length+(1-c)},_getIndexOnLine:function(t,e){for(var i,r,n=this._textLines[t],s=this._getLineLeftOffset(t),o=0,a=0,h=n.length;ae){r=!0;var c=s-i,l=s,u=Math.abs(c-e);o=Math.abs(l-e)=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorUpOrDown("Down",t)},moveCursorUp:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorUpOrDown("Up",t)},_moveCursorUpOrDown:function(t,e){var i=this["get"+t+"CursorOffset"](e,"right"===this._selectionDirection);e.shiftKey?this.moveCursorWithShift(i):this.moveCursorWithoutShift(i),0!==i&&(this.setSelectionInBoundaries(),this.abortCursorAnimation(),this._currentCursorOpacity=1,this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorWithShift:function(t){var e="left"===this._selectionDirection?this.selectionStart+t:this.selectionEnd+t;return this.setSelectionStartEndWithShift(this.selectionStart,this.selectionEnd,e),0!==t},moveCursorWithoutShift:function(t){return t<0?(this.selectionStart+=t,this.selectionEnd=this.selectionStart):(this.selectionEnd+=t,this.selectionStart=this.selectionEnd),0!==t},moveCursorLeft:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorLeftOrRight("Left",t)},_move:function(t,e,i){var r;if(t.altKey)r=this["findWordBoundary"+i](this[e]);else{if(!t.metaKey&&35!==t.keyCode&&36!==t.keyCode)return this[e]+="Left"===i?-1:1,!0;r=this["findLineBoundary"+i](this[e])}if(void 0!==typeof r&&this[e]!==r)return this[e]=r,!0},_moveLeft:function(t,e){return this._move(t,e,"Left")},_moveRight:function(t,e){return this._move(t,e,"Right")},moveCursorLeftWithoutShift:function(t){var e=!0;return this._selectionDirection="left",this.selectionEnd===this.selectionStart&&0!==this.selectionStart&&(e=this._moveLeft(t,"selectionStart")),this.selectionEnd=this.selectionStart,e},moveCursorLeftWithShift:function(t){return"right"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveLeft(t,"selectionEnd"):0!==this.selectionStart?(this._selectionDirection="left",this._moveLeft(t,"selectionStart")):void 0},moveCursorRight:function(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorLeftOrRight("Right",t)},_moveCursorLeftOrRight:function(t,e){var i="moveCursor"+t+"With";this._currentCursorOpacity=1,e.shiftKey?i+="Shift":i+="outShift",this[i](e)&&(this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorRightWithShift:function(t){return"left"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveRight(t,"selectionStart"):this.selectionEnd!==this._text.length?(this._selectionDirection="right",this._moveRight(t,"selectionEnd")):void 0},moveCursorRightWithoutShift:function(t){var e=!0;return this._selectionDirection="right",this.selectionStart===this.selectionEnd?(e=this._moveRight(t,"selectionStart"),this.selectionEnd=this.selectionStart):this.selectionStart=this.selectionEnd,e},removeChars:function(t,e){void 0===e&&(e=t+1),this.removeStyleFromTo(t,e),this._text.splice(t,e-t),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()},insertChars:function(t,e,i,r){void 0===r&&(r=i),r>i&&this.removeStyleFromTo(i,r);var n=this.graphemeSplit(t);this.insertNewStyleBlock(n,i,e),this._text=[].concat(this._text.slice(0,i),n,this._text.slice(r)),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()}}),function(t){var e=fabric.util.toFixed,i=/ +/g;fabric.util.object.extend(fabric.Text.prototype,{_toSVG:function(){var t=this._getSVGLeftTopOffsets(),e=this._getSVGTextAndBg(t.textTop,t.textLeft);return this._wrapSVGTextAndBg(e)},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,noStyle:!0,withShadow:!0})},_getSVGLeftTopOffsets:function(){return{textLeft:-this.width/2,textTop:-this.height/2,lineTop:this.getHeightOfLine(0)}},_wrapSVGTextAndBg:function(t){var e=this.getSvgTextDecoration(this);return[t.textBgRects.join(""),'\t\t",t.textSpans.join(""),"\n"]},_getSVGTextAndBg:function(t,e){var i,r=[],n=[],s=t;this._setSVGBg(n);for(var o=0,a=this._textLines.length;o",fabric.util.string.escapeXml(t),""].join("")},_setSVGTextLineText:function(t,e,i,r){var n,s,o,a,h,c=this.getHeightOfLine(e),l=-1!==this.textAlign.indexOf("justify"),u="",f=0,d=this._textLines[e];r+=c*(1-this._fontSizeFraction)/this.lineHeight;for(var g=0,p=d.length-1;g<=p;g++)h=g===p||this.charSpacing,u+=d[g],o=this.__charBounds[e][g],0===f?(i+=o.kernedWidth-o.width,f+=o.width):f+=o.kernedWidth,l&&!h&&this._reSpaceAndTab.test(d[g])&&(h=!0),h||(n=n||this.getCompleteStyleDeclaration(e,g),s=this.getCompleteStyleDeclaration(e,g+1),h=this._hasStyleChangedForSvg(n,s)),h&&(a=this._getStyleDeclaration(e,g)||{},t.push(this._createTextCharSpan(u,a,i,r)),u="",n=s,"rtl"===this.direction?i-=f:i+=f,f=0)},_pushTextBgRect:function(t,i,r,n,s,o){var a=fabric.Object.NUM_FRACTION_DIGITS;t.push("\t\t\n')},_setSVGTextLineBg:function(t,e,i,r){for(var n,s,o=this._textLines[e],a=this.getHeightOfLine(e)/this.lineHeight,h=0,c=0,l=this.getValueOfPropertyAt(e,0,"textBackgroundColor"),u=0,f=o.length;uthis.width&&this._set("width",this.dynamicMinWidth),-1!==this.textAlign.indexOf("justify")&&this.enlargeSpaces(),this.height=this.calcTextHeight(),this.saveState({propertySet:"_dimensionAffectingProps"}))},_generateStyleMap:function(t){for(var e=0,i=0,r=0,n={},s=0;s0?(i=0,r++,e++):!this.splitByGrapheme&&this._reSpaceAndTab.test(t.graphemeText[r])&&s>0&&(i++,r++),n[s]={line:e,offset:i},r+=t.graphemeLines[s].length,i+=t.graphemeLines[s].length;return n},styleHas:function(t,i){if(this._styleMap&&!this.isWrapping){var r=this._styleMap[i];r&&(i=r.line)}return e.Text.prototype.styleHas.call(this,t,i)},isEmptyStyles:function(t){if(!this.styles)return!0;var e,i,r=0,n=!1,s=this._styleMap[t],o=this._styleMap[t+1];for(var a in s&&(t=s.line,r=s.offset),o&&(n=o.line===t,e=o.offset),i=void 0===t?this.styles:{line:this.styles[t]})for(var h in i[a])if(h>=r&&(!n||hb&&!p?(o.push(a),a=[],n=f,p=!0):n+=v,p||s||a.push(u),a=a.concat(c),d=s?0:this._measureWord([u],e,l),l++,p=!1;return y&&o.push(a),g+r>this.dynamicMinWidth&&(this.dynamicMinWidth=g-v+r),o},isEndOfWrapping:function(t){return!this._styleMap[t+1]||this._styleMap[t+1].line!==this._styleMap[t].line},missingNewlineOffset:function(t){return this.splitByGrapheme?this.isEndOfWrapping(t)?1:0:1},_splitTextIntoLines:function(t){for(var i=e.Text.prototype._splitTextIntoLines.call(this,t),r=this._wrapText(i.lines,this.width),n=new Array(r.length),s=0;s',this.eraser.toSVG(t),"","\n"].join("")):""},_createBaseClipPathSVGMarkup:function(t,e){return[this._createEraserSVGMarkup(e&&e.reviver),n.call(this,t,e)].join("")},_createBaseSVGMarkup:function(t,e){return[this._createEraserSVGMarkup(e&&e.reviver),s.call(this,t,e)].join("")}}),fabric.util.object.extend(fabric.Group.prototype,{_addEraserPathToObjects:function(t){return Promise.all(this._objects.map((function(e){return fabric.EraserBrush.prototype._addPathToObjectEraser.call(fabric.EraserBrush.prototype,e,t)})))},applyEraserToObjects:function(){var t=this,e=this.eraser;return Promise.resolve().then((function(){if(e){delete t.eraser;var i=t.calcTransformMatrix();return e.clone().then((function(e){var r=t.clipPath;return Promise.all(e.getObjects("path").map((function(e){var n=fabric.util.multiplyTransformMatrices(i,e.calcTransformMatrix());return fabric.util.applyTransformToObject(e,n),r?r.clone().then((function(r){var n=fabric.EraserBrush.prototype.applyClipPathToPath.call(fabric.EraserBrush.prototype,e,r,i);return t._addEraserPathToObjects(n)}),["absolutePositioned","inverted"]):t._addEraserPathToObjects(e)})))}))}}))}}),fabric.Eraser=fabric.util.createClass(fabric.Group,{type:"eraser",originX:"center",originY:"center",layout:"fixed",drawObject:function(t){t.save(),t.fillStyle="black",t.fillRect(-this.width/2,-this.height/2,this.width,this.height),t.restore(),this.callSuper("drawObject",t)},_toSVG:function(t){var e=["\n"],i=["\n'].join("");e.push("\t\t",i);for(var r=0,n=this._objects.length;r\n"),e}}),fabric.Eraser.fromObject=function(t){var e=t.objects||[],i=fabric.util.object.clone(t,!0);return delete i.objects,Promise.all([fabric.util.enlivenObjects(e),fabric.util.enlivenObjectEnlivables(i)]).then((function(t){return new fabric.Eraser(t[0],Object.assign(i,t[1]),!0)}))};var o=fabric.Canvas.prototype._renderOverlay;fabric.util.object.extend(fabric.Canvas.prototype,{isErasing:function(){return this.isDrawingMode&&this.freeDrawingBrush&&"eraser"===this.freeDrawingBrush.type&&this.freeDrawingBrush._isErasing},_renderOverlay:function(t){o.call(this,t),this.isErasing()&&this.freeDrawingBrush._render()}}),fabric.EraserBrush=fabric.util.createClass(fabric.PencilBrush,{type:"eraser",inverted:!1,erasingWidthAliasing:4,_isErasing:!1,_isErasable:function(t){return!1!==t.erasable},_prepareCollectionTraversal:function(t,e,i,r){e.forEach((function(e){var n=!1;if(e.forEachObject&&"deep"===e.erasable)this._prepareCollectionTraversal(e,e._objects,i,r);else if(!this.inverted&&e.erasable&&e.visible)e.visible=!1,r.visibility.push(e),n=!0;else if(this.inverted&&e.erasable&&e.eraser&&e.visible){var s=e.eraser;e.eraser=void 0,e.dirty=!0,r.eraser.push([e,s]),n=!0}n&&t instanceof fabric.Object&&(t.dirty=!0,r.collection.push(t))}),this)},preparePattern:function(t){this._patternCanvas||(this._patternCanvas=fabric.util.createCanvasElement());var e=this._patternCanvas;t=t||this.canvas._objectsToRender||this.canvas._objects,e.width=this.canvas.width,e.height=this.canvas.height;var i=e.getContext("2d");if(this.canvas._isRetinaScaling()){var r=this.canvas.getRetinaScaling();this.canvas.__initRetinaScaling(r,e,i)}var n=this.canvas.backgroundImage,s=n&&this._isErasable(n),a=this.canvas.overlayImage,h=a&&this._isErasable(a);if(!this.inverted&&(n&&!s||this.canvas.backgroundColor))s&&(this.canvas.backgroundImage=void 0),this.canvas._renderBackground(i),s&&(this.canvas.backgroundImage=n);else if(this.inverted){(l=n&&n.eraser)&&(n.eraser=void 0,n.dirty=!0),this.canvas._renderBackground(i),l&&(n.eraser=l,n.dirty=!0)}i.save(),i.transform.apply(i,this.canvas.viewportTransform);var c={visibility:[],eraser:[],collection:[]};if(this._prepareCollectionTraversal(this.canvas,t,i,c),this.canvas._renderObjects(i,t),c.visibility.forEach((function(t){t.visible=!0})),c.eraser.forEach((function(t){var e=t[0],i=t[1];e.eraser=i,e.dirty=!0})),c.collection.forEach((function(t){t.dirty=!0})),i.restore(),!this.inverted&&(a&&!h||this.canvas.overlayColor))h&&(this.canvas.overlayImage=void 0),o.call(this.canvas,i),h&&(this.canvas.overlayImage=a);else if(this.inverted){var l;(l=a&&a.eraser)&&(a.eraser=void 0,a.dirty=!0),o.call(this.canvas,i),l&&(a.eraser=l,a.dirty=!0)}},_setBrushStyles:function(t){this.callSuper("_setBrushStyles",t),t.strokeStyle="black"},_saveAndTransform:function(t){this.callSuper("_saveAndTransform",t),this._setBrushStyles(t),t.globalCompositeOperation=t===this.canvas.getContext()?"destination-out":"destination-in"},needsFullRender:function(){return!0},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this._prepareForDrawing(t),this._captureDrawingPath(t),this.preparePattern(),this._isErasing=!0,this.canvas.fire("erasing:start"),this._render())},_render:function(){var t,e=this.width,i=1/this.canvas.getRetinaScaling();t=this.canvas.getContext(),e-this.erasingWidthAliasing>0&&(this.width=e-this.erasingWidthAliasing,this.callSuper("_render",t),this.width=e),t=this.canvas.contextTop,this.canvas.clearContext(t),t.save(),t.scale(i,i),t.drawImage(this._patternCanvas,0,0),t.restore(),this.callSuper("_render",t)},createPath:function(t){var e=this.callSuper("createPath",t);return e.globalCompositeOperation=this.inverted?"source-over":"destination-out",e.stroke=this.inverted?"white":"black",e},applyClipPathToPath:function(t,e,i){var r=fabric.util.invertTransform(t.calcTransformMatrix()),n=e.calcTransformMatrix(),s=e.absolutePositioned?r:fabric.util.multiplyTransformMatrices(r,i);return e.absolutePositioned=!1,fabric.util.applyTransformToObject(e,fabric.util.multiplyTransformMatrices(s,n)),t.clipPath=t.clipPath?fabric.util.mergeClipPaths(e,t.clipPath):e,t},clonePathWithClipPath:function(t,e){var i=e.calcTransformMatrix(),r=e.clipPath,n=this;return Promise.all([t.clone(),r.clone(["absolutePositioned","inverted"])]).then((function(t){return n.applyClipPathToPath(t[0],t[1],i)}))},_addPathToObjectEraser:function(t,e,i){var r=this;if(t.forEachObject&&"deep"===t.erasable){var n=t._objects.filter((function(t){return t.erasable}));return n.length>0&&t.clipPath?this.clonePathWithClipPath(e,t).then((function(t){return Promise.all(n.map((function(e){return r._addPathToObjectEraser(e,t,i)})))})):n.length>0?Promise.all(n.map((function(t){return r._addPathToObjectEraser(t,e,i)}))):void 0}var s=t.eraser;return s||(s=new fabric.Eraser,t.eraser=s),e.clone().then((function(e){var r=fabric.util.multiplyTransformMatrices(fabric.util.invertTransform(t.calcTransformMatrix()),e.calcTransformMatrix());return fabric.util.applyTransformToObject(e,r),s.add(e),t.set("dirty",!0),t.fire("erasing:end",{path:e}),i&&(t.group?i.subTargets:i.targets).push(t),e}))},applyEraserToCanvas:function(t,e){var i=this.canvas;return Promise.all(["backgroundImage","overlayImage"].map((function(r){var n=i[r];return n&&n.erasable&&this._addPathToObjectEraser(n,t).then((function(t){return e&&(e.drawables[r]=n),t}))}),this))},_finalizeAndAddPath:function(){var t=this.canvas.contextTop,e=this.canvas;t.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate)),e.clearContext(e.contextTop),this._isErasing=!1;var i=this._points&&this._points.length>1?this.convertPointsToSVGPath(this._points):null;if(!i||this._isEmptySVGPath(i))return e.fire("erasing:end"),void e.requestRenderAll();var r=this.createPath(i);r.setCoords(),e.fire("before:path:created",{path:r});var n=this,s={targets:[],subTargets:[],drawables:{}},o=e._objects.map((function(t){return t.erasable&&t.intersectsWithObject(r,!0,!0)&&n._addPathToObjectEraser(t,r,s)}));return o.push(n.applyEraserToCanvas(r,s)),Promise.all(o).then((function(){e.fire("erasing:end",Object.assign(s,{path:r})),e.requestRenderAll(),n._resetShadow(),e.fire("path:created",{path:r})}))}})}(void 0!==t||window),t.fabric=g,Object.defineProperty(t,"__esModule",{value:!0}),t}({}); +var fabric=fabric||{version:"5.1.0"};if("undefined"!=typeof exports?exports.fabric=fabric:"function"==typeof define&&define.amd&&define([],function(){return fabric}),"undefined"!=typeof document&&"undefined"!=typeof window)document instanceof("undefined"!=typeof HTMLDocument?HTMLDocument:Document)?fabric.document=document:fabric.document=document.implementation.createHTMLDocument(""),fabric.window=window;else{var jsdom=require("jsdom"),virtualWindow=new jsdom.JSDOM(decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"),{features:{FetchExternalResources:["img"]},resources:"usable"}).window;fabric.document=virtualWindow.document,fabric.jsdomImplForWrapper=require("jsdom/lib/jsdom/living/generated/utils").implForWrapper,fabric.nodeCanvas=require("jsdom/lib/jsdom/utils").Canvas,fabric.window=virtualWindow,DOMParser=fabric.window.DOMParser}function resizeCanvasIfNeeded(t){var e=t.targetCanvas,i=e.width,r=e.height,n=t.destinationWidth,s=t.destinationHeight;i===n&&r===s||(e.width=n,e.height=s)}function copyGLTo2DDrawImage(t,e){var i=t.canvas,r=e.targetCanvas,n=r.getContext("2d");n.translate(0,r.height),n.scale(1,-1);var s=i.height-r.height;n.drawImage(i,0,s,r.width,r.height,0,0,r.width,r.height)}function copyGLTo2DPutImageData(t,e){var i=e.targetCanvas.getContext("2d"),r=e.destinationWidth,n=e.destinationHeight,s=r*n*4,o=new Uint8Array(this.imageBuffer,0,s),a=new Uint8ClampedArray(this.imageBuffer,0,s);t.readPixels(0,0,r,n,t.RGBA,t.UNSIGNED_BYTE,o);var c=new ImageData(a,r,n);i.putImageData(c,0,0)}fabric.isTouchSupported="ontouchstart"in fabric.window||"ontouchstart"in fabric.document||fabric.window&&fabric.window.navigator&&0_)for(var C=1,S=d.length;Ct[i-2].x?1:n.x===t[i-2].x?0:-1,c=n.y>t[i-2].y?1:n.y===t[i-2].y?0:-1),r.push(["L",n.x+a*e,n.y+c*e]),r},fabric.util.getPathSegmentsInfo=l,fabric.util.getBoundsOfCurve=function(t,e,i,r,n,s,o,a){var c;if(fabric.cachesBoundsOfCurve&&(c=j.call(arguments),fabric.boundsOfCurveCache[c]))return fabric.boundsOfCurveCache[c];var h,l,u,f,d,g,p,v,m=Math.sqrt,b=Math.min,y=Math.max,_=Math.abs,x=[],C=[[],[]];l=6*t-12*i+6*n,h=-3*t+9*i-9*n+3*o,u=3*i-3*t;for(var S=0;S<2;++S)if(0/g,">")},graphemeSplit:function(t){var e,i=0,r=[];for(i=0;it.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,e){return void 0===e&&(e=.5),e=Math.max(Math.min(1,e),0),new i(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)},distanceFrom:function(t){var e=this.x-t.x,i=this.y-t.y;return Math.sqrt(e*e+i*i)},midPointFrom:function(t){return this.lerp(t)},min:function(t){return new i(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new i(Math.max(this.x,t.x),Math.max(this.y,t.y))},toString:function(){return this.x+","+this.y},setXY:function(t,e){return this.x=t,this.y=e,this},setX:function(t){return this.x=t,this},setY:function(t){return this.y=t,this},setFromPoint:function(t){return this.x=t.x,this.y=t.y,this},swap:function(t){var e=this.x,i=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=i},clone:function(){return new i(this.x,this.y)}}}("undefined"!=typeof exports?exports:this),function(t){"use strict";var f=t.fabric||(t.fabric={});function d(t){this.status=t,this.points=[]}f.Intersection?f.warn("fabric.Intersection is already defined"):(f.Intersection=d,f.Intersection.prototype={constructor:d,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},f.Intersection.intersectLineLine=function(t,e,i,r){var n,s=(r.x-i.x)*(t.y-i.y)-(r.y-i.y)*(t.x-i.x),o=(e.x-t.x)*(t.y-i.y)-(e.y-t.y)*(t.x-i.x),a=(r.y-i.y)*(e.x-t.x)-(r.x-i.x)*(e.y-t.y);if(0!==a){var c=s/a,h=o/a;0<=c&&c<=1&&0<=h&&h<=1?(n=new d("Intersection")).appendPoint(new f.Point(t.x+c*(e.x-t.x),t.y+c*(e.y-t.y))):n=new d}else n=new d(0===s||0===o?"Coincident":"Parallel");return n},f.Intersection.intersectLinePolygon=function(t,e,i){var r,n,s,o,a=new d,c=i.length;for(o=0;o=c&&(h.x-=c),h.x<=-c&&(h.x+=c),h.y>=c&&(h.y-=c),h.y<=c&&(h.y+=c),h.x-=o.offsetX,h.y-=o.offsetY,h}function y(t){return t.flipX!==t.flipY}function _(t,e,i,r,n){if(0!==t[e]){var s=n/t._getTransformedDimensions()[r]*t[i];t.set(i,s)}}function x(t,e,i,r){var n,s=e.target,o=s._getTransformedDimensions(0,s.skewY),a=P(e,e.originX,e.originY,i,r),c=Math.abs(2*a.x)-o.x,h=s.skewX;c<2?n=0:(n=v(Math.atan2(c/s.scaleX,o.y/s.scaleY)),e.originX===f&&e.originY===p&&(n=-n),e.originX===g&&e.originY===d&&(n=-n),y(s)&&(n=-n));var l=h!==n;if(l){var u=s._getTransformedDimensions().y;s.set("skewX",n),_(s,"skewY","scaleY","y",u)}return l}function C(t,e,i,r){var n,s=e.target,o=s._getTransformedDimensions(s.skewX,0),a=P(e,e.originX,e.originY,i,r),c=Math.abs(2*a.y)-o.y,h=s.skewY;c<2?n=0:(n=v(Math.atan2(c/s.scaleY,o.x/s.scaleX)),e.originX===f&&e.originY===p&&(n=-n),e.originX===g&&e.originY===d&&(n=-n),y(s)&&(n=-n));var l=h!==n;if(l){var u=s._getTransformedDimensions().x;s.set("skewY",n),_(s,"skewX","scaleX","x",u)}return l}function E(t,e,i,r,n){n=n||{};var s,o,a,c,h,l,u=e.target,f=u.lockScalingX,d=u.lockScalingY,g=n.by,p=w(t,u),v=k(u,g,p),m=e.gestureScale;if(v)return!1;if(m)o=e.scaleX*m,a=e.scaleY*m;else{if(s=P(e,e.originX,e.originY,i,r),h="y"!==g?T(s.x):1,l="x"!==g?T(s.y):1,e.signX||(e.signX=h),e.signY||(e.signY=l),u.lockScalingFlip&&(e.signX!==h||e.signY!==l))return!1;if(c=u._getTransformedDimensions(),p&&!g){var b=Math.abs(s.x)+Math.abs(s.y),y=e.original,_=b/(Math.abs(c.x*y.scaleX/u.scaleX)+Math.abs(c.y*y.scaleY/u.scaleY));o=y.scaleX*_,a=y.scaleY*_}else o=Math.abs(s.x*u.scaleX/c.x),a=Math.abs(s.y*u.scaleY/c.y);O(e)&&(o*=2,a*=2),e.signX!==h&&"y"!==g&&(e.originX=S[e.originX],o*=-1,e.signX=h),e.signY!==l&&"x"!==g&&(e.originY=S[e.originY],a*=-1,e.signY=l)}var x=u.scaleX,C=u.scaleY;return g?("x"===g&&u.set("scaleX",o),"y"===g&&u.set("scaleY",a)):(!f&&u.set("scaleX",o),!d&&u.set("scaleY",a)),x!==u.scaleX||C!==u.scaleY}n.scaleCursorStyleHandler=function(t,e,i){var r=w(t,i),n="";if(0!==e.x&&0===e.y?n="x":0===e.x&&0!==e.y&&(n="y"),k(i,n,r))return"not-allowed";var s=a(i,e);return o[s]+"-resize"},n.skewCursorStyleHandler=function(t,e,i){var r="not-allowed";if(0!==e.x&&i.lockSkewingY)return r;if(0!==e.y&&i.lockSkewingX)return r;var n=a(i,e)%4;return s[n]+"-resize"},n.scaleSkewCursorStyleHandler=function(t,e,i){return t[i.canvas.altActionKey]?n.skewCursorStyleHandler(t,e,i):n.scaleCursorStyleHandler(t,e,i)},n.rotationWithSnapping=b("rotating",m(function(t,e,i,r){var n=e,s=n.target,o=s.translateToOriginPoint(s.getCenterPoint(),n.originX,n.originY);if(s.lockRotation)return!1;var a,c=Math.atan2(n.ey-o.y,n.ex-o.x),h=Math.atan2(r-o.y,i-o.x),l=v(h-c+n.theta);if(0o.r2,h=this.gradientTransform?this.gradientTransform.concat():fabric.iMatrix.concat(),l=-this.offsetX,u=-this.offsetY,f=!!e.additionalTransform,d="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox";if(a.sort(function(t,e){return t.offset-e.offset}),"objectBoundingBox"===d?(l/=t.width,u/=t.height):(l+=t.width/2,u+=t.height/2),"path"===t.type&&"percentage"!==this.gradientUnits&&(l-=t.pathOffset.x,u-=t.pathOffset.y),h[4]-=l,h[5]-=u,s='id="SVGID_'+this.id+'" gradientUnits="'+d+'"',s+=' gradientTransform="'+(f?e.additionalTransform+" ":"")+fabric.util.matrixToSVG(h)+'" ',"linear"===this.type?n=["\n']:"radial"===this.type&&(n=["\n']),"radial"===this.type){if(c)for((a=a.concat()).reverse(),i=0,r=a.length;i\n')}return n.push("linear"===this.type?"\n":"\n"),n.join("")},toLive:function(t){var e,i,r,n=fabric.util.object.clone(this.coords);if(this.type){for("linear"===this.type?e=t.createLinearGradient(n.x1,n.y1,n.x2,n.y2):"radial"===this.type&&(e=t.createRadialGradient(n.x1,n.y1,n.r1,n.x2,n.y2,n.r2)),i=0,r=this.colorStops.length;i\n\n\n'},setOptions:function(t){for(var e in t)this[e]=t[e]},toLive:function(t){var e=this.source;if(!e)return"";if(void 0!==e.src){if(!e.complete)return"";if(0===e.naturalWidth||0===e.naturalHeight)return""}return t.createPattern(e,this.repeat)}})}(),function(t){"use strict";var o=t.fabric||(t.fabric={}),a=o.util.toFixed;o.Shadow?o.warn("fabric.Shadow is already defined."):(o.Shadow=o.util.createClass({color:"rgb(0,0,0)",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,nonScaling:!1,initialize:function(t){for(var e in"string"==typeof t&&(t=this._parseShadow(t)),t)this[e]=t[e];this.id=o.Object.__uid++},_parseShadow:function(t){var e=t.trim(),i=o.Shadow.reOffsetsAndBlur.exec(e)||[];return{color:(e.replace(o.Shadow.reOffsetsAndBlur,"")||"rgb(0,0,0)").trim(),offsetX:parseFloat(i[1],10)||0,offsetY:parseFloat(i[2],10)||0,blur:parseFloat(i[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join("px ")},toSVG:function(t){var e=40,i=40,r=o.Object.NUM_FRACTION_DIGITS,n=o.util.rotateVector({x:this.offsetX,y:this.offsetY},o.util.degreesToRadians(-t.angle)),s=new o.Color(this.color);return t.width&&t.height&&(e=100*a((Math.abs(n.x)+this.blur)/t.width,r)+20,i=100*a((Math.abs(n.y)+this.blur)/t.height,r)+20),t.flipX&&(n.x*=-1),t.flipY&&(n.y*=-1),'\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\n\n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke,nonScaling:this.nonScaling};var e={},i=o.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke","nonScaling"].forEach(function(t){this[t]!==i[t]&&(e[t]=this[t])},this),e}}),o.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/)}("undefined"!=typeof exports?exports:this),function(){"use strict";if(fabric.StaticCanvas)fabric.warn("fabric.StaticCanvas is already defined.");else{var n=fabric.util.object.extend,t=fabric.util.getElementOffset,h=fabric.util.removeFromArray,a=fabric.util.toFixed,s=fabric.util.transformPoint,o=fabric.util.invertTransform,i=fabric.util.getNodeCanvas,r=fabric.util.createCanvasElement,e=new Error("Could not initialize `canvas` element");fabric.StaticCanvas=fabric.util.createClass(fabric.CommonMethods,{initialize:function(t,e){e||(e={}),this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:fabric.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!0,clipPath:void 0,_initStatic:function(t,e){var i=this.requestRenderAllBound;this._objects=[],this._createLowerCanvas(t),this._initOptions(e),this.interactive||this._initRetinaScaling(),e.overlayImage&&this.setOverlayImage(e.overlayImage,i),e.backgroundImage&&this.setBackgroundImage(e.backgroundImage,i),e.backgroundColor&&this.setBackgroundColor(e.backgroundColor,i),e.overlayColor&&this.setOverlayColor(e.overlayColor,i),this.calcOffset()},_isRetinaScaling:function(){return 1\n'),this._setSVGBgOverlayColor(i,"background"),this._setSVGBgOverlayImage(i,"backgroundImage",e),this._setSVGObjects(i,e),this.clipPath&&i.push("\n"),this._setSVGBgOverlayColor(i,"overlay"),this._setSVGBgOverlayImage(i,"overlayImage",e),i.push(""),i.join("")},_setSVGPreamble:function(t,e){e.suppressPreamble||t.push('\n','\n')},_setSVGHeader:function(t,e){var i,r=e.width||this.width,n=e.height||this.height,s='viewBox="0 0 '+this.width+" "+this.height+'" ',o=fabric.Object.NUM_FRACTION_DIGITS;e.viewBox?s='viewBox="'+e.viewBox.x+" "+e.viewBox.y+" "+e.viewBox.width+" "+e.viewBox.height+'" ':this.svgViewportTransformation&&(i=this.viewportTransform,s='viewBox="'+a(-i[4]/i[0],o)+" "+a(-i[5]/i[3],o)+" "+a(this.width/i[0],o)+" "+a(this.height/i[3],o)+'" '),t.push("\n',"Created with Fabric.js ",fabric.version,"\n","\n",this.createSVGFontFacesMarkup(),this.createSVGRefElementsMarkup(),this.createSVGClipPathMarkup(e),"\n")},createSVGClipPathMarkup:function(t){var e=this.clipPath;return e?(e.clipPathId="CLIPPATH_"+fabric.Object.__uid++,'\n'+this.clipPath.toClipPathSVG(t.reviver)+"\n"):""},createSVGRefElementsMarkup:function(){var s=this;return["background","overlay"].map(function(t){var e=s[t+"Color"];if(e&&e.toLive){var i=s[t+"Vpt"],r=s.viewportTransform,n={width:s.width/(i?r[0]:1),height:s.height/(i?r[3]:1)};return e.toSVG(n,{additionalTransform:i?fabric.util.matrixToSVG(r):""})}}).join("")},createSVGFontFacesMarkup:function(){var t,e,i,r,n,s,o,a,c="",h={},l=fabric.fontPaths,u=[];for(this._objects.forEach(function t(e){u.push(e),e._objects&&e._objects.forEach(t)}),o=0,a=u.length;o',"\n",c,"","\n"].join("")),c},_setSVGObjects:function(t,e){var i,r,n,s=this._objects;for(r=0,n=s.length;r\n")}else t.push('\n")},sendToBack:function(t){if(!t)return this;var e,i,r,n=this._activeObject;if(t===n&&"activeSelection"===t.type)for(e=(r=n._objects).length;e--;)i=r[e],h(this._objects,i),this._objects.unshift(i);else h(this._objects,t),this._objects.unshift(t);return this.renderOnAddRemove&&this.requestRenderAll(),this},bringToFront:function(t){if(!t)return this;var e,i,r,n=this._activeObject;if(t===n&&"activeSelection"===t.type)for(r=n._objects,e=0;e"}}),n(fabric.StaticCanvas.prototype,fabric.Observable),n(fabric.StaticCanvas.prototype,fabric.Collection),n(fabric.StaticCanvas.prototype,fabric.DataURLExporter),n(fabric.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(t){var e=r();if(!e||!e.getContext)return null;var i=e.getContext("2d");if(!i)return null;switch(t){case"setLineDash":return void 0!==i.setLineDash;default:return null}}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject,fabric.isLikelyNode&&(fabric.StaticCanvas.prototype.createPNGStream=function(){var t=i(this.lowerCanvasEl);return t&&t.createPNGStream()},fabric.StaticCanvas.prototype.createJPEGStream=function(t){var e=i(this.lowerCanvasEl);return e&&e.createJPEGStream(t)})}}(),fabric.BaseBrush=fabric.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeMiterLimit:10,strokeDashArray:null,limitedToCanvasSize:!1,_setBrushStyles:function(t){t.strokeStyle=this.color,t.lineWidth=this.width,t.lineCap=this.strokeLineCap,t.miterLimit=this.strokeMiterLimit,t.lineJoin=this.strokeLineJoin,t.setLineDash(this.strokeDashArray||[])},_saveAndTransform:function(t){var e=this.canvas.viewportTransform;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5])},_setShadow:function(){if(this.shadow){var t=this.canvas,e=this.shadow,i=t.contextTop,r=t.getZoom();t&&t._isRetinaScaling()&&(r*=fabric.devicePixelRatio),i.shadowColor=e.color,i.shadowBlur=e.blur*r,i.shadowOffsetX=e.offsetX*r,i.shadowOffsetY=e.offsetY*r}},needsFullRender:function(){return new fabric.Color(this.color).getAlpha()<1||!!this.shadow},_resetShadow:function(){var t=this.canvas.contextTop;t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0},_isOutSideCanvas:function(t){return t.x<0||t.x>this.canvas.getWidth()||t.y<0||t.y>this.canvas.getHeight()}}),fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{decimate:.4,drawStraightLine:!1,straightLineKey:"shiftKey",initialize:function(t){this.canvas=t,this._points=[]},needsFullRender:function(){return this.callSuper("needsFullRender")||this._hasStraightLine},_drawSegment:function(t,e,i){var r=e.midPointFrom(i);return t.quadraticCurveTo(e.x,e.y,r.x,r.y),r},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],this._prepareForDrawing(t),this._captureDrawingPath(t),this._render())},onMouseMove:function(t,e){if(this.canvas._isMainEvent(e.e)&&(this.drawStraightLine=e.e[this.straightLineKey],(!0!==this.limitedToCanvasSize||!this._isOutSideCanvas(t))&&this._captureDrawingPath(t)&&1"},getObjectScaling:function(){if(!this.group)return{scaleX:this.scaleX,scaleY:this.scaleY};var t=x.util.qrDecompose(this.calcTransformMatrix());return{scaleX:Math.abs(t.scaleX),scaleY:Math.abs(t.scaleY)}},getTotalObjectScaling:function(){var t=this.getObjectScaling(),e=t.scaleX,i=t.scaleY;if(this.canvas){var r=this.canvas.getZoom(),n=this.canvas.getRetinaScaling();e*=r*n,i*=r*n}return{scaleX:e,scaleY:i}},getObjectOpacity:function(){var t=this.opacity;return this.group&&(t*=this.group.getObjectOpacity()),t},_set:function(t,e){var i="scaleX"===t||"scaleY"===t,r=this[t]!==e,n=!1;return i&&(e=this._constrainScale(e)),"scaleX"===t&&e<0?(this.flipX=!this.flipX,e*=-1):"scaleY"===t&&e<0?(this.flipY=!this.flipY,e*=-1):"shadow"!==t||!e||e instanceof x.Shadow?"dirty"===t&&this.group&&this.group.set("dirty",e):e=new x.Shadow(e),this[t]=e,r&&(n=this.group&&this.group.isOnACache(),-1=t.x&&n.left+n.width<=e.x&&n.top>=t.y&&n.top+n.height<=e.y},containsPoint:function(t,e,i,r){var n=this._getCoords(i,r),s=(e=e||this._getImageLines(n),this._findCrossPoints(t,e));return 0!==s&&s%2==1},isOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.getCoords(!0,t).some(function(t){return t.x<=i.x&&t.x>=e.x&&t.y<=i.y&&t.y>=e.y})||(!!this.intersectsWithRect(e,i,!0,t)||this._containsCenterOfCanvas(e,i,t))},_containsCenterOfCanvas:function(t,e,i){var r={x:(t.x+e.x)/2,y:(t.y+e.y)/2};return!!this.containsPoint(r,null,!0,i)},isPartiallyOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.intersectsWithRect(e,i,!0,t)||this.getCoords(!0,t).every(function(t){return(t.x>=i.x||t.x<=e.x)&&(t.y>=i.y||t.y<=e.y)})&&this._containsCenterOfCanvas(e,i,t)},_getImageLines:function(t){return{topline:{o:t.tl,d:t.tr},rightline:{o:t.tr,d:t.br},bottomline:{o:t.br,d:t.bl},leftline:{o:t.bl,d:t.tl}}},_findCrossPoints:function(t,e){var i,r,n,s=0;for(var o in e)if(!((n=e[o]).o.y=t.y&&n.d.y>=t.y||(n.o.x===n.d.x&&n.o.x>=t.x?r=n.o.x:(0,i=(n.d.y-n.o.y)/(n.d.x-n.o.x),r=-(t.y-0*t.x-(n.o.y-i*n.o.x))/(0-i)),r>=t.x&&(s+=1),2!==s)))break;return s},getBoundingRect:function(t,e){var i=this.getCoords(t,e);return h.makeBoundingBoxFromPoints(i)},getScaledWidth:function(){return this._getTransformedDimensions().x},getScaledHeight:function(){return this._getTransformedDimensions().y},_constrainScale:function(t){return Math.abs(t)\n')}},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(t),{reviver:t})},toClipPathSVG:function(t){return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(t),{reviver:t})},_createBaseClipPathSVGMarkup:function(t,e){var i=(e=e||{}).reviver,r=e.additionalTransform||"",n=[this.getSvgTransform(!0,r),this.getSvgCommons()].join(""),s=t.indexOf("COMMON_PARTS");return t[s]=n,i?i(t.join("")):t.join("")},_createBaseSVGMarkup:function(t,e){var i,r,n=(e=e||{}).noStyle,s=e.reviver,o=n?"":'style="'+this.getSvgStyles()+'" ',a=e.withShadow?'style="'+this.getSvgFilter()+'" ':"",c=this.clipPath,h=this.strokeUniform?'vector-effect="non-scaling-stroke" ':"",l=c&&c.absolutePositioned,u=this.stroke,f=this.fill,d=this.shadow,g=[],p=t.indexOf("COMMON_PARTS"),v=e.additionalTransform;return c&&(c.clipPathId="CLIPPATH_"+fabric.Object.__uid++,r='\n'+c.toClipPathSVG(s)+"\n"),l&&g.push("\n"),g.push("\n"),i=[o,h,n?"":this.addPaintOrder()," ",v?'transform="'+v+'" ':""].join(""),t[p]=i,f&&f.toLive&&g.push(f.toSVG(this)),u&&u.toLive&&g.push(u.toSVG(this)),d&&g.push(d.toSVG(this)),c&&g.push(r),g.push(t.join("")),g.push("\n"),l&&g.push("\n"),s?s(g.join("")):g.join("")},addPaintOrder:function(){return"fill"!==this.paintFirst?' paint-order="'+this.paintFirst+'" ':""}})}(),function(){var n=fabric.util.object.extend,r="stateProperties";function s(e,t,i){var r={};i.forEach(function(t){r[t]=e[t]}),n(e[t],r,!0)}fabric.util.object.extend(fabric.Object.prototype,{hasStateChanged:function(t){var e="_"+(t=t||r);return Object.keys(this[e]).length\n']}}),s.Line.ATTRIBUTE_NAMES=s.SHARED_ATTRIBUTES.concat("x1 y1 x2 y2".split(" ")),s.Line.fromElement=function(t,e,i){i=i||{};var r=s.parseAttributes(t,s.Line.ATTRIBUTE_NAMES),n=[r.x1||0,r.y1||0,r.x2||0,r.y2||0];e(new s.Line(n,o(r,i)))},s.Line.fromObject=function(t,e){var i=r(t,!0);i.points=[t.x1,t.y1,t.x2,t.y2],s.Object._fromObject("Line",i,function(t){delete t.points,e&&e(t)},"points")})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var s=t.fabric||(t.fabric={}),o=s.util.degreesToRadians;s.Circle?s.warn("fabric.Circle is already defined."):(s.Circle=s.util.createClass(s.Object,{type:"circle",radius:0,startAngle:0,endAngle:360,cacheProperties:s.Object.prototype.cacheProperties.concat("radius","startAngle","endAngle"),_set:function(t,e){return this.callSuper("_set",t,e),"radius"===t&&this.setRadius(e),this},toObject:function(t){return this.callSuper("toObject",["radius","startAngle","endAngle"].concat(t))},_toSVG:function(){var t,e=(this.endAngle-this.startAngle)%360;if(0===e)t=["\n'];else{var i=o(this.startAngle),r=o(this.endAngle),n=this.radius;t=['\n"]}return t},_render:function(t){t.beginPath(),t.arc(0,0,this.radius,o(this.startAngle),o(this.endAngle),!1),this._renderPaintInOrder(t)},getRadiusX:function(){return this.get("radius")*this.get("scaleX")},getRadiusY:function(){return this.get("radius")*this.get("scaleY")},setRadius:function(t){return this.radius=t,this.set("width",2*t).set("height",2*t)}}),s.Circle.ATTRIBUTE_NAMES=s.SHARED_ATTRIBUTES.concat("cx cy r".split(" ")),s.Circle.fromElement=function(t,e){var i,r=s.parseAttributes(t,s.Circle.ATTRIBUTE_NAMES);if(!("radius"in(i=r)&&0<=i.radius))throw new Error("value of `r` attribute is required and can not be negative");r.left=(r.left||0)-r.radius,r.top=(r.top||0)-r.radius,e(new s.Circle(r))},s.Circle.fromObject=function(t,e){s.Object._fromObject("Circle",t,e)})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var i=t.fabric||(t.fabric={});i.Triangle?i.warn("fabric.Triangle is already defined"):(i.Triangle=i.util.createClass(i.Object,{type:"triangle",width:100,height:100,_render:function(t){var e=this.width/2,i=this.height/2;t.beginPath(),t.moveTo(-e,i),t.lineTo(0,-i),t.lineTo(e,i),t.closePath(),this._renderPaintInOrder(t)},_toSVG:function(){var t=this.width/2,e=this.height/2;return["']}}),i.Triangle.fromObject=function(t,e){return i.Object._fromObject("Triangle",t,e)})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var r=t.fabric||(t.fabric={}),e=2*Math.PI;r.Ellipse?r.warn("fabric.Ellipse is already defined."):(r.Ellipse=r.util.createClass(r.Object,{type:"ellipse",rx:0,ry:0,cacheProperties:r.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this.set("rx",t&&t.rx||0),this.set("ry",t&&t.ry||0)},_set:function(t,e){switch(this.callSuper("_set",t,e),t){case"rx":this.rx=e,this.set("width",2*e);break;case"ry":this.ry=e,this.set("height",2*e)}return this},getRx:function(){return this.get("rx")*this.get("scaleX")},getRy:function(){return this.get("ry")*this.get("scaleY")},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']},_render:function(t){t.beginPath(),t.save(),t.transform(1,0,0,this.ry/this.rx,0,0),t.arc(0,0,this.rx,0,e,!1),t.restore(),this._renderPaintInOrder(t)}}),r.Ellipse.ATTRIBUTE_NAMES=r.SHARED_ATTRIBUTES.concat("cx cy rx ry".split(" ")),r.Ellipse.fromElement=function(t,e){var i=r.parseAttributes(t,r.Ellipse.ATTRIBUTE_NAMES);i.left=(i.left||0)-i.rx,i.top=(i.top||0)-i.ry,e(new r.Ellipse(i))},r.Ellipse.fromObject=function(t,e){r.Object._fromObject("Ellipse",t,e)})}("undefined"!=typeof exports?exports:this),function(t){"use strict";var s=t.fabric||(t.fabric={}),o=s.util.object.extend;s.Rect?s.warn("fabric.Rect is already defined"):(s.Rect=s.util.createClass(s.Object,{stateProperties:s.Object.prototype.stateProperties.concat("rx","ry"),type:"rect",rx:0,ry:0,cacheProperties:s.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(t){var e=this.rx?Math.min(this.rx,this.width/2):0,i=this.ry?Math.min(this.ry,this.height/2):0,r=this.width,n=this.height,s=-this.width/2,o=-this.height/2,a=0!==e||0!==i,c=.4477152502;t.beginPath(),t.moveTo(s+e,o),t.lineTo(s+r-e,o),a&&t.bezierCurveTo(s+r-c*e,o,s+r,o+c*i,s+r,o+i),t.lineTo(s+r,o+n-i),a&&t.bezierCurveTo(s+r,o+n-c*i,s+r-c*e,o+n,s+r-e,o+n),t.lineTo(s+e,o+n),a&&t.bezierCurveTo(s+c*e,o+n,s,o+n-c*i,s,o+n-i),t.lineTo(s,o+i),a&&t.bezierCurveTo(s,o+c*i,s+c*e,o,s+e,o),t.closePath(),this._renderPaintInOrder(t)},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']}}),s.Rect.ATTRIBUTE_NAMES=s.SHARED_ATTRIBUTES.concat("x y rx ry width height".split(" ")),s.Rect.fromElement=function(t,e,i){if(!t)return e(null);i=i||{};var r=s.parseAttributes(t,s.Rect.ATTRIBUTE_NAMES);r.left=r.left||0,r.top=r.top||0,r.height=r.height||0,r.width=r.width||0;var n=new s.Rect(o(i?s.util.object.clone(i):{},r));n.visible=n.visible&&0\n']},commonRender:function(t){var e,i=this.points.length,r=this.pathOffset.x,n=this.pathOffset.y;if(!i||isNaN(this.points[i-1].y))return!1;t.beginPath(),t.moveTo(this.points[0].x-r,this.points[0].y-n);for(var s=0;s"},toObject:function(t){return n(this.callSuper("toObject",t),{path:this.path.map(function(t){return t.slice()})})},toDatalessObject:function(t){var e=this.toObject(["sourcePath"].concat(t));return e.sourcePath&&delete e.path,e},_toSVG:function(){return["\n"]},_getOffsetTransform:function(){var t=f.Object.NUM_FRACTION_DIGITS;return" translate("+e(-this.pathOffset.x,t)+", "+e(-this.pathOffset.y,t)+")"},toClipPathSVG:function(t){var e=this._getOffsetTransform();return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},toSVG:function(t){var e=this._getOffsetTransform();return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},complexity:function(){return this.path.length},_calcDimensions:function(){for(var t,e,i=[],r=[],n=0,s=0,o=0,a=0,c=0,h=this.path.length;c"},addWithUpdate:function(t){var e=!!this.group;return this._restoreObjectsState(),h.util.resetObjectTransform(this),t&&(e&&h.util.removeTransformFromObject(t,this.group.calcTransformMatrix()),this._objects.push(t),t.group=this,t._set("canvas",this.canvas)),this._calcBounds(),this._updateObjectsCoords(),this.dirty=!0,e?this.group.addWithUpdate():this.setCoords(),this},removeWithUpdate:function(t){return this._restoreObjectsState(),h.util.resetObjectTransform(this),this.remove(t),this._calcBounds(),this._updateObjectsCoords(),this.setCoords(),this.dirty=!0,this},_onObjectAdded:function(t){this.dirty=!0,t.group=this,t._set("canvas",this.canvas)},_onObjectRemoved:function(t){this.dirty=!0,delete t.group},_set:function(t,e){var i=this._objects.length;if(this.useSetOnGroup)for(;i--;)this._objects[i].setOnGroup(t,e);if("canvas"===t)for(;i--;)this._objects[i]._set(t,e);h.Object.prototype._set.call(this,t,e)},toObject:function(r){var n=this.includeDefaultValues,t=this._objects.filter(function(t){return!t.excludeFromExport}).map(function(t){var e=t.includeDefaultValues;t.includeDefaultValues=n;var i=t.toObject(r);return t.includeDefaultValues=e,i}),e=h.Object.prototype.toObject.call(this,r);return e.objects=t,e},toDatalessObject:function(r){var t,e=this.sourcePath;if(e)t=e;else{var n=this.includeDefaultValues;t=this._objects.map(function(t){var e=t.includeDefaultValues;t.includeDefaultValues=n;var i=t.toDatalessObject(r);return t.includeDefaultValues=e,i})}var i=h.Object.prototype.toDatalessObject.call(this,r);return i.objects=t,i},render:function(t){this._transformDone=!0,this.callSuper("render",t),this._transformDone=!1},shouldCache:function(){var t=h.Object.prototype.shouldCache.call(this);if(t)for(var e=0,i=this._objects.length;e\n"],i=0,r=this._objects.length;i\n"),e},getSvgStyles:function(){var t=void 0!==this.opacity&&1!==this.opacity?"opacity: "+this.opacity+";":"",e=this.visible?"":" visibility: hidden;";return[t,this.getSvgFilter(),e].join("")},toClipPathSVG:function(t){for(var e=[],i=0,r=this._objects.length;i"},shouldCache:function(){return!1},isOnACache:function(){return!1},_renderControls:function(t,e,i){t.save(),t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,this.callSuper("_renderControls",t,e),void 0===(i=i||{}).hasControls&&(i.hasControls=!1),i.forActiveSelection=!0;for(var r=0,n=this._objects.length;r\n','\t\n',"\n"),o=' clip-path="url(#imageCrop_'+c+')" '}if(this.imageSmoothing||(a='" image-rendering="optimizeSpeed'),i.push("\t\n"),this.stroke||this.strokeDashArray){var h=this.fill;this.fill=null,t=["\t\n'],this.fill=h}return e="fill"!==this.paintFirst?e.concat(t,i):e.concat(i,t)},getSrc:function(t){var e=t?this._element:this._originalElement;return e?e.toDataURL?e.toDataURL():this.srcFromAttribute?e.getAttribute("src"):e.src:this.src||""},setSrc:function(t,i,r){return fabric.util.loadImage(t,function(t,e){this.setElement(t,r),this._setWidthHeight(),i&&i(this,e)},this,r&&r.crossOrigin),this},toString:function(){return'#'},applyResizeFilters:function(){var t=this.resizeFilter,e=this.minimumScaleTrigger,i=this.getTotalObjectScaling(),r=i.scaleX,n=i.scaleY,s=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||e=t;for(var a=["highp","mediump","lowp"],c=0;c<3;c++)if(void 0,i="precision "+a[c]+" float;\nvoid main(){}",r=(e=s).createShader(e.FRAGMENT_SHADER),e.shaderSource(r,i),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS)){fabric.webGlPrecision=a[c];break}}return this.isSupported=o},(fabric.WebglFilterBackend=t).prototype={tileSize:2048,resources:{},setupGLContext:function(t,e){this.dispose(),this.createWebGLCanvas(t,e),this.aPosition=new Float32Array([0,0,0,1,1,0,1,1]),this.chooseFastestCopyGLTo2DMethod(t,e)},chooseFastestCopyGLTo2DMethod:function(t,e){var i,r=void 0!==window.performance;try{new ImageData(1,1),i=!0}catch(t){i=!1}var n="undefined"!=typeof ArrayBuffer,s="undefined"!=typeof Uint8ClampedArray;if(r&&i&&n&&s){var o=fabric.util.createCanvasElement(),a=new ArrayBuffer(t*e*4);if(fabric.forceGLPutImageData)return this.imageBuffer=a,void(this.copyGLTo2D=copyGLTo2DPutImageData);var c,h,l={imageBuffer:a,destinationWidth:t,destinationHeight:e,targetCanvas:o};o.width=t,o.height=e,c=window.performance.now(),copyGLTo2DDrawImage.call(l,this.gl,l),h=window.performance.now()-c,c=window.performance.now(),copyGLTo2DPutImageData.call(l,this.gl,l),window.performance.now()-c 0.0) {\n"+this.fragmentSource[t]+"}\n}"},retrieveShader:function(t){var e,i=this.type+"_"+this.mode;return t.programCache.hasOwnProperty(i)||(e=this.buildSource(this.mode),t.programCache[i]=this.createProgram(t.context,e)),t.programCache[i]},applyTo2d:function(t){var e,i,r,n,s,o,a,c=t.imageData.data,h=c.length,l=1-this.alpha;e=(a=new f.Color(this.color).getSource())[0]*this.alpha,i=a[1]*this.alpha,r=a[2]*this.alpha;for(var u=0;u'},_getCacheCanvasDimensions:function(){var t=this.callSuper("_getCacheCanvasDimensions"),e=this.fontSize;return t.width+=e*t.zoomX,t.height+=e*t.zoomY,t},_render:function(t){var e=this.path;e&&!e.isNotVisible()&&e._render(t),this._setTextStyles(t),this._renderTextLinesBackground(t),this._renderTextDecoration(t,"underline"),this._renderText(t),this._renderTextDecoration(t,"overline"),this._renderTextDecoration(t,"linethrough")},_renderText:function(t){"stroke"===this.paintFirst?(this._renderTextStroke(t),this._renderTextFill(t)):(this._renderTextFill(t),this._renderTextStroke(t))},_setTextStyles:function(t,e,i){if(t.textBaseline="alphabetical",this.path)switch(this.pathAlign){case"center":t.textBaseline="middle";break;case"ascender":t.textBaseline="top";break;case"descender":t.textBaseline="bottom"}t.font=this._getFontDeclaration(e,i)},calcTextWidth:function(){for(var t=this.getLineWidth(0),e=1,i=this._textLines.length;ethis.__selectionStartOnMouseDown?(this.selectionStart=this.__selectionStartOnMouseDown,this.selectionEnd=e):(this.selectionStart=e,this.selectionEnd=this.__selectionStartOnMouseDown),this.selectionStart===i&&this.selectionEnd===r||(this.restartCursorIfNeeded(),this._fireSelectionChanged(),this._updateTextarea(),this.renderCursorOrSelection()))}},_setEditingProps:function(){this.hoverCursor="text",this.canvas&&(this.canvas.defaultCursor=this.canvas.moveCursor="text"),this.borderColor=this.editingBorderColor,this.hasControls=this.selectable=!1,this.lockMovementX=this.lockMovementY=!0},fromStringToGraphemeSelection:function(t,e,i){var r=i.slice(0,t),n=fabric.util.string.graphemeSplit(r).length;if(t===e)return{selectionStart:n,selectionEnd:n};var s=i.slice(t,e);return{selectionStart:n,selectionEnd:n+fabric.util.string.graphemeSplit(s).length}},fromGraphemeToStringSelection:function(t,e,i){var r=i.slice(0,t).join("").length;return t===e?{selectionStart:r,selectionEnd:r}:{selectionStart:r,selectionEnd:r+i.slice(t,e).join("").length}},_updateTextarea:function(){if(this.cursorOffsetCache={},this.hiddenTextarea){if(!this.inCompositionMode){var t=this.fromGraphemeToStringSelection(this.selectionStart,this.selectionEnd,this._text);this.hiddenTextarea.selectionStart=t.selectionStart,this.hiddenTextarea.selectionEnd=t.selectionEnd}this.updateTextareaPosition()}},updateFromTextArea:function(){if(this.hiddenTextarea){this.cursorOffsetCache={},this.text=this.hiddenTextarea.value,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords());var t=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value);this.selectionEnd=this.selectionStart=t.selectionEnd,this.inCompositionMode||(this.selectionStart=t.selectionStart),this.updateTextareaPosition()}},updateTextareaPosition:function(){if(this.selectionStart===this.selectionEnd){var t=this._calcTextareaPosition();this.hiddenTextarea.style.left=t.left,this.hiddenTextarea.style.top=t.top}},_calcTextareaPosition:function(){if(!this.canvas)return{x:1,y:1};var t=this.inCompositionMode?this.compositionStart:this.selectionStart,e=this._getCursorBoundaries(t),i=this.get2DCursorLocation(t),r=i.lineIndex,n=i.charIndex,s=this.getValueOfPropertyAt(r,n,"fontSize")*this.lineHeight,o=e.leftOffset,a=this.calcTransformMatrix(),c={x:e.left+o,y:e.top+e.topOffset+s},h=this.canvas.getRetinaScaling(),l=this.canvas.upperCanvasEl,u=l.width/h,f=l.height/h,d=u-s,g=f-s,p=l.clientWidth/u,v=l.clientHeight/f;return c=fabric.util.transformPoint(c,a),(c=fabric.util.transformPoint(c,this.canvas.viewportTransform)).x*=p,c.y*=v,c.x<0&&(c.x=0),c.x>d&&(c.x=d),c.y<0&&(c.y=0),c.y>g&&(c.y=g),c.x+=this.canvas._offset.left,c.y+=this.canvas._offset.top,{left:c.x+"px",top:c.y+"px",fontSize:s+"px",charHeight:s}},_saveEditingProps:function(){this._savedProps={hasControls:this.hasControls,borderColor:this.borderColor,lockMovementX:this.lockMovementX,lockMovementY:this.lockMovementY,hoverCursor:this.hoverCursor,selectable:this.selectable,defaultCursor:this.canvas&&this.canvas.defaultCursor,moveCursor:this.canvas&&this.canvas.moveCursor}},_restoreEditingProps:function(){this._savedProps&&(this.hoverCursor=this._savedProps.hoverCursor,this.hasControls=this._savedProps.hasControls,this.borderColor=this._savedProps.borderColor,this.selectable=this._savedProps.selectable,this.lockMovementX=this._savedProps.lockMovementX,this.lockMovementY=this._savedProps.lockMovementY,this.canvas&&(this.canvas.defaultCursor=this._savedProps.defaultCursor,this.canvas.moveCursor=this._savedProps.moveCursor))},exitEditing:function(){var t=this._textBeforeEdit!==this.text,e=this.hiddenTextarea;return this.selected=!1,this.isEditing=!1,this.selectionEnd=this.selectionStart,e&&(e.blur&&e.blur(),e.parentNode&&e.parentNode.removeChild(e)),this.hiddenTextarea=null,this.abortCursorAnimation(),this._restoreEditingProps(),this._currentCursorOpacity=0,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this.fire("editing:exited"),t&&this.fire("modified"),this.canvas&&(this.canvas.off("mouse:move",this.mouseMoveHandler),this.canvas.fire("text:editing:exited",{target:this}),t&&this.canvas.fire("object:modified",{target:this})),this},_removeExtraneousStyles:function(){for(var t in this.styles)this._textLines[t]||delete this.styles[t]},removeStyleFromTo:function(t,e){var i,r,n=this.get2DCursorLocation(t,!0),s=this.get2DCursorLocation(e,!0),o=n.lineIndex,a=n.charIndex,c=s.lineIndex,h=s.charIndex;if(o!==c){if(this.styles[o])for(i=a;it?this.selectionStart=t:this.selectionStart<0&&(this.selectionStart=0),this.selectionEnd>t?this.selectionEnd=t:this.selectionEnd<0&&(this.selectionEnd=0)}})}(),fabric.util.object.extend(fabric.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+new Date,this.__lastLastClickTime=+new Date,this.__lastPointer={},this.on("mousedown",this.onMouseDown)},onMouseDown:function(t){if(this.canvas){this.__newClickTime=+new Date;var e=t.pointer;this.isTripleClick(e)&&(this.fire("tripleclick",t),this._stopEvent(t.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=e,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected}},isTripleClick:function(t){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===t.x&&this.__lastPointer.y===t.y},_stopEvent:function(t){t.preventDefault&&t.preventDefault(),t.stopPropagation&&t.stopPropagation()},initCursorSelectionHandlers:function(){this.initMousedownHandler(),this.initMouseupHandler(),this.initClicks()},doubleClickHandler:function(t){this.isEditing&&this.selectWord(this.getSelectionStartFromPointer(t.e))},tripleClickHandler:function(t){this.isEditing&&this.selectLine(this.getSelectionStartFromPointer(t.e))},initClicks:function(){this.on("mousedblclick",this.doubleClickHandler),this.on("tripleclick",this.tripleClickHandler)},_mouseDownHandler:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.__isMousedown=!0,this.selected&&(this.inCompositionMode=!1,this.setCursorByClick(t.e)),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.selectionStart===this.selectionEnd&&this.abortCursorAnimation(),this.renderCursorOrSelection()))},_mouseDownHandlerBefore:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.selected=this===this.canvas._activeObject)},initMousedownHandler:function(){this.on("mousedown",this._mouseDownHandler),this.on("mousedown:before",this._mouseDownHandlerBefore)},initMouseupHandler:function(){this.on("mouseup",this.mouseUpHandler)},mouseUpHandler:function(t){if(this.__isMousedown=!1,!(!this.editable||this.group||t.transform&&t.transform.actionPerformed||t.e.button&&1!==t.e.button)){if(this.canvas){var e=this.canvas._activeObject;if(e&&e!==this)return}this.__lastSelected&&!this.__corner?(this.selected=!1,this.__lastSelected=!1,this.enterEditing(t.e),this.selectionStart===this.selectionEnd?this.initDelayedCursor(!0):this.renderCursorOrSelection()):this.selected=!0}},setCursorByClick:function(t){var e=this.getSelectionStartFromPointer(t),i=this.selectionStart,r=this.selectionEnd;t.shiftKey?this.setSelectionStartEndWithShift(i,r,e):(this.selectionStart=e,this.selectionEnd=e),this.isEditing&&(this._fireSelectionChanged(),this._updateTextarea())},getSelectionStartFromPointer:function(t){for(var e,i=this.getLocalPointer(t),r=0,n=0,s=0,o=0,a=0,c=0,h=this._textLines.length;cthis._text.length&&(a=this._text.length),a}}),fabric.util.object.extend(fabric.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=fabric.document.createElement("textarea"),this.hiddenTextarea.setAttribute("autocapitalize","off"),this.hiddenTextarea.setAttribute("autocorrect","off"),this.hiddenTextarea.setAttribute("autocomplete","off"),this.hiddenTextarea.setAttribute("spellcheck","false"),this.hiddenTextarea.setAttribute("data-fabric-hiddentextarea",""),this.hiddenTextarea.setAttribute("wrap","off");var t=this._calcTextareaPosition();this.hiddenTextarea.style.cssText="position: absolute; top: "+t.top+"; left: "+t.left+"; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; paddingï½°top: "+t.fontSize+";",this.hiddenTextareaContainer?this.hiddenTextareaContainer.appendChild(this.hiddenTextarea):fabric.document.body.appendChild(this.hiddenTextarea),fabric.util.addListener(this.hiddenTextarea,"keydown",this.onKeyDown.bind(this)),fabric.util.addListener(this.hiddenTextarea,"keyup",this.onKeyUp.bind(this)),fabric.util.addListener(this.hiddenTextarea,"input",this.onInput.bind(this)),fabric.util.addListener(this.hiddenTextarea,"copy",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"cut",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,"paste",this.paste.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionstart",this.onCompositionStart.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionupdate",this.onCompositionUpdate.bind(this)),fabric.util.addListener(this.hiddenTextarea,"compositionend",this.onCompositionEnd.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(fabric.util.addListener(this.canvas.upperCanvasEl,"click",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},keysMap:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorRight",36:"moveCursorLeft",37:"moveCursorLeft",38:"moveCursorUp",39:"moveCursorRight",40:"moveCursorDown"},keysMapRtl:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorLeft",36:"moveCursorRight",37:"moveCursorRight",38:"moveCursorUp",39:"moveCursorLeft",40:"moveCursorDown"},ctrlKeysMapUp:{67:"copy",88:"cut"},ctrlKeysMapDown:{65:"selectAll"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},onKeyDown:function(t){if(this.isEditing){var e="rtl"===this.direction?this.keysMapRtl:this.keysMap;if(t.keyCode in e)this[e[t.keyCode]](t);else{if(!(t.keyCode in this.ctrlKeysMapDown&&(t.ctrlKey||t.metaKey)))return;this[this.ctrlKeysMapDown[t.keyCode]](t)}t.stopImmediatePropagation(),t.preventDefault(),33<=t.keyCode&&t.keyCode<=40?(this.inCompositionMode=!1,this.clearContextTop(),this.renderCursorOrSelection()):this.canvas&&this.canvas.requestRenderAll()}},onKeyUp:function(t){!this.isEditing||this._copyDone||this.inCompositionMode?this._copyDone=!1:t.keyCode in this.ctrlKeysMapUp&&(t.ctrlKey||t.metaKey)&&(this[this.ctrlKeysMapUp[t.keyCode]](t),t.stopImmediatePropagation(),t.preventDefault(),this.canvas&&this.canvas.requestRenderAll())},onInput:function(t){var e=this.fromPaste;if(this.fromPaste=!1,t&&t.stopPropagation(),this.isEditing){var i,r,n,s,o,a=this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText,c=this._text.length,h=a.length,l=h-c,u=this.selectionStart,f=this.selectionEnd,d=u!==f;if(""===this.hiddenTextarea.value)return this.styles={},this.updateFromTextArea(),this.fire("changed"),void(this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll()));var g=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value),p=u>g.selectionStart;d?(i=this._text.slice(u,f),l+=f-u):h=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorUpOrDown("Down",t)},moveCursorUp:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorUpOrDown("Up",t)},_moveCursorUpOrDown:function(t,e){var i=this["get"+t+"CursorOffset"](e,"right"===this._selectionDirection);e.shiftKey?this.moveCursorWithShift(i):this.moveCursorWithoutShift(i),0!==i&&(this.setSelectionInBoundaries(),this.abortCursorAnimation(),this._currentCursorOpacity=1,this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorWithShift:function(t){var e="left"===this._selectionDirection?this.selectionStart+t:this.selectionEnd+t;return this.setSelectionStartEndWithShift(this.selectionStart,this.selectionEnd,e),0!==t},moveCursorWithoutShift:function(t){return t<0?(this.selectionStart+=t,this.selectionEnd=this.selectionStart):(this.selectionEnd+=t,this.selectionStart=this.selectionEnd),0!==t},moveCursorLeft:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorLeftOrRight("Left",t)},_move:function(t,e,i){var r;if(t.altKey)r=this["findWordBoundary"+i](this[e]);else{if(!t.metaKey&&35!==t.keyCode&&36!==t.keyCode)return this[e]+="Left"===i?-1:1,!0;r=this["findLineBoundary"+i](this[e])}if(void 0!==typeof r&&this[e]!==r)return this[e]=r,!0},_moveLeft:function(t,e){return this._move(t,e,"Left")},_moveRight:function(t,e){return this._move(t,e,"Right")},moveCursorLeftWithoutShift:function(t){var e=!0;return this._selectionDirection="left",this.selectionEnd===this.selectionStart&&0!==this.selectionStart&&(e=this._moveLeft(t,"selectionStart")),this.selectionEnd=this.selectionStart,e},moveCursorLeftWithShift:function(t){return"right"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveLeft(t,"selectionEnd"):0!==this.selectionStart?(this._selectionDirection="left",this._moveLeft(t,"selectionStart")):void 0},moveCursorRight:function(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorLeftOrRight("Right",t)},_moveCursorLeftOrRight:function(t,e){var i="moveCursor"+t+"With";this._currentCursorOpacity=1,e.shiftKey?i+="Shift":i+="outShift",this[i](e)&&(this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorRightWithShift:function(t){return"left"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveRight(t,"selectionStart"):this.selectionEnd!==this._text.length?(this._selectionDirection="right",this._moveRight(t,"selectionEnd")):void 0},moveCursorRightWithoutShift:function(t){var e=!0;return this._selectionDirection="right",this.selectionStart===this.selectionEnd?(e=this._moveRight(t,"selectionStart"),this.selectionEnd=this.selectionStart):this.selectionStart=this.selectionEnd,e},removeChars:function(t,e){void 0===e&&(e=t+1),this.removeStyleFromTo(t,e),this._text.splice(t,e-t),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()},insertChars:function(t,e,i,r){void 0===r&&(r=i),i",t.textSpans.join(""),"\n"]},_getSVGTextAndBg:function(t,e){var i,r=[],n=[],s=t;this._setSVGBg(n);for(var o=0,a=this._textLines.length;o",fabric.util.string.escapeXml(t),""].join("")},_setSVGTextLineText:function(t,e,i,r){var n,s,o,a,c,h=this.getHeightOfLine(e),l=-1!==this.textAlign.indexOf("justify"),u="",f=0,d=this._textLines[e];r+=h*(1-this._fontSizeFraction)/this.lineHeight;for(var g=0,p=d.length-1;g<=p;g++)c=g===p||this.charSpacing,u+=d[g],o=this.__charBounds[e][g],0===f?(i+=o.kernedWidth-o.width,f+=o.width):f+=o.kernedWidth,l&&!c&&this._reSpaceAndTab.test(d[g])&&(c=!0),c||(n=n||this.getCompleteStyleDeclaration(e,g),s=this.getCompleteStyleDeclaration(e,g+1),c=this._hasStyleChangedForSvg(n,s)),c&&(a=this._getStyleDeclaration(e,g)||{},t.push(this._createTextCharSpan(u,a,i,r)),u="",n=s,i+=f,f=0)},_pushTextBgRect:function(t,e,i,r,n,s){var o=fabric.Object.NUM_FRACTION_DIGITS;t.push("\t\t\n')},_setSVGTextLineBg:function(t,e,i,r){for(var n,s,o=this._textLines[e],a=this.getHeightOfLine(e)/this.lineHeight,c=0,h=0,l=this.getValueOfPropertyAt(e,0,"textBackgroundColor"),u=0,f=o.length;uthis.width&&this._set("width",this.dynamicMinWidth),-1!==this.textAlign.indexOf("justify")&&this.enlargeSpaces(),this.height=this.calcTextHeight(),this.saveState({propertySet:"_dimensionAffectingProps"}))},_generateStyleMap:function(t){for(var e=0,i=0,r=0,n={},s=0;sthis.dynamicMinWidth&&(this.dynamicMinWidth=g-v+r),o},isEndOfWrapping:function(t){return!this._styleMap[t+1]||this._styleMap[t+1].line!==this._styleMap[t].line},missingNewlineOffset:function(t){return this.splitByGrapheme?this.isEndOfWrapping(t)?1:0:1},_splitTextIntoLines:function(t){for(var e=b.Text.prototype._splitTextIntoLines.call(this,t),i=this._wrapText(e.lines,this.width),r=new Array(i.length),n=0;n Date: Sun, 19 Jun 2022 10:13:54 +0200 Subject: [PATCH 08/21] the build --- rollup.config.js | 12 ++++++------ scripts/index.js | 29 +++++++++++++++-------------- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index a41994b6243..87fea1d6bb1 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -9,11 +9,11 @@ export default { name: 'fabric', format: 'cjs', }, - // { - // file: './dist/fabric.min.js', - // format: 'iife', - // name: 'fabric', - // plugins: [terser()], - // }, + { + file: './dist/fabric.min.js', + format: 'iife', + name: 'fabric', + plugins: [terser()], + }, ], }; diff --git a/scripts/index.js b/scripts/index.js index 026cb979273..ebed2d8c7c3 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -53,15 +53,16 @@ class ICheckbox extends Checkbox { inquirer.registerPrompt('test-selection', ICheckbox); function build(options = {}) { - _.defaults(options, { exclude: ['gestures', 'accessors', 'erasing'] }); - const args = [ - `node`, - `build.js`, - `modules=${options.modules && options.modules.length > 0 ? options.modules.join(',') : 'ALL'}`, - `requirejs`, - `${options.fast ? 'fast' : ''}`, - `exclude=${options.exclude.join(',')}` - ] + // _.defaults(options, { exclude: ['gestures', 'accessors', 'erasing'] }); + // const args = [ + // `npm run`, + // `build.js`, + // `modules=${options.modules && options.modules.length > 0 ? options.modules.join(',') : 'ALL'}`, + // `requirejs`, + // `${options.fast ? 'fast' : ''}`, + // `exclude=${options.exclude.join(',')}` + // ] + const args = ['npm run', 'build-rollup']; cp.execSync(args.join(' '), { stdio: 'inherit', cwd: wd }); } @@ -141,9 +142,9 @@ function exportToWebsite(options) { } /** - * + * * @param {string[]} tests file paths - * @param {{debug?:boolean,recreate?:boolean,verbose?:boolean,filter?:boolean}} [options] + * @param {{debug?:boolean,recreate?:boolean,verbose?:boolean,filter?:boolean}} [options] */ function test(tests, options) { options = options || {}; @@ -193,9 +194,9 @@ function test(tests, options) { } /** - * + * * @param {'unit'|'visual'} type correspondes to the test directories - * @returns + * @returns */ function listTestFiles(type) { return fs.readdirSync(path.resolve(wd, './test', type)).filter(p => { @@ -363,4 +364,4 @@ website .option('-w, --watch') .action(exportToWebsite); -program.parse(process.argv); \ No newline at end of file +program.parse(process.argv); From 5fc125e3e22d378ec5e8f05a9c039ae46dd30434 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 19 Jun 2022 10:15:57 +0200 Subject: [PATCH 09/21] lint --- src/brushes/base_brush.class.js | 3 ++- src/mixins/shared_methods.mixin.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/brushes/base_brush.class.js b/src/brushes/base_brush.class.js index f740840edc2..eac06bb3bfe 100644 --- a/src/brushes/base_brush.class.js +++ b/src/brushes/base_brush.class.js @@ -137,7 +137,8 @@ * @private */ _isOutSideCanvas: function(pointer) { - return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); + return pointer.x < 0 || pointer.x > this.canvas.getWidth() || + pointer.y < 0 || pointer.y > this.canvas.getHeight(); } }); })(typeof exports !== 'undefined' ? exports : window); diff --git a/src/mixins/shared_methods.mixin.js b/src/mixins/shared_methods.mixin.js index 42b4f3613cc..12f5a270c3b 100644 --- a/src/mixins/shared_methods.mixin.js +++ b/src/mixins/shared_methods.mixin.js @@ -1,5 +1,5 @@ (function(global){ - var fabric = global.fabric; + var fabric = global.fabric; /** * @namespace fabric.CommonMethods */ From 476d6593a9af26e009a324e3d60c154d7f10b561 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 19 Jun 2022 11:29:00 +0200 Subject: [PATCH 10/21] add window? --- index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.js b/index.js index 8fef1d4b162..8f9b0e13a8f 100644 --- a/index.js +++ b/index.js @@ -97,6 +97,10 @@ import './src/mixins/default_controls.js'; // optional interaction // extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect // import './src/mixins/eraser_brush.mixin.js'; // optional erasing +if (typeof window !== 'undefined') { + window.fabric = fabric; +} + export { fabric, }; From b7e3028a5421cfb691e57685ee72283486c304e6 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 19 Jun 2022 22:21:41 +0200 Subject: [PATCH 11/21] working browser --- index.js | 5 ----- src/globalFabric.js | 6 ------ 2 files changed, 11 deletions(-) delete mode 100644 src/globalFabric.js diff --git a/index.js b/index.js index 8f9b0e13a8f..71a6bea184d 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,4 @@ import { fabric } from './HEADER.js'; -import './src/globalFabric.js'; // optional for global object. default OFF // import './lib/event.js'), // optional gestures import './src/mixins/observable.mixin.js'; import './src/mixins/collection.mixin.js'; @@ -100,7 +99,3 @@ import './src/mixins/default_controls.js'; // optional interaction if (typeof window !== 'undefined') { window.fabric = fabric; } - -export { - fabric, -}; diff --git a/src/globalFabric.js b/src/globalFabric.js deleted file mode 100644 index 3eb63d166b3..00000000000 --- a/src/globalFabric.js +++ /dev/null @@ -1,6 +0,0 @@ -(function(global) { - if (typeof document !== 'undefined' && typeof window !== 'undefined') { - // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) - global.fabric = fabric; - } -})(typeof exports !== 'undefined' ? exports : window); From fa8b7c08b5ba84a778ad7393917c4e19ae32ca36 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sun, 19 Jun 2022 22:56:18 +0200 Subject: [PATCH 12/21] that was a test --- testimports.js | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 testimports.js diff --git a/testimports.js b/testimports.js deleted file mode 100644 index 1eceaa65e8d..00000000000 --- a/testimports.js +++ /dev/null @@ -1,4 +0,0 @@ -var all = require('./dist/fabric.js'); - -const fabric = all.fabric; -console.log(fabric.version) From ea324d60a98b2cd50472250bf1c532a11aa8ec6c Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 09:38:55 +0200 Subject: [PATCH 13/21] Adding TS to rollup (#8019) --- .browserslistrc | 3 + index.js | 4 +- package-lock.json | 442 ++++++++++++++++++++++++++++++++++------------ package.json | 6 +- rollup.config.js | 8 +- src/constants.ts | 1 + src/typedefs.ts | 11 ++ src/util/cos.ts | 21 +++ src/util/index.ts | 1 + src/util/misc.js | 25 +-- tsconfig.json | 102 +++++++++++ 11 files changed, 480 insertions(+), 144 deletions(-) create mode 100644 .browserslistrc create mode 100644 src/constants.ts create mode 100644 src/typedefs.ts create mode 100644 src/util/cos.ts create mode 100644 src/util/index.ts create mode 100644 tsconfig.json diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 00000000000..ec07870a222 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +# Browsers that we support + +chrome >= 58 diff --git a/index.js b/index.js index 71a6bea184d..3ea83bbefe7 100644 --- a/index.js +++ b/index.js @@ -95,7 +95,9 @@ import './src/shapes/textbox.class.js'; // optional textbox import './src/mixins/default_controls.js'; // optional interaction // extends fabric.StaticCanvas, fabric.Canvas, fabric.Object, depends on fabric.PencilBrush and fabric.Rect // import './src/mixins/eraser_brush.mixin.js'; // optional erasing - +if (typeof exports !== 'undefined') { + exports.fabric = fabric; +} if (typeof window !== 'undefined') { window.fabric = fabric; } diff --git a/package-lock.json b/package-lock.json index c991acbf20d..e1a58f87f34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,28 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@ampproject/remapping": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", + "dev": true, + "requires": { + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "dependencies": { + "@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dev": true, + "requires": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + } + } + }, "@babel/code-frame": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", @@ -14,32 +36,32 @@ } }, "@babel/compat-data": { - "version": "7.16.4", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.4.tgz", - "integrity": "sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==", + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.5.tgz", + "integrity": "sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg==", "dev": true }, "@babel/core": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.7.tgz", - "integrity": "sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==", + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.5.tgz", + "integrity": "sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==", "dev": true, "requires": { + "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-compilation-targets": "^7.16.7", - "@babel/helper-module-transforms": "^7.16.7", - "@babel/helpers": "^7.16.7", - "@babel/parser": "^7.16.7", + "@babel/generator": "^7.18.2", + "@babel/helper-compilation-targets": "^7.18.2", + "@babel/helper-module-transforms": "^7.18.0", + "@babel/helpers": "^7.18.2", + "@babel/parser": "^7.18.5", "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7", + "@babel/traverse": "^7.18.5", + "@babel/types": "^7.18.4", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", - "json5": "^2.1.2", - "semver": "^6.3.0", - "source-map": "^0.5.0" + "json5": "^2.2.1", + "semver": "^6.3.0" }, "dependencies": { "semver": { @@ -47,43 +69,29 @@ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true } } }, "@babel/generator": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz", - "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.2.tgz", + "integrity": "sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==", "dev": true, "requires": { - "@babel/types": "^7.16.7", - "jsesc": "^2.5.1", - "source-map": "^0.5.0" - }, - "dependencies": { - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - } + "@babel/types": "^7.18.2", + "@jridgewell/gen-mapping": "^0.3.0", + "jsesc": "^2.5.1" } }, "@babel/helper-compilation-targets": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz", - "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz", + "integrity": "sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==", "dev": true, "requires": { - "@babel/compat-data": "^7.16.4", + "@babel/compat-data": "^7.17.10", "@babel/helper-validator-option": "^7.16.7", - "browserslist": "^4.17.5", + "browserslist": "^4.20.2", "semver": "^6.3.0" }, "dependencies": { @@ -96,32 +104,19 @@ } }, "@babel/helper-environment-visitor": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz", - "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7" - } + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz", + "integrity": "sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==", + "dev": true }, "@babel/helper-function-name": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz", - "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==", + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz", + "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==", "dev": true, "requires": { - "@babel/helper-get-function-arity": "^7.16.7", "@babel/template": "^7.16.7", - "@babel/types": "^7.16.7" - } - }, - "@babel/helper-get-function-arity": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz", - "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7" + "@babel/types": "^7.17.0" } }, "@babel/helper-hoist-variables": { @@ -143,28 +138,28 @@ } }, "@babel/helper-module-transforms": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz", - "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==", + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz", + "integrity": "sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==", "dev": true, "requires": { "@babel/helper-environment-visitor": "^7.16.7", "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-simple-access": "^7.16.7", + "@babel/helper-simple-access": "^7.17.7", "@babel/helper-split-export-declaration": "^7.16.7", "@babel/helper-validator-identifier": "^7.16.7", "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" + "@babel/traverse": "^7.18.0", + "@babel/types": "^7.18.0" } }, "@babel/helper-simple-access": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz", - "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz", + "integrity": "sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==", "dev": true, "requires": { - "@babel/types": "^7.16.7" + "@babel/types": "^7.18.2" } }, "@babel/helper-split-export-declaration": { @@ -189,14 +184,14 @@ "dev": true }, "@babel/helpers": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz", - "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.2.tgz", + "integrity": "sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==", "dev": true, "requires": { "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" + "@babel/traverse": "^7.18.2", + "@babel/types": "^7.18.2" } }, "@babel/highlight": { @@ -219,9 +214,9 @@ } }, "@babel/parser": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz", - "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==", + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz", + "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==", "dev": true }, "@babel/template": { @@ -236,27 +231,27 @@ } }, "@babel/traverse": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz", - "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==", + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.5.tgz", + "integrity": "sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==", "dev": true, "requires": { "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-function-name": "^7.16.7", + "@babel/generator": "^7.18.2", + "@babel/helper-environment-visitor": "^7.18.2", + "@babel/helper-function-name": "^7.17.9", "@babel/helper-hoist-variables": "^7.16.7", "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/types": "^7.16.7", + "@babel/parser": "^7.18.5", + "@babel/types": "^7.18.4", "debug": "^4.1.0", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", + "version": "7.18.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.4.tgz", + "integrity": "sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==", "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.16.7", @@ -356,6 +351,12 @@ "tar": "^6.1.11" } }, + "@mdn/browser-compat-data": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-4.2.1.tgz", + "integrity": "sha512-EWUguj2kd7ldmrF9F+vI5hUOralPd+sdsUnYbRy33vZTuZkduC1shE9TtEMEjAQwyfyMb4ole5KtjF8MsnQOlA==", + "dev": true + }, "@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -401,6 +402,30 @@ "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==", "dev": true }, + "@types/object-path": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@types/object-path/-/object-path-0.11.1.tgz", + "integrity": "sha512-219LSCO9HPcoXcRTC6DbCs0FRhZgBnEMzf16RRqkT40WbkKx3mOeQuz3e2XqbfhOz/AHfbru0kzB1n1RCAsIIg==", + "dev": true + }, + "@types/semver": { + "version": "7.3.10", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.10.tgz", + "integrity": "sha512-zsv3fsC7S84NN6nPK06u79oWgrPVd0NvOyqgghV1haPaFcVxIrP4DLomRwGAXk0ui4HZA7mOcSFL98sMVW9viw==", + "dev": true + }, + "@types/ua-parser-js": { + "version": "0.7.36", + "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz", + "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==", + "dev": true + }, + "@wessberg/stringutil": { + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/@wessberg/stringutil/-/stringutil-1.0.19.tgz", + "integrity": "sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==", + "dev": true + }, "@xmldom/xmldom": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz", @@ -512,6 +537,12 @@ "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=", "dev": true }, + "ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "dev": true + }, "ansi-escape": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/ansi-escape/-/ansi-escape-1.1.0.tgz", @@ -802,16 +833,57 @@ "optional": true }, "browserslist": { - "version": "4.19.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz", - "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.0.tgz", + "integrity": "sha512-UQxE0DIhRB5z/zDz9iA03BOfxaN2+GQdBYH/2WrSIWEUrnpzTPJbhqt+umq6r3acaPRTW1FNTkrcp0PXgtFkvA==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001286", - "electron-to-chromium": "^1.4.17", - "escalade": "^3.1.1", - "node-releases": "^2.0.1", - "picocolors": "^1.0.0" + "caniuse-lite": "^1.0.30001358", + "electron-to-chromium": "^1.4.164", + "node-releases": "^2.0.5", + "update-browserslist-db": "^1.0.0" + } + }, + "browserslist-generator": { + "version": "1.0.66", + "resolved": "https://registry.npmjs.org/browserslist-generator/-/browserslist-generator-1.0.66.tgz", + "integrity": "sha512-aFDax4Qzh29DdyhHQBD2Yu2L5OvaDnvYFMbmpLrLwwaNK4H6dHEhC/Nxv93/+mfAA+a/t94ln0P2JZvHO6LZDA==", + "dev": true, + "requires": { + "@mdn/browser-compat-data": "^4.1.16", + "@types/object-path": "^0.11.1", + "@types/semver": "^7.3.9", + "@types/ua-parser-js": "^0.7.36", + "browserslist": "4.20.2", + "caniuse-lite": "^1.0.30001328", + "isbot": "3.4.5", + "object-path": "^0.11.8", + "semver": "^7.3.7", + "ua-parser-js": "^1.0.2" + }, + "dependencies": { + "browserslist": { + "version": "4.20.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.2.tgz", + "integrity": "sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30001317", + "electron-to-chromium": "^1.4.84", + "escalade": "^3.1.1", + "node-releases": "^2.0.2", + "picocolors": "^1.0.0" + } + }, + "semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } } }, "buffer": { @@ -870,9 +942,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001298", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001298.tgz", - "integrity": "sha512-AcKqikjMLlvghZL/vfTHorlQsLDhGRalYf1+GmWCf5SCMziSGjRYQW/JEksj14NaYHIR6KIhrFAy0HV5C25UzQ==", + "version": "1.0.30001358", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001358.tgz", + "integrity": "sha512-hvp8PSRymk85R20bsDra7ZTCpSVGN/PAz9pSAjPSjKC+rNmnUk5vCRgJwiTT/O4feQ/yu/drvZYpKxxhbFuChw==", "dev": true }, "canvas": { @@ -1022,6 +1094,15 @@ "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", "dev": true }, + "compatfactory": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/compatfactory/-/compatfactory-1.0.1.tgz", + "integrity": "sha512-hR9u0HSZTKDNNchPtMHg6myeNx0XO+av7UZIJPsi4rPALJBHi/W5Mbwi19hC/xm6y3JkYpxVYjTqnSGsU5X/iw==", + "dev": true, + "requires": { + "helpertypes": "^0.0.18" + } + }, "component-emitter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", @@ -1227,6 +1308,23 @@ } } }, + "crosspath": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/crosspath/-/crosspath-2.0.0.tgz", + "integrity": "sha512-ju88BYCQ2uvjO2bR+SsgLSTwTSctU+6Vp2ePbKPgSCZyy4MWZxYsT738DlKVRE5utUjobjPRm1MkTYKJxCmpTA==", + "dev": true, + "requires": { + "@types/node": "^17.0.36" + }, + "dependencies": { + "@types/node": { + "version": "17.0.45", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz", + "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==", + "dev": true + } + } + }, "cssom": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", @@ -1408,9 +1506,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.38", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.38.tgz", - "integrity": "sha512-WhHt3sZazKj0KK/UpgsbGQnUUoFeAHVishzHFExMxagpZgjiGYSC9S0ZlbhCfSH2L2i+2A1yyqOIliTctMx7KQ==", + "version": "1.4.165", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.165.tgz", + "integrity": "sha512-DKQW1lqUSAYQvn9dnpK7mWaDpWbNOXQLXhfCi7Iwx0BKxdZOxkKcCyKw1l3ihWWW5iWSxKKbhEUoNRoHvl/hbA==", "dev": true }, "emoji-regex": { @@ -2331,6 +2429,12 @@ "type-fest": "^0.8.0" } }, + "helpertypes": { + "version": "0.0.18", + "resolved": "https://registry.npmjs.org/helpertypes/-/helpertypes-0.0.18.tgz", + "integrity": "sha512-XRhfbSEmR+poXUC5/8AbmYNJb2riOT6qPzjGJZr0S9YedHiaY+/tzPYzWMUclYMEdCYo/1l8PDYrQFCj02v97w==", + "dev": true + }, "html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -2756,6 +2860,12 @@ "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true }, + "isbot": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/isbot/-/isbot-3.4.5.tgz", + "integrity": "sha512-+KD6q1BBtw0iK9aGBGSfxJ31/ZgizKRjhm8ebgJUBMx0aeeQuIJ1I72beCoIrltIZGrSm4vmrxRxrG5n1aUTtw==", + "dev": true + }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -3023,13 +3133,10 @@ "dev": true }, "json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, - "requires": { - "minimist": "^1.2.5" - } + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", + "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "dev": true }, "jsonfile": { "version": "6.1.0", @@ -3231,6 +3338,15 @@ "yallist": "^4.0.0" } }, + "magic-string": { + "version": "0.26.2", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz", + "integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.8" + } + }, "make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -3442,9 +3558,9 @@ } }, "node-releases": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", - "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz", + "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==", "dev": true }, "node-watch": { @@ -3551,6 +3667,12 @@ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, + "object-path": { + "version": "0.11.8", + "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.8.tgz", + "integrity": "sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==", + "dev": true + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -3774,6 +3896,12 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true + }, "pixelmatch": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz", @@ -4035,6 +4163,48 @@ "terser": "^5.0.0" } }, + "rollup-plugin-ts": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-ts/-/rollup-plugin-ts-3.0.2.tgz", + "integrity": "sha512-67qi2QTHewhLyKDG6fX3jpohWpmUPPIT/xJ7rsYK46X6MqmoWy64Ti0y8ygPfLv8mXDCdRZUofM3mTxDfCswRA==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^4.2.1", + "@wessberg/stringutil": "^1.0.19", + "ansi-colors": "^4.1.3", + "browserslist": "^4.20.4", + "browserslist-generator": "^1.0.66", + "compatfactory": "^1.0.1", + "crosspath": "^2.0.0", + "magic-string": "^0.26.2", + "ts-clone-node": "^1.0.0", + "tslib": "^2.4.0" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "requires": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + } + }, + "estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", + "dev": true + } + } + }, "run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", @@ -4276,6 +4446,12 @@ "source-map": "^0.6.0" } }, + "sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true + }, "spawn-args": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/spawn-args/-/spawn-args-0.2.0.tgz", @@ -4717,7 +4893,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", "dev": true }, "toidentifier": { @@ -4742,6 +4918,15 @@ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" }, + "ts-clone-node": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ts-clone-node/-/ts-clone-node-1.0.0.tgz", + "integrity": "sha512-/cDYbr2HAXxFNeTT41c/xs/2bhLJjqnYheHsmA3AoHSt+n4JA4t0FL9Lk5O8kWnJ6jeB3kPcUoXIFtwERNzv6Q==", + "dev": true, + "requires": { + "compatfactory": "^1.0.1" + } + }, "tslib": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", @@ -4787,11 +4972,24 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "4.7.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", + "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", + "dev": true + }, + "ua-parser-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz", + "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==", + "dev": true + }, "uglify-js": { "version": "3.15.5", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.5.tgz", "integrity": "sha512-hNM5q5GbBRB5xB+PMqVRcgYe4c8jbyZ1pzZhS6jbq54/4F2gFK869ZheiE5A8/t+W5jtTNpWef/5Q9zk639FNQ==", - "dev": true + "dev": true, + "optional": true }, "underscore": { "version": "1.13.2", @@ -4811,6 +5009,16 @@ "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", "dev": true }, + "update-browserslist-db": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.3.tgz", + "integrity": "sha512-ufSazemeh9Gty0qiWtoRpJ9F5Q5W3xdIPm1UZQqYQv/q0Nyb9EMHUB2lu+O9x1re9WsorpMAUu4Y6Lxcs5n+XQ==", + "dev": true, + "requires": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 6f2bacb8682..9b89eb6e236 100644 --- a/package.json +++ b/package.json @@ -86,11 +86,13 @@ "qunit": "^2.17.2", "rollup": "^2.75.6", "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-ts": "^3.0.2", "testem": "^3.2.0", - "uglify-js": "^3.15.5" + "typescript": "^4.7.4" }, "engines": { "node": ">=14.0.0" }, - "main": "./dist/fabric.js" + "main": "./dist/fabric.js", + "dependencies": {} } diff --git a/rollup.config.js b/rollup.config.js index 87fea1d6bb1..861852fb708 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,4 +1,5 @@ import { terser } from 'rollup-plugin-terser'; +import ts from "rollup-plugin-ts"; // rollup.config.js export default { @@ -11,9 +12,14 @@ export default { }, { file: './dist/fabric.min.js', - format: 'iife', + format: 'cjs', name: 'fabric', plugins: [terser()], }, ], + plugins: [ + ts({ + /* Plugin options */ + }) + ] }; diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 00000000000..702666d4980 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1 @@ +export const halfPI = Math.PI / 2; diff --git a/src/typedefs.ts b/src/typedefs.ts new file mode 100644 index 00000000000..c2ad6c0ac00 --- /dev/null +++ b/src/typedefs.ts @@ -0,0 +1,11 @@ +interface NominalTag { + 'nominalTag': T; +} + +type Nominal = NominalTag & Type; + +const enum Degree {} +const enum Radian {} + +export type TDegree = Nominal; +export type TRadian = Nominal; diff --git a/src/util/cos.ts b/src/util/cos.ts new file mode 100644 index 00000000000..1c19454681e --- /dev/null +++ b/src/util/cos.ts @@ -0,0 +1,21 @@ +import type { TRadian } from '../typedefs'; +import { halfPI } from '../constants'; + +/** + * Calculate the cos of an angle, avoiding returning floats for known results + * This function is here just to avoid getting 0.999999999999999 when dealing + * with numbers that are really 1 or 0. + * @static + * @memberOf fabric.util + * @param {TRadian} angle the angle + * @return {Number} the cosin value for angle. + */ +export const cos = (angle: TRadian): number => { + if (angle === 0) { return 1; } + var angleSlice = Math.abs(angle) / halfPI; + switch (angleSlice) { + case 1: case 3: return 0; + case 2: return -1; + } + return Math.cos(angle); +}; diff --git a/src/util/index.ts b/src/util/index.ts new file mode 100644 index 00000000000..857114098f1 --- /dev/null +++ b/src/util/index.ts @@ -0,0 +1 @@ +export * from './cos'; diff --git a/src/util/misc.js b/src/util/misc.js index c59a3b1d051..df185a2a202 100644 --- a/src/util/misc.js +++ b/src/util/misc.js @@ -1,5 +1,5 @@ +import { cos } from './index.ts'; (function(global) { - var fabric = global.fabric, sqrt = Math.sqrt, atan2 = Math.atan2, pow = Math.pow, @@ -14,28 +14,6 @@ * @namespace fabric.util */ fabric.util = { - - /** - * Calculate the cos of an angle, avoiding returning floats for known results - * @static - * @memberOf fabric.util - * @param {Number} angle the angle in radians or in degree - * @return {Number} - */ - cos: function(angle) { - if (angle === 0) { return 1; } - if (angle < 0) { - // cos(a) = cos(-a) - angle = -angle; - } - var angleSlice = angle / PiBy2; - switch (angleSlice) { - case 1: case 3: return 0; - case 2: return -1; - } - return Math.cos(angle); - }, - /** * Calculate the sin of an angle, avoiding returning floats for known results * @static @@ -1198,5 +1176,6 @@ } return new fabric.Group([a], { clipPath: b, inverted: inverted }); }, + cos: cos, }; })(typeof exports !== 'undefined' ? exports : window); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000000..1696187d545 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,102 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig.json to read more about this file */ + + /* Projects */ + // "incremental": true, /* Enable incremental compilation */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ + // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + + /* Modules */ + "module": "es2022", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "resolveJsonModule": true, /* Enable importing .json files */ + // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ + + /* Emit */ + "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ + "noEmitOnError": false, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": false, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ + // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ + // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + }, + "include": ["src"] +} From d97209fb795872d9e9045eeb6adbbedaef7b2740 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 11:09:30 +0200 Subject: [PATCH 14/21] first conflicts --- src/mixins/itext_key_behavior.mixin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins/itext_key_behavior.mixin.js b/src/mixins/itext_key_behavior.mixin.js index f999326296b..bf55acff5f4 100644 --- a/src/mixins/itext_key_behavior.mixin.js +++ b/src/mixins/itext_key_behavior.mixin.js @@ -530,7 +530,7 @@ this[prop] += direction === 'Left' ? -1 : 1; return true; } - if (typeof newValue !== undefined && this[prop] !== newValue) { + if (typeof newValue !== 'undefined' && this[prop] !== newValue) { this[prop] = newValue; return true; } From 2af0c08507fba9d004b996428969464fc5b39528 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 20:41:01 +0200 Subject: [PATCH 15/21] ci(): Add linting (#8024) --- .eslintrc.cjs | 16 + .eslintrc.json | 13 + .eslintrc_tests | 12 + package-lock.json | 1270 +++++++++++++++++------------- package.json | 8 +- src/util/cos.ts | 2 +- src/util/dom_style.js | 3 +- test/unit/animation.js | 2 +- test/unit/canvas.js | 3 +- test/unit/canvas_events.js | 3 +- test/unit/collection.js | 24 +- test/unit/group.js | 2 +- test/unit/image.js | 2 +- test/unit/path.js | 4 +- test/unit/pattern.js | 8 +- test/visual/control_rendering.js | 32 +- test/visual/freedraw.js | 34 +- test/visual/group_layout.js | 24 +- test/visual/text.js | 2 +- 19 files changed, 854 insertions(+), 610 deletions(-) create mode 100644 .eslintrc.cjs diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 00000000000..b1da14cee1b --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,16 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + plugins: [ + '@typescript-eslint', + ], + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + ], + overrides: [ + { + files: ['**/*.ts'], + } + ], +}; diff --git a/.eslintrc.json b/.eslintrc.json index f3d848c6348..32f5084f202 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,7 +14,20 @@ "QUnit": true, "assert": true }, + "overrides": [ + { + "files": ["**/*.js"] + } + ], + "parserOptions": { + "sourceType": "module" + }, "rules": { + "@typescript-eslint/no-empty-function": 0, + "@typescript-eslint/no-this-alias": 0, + "@typescript-eslint/no-extra-semi": 0, + "no-prototype-builtins": 0, + "no-redeclare": 0, "semi": 2, "eqeqeq": 2, "no-eq-null": 2, diff --git a/.eslintrc_tests b/.eslintrc_tests index 39d48ab8d90..6249f7a7c2d 100644 --- a/.eslintrc_tests +++ b/.eslintrc_tests @@ -10,6 +10,18 @@ "pixelmatch": true }, "rules": { + /* new rules, unify test and src lint */ + "no-useless-escape": 0, + "@typescript-eslint/no-empty-function": 0, + "no-mixed-spaces-and-tabs": 0, + "@typescript-eslint/no-extra-semi": 0, + "no-redeclare": 0, + "@typescript-eslint/no-unused-vars": 0, + "no-setter-return": 0, + "@typescript-eslint/no-this-alias": 0, + "@typescript-eslint/no-var-requires": 0, + "@typescript-eslint/no-loss-of-precision": 0, + /* end of new rules */ "eqeqeq": 0, "no-eq-null": 2, "no-eval": 2, diff --git a/package-lock.json b/package-lock.json index e1a58f87f34..c551dbb4bfd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -258,6 +258,81 @@ "to-fast-properties": "^2.0.0" } }, + "@eslint/eslintrc": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", + "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==", + "dev": true, + "requires": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^9.3.2", + "globals": "^13.15.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "dependencies": { + "argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "globals": { + "version": "13.15.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz", + "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==", + "dev": true, + "requires": { + "type-fest": "^0.20.2" + } + }, + "js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "requires": { + "argparse": "^2.0.1" + } + }, + "minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true + } + } + }, + "@humanwhocodes/config-array": { + "version": "0.9.5", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", + "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==", + "dev": true, + "requires": { + "@humanwhocodes/object-schema": "^1.2.1", + "debug": "^4.1.1", + "minimatch": "^3.0.4" + } + }, + "@humanwhocodes/object-schema": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", + "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", + "dev": true + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -357,6 +432,32 @@ "integrity": "sha512-EWUguj2kd7ldmrF9F+vI5hUOralPd+sdsUnYbRy33vZTuZkduC1shE9TtEMEjAQwyfyMb4ole5KtjF8MsnQOlA==", "dev": true }, + "@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "requires": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + } + }, + "@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true + }, + "@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "requires": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + } + }, "@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -390,6 +491,12 @@ "@types/node": "*" } }, + "@types/json-schema": { + "version": "7.0.11", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", + "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", + "dev": true + }, "@types/lodash": { "version": "4.14.180", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.180.tgz", @@ -420,6 +527,163 @@ "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==", "dev": true }, + "@typescript-eslint/eslint-plugin": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.29.0.tgz", + "integrity": "sha512-kgTsISt9pM53yRFQmLZ4npj99yGl3x3Pl7z4eA66OuTzAGC4bQB5H5fuLwPnqTKU3yyrrg4MIhjF17UYnL4c0w==", + "dev": true, + "requires": { + "@typescript-eslint/scope-manager": "5.29.0", + "@typescript-eslint/type-utils": "5.29.0", + "@typescript-eslint/utils": "5.29.0", + "debug": "^4.3.4", + "functional-red-black-tree": "^1.0.1", + "ignore": "^5.2.0", + "regexpp": "^3.2.0", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "dependencies": { + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + }, + "semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, + "@typescript-eslint/parser": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.29.0.tgz", + "integrity": "sha512-ruKWTv+x0OOxbzIw9nW5oWlUopvP/IQDjB5ZqmTglLIoDTctLlAJpAQFpNPJP/ZI7hTT9sARBosEfaKbcFuECw==", + "dev": true, + "requires": { + "@typescript-eslint/scope-manager": "5.29.0", + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/typescript-estree": "5.29.0", + "debug": "^4.3.4" + }, + "dependencies": { + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + } + } + }, + "@typescript-eslint/scope-manager": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.29.0.tgz", + "integrity": "sha512-etbXUT0FygFi2ihcxDZjz21LtC+Eps9V2xVx09zFoN44RRHPrkMflidGMI+2dUs821zR1tDS6Oc9IXxIjOUZwA==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/visitor-keys": "5.29.0" + } + }, + "@typescript-eslint/type-utils": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.29.0.tgz", + "integrity": "sha512-JK6bAaaiJozbox3K220VRfCzLa9n0ib/J+FHIwnaV3Enw/TO267qe0pM1b1QrrEuy6xun374XEAsRlA86JJnyg==", + "dev": true, + "requires": { + "@typescript-eslint/utils": "5.29.0", + "debug": "^4.3.4", + "tsutils": "^3.21.0" + }, + "dependencies": { + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + } + } + }, + "@typescript-eslint/types": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.29.0.tgz", + "integrity": "sha512-X99VbqvAXOMdVyfFmksMy3u8p8yoRGITgU1joBJPzeYa0rhdf5ok9S56/itRoUSh99fiDoMtarSIJXo7H/SnOg==", + "dev": true + }, + "@typescript-eslint/typescript-estree": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.29.0.tgz", + "integrity": "sha512-mQvSUJ/JjGBdvo+1LwC+GY2XmSYjK1nAaVw2emp/E61wEVYEyibRHCqm1I1vEKbXCpUKuW4G7u9ZCaZhJbLoNQ==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/visitor-keys": "5.29.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "dependencies": { + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + }, + "semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, + "@typescript-eslint/utils": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.29.0.tgz", + "integrity": "sha512-3Eos6uP1nyLOBayc/VUdKZikV90HahXE5Dx9L5YlSd/7ylQPXhLk1BYb29SDgnBnTp+jmSZUU0QxUiyHgW4p7A==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.9", + "@typescript-eslint/scope-manager": "5.29.0", + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/typescript-estree": "5.29.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.29.0.tgz", + "integrity": "sha512-Hpb/mCWsjILvikMQoZIE3voc9wtQcS0A9FUw3h8bhr9UxBdtI/tw1ZDZUOXHXLOVMedKCH5NxyzATwnU78bWCQ==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.29.0", + "eslint-visitor-keys": "^3.3.0" + } + }, "@wessberg/stringutil": { "version": "1.0.19", "resolved": "https://registry.npmjs.org/@wessberg/stringutil/-/stringutil-1.0.19.tgz", @@ -478,21 +742,10 @@ } }, "acorn-jsx": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz", - "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=", - "dev": true, - "requires": { - "acorn": "^3.0.4" - }, - "dependencies": { - "acorn": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", - "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=", - "dev": true - } - } + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true }, "acorn-walk": { "version": "7.2.0", @@ -520,23 +773,17 @@ } }, "ajv": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", - "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "requires": { - "co": "^4.6.0", - "fast-deep-equal": "^1.0.0", + "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.3.0" + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" } }, - "ajv-keywords": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz", - "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=", - "dev": true - }, "ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -626,6 +873,12 @@ "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", "dev": true }, + "array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true + }, "async": { "version": "0.2.10", "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", @@ -665,59 +918,6 @@ } } }, - "babel-code-frame": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", - "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", - "dev": true, - "requires": { - "chalk": "^1.1.3", - "esutils": "^2.0.2", - "js-tokens": "^3.0.2" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - }, "backbone": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.4.0.tgz", @@ -826,6 +1026,15 @@ "concat-map": "0.0.1" } }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "requires": { + "fill-range": "^7.0.1" + } + }, "browser-process-hrtime": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", @@ -920,19 +1129,10 @@ "write-file-atomic": "^3.0.0" } }, - "caller-path": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz", - "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=", - "dev": true, - "requires": { - "callsites": "^0.2.0" - } - }, "callsites": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz", - "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", "dev": true }, "camelcase": { @@ -990,12 +1190,6 @@ "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", "optional": true }, - "circular-json": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz", - "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==", - "dev": true - }, "clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -1040,12 +1234,6 @@ "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", "dev": true }, - "co": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", - "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", - "dev": true - }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -1161,50 +1349,6 @@ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, - "concat-stream": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", - "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", - "dev": true, - "requires": { - "buffer-from": "^1.0.0", - "inherits": "^2.0.3", - "readable-stream": "^2.2.2", - "typedarray": "^0.0.6" - }, - "dependencies": { - "readable-stream": { - "version": "2.3.7", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", - "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", - "dev": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true - }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.0" - } - } - } - }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", @@ -1280,31 +1424,39 @@ } }, "cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", "dev": true, "requires": { - "lru-cache": "^4.0.1", - "shebang-command": "^1.2.0", - "which": "^1.2.9" + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" }, "dependencies": { - "lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", "dev": true, "requires": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" + "shebang-regex": "^3.0.0" } }, - "yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } } } }, @@ -1473,10 +1625,19 @@ "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "optional": true }, + "dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "requires": { + "path-type": "^4.0.0" + } + }, "doctrine": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", - "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", "dev": true, "requires": { "esutils": "^2.0.2" @@ -1604,223 +1765,209 @@ } }, "eslint": { - "version": "4.18.2", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.18.2.tgz", - "integrity": "sha512-qy4i3wODqKMYfz9LUI8N2qYDkHkoieTbiHpMrYUI/WbjhXJQr7lI4VngixTgaG+yHX+NBCv7nW4hA0ShbvaNKw==", - "dev": true, - "requires": { - "ajv": "^5.3.0", - "babel-code-frame": "^6.22.0", - "chalk": "^2.1.0", - "concat-stream": "^1.6.0", - "cross-spawn": "^5.1.0", - "debug": "^3.1.0", - "doctrine": "^2.1.0", - "eslint-scope": "^3.7.1", - "eslint-visitor-keys": "^1.0.0", - "espree": "^3.5.2", - "esquery": "^1.0.0", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz", + "integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==", + "dev": true, + "requires": { + "@eslint/eslintrc": "^1.3.0", + "@humanwhocodes/config-array": "^0.9.2", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.1.1", + "eslint-utils": "^3.0.0", + "eslint-visitor-keys": "^3.3.0", + "espree": "^9.3.2", + "esquery": "^1.4.0", "esutils": "^2.0.2", - "file-entry-cache": "^2.0.0", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", "functional-red-black-tree": "^1.0.1", - "glob": "^7.1.2", - "globals": "^11.0.1", - "ignore": "^3.3.3", + "glob-parent": "^6.0.1", + "globals": "^13.15.0", + "ignore": "^5.2.0", + "import-fresh": "^3.0.0", "imurmurhash": "^0.1.4", - "inquirer": "^3.0.6", - "is-resolvable": "^1.0.0", - "js-yaml": "^3.9.1", + "is-glob": "^4.0.0", + "js-yaml": "^4.1.0", "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.3.0", - "lodash": "^4.17.4", - "minimatch": "^3.0.2", - "mkdirp": "^0.5.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", "natural-compare": "^1.4.0", - "optionator": "^0.8.2", - "path-is-inside": "^1.0.2", - "pluralize": "^7.0.0", - "progress": "^2.0.0", - "require-uncached": "^1.0.3", - "semver": "^5.3.0", - "strip-ansi": "^4.0.0", - "strip-json-comments": "~2.0.1", - "table": "4.0.2", - "text-table": "~0.2.0" + "optionator": "^0.9.1", + "regexpp": "^3.2.0", + "strip-ansi": "^6.0.1", + "strip-json-comments": "^3.1.0", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" }, "dependencies": { - "ansi-escapes": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", - "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", - "dev": true - }, - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, - "chardet": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", - "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", - "dev": true - }, - "cli-cursor": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", - "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "requires": { - "restore-cursor": "^2.0.0" + "color-convert": "^2.0.1" } }, - "cli-width": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", - "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", + "argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, - "debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "requires": { - "ms": "^2.1.1" + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" } }, - "external-editor": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", - "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "requires": { - "chardet": "^0.4.0", - "iconv-lite": "^0.4.17", - "tmp": "^0.0.33" + "color-name": "~1.1.4" } }, - "figures": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", - "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true + }, + "eslint-scope": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", + "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==", "dev": true, "requires": { - "escape-string-regexp": "^1.0.5" + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" } }, - "iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", "dev": true, "requires": { - "safer-buffer": ">= 2.1.2 < 3" + "is-glob": "^4.0.3" } }, - "inquirer": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", - "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==", + "globals": { + "version": "13.15.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz", + "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==", "dev": true, "requires": { - "ansi-escapes": "^3.0.0", - "chalk": "^2.0.0", - "cli-cursor": "^2.1.0", - "cli-width": "^2.0.0", - "external-editor": "^2.0.4", - "figures": "^2.0.0", - "lodash": "^4.3.0", - "mute-stream": "0.0.7", - "run-async": "^2.2.0", - "rx-lite": "^4.0.8", - "rx-lite-aggregates": "^4.0.8", - "string-width": "^2.1.0", - "strip-ansi": "^4.0.0", - "through": "^2.3.6" + "type-fest": "^0.20.2" } }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "mimic-fn": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", - "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, - "mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", + "js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, "requires": { - "minimist": "^1.2.5" + "argparse": "^2.0.1" } }, - "mute-stream": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", - "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", - "dev": true - }, - "onetime": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", - "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=", + "levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", "dev": true, "requires": { - "mimic-fn": "^1.0.0" + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" } }, - "restore-cursor": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", - "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=", + "minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "optionator": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", + "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", "dev": true, "requires": { - "onetime": "^2.0.0", - "signal-exit": "^3.0.2" + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.3" } }, - "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, - "string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, "requires": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" + "has-flag": "^4.0.0" } }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", "dev": true, "requires": { - "ansi-regex": "^3.0.0" + "prelude-ls": "^1.2.1" } + }, + "type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true } } }, "eslint-scope": { - "version": "3.7.3", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.3.tgz", - "integrity": "sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", "dev": true, "requires": { - "esrecurse": "^4.1.0", + "esrecurse": "^4.3.0", "estraverse": "^4.1.1" }, "dependencies": { @@ -1832,26 +1979,44 @@ } } }, + "eslint-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", + "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^2.0.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", + "dev": true + } + } + }, "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz", + "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==", "dev": true }, "espree": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz", - "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==", + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz", + "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==", "dev": true, "requires": { - "acorn": "^5.5.0", - "acorn-jsx": "^3.0.0" + "acorn": "^8.7.1", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.3.0" }, "dependencies": { "acorn": { - "version": "5.7.4", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz", - "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==", + "version": "8.7.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", + "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==", "dev": true } } @@ -2033,11 +2198,24 @@ } }, "fast-deep-equal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", - "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "fast-glob": { + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", + "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", + "dev": true, + "requires": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + } + }, "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -2049,6 +2227,15 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, + "fastq": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", + "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==", + "dev": true, + "requires": { + "reusify": "^1.0.4" + } + }, "figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -2059,13 +2246,21 @@ } }, "file-entry-cache": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz", - "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, + "requires": { + "flat-cache": "^3.0.4" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "dev": true, "requires": { - "flat-cache": "^1.2.1", - "object-assign": "^4.0.1" + "to-regex-range": "^5.0.1" } }, "finalhandler": { @@ -2135,28 +2330,21 @@ } }, "flat-cache": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz", - "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", + "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", "dev": true, "requires": { - "circular-json": "^0.3.1", - "graceful-fs": "^4.1.2", - "rimraf": "~2.6.2", - "write": "^0.2.1" - }, - "dependencies": { - "rimraf": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", - "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", - "dev": true, - "requires": { - "glob": "^7.1.3" - } - } + "flatted": "^3.1.0", + "rimraf": "^3.0.2" } }, + "flatted": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz", + "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", + "dev": true + }, "follow-redirects": { "version": "1.14.8", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz", @@ -2282,7 +2470,7 @@ "functional-red-black-tree": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", - "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", + "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==", "dev": true }, "fuzzy": { @@ -2348,6 +2536,15 @@ "path-is-absolute": "^1.0.0" } }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -2360,6 +2557,20 @@ "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==", "dev": true }, + "globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "requires": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + } + }, "globrex": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", @@ -2391,23 +2602,6 @@ "wordwrap": "^1.0.0" } }, - "has-ansi": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", - "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - } - } - }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -2511,11 +2705,21 @@ "dev": true }, "ignore": { - "version": "3.3.10", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", - "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", + "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==", "dev": true }, + "import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, "imurmurhash": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", @@ -2789,29 +2993,44 @@ "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", "dev": true }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true + }, "is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" }, + "is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, "is-interactive": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", "dev": true }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true + }, "is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", "optional": true }, - "is-resolvable": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz", - "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==", - "dev": true - }, "is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -3036,12 +3255,6 @@ } } }, - "js-tokens": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true - }, "js-yaml": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", @@ -3121,15 +3334,15 @@ "dev": true }, "json-schema-traverse": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", - "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true }, "json-stable-stringify-without-jsonify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", - "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, "json5": { @@ -3160,6 +3373,7 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", + "optional": true, "requires": { "prelude-ls": "~1.1.2", "type-check": "~0.3.2" @@ -3263,6 +3477,12 @@ "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", "dev": true }, + "lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "lodash.uniqby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz", @@ -3380,12 +3600,28 @@ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", "dev": true }, + "merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true + }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", "dev": true }, + "micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "requires": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + } + }, "mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -3488,7 +3724,7 @@ "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", - "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, "negotiator": { @@ -3709,6 +3945,7 @@ "version": "0.8.3", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "optional": true, "requires": { "deep-is": "~0.1.3", "fast-levenshtein": "~2.0.6", @@ -3843,6 +4080,15 @@ "release-zalgo": "^1.0.0" } }, + "parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "requires": { + "callsites": "^3.0.0" + } + }, "parse-github-url": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.2.tgz", @@ -3872,12 +4118,6 @@ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, - "path-is-inside": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", - "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=", - "dev": true - }, "path-key": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", @@ -3890,6 +4130,12 @@ "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=", "dev": true }, + "path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true + }, "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -3920,12 +4166,6 @@ "find-up": "^4.0.0" } }, - "pluralize": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz", - "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==", - "dev": true - }, "pngjs": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", @@ -3935,7 +4175,8 @@ "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", - "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=" + "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", + "optional": true }, "printf": { "version": "0.6.1", @@ -3958,12 +4199,6 @@ "fromentries": "^1.2.0" } }, - "progress": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", - "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", - "dev": true - }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -3974,12 +4209,6 @@ "ipaddr.js": "1.9.1" } }, - "pseudomap": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", - "dev": true - }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -3999,8 +4228,7 @@ "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", - "optional": true + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" }, "qs": { "version": "6.9.6", @@ -4008,6 +4236,12 @@ "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==", "dev": true }, + "queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true + }, "qunit": { "version": "2.18.1", "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.18.1.tgz", @@ -4081,6 +4315,12 @@ "util-deprecate": "^1.0.1" } }, + "regexpp": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz", + "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==", + "dev": true + }, "release-zalgo": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz", @@ -4102,16 +4342,6 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, - "require-uncached": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", - "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=", - "dev": true, - "requires": { - "caller-path": "^0.1.0", - "resolve-from": "^1.0.0" - } - }, "requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -4119,9 +4349,9 @@ "dev": true }, "resolve-from": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", - "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "dev": true }, "restore-cursor": { @@ -4134,6 +4364,12 @@ "signal-exit": "^3.0.2" } }, + "reusify": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true + }, "rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -4211,19 +4447,13 @@ "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==", "dev": true }, - "rx-lite": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz", - "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=", - "dev": true - }, - "rx-lite-aggregates": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz", - "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=", + "run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", "dev": true, "requires": { - "rx-lite": "*" + "queue-microtask": "^1.2.2" } }, "rxjs": { @@ -4383,22 +4613,11 @@ "simple-concat": "^1.0.0" } }, - "slice-ansi": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz", - "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==", - "dev": true, - "requires": { - "is-fullwidth-code-point": "^2.0.0" - }, - "dependencies": { - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - } - } + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true }, "socket.io": { "version": "4.4.1", @@ -4534,9 +4753,9 @@ "dev": true }, "strip-json-comments": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, "styled_string": { @@ -4566,53 +4785,6 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "optional": true }, - "table": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz", - "integrity": "sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==", - "dev": true, - "requires": { - "ajv": "^5.2.3", - "ajv-keywords": "^2.1.0", - "chalk": "^2.1.0", - "lodash": "^4.17.4", - "slice-ansi": "1.0.0", - "string-width": "^2.1.1" - }, - "dependencies": { - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "requires": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - } - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "requires": { - "ansi-regex": "^3.0.0" - } - } - } - }, "tap-parser": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/tap-parser/-/tap-parser-7.0.0.tgz", @@ -4862,7 +5034,7 @@ "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, "through": { @@ -4896,6 +5068,15 @@ "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", "dev": true }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "requires": { + "is-number": "^7.0.0" + } + }, "toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", @@ -4933,10 +5114,28 @@ "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==", "dev": true }, + "tsutils": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", + "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==", + "dev": true, + "requires": { + "tslib": "^1.8.1" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + } + } + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", + "optional": true, "requires": { "prelude-ls": "~1.1.2" } @@ -4957,12 +5156,6 @@ "mime-types": "~2.1.24" } }, - "typedarray": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", - "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", - "dev": true - }, "typedarray-to-buffer": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", @@ -5019,6 +5212,15 @@ "picocolors": "^1.0.0" } }, + "uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "requires": { + "punycode": "^2.1.0" + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -5036,6 +5238,12 @@ "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", "dev": true }, + "v8-compile-cache": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", + "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", + "dev": true + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -5174,26 +5382,6 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, - "write": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz", - "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=", - "dev": true, - "requires": { - "mkdirp": "^0.5.1" - }, - "dependencies": { - "mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "dev": true, - "requires": { - "minimist": "^1.2.5" - } - } - } - }, "write-file-atomic": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", diff --git a/package.json b/package.json index 9b89eb6e236..e4dd38f9fd2 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,9 @@ "test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit", "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual", "coverage:report": "nyc report --reporter=lcov --reporter=text", - "lint": "eslint --config .eslintrc.json src", + "jslint": "eslint --config .eslintrc.json src/**/*.js", + "tslint": "eslint --config .eslintrc.cjs src/**/*.ts", + "lint": "npm run jslint && npm run tslint", "lint-fix": "eslint --fix --config .eslintrc.json src", "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests", "all": "npm run build && npm run test -- --all && npm run lint && npm run lint_tests && npm run export", @@ -70,12 +72,14 @@ "@types/fs-extra": "^9.0.13", "@types/lodash": "^4.14.180", "@types/node": "^17.0.21", + "@typescript-eslint/eslint-plugin": "^5.29.0", + "@typescript-eslint/parser": "^5.29.0", "ansi-escape": "^1.1.0", "auto-changelog": "^2.3.0", "chalk": "^2.4.1", "commander": "^9.1.0", "deep-object-diff": "^1.1.7", - "eslint": "4.18.x", + "eslint": "^8.18.0", "fs-extra": "^10.0.1", "fuzzy": "^0.1.3", "inquirer": "^8.2.1", diff --git a/src/util/cos.ts b/src/util/cos.ts index 1c19454681e..20bc2e13fa5 100644 --- a/src/util/cos.ts +++ b/src/util/cos.ts @@ -12,7 +12,7 @@ import { halfPI } from '../constants'; */ export const cos = (angle: TRadian): number => { if (angle === 0) { return 1; } - var angleSlice = Math.abs(angle) / halfPI; + const angleSlice = Math.abs(angle) / halfPI; switch (angleSlice) { case 1: case 3: return 0; case 2: return -1; diff --git a/src/util/dom_style.js b/src/util/dom_style.js index a5ff0d50324..461cff8c6ea 100644 --- a/src/util/dom_style.js +++ b/src/util/dom_style.js @@ -1,5 +1,6 @@ (function (global) { var fabric = global.fabric; + /* this file needs to go away, cross browser style support is not fabricjs domain. /** * Cross-browser wrapper for setting element's style * @memberOf fabric.util @@ -35,7 +36,7 @@ var parseEl = fabric.document.createElement('div'), supportsOpacity = typeof parseEl.style.opacity === 'string', supportsFilters = typeof parseEl.style.filter === 'string', - reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/, + reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^)]+)\)/, /** @ignore */ setOpacity = function (element) { return element; }; diff --git a/test/unit/animation.js b/test/unit/animation.js index 8ddb39f1e7a..2e1b957c886 100644 --- a/test/unit/animation.js +++ b/test/unit/animation.js @@ -409,7 +409,7 @@ var object = new fabric.Object({ left: 123, top: 124 }); var started = false; var t = new Date(); - var abort = object._animate('left', 223, { + object._animate('left', 223, { onStart: function () { started = true; assert.gte(new Date() - t, 500, 'animation delay'); diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 7f3724a186d..9b21f5a39e9 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -105,7 +105,6 @@ */ QUnit.assert.sameImageObject = function (actual, expected) { var a = {}, b = {}; - expected = expected || REFERENCE_IMG_OBJECT; Object.assign(a, actual, { src: basename(actual.src) }); Object.assign(b, expected, { src: basename(expected.src) }); this.pushResult({ @@ -2086,7 +2085,7 @@ el.style.position = 'relative'; var elStyle = el.style.cssText; assert.equal(elStyle, 'position: relative;', 'el style should not be empty'); - + var canvas = new fabric.Canvas(el, { enableRetinaScaling: true, renderOnAddRemove: false }); wrapperEl = canvas.wrapperEl; lowerCanvasEl = canvas.lowerCanvasEl; diff --git a/test/unit/canvas_events.js b/test/unit/canvas_events.js index eeb0584a663..de66cc8958e 100644 --- a/test/unit/canvas_events.js +++ b/test/unit/canvas_events.js @@ -341,7 +341,6 @@ var rect = new fabric.Rect({ left: 0, top: 0, width: 50, height: 50 }); canvas.add(rect); var count = 0; - var count2 = 0; var opt; canvas.on('object:modified', function(_opt) { count++; @@ -637,7 +636,7 @@ var control = []; var targetControl = []; [o1, o2, o3].forEach(target => { - target.on(canvasEventName.replace(':', ''), (ev) => { + target.on(canvasEventName.replace(':', ''), () => { targetControl.push(target); }); }); diff --git a/test/unit/collection.js b/test/unit/collection.js index e2e5504457d..74c2f874bcb 100644 --- a/test/unit/collection.js +++ b/test/unit/collection.js @@ -14,7 +14,7 @@ var obj = { prop: 4 }, fired = 0; assert.ok(typeof collection.add === 'function', 'has add method'); assert.deepEqual(collection._objects, [], 'start with empty array of items'); - var returned = collection.add([obj], cb); + collection.add([obj], cb); assert.equal(collection._objects[0], obj, 'add object in the array'); assert.equal(fired, 0, 'fired is 0'); var cb = function () { @@ -33,16 +33,16 @@ QUnit.test('insertAt', function (assert) { var rect1 = new fabric.Rect({ id: 1 }), - rect2 = new fabric.Rect({ id: 2 }), - rect3 = new fabric.Rect({ id: 3 }), - rect4 = new fabric.Rect({ id: 4 }), - rect5 = new fabric.Rect({ id: 5 }), - rect6 = new fabric.Rect({ id: 6 }), - rect7 = new fabric.Rect({ id: 7 }), - rect8 = new fabric.Rect({ id: 8 }), - control = [], - fired = [], - firingControl = []; + rect2 = new fabric.Rect({ id: 2 }), + rect3 = new fabric.Rect({ id: 3 }), + rect4 = new fabric.Rect({ id: 4 }), + rect5 = new fabric.Rect({ id: 5 }), + rect6 = new fabric.Rect({ id: 6 }), + rect7 = new fabric.Rect({ id: 7 }), + rect8 = new fabric.Rect({ id: 8 }), + control = [], + fired = [], + firingControl = []; collection.add([rect1, rect2]); control.push(rect1, rect2); @@ -129,7 +129,7 @@ _obj.prop = true; fired++; }; - var returned = collection.forEachObject(callback); + collection.forEachObject(callback); assert.equal(fired, collection._objects.length, 'fired once for every object'); assert.equal(obj.prop, true, 'fired for obj'); assert.equal(obj2.prop, true, 'fired for obj2'); diff --git a/test/unit/group.js b/test/unit/group.js index 2f41883b35e..28327957fc3 100644 --- a/test/unit/group.js +++ b/test/unit/group.js @@ -889,7 +889,7 @@ group1.addRelativeToGroup(rect5); var t = group1.calcTransformMatrix(); - var pos = fabric.util.transformPoint(new fabric.Point(rect5.left, rect5.top), t); + fabric.util.transformPoint(new fabric.Point(rect5.left, rect5.top), t); assert.equal(rect5.top, -5.5, 'top has been moved'); assert.equal(rect5.left, -19.5, 'left has been moved'); assert.equal(rect5.scaleX, 2, 'scaleX has been scaled'); diff --git a/test/unit/image.js b/test/unit/image.js index 665160d8906..e712ebbabed 100644 --- a/test/unit/image.js +++ b/test/unit/image.js @@ -99,7 +99,7 @@ function setSrc(img, src, callback) { img.onload = function() { - callback && callback(); + if (callback) { callback(); } }; img.src = src; } diff --git a/test/unit/path.js b/test/unit/path.js index dbf77d19689..3d479f71afb 100644 --- a/test/unit/path.js +++ b/test/unit/path.js @@ -59,7 +59,9 @@ function updatePath(pathObject, value, preservePosition) { const { left, top } = pathObject; pathObject._setPath(value); - preservePosition && pathObject.set({ left, top }); + if (preservePosition) { + pathObject.set({ left, top }); + } } QUnit.module('fabric.Path', { diff --git a/test/unit/pattern.js b/test/unit/pattern.js index dd18e54f8f0..a424eca0031 100644 --- a/test/unit/pattern.js +++ b/test/unit/pattern.js @@ -166,10 +166,10 @@ var rectObj = { fill: { type: 'pattern', - source: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' - } - } - var obj = fabric.Rect.fromObject(rectObj).then(function(obj){ + source: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==', + }, + }; + fabric.Rect.fromObject(rectObj).then(function(obj){ assert.ok(obj.fill instanceof fabric.Pattern, 'the pattern is enlived'); done(); }); diff --git a/test/visual/control_rendering.js b/test/visual/control_rendering.js index fa9733fe5f5..dad9909f5b2 100644 --- a/test/visual/control_rendering.js +++ b/test/visual/control_rendering.js @@ -295,14 +295,16 @@ borderColor: object.fill, cornerColor: object.fill, }); - object._objects && object.getObjects().forEach(function(subTarget) { - subTarget.borderScaleFactor = 3; - subTarget.transparentCorners = false; - subTarget._renderControls(canvas.contextContainer, { - borderColor: subTarget.fill, - cornerColor: subTarget.fill, + if (object.getObjects) { + object.getObjects().forEach(function(subTarget) { + subTarget.borderScaleFactor = 3; + subTarget.transparentCorners = false; + subTarget._renderControls(canvas.contextContainer, { + borderColor: subTarget.fill, + cornerColor: subTarget.fill, + }); }); - }); + } }); callback(canvas.lowerCanvasEl); }); @@ -329,14 +331,16 @@ borderColor: object.fill, cornerColor: object.fill, }); - object._objects && object.getObjects().forEach(function(subTarget) { - subTarget.borderScaleFactor = 3; - subTarget.transparentCorners = false; - subTarget._renderControls(canvas.contextContainer, { - borderColor: subTarget.fill, - cornerColor: subTarget.fill, + if (object.getObjects) { + object.getObjects().forEach(function(subTarget) { + subTarget.borderScaleFactor = 3; + subTarget.transparentCorners = false; + subTarget._renderControls(canvas.contextContainer, { + borderColor: subTarget.fill, + cornerColor: subTarget.fill, + }); }); - }); + } }); callback(canvas.lowerCanvasEl); }); diff --git a/test/visual/freedraw.js b/test/visual/freedraw.js index 6a71ca9a11c..f8e0bf7e332 100644 --- a/test/visual/freedraw.js +++ b/test/visual/freedraw.js @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-vars, no-unused-expressions */ (function() { if (fabric.isLikelyNode) { if (process.env.launcher === 'Firefox') { @@ -27,6 +28,7 @@ fabric.enableGLFiltering = false; fabric.isWebglSupported = false; fabric.Object.prototype.objectCaching = true; + // eslint-disable-next-line var visualTestLoop, compareGoldensTest; if (fabric.isLikelyNode) { visualTestLoop = global.visualTestLoop; @@ -49,16 +51,18 @@ points[i].y = parseFloat(points[i].y); brush.onMouseMove(points[i], options); } - fireUp && brush.onMouseUp(options); + if (fireUp) { + brush.onMouseUp(options); + } } function fireMouseUp(brush) { brush.onMouseUp(options); } - function eraserDrawer(points, brush, fireUp = false) { - brush.canvas.calcViewportBoundaries(); - pointDrawer(points, brush, fireUp); - } + // function eraserDrawer(points, brush, fireUp = false) { + // brush.canvas.calcViewportBoundaries(); + // pointDrawer(points, brush, fireUp); + // } var points = [ { @@ -2210,15 +2214,17 @@ tests[0].newModule = 'Free Drawing'; tests.forEach(function (test) { var options = Object.assign({}, freeDrawingTestDefaults, test.targets); - options.top && visualTester(Object.assign({}, test, { - test: `${test.test} (top context)`, - golden: `top_ctx_${test.golden}`, - code: function (canvas, callback) { - test.build(canvas); - callback(canvas.upperCanvasEl); - }, - disabled: fabric.isLikelyNode - })); + if (options.top) { + visualTester(Object.assign({}, test, { + test: `${test.test} (top context)`, + golden: `top_ctx_${test.golden}`, + code: function (canvas, callback) { + test.build(canvas); + callback(canvas.upperCanvasEl); + }, + disabled: fabric.isLikelyNode + })); + } options.main && visualTester(Object.assign({}, test, { test: `${test.test} (main context)`, golden: `main_ctx_${test.golden}`, diff --git a/test/visual/group_layout.js b/test/visual/group_layout.js index c5dee9f2931..51a49a9e5bf 100644 --- a/test/visual/group_layout.js +++ b/test/visual/group_layout.js @@ -34,18 +34,18 @@ ], options); } - function fixedLayout(canvas, callback) { - var g = createGroupForLayoutTests('fixed layout', { - backgroundColor: 'azure', - layout: 'fixed', - width: 50, - height: 50, - angle: 30 - }); - canvas.add(g); - canvas.renderAll(); - callback(canvas.lowerCanvasEl); - } + // function fixedLayout(canvas, callback) { + // var g = createGroupForLayoutTests('fixed layout', { + // backgroundColor: 'azure', + // layout: 'fixed', + // width: 50, + // height: 50, + // angle: 30 + // }); + // canvas.add(g); + // canvas.renderAll(); + // callback(canvas.lowerCanvasEl); + // } /* tests.push({ test: 'fixed layout with width, height, angle values', diff --git a/test/visual/text.js b/test/visual/text.js index 5ac5b3ef485..f7a1e417b7f 100644 --- a/test/visual/text.js +++ b/test/visual/text.js @@ -112,7 +112,7 @@ function text4(canvas, callback) { var text = new fabric.Text('lorem ipsum\ndolor\nsit Amet2\nconsectgetur', { - fontSize: 30, scaleX: 20, scaleY: 30, skewX: 30, skewY: 25, skewY: 15, angle: 25 + fontSize: 30, scaleX: 20, scaleY: 30, skewX: 30, skewY: 15, angle: 25 }); var matrix = text.calcTransformMatrix(); canvas.viewportTransform = fabric.util.invertTransform(matrix); From 434e74c598b23d67c34ea90484b55b3c1d0c9604 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 22:16:36 +0200 Subject: [PATCH 16/21] rename file as a test --- .eslintrc.cjs => .eslintrc.js | 0 package.json | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename .eslintrc.cjs => .eslintrc.js (100%) diff --git a/.eslintrc.cjs b/.eslintrc.js similarity index 100% rename from .eslintrc.cjs rename to .eslintrc.js diff --git a/package.json b/package.json index e4dd38f9fd2..b1a8d201ef3 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual", "coverage:report": "nyc report --reporter=lcov --reporter=text", "jslint": "eslint --config .eslintrc.json src/**/*.js", - "tslint": "eslint --config .eslintrc.cjs src/**/*.ts", + "tslint": "eslint --config .eslintrc.js src/**/*.ts", "lint": "npm run jslint && npm run tslint", "lint-fix": "eslint --fix --config .eslintrc.json src", "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests", From 000457f0dfc0d8761a5e6c6ba6622aaf4e1a40e2 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 22:23:22 +0200 Subject: [PATCH 17/21] use full installation --- .github/workflows/build.js.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/build.js.yml b/.github/workflows/build.js.yml index c57847d700f..f3538074130 100644 --- a/.github/workflows/build.js.yml +++ b/.github/workflows/build.js.yml @@ -15,7 +15,7 @@ jobs: uses: actions/setup-node@v1 with: node-version: 16.x - - run: npm install uglify-js@3.3.x + - run: npm ci - run: npm run build lint: runs-on: ubuntu-latest @@ -25,7 +25,6 @@ jobs: uses: actions/setup-node@v1 with: node-version: 16.x - - run: npm install eslint@4.7.x - run: npm run lint coverage: runs-on: ubuntu-latest @@ -35,7 +34,6 @@ jobs: uses: actions/setup-node@v1 with: node-version: 16.x - - run: npm ci - run: npm run build:fast - run: npm run test:coverage && npm run test:visual:coverage - uses: ChristiaanScheermeijer/jest-reporter-action@v0.4.0 From 280c16bcd7b7e15d856e3de7b4b473f29fe75ff5 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 22:28:32 +0200 Subject: [PATCH 18/21] ok 3 installs --- .github/workflows/build.js.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/build.js.yml b/.github/workflows/build.js.yml index f3538074130..90f3de5485a 100644 --- a/.github/workflows/build.js.yml +++ b/.github/workflows/build.js.yml @@ -25,6 +25,7 @@ jobs: uses: actions/setup-node@v1 with: node-version: 16.x + - run: npm ci - run: npm run lint coverage: runs-on: ubuntu-latest @@ -34,6 +35,7 @@ jobs: uses: actions/setup-node@v1 with: node-version: 16.x + - run: npm ci - run: npm run build:fast - run: npm run test:coverage && npm run test:visual:coverage - uses: ChristiaanScheermeijer/jest-reporter-action@v0.4.0 From b5b93d17207b3dd802036cd78a5f1c958125d510 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 22:55:31 +0200 Subject: [PATCH 19/21] no resize test firefox --- test/visual/resize_filter.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/test/visual/resize_filter.js b/test/visual/resize_filter.js index a6c5c427f12..c70cb346674 100644 --- a/test/visual/resize_filter.js +++ b/test/visual/resize_filter.js @@ -3,6 +3,7 @@ fabric.isWebglSupported = false; var visualTestLoop; var getFixture; + var isFirefox = false; if (fabric.isLikelyNode) { visualTestLoop = global.visualTestLoop; getFixture = global.getFixture; @@ -10,6 +11,7 @@ else { visualTestLoop = window.visualTestLoop; getFixture = window.getFixture; + isFirefox = global.navigator.userAgent.includes('Firefox/') } var tests = []; @@ -34,6 +36,7 @@ golden: 'parrot.png', newModule: 'Image resize filter test', percentage: 0.08, + disabled: isFirefox, width: 200, height: 200, beforeEachHandler: function() { @@ -57,6 +60,7 @@ test: 'Image resize without zoom', code: imageResizeTestNoZoom, golden: 'parrot.png', + disabled: isFirefox, percentage: 0.08, width: 200, height: 200, @@ -80,6 +84,7 @@ code: imageResizeTestAnamorphic, golden: 'parrotxy.png', percentage: 0.08, + disabled: isFirefox, width: 200, height: 200, }); @@ -102,6 +107,7 @@ test: 'Image resize with scaled group', code: imageResizeTestGroup, golden: 'parrot.png', + disabled: isFirefox, percentage: 0.08, width: 200, height: 200, From dad9996c05e2ea1976f04660f92d0b5296052fcc Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 25 Jun 2022 22:57:52 +0200 Subject: [PATCH 20/21] ops --- test/visual/resize_filter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/visual/resize_filter.js b/test/visual/resize_filter.js index c70cb346674..f038fda8150 100644 --- a/test/visual/resize_filter.js +++ b/test/visual/resize_filter.js @@ -11,7 +11,7 @@ else { visualTestLoop = window.visualTestLoop; getFixture = window.getFixture; - isFirefox = global.navigator.userAgent.includes('Firefox/') + isFirefox = window.navigator.userAgent.includes('Firefox/') } var tests = []; From f49dde0643ce550706f1137aaab165e63f11a593 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Sat, 30 Jul 2022 08:00:25 +0200 Subject: [PATCH 21/21] maybe lint is ok now --- package-lock.json | 7503 +++++++++++++++++++++- src/color.class.js | 4 +- src/mixins/object_interactivity.mixin.js | 2 +- src/shapes/text.class.js | 3 +- 4 files changed, 7453 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index c551dbb4bfd..f48c27de45b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,7349 @@ { "name": "fabric", "version": "5.1.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "name": "fabric", + "version": "5.1.0", + "license": "MIT", + "devDependencies": { + "@types/fs-extra": "^9.0.13", + "@types/lodash": "^4.14.180", + "@types/node": "^17.0.21", + "@typescript-eslint/eslint-plugin": "^5.29.0", + "@typescript-eslint/parser": "^5.29.0", + "ansi-escape": "^1.1.0", + "auto-changelog": "^2.3.0", + "chalk": "^2.4.1", + "commander": "^9.1.0", + "deep-object-diff": "^1.1.7", + "eslint": "^8.18.0", + "fs-extra": "^10.0.1", + "fuzzy": "^0.1.3", + "inquirer": "^8.2.1", + "inquirer-checkbox-plus-prompt": "^1.0.1", + "moment": "^2.29.1", + "nyc": "^15.1.0", + "pixelmatch": "^4.0.2", + "qunit": "^2.17.2", + "rollup": "^2.75.6", + "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-ts": "^3.0.2", + "testem": "^3.2.0", + "typescript": "^4.7.4" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "canvas": "^2.8.0", + "jsdom": "^19.0.0" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@ampproject/remapping/node_modules/@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", + "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", + "dev": true, + "dependencies": { + "@babel/highlight": "^7.16.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.5.tgz", + "integrity": "sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.5.tgz", + "integrity": "sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==", + "dev": true, + "dependencies": { + "@ampproject/remapping": "^2.1.0", + "@babel/code-frame": "^7.16.7", + "@babel/generator": "^7.18.2", + "@babel/helper-compilation-targets": "^7.18.2", + "@babel/helper-module-transforms": "^7.18.0", + "@babel/helpers": "^7.18.2", + "@babel/parser": "^7.18.5", + "@babel/template": "^7.16.7", + "@babel/traverse": "^7.18.5", + "@babel/types": "^7.18.4", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.1", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/core/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/generator": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.2.tgz", + "integrity": "sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.18.2", + "@jridgewell/gen-mapping": "^0.3.0", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz", + "integrity": "sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==", + "dev": true, + "dependencies": { + "@babel/compat-data": "^7.17.10", + "@babel/helper-validator-option": "^7.16.7", + "browserslist": "^4.20.2", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz", + "integrity": "sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz", + "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==", + "dev": true, + "dependencies": { + "@babel/template": "^7.16.7", + "@babel/types": "^7.17.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz", + "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.16.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", + "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.16.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz", + "integrity": "sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==", + "dev": true, + "dependencies": { + "@babel/helper-environment-visitor": "^7.16.7", + "@babel/helper-module-imports": "^7.16.7", + "@babel/helper-simple-access": "^7.17.7", + "@babel/helper-split-export-declaration": "^7.16.7", + "@babel/helper-validator-identifier": "^7.16.7", + "@babel/template": "^7.16.7", + "@babel/traverse": "^7.18.0", + "@babel/types": "^7.18.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz", + "integrity": "sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==", + "dev": true, + "dependencies": { + "@babel/types": "^7.18.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz", + "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.16.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", + "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz", + "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.2.tgz", + "integrity": "sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==", + "dev": true, + "dependencies": { + "@babel/template": "^7.16.7", + "@babel/traverse": "^7.18.2", + "@babel/types": "^7.18.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz", + "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.16.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight/node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, + "node_modules/@babel/parser": { + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz", + "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==", + "dev": true, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/template": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", + "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.16.7", + "@babel/parser": "^7.16.7", + "@babel/types": "^7.16.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.5.tgz", + "integrity": "sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.16.7", + "@babel/generator": "^7.18.2", + "@babel/helper-environment-visitor": "^7.18.2", + "@babel/helper-function-name": "^7.17.9", + "@babel/helper-hoist-variables": "^7.16.7", + "@babel/helper-split-export-declaration": "^7.16.7", + "@babel/parser": "^7.18.5", + "@babel/types": "^7.18.4", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.18.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.4.tgz", + "integrity": "sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@eslint/eslintrc": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", + "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==", + "dev": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^9.3.2", + "globals": "^13.15.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/@eslint/eslintrc/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "13.15.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz", + "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/eslintrc/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/@eslint/eslintrc/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@eslint/eslintrc/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@humanwhocodes/config-array": { + "version": "0.9.5", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", + "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==", + "dev": true, + "dependencies": { + "@humanwhocodes/object-schema": "^1.2.1", + "debug": "^4.1.1", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=10.10.0" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", + "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", + "dev": true + }, + "node_modules/@istanbuljs/load-nyc-config": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", + "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==", + "dev": true, + "dependencies": { + "camelcase": "^5.3.1", + "find-up": "^4.1.0", + "get-package-type": "^0.1.0", + "js-yaml": "^3.13.1", + "resolve-from": "^5.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@istanbuljs/schema": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", + "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz", + "integrity": "sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz", + "integrity": "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz", + "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", + "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz", + "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==", + "dev": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz", + "integrity": "sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, + "node_modules/@mapbox/node-pre-gyp": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.8.tgz", + "integrity": "sha512-CMGKi28CF+qlbXh26hDe6NxCd7amqeAzEqnS6IHeO6LoaKyM/n+Xw3HT1COdq8cuioOdlKdqn/hCmqPUOMOywg==", + "optional": true, + "dependencies": { + "detect-libc": "^1.0.3", + "https-proxy-agent": "^5.0.0", + "make-dir": "^3.1.0", + "node-fetch": "^2.6.5", + "nopt": "^5.0.0", + "npmlog": "^5.0.1", + "rimraf": "^3.0.2", + "semver": "^7.3.5", + "tar": "^6.1.11" + }, + "bin": { + "node-pre-gyp": "bin/node-pre-gyp" + } + }, + "node_modules/@mdn/browser-compat-data": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-4.2.1.tgz", + "integrity": "sha512-EWUguj2kd7ldmrF9F+vI5hUOralPd+sdsUnYbRy33vZTuZkduC1shE9TtEMEjAQwyfyMb4ole5KtjF8MsnQOlA==", + "dev": true + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@tootallnate/once": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", + "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", + "optional": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/@types/component-emitter": { + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", + "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==", + "dev": true + }, + "node_modules/@types/cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", + "dev": true + }, + "node_modules/@types/cors": { + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", + "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==", + "dev": true + }, + "node_modules/@types/fs-extra": { + "version": "9.0.13", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz", + "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/json-schema": { + "version": "7.0.11", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", + "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", + "dev": true + }, + "node_modules/@types/lodash": { + "version": "4.14.180", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.180.tgz", + "integrity": "sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==", + "dev": true + }, + "node_modules/@types/node": { + "version": "17.0.21", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz", + "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==", + "dev": true + }, + "node_modules/@types/object-path": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@types/object-path/-/object-path-0.11.1.tgz", + "integrity": "sha512-219LSCO9HPcoXcRTC6DbCs0FRhZgBnEMzf16RRqkT40WbkKx3mOeQuz3e2XqbfhOz/AHfbru0kzB1n1RCAsIIg==", + "dev": true + }, + "node_modules/@types/semver": { + "version": "7.3.10", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.10.tgz", + "integrity": "sha512-zsv3fsC7S84NN6nPK06u79oWgrPVd0NvOyqgghV1haPaFcVxIrP4DLomRwGAXk0ui4HZA7mOcSFL98sMVW9viw==", + "dev": true + }, + "node_modules/@types/ua-parser-js": { + "version": "0.7.36", + "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz", + "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==", + "dev": true + }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.29.0.tgz", + "integrity": "sha512-kgTsISt9pM53yRFQmLZ4npj99yGl3x3Pl7z4eA66OuTzAGC4bQB5H5fuLwPnqTKU3yyrrg4MIhjF17UYnL4c0w==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "5.29.0", + "@typescript-eslint/type-utils": "5.29.0", + "@typescript-eslint/utils": "5.29.0", + "debug": "^4.3.4", + "functional-red-black-tree": "^1.0.1", + "ignore": "^5.2.0", + "regexpp": "^3.2.0", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^5.0.0", + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/eslint-plugin/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.29.0.tgz", + "integrity": "sha512-ruKWTv+x0OOxbzIw9nW5oWlUopvP/IQDjB5ZqmTglLIoDTctLlAJpAQFpNPJP/ZI7hTT9sARBosEfaKbcFuECw==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "5.29.0", + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/typescript-estree": "5.29.0", + "debug": "^4.3.4" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.29.0.tgz", + "integrity": "sha512-etbXUT0FygFi2ihcxDZjz21LtC+Eps9V2xVx09zFoN44RRHPrkMflidGMI+2dUs821zR1tDS6Oc9IXxIjOUZwA==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/visitor-keys": "5.29.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.29.0.tgz", + "integrity": "sha512-JK6bAaaiJozbox3K220VRfCzLa9n0ib/J+FHIwnaV3Enw/TO267qe0pM1b1QrrEuy6xun374XEAsRlA86JJnyg==", + "dev": true, + "dependencies": { + "@typescript-eslint/utils": "5.29.0", + "debug": "^4.3.4", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/type-utils/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/types": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.29.0.tgz", + "integrity": "sha512-X99VbqvAXOMdVyfFmksMy3u8p8yoRGITgU1joBJPzeYa0rhdf5ok9S56/itRoUSh99fiDoMtarSIJXo7H/SnOg==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.29.0.tgz", + "integrity": "sha512-mQvSUJ/JjGBdvo+1LwC+GY2XmSYjK1nAaVw2emp/E61wEVYEyibRHCqm1I1vEKbXCpUKuW4G7u9ZCaZhJbLoNQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/visitor-keys": "5.29.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.29.0.tgz", + "integrity": "sha512-3Eos6uP1nyLOBayc/VUdKZikV90HahXE5Dx9L5YlSd/7ylQPXhLk1BYb29SDgnBnTp+jmSZUU0QxUiyHgW4p7A==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.9", + "@typescript-eslint/scope-manager": "5.29.0", + "@typescript-eslint/types": "5.29.0", + "@typescript-eslint/typescript-estree": "5.29.0", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.29.0.tgz", + "integrity": "sha512-Hpb/mCWsjILvikMQoZIE3voc9wtQcS0A9FUw3h8bhr9UxBdtI/tw1ZDZUOXHXLOVMedKCH5NxyzATwnU78bWCQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.29.0", + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@wessberg/stringutil": { + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/@wessberg/stringutil/-/stringutil-1.0.19.tgz", + "integrity": "sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==", + "dev": true, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/@xmldom/xmldom": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz", + "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==", + "dev": true, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/abab": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", + "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==", + "optional": true + }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "optional": true + }, + "node_modules/accepts": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", + "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "dev": true, + "dependencies": { + "mime-types": "~2.1.24", + "negotiator": "0.6.2" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/acorn": { + "version": "8.7.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz", + "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==", + "devOptional": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-globals": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz", + "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==", + "optional": true, + "dependencies": { + "acorn": "^7.1.1", + "acorn-walk": "^7.1.1" + } + }, + "node_modules/acorn-globals/node_modules/acorn": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "optional": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/acorn-walk": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", + "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", + "optional": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/agent-base": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "optional": true, + "dependencies": { + "debug": "4" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/aggregate-error": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", + "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", + "dev": true, + "dependencies": { + "clean-stack": "^2.0.0", + "indent-string": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/ansi-escape": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ansi-escape/-/ansi-escape-1.1.0.tgz", + "integrity": "sha1-ithZ6Epp4P+Rd5aUeTqS5OjAXpk=", + "dev": true + }, + "node_modules/ansi-escapes": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", + "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.21.3" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "devOptional": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/append-transform": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-2.0.0.tgz", + "integrity": "sha512-7yeyCEurROLQJFv5Xj4lEGTy0borxepjFv1g22oAdqFu//SrAlDl1O1Nxx15SH1RoliUml6p8dwJW9jvZughhg==", + "dev": true, + "dependencies": { + "default-require-extensions": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/aproba": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", + "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==", + "optional": true + }, + "node_modules/archy": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", + "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=", + "dev": true + }, + "node_modules/are-we-there-yet": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz", + "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==", + "optional": true, + "dependencies": { + "delegates": "^1.0.0", + "readable-stream": "^3.6.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", + "dev": true + }, + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/async": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", + "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=", + "dev": true + }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", + "optional": true + }, + "node_modules/auto-changelog": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.3.0.tgz", + "integrity": "sha512-S2B+RtTgytsa7l5iFGBoWT9W9ylITT5JJ8OaMJ7nrwvnlRm1dSS2tghaYueDeInZZafOE+1llH3tUQjMDRVS1g==", + "dev": true, + "dependencies": { + "commander": "^5.0.0", + "handlebars": "^4.7.3", + "node-fetch": "^2.6.0", + "parse-github-url": "^1.0.2", + "semver": "^6.3.0" + }, + "bin": { + "auto-changelog": "src/index.js" + }, + "engines": { + "node": ">=8.3" + } + }, + "node_modules/auto-changelog/node_modules/commander": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", + "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/auto-changelog/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/backbone": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.4.0.tgz", + "integrity": "sha512-RLmDrRXkVdouTg38jcgHhyQ/2zjg7a8E6sz2zxfz21Hh17xDJYUHBZimVIt5fUyS8vbfpeSmTL3gUjTEvUV3qQ==", + "dev": true, + "dependencies": { + "underscore": ">=1.8.3" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "devOptional": true + }, + "node_modules/base64-arraybuffer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz", + "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/base64id": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", + "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==", + "dev": true, + "engines": { + "node": "^4.5.0 || >= 5.9" + } + }, + "node_modules/bl": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", + "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", + "dev": true, + "dependencies": { + "buffer": "^5.5.0", + "inherits": "^2.0.4", + "readable-stream": "^3.4.0" + } + }, + "node_modules/bluebird": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", + "dev": true + }, + "node_modules/body-parser": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz", + "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==", + "dev": true, + "dependencies": { + "bytes": "3.1.1", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "~1.1.2", + "http-errors": "1.8.1", + "iconv-lite": "0.4.24", + "on-finished": "~2.3.0", + "qs": "6.9.6", + "raw-body": "2.4.2", + "type-is": "~1.6.18" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/body-parser/node_modules/bytes": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz", + "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/body-parser/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/body-parser/node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/body-parser/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "devOptional": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/browser-process-hrtime": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", + "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==", + "optional": true + }, + "node_modules/browserslist": { + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.0.tgz", + "integrity": "sha512-UQxE0DIhRB5z/zDz9iA03BOfxaN2+GQdBYH/2WrSIWEUrnpzTPJbhqt+umq6r3acaPRTW1FNTkrcp0PXgtFkvA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001358", + "electron-to-chromium": "^1.4.164", + "node-releases": "^2.0.5", + "update-browserslist-db": "^1.0.0" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/browserslist-generator": { + "version": "1.0.66", + "resolved": "https://registry.npmjs.org/browserslist-generator/-/browserslist-generator-1.0.66.tgz", + "integrity": "sha512-aFDax4Qzh29DdyhHQBD2Yu2L5OvaDnvYFMbmpLrLwwaNK4H6dHEhC/Nxv93/+mfAA+a/t94ln0P2JZvHO6LZDA==", + "dev": true, + "dependencies": { + "@mdn/browser-compat-data": "^4.1.16", + "@types/object-path": "^0.11.1", + "@types/semver": "^7.3.9", + "@types/ua-parser-js": "^0.7.36", + "browserslist": "4.20.2", + "caniuse-lite": "^1.0.30001328", + "isbot": "3.4.5", + "object-path": "^0.11.8", + "semver": "^7.3.7", + "ua-parser-js": "^1.0.2" + }, + "engines": { + "node": ">=8.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/wessberg/browserslist-generator?sponsor=1" + } + }, + "node_modules/browserslist-generator/node_modules/browserslist": { + "version": "4.20.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.2.tgz", + "integrity": "sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001317", + "electron-to-chromium": "^1.4.84", + "escalade": "^3.1.1", + "node-releases": "^2.0.2", + "picocolors": "^1.0.0" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/browserslist-generator/node_modules/semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "dev": true + }, + "node_modules/bytes": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", + "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/caching-transform": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-4.0.0.tgz", + "integrity": "sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==", + "dev": true, + "dependencies": { + "hasha": "^5.0.0", + "make-dir": "^3.0.0", + "package-hash": "^4.0.0", + "write-file-atomic": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001358", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001358.tgz", + "integrity": "sha512-hvp8PSRymk85R20bsDra7ZTCpSVGN/PAz9pSAjPSjKC+rNmnUk5vCRgJwiTT/O4feQ/yu/drvZYpKxxhbFuChw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] + }, + "node_modules/canvas": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.8.0.tgz", + "integrity": "sha512-gLTi17X8WY9Cf5GZ2Yns8T5lfBOcGgFehDFb+JQwDqdOoBOcECS9ZWMEAqMSVcMYwXD659J8NyzjRY/2aE+C2Q==", + "hasInstallScript": true, + "optional": true, + "dependencies": { + "@mapbox/node-pre-gyp": "^1.0.0", + "nan": "^2.14.0", + "simple-get": "^3.0.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/chardet": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", + "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", + "dev": true + }, + "node_modules/charm": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/charm/-/charm-1.0.2.tgz", + "integrity": "sha1-it02cVOm2aWBMxBSxAkJkdqZXjU=", + "dev": true, + "dependencies": { + "inherits": "^2.0.1" + } + }, + "node_modules/chownr": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", + "optional": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/clean-stack": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", + "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/cli-cursor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", + "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", + "dev": true, + "dependencies": { + "restore-cursor": "^3.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cli-spinners": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz", + "integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==", + "dev": true, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cli-width": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz", + "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/cliui": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", + "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^6.2.0" + } + }, + "node_modules/clone": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", + "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", + "dev": true, + "engines": { + "node": ">=0.8" + } + }, + "node_modules/code-point-at": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "node_modules/color-support": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", + "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", + "optional": true, + "bin": { + "color-support": "bin.js" + } + }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "optional": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/commander": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.1.0.tgz", + "integrity": "sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==", + "dev": true, + "engines": { + "node": "^12.20.0 || >=14" + } + }, + "node_modules/commondir": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", + "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", + "dev": true + }, + "node_modules/compatfactory": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/compatfactory/-/compatfactory-1.0.1.tgz", + "integrity": "sha512-hR9u0HSZTKDNNchPtMHg6myeNx0XO+av7UZIJPsi4rPALJBHi/W5Mbwi19hC/xm6y3JkYpxVYjTqnSGsU5X/iw==", + "dev": true, + "dependencies": { + "helpertypes": "^0.0.18" + }, + "engines": { + "node": ">=14.9.0" + }, + "peerDependencies": { + "typescript": ">=3.x || >= 4.x" + } + }, + "node_modules/component-emitter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", + "dev": true + }, + "node_modules/compressible": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", + "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==", + "dev": true, + "dependencies": { + "mime-db": ">= 1.43.0 < 2" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/compression": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz", + "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==", + "dev": true, + "dependencies": { + "accepts": "~1.3.5", + "bytes": "3.0.0", + "compressible": "~2.0.16", + "debug": "2.6.9", + "on-headers": "~1.0.2", + "safe-buffer": "5.1.2", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/compression/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/compression/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "node_modules/compression/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "devOptional": true + }, + "node_modules/console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "devOptional": true + }, + "node_modules/consolidate": { + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz", + "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==", + "dev": true, + "dependencies": { + "bluebird": "^3.1.1" + }, + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dev": true, + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/convert-source-map": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz", + "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==", + "dev": true, + "dependencies": { + "safe-buffer": "~5.1.1" + } + }, + "node_modules/convert-source-map/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true + }, + "node_modules/cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", + "dev": true + }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "dev": true + }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dev": true, + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/cross-spawn/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cross-spawn/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/cross-spawn/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/crosspath": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/crosspath/-/crosspath-2.0.0.tgz", + "integrity": "sha512-ju88BYCQ2uvjO2bR+SsgLSTwTSctU+6Vp2ePbKPgSCZyy4MWZxYsT738DlKVRE5utUjobjPRm1MkTYKJxCmpTA==", + "dev": true, + "dependencies": { + "@types/node": "^17.0.36" + }, + "engines": { + "node": ">=14.9.0" + } + }, + "node_modules/crosspath/node_modules/@types/node": { + "version": "17.0.45", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz", + "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==", + "dev": true + }, + "node_modules/cssom": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", + "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==", + "optional": true + }, + "node_modules/cssstyle": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz", + "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==", + "optional": true, + "dependencies": { + "cssom": "~0.3.6" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cssstyle/node_modules/cssom": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", + "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", + "optional": true + }, + "node_modules/data-urls": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.1.tgz", + "integrity": "sha512-Ds554NeT5Gennfoo9KN50Vh6tpgtvYEwraYjejXnyTpu1C7oXKxdFk75REooENHE8ndTVOJuv+BEs4/J/xcozw==", + "optional": true, + "dependencies": { + "abab": "^2.0.3", + "whatwg-mimetype": "^3.0.0", + "whatwg-url": "^10.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/data-urls/node_modules/tr46": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz", + "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==", + "optional": true, + "dependencies": { + "punycode": "^2.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/data-urls/node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "optional": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/data-urls/node_modules/whatwg-url": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz", + "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==", + "optional": true, + "dependencies": { + "tr46": "^3.0.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/debug": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", + "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", + "devOptional": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/decimal.js": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz", + "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==", + "optional": true + }, + "node_modules/decompress-response": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz", + "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==", + "optional": true, + "dependencies": { + "mimic-response": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "devOptional": true + }, + "node_modules/deep-object-diff": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.7.tgz", + "integrity": "sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg==", + "dev": true + }, + "node_modules/default-require-extensions": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.0.tgz", + "integrity": "sha512-ek6DpXq/SCpvjhpFsLFRVtIxJCRw6fUR42lYMVZuUMK7n8eMz4Uh5clckdBjEpLhn/gEBZo7hDJnJcwdKLKQjg==", + "dev": true, + "dependencies": { + "strip-bom": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/defaults": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz", + "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=", + "dev": true, + "dependencies": { + "clone": "^1.0.2" + } + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", + "optional": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", + "devOptional": true + }, + "node_modules/depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", + "dev": true + }, + "node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", + "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/domexception": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", + "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==", + "optional": true, + "dependencies": { + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/domexception/node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "optional": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", + "dev": true + }, + "node_modules/electron-to-chromium": { + "version": "1.4.165", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.165.tgz", + "integrity": "sha512-DKQW1lqUSAYQvn9dnpK7mWaDpWbNOXQLXhfCi7Iwx0BKxdZOxkKcCyKw1l3ihWWW5iWSxKKbhEUoNRoHvl/hbA==", + "dev": true + }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "devOptional": true + }, + "node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "dev": true, + "dependencies": { + "once": "^1.4.0" + } + }, + "node_modules/engine.io": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.1.2.tgz", + "integrity": "sha512-v/7eGHxPvO2AWsksyx2PUsQvBafuvqs0jJJQ0FdmJG1b9qIvgSbqDRGwNhfk2XHaTTbTXiC4quRE8Q9nRjsrQQ==", + "dev": true, + "dependencies": { + "@types/cookie": "^0.4.1", + "@types/cors": "^2.8.12", + "@types/node": ">=10.0.0", + "accepts": "~1.3.4", + "base64id": "2.0.0", + "cookie": "~0.4.1", + "cors": "~2.8.5", + "debug": "~4.3.1", + "engine.io-parser": "~5.0.0", + "ws": "~8.2.3" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/engine.io-parser": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.2.tgz", + "integrity": "sha512-wuiO7qO/OEkPJSFueuATIXtrxF7/6GTbAO9QLv7nnbjwZ5tYhLm9zxvLwxstRs0dcT0KUlWTjtIOs1T86jt12g==", + "dev": true, + "dependencies": { + "base64-arraybuffer": "~1.0.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/engine.io/node_modules/ws": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", + "dev": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/es6-error": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz", + "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", + "dev": true + }, + "node_modules/escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=", + "dev": true + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/escodegen": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz", + "integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==", + "optional": true, + "dependencies": { + "esprima": "^4.0.1", + "estraverse": "^5.2.0", + "esutils": "^2.0.2", + "optionator": "^0.8.1" + }, + "bin": { + "escodegen": "bin/escodegen.js", + "esgenerate": "bin/esgenerate.js" + }, + "engines": { + "node": ">=6.0" + }, + "optionalDependencies": { + "source-map": "~0.6.1" + } + }, + "node_modules/eslint": { + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz", + "integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==", + "dev": true, + "dependencies": { + "@eslint/eslintrc": "^1.3.0", + "@humanwhocodes/config-array": "^0.9.2", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.1.1", + "eslint-utils": "^3.0.0", + "eslint-visitor-keys": "^3.3.0", + "espree": "^9.3.2", + "esquery": "^1.4.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^6.0.1", + "globals": "^13.15.0", + "ignore": "^5.2.0", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "js-yaml": "^4.1.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.1", + "regexpp": "^3.2.0", + "strip-ansi": "^6.0.1", + "strip-json-comments": "^3.1.0", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/eslint-scope/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/eslint-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", + "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^2.0.0" + }, + "engines": { + "node": "^10.0.0 || ^12.0.0 || >= 14.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/mysticatea" + }, + "peerDependencies": { + "eslint": ">=5" + } + }, + "node_modules/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz", + "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/eslint/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/eslint/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "node_modules/eslint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/eslint/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/eslint/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/eslint/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/eslint-scope": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", + "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/eslint/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/eslint/node_modules/globals": { + "version": "13.15.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz", + "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/eslint/node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/eslint/node_modules/optionator": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", + "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", + "dev": true, + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.3" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/eslint/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/espree": { + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz", + "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==", + "dev": true, + "dependencies": { + "acorn": "^8.7.1", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/espree/node_modules/acorn": { + "version": "8.7.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", + "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "devOptional": true, + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/esquery": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz", + "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==", + "dev": true, + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "devOptional": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "dev": true + }, + "node_modules/events-to-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/events-to-array/-/events-to-array-1.1.2.tgz", + "integrity": "sha1-LUH1Y+H+QA7Uli/hpNXGp1Od9/Y=", + "dev": true + }, + "node_modules/execa": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", + "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", + "dev": true, + "dependencies": { + "cross-spawn": "^6.0.0", + "get-stream": "^4.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/execa/node_modules/cross-spawn": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", + "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", + "dev": true, + "dependencies": { + "nice-try": "^1.0.4", + "path-key": "^2.0.1", + "semver": "^5.5.0", + "shebang-command": "^1.2.0", + "which": "^1.2.9" + }, + "engines": { + "node": ">=4.8" + } + }, + "node_modules/execa/node_modules/is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/execa/node_modules/path-key": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", + "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/execa/node_modules/semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true, + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/express": { + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.17.2.tgz", + "integrity": "sha512-oxlxJxcQlYwqPWKVJJtvQiwHgosH/LrLSPA+H4UxpyvSS6jC5aH+5MoHFM+KABgTOt0APue4w66Ha8jCUo9QGg==", + "dev": true, + "dependencies": { + "accepts": "~1.3.7", + "array-flatten": "1.1.1", + "body-parser": "1.19.1", + "content-disposition": "0.5.4", + "content-type": "~1.0.4", + "cookie": "0.4.1", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "~1.1.2", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "~1.1.2", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.7", + "qs": "6.9.6", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "0.17.2", + "serve-static": "1.14.2", + "setprototypeof": "1.2.0", + "statuses": "~1.5.0", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/express/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/express/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "node_modules/external-editor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", + "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==", + "dev": true, + "dependencies": { + "chardet": "^0.7.0", + "iconv-lite": "^0.4.24", + "tmp": "^0.0.33" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/external-editor/node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, + "node_modules/fast-glob": { + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", + "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", + "devOptional": true + }, + "node_modules/fastq": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", + "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==", + "dev": true, + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/figures": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", + "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.5" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/file-entry-cache": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, + "dependencies": { + "flat-cache": "^3.0.4" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/finalhandler": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", + "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", + "dev": true, + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "statuses": "~1.5.0", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/finalhandler/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/finalhandler/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "node_modules/find-cache-dir": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", + "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", + "dev": true, + "dependencies": { + "commondir": "^1.0.1", + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/avajs/find-cache-dir?sponsor=1" + } + }, + "node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fireworm": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/fireworm/-/fireworm-0.7.1.tgz", + "integrity": "sha1-zPIPeUHxCIg/zduZOD2+bhhhx1g=", + "dev": true, + "dependencies": { + "async": "~0.2.9", + "is-type": "0.0.1", + "lodash.debounce": "^3.1.1", + "lodash.flatten": "^3.0.2", + "minimatch": "^3.0.2" + } + }, + "node_modules/flat-cache": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", + "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", + "dev": true, + "dependencies": { + "flatted": "^3.1.0", + "rimraf": "^3.0.2" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/flatted": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz", + "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", + "dev": true + }, + "node_modules/follow-redirects": { + "version": "1.14.8", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz", + "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/foreground-child": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz", + "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^3.0.2" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/foreground-child/node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/foreground-child/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/foreground-child/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/foreground-child/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "optional": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fromentries": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/fromentries/-/fromentries-1.3.2.tgz", + "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/fs-extra": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.1.tgz", + "integrity": "sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/fs-extra/node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/fs-minipass": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", + "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", + "optional": true, + "dependencies": { + "minipass": "^3.0.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "devOptional": true + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/functional-red-black-tree": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", + "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==", + "dev": true + }, + "node_modules/fuzzy": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/fuzzy/-/fuzzy-0.1.3.tgz", + "integrity": "sha1-THbsL/CsGjap3M+aAN+GIweNTtg=", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, + "node_modules/gauge": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", + "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==", + "optional": true, + "dependencies": { + "aproba": "^1.0.3 || ^2.0.0", + "color-support": "^1.1.2", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.1", + "object-assign": "^4.1.1", + "signal-exit": "^3.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1", + "wide-align": "^1.1.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, + "node_modules/get-package-type": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", + "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==", + "dev": true, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/get-stream": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", + "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "dev": true, + "dependencies": { + "pump": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/glob": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", + "devOptional": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/globalyzer": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz", + "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==", + "dev": true + }, + "node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/globrex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", + "dev": true + }, + "node_modules/graceful-fs": { + "version": "4.2.9", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", + "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==", + "dev": true + }, + "node_modules/growly": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", + "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", + "dev": true + }, + "node_modules/handlebars": { + "version": "4.7.7", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz", + "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==", + "dev": true, + "dependencies": { + "minimist": "^1.2.5", + "neo-async": "^2.6.0", + "source-map": "^0.6.1", + "wordwrap": "^1.0.0" + }, + "bin": { + "handlebars": "bin/handlebars" + }, + "engines": { + "node": ">=0.4.7" + }, + "optionalDependencies": { + "uglify-js": "^3.1.4" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", + "devOptional": true + }, + "node_modules/hasha": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz", + "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==", + "dev": true, + "dependencies": { + "is-stream": "^2.0.0", + "type-fest": "^0.8.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/helpertypes": { + "version": "0.0.18", + "resolved": "https://registry.npmjs.org/helpertypes/-/helpertypes-0.0.18.tgz", + "integrity": "sha512-XRhfbSEmR+poXUC5/8AbmYNJb2riOT6qPzjGJZr0S9YedHiaY+/tzPYzWMUclYMEdCYo/1l8PDYrQFCj02v97w==", + "dev": true, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "optional": true, + "dependencies": { + "whatwg-encoding": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true + }, + "node_modules/http-errors": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz", + "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==", + "dev": true, + "dependencies": { + "depd": "~1.1.2", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "dev": true, + "dependencies": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/http-proxy-agent": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", + "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==", + "optional": true, + "dependencies": { + "@tootallnate/once": "2", + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/https-proxy-agent": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz", + "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==", + "optional": true, + "dependencies": { + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "optional": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/ignore": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", + "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", + "dev": true, + "engines": { + "node": ">=0.8.19" + } + }, + "node_modules/indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "devOptional": true, + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "devOptional": true + }, + "node_modules/inquirer": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.1.tgz", + "integrity": "sha512-pxhBaw9cyTFMjwKtkjePWDhvwzvrNGAw7En4hottzlPvz80GZaMZthdDU35aA6/f5FRZf3uhE057q8w1DE3V2g==", + "dev": true, + "dependencies": { + "ansi-escapes": "^4.2.1", + "chalk": "^4.1.1", + "cli-cursor": "^3.1.0", + "cli-width": "^3.0.0", + "external-editor": "^3.0.3", + "figures": "^3.0.0", + "lodash": "^4.17.21", + "mute-stream": "0.0.8", + "ora": "^5.4.1", + "run-async": "^2.4.0", + "rxjs": "^7.5.5", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0", + "through": "^2.3.6" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/inquirer-checkbox-plus-prompt": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/inquirer-checkbox-plus-prompt/-/inquirer-checkbox-plus-prompt-1.0.1.tgz", + "integrity": "sha1-VP8e0Jd3oQNThWIna1z0Uhox0W0=", + "dev": true, + "dependencies": { + "cli-cursor": "^2.1.0", + "figures": "^2.0.0", + "inquirer": "^5.1.0", + "lodash": "^4.17.5" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/ansi-escapes": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", + "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/ansi-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/chardet": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", + "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", + "dev": true + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/cli-cursor": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", + "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", + "dev": true, + "dependencies": { + "restore-cursor": "^2.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/cli-width": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", + "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", + "dev": true + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/external-editor": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", + "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", + "dev": true, + "dependencies": { + "chardet": "^0.4.0", + "iconv-lite": "^0.4.17", + "tmp": "^0.0.33" + }, + "engines": { + "node": ">=0.12" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/figures": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", + "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.5" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/inquirer": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-5.2.0.tgz", + "integrity": "sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==", + "dev": true, + "dependencies": { + "ansi-escapes": "^3.0.0", + "chalk": "^2.0.0", + "cli-cursor": "^2.1.0", + "cli-width": "^2.0.0", + "external-editor": "^2.1.0", + "figures": "^2.0.0", + "lodash": "^4.3.0", + "mute-stream": "0.0.7", + "run-async": "^2.2.0", + "rxjs": "^5.5.2", + "string-width": "^2.1.0", + "strip-ansi": "^4.0.0", + "through": "^2.3.6" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/mimic-fn": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", + "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/mute-stream": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", + "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", + "dev": true + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/onetime": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", + "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=", + "dev": true, + "dependencies": { + "mimic-fn": "^1.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/restore-cursor": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", + "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=", + "dev": true, + "dependencies": { + "onetime": "^2.0.0", + "signal-exit": "^3.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/rxjs": { + "version": "5.5.12", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz", + "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==", + "dev": true, + "dependencies": { + "symbol-observable": "1.0.1" + }, + "engines": { + "npm": ">=2.0.0" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/string-width": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "dev": true, + "dependencies": { + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer-checkbox-plus-prompt/node_modules/strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "dev": true, + "dependencies": { + "ansi-regex": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/inquirer/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/inquirer/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/inquirer/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/inquirer/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/inquirer/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/inquirer/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true, + "bin": { + "is-docker": "cli.js" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "devOptional": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-interactive": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", + "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "optional": true + }, + "node_modules/is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-type": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/is-type/-/is-type-0.0.1.tgz", + "integrity": "sha1-9lHYXDZdRJVdFKUdjXBh8/a0d5w=", + "dev": true, + "dependencies": { + "core-util-is": "~1.0.0" + } + }, + "node_modules/is-typedarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", + "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", + "dev": true + }, + "node_modules/is-unicode-supported": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", + "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-windows": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", + "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "dependencies": { + "is-docker": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "node_modules/isbot": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/isbot/-/isbot-3.4.5.tgz", + "integrity": "sha512-+KD6q1BBtw0iK9aGBGSfxJ31/ZgizKRjhm8ebgJUBMx0aeeQuIJ1I72beCoIrltIZGrSm4vmrxRxrG5n1aUTtw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", + "dev": true + }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz", + "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-hook": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-3.0.0.tgz", + "integrity": "sha512-Pt/uge1Q9s+5VAZ+pCo16TYMWPBIl+oaNIjgLQxcX0itS6ueeaA+pEfThZpH8WxhFgCiEb8sAJY6MdUKgiIWaQ==", + "dev": true, + "dependencies": { + "append-transform": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-instrument": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz", + "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==", + "dev": true, + "dependencies": { + "@babel/core": "^7.7.5", + "@istanbuljs/schema": "^0.1.2", + "istanbul-lib-coverage": "^3.0.0", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-instrument/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/istanbul-lib-processinfo": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-2.0.2.tgz", + "integrity": "sha512-kOwpa7z9hme+IBPZMzQ5vdQj8srYgAtaRqeI48NGmAQ+/5yKiHLV0QbYqQpxsdEF0+w14SoB8YbnHKcXE2KnYw==", + "dev": true, + "dependencies": { + "archy": "^1.0.0", + "cross-spawn": "^7.0.0", + "istanbul-lib-coverage": "^3.0.0-alpha.1", + "make-dir": "^3.0.0", + "p-map": "^3.0.0", + "rimraf": "^3.0.0", + "uuid": "^3.3.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-processinfo/node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/istanbul-lib-processinfo/node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-processinfo/node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-processinfo/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz", + "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==", + "dev": true, + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^3.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-report/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-report/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-source-maps": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz", + "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==", + "dev": true, + "dependencies": { + "debug": "^4.1.1", + "istanbul-lib-coverage": "^3.0.0", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-reports": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.3.tgz", + "integrity": "sha512-x9LtDVtfm/t1GFiLl3NffC7hz+I1ragvgX1P/Lg1NlIagifZDKUkuuaAxH/qpwj2IuEfD8G2Bs/UKp+sZ/pKkg==", + "dev": true, + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-worker": { + "version": "26.6.2", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", + "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==", + "dev": true, + "dependencies": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^7.0.0" + }, + "engines": { + "node": ">= 10.13.0" + } + }, + "node_modules/jest-worker/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-worker/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dev": true, + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/jsdom": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-19.0.0.tgz", + "integrity": "sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==", + "optional": true, + "dependencies": { + "abab": "^2.0.5", + "acorn": "^8.5.0", + "acorn-globals": "^6.0.0", + "cssom": "^0.5.0", + "cssstyle": "^2.3.0", + "data-urls": "^3.0.1", + "decimal.js": "^10.3.1", + "domexception": "^4.0.0", + "escodegen": "^2.0.0", + "form-data": "^4.0.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy-agent": "^5.0.0", + "https-proxy-agent": "^5.0.0", + "is-potential-custom-element-name": "^1.0.1", + "nwsapi": "^2.2.0", + "parse5": "6.0.1", + "saxes": "^5.0.1", + "symbol-tree": "^3.2.4", + "tough-cookie": "^4.0.0", + "w3c-hr-time": "^1.0.2", + "w3c-xmlserializer": "^3.0.0", + "webidl-conversions": "^7.0.0", + "whatwg-encoding": "^2.0.0", + "whatwg-mimetype": "^3.0.0", + "whatwg-url": "^10.0.0", + "ws": "^8.2.3", + "xml-name-validator": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "canvas": "^2.5.0" + }, + "peerDependenciesMeta": { + "canvas": { + "optional": true + } + } + }, + "node_modules/jsdom/node_modules/tr46": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz", + "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==", + "optional": true, + "dependencies": { + "punycode": "^2.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/jsdom/node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "optional": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/jsdom/node_modules/whatwg-url": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz", + "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==", + "optional": true, + "dependencies": { + "tr46": "^3.0.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true, + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true + }, + "node_modules/json5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", + "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "dev": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/jsonfile/node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/levn": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", + "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", + "optional": true, + "dependencies": { + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, + "node_modules/lodash._baseflatten": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/lodash._baseflatten/-/lodash._baseflatten-3.1.4.tgz", + "integrity": "sha1-B3D/gBMa9uNPO1EXlqe6UhTmX/c=", + "dev": true, + "dependencies": { + "lodash.isarguments": "^3.0.0", + "lodash.isarray": "^3.0.0" + } + }, + "node_modules/lodash._getnative": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", + "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=", + "dev": true + }, + "node_modules/lodash._isiterateecall": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz", + "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=", + "dev": true + }, + "node_modules/lodash.assignin": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz", + "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI=", + "dev": true + }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=", + "dev": true + }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "dev": true + }, + "node_modules/lodash.debounce": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz", + "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=", + "dev": true, + "dependencies": { + "lodash._getnative": "^3.0.0" + } + }, + "node_modules/lodash.find": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz", + "integrity": "sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=", + "dev": true + }, + "node_modules/lodash.flatten": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-3.0.2.tgz", + "integrity": "sha1-3hz1d1j49EeTGdNcPpzGDEUBk4w=", + "dev": true, + "dependencies": { + "lodash._baseflatten": "^3.0.0", + "lodash._isiterateecall": "^3.0.0" + } + }, + "node_modules/lodash.flattendeep": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", + "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", + "dev": true + }, + "node_modules/lodash.isarguments": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", + "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=", + "dev": true + }, + "node_modules/lodash.isarray": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", + "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", + "dev": true + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, + "node_modules/lodash.uniqby": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz", + "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=", + "dev": true + }, + "node_modules/log-symbols": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", + "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "is-unicode-supported": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-symbols/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/log-symbols/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/log-symbols/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/log-symbols/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/log-symbols/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/log-symbols/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "devOptional": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/magic-string": { + "version": "0.26.2", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz", + "integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "devOptional": true, + "dependencies": { + "semver": "^6.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "devOptional": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=", + "dev": true + }, + "node_modules/merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "dependencies": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/mime-db": { + "version": "1.51.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", + "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", + "devOptional": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.34", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", + "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", + "devOptional": true, + "dependencies": { + "mime-db": "1.51.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mimic-fn": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", + "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/mimic-response": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz", + "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==", + "optional": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "devOptional": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "dev": true + }, + "node_modules/minipass": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz", + "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==", + "optional": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/minizlib": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", + "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", + "optional": true, + "dependencies": { + "minipass": "^3.0.0", + "yallist": "^4.0.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "optional": true, + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "dev": true, + "engines": { + "node": "*" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "devOptional": true + }, + "node_modules/mustache": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz", + "integrity": "sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA==", + "dev": true, + "bin": { + "mustache": "bin/mustache" + }, + "engines": { + "npm": ">=1.4.0" + } + }, + "node_modules/mute-stream": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", + "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", + "dev": true + }, + "node_modules/nan": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", + "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", + "optional": true + }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true + }, + "node_modules/negotiator": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", + "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", + "dev": true + }, + "node_modules/nice-try": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", + "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", + "dev": true + }, + "node_modules/node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "devOptional": true, + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/node-notifier": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-9.0.1.tgz", + "integrity": "sha512-fPNFIp2hF/Dq7qLDzSg4vZ0J4e9v60gJR+Qx7RbjbWqzPDdEqeVpEx5CFeDAELIl+A/woaaNn1fQ5nEVerMxJg==", + "dev": true, + "dependencies": { + "growly": "^1.3.0", + "is-wsl": "^2.2.0", + "semver": "^7.3.2", + "shellwords": "^0.1.1", + "uuid": "^8.3.0", + "which": "^2.0.2" + } + }, + "node_modules/node-notifier/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/node-notifier/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/node-preload": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/node-preload/-/node-preload-0.2.1.tgz", + "integrity": "sha512-RM5oyBy45cLEoHqCeh+MNuFAxO0vTFBLskvQbOKnEE7YTTSN4tbN8QWDIPQ6L+WvKsB/qLEGpYe2ZZ9d4W9OIQ==", + "dev": true, + "dependencies": { + "process-on-spawn": "^1.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/node-releases": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz", + "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==", + "dev": true + }, + "node_modules/node-watch": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.3.tgz", + "integrity": "sha512-3l4E8uMPY1HdMMryPRUAl+oIHtXtyiTlIiESNSVSNxcPfzAFzeTbXFQkZfAwBbo0B1qMSG8nUABx+Gd+YrbKrQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/nopt": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", + "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", + "optional": true, + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/npm-run-path": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", + "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", + "dev": true, + "dependencies": { + "path-key": "^2.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/npm-run-path/node_modules/path-key": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", + "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/npmlog": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz", + "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==", + "optional": true, + "dependencies": { + "are-we-there-yet": "^2.0.0", + "console-control-strings": "^1.1.0", + "gauge": "^3.0.0", + "set-blocking": "^2.0.0" + } + }, + "node_modules/number-is-nan": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/nwsapi": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", + "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==", + "optional": true + }, + "node_modules/nyc": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz", + "integrity": "sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==", + "dev": true, + "dependencies": { + "@istanbuljs/load-nyc-config": "^1.0.0", + "@istanbuljs/schema": "^0.1.2", + "caching-transform": "^4.0.0", + "convert-source-map": "^1.7.0", + "decamelize": "^1.2.0", + "find-cache-dir": "^3.2.0", + "find-up": "^4.1.0", + "foreground-child": "^2.0.0", + "get-package-type": "^0.1.0", + "glob": "^7.1.6", + "istanbul-lib-coverage": "^3.0.0", + "istanbul-lib-hook": "^3.0.0", + "istanbul-lib-instrument": "^4.0.0", + "istanbul-lib-processinfo": "^2.0.2", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.0", + "istanbul-reports": "^3.0.2", + "make-dir": "^3.0.0", + "node-preload": "^0.2.1", + "p-map": "^3.0.0", + "process-on-spawn": "^1.0.0", + "resolve-from": "^5.0.0", + "rimraf": "^3.0.0", + "signal-exit": "^3.0.2", + "spawn-wrap": "^2.0.0", + "test-exclude": "^6.0.0", + "yargs": "^15.0.2" + }, + "bin": { + "nyc": "bin/nyc.js" + }, + "engines": { + "node": ">=8.9" + } + }, + "node_modules/nyc/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-path": { + "version": "0.11.8", + "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.8.tgz", + "integrity": "sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==", + "dev": true, + "engines": { + "node": ">= 10.12.0" + } + }, + "node_modules/on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "dev": true, + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/on-headers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", + "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "devOptional": true, + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/onetime": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", + "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", + "dev": true, + "dependencies": { + "mimic-fn": "^2.1.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/optionator": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", + "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "optional": true, + "dependencies": { + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.6", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "word-wrap": "~1.2.3" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/ora": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", + "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==", + "dev": true, + "dependencies": { + "bl": "^4.1.0", + "chalk": "^4.1.0", + "cli-cursor": "^3.1.0", + "cli-spinners": "^2.5.0", + "is-interactive": "^1.0.0", + "is-unicode-supported": "^0.1.0", + "log-symbols": "^4.1.0", + "strip-ansi": "^6.0.0", + "wcwidth": "^1.0.1" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ora/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/ora/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/ora/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/ora/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/ora/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ora/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/os-tmpdir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/p-finally": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", + "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dev": true, + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/p-map": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", + "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==", + "dev": true, + "dependencies": { + "aggregate-error": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/package-hash": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-4.0.0.tgz", + "integrity": "sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.15", + "hasha": "^5.0.0", + "lodash.flattendeep": "^4.4.0", + "release-zalgo": "^1.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-github-url": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.2.tgz", + "integrity": "sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==", + "dev": true, + "bin": { + "parse-github-url": "cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", + "optional": true + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=", + "dev": true + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pixelmatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz", + "integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=", + "dev": true, + "dependencies": { + "pngjs": "^3.0.0" + }, + "bin": { + "pixelmatch": "bin/pixelmatch" + } + }, + "node_modules/pkg-dir": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", + "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", + "dev": true, + "dependencies": { + "find-up": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/pngjs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", + "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==", + "dev": true, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/prelude-ls": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", + "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", + "optional": true, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/printf": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/printf/-/printf-0.6.1.tgz", + "integrity": "sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==", + "dev": true, + "engines": { + "node": ">= 0.9.0" + } + }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "dev": true + }, + "node_modules/process-on-spawn": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/process-on-spawn/-/process-on-spawn-1.0.0.tgz", + "integrity": "sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==", + "dev": true, + "dependencies": { + "fromentries": "^1.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/proxy-addr": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", + "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "dev": true, + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/psl": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", + "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==", + "optional": true + }, + "node_modules/pump": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", + "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", + "dev": true, + "dependencies": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, + "node_modules/punycode": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", + "devOptional": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/qs": { + "version": "6.9.6", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz", + "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==", + "dev": true, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/qunit": { + "version": "2.18.1", + "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.18.1.tgz", + "integrity": "sha512-A2Adgr/DeMQOJZFVllyQi2wiGJVVXGSRRwMe39fNfuuftUYHHpGRTWUhBa8wNblunCAOUCt+1uFcg1L7NaxQTA==", + "dev": true, + "dependencies": { + "commander": "7.2.0", + "node-watch": "0.7.3", + "tiny-glob": "0.2.9" + }, + "bin": { + "qunit": "bin/qunit.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/qunit/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dev": true, + "dependencies": { + "safe-buffer": "^5.1.0" + } + }, + "node_modules/range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz", + "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==", + "dev": true, + "dependencies": { + "bytes": "3.1.1", + "http-errors": "1.8.1", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/raw-body/node_modules/bytes": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz", + "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/raw-body/node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "devOptional": true, + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/regexpp": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz", + "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/mysticatea" + } + }, + "node_modules/release-zalgo": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz", + "integrity": "sha1-CXALflB0Mpc5Mw5TXFqQ+2eFFzA=", + "dev": true, + "dependencies": { + "es6-error": "^4.0.1" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", + "dev": true + }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", + "dev": true + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/restore-cursor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", + "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==", + "dev": true, + "dependencies": { + "onetime": "^5.1.0", + "signal-exit": "^3.0.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/reusify": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "devOptional": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/rollup": { + "version": "2.75.6", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.6.tgz", + "integrity": "sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/rollup-plugin-terser": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", + "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "jest-worker": "^26.2.1", + "serialize-javascript": "^4.0.0", + "terser": "^5.0.0" + }, + "peerDependencies": { + "rollup": "^2.0.0" + } + }, + "node_modules/rollup-plugin-ts": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-ts/-/rollup-plugin-ts-3.0.2.tgz", + "integrity": "sha512-67qi2QTHewhLyKDG6fX3jpohWpmUPPIT/xJ7rsYK46X6MqmoWy64Ti0y8ygPfLv8mXDCdRZUofM3mTxDfCswRA==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^4.2.1", + "@wessberg/stringutil": "^1.0.19", + "ansi-colors": "^4.1.3", + "browserslist": "^4.20.4", + "browserslist-generator": "^1.0.66", + "compatfactory": "^1.0.1", + "crosspath": "^2.0.0", + "magic-string": "^0.26.2", + "ts-clone-node": "^1.0.0", + "tslib": "^2.4.0" + }, + "engines": { + "node": ">=14.9.0", + "npm": ">=7.0.0", + "pnpm": ">=3.2.0", + "yarn": ">=1.13" + }, + "funding": { + "type": "github", + "url": "https://github.com/wessberg/rollup-plugin-ts?sponsor=1" + }, + "peerDependencies": { + "@babel/core": ">=6.x || >=7.x", + "@babel/plugin-transform-runtime": ">=6.x || >=7.x", + "@babel/preset-env": ">=6.x || >=7.x", + "@babel/preset-typescript": ">=6.x || >=7.x", + "@babel/runtime": ">=6.x || >=7.x", + "@swc/core": ">=1.x", + "@swc/helpers": ">=0.2", + "rollup": ">=1.x || >=2.x", + "typescript": ">=3.2.x || >= 4.x" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@babel/plugin-transform-runtime": { + "optional": true + }, + "@babel/preset-env": { + "optional": true + }, + "@babel/preset-typescript": { + "optional": true + }, + "@babel/runtime": { + "optional": true + }, + "@swc/core": { + "optional": true + }, + "@swc/helpers": { + "optional": true + } + } + }, + "node_modules/rollup-plugin-ts/node_modules/@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dev": true, + "dependencies": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + } + }, + "node_modules/rollup-plugin-ts/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "node_modules/rollup-plugin-ts/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", + "dev": true + }, + "node_modules/run-async": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", + "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/rxjs": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.5.tgz", + "integrity": "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==", + "dev": true, + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "devOptional": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "devOptional": true + }, + "node_modules/saxes": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", + "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==", + "optional": true, + "dependencies": { + "xmlchars": "^2.2.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/semver": { + "version": "7.3.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", + "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "devOptional": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/send": { + "version": "0.17.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz", + "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==", + "dev": true, + "dependencies": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "1.8.1", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "~2.3.0", + "range-parser": "~1.2.1", + "statuses": "~1.5.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/send/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/send/node_modules/debug/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "node_modules/send/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, + "node_modules/serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "dev": true, + "dependencies": { + "randombytes": "^2.1.0" + } + }, + "node_modules/serve-static": { + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz", + "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==", + "dev": true, + "dependencies": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.17.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", + "devOptional": true + }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", + "dev": true + }, + "node_modules/shebang-command": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", + "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", + "dev": true, + "dependencies": { + "shebang-regex": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/shebang-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", + "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/shellwords": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz", + "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==", + "dev": true + }, + "node_modules/signal-exit": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", + "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==", + "devOptional": true + }, + "node_modules/simple-concat": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", + "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "optional": true + }, + "node_modules/simple-get": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz", + "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==", + "optional": true, + "dependencies": { + "decompress-response": "^4.2.0", + "once": "^1.3.1", + "simple-concat": "^1.0.0" + } + }, + "node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/socket.io": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.4.1.tgz", + "integrity": "sha512-s04vrBswdQBUmuWJuuNTmXUVJhP0cVky8bBDhdkf8y0Ptsu7fKU2LuLbts9g+pdmAdyMMn8F/9Mf1/wbtUN0fg==", + "dev": true, + "dependencies": { + "accepts": "~1.3.4", + "base64id": "~2.0.0", + "debug": "~4.3.2", + "engine.io": "~6.1.0", + "socket.io-adapter": "~2.3.3", + "socket.io-parser": "~4.0.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-adapter": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.3.3.tgz", + "integrity": "sha512-Qd/iwn3VskrpNO60BeRyCyr8ZWw9CPZyitW4AQwmRZ8zCiyDiL+znRnWX6tDHXnWn1sJrM1+b6Mn6wEDJJ4aYQ==", + "dev": true + }, + "node_modules/socket.io-parser": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", + "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==", + "dev": true, + "dependencies": { + "@types/component-emitter": "^1.2.10", + "component-emitter": "~1.3.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true + }, + "node_modules/spawn-args": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/spawn-args/-/spawn-args-0.2.0.tgz", + "integrity": "sha1-+30L0dcP1DFr2ePew4nmX51jYbs=", + "dev": true + }, + "node_modules/spawn-wrap": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-2.0.0.tgz", + "integrity": "sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==", + "dev": true, + "dependencies": { + "foreground-child": "^2.0.0", + "is-windows": "^1.0.2", + "make-dir": "^3.0.0", + "rimraf": "^3.0.0", + "signal-exit": "^3.0.2", + "which": "^2.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/spawn-wrap/node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", + "dev": true + }, + "node_modules/statuses": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", + "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "devOptional": true, + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "devOptional": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "devOptional": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-bom": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz", + "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-eof": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/styled_string": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/styled_string/-/styled_string-0.0.1.tgz", + "integrity": "sha1-0ieCvYEpVFm8Tx3xjEutjpTdEko=", + "dev": true + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/symbol-observable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", + "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/symbol-tree": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", + "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", + "optional": true + }, + "node_modules/tap-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/tap-parser/-/tap-parser-7.0.0.tgz", + "integrity": "sha512-05G8/LrzqOOFvZhhAk32wsGiPZ1lfUrl+iV7+OkKgfofZxiceZWMHkKmow71YsyVQ8IvGBP2EjcIjE5gL4l5lA==", + "dev": true, + "dependencies": { + "events-to-array": "^1.0.1", + "js-yaml": "^3.2.7", + "minipass": "^2.2.0" + }, + "bin": { + "tap-parser": "bin/cmd.js" + } + }, + "node_modules/tap-parser/node_modules/minipass": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", + "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", + "dev": true, + "dependencies": { + "safe-buffer": "^5.1.2", + "yallist": "^3.0.0" + } + }, + "node_modules/tap-parser/node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true + }, + "node_modules/tar": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz", + "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==", + "optional": true, + "dependencies": { + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "minipass": "^3.0.0", + "minizlib": "^2.1.1", + "mkdirp": "^1.0.3", + "yallist": "^4.0.0" + }, + "engines": { + "node": ">= 10" + } + }, + "node_modules/terser": { + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.1.tgz", + "integrity": "sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==", + "dev": true, + "dependencies": { + "@jridgewell/source-map": "^0.3.2", + "acorn": "^8.5.0", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/terser/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "node_modules/test-exclude": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", + "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", + "dev": true, + "dependencies": { + "@istanbuljs/schema": "^0.1.2", + "glob": "^7.1.4", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/testem": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/testem/-/testem-3.6.0.tgz", + "integrity": "sha512-sXwx2IlOadOhrKf0hsV1Yt/yuYhdfrtJ4dpp7T6pFN62GjMyKifjAv2SFm+4zYHee1JwxheO7JUL0+3iN0rlHw==", + "dev": true, + "dependencies": { + "@xmldom/xmldom": "^0.7.1", + "backbone": "^1.1.2", + "bluebird": "^3.4.6", + "charm": "^1.0.0", + "commander": "^2.6.0", + "compression": "^1.7.4", + "consolidate": "^0.15.1", + "execa": "^1.0.0", + "express": "^4.10.7", + "fireworm": "^0.7.0", + "glob": "^7.0.4", + "http-proxy": "^1.13.1", + "js-yaml": "^3.2.5", + "lodash.assignin": "^4.1.0", + "lodash.castarray": "^4.4.0", + "lodash.clonedeep": "^4.4.1", + "lodash.find": "^4.5.1", + "lodash.uniqby": "^4.7.0", + "mkdirp": "^0.5.1", + "mustache": "^3.0.0", + "node-notifier": "^9.0.1", + "npmlog": "^4.0.0", + "printf": "^0.6.1", + "rimraf": "^2.4.4", + "socket.io": "^4.1.2", + "spawn-args": "^0.2.0", + "styled_string": "0.0.1", + "tap-parser": "^7.0.0", + "tmp": "0.0.33" + }, + "bin": { + "testem": "testem.js" + }, + "engines": { + "node": ">= 7.*" + } + }, + "node_modules/testem/node_modules/ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/testem/node_modules/aproba": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "dev": true + }, + "node_modules/testem/node_modules/are-we-there-yet": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz", + "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==", + "dev": true, + "dependencies": { + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" + } + }, + "node_modules/testem/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "node_modules/testem/node_modules/gauge": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "dev": true, + "dependencies": { + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" + } + }, + "node_modules/testem/node_modules/is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "dev": true, + "dependencies": { + "number-is-nan": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/testem/node_modules/mkdirp": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", + "dev": true, + "dependencies": { + "minimist": "^1.2.5" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, + "node_modules/testem/node_modules/npmlog": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "dev": true, + "dependencies": { + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" + } + }, + "node_modules/testem/node_modules/readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dev": true, + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/testem/node_modules/rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + } + }, + "node_modules/testem/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true + }, + "node_modules/testem/node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, + "node_modules/testem/node_modules/string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "dev": true, + "dependencies": { + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/testem/node_modules/strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "dependencies": { + "ansi-regex": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true + }, + "node_modules/through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", + "dev": true + }, + "node_modules/tiny-glob": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", + "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==", + "dev": true, + "dependencies": { + "globalyzer": "0.1.0", + "globrex": "^0.1.2" + } + }, + "node_modules/tmp": { + "version": "0.0.33", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", + "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", + "dev": true, + "dependencies": { + "os-tmpdir": "~1.0.2" + }, + "engines": { + "node": ">=0.6.0" + } + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "dev": true, + "engines": { + "node": ">=0.6" + } + }, + "node_modules/tough-cookie": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz", + "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==", + "optional": true, + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.1.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", + "devOptional": true + }, + "node_modules/ts-clone-node": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ts-clone-node/-/ts-clone-node-1.0.0.tgz", + "integrity": "sha512-/cDYbr2HAXxFNeTT41c/xs/2bhLJjqnYheHsmA3AoHSt+n4JA4t0FL9Lk5O8kWnJ6jeB3kPcUoXIFtwERNzv6Q==", + "dev": true, + "dependencies": { + "compatfactory": "^1.0.1" + }, + "engines": { + "node": ">=14.9.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/wessberg/ts-clone-node?sponsor=1" + }, + "peerDependencies": { + "typescript": "^3.x || ^4.x" + } + }, + "node_modules/tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==", + "dev": true + }, + "node_modules/tsutils": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", + "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==", + "dev": true, + "dependencies": { + "tslib": "^1.8.1" + }, + "engines": { + "node": ">= 6" + }, + "peerDependencies": { + "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" + } + }, + "node_modules/tsutils/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, + "node_modules/type-check": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", + "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", + "optional": true, + "dependencies": { + "prelude-ls": "~1.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "dev": true, + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/typedarray-to-buffer": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", + "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", + "dev": true, + "dependencies": { + "is-typedarray": "^1.0.0" + } + }, + "node_modules/typescript": { + "version": "4.7.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", + "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, + "node_modules/ua-parser-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz", + "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + } + ], + "engines": { + "node": "*" + } + }, + "node_modules/uglify-js": { + "version": "3.15.5", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.5.tgz", + "integrity": "sha512-hNM5q5GbBRB5xB+PMqVRcgYe4c8jbyZ1pzZhS6jbq54/4F2gFK869ZheiE5A8/t+W5jtTNpWef/5Q9zk639FNQ==", + "dev": true, + "optional": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/underscore": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.2.tgz", + "integrity": "sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g==", + "dev": true + }, + "node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "optional": true, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.3.tgz", + "integrity": "sha512-ufSazemeh9Gty0qiWtoRpJ9F5Q5W3xdIPm1UZQqYQv/q0Nyb9EMHUB2lu+O9x1re9WsorpMAUu4Y6Lxcs5n+XQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + }, + "bin": { + "browserslist-lint": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "dependencies": { + "punycode": "^2.1.0" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "devOptional": true + }, + "node_modules/utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", + "dev": true, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", + "dev": true, + "bin": { + "uuid": "bin/uuid" + } + }, + "node_modules/v8-compile-cache": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", + "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", + "dev": true + }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/w3c-hr-time": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", + "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==", + "optional": true, + "dependencies": { + "browser-process-hrtime": "^1.0.0" + } + }, + "node_modules/w3c-xmlserializer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz", + "integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==", + "optional": true, + "dependencies": { + "xml-name-validator": "^4.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/wcwidth": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", + "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=", + "dev": true, + "dependencies": { + "defaults": "^1.0.3" + } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", + "devOptional": true + }, + "node_modules/whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "optional": true, + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/whatwg-mimetype": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz", + "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==", + "optional": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "devOptional": true, + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "which": "bin/which" + } + }, + "node_modules/which-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", + "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", + "dev": true + }, + "node_modules/wide-align": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", + "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", + "devOptional": true, + "dependencies": { + "string-width": "^1.0.2 || 2 || 3 || 4" + } + }, + "node_modules/word-wrap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", + "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", + "dev": true + }, + "node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/wrap-ansi/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/wrap-ansi/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/wrap-ansi/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "devOptional": true + }, + "node_modules/write-file-atomic": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", + "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "is-typedarray": "^1.0.0", + "signal-exit": "^3.0.2", + "typedarray-to-buffer": "^3.1.5" + } + }, + "node_modules/ws": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz", + "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==", + "optional": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xml-name-validator": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", + "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==", + "optional": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/xmlchars": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", + "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", + "optional": true + }, + "node_modules/y18n": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", + "dev": true + }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "devOptional": true + }, + "node_modules/yargs": { + "version": "15.4.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", + "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", + "dev": true, + "dependencies": { + "cliui": "^6.0.0", + "decamelize": "^1.2.0", + "find-up": "^4.1.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^4.2.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^18.1.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/yargs-parser": { + "version": "18.1.3", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", + "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", + "dev": true, + "dependencies": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + }, + "engines": { + "node": ">=6" + } + } + }, "dependencies": { "@ampproject/remapping": { "version": "2.2.0", @@ -721,7 +8062,8 @@ "acorn": { "version": "8.7.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz", - "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==" + "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==", + "devOptional": true }, "acorn-globals": { "version": "6.0.0", @@ -745,7 +8087,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-walk": { "version": "7.2.0", @@ -816,7 +8159,8 @@ "ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "devOptional": true }, "ansi-styles": { "version": "3.2.1", @@ -930,7 +8274,8 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "devOptional": true }, "base64-arraybuffer": { "version": "1.0.1", @@ -1021,6 +8366,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "devOptional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1347,12 +8693,14 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "devOptional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "devOptional": true }, "consolidate": { "version": "0.15.1", @@ -1542,6 +8890,7 @@ "version": "4.3.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", + "devOptional": true, "requires": { "ms": "2.1.2" } @@ -1570,7 +8919,8 @@ "deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", - "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==" + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "devOptional": true }, "deep-object-diff": { "version": "1.1.7", @@ -1605,7 +8955,8 @@ "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=" + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", + "devOptional": true }, "depd": { "version": "1.1.2", @@ -1675,7 +9026,8 @@ "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "devOptional": true }, "encodeurl": { "version": "1.0.2", @@ -1714,7 +9066,8 @@ "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true + "dev": true, + "requires": {} } } }, @@ -2024,7 +9377,8 @@ "esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", - "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "devOptional": true }, "esquery": { "version": "1.4.0", @@ -2047,12 +9401,14 @@ "estraverse": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", - "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==" + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "devOptional": true }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==" + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "devOptional": true }, "etag": { "version": "1.8.1", @@ -2225,7 +9581,8 @@ "fast-levenshtein": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", - "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" + "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", + "devOptional": true }, "fastq": { "version": "1.13.0", @@ -2458,7 +9815,8 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "devOptional": true }, "fsevents": { "version": "2.3.2", @@ -2527,6 +9885,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", + "devOptional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -2611,7 +9970,8 @@ "has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=" + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", + "devOptional": true }, "hasha": { "version": "5.2.2", @@ -2736,6 +10096,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "devOptional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -2744,7 +10105,8 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "devOptional": true }, "inquirer": { "version": "8.2.1", @@ -3002,7 +10364,8 @@ "is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "devOptional": true }, "is-glob": { "version": "4.0.3", @@ -3554,6 +10917,7 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "devOptional": true, "requires": { "yallist": "^4.0.0" } @@ -3571,6 +10935,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "devOptional": true, "requires": { "semver": "^6.0.0" }, @@ -3578,7 +10943,8 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "devOptional": true } } }, @@ -3631,12 +10997,14 @@ "mime-db": { "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", - "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==" + "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", + "devOptional": true }, "mime-types": { "version": "2.1.34", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", + "devOptional": true, "requires": { "mime-db": "1.51.0" } @@ -3657,6 +11025,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "devOptional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3701,7 +11070,8 @@ "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "devOptional": true }, "mustache": { "version": "3.2.1", @@ -3749,6 +11119,7 @@ "version": "2.6.7", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "devOptional": true, "requires": { "whatwg-url": "^5.0.0" } @@ -3901,7 +11272,8 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "devOptional": true }, "object-path": { "version": "0.11.8", @@ -3928,6 +11300,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "devOptional": true, "requires": { "wrappy": "1" } @@ -4116,7 +11489,8 @@ "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "devOptional": true }, "path-key": { "version": "3.1.1", @@ -4228,7 +11602,8 @@ "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", + "devOptional": true }, "qs": { "version": "6.9.6", @@ -4309,6 +11684,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "devOptional": true, "requires": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -4374,6 +11750,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "devOptional": true, "requires": { "glob": "^7.1.3" } @@ -4468,12 +11845,14 @@ "safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "devOptional": true }, "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "devOptional": true }, "saxes": { "version": "5.0.1", @@ -4488,6 +11867,7 @@ "version": "7.3.5", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", + "devOptional": true, "requires": { "lru-cache": "^6.0.0" } @@ -4562,7 +11942,8 @@ "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", + "devOptional": true }, "setprototypeof": { "version": "1.2.0", @@ -4594,7 +11975,8 @@ "signal-exit": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", - "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==" + "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==", + "devOptional": true }, "simple-concat": { "version": "1.0.1", @@ -4653,7 +12035,8 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "devOptional": true }, "source-map-support": { "version": "0.5.21", @@ -4714,28 +12097,31 @@ "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", "dev": true }, + "string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "devOptional": true, + "requires": { + "safe-buffer": "~5.2.0" + } + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "devOptional": true, "requires": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, - "string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "requires": { - "safe-buffer": "~5.2.0" - } - }, "strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "devOptional": true, "requires": { "ansi-regex": "^5.0.1" } @@ -5000,6 +12386,15 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -5011,15 +12406,6 @@ "strip-ansi": "^3.0.0" } }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -5097,7 +12483,8 @@ "tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", + "devOptional": true }, "ts-clone-node": { "version": "1.0.0", @@ -5224,7 +12611,8 @@ "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "devOptional": true }, "utils-merge": { "version": "1.0.1", @@ -5280,7 +12668,8 @@ "webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", + "devOptional": true }, "whatwg-encoding": { "version": "2.0.0", @@ -5301,6 +12690,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "devOptional": true, "requires": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" @@ -5325,6 +12715,7 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", + "devOptional": true, "requires": { "string-width": "^1.0.2 || 2 || 3 || 4" } @@ -5332,7 +12723,8 @@ "word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==" + "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "devOptional": true }, "wordwrap": { "version": "1.0.0", @@ -5380,7 +12772,8 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "devOptional": true }, "write-file-atomic": { "version": "3.0.3", @@ -5398,7 +12791,8 @@ "version": "8.4.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz", "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==", - "optional": true + "optional": true, + "requires": {} }, "xml-name-validator": { "version": "4.0.0", @@ -5421,7 +12815,8 @@ "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "devOptional": true }, "yargs": { "version": "15.4.1", diff --git a/src/color.class.js b/src/color.class.js index 2f73b9cd50e..d51709e6e18 100644 --- a/src/color.class.js +++ b/src/color.class.js @@ -271,7 +271,7 @@ * @memberOf fabric.Color */ // eslint-disable-next-line max-len - fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; + fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?%?)\s*,\s*(\d{1,3}(?:\.\d+)?%?)\s*,\s*(\d{1,3}(?:\.\d+)?%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; /** * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) @@ -279,7 +279,7 @@ * @field * @memberOf fabric.Color */ - fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; + fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}%)\s*,\s*(\d{1,3}%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; /** * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js index efaede7a82e..d4f8c66a1e5 100644 --- a/src/mixins/object_interactivity.mixin.js +++ b/src/mixins/object_interactivity.mixin.js @@ -335,7 +335,7 @@ * @param {DragEvent} e * @returns {boolean} */ - canDrop: function (e) { // eslint-disable-line no-unused-vars + canDrop: function (/* e */) { return false; }, diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 0609ee87a96..7222d59cecd 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -1,6 +1,5 @@ (function(global) { - var fabric = global.fabric || (global.fabric = { }), - clone = fabric.util.object.clone; + var fabric = global.fabric || (global.fabric = { }); var additionalProps = ('fontFamily fontWeight fontSize text underline overline linethrough' +